/* مقادير — نظام الواجهة. كل لون ومسافة وزاوية من نظام التصميم.
   القيم الوحيدة المكتوبة بالإيد هنا هي التوكنات في :root.
   مبني موبايل-أولًا: الأساس للتليفون، والـmedia queries بتزوّد للتابلت والديسكتوب. */

:root{
  --surface-100:#FBF8F1; --surface-200:#F1EBE0; --surface-card:#FFFDF8; --surface-dark:#1E1915;
  --ink:#2A231E; --ink-muted:#6B5D52; --ink-inverse:#FBF8F1; --line:#E3DACB;
  --brand:#C2562F; --wa:#15803D; --brand-strong:#A84524; --brand-soft:#F7E4DA;
  --placeholder:#E4DACB; --success:#2F6F4F; --danger:#A32C22;

  /* ponytail: زرار brand + ink-inverse بيطلع 4.24:1 بس، وده تحت 4.5 لنص 16px/700.
     الفاتح بياخد brand-strong خلفية، والغامق بيقلب النص للفحمي. النتيجة 5.59 و6.47.
     لو التوكنات اتصلّحت في النظام نفسه، المتغيرين دول بيتشالوا. */
  --brand-btn:#A84524; --on-brand:#FBF8F1;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
  --hairline:1px; --focus:2px;
  /* ponytail: النظام بيقول «المسافات من السلم» وبيقول كمان «الأزرار حشو 14px × 28px».
     القاعدة الأخص بتغلب، والاستثناء متعرّف هنا مرة واحدة بدل ما يتناثر في الملف. */
  --btn-pad-y:14px; --btn-pad-x:28px;
  --sans:"Almarai",Tahoma,"Segoe UI",sans-serif;
  --gutter:20px;

  /* الحركة: منحنى واحد للوصول الواثق، وتلات سرعات */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t-base:250ms; --t-slow:600ms;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-100:#1E1915; --surface-200:#241E1A; --surface-card:#2A231E; --surface-dark:#12100E;
    --ink:#FBF8F1; --ink-muted:#CFC4B6; --ink-inverse:#FBF8F1; --line:#4A3F37;
    --brand:#E0875F; --brand-strong:#C2562F; --brand-soft:#3A2419;
    --placeholder:#332B25; --success:#7FBF9B; --danger:#F0A79F;
    --brand-btn:#E0875F; --on-brand:#1E1915;
  }
}
:root[data-theme="dark"]{
  --surface-100:#1E1915; --surface-200:#241E1A; --surface-card:#2A231E; --surface-dark:#12100E;
  --ink:#FBF8F1; --ink-muted:#CFC4B6; --ink-inverse:#FBF8F1; --line:#4A3F37;
  --brand:#E0875F; --brand-strong:#C2562F; --brand-soft:#3A2419;
  --placeholder:#332B25; --success:#7FBF9B; --danger:#F0A79F;
  --brand-btn:#E0875F; --on-brand:#1E1915;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-block-start:88px; scrollbar-color:var(--line) var(--surface-100)}
body{
  margin:0; background:var(--surface-100); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7; font-weight:400;
  -webkit-text-size-adjust:100%; caret-color:var(--brand);
}
::selection{background:var(--brand-soft); color:var(--ink)}
h1,h2,h3{margin:0; font-weight:800; line-height:1.2; text-wrap:balance}
h1{font-size:clamp(30px, 5vw, 40px)}
h2{font-size:clamp(24px, 3.5vw, 30px); line-height:1.25}
h3{font-size:22px; font-weight:700; line-height:1.3}
p{margin:0; max-width:640px}
a{color:var(--brand-btn); font-weight:700; text-underline-offset:4px; transition:color var(--t-fast)}
ul,ol{margin:0; padding:0; list-style:none}
img{display:block; max-width:100%; height:auto}
svg{display:block}
:focus-visible{outline:var(--focus) solid var(--brand); outline-offset:3px; border-radius:var(--radius-sm)}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.wrap{max-width:1160px; margin-inline:auto; padding-inline:var(--gutter)}
.sec{padding-block:var(--space-7)}
.sec--alt{background:var(--surface-200); border-block:var(--hairline) solid var(--line)}
.sec.sec--tight{padding-block:var(--space-6)}

/* ليه مقادير: تلات أسباب، كل واحد كارت بخط فوق بلون البراند */
.why{margin-block-start:var(--space-2)}
.why .why__item{border-block-start:3px solid var(--brand)}
.why__item h3{margin-block-end:var(--space-2)}
.why__guarantee{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-block-start:var(--space-5); padding:var(--space-4) var(--space-5); border-radius:var(--radius-lg); background:var(--brand-soft); font-size:18px}
.why__guarantee strong{color:var(--brand-btn)}

/* إزاي بنشتغل: شريط صغير، العنوان جنب تلات خطوات بأرقام، مش كروت */
.steps-mini{display:grid; gap:var(--space-4)}
.steps-mini__h{font-size:22px; margin:0}
.steps-mini__list{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4)}
.steps-mini__list li{display:flex; gap:var(--space-3); align-items:flex-start}
.steps-mini__no{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-pill); background:var(--brand-btn); color:var(--on-brand); font-weight:800; font-size:15px}
.steps-mini h3{font-size:16px; margin:0 0 var(--space-1)}
.steps-mini p{margin:0}
@media (min-width:860px){
  .steps-mini{grid-template-columns:minmax(160px, 220px) 1fr; align-items:start; gap:var(--space-6)}
  .steps-mini__list{grid-template-columns:repeat(3, 1fr)}
}
.eyebrow{font-size:14px; font-weight:700; color:var(--brand-btn); margin-block-end:var(--space-3)}
.lead{font-size:clamp(18px, 2vw, 20px); color:var(--ink-muted)}
.muted{color:var(--ink-muted)}
.small{font-size:14px; line-height:1.6}
.caption{font-size:13px; line-height:1.6; color:var(--ink-muted)}
.head{margin-block-end:var(--space-6)}
.head p{margin-block-start:var(--space-3); color:var(--ink-muted)}
.head .eyebrow{margin-block-start:0; color:var(--brand-btn)}
.stack{display:grid; gap:var(--space-4)}
.narrow{max-width:760px}

/* الأزرار */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-md);
  font-family:inherit; font-size:16px; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer; border:var(--hairline) solid transparent;
  transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast),
             filter var(--t-fast), transform var(--t-fast);
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--brand-btn); color:var(--on-brand)}
.btn--primary:hover{filter:brightness(.92)}
.btn--secondary{background:transparent; color:var(--ink-muted); border-color:var(--line)}
.btn--secondary:hover{color:var(--ink); border-color:var(--ink-muted)}
.btn--danger{background:transparent; color:var(--danger); border-color:var(--danger)}
.btn--sm{min-height:44px; padding:var(--space-3) var(--space-4); font-size:14px; border-radius:var(--radius-sm)}
.btn__icon{width:18px; height:18px; flex:none; transition:transform var(--t-base) var(--ease-out)}
/* RTL: السهم بيتحرك في اتجاه القراءة، يعني لليسار */
.btn:hover .btn__icon{transform:translateX(-4px)}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; filter:none}

.chip{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
  background:var(--brand-soft); color:var(--ink); font-size:14px; font-weight:700;
}
.chip--ok{background:var(--surface-200); color:var(--success)}
.chip--warn{background:var(--surface-200); color:var(--danger)}

.card{
  background:var(--surface-card); border:var(--hairline) solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-5);
  transition:border-color var(--t-base), transform var(--t-base) var(--ease-out);
}
.notice{
  background:var(--brand-soft); color:var(--ink); border-radius:var(--radius-md);
  padding:var(--space-4); font-size:14px; margin-block-start:var(--space-3);
}

/* الهيدر والفوتر */
.site-head{
  position:sticky; inset-block-start:0; z-index:10;
  background:var(--surface-100); border-block-end:var(--hairline) solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; gap:var(--space-3); min-height:64px}
.brandmark img{height:40px; width:auto}
.nav{display:none; align-items:center; gap:var(--space-5); margin-inline-start:auto}
.nav a{position:relative; color:var(--ink); font-weight:400; font-size:16px; text-decoration:none; padding-block:var(--space-2)}
.nav a::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform var(--t-base) var(--ease-out);
}
.nav a:hover{color:var(--brand-btn)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.site-head .btn{margin-inline-start:auto; padding-inline:var(--space-4); font-size:14px}
.site-head .caption{margin-inline-start:auto}

/* قائمة الموبايل — details أصلية، بتشتغل من غير JS */
.menu{border:0}
.menu > summary{
  list-style:none; display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--radius-md); border:var(--hairline) solid var(--line);
  background:var(--surface-card); color:var(--ink); cursor:pointer;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{border-color:var(--ink-muted)}
.menu__icon{width:22px; height:22px}
.menu__icon path{transform-box:fill-box; transform-origin:center; transition:transform var(--t-base) var(--ease-out), opacity var(--t-fast)}
.menu[open] .menu__icon path:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[open] .menu__icon path:nth-child(2){opacity:0; transform:scaleX(0)}
.menu[open] .menu__icon path:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu__panel{
  position:absolute; inset-inline:0; inset-block-start:100%; display:grid;
  padding:var(--space-2) var(--gutter) var(--space-5);
  background:var(--surface-100); border-block-end:var(--hairline) solid var(--line);
  animation:drop var(--t-base) var(--ease-out) both;
}
.menu__panel a{
  display:block; padding-block:var(--space-3); font-size:18px; font-weight:700;
  color:var(--ink); text-decoration:none; border-block-end:var(--hairline) solid var(--line);
}
.menu__panel a:last-child{border-block-end:0}
.menu__panel a:hover{color:var(--brand-btn)}
@keyframes drop{from{opacity:0; transform:translateY(-8px)}}

.site-foot{background:var(--surface-dark); color:var(--ink-inverse); margin-block-start:var(--space-8)}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:center; padding-block:var(--space-7)}
.site-foot img{height:40px; width:auto}
.site-foot nav{display:flex; gap:var(--space-5); flex-wrap:wrap}
.site-foot a{color:var(--ink-inverse); font-weight:400; text-decoration:none; font-size:14px}
.site-foot a:hover{text-decoration:underline}
.site-foot .caption{color:var(--ink-inverse); opacity:.7; width:100%}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}

/* الهيرو — اللحظة الوحيدة المؤلَّفة في الصفحة:
   النص بيطلع سطر ورا سطر، والإطار بيتكشف من ناحية النص، وبعدها الصور بتتبدّل ببطء. */
.hero{padding-block:var(--space-7)}
.hero-grid{display:grid; gap:var(--space-6); align-items:center}
.hero-grid > .frame{max-width:640px}   /* تابلت طولي: الصورة مش بتاكل الشاشة كلها */
.hero h1{margin-block:var(--space-4) 0; font-size:clamp(40px, 7vw, 58px)}
.hero .lead{margin-block-start:var(--space-5)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-6)}
.hero-cta .btn{flex:1 1 100%}
.hero-copy > *{animation:rise var(--t-slow) var(--ease-out) both}
.hero-copy > :nth-child(2){animation-delay:80ms}
.hero-copy > :nth-child(3){animation-delay:160ms}
.hero-copy > :nth-child(4){animation-delay:240ms}
.hero .frame{animation:wipe 900ms var(--ease-out) 150ms both}
@keyframes rise{from{opacity:0; transform:translateY(16px); filter:blur(4px)}}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)} to{clip-path:inset(0)}}
@keyframes fade{from{opacity:0}}

.frame{
  position:relative; overflow:hidden;
  background:var(--placeholder); border:var(--hairline) solid var(--line);
  border-radius:var(--radius-lg); aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; padding:var(--space-5);
}
.frame span{color:var(--ink-muted); font-size:14px; text-align:center}
.hero-slides{padding:0}
.hero-slides img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
}
/* الرندرات 4:3 زي الكادر، فبتملاه من غير شرايط. الجديدة بتدخل فوق القديمة،
   والقديمة بتفضل ظاهرة تحتها لحد ما الجديدة تكمل، فمفيش لحظة الخلفية بتبان فيها */
.hero-slides{background:var(--surface-dark)}
.hero-slides img.is-active{opacity:1; z-index:2; animation:slidein 800ms var(--ease-out) both}
.hero-slides img.is-leaving{opacity:1; z-index:1}
@keyframes slidein{from{opacity:0; transform:translateX(-32px)}}
/* شريط التقدم: خط واحد بلون العلامة، بيتملي من ناحية البداية (اليمين في RTL) */
.hero-slides__bar{
  position:absolute; inset-inline:0; inset-block-end:0; height:3px; z-index:3;
  background:var(--brand); transform:scaleX(0); transform-origin:100% 50%;
}
.hero-slides__bar.is-running{animation:fill var(--slide-ms, 5000ms) linear both}
@keyframes fill{to{transform:scaleX(1)}}

/* الشبكات */
.grid-2,.grid-3,.grid-4{display:grid; gap:var(--space-4)}
@media (hover:hover){
  .grid-3 .card:hover,.grid-4 .card:hover{border-color:var(--ink-muted); transform:translateY(-2px)}
}

/* ظهور الأقسام مع التمرير — بيشتغل بس لما JS موجود، وإلا كل حاجة ظاهرة من الأول */
.js [data-reveal],
.js [data-reveal-stagger] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-out), border-color var(--t-base);
}
.js [data-reveal].is-in,
.js [data-reveal-stagger].is-in > *{opacity:1; transform:none}

/* الكاروسيل — scroll-snap أصلي، من غير مكتبة. على الموبايل بيمتد لحد حرف الشاشة. */
.carousel{position:relative}
.carousel__track{
  display:flex; gap:var(--space-4); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; overscroll-behavior-x:contain; padding-block-end:var(--space-2);
  margin-inline:calc(-1*var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__item{flex:0 0 84%; scroll-snap-align:start; position:relative; display:block; color:var(--ink); text-decoration:none}
.carousel__cap{display:block; margin-block-start:var(--space-2); font-size:14px; font-weight:700}
.carousel__item:hover .carousel__cap{color:var(--brand-btn)}
.carousel__item img{
  border:var(--hairline) solid var(--line); border-radius:var(--radius-lg);
  aspect-ratio:4/3; object-fit:contain; width:100%; background:var(--surface-200);
}
.carousel__bar{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-block-start:var(--space-3)}
/* النقط بتلف على سطرين لو الصور كتير، بدل ما تخرج برة الصفحة على الموبايل */
.carousel__dots{display:flex; flex-wrap:wrap; min-width:0; gap:0 var(--space-1)}
.carousel__dots button{
  width:28px; min-height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.carousel__dots button::before{
  content:""; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--line);
  transition:transform var(--t-base) var(--ease-out), background-color var(--t-base);
}
.carousel__dots button:hover::before{background:var(--ink-muted)}
.carousel__dots button[aria-current="true"]::before{background:var(--brand); transform:scaleX(2.5)}
.carousel__nav{display:flex; gap:var(--space-2)}
.carousel__nav button{
  min-height:44px; min-width:44px; padding:0; display:inline-grid; place-items:center;
  border-radius:var(--radius-md); border:var(--hairline) solid var(--line);
  background:var(--surface-card); color:var(--ink); cursor:pointer;
  transition:border-color var(--t-fast), transform var(--t-fast);
}
.carousel__nav button:hover{border-color:var(--ink-muted)}
.carousel__nav button:active{transform:scale(.95)}
.carousel__nav svg{width:20px; height:20px}
[data-carousel-play][aria-pressed="true"] .ico-play{display:none}
[data-carousel-play][aria-pressed="false"] .ico-pause{display:none}
html:not(.js) .carousel__dots,html:not(.js) [data-carousel-play]{display:none}

/* الباقات */
.plan{
  background:var(--surface-card); border:var(--hairline) solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-4); height:100%;
  transition:border-color var(--t-base);
}
.plan:hover,.plan--pick{border-color:var(--brand)}
.plan .price{font-size:40px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums}
.plan .price small{font-size:16px; font-weight:400; color:var(--ink-muted)}
.plan ul{display:grid; gap:var(--space-2); color:var(--ink-muted); font-size:14px}
.plan li{padding-inline-start:var(--space-4); position:relative}
.plan li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:10px;
  width:6px; height:6px; border-radius:var(--radius-pill); background:var(--brand);
}
.plan .btn{margin-block-start:auto}
/* تلات باقات: سطر «لمين» تحت السعر، واللي في النص عليها شارة ومرفوعة شوية */
.plan{position:relative}
.plan__who{font-size:15px; color:var(--ink); line-height:1.6; padding-block-end:var(--space-4); border-block-end:var(--hairline) solid var(--line)}
.plan__plus{font-size:14px; font-weight:700; color:var(--ink)}
.plan__badge{
  position:absolute; inset-block-start:0; inset-inline-start:var(--space-6); transform:translateY(-50%);
  background:var(--brand-btn); color:var(--on-brand); font-size:13px; font-weight:700;
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
}
.plan--pick{border-width:2px}
.plans{margin-block-start:var(--space-4)}
/* خطوة الباقة في الطلب: نفس كروت الرئيسية. أعرض من عمود الاستمارة عشان التلاتة يبقوا جنب بعض */
.plans--form{margin-block:var(--space-6) var(--space-4)}
.plans--form .plan h2{font-size:22px; font-weight:700; line-height:1.3}
@media (min-width:860px){ .plans--form{--out:calc(50% - min(560px, 50vw - var(--gutter))); margin-inline:var(--out)} }
@media (min-width:860px){ .plan--pick{transform:translateY(-8px)} }

/* آراء العملاء والخامات */
.testimonial{display:flex; flex-direction:column; gap:var(--space-4)}
.testimonial blockquote{margin:0; font-size:18px; line-height:1.6}
.testimonial footer{margin-block-start:auto; display:grid; gap:var(--space-1)}
.material .fit{color:var(--ink-muted); font-size:14px; margin-block-start:var(--space-3)}
.material .price-note{color:var(--brand-btn); font-weight:700; margin-block-start:var(--space-2)}

/* الأسئلة */
details{border-block-end:var(--hairline) solid var(--line)}
summary{
  padding-block:var(--space-4); font-weight:700; cursor:pointer;
  list-style:none; display:flex; align-items:center; gap:var(--space-3);
  transition:color var(--t-fast);
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--brand-btn)}
.faq__icon{width:20px; height:20px; flex:none; margin-inline-start:auto; color:var(--brand-btn); transition:transform var(--t-base) var(--ease-out)}
details[open] .faq__icon{transform:rotate(45deg)}
details p{padding-block-end:var(--space-5); color:var(--ink-muted)}
details[open] > p{animation:fade var(--t-base) ease both}

/* شريط خطوات الويزارد */
.steps-bar{display:flex; gap:var(--space-2); margin-block-end:var(--space-6); flex-wrap:wrap}
.steps-bar li{
  flex:1 1 40px; height:6px; border-radius:var(--radius-pill);
  background:var(--line); min-width:24px; transition:background-color var(--t-slow);
}
.steps-bar li.is-done{background:var(--brand-strong)}
.steps-bar li.is-current{background:var(--brand)}

/* الحقول */
.form{margin-block-start:var(--space-6)}
.field{display:grid; gap:var(--space-2); margin-block-end:var(--space-5)}
.field[hidden]{display:none}
.video{aspect-ratio:16/9; border:var(--hairline) solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--placeholder)}
.video iframe{width:100%; height:100%; border:0; display:block}
.field > label{font-size:14px; font-weight:700}
.field .hint{font-size:13px; color:var(--ink-muted)}
.field .err{font-size:14px; color:var(--danger); font-weight:700}
input[type=text],input[type=tel],input[type=number],input[type=password],.field input[type=search],select,textarea{
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--surface-card);
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-4); min-height:44px; width:100%;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
input[type=text]:hover,input[type=tel]:hover,input[type=number]:hover,input[type=password]:hover,.field input[type=search]:hover,select:hover,textarea:hover{border-color:var(--ink-muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--brand)}
input[type=file]{
  font-family:inherit; font-size:14px; color:var(--ink-muted); background:var(--surface-card);
  border:var(--hairline) dashed var(--line); border-radius:var(--radius-md);
  padding:var(--space-3); min-height:44px; width:100%; cursor:pointer;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
input[type=file]:hover{border-color:var(--ink-muted); background:var(--surface-200)}
input[type=file]::file-selector-button{
  font-family:inherit; font-size:14px; font-weight:700; color:var(--ink);
  background:var(--surface-200); border:var(--hairline) solid var(--line); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-4); min-height:44px; margin-inline-end:var(--space-3); cursor:pointer;
  transition:border-color var(--t-fast);
}
input[type=file]:hover::file-selector-button{border-color:var(--ink-muted)}
textarea{min-height:96px; resize:vertical}
[aria-invalid=true]{border-color:var(--danger)}
.opts{display:grid; gap:var(--space-2)}
.opts label{
  display:flex; align-items:center; gap:var(--space-3); min-height:44px;
  padding:var(--space-3); border:var(--hairline) solid var(--line);
  border-radius:var(--radius-md); background:var(--surface-card); cursor:pointer;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.opts label:hover{border-color:var(--ink-muted)}
.opts label:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.opts input{width:20px; height:20px; accent-color:var(--brand); flex:none}
.opts--inline{display:flex; flex-wrap:wrap}
/* اختيار بصورة: الصورة فوق، والدايرة والاسم تحتها */
.opts--pics{grid-template-columns:repeat(2, 1fr)}
.opts--pics label{display:grid; grid-template-columns:auto 1fr; align-items:center; padding:var(--space-2); gap:var(--space-2) var(--space-3)}
.opts--pics img{grid-column:1 / -1; order:-1; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--radius-sm)}
@media (min-width:720px){ .opts--pics{grid-template-columns:repeat(3, 1fr)} }
.opts--inline label{flex:1 1 auto; white-space:nowrap}
/* حقل itemized: كل اختيار بيفتح تحته تفاصيله */
.items{display:grid; gap:var(--space-2)}
.items--simple{grid-template-columns:repeat(2, 1fr)}
@media (min-width:720px){ .items--simple{grid-template-columns:repeat(3, 1fr)} }
.item{border:var(--hairline) solid var(--line); border-radius:var(--radius-md); background:var(--surface-card);
  transition:border-color var(--t-fast)}
.item:has(.item__head input:checked){border-color:var(--brand)}
.item__head{display:flex; align-items:center; gap:var(--space-3); min-height:44px; padding:var(--space-3); cursor:pointer; font-weight:700}
.item__head input{width:20px; height:20px; accent-color:var(--brand); flex:none}
.item__sub{display:grid; gap:var(--space-3); padding:0 var(--space-3) var(--space-4); border-block-start:var(--hairline) solid var(--line); padding-block-start:var(--space-3)}
.item__sub[hidden]{display:none}
.item__sub .field{margin:0}
.item__sub label,.item__sub legend{font-size:13px; font-weight:700}
fieldset.field{border:0; padding:0; margin-inline:0; min-inline-size:0}
fieldset.field legend{padding:0; margin-block-end:var(--space-2)}
/* اختيار ككارت: عنوان وتحته سطر شرح */
.opts--cards label{align-items:flex-start; padding:var(--space-4)}
.opts--cards span{display:grid; gap:var(--space-1); font-weight:700}
.opts--cards small{font-weight:400; font-size:13px; color:var(--ink-muted); line-height:1.6}
.notice--pay{margin-block:0 var(--space-4); font-weight:700}
.measure-guide{margin-block:0 var(--space-5)}

/* لوحة رسم المطبخ (sketch.js) */
.sk{display:grid; gap:var(--space-3)}
.sk[hidden]{display:none}
.sk-steps{display:grid; gap:var(--space-2); padding:var(--space-4); border-radius:var(--radius-md); background:var(--surface-200);
  font-size:14px; list-style:arabic-indic; padding-inline-start:var(--space-6)}
.sk-board{position:sticky; inset-block-start:0; z-index:3; border:var(--hairline) solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-card); overflow:hidden}
.sk-tools{display:flex; gap:var(--space-2); padding:var(--space-2); background:var(--surface-200); border-block-end:var(--hairline) solid var(--line)}
.sk-spacer{flex:1}
.sk-tool{min-height:44px; padding:0 var(--space-3); border-radius:var(--radius-sm); border:var(--hairline) solid transparent;
  background:transparent; color:var(--ink-muted); font:700 14px var(--sans); cursor:pointer}
.sk-tool[aria-pressed=true]{background:var(--surface-card); border-color:var(--brand); color:var(--brand-btn)}
.sk-tool[disabled]{opacity:.4; cursor:not-allowed}
.sk-canvas{position:relative}
.sk-canvas svg{display:block; width:100%; height:auto; aspect-ratio:34 / 26; touch-action:none; cursor:crosshair}
.sk-empty{position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-muted); font-size:14px; pointer-events:none}
.sk-empty[hidden]{display:none}
.sk-palette{display:flex; gap:var(--space-2); overflow-x:auto; padding:var(--space-2); border-block-start:var(--hairline) solid var(--line)}
.sk-palette[hidden]{display:none}
.sk-chip{flex:none; min-height:40px; padding:0 var(--space-3); border:var(--hairline) solid var(--line); border-radius:var(--radius-pill);
  background:var(--surface-card); color:var(--ink-muted); font:700 13px var(--sans); cursor:pointer}
.sk-chip[aria-pressed=true]{background:var(--brand-btn); border-color:var(--brand-btn); color:var(--on-brand)}
.sk-status{margin:0; min-height:36px; padding:var(--space-2) var(--space-3); border-block-start:var(--hairline) solid var(--line);
  font-size:13px; font-weight:700; text-align:center; color:var(--ink-muted)}
.sk-status.ok{color:var(--success)}
.sk-status.bad{color:var(--danger)}
.sk-h{font-size:16px; margin-block-start:var(--space-3)}
.sk-rows{display:grid; gap:var(--space-2)}
.sk-none{padding:var(--space-4); border:var(--hairline) dashed var(--line); border-radius:var(--radius-md); color:var(--ink-muted); font-size:14px; text-align:center}
.sk-row{display:grid; grid-template-columns:1fr 120px auto; gap:var(--space-3); align-items:center; padding:var(--space-2) var(--space-3);
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md); background:var(--surface-card)}
.sk-row.is-active,.sk-card.is-active{border-color:var(--brand)}
.sk-row label{font-size:14px; font-weight:700}
.sk-row span{font-size:13px; color:var(--ink-muted)}
.sk-card{padding:var(--space-3); border:var(--hairline) solid var(--line); border-radius:var(--radius-md); background:var(--surface-card)}
.sk-card__head{display:flex; align-items:center; gap:var(--space-2); margin-block-end:var(--space-3); font-size:14px}
.sk-card__head span{flex:1; color:var(--ink-muted); font-size:13px}
.sk-del{min-height:36px; padding:0 var(--space-3); border:var(--hairline) solid var(--line); border-radius:var(--radius-sm);
  background:transparent; color:var(--danger); font:700 13px var(--sans); cursor:pointer}
.sk-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--space-2)}
.sk-grid label{display:grid; gap:var(--space-1); font-size:12px; font-weight:700; color:var(--ink-muted)}
.sk svg text,.skv text{font-family:var(--sans); text-anchor:middle; dominant-baseline:central}
.sk-wall,.skv-wall{stroke:var(--brand); stroke-width:7; stroke-linecap:round}
.sk-wall.is-active{stroke:var(--ink)}
.sk-raw{fill:none; stroke:var(--ink-muted); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.6}
.sk-corner,.skv-corner{fill:var(--surface-card); stroke:var(--brand); stroke-width:2}
.sk-letter,.skv-letter{fill:var(--ink); font-size:12px; font-weight:800}
.sk-end{fill:var(--success)}
.sk-len,.skv-len{fill:var(--ink-muted); font-size:11px; font-weight:700}
.sk-len.is-set,.skv-len{fill:var(--ink)}
.sk-mark,.skv-mark{fill:var(--surface-card); stroke:var(--ink); stroke-width:1.5}
.sk-mark.is-active{stroke:var(--brand); stroke-width:3}
.sk-mark-t,.skv-mark-t{fill:var(--ink); font-size:11px; font-weight:800}
.skv{display:block; width:100%; max-width:480px; height:auto; margin-block:var(--space-3)}

.unsure{display:flex; align-items:center; gap:var(--space-2); font-size:14px; color:var(--ink-muted); cursor:pointer}
.unsure input{width:18px; height:18px; margin:0; accent-color:var(--brand)}
.repeat-row{display:grid; gap:var(--space-3); margin-block-end:var(--space-3)}
.repeat-row .field{margin-block-end:0}
.form-actions{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-block-start:var(--space-6)}
.form-actions .btn{flex:1 1 100%}

/* الجداول */
.table-card{
  background:var(--surface-card); border:var(--hairline) solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
}
.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:16px; font-variant-numeric:tabular-nums}
caption{text-align:start; padding:var(--space-5) var(--space-5) 0; font-size:14px; color:var(--ink-muted)}
th,td{text-align:start; padding:var(--space-4); border-block-end:var(--hairline) solid var(--line)}
thead th{background:var(--surface-dark); color:var(--ink-inverse); font-weight:700; border-block-end:0}
tbody tr:nth-child(odd){background:var(--surface-card)}
tbody tr:nth-child(even){background:var(--surface-200)}
td.qty,td.cost{color:var(--ink-muted)}
tfoot td{font-weight:800; font-size:20px; border-block-end:0; background:var(--surface-card)}

/* الأدمن */
.admin-head{
  background:var(--surface-dark); color:var(--ink-inverse);
  padding-block:var(--space-4); margin-block-end:var(--space-6);
}
.admin-head .wrap{display:flex; align-items:center; gap:var(--space-5)}
.admin-head a{color:var(--ink-inverse); font-size:14px; text-decoration:none}
.tabs{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-block-end:var(--space-5)}
.tabs a{
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  border:var(--hairline) solid var(--line); text-decoration:none;
  color:var(--ink-muted); font-size:14px; font-weight:700; min-height:44px;
  display:inline-flex; align-items:center;
}
.tabs a[aria-current=page]{background:var(--surface-dark); color:var(--ink-inverse); border-color:var(--surface-dark)}
.internal{
  border:var(--hairline) solid var(--danger); border-radius:var(--radius-md);
  padding:var(--space-4); margin-block:var(--space-5);
}
.internal h3{color:var(--danger)}
.filebox{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4)}
.filebox figure{margin:0}
.filebox img{
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md);
  aspect-ratio:1/1; object-fit:cover; width:100%;
}
.filebox figcaption{font-size:13px; color:var(--ink-muted); margin-block-start:var(--space-2); word-break:break-all}

/* هيكل الأدمن: شريط علوي بقائمة على الموبايل، قائمة جانبية ثابتة من 1024px */
.admin{background:var(--surface-200); min-height:100vh}
.side{
  background:var(--surface-dark); color:var(--ink-inverse);
  padding:var(--space-3) var(--space-5); display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
}
.side__brand img{height:36px; width:auto}
.side__menu{margin-inline-start:auto}
.side__menu > summary{color:var(--ink-inverse); background:transparent; border-color:var(--ink-muted)}
.side__nav{display:none; width:100%; gap:var(--space-1); padding-block:var(--space-3)}
.side__menu[open] ~ .side__nav{display:grid}
.side__nav a{
  display:flex; align-items:center; gap:var(--space-2); min-height:44px;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  color:var(--ink-inverse); font-weight:400; text-decoration:none;
  transition:background-color var(--t-fast), color var(--t-fast);
}
.side__nav a:hover{color:var(--brand)}
.side__nav a[aria-current="page"]{background:var(--brand-btn); color:var(--on-brand); font-weight:700}
.side__count{
  margin-inline-start:auto; min-width:24px; line-height:24px; padding:0 var(--space-2);
  border-radius:var(--radius-pill); background:var(--brand); color:var(--on-brand);
  font-size:13px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums;
}
.side__out{opacity:.8}
.topbar{
  display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); background:var(--surface-100); border-block-end:var(--hairline) solid var(--line);
}
.topbar h1{font-size:22px}
.topbar__search{margin-inline-start:auto; flex:1 1 240px; max-width:360px}
.topbar__search input{
  width:100%; min-height:44px; padding:var(--space-3) var(--space-4);
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md);
  background:var(--surface-card); color:var(--ink); font-family:inherit; font-size:14px;
}
.admin__content{padding:var(--space-5)}
.kpis{display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr)}
.kpi{
  background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5); display:grid; gap:var(--space-2); align-content:start;
}
.kpi__label{font-size:14px; color:var(--ink-muted)}
.kpi__num{font-size:30px; font-weight:800; line-height:1.2; font-variant-numeric:tabular-nums}
.kpi a{font-size:13px}

/* صفحة المحتوى: قائمة أقسام يمين، فورم القسم شمال */
.content-grid{display:grid; gap:var(--space-5); align-items:start}
.content-nav{display:grid; gap:var(--space-1); padding:var(--space-3)}
.content-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:44px;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  color:var(--ink); font-weight:400; text-decoration:none; transition:background-color var(--t-fast);
}
.content-nav a:hover{background:var(--surface-200)}
.content-nav a[aria-current="page"]{background:var(--brand-soft); font-weight:700}
.content-form{max-width:760px}
.content-visible{margin-block-end:var(--space-5)}
.clist{border:0; padding:0; margin:0 0 var(--space-5); min-width:0}
.clist legend{font-size:14px; font-weight:700; margin-block-end:var(--space-3); padding:0}
.clist__row{
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-4); margin-block-end:var(--space-3); background:var(--surface-100);
}
.clist__row .field{margin-block-end:var(--space-3)}
.clist__tools{display:flex; gap:var(--space-2); justify-content:flex-end}
.clist__tools svg{width:16px; height:16px}

/* المشاريع في الأدمن: قايمة كروت، وفورم المشروع أقسام */
.proj-layout{display:grid; gap:var(--space-5); align-items:start}
.proj-list{display:grid; gap:var(--space-4)}
.proj-card{display:grid; grid-template-columns:120px 1fr; gap:var(--space-4); align-items:center; padding:var(--space-4)}
.proj-card img,.proj-card__empty{width:120px; height:90px; object-fit:cover; border-radius:var(--radius-md); background:var(--surface-200)}
.proj-card__empty{display:grid; place-items:center; font-size:13px; color:var(--ink-muted)}
.proj-card h2{font-size:18px; margin-block-end:var(--space-2)}
.proj-card h2 a{color:inherit; text-decoration:none}
.proj-card__meta{display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; font-size:13px; color:var(--ink-muted); margin-block-end:var(--space-2)}
.proj-card__actions{grid-column:1 / -1; display:flex; gap:var(--space-2); flex-wrap:wrap}
.proj-new h2{font-size:18px; margin-block-end:var(--space-2)}
.pform{display:grid; gap:var(--space-5); max-width:980px}
.pform__sec{border:var(--hairline) solid var(--line); min-width:0}
.pform__sec > legend{font-size:18px; font-weight:800; padding-inline:var(--space-2)}
.pform .hint{font-size:13px; color:var(--ink-muted); margin-block-end:var(--space-3)}
.row-grid{display:grid; gap:0 var(--space-4); grid-template-columns:repeat(auto-fit, minmax(160px, 1fr))}
.row-grid .field--wide{grid-column:1 / -1}
.row-grid input[type=text],.row-grid select,.row-grid textarea{width:100%}
.photo-row{display:grid; grid-template-columns:120px 1fr; gap:var(--space-4); align-items:start}
.photo-row img{width:120px; height:90px; object-fit:cover; border-radius:var(--radius-md)}
.photo-row .clist__tools{grid-column:1 / -1}
.acc-edit{display:flex; gap:var(--space-4); align-items:end; margin-block-end:var(--space-3)}
.acc-edit img{width:72px; height:72px; object-fit:cover; border-radius:var(--radius-md)}
.acc-edit .field{margin:0}
.rates{display:grid; gap:var(--space-2); margin-block-end:var(--space-4)}
.rates__row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-3); align-items:end}
.rates__row > span{font-weight:700; padding-block-end:var(--space-5)}
.pform__actions{position:sticky; inset-block-end:0; background:var(--surface-200); padding-block:var(--space-3); z-index:1}
.pform__delete{margin-block-start:var(--space-6)}
.preview-note{margin-block:var(--space-5)}
@media (min-width:1024px){
  .proj-layout{grid-template-columns:1fr 320px}
  .proj-card{grid-template-columns:160px 1fr auto}
  .proj-card img,.proj-card__empty{width:160px; height:120px}
  .proj-card__actions{grid-column:auto; flex-direction:column}
  .photo-row{grid-template-columns:160px 1fr}
  .photo-row img{width:160px; height:120px}
}

/* دليل المطبخ (/guide.php): بحث ثابت فوق، وأقسام بأسئلة بتتفتح، وكل إجابة ليها لينك */
.guide{padding-block:var(--space-5) var(--space-8); max-width:860px}
.guide-head{margin-block:var(--space-6) var(--space-4)}
.guide-head h1,.guide-head h2{font-size:clamp(28px, 5vw, 40px); line-height:1.25; margin-block:var(--space-2) var(--space-3)}
/* في الدليل البحث هو اللي بيثبت فوق، فالهيدر مايثبتش عشان مايغطيهوش */
.guide-page .site-head{position:relative}
.guide-chips{display:flex; gap:var(--space-2); overflow-x:auto; padding:var(--space-2) var(--space-2) var(--space-3); margin-block-end:var(--space-4); scrollbar-width:thin}
.guide-chips .chip{white-space:nowrap; text-decoration:none; font-weight:400; font-size:13px}
.guide-chips .chip[hidden]{display:none}
.guide-ask h2{font-size:22px; margin-block:var(--space-6) var(--space-3)}
.qa{scroll-margin-block-start:96px}
.qa > summary{font-weight:700}
.qa__a{color:var(--ink-muted); line-height:1.85}
.qa__a p,.qa__a ul,.qa__a ol,.qa__a .table-scroll{margin:0 0 var(--space-3); padding-block-end:0}
.qa__a ul,.qa__a ol{padding-inline-start:var(--space-5); display:grid; gap:var(--space-1)}
.qa__a ul{list-style:disc}
.qa__a ol{list-style:arabic-indic}
.qa__a li::marker{color:var(--brand)}
.qa__a table{font-size:14px}
.qa__a th,.qa__a td{padding:var(--space-2) var(--space-3)}
.qa__a tr:first-child th{background:var(--surface-dark); color:var(--ink-inverse)}
.qa__more{margin-block-end:var(--space-4)}
.qa__more p{margin:0 0 var(--space-1)}
.qa__more ul,.guide-more__list{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2)}
.qa__more a,.guide-more__list a{color:var(--brand-btn); font-weight:700}
.guide-more{margin-block-start:var(--space-6)}
.guide-more h2{font-size:22px; margin-block:0 var(--space-3)}
.guide-more__list li{padding-block:var(--space-2); border-block-end:var(--hairline) solid var(--line)}
.guide-more__list .caption{display:block}
.qa__share{display:flex; flex-wrap:wrap; gap:var(--space-2)}
details .qa__share{padding-block-end:var(--space-5)}
.qa:target > summary,.qa.is-hit > summary{color:var(--brand-btn)}
.guide-pin{margin-block-start:var(--space-4); border-color:var(--brand)}
.guide-pin__q{font-size:clamp(22px, 4vw, 30px); line-height:1.35; margin-block:var(--space-2) var(--space-4)}
.guide-ask{margin-block-start:var(--space-7)}
.guide-ask h2{margin-block-start:0}
.guide-page .doc-foot{border-block-start:var(--hairline) solid var(--line)}
.guide-page .doc-foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); padding-block:var(--space-5); font-size:13px; color:var(--ink-muted)}
.doc-foot__note{flex-basis:100%; margin:0; font-size:12px; opacity:.8}   /* أدوات قياس الإعلانات (شروط Meta وتيك توك) */
.site-foot__note{font-size:12px}

/* طريقة حساب المتر (/measure.php): جدول المعاملات. بياخد شكل الدليل */
.measure h2{font-size:22px; margin-block:var(--space-6) var(--space-3)}
.measure__table tbody th{font-weight:700}
.measure__rules tbody th{width:40%}
.measure__notes{list-style:disc; padding-inline-start:var(--space-5); margin-block:var(--space-4) 0; display:grid; gap:var(--space-2); color:var(--ink-muted); line-height:1.85}
.measure__notes li::marker{color:var(--brand)}
.measure__cta{margin-block-start:var(--space-6)}
@media (max-width:599px){
  .measure__table th,.measure__table td{padding:var(--space-3)}
  .measure__table{font-size:15px}
}

/* أسئلة متكررة (/guide.php): الأسئلة وإجاباتها بس، كروت بتتفتح، وتحت خالص مربع يكتب فيه سؤاله */
.faq{padding-block:var(--space-6) var(--space-8); max-width:760px}
.faq-list{display:grid; gap:var(--space-3)}
.faq .qa{border:var(--hairline) solid var(--line); border-radius:var(--radius-lg); background:var(--surface-card); transition:border-color var(--t-fast)}
.faq .qa:hover{border-color:var(--ink-muted)}
.faq .qa[open]{border-color:var(--brand)}
.faq .qa > summary{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); font-size:17px; line-height:1.6; cursor:pointer; list-style:none}
.faq .qa > summary::-webkit-details-marker{display:none}
.faq .qa .faq__icon{width:32px; height:32px; padding:var(--space-1); border-radius:var(--radius-pill); background:var(--brand-soft)}
.faq .qa__a{padding:0 var(--space-5) var(--space-3); font-size:16px; line-height:1.95; color:var(--ink)}
.faq .qa__more{padding:0 var(--space-5) var(--space-5); margin:0}
.faq .qa__more ul{display:grid; gap:var(--space-1); padding-inline-start:var(--space-3); border-inline-start:2px solid var(--brand-soft)}
.faq .qa__more li a{font-size:15px; line-height:1.7}
.faq .guide-pin{margin-block:0 var(--space-6)}
.faq-ask{display:grid; gap:var(--space-3); margin-block-start:var(--space-7); padding:var(--space-5); border:var(--hairline) solid var(--line); border-radius:var(--radius-xl); background:var(--surface-200); scroll-margin-block-start:96px}
.faq-ask__label{font-size:19px; font-weight:800}
.faq-ask textarea{
  inline-size:100%; min-height:120px; padding:var(--space-3) var(--space-4); resize:vertical;
  border:var(--hairline) solid var(--line); border-radius:var(--radius-md);
  background:var(--surface-card); color:var(--ink); font:inherit; font-size:16px; line-height:1.8;
}
.faq-ask textarea:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.faq-ask .btn{justify-self:start}
@media (max-width:599px){ .faq-ask .btn{justify-self:stretch} }

/* لوحة الزوار في الأدمن (/admin/stats.php): موجودين دلوقتي، والمدة، والجداول بشريط نسبة، والرسومات */
.live{margin-block-end:var(--space-5)}
.live__head{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3)}
.live__head h2{font-size:18px; margin:0}
.live__head .caption{flex-basis:100%}
.live__num{font-size:36px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.live__dot{inline-size:12px; block-size:12px; border-radius:var(--radius-pill); background:var(--success); animation:live-pulse 1.6s var(--ease-out) infinite}
@keyframes live-pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.live__list{list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-2); max-block-size:360px; overflow:auto}
.live__list li{display:grid; gap:var(--space-1); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--surface-200)}
.stat-range{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-block:0 var(--space-5)}
.stat-range .chip{text-decoration:none; font-weight:400}
.stat-range .chip[aria-current="page"]{background:var(--brand-btn); color:var(--on-brand); font-weight:700}
.stat-kpis{margin-block-end:var(--space-5)}
.stat-kpis .kpi .caption{line-height:1.5}
.stat-grid{display:grid; gap:var(--space-4); margin-block:var(--space-5)}
.stat-card{min-inline-size:0}
.stat-card h2{font-size:17px; margin:0 0 var(--space-3)}
.stat-card--wide{margin-block-end:var(--space-5)}
.stat-table{font-size:14px}
.stat-table thead th{background:transparent; color:var(--ink-muted); font-weight:400; padding:0 var(--space-2) var(--space-2)}
.stat-table th,.stat-table td{padding:var(--space-2); border-block-end:var(--hairline) solid var(--line)}
.stat-table tbody tr:nth-child(n){background:transparent}
.stat-table tbody th{position:relative; font-weight:400; inline-size:100%}
.stat-table td{white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700}
.stat-bar{position:absolute; inset-block:4px; inset-inline-start:0; border-radius:var(--radius-sm); background:var(--brand-soft)}
.stat-label{position:relative; overflow-wrap:anywhere}
.stat-chart{display:block; inline-size:100%; min-inline-size:560px; block-size:auto; direction:ltr}
.stat-numbers{margin-block-start:var(--space-3)}
.stat-numbers > summary{cursor:pointer; font-size:14px; color:var(--brand-btn); font-weight:700}
.stat-numbers .stat-card{border:0; padding:0; background:transparent}
.stat-note{margin:var(--space-3) 0 0}
.stat-rules{margin:0 0 var(--space-4); padding-inline-start:var(--space-5); display:grid; gap:var(--space-2); font-size:14px; line-height:1.7}
.stat-rules a[dir="ltr"]{display:inline-block}   /* اللينك سطر واحد، مايتقسمش على سطرين */
.stat-restart .qa__share{margin:0}
/* رسالة ?notrack=1 / ?track=1 على الموقع */
.optout-note{position:fixed; inset-inline:var(--space-4); inset-block-end:var(--space-4); z-index:50; margin:0; border:var(--hairline) solid var(--line); text-align:center}
.live__err{color:var(--danger); font-weight:700}
.live.is-stale .live__dot{animation:none; background:var(--ink-muted)}
.stat-col{fill:var(--brand)}
.stat-axis{fill:var(--ink-muted); font-family:var(--sans); font-size:14px; text-anchor:middle}
.stat-axis--max{text-anchor:start}
.stat-rule{stroke:var(--line); stroke-width:1}
@media (min-width:860px){
  .kpis.stat-kpis{grid-template-columns:repeat(3, 1fr)}
  .stat-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (prefers-reduced-motion: reduce){ .live__dot{animation:none} }

/* الخامات وأنواعها (/materials.php): كارت لكل خامة. + للمميزات و− للي تاخد بالك منه */
.mat-grid{display:grid; gap:var(--space-4)}
.mat-card{display:flex; flex-direction:column; gap:var(--space-3)}
.mat-card__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-1) var(--space-2)}
.mat-card__head h4{font-size:19px; margin:0}
.mat-card__latin{font-size:13px; color:var(--ink-muted)}
.mat-card__badge{margin-inline-start:auto; padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--brand-btn); font-size:12px; font-weight:700; text-decoration:none}
.mat-card__what{margin:0; line-height:1.8}
.mat-card__list{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1); font-size:15px; line-height:1.7; color:var(--ink-muted)}
.mat-card__list li{position:relative; padding-inline-start:var(--space-5)}
.mat-card__list li::before{position:absolute; inset-inline-start:0; font-weight:800}
.mat-card__list--good li::before{content:"+"; color:var(--success)}
.mat-card__list--watch li::before{content:"−"; color:var(--danger)}
.mat-card__foot{display:grid; gap:var(--space-1); margin-block-start:auto; padding-block-start:var(--space-3); border-block-start:var(--hairline) solid var(--line)}
.mat-card__foot p{margin:0}
.mat-card__brands{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); font-size:13px}
.mat-card__brand{padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); background:var(--surface-200); font-weight:700}
.mat-card__more{align-self:flex-start; color:var(--brand-btn); font-weight:700; font-size:15px}
/* تابات الخامات (ألوميتال وخشب) زي «سعر المتر»، وتحتها أجزاء المطبخ: تعريف، و«في مواصفاتنا»، وكروت */
.spec-tabs.mat-tabs{margin-block-end:var(--space-5)}
/* أجزاء المطبخ: صفوف مقفولة زي الأسئلة المتكررة، وتحت الاسم أسامي الخامات. المفتوح: تعريف، ومميزات وعيوب، و«في مواصفاتنا»، والكروت */
.mat-parts{display:grid; gap:var(--space-3)}
.mat-part{border:var(--hairline) solid var(--line); border-radius:var(--radius-lg); background:var(--surface-card);
  scroll-margin-block-start:var(--space-5); transition:border-color var(--t-fast)}
.mat-part:hover{border-color:var(--ink-muted)}
.mat-part[open]{border-color:var(--brand)}
.mat-part > summary{padding:var(--space-4) var(--space-5); align-items:center}
.mat-part .faq__icon{width:32px; height:32px; padding:var(--space-1); border-radius:var(--radius-pill); background:var(--brand-soft)}
.mat-part__head{display:grid; gap:var(--space-1); min-width:0; margin:0}
.mat-part__title{font-size:19px; margin:0}
.mat-part__sub{margin:0; padding:0; font-size:14px; font-weight:400; color:var(--ink-muted); line-height:1.6}
.mat-part[open] .mat-part__sub{display:none}   /* وهو مفتوح التعريف والكروت تحته على طول */
.mat-part__body{padding:0 var(--space-5) var(--space-5); animation:fade var(--t-base) ease both}
.mat-part__body p{padding-block-end:0}   /* «details p» العام بيزوّد مسافة تحت كل فقرة */
.mat-part .mat-card__what,.mat-part .mat-spec__row,.mat-part .mat-card__brands{color:var(--ink)}
.mat-part__what{margin:0 0 var(--space-4); padding:0; color:var(--ink); line-height:1.85; max-width:65ch}
.mat-part__pc{display:grid; gap:var(--space-4); margin:0 0 var(--space-4)}
.mat-part .mat-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr))}   /* كارت لوحده بياخد العرض كله */
.mat-part .mat-card{background:var(--surface-100)}
.mat-part .mat-spec{background:var(--surface-200)}
.mat-pc{display:grid; gap:var(--space-2); align-content:start}
.mat-pc .mat-card__list{align-content:start}   /* العمود القصير مايتمطّش قد الطويل */
.mat-pc__h{margin:0; padding:0; font-size:13px; font-weight:700; color:var(--ink-muted)}
.mat-pc--good .mat-pc__h{color:var(--success)}
.mat-pc--watch .mat-pc__h{color:var(--danger)}
@media (min-width:700px){ .mat-part__pc{grid-template-columns:1fr 1fr} }   /* المميزات جنب العيوب */
.mat-spec{display:grid; gap:var(--space-2); margin-block-end:var(--space-4); padding:var(--space-4) var(--space-5);
  border:var(--hairline) solid var(--line); border-radius:var(--radius-lg); background:var(--surface-card)}
.mat-spec__h{margin:0; font-size:13px; font-weight:700; color:var(--brand-btn)}
.mat-spec__row{margin:var(--space-2) 0 0; font-weight:700}
.mat-spec__lines{margin:0; display:grid; gap:var(--space-1)}
.mat-spec__lines div{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--space-3)}
.mat-spec__lines dt{flex:0 0 9em; font-size:14px; color:var(--ink-muted)}
.mat-spec__lines dd{margin:0; flex:1 1 12em; font-weight:700; line-height:1.7}
.mat-spec__more{justify-self:start; margin-block-start:var(--space-2); font-size:14px; font-weight:700; color:var(--brand-btn)}
.mat-part__also{margin:var(--space-3) 0 0; font-size:15px; color:var(--ink-muted)}
.mat-part__body > .mat-card__more{display:inline-block; margin-block-start:var(--space-3)}

/* إزاي تقيس مطبخك (/survey.php): خطوات مرقمة، ورسمة مثال، وجداول */
.survey h2{font-size:22px; margin-block:var(--space-6) var(--space-3)}
.survey__tools{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-block-start:var(--space-4)}
.survey__tools .chip{font-weight:400; font-size:13px}
.survey__steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4)}
.survey__steps li{display:flex; gap:var(--space-3); align-items:flex-start}
.survey__steps h3{font-size:17px; margin:0 0 var(--space-1)}
.survey__steps p{margin:0; line-height:1.8}
.survey__sample{display:grid; justify-items:center; margin-block-end:var(--space-4)}
.survey__sample .caption{margin:0; text-align:center}
.survey__standards tbody th .caption{display:block; font-weight:400}
.survey__standards td{white-space:nowrap}

/* المواصفات وسعر المتر (/specs.php): تابات الأنواع وتحتها كروت المواصفات زي الباقات (تلاتة، واتنين في الماكسيم). البنود اللي بتختلف بين المستويات بخط تقيل */
.specs{padding-block:var(--space-5) var(--space-8)}
.spec-tabs{display:flex; gap:var(--space-2); margin-block:0 var(--space-6)}
.spec-tab{
  flex:1; text-align:center; padding:var(--space-3) var(--space-4); font-weight:700; font-size:17px;
  border:var(--hairline) solid var(--line); border-radius:var(--radius-pill);
  background:var(--surface-card); color:var(--ink); text-decoration:none;
}
.spec-tab[aria-current="page"]{background:var(--brand-btn); border-color:var(--brand-btn); color:var(--on-brand)}
.spec-tab--soon{color:var(--ink-muted); border-style:dashed}
.spec-tab{white-space:nowrap}
@media (max-width:699px){ .spec-tab{font-size:14px; padding:var(--space-2) var(--space-3)} }
.spec-tab--soon small{font-weight:400; font-size:12px}

/* نوع فيه مواصفتين بس (الماكسيم): نفس عرض الكارت في التابات التانية، في النص */
@media (min-width:860px){ .grid-3.plans--few{grid-template-columns:repeat(2, calc((100% - 2 * var(--space-5)) / 3)); justify-content:center} }
.spec-card__top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3)}
.spec-card__name{font-size:22px; margin:0}
.spec-card .price{font-size:clamp(24px, 2.6vw, 28px)}
.spec-range{white-space:nowrap}
.spec-card__note{margin-block-start:calc(var(--space-3) * -1); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2)}
/* السعر: قبل الخصم متشطّب وجنبه النسبة، وتحته السعر بعد الخصم، وبعدين الضمان */
.spec-card__was{margin:0; margin-block-end:calc(var(--space-3) * -1); display:flex; align-items:center; gap:var(--space-2); font-size:15px; color:var(--ink-muted)}
.spec-card__off{padding:0 var(--space-2); border-radius:var(--radius-pill); background:var(--brand-btn); color:var(--on-brand); font-size:13px; font-weight:700}
.spec-card__guarantee{margin:0; align-self:flex-start; padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--ink); font-size:14px; font-weight:700}
.spec-lines{display:grid; gap:var(--space-2); margin:0; font-size:14px}
.spec-lines > div{display:flex; gap:var(--space-2); padding-block-end:var(--space-2); border-block-end:var(--hairline) solid var(--line)}
.spec-lines dt{flex:none; width:7.5em; color:var(--ink-muted)}
.spec-lines dd{margin:0; font-weight:700; color:var(--ink)}
.spec-lines > div:not(.is-diff) dd{font-weight:400; color:var(--ink-muted)}

.guide-ask .qa__share{margin-block-start:var(--space-4)}
.guide-ask .qa__share .btn{flex:1 1 100%}

/* كروت ملفات المشاريع في الصفحة الرئيسية */
.work-cards{display:grid; gap:var(--space-4); margin-block-start:var(--space-6)}
.work-card{
  display:grid; grid-template-columns:120px 1fr; gap:var(--space-4); align-items:center;
  background:var(--surface-card); border:var(--hairline) solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-3); color:inherit; text-decoration:none; transition:border-color var(--t-fast);
}
.work-card:hover{border-color:var(--brand)}
.work-card img{width:120px; height:90px; object-fit:cover; border-radius:var(--radius-md)}
.work-card__body{display:grid; gap:var(--space-1)}
.work-card__body strong{font-size:17px}
.work-card__more{font-size:14px; color:var(--brand); font-weight:700}
@media (min-width:860px){
  .work-cards{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width:1024px){
  .content-grid{grid-template-columns:260px 1fr}
  .admin{display:grid; grid-template-columns:240px 1fr}
  .side{position:sticky; inset-block-start:0; height:100vh; flex-direction:column; align-items:stretch; padding:var(--space-5) var(--space-4)}
  .side__menu{display:none}
  .side__nav{display:grid; align-content:start; padding-block:0}
  .side__out{margin-block-start:auto}
  .admin__content{padding:var(--space-6) var(--space-7)}
  .kpis{grid-template-columns:repeat(3,1fr)}
}

/* ——— تابلت صغير ——— */
@media (min-width:640px){
  :root{--gutter:var(--space-6)}
  .site-head .btn{padding-inline:var(--btn-pad-x); font-size:16px}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .carousel__item{flex-basis:48%}
  .repeat-row{grid-template-columns:repeat(2,1fr)}
  .form-actions .btn,.hero-cta .btn,.guide-ask .qa__share .btn{flex:0 0 auto}
}

/* ——— تابلت ——— */
@media (min-width:860px){
  :root{--gutter:var(--space-7)}
  .sec{padding-block:var(--space-8)}
  .hero{padding-block:var(--space-8)}
  .hero-grid{grid-template-columns:minmax(0, .85fr) minmax(0, 1.3fr); gap:var(--space-7)}   /* الصورة أكبر من النص */
  .hero-grid > .frame{max-width:none}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2,.grid-3,.grid-4{gap:var(--space-5)}
  .site-foot nav{margin-inline-start:auto}
}

/* ——— ديسكتوب ——— */
@media (min-width:1024px){
  :root{--gutter:var(--space-8)}
  .site-head .wrap{gap:var(--space-6); min-height:72px}
  .brandmark img{height:48px}
  .site-head .btn{margin-inline-start:0}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .carousel__track{margin-inline:0; padding-inline:0; scroll-padding-inline:0; gap:var(--space-5)}
  .carousel__item{flex-basis:32%}
  .filebox{grid-template-columns:repeat(4,1fr)}
}

/* القايمة 6 لينكات: بتظهر جنب اللوجو من 1200 بس، وقبل كده زرار القايمة عشان الكلام مايلفّش على سطرين */
@media (min-width:1200px){
  .nav{display:flex}
  .nav a{white-space:nowrap}
  .menu{display:none}
}

/* ——— حركة أقل: الحالة والتغذية الراجعة بتفضل، والإزاحة المكانية بتتشال ——— */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .carousel__track{scroll-behavior:auto}
  .hero-copy > *{animation:fade var(--t-base) ease both}
  .hero .frame{animation:none}
  .hero-slides img.is-active{animation:none}
  .hero-slides__bar{display:none}
  .menu__panel{animation:fade var(--t-fast) ease both}
  .js [data-reveal],.js [data-reveal-stagger] > *{transform:none; transition:opacity var(--t-base) ease}
  .btn:active,.carousel__nav button:active,.grid-3 .card:hover,.grid-4 .card:hover{transform:none}
  .btn:hover .btn__icon{transform:none}
}

@media print{
  .site-head,.site-foot,.admin-head,.tabs,.btn,.form-actions,.internal,.carousel__bar,.menu{display:none}
  body{background:var(--surface-card); color:var(--ink)}
  .wrap{max-width:none; padding-inline:0}
  .table-card{border:0}
  thead th{background:var(--surface-200); color:var(--ink)}
}

/* زرار واتساب ثابت في جنب الصفحة */
.wa-float{
  position:fixed; inset-inline-end:var(--space-4); inset-block-end:var(--space-4); z-index:50;
  display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-pill); background:var(--wa); color:var(--on-brand); font-weight:800; text-decoration:none;
}
.wa-float svg{width:24px; height:24px}
@media (max-width:699px){ .wa-float span{display:none} .wa-float{padding:var(--space-3)} }
/* على الموبايل الزرار العايم بيغطي آخر سطر (لينكات الفوتر، وآخر حقل في الطلب): مساحة فاضية تحت قده */
body:has(.wa-float) .doc-foot .wrap{padding-block-end:calc(var(--space-8) + var(--space-5))}   /* على الكمبيوتر كمان: كان بيغطي «الصفحة الرئيسية» */
@media (max-width:699px){
  body:has(.wa-float) main.narrow{padding-block-end:calc(var(--space-8) + var(--space-5))}
}

/* صفحات الشرح (طريقة القياس، الخامات، إزاي تقيس): عمود واحد مريح للقراية */
.guide{max-width:760px}

/* أدمن: روابط للمشاركة */
.links-table th{font-weight:700; min-width:220px}
.links-table th .caption{display:block; font-weight:400}
.links-url a{font-size:13px; color:var(--ink-muted); word-break:break-all}
.links-act{white-space:nowrap; text-align:end}
.links-act .btn + .btn{margin-inline-start:var(--space-2)}
#links [data-filter-row][hidden],#links section[hidden]{display:none}   /* الفلتر: أقوى من display:block بتاع الموبايل */
@media (max-width:699px){
  /* الموبايل: كل لينك كارت — الاسم، وتحته اللينك، وتحته الزراير */
  .links-table,.links-table tbody,.links-table tr,.links-table th,.links-table td{display:block; width:auto; min-width:0}
  .links-table tr{padding-block:var(--space-3)}
  .links-table th,.links-table td{padding-block:var(--space-1)}
  .links-table caption{display:block}
  .links-table th,.links-table .links-url{border-block-end:0}
  .links-act{text-align:start}
}

/* أدمن: حاجات قبل الإطلاق، ولينك الاستبيان في صفحة الطلب */
.launch{border-color:var(--danger)}
.launch__list{margin:var(--space-3) 0 0; padding-inline-start:var(--space-5); display:grid; gap:var(--space-2)}
.extra-link{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-block-end:var(--space-5)}

/* فوتر صفحات الدليل: لينكات الصفحات التانية */
.doc-foot__links{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4)}
.doc-foot__links a{color:inherit}
/* صفحة «مش موجود» */
.nf-links{display:grid; gap:var(--space-3); padding-inline-start:var(--space-5); margin-block:var(--space-5) var(--space-7); font-size:18px}