/* ui.css — Mini UI Kit (RTL-first, no libs) */
/* ========== Variables ========== */
:root{
  --bg-1:#f5f6f7; --bg-2:#ffffff; --bg-3:#eee;
  --txt-1:#111827; --txt-2:#4b5563; --txt-light:#fafafa;
  --black:#000; --white:#fff; --muted:#9ca3af;
  --brand:#000; --brand-2:#111; --ring:rgba(0,0,0,.05);
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:1.25rem;            /* 20px ~ rounded-2xl */
  --radius-lg:1.5rem; /* ~ rounded-3xl */
  --radius-gsm:15px;
  --radius-sm:.75rem;
  --maxw:80rem;                /* ~ max-w-7xl */
}
@font-face{font-family:'Almarai';src:url(fonts/Almarai-Regular.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Almarai';src:url(fonts/Almarai-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
/* ========== Base ========== */
*{box-sizing:border-box;text-decoration: none;}
html{scroll-behavior:smooth}
html[dir="rtl"] body{direction:rtl}
body{
  margin:0; min-height:100vh; background:linear-gradient(135deg,var(--bg-1),var(--bg-2) 40%,#f0f1f2);
  color:var(--txt-1); font-family:'Almarai',sans-serif;
}
.card-thumb img,
.pcard .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9; /* غيّرها حسب تصميمك */
}

/* Helpers */
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:.5rem}
@media (min-width:640px){ .container{padding-inline:1rem} }
.hidden{display:none}
.flex{display:flex} .grid{display:grid}
.items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem}
.px-2{padding-inline:.5rem} .px-4{padding-inline:1rem}
.py-2{padding-block:.5rem} .py-3{padding-block:.75rem} .py-16{padding-block:4rem}
.p-3{padding: .75rem} .p-5{padding:1.25rem} .p-6{padding:8px}
.mt-2{margin-top:.5rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem} .mt-8{margin-top:2rem} .mb-2{margin-bottom:.5rem} .mb-4{margin-bottom:5px} .mb-8{margin-bottom:10px} .mb-10{margin-bottom:2.5rem}
.text-center{text-align:center}
.text-xs{font-size:.75rem} .text-sm{font-size:14px} .text-base{font-size:14px}
.text-lg{font-size:1rem} .text-2xl{font-size:1.5rem} .text-3xl{font-size:20px} .text-4xl{font-size:2.25rem}
.font-bold{font-weight:700} .font-black{font-weight:900} .leading-snug{line-height:1.35}
.rounded{border-radius:var(--radius-sm)} .rounded-xl{border-radius:var(--radius)}
.rounded-2xl{border-radius:var(--radius)} .rounded-3xl{border-radius:var(--radius-lg)}
.border{border:1px solid #e5e7eb} .border-b{border-bottom:1px solid #e5e7eb}
.shadow{box-shadow:var(--shadow)} .shadow-soft{box-shadow:var(--shadow)}
.bg-white{background:#fff} .bg-pos{background:#cfcfcf} .bg-white-80{background:rgba(255,255,255,.8)}
.bg-black{background:#000} .text-white{color:#fff}
.hover\:bg-ink:hover{background:#111} .hover\:bg-fade:hover{background:#f3f4f6}
.maxw-lg{max-width:36rem}
.w-full{width:100%} .h-full{height:100%}
.object-cover{object-fit:cover}
.aspect-video{position:relative; padding-top:56.25%} .aspect-video>*{position:absolute; inset:0}
.no-scrollbar{scrollbar-width:none} .no-scrollbar::-webkit-scrollbar{display:none}

/* Responsive Display */
@media (min-width:640px){ .sm\:flex{display:flex} .sm\:px-4{padding-inline:1rem} }
@media (min-width:1024px){
  .lg\:grid{display:grid}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:col-span-2{grid-column:span 2 / span 2}
  .lg\:rounded-3xl{border-radius:var(--radius-lg)}
}

/* ========== Header (sticky) ========== */
.header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.8);
  backdrop-filter:blur(16px); border-bottom:1px solid #e5e7eb;
}

/* ========== Buttons ========== */
.btn{display:inline-block; padding:8px 8px; border:1px solid #e5e7eb; border-radius:var(--radius); font-size:14px; text-decoration:none; color:inherit; background:#fff; transition:.2s}
.btn:hover{background:#f3f4f6}
.btn-dark{background:#000; color:#fff;}
.btn-dark:hover{background:#111}
.btn-ghost{background:rgba(255,255,255,.9); color:#000; border-color:#fff}

/* ========== Cards ========== */
.card{background:#fff;border:1px solid #eee; border-radius:var(--radius-gsm); box-shadow:var(--shadow); overflow:hidden}
.card-inner{padding:5px}

/* ========== Slider ========== */
.slider{position:relative; overflow:hidden}
.slides{
  display:flex; transition:transform .6s ease;
  height:50vh;           /* أصغر للجوال */
  min-height:260px; will-change:transform
}
@media (min-width:768px){
  .slides{ height:60vh; } /* يرجع كبير على التابلت/كمبيوتر */
}

.slide{
  flex:0 0 auto; height:100%;
  position:relative;     /* مهم: مرجع مطلق للعنصرين تحته */
}
.slide img{width:100%; height:100%; object-fit:cover}

.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border-radius:999px; padding:.5rem; border:1px solid #444;
  box-shadow:var(--shadow); cursor:pointer
}
.slider .nav.prev{inset-inline-start:.2rem}
.slider .nav.next{inset-inline-end:.2rem}
.slider .dots{
  position:absolute; bottom:1rem; inset-inline:50%;
  transform:translateX(-50%); display:flex; gap:.5rem
}
.slider .dot{
  width:32px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.4); border:none; cursor:pointer
}
.slider .dot.active{background:#fff}

/* overlay gradient + caption */
.overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.45), rgba(0,0,0,.18), transparent);
  z-index:1;             /* تحت العنوان */
}
.caption{
  position:absolute; bottom:2rem; inset-inline:1rem;
  max-width:36rem; color:#fff;
  z-index:2;             /* فوق الغطاء والصورة */
}
.drop-shadow{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* عناوين السلايدر — استجابة + ضمان اللون */
.caption h2{
  margin:0;
  font-weight:800; line-height:1.3;
  color:#fff !important;             /* لا ينعكس بلون آخر */
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  font-size:1.25rem;                 /* للجوال */
}
@media (min-width:640px){ .caption h2{ font-size:1.75rem; } }
@media (min-width:1024px){ .caption h2{ font-size:2.25rem; } }

/* ========== “About” Glass panel ========== */
.glass{backdrop-filter:blur(10px); background:rgba(255,255,255,.7)}
.ring{box-shadow:0 0 0 1px var(--ring) inset}

/* ========== Sections Grids ========== */
.grid-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px;padding-block: 10px;}
@media (min-width:640px){ .grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .grid-cards{grid-template-columns:repeat(4,minmax(0,1fr))} }

.card-thumb{position:relative; aspect-ratio:4/3; overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.card:hover .card-thumb img{transform:scale(1.05)}
.card-thumb .grad{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.4), transparent)}
.badge{position:absolute;bottom:.15rem; background:rgba(255,255,255,.9); color:#000; border-radius:10px;right: 10px; padding:3px .75rem; font-size:.75rem; box-shadow:var(--shadow)}
/* ========== Videos scroller (manual) ========== */
.videos-wrap{position:relative}
.videos-wrap .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border-radius:999px;
  padding:.5rem;
  border:1px solid #444;
  box-shadow:var(--shadow);
  cursor:pointer;
  z-index:2; /* فوق الفيديوهات */
}
.videos-wrap .nav.prev{ inset-inline-start:.5rem; }
.videos-wrap .nav.next{ inset-inline-end:.5rem; }

.bg-dark-grad .texture{ z-index:0; pointer-events:none; }
.vcard .frame{ position:relative; z-index:1; }

.videos-track{display:flex; gap:1.5rem; padding-inline:.5rem; scroll-snap-type:x mandatory; overflow-x:auto}
.videos-track > .vcard{scroll-snap-align:center; min-width:90vw}
@media (min-width:768px){ .videos-track > .vcard{min-width:70vw} }
@media (min-width:1024px){ .videos-track > .vcard{min-width:25vw} }
.vcard .frame{position:relative; height:72vh; min-height:450px; overflow:hidden; border-radius:1rem; border:1px solid rgba(255,255,255,.1); background:#0b0b0b; box-shadow:var(--shadow);}
/* عنوان الفيديو */
.vcard .vtitle{
  margin: 0 0 .5rem 0;        /* مسافة تحت العنوان */
  padding: .25rem .5rem;      /* حشو بسيط */
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: rgba(0,0,0,.55); /* شارة خفيفة */
  border-radius: .5rem;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* لو العنوان طويل */
}

/* ========== Posts scroller (مثل الفيديو) ========== */
.posts-wrap{position:relative}
.posts-wrap .nav{
  position:absolute; top:50%; transform:translateY(-50%);border:1px solid #444;
  border-radius:999px; padding:.5rem; box-shadow:var(--shadow);
  cursor:pointer; z-index:2;
}
.posts-wrap .nav.prev{ inset-inline-start:.2rem; }
.posts-wrap .nav.next{ inset-inline-end:.2rem; }

.posts-track{
  display:flex; gap:1rem; padding-inline:.5rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
}
.posts-track.no-scrollbar{scrollbar-width:none}
.posts-track.no-scrollbar::-webkit-scrollbar{display:none}
.post-content img.post-img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0.75rem auto;
  border-radius:12px;       /* اختياري */
  box-shadow:0 2px 6px rgba(0,0,0,.05); /* اختياري */
}

/* كرت المقال كعرض ثابت ليتناسب مع الشريط الأفقي */
.pcard{
  scroll-snap-align:center;
  min-width:90vw;            /* للجوال */
  max-width:90vw;
  background:#fff; border:1px solid #eee; border-radius:var(--radius-gsm);
  box-shadow:var(--shadow); overflow:hidden;
}
@media (min-width:768px){
  .pcard{ min-width:60vw; max-width:60vw; }
}
@media (min-width:1024px){
  .pcard{ min-width:28vw; max-width:28vw; }
}

/* صورة داخل الكرت */
.pcard .thumb{position:relative; aspect-ratio:16/9; overflow:hidden}
.pcard .thumb img{width:100%; height:100%; object-fit:cover}
.pcard .body{padding:1rem}

/* ========== FAQ ========== */
.faq-item{border:1px solid rgba(255,255,255,.12);margin: 5px; border-radius:1rem; background:rgba(255,255,255,.05); backdrop-filter:blur(6px); overflow:hidden; box-shadow:var(--shadow)}
.faq-toggle{font-family:'Almarai',sans-serif;width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; text-align:right; font-size:1rem; font-weight:700; background:transparent; color:#fff; border:none; cursor:pointer}
.faq-content{display:none; padding:0 1.25rem 1.25rem; color:#ffdd00}
.faq-item.open .faq-content{display:block}
.faq-item.open .faq-icon{transform:rotate(180deg); transition:transform .3s}

/* ========== Footer ========== */
.footer{background:rgba(255,255,255,.7); backdrop-filter:blur(8px); padding:2.5rem 0; font-size:.9rem; border-top:1px solid #eee}
.footer a{text-decoration:none; color:inherit}
.hr{border-top:1px solid #eee; margin-top:2rem; padding-top:1rem}

/* ========== Titles ========== */
.h2{font-size:1.875rem; font-weight:800}
.section{padding-block:10px}

/* ========== Utility BGs (two we actually use) ========== */
.bg-dark-grad{background:linear-gradient(135deg,#111827,#1f2937 60%, #0b0b0b); color:#fff; position:relative}
.bg-dark-grad .texture{position:absolute; inset:0; background-image:url('https://www.transparenttextures.com/patterns/asfalt-light.png')}
 
 /* ==== Mobile nav (dropdown) ==== */

/* إخفاء عناصر بالجوال بعد 640px (للزر 📋) */
@media (min-width:640px){
  .sm\:hidden{ display:none !important; }
}

/* حاوية القائمة المنسدلة تحت الهيدر */
.mobile-menu{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid #e5e7eb;
  box-shadow:var(--shadow);
}

/* تخطيط بسيط للروابط داخل المنسدلة */
.mobile-nav{
  display:grid;
  gap:.5rem;
  padding:.75rem 0;
}