/*
Theme Name: Taraf Digital Store
Theme URI: https://taraftime.com
Author: Taraf Time
Author URI: https://taraftime.com
Description: Minimal RTL-first digital products storefront theme. No plugins required. Front page shows a grid of digital products with buy links.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: taraf-digital-store
Tags: rtl-language-support, blog, e-commerce, one-column, custom-colors
*/

:root{
  --bg:#0A2342;       /* خلفية رئيسية كحلي */
  --card:#102C54;     /* بطاقات */
  --ink:#E6F1FF;      /* نص أساسي */
  --muted:#A7BFD6;    /* نص ثانوي */
  --brand:#3FA9F5;    /* زر أساسي */
  --brand-2:#5CC6FF;  /* تدرّج للزر */
  --line:#1E3A5F;     /* حدود خفيفة */
  --ok:#5CC6FF;       /* السعر */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html[dir="rtl"] body, body{font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Naskh Arabic","Cairo",Tahoma,sans-serif; background:var(--bg); color:var(--ink); margin:0;}
a{text-decoration:none}

.container{max-width:1200px;margin-inline:auto;padding:clamp(16px,3vw,36px)}
.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:42px;width:auto;display:block}
.brand h1{font-size:clamp(20px,4vw,28px);margin:0}
.search{display:flex;gap:8px;align-items:center}
.search input{background:#0c1f3d;border:1px solid var(--line);color:var(--ink);padding:10px 12px;border-radius:10px;min-width:240px}
.search button{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0;color:#0d1324;padding:10px 12px;border-radius:10px;font-weight:700;cursor:pointer}

.hero{background:linear-gradient(180deg,rgba(63,169,245,.15),transparent);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:10px;margin-bottom:22px;text-align:center}
.hero h2{margin:0 0 6px;font-size:clamp(22px,5vw,34px)}
.hero p{margin:0;color:var(--muted)}

.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.media{position:relative;aspect-ratio:3/4;background:#0b1a33}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;inset-inline-start:10px;inset-block-start:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#00122a;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.3px}
.body{padding:16px}
.title{margin:0 0 6px;font-size:18px;line-height:1.5}
.sub{margin:0 0 12px;color:var(--muted)}
.meta{list-style:none;margin:0 0 12px;padding:0;color:var(--muted);font-size:14px}
.meta li{padding:5px 0;border-bottom:1px dashed var(--line)}
.meta li:last-child{border-bottom:0}
.cta{display:flex;align-items:center;gap:8px;margin-top:auto}
.price{margin-inline-end:auto}
.price b{color:var(--ok);font-size:20px}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;font-weight:800;border:1px solid var(--line);transition:.2s ease}
.btn.buy{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#081024;border:0}
.btn.buy:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:#0f2244}

.footer{margin-top:30px;color:var(--muted);text-align:center;font-size:14px}
@media (hover:hover){ .card:hover{transform:translateY(-2px);transition:.2s} }