/* =====================================================================
   Liquid Glass — طبقة تصميم بأسلوب Apple (iOS 26+) فوق كل الواجهات
   زجاج حيّ بيكسر الضو، حواف لامعة، أشرطة عائمة بتصغر مع التمرير،
   عناوين كبيرة، وضع فاتح وغامق تلقائي، واحترام إعدادات تخفيف الشفافية والحركة.
   ===================================================================== */

/* ---------- Material tokens ---------- */
:root{
  --font: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font-display: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Arabic","IBM Plex Sans Arabic","Segoe UI",sans-serif;
  --lg-fill: rgba(255,255,255,.40);
  --lg-fill-strong: rgba(255,255,255,.58);
  --lg-fill-thick: rgba(250,250,247,.80);
  --lg-sheen: linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 34%,rgba(255,255,255,0) 58%);
  --lg-rim: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.28), inset 0 0 0 .5px rgba(255,255,255,.6);
  --lg-drop: 0 10px 34px rgba(11,51,49,.13), 0 1.5px 4px rgba(11,51,49,.06);
  --lg-blur: blur(24px) saturate(190%) brightness(1.04);
  --lg-tint-glass: rgba(11,51,49,.80);
  --lg-radius: 26px;
  --spring: cubic-bezier(.34,1.42,.64,1);
  --bg:#EDF0EA; --bg-2:#E4E9E2;
  --blob-1: rgba(156,181,170,.55); --blob-2: rgba(214,154,60,.26); --blob-3: rgba(46,110,142,.20);
  --card: rgba(255,255,255,.55);
  --field: rgba(118,118,128,.10);
  --hair: rgba(60,60,67,.14);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --bg:#06171A; --bg-2:#0A2421;
    --blob-1: rgba(22,82,74,.75); --blob-2: rgba(46,110,142,.42); --blob-3: rgba(110,74,107,.38);
    --text:#EEF3EF; --text-2:rgba(232,240,235,.70); --text-3:rgba(232,240,235,.46);
    --fill:rgba(255,255,255,.10); --fill-2:rgba(255,255,255,.06); --sep:rgba(255,255,255,.10);
    --glass:rgba(32,62,58,.42); --glass-strong:rgba(30,56,52,.58); --glass-thick:rgba(16,36,34,.86);
    --stroke:rgba(255,255,255,.14); --hi:rgba(255,255,255,.22); --lo:rgba(0,0,0,.2);
    --shadow:0 12px 40px rgba(0,0,0,.45);
    --tint:#8FD1B8; --tint-press:#7cc2a8; --on-tint:#05211D; --tint-text:#9FD9C3;
    --warn-bg:rgba(214,154,60,.18); --warn-text:#F1C887; --danger:#FF6B6B;
    --lg-fill: rgba(36,66,62,.40);
    --lg-fill-strong: rgba(30,58,54,.58);
    --lg-fill-thick: rgba(14,34,32,.88);
    --lg-sheen: linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,0) 60%);
    --lg-rim: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 .5px rgba(255,255,255,.16);
    --lg-drop: 0 14px 44px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
    --lg-blur: blur(26px) saturate(170%) brightness(.92);
    --lg-tint-glass: rgba(8,40,37,.78);
    --card: rgba(30,56,52,.46);
    --field: rgba(255,255,255,.08);
    --hair: rgba(255,255,255,.12);
  }
}

/* ---------- Canvas: colour behind the glass so it has something to refract ---------- */
body.lq{font-family:var(--font);background:var(--bg);color:var(--text);letter-spacing:-.005em}
body.lq-bg::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 88% 6%,var(--blob-1),transparent 68%),
    radial-gradient(40vmax 40vmax at 6% 42%,var(--blob-2),transparent 70%),
    radial-gradient(38vmax 38vmax at 72% 88%,var(--blob-3),transparent 70%),
    linear-gradient(180deg,var(--bg),var(--bg-2))}
body.lq .ambient{background:
    radial-gradient(42vmax 42vmax at 88% 6%,var(--blob-1),transparent 68%),
    radial-gradient(40vmax 40vmax at 6% 42%,var(--blob-2),transparent 70%),
    radial-gradient(38vmax 38vmax at 72% 88%,var(--blob-3),transparent 70%),
    linear-gradient(180deg,var(--bg),var(--bg-2))}

/* ---------- The material ---------- */
.lq .glass,.lq .lg{
  background-color:var(--lg-fill);background-image:var(--lg-sheen);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  box-shadow:var(--lg-rim),var(--lg-drop);border-color:transparent}
.lq .glass.strong,.lq .lg.strong{background-color:var(--lg-fill-strong)}
.lq .glass.thick,.lq .lg.thick{background-color:var(--lg-fill-thick)}
/* light that follows the pointer across glass (desktop) */
@media (hover:hover) and (pointer:fine){
  .lq .lg-hot:hover{background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.30),transparent 62%),var(--lg-sheen)!important}
}

/* ---------- Type: large titles ---------- */
.lq h1,.lq h2,.lq h3,.lq .adm-head h1{font-family:var(--font-display);letter-spacing:-.022em}
.lq .adm-head h1{font-size:clamp(2rem,4.6vw,2.6rem);font-weight:800;color:var(--text)}

/* ---------- Controls: capsules, springy press ---------- */
.lq .btn,.lq .zbtn{border-radius:999px;transition:transform .35s var(--spring),background-color .2s,box-shadow .25s,color .2s}
.lq .btn:active,.lq .zbtn:active{transform:scale(.95)}
.lq .btn.primary,.lq .zbtn.pine{background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 22px -8px color-mix(in srgb,var(--tint) 75%,transparent)}
.lq .btn.glass,.lq .zbtn.line,.lq .zbtn.ghost-d{background-color:var(--lg-fill-strong);background-image:var(--lg-sheen);border:0;color:var(--text);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),0 4px 14px rgba(0,0,0,.06)}
.lq .seg,.lq .filters{background:var(--field);border:0;border-radius:999px;padding:3px}
.lq .seg-opt span,.lq .filters a{border-radius:999px}
.lq .seg-opt input:checked + span,.lq .filters a.on{background-color:var(--lg-fill-thick);background-image:var(--lg-sheen);color:var(--text);
  box-shadow:var(--lg-rim),0 3px 10px rgba(0,0,0,.12)}
.lq .switch input{width:51px;height:31px;background:var(--field)}
.lq .switch input::after{top:2px;right:2px;width:27px;height:27px;box-shadow:0 3px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform .45s var(--spring)}
.lq .switch input:checked{background:#34C759}
.lq .switch input:checked::after{transform:translateX(-20px)}
.lq .adm-input,.lq .adm-select,.lq .search input,.lq .field input,.lq .field select,.lq .field textarea,.lq .signup input,.lq .signup select,.lq .login-card input,.lq .slug-box{
  background:var(--field);border:0;border-radius:14px;color:var(--text);box-shadow:none}
.lq .adm-input:focus,.lq .adm-select:focus,.lq .search input:focus,.lq .field input:focus,.lq .field select:focus,.lq .field textarea:focus,.lq .signup input:focus,.lq .signup select:focus,.lq .login-card input:focus{
  outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 35%,transparent);background:var(--lg-fill-strong)}

/* ---------- Sheets & alerts ---------- */
.lq .sheet{border-radius:38px}
.lq .sheet-wrap{background:rgba(0,0,0,.28)}
.lq .toast,.lq .adm-toast{border-radius:999px}

/* =====================================================================
   Dashboard (body.shell)
   ===================================================================== */
.lq.shell{background:var(--bg);--side:272px}
body.lq.shell{padding-inline-start:calc(var(--side) + 28px)}
.lq.shell .wrap{padding-inline:20px}

/* floating glass sidebar */
.lq .side{inset-block:12px;inset-inline-start:12px;width:var(--side);border-radius:30px;padding:18px 12px 22px;
  background-color:var(--lg-tint-glass);background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.14),0 24px 60px rgba(6,23,26,.35);overflow:hidden auto}
.lq .side .spectrum{height:4px;inset-inline:22px;bottom:10px;border-radius:4px;overflow:hidden}
.lq .side-nav a,.lq .side-link{border-radius:14px;padding:10px 12px}
.lq .side-nav a.on{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.lq .side-nav a.on::before{inset-inline-start:-12px;width:4px}
.lq .side-plan{border-radius:16px;background:rgba(0,0,0,.18)}
.lq .side-brand .brand-mark{border-radius:12px}

/* cards become glass */
.lq.shell .glass,.lq.shell .card-form,.lq.shell .tbl-wrap,.lq.shell .stat,.lq.shell .orders,.lq.shell .p-item,.lq.shell .list,.lq.shell .flash{
  background-color:var(--card);background-image:var(--lg-sheen);border:0;border-radius:var(--lg-radius);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq.shell .stat{border-radius:22px}
.lq.shell .stat::before{inset-inline:18px;top:0;height:3px;border-radius:0 0 3px 3px}
.lq.shell .stat b{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.lq.shell .box{background:var(--fill-2);box-shadow:none;border-radius:18px}
.lq.shell .order > summary:hover{background:var(--fill-2)}
.lq.shell .order{border-color:var(--hair)}
.lq.shell .tbl th,.lq.shell .tbl td{border-color:var(--hair)}
.lq.shell .flash{border-inline-start:0}
.lq.shell .eyebrow{color:var(--tint-text)}
.lq.shell .warn{border-radius:16px}

/* phone: glass top bar with collapsing large title + floating capsule tab bar */
@media (max-width:900px){
  body.lq.shell{padding-inline-start:0;padding-top:64px;padding-bottom:calc(98px + var(--safe-b))}
  .lq .mtop{top:calc(8px + var(--safe-t));inset-inline:10px;height:54px;border-radius:999px;padding:0 8px 0 10px;color:var(--text);
    background-color:var(--lg-fill-strong);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-rim),var(--lg-drop)}
  .lq .mtop-brand{transition:opacity .25s,transform .35s var(--spring)}
  .lq .mtop-title{position:absolute;inset-inline:64px;text-align:center;font-weight:700;font-size:1rem;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .35s var(--spring);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lq.lg-scrolled .mtop-brand b{opacity:0}
  .lq.lg-scrolled .mtop-title{opacity:1;transform:none}
  .lq .mtop-btn{background:var(--fill);color:var(--text);border-radius:50%}
  .lq .mtop .brand-mark{border-radius:50%}

  .lq .mtabs{inset-inline:14px;bottom:calc(12px + var(--safe-b));border:0;border-radius:999px;padding:6px;gap:2px;
    background-color:var(--lg-fill-strong);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-rim),var(--lg-drop);transition:transform .5s var(--spring),padding .4s var(--spring),inset .4s var(--spring)}
  .lq .mtabs > a,.lq .mmore > summary{border-radius:999px;color:var(--text-2);padding:7px 2px 6px;transition:background-color .3s,color .2s,padding .4s var(--spring)}
  .lq .mtabs > a.on,.lq .mmore.on > summary,.lq .mmore[open] > summary{color:var(--tint-text);background:var(--fill)}
  .lq .mtabs > a.on::before,.lq .mmore.on > summary::before{display:none}
  .lq .mtabs span{transition:opacity .2s,font-size .3s}
  /* tab bar shrinks while scrolling down, grows back when scrolling up (iOS 26) */
  .lq.lg-min .mtabs{inset-inline:22%;padding:4px}
  .lq.lg-min .mtabs > a,.lq.lg-min .mmore > summary{padding:6px 2px}
  .lq.lg-min .mtabs span{opacity:0;font-size:0}
  .lq .mmore-sheet{border-radius:30px;background-color:var(--lg-tint-glass);background-image:linear-gradient(180deg,rgba(255,255,255,.12),transparent 35%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.35);transform-origin:bottom center;animation:lg-pop .45s var(--spring)}
  .lq .mmore-sheet .side-link{border-radius:14px}
}
@keyframes lg-pop{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}

/* dashboard login */
.lq.shell-login .login{background:transparent}
.lq.shell-login .login::before{opacity:.25}
.lq.shell-login .login-card{border-radius:36px;background-color:var(--lg-fill-strong);background-image:var(--lg-sheen);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq.shell-login .login-card h1{font-family:var(--font-display);color:var(--text)}
.lq.shell-login .login-card .spectrum{inset-inline:30px;bottom:14px;height:4px;border-radius:4px;overflow:hidden}

/* =====================================================================
   Platform pages (body.pf)
   ===================================================================== */
.lq.pf{background:var(--bg)}
.lq.pf h1,.lq.pf h2,.lq.pf h3,.lq.pf h4{font-family:var(--font-display);font-weight:800;color:var(--text)}
.lq .z-hero h1,.lq .z-band h2,.lq .z-cta h2,.lq .pf-form-head h1{color:var(--bone)}
.lq .z-kind h3{color:inherit}
.lq .z-hero h1{font-weight:800;letter-spacing:-.03em}
.lq .z-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--sage),#E8D2A6);-webkit-background-clip:text;background-clip:text;color:transparent}
.lq .pf-top{position:sticky;top:calc(10px + var(--safe-t));z-index:50;margin:10px auto 0;width:calc(100% - 24px);max-width:1180px;border:0;border-radius:999px;
  background-color:var(--lg-fill-strong);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq .pf-bar{height:60px;padding-inline:10px 18px}
.lq .pf-brand{color:var(--text)}
.lq .pf-nav > a:not(.zbtn){color:var(--text)}
.lq .z-hero{margin-top:-70px;padding-top:70px;border-radius:0 0 42px 42px}
.lq .z-hero > .spectrum{display:none}
.lq .z-hero-card{border-radius:34px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 .5px rgba(255,255,255,.16),0 30px 70px rgba(0,0,0,.35)}
.lq .z-hero-card .spectrum{inset-inline:26px;bottom:14px;height:4px;border-radius:4px;overflow:hidden}
.lq .hc-item{border-radius:20px;background-color:rgba(255,255,255,.82);background-image:linear-gradient(180deg,#fff,rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #fff,0 14px 30px rgba(0,0,0,.22)}
.lq .hc-item .hc-ph{border-radius:14px}
.lq .tagband{border-radius:18px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.lq .hc-order{background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lq .z-strip{background:transparent;border:0}
.lq .z-kind{border-radius:30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px rgba(0,0,0,.14);transition:transform .5s var(--spring)}
.lq .z-kind:hover{transform:translateY(-6px) scale(1.01)}
.lq .z-feat{padding:22px;border-radius:26px;background-color:var(--card);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq .z-feat .ic{stroke:var(--tint-text)}
.lq .z-feat p,.lq .z-steps span,.lq .z-note,.lq .z-price .pr small{color:var(--text-2)}
.lq .z-band{border-radius:42px;margin:0 12px}
.lq .z-steps li{border-radius:28px;background-color:var(--card);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq .z-steps b{color:var(--text)}
.lq .z-pricing{background:transparent}
.lq .z-price{border:0;border-radius:32px;background-color:var(--card);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq .z-price.hl{box-shadow:var(--lg-rim),0 0 0 2px var(--tint),0 24px 50px rgba(11,51,49,.18)}
.lq .z-price .pr .num{font-family:var(--font-display);font-weight:800;color:var(--text)}
.lq .z-price li{color:var(--text)}
.lq .z-cta{border-radius:40px}
.lq .z-cta .spectrum{inset-inline:40px;bottom:16px;height:4px;border-radius:4px;overflow:hidden}
.lq .pf-foot{margin-top:40px;border-radius:42px 42px 0 0}
.lq.pf .card-form,.lq.pf .login-card{border:0;border-radius:34px;background-color:var(--lg-fill-strong);background-image:var(--lg-sheen);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lq .pf-form-head{border-radius:34px 34px 22px 22px}
.lq .pf-form-head .spectrum{inset-inline:30px;bottom:12px;height:4px;border-radius:4px;overflow:hidden}
.lq.pf .login-card .wm,.lq.pf .signup label{color:var(--text)}
.lq.pf .p-item{border:0;border-radius:24px}
@media (prefers-color-scheme: dark){
  .lq .pf-brand,.lq .foot-wm{color:var(--bone)}
  .lq .hc-item{background-color:rgba(20,44,41,.85);background-image:linear-gradient(180deg,rgba(255,255,255,.08),transparent);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.35)}
  .lq .hc-item em{color:var(--tint-text)}
  .lq .z-band,.lq .z-cta,.lq .z-hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .lq .zbtn.pine{background:var(--tint);color:var(--on-tint)}
  .lq .z-kind.saffron{color:#2d1d05}
  .lq.pf .eyebrow:not(.light){color:var(--text-3)}
}
@media (max-width:640px){
  .lq .pf-top{width:calc(100% - 16px)}
  .lq .z-band{margin:0 8px;border-radius:32px}
}

/* =====================================================================
   Shop pages: floating capsule tab bar that minimises on scroll
   ===================================================================== */
@media (max-width:860px){
  .lq .tabbar .tabs,.lq .tabbar .cart-fab{transition:transform .5s var(--spring),padding .4s var(--spring)}
  .lq .tabbar .tabs a span,.lq .tabbar .tabs a{transition:font-size .3s,padding .4s var(--spring),opacity .2s}
  .lq.lg-min .tabbar .tabs{transform:scale(.88);transform-origin:bottom center}
  .lq.lg-min .tabbar .cart-fab{transform:scale(.88)}
  .lq .tabs a.active{background:var(--fill);color:var(--tint-text)}
}
.lq .product{border-radius:30px}
.lq .product .ph{border-radius:24px}
.lq .top-bar{border-radius:999px}

/* ---------- Accessibility: Reduce Transparency / Reduce Motion / more contrast ---------- */
@media (prefers-reduced-transparency: reduce){
  .lq .glass,.lq .lg,.lq.shell .card-form,.lq.shell .tbl-wrap,.lq.shell .stat,.lq.shell .orders,.lq.shell .p-item,.lq.shell .list,.lq .mtabs,.lq .mtop,.lq .pf-top,.lq .z-price,.lq .z-feat,.lq .z-steps li,.lq.pf .card-form,.lq.pf .login-card{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:var(--lg-fill-thick)!important;background-image:none!important}
  .lq .side,.lq .mmore-sheet{background:var(--pine)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast: more){
  .lq .glass,.lq .lg,.lq .mtabs,.lq .mtop,.lq .pf-top{box-shadow:inset 0 0 0 1.5px var(--text-3),var(--lg-drop)}
}
@media (prefers-reduced-motion: reduce){
  .lq *,.lq *::before,.lq *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Page-to-page transitions (cross-document View Transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.015);filter:blur(8px)}}
/* chrome that stays put while the page underneath changes */
.lq .pf-top{view-transition-name:pf-top}
.lq .side{view-transition-name:side}
.lq .mtabs{view-transition-name:mtabs}
.lq .top-bar{view-transition-name:shop-bar}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
}