/* =========================================================
   كوبان: نظام التصميم المشترك بين كل الصفحات
   ========================================================= */
:root{
  --espresso:#855A3E;     /* اللون الأساسي للأزرار = لون الشعار */
  --espresso-2:#7A5238;
  --espresso-3:#6B4630;
  --brown:#855A3E;        /* لون الشعار */
  --brown-deep:#6B4630;
  --brass:#C9A57F;        /* لمسة كراميل */
  --brass-soft:#E2C9AA;
  --ivory:#F6F0E4;
  --cream:#EDE5D5;        /* أرضية بوستات كوبان */
  --paper:#FBF8F1;
  --foam:#F4ECDD;
  --ink:#3B2618;          /* نص أساسي */
  --ink-soft:#735A48;     /* نص ثانوي */
  --caramel:#B9733F;      /* لون العناوين الفرعية في بوستاتهم */
  --hair:#D6C7AE;
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'%3E%3Cpath d='M0 4c10-3 20 3 30 0s20-3 30 0 20 3 30 0 20-3 30 0' fill='none' stroke='%23CDBB9E' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");         /* خطوط رفيعة */
  --hair-dark:rgba(226,201,170,.18);
  --danger:#9A2F1F;
  --ok:#3F6B47;
  --warn:#A8641E;

  --f-display:"Marhey", "Readex Pro", system-ui, sans-serif;
  --f-body:"Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --wrap:1180px;
  --header-h:68px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --shadow-1:0 1px 2px rgba(32,20,13,.05), 0 10px 30px -14px rgba(32,20,13,.28);
  --shadow-2:0 2px 8px rgba(32,20,13,.1), 0 30px 60px -20px rgba(32,20,13,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-weight:400;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--brown);color:var(--foam)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:6px}

[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--espresso);color:var(--foam);padding:10px 16px;border-radius:var(--r-pill);z-index:100;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
html{scrollbar-color:var(--brass) var(--cream)}

/* ---------- الأزرار ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border:0;border-radius:var(--r-pill);font-family:var(--f-body);font-weight:500;font-size:1rem;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out), background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;user-select:none;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn-dark{background:var(--espresso);color:var(--foam)}
.btn-brass{background:var(--brown);color:var(--foam)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
@media (hover:hover) and (pointer:fine){
  .btn-dark:hover{background:var(--espresso-3)}
  .btn-brass:hover{background:var(--brown-deep)}
  .btn-ghost:hover{background:rgba(201,165,127,.12)}
}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- الهيدر الداكن ---------- */
.header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);color:var(--ink);border-bottom:1px solid var(--hair)}
.header .wrap{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:50%}
.brand b{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1;color:var(--brown-deep)}
.brand small{display:block;font-size:.72rem;color:var(--ink-soft);font-weight:400;margin-top:3px}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:var(--r-pill);background:transparent;color:var(--ink);font-weight:500;text-decoration:none;font-size:.95rem;transition:transform 160ms var(--ease-out), background-color .2s ease, border-color .2s ease}
.icon-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--paper);border-color:var(--brown)}}
.icon-btn svg{width:20px;height:20px}
.badge{min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--brown);color:var(--foam);font-size:.8rem;font-weight:600;display:inline-grid;place-items:center;line-height:1}
.bump{animation:bump 460ms var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.28)}100%{transform:scale(1)}}

/* ---------- النوافذ ---------- */
dialog{border:0;padding:0;margin:0;max-width:none;max-height:none;background:transparent;color:inherit}
dialog::backdrop{background:rgba(60,40,25,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity 280ms ease, overlay 280ms allow-discrete, display 280ms allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]::backdrop{opacity:0}}
.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-height:92dvh;display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-2);transform:translateY(100%);transition:transform 460ms var(--ease-drawer), overlay 460ms allow-discrete, display 460ms allow-discrete}
.sheet[open]{transform:none}
@starting-style{.sheet[open]{transform:translateY(100%)}}
@media (min-width:720px){
  .sheet{inset:0;margin:auto;width:min(540px,calc(100% - 40px));height:fit-content;max-height:88dvh;border-radius:var(--r-lg);transform:translateY(14px) scale(.97);opacity:0;transition:transform 300ms var(--ease-out), opacity 240ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete}
  .sheet[open]{transform:none;opacity:1}
  @starting-style{.sheet[open]{transform:translateY(14px) scale(.97);opacity:0}}
}
.grab{width:42px;height:4px;border-radius:9px;background:var(--hair);margin:10px auto 0}
@media (min-width:720px){.grab{display:none}}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 22px 8px}
.sheet-head h2{font-family:var(--f-display);font-weight:600;font-size:1.7rem;line-height:1.25;margin:0}
.sheet-head p{margin:2px 0 0;color:var(--ink-soft);font-size:.95rem;font-weight:300}
.x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:transparent;display:grid;place-items:center;transition:transform 140ms var(--ease-out), background-color .15s ease}
.x:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.x:hover{background:var(--cream)}}
.x svg{width:16px;height:16px}
.sheet-body{padding:6px 22px 18px;overflow-y:auto;overscroll-behavior:contain}
.sheet-foot{padding:14px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);display:flex;gap:12px;align-items:center;background:var(--paper);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------- خيارات ونماذج ---------- */
fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
legend{font-weight:500;margin-bottom:10px;padding:0;font-size:1rem}
legend small{font-weight:300;color:var(--ink-soft);font-size:.85rem;margin-inline-start:6px}
.opts{display:grid;gap:8px}
.opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 16px;border:1px solid var(--hair);border-radius:var(--r-md);background:transparent;cursor:pointer;transition:border-color .2s ease, background-color .2s ease}
@media (hover:hover) and (pointer:fine){.opt:hover{background:var(--cream)}}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .lbl{flex:1;display:flex;align-items:center}
.opt .mark{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-soft);display:grid;place-items:center;margin-inline-end:12px;transition:border-color .2s ease, background-color .2s ease}
.opt input[type=checkbox] + .mark{border-radius:6px}
.opt .mark svg{width:12px;height:12px;color:var(--foam);opacity:0;transform:scale(.5);transition:opacity .15s ease, transform 260ms var(--ease-out)}
.opt .extra{color:var(--ink-soft);font-size:.88rem;white-space:nowrap;font-weight:300}
.opt:has(input:checked){border-color:var(--espresso);background:var(--cream)}
.opt input:checked + .mark{background:var(--espresso);border-color:var(--espresso)}
.opt input:checked + .mark svg{opacity:1;transform:none}
.opt:has(input:focus-visible){outline:2px solid var(--brown);outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-weight:500;font-size:.95rem}
.field label small{font-weight:300;color:var(--ink-soft)}
.field input,.field textarea{width:100%;min-height:50px;padding:10px 16px;border:1px solid var(--hair);border-radius:var(--r-md);background:#fff8;font-size:16px;transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease}
.field textarea{min-height:80px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--espresso);background:#fff;box-shadow:0 0 0 4px rgba(133,90,62,.12)}
.field input::placeholder,.field textarea::placeholder{color:#97806f}
.field .err{color:var(--danger);font-size:.88rem;font-weight:500;display:none}
.field.invalid input{border-color:var(--danger)}
.field.invalid .err{display:block;animation:shake 320ms var(--ease-out)}
@keyframes shake{25%{transform:translateX(4px)}50%{transform:translateX(-4px)}75%{transform:translateX(2px)}}
.form-error{background:#9a2f1f12;color:var(--danger);border-radius:var(--r-md);padding:12px 14px;font-size:.92rem;font-weight:500;margin:0 0 14px}

/* ---------- الكمية ---------- */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:var(--r-pill);background:transparent}
.stepper button{width:44px;height:42px;border:0;background:transparent;display:grid;place-items:center;border-radius:var(--r-pill);transition:transform 140ms var(--ease-out), background-color .15s ease}
.stepper button:active{transform:scale(.88)}
@media (hover:hover) and (pointer:fine){.stepper button:hover{background:var(--cream)}}
.stepper button[disabled]{opacity:.35;cursor:not-allowed}
.stepper svg{width:15px;height:15px}
.stepper output{min-width:26px;text-align:center;font-weight:600}

/* ---------- تنبيه ---------- */
.toast{position:fixed;left:50%;top:calc(var(--header-h) + 14px);z-index:80;transform:translate(-50%,-14px) scale(.98);opacity:0;pointer-events:none;background:var(--espresso);color:var(--foam);padding:11px 20px;border-radius:var(--r-pill);font-weight:500;font-size:.95rem;box-shadow:var(--shadow-2);transition:transform 320ms var(--ease-out), opacity 220ms ease;max-width:calc(100% - 32px);text-align:center;border:1px solid var(--hair-dark)}
.toast.show{transform:translate(-50%,0) scale(1);opacity:1}

/* ---------- خطوات حالة الطلب (مشتركة بين صفحة التتبع ولوحة التحكم) ---------- */
.status-pill{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:500;padding:3px 11px;border-radius:var(--r-pill);line-height:1.7}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-new{background:#a8641e1c;color:var(--warn)}
.st-preparing{background:#855a3e1f;color:var(--brown-deep)}
.st-ready{background:#3f6b4720;color:var(--ok)}
.st-done{background:#6e56461a;color:var(--ink-soft)}
.st-cancelled{background:#9a2f1f17;color:var(--danger)}

/* شريط التجربة */
.demo-bar{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;background:var(--brown);color:var(--foam);font-size:.85rem;padding:5px 12px}
.demo-bar span{opacity:.75;margin-inline-end:8px}
.demo-bar a{color:var(--foam);text-decoration:none;padding:6px 12px;border-radius:var(--r-pill);min-height:32px;display:inline-flex;align-items:center;transition:background-color .2s ease}
.demo-bar a:hover{background:rgba(255,255,255,.12)}
.demo-bar a[aria-current="page"]{background:var(--foam);color:var(--brown-deep);font-weight:500}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
}