/* ════════════════════════════════════════════════════════════
   صفحات الزبون: كتابة الرقم + متابعة الطلب
   الفكرة: «تذكرة الدور». فوق قصاصة صفرا زي تذكرة المحل عليها رقمك بخط كبير،
   وتحتها ورقة بيضاء فيها الوقت. ولما يجهز، الشاشة كلها بتصير خضرا
   ════════════════════════════════════════════════════════════ */
.cust{
  --amber:#FFC53D;
  --page:#FFFFFF;
  --soft:#F1F5F4;
  --rule:#E1E8E6;
  min-height:100vh;min-height:100dvh;background:var(--page);color:var(--ink)}
.cust__main{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding-bottom:max(18px,env(safe-area-inset-bottom))}
#tracking{display:flex;flex-direction:column;flex:1}
.cust__live{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.cust__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--danger)}
.cust__live:not(.is-off){display:none}
.cust__foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:#8FA3A1;text-decoration:none}
.cust__foot img{width:16px;height:16px}

/* ── الأزرار */
.cust .cust__go{background:var(--ink);color:#fff;font-weight:700}
.cust .cust__go:active{transform:translateY(1px)}
.btn--quiet{background:transparent;color:var(--muted);min-height:48px;font-weight:600}
.cust .form-error{text-align:center;margin:8px 0 12px}

/* ── التذكرة الصفرا: حافتها تحت مقصوصة زي ورق التذاكر */
.tk{position:relative;background:var(--amber);color:var(--ink);padding:max(16px,env(safe-area-inset-top)) 22px 30px;margin-bottom:24px}
.tk::after{content:"";position:absolute;inset-inline:0;bottom:-9px;height:10px;
  background:radial-gradient(circle at 9px 10px,transparent 0 6.5px,var(--amber) 7px) repeat-x;background-size:18px 10px}
.tk__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.tk__shop{font-weight:700;font-size:16px}
.tk__label{margin-top:22px;font-size:15px;font-weight:600;opacity:.75}
.tk__num{text-align:right;direction:ltr;unicode-bidi:plaintext;font-family:var(--display);font-size:clamp(116px,40vw,164px);line-height:.82;padding-top:16px;margin-right:-4px;overflow-wrap:anywhere}
.tk__q{margin-top:26px;font-family:var(--display);font-weight:400;font-size:clamp(36px,11vw,46px);line-height:1.12}
.tk__hint{margin-top:4px;font-size:15px;font-weight:500;opacity:.75}

/* ── لحظة وحدة بس: التذكرة بتنطبع لتحت زي ورقة طالعة من الطابعة */
.cust--order .tk{animation:print .7s cubic-bezier(.2,.8,.2,1) both}
.cust--order .tk__num{animation:stamp .45s .55s cubic-bezier(.3,1.6,.5,1) both}
.cust--order .timer,.cust--order .alerts{animation:rise .5s .75s ease-out both}
@keyframes print{from{clip-path:inset(0 0 100% 0);transform:translateY(-14px)}to{clip-path:inset(0 0 -12px 0);transform:none}}
@keyframes stamp{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cust--order .tk,.cust--order .tk__num,.cust--order .timer,.cust--order .alerts{animation:none}}

/* ── كتابة الرقم */
.join,.seek,.closed,.timer,.alerts,.resume{margin-inline:22px}
.join{padding-top:8px}
.join form{display:flex;flex-direction:column}
.digits{display:block;width:100%;padding:16px 0 6px;border:0;border-bottom:4px solid var(--rule);border-radius:0;background:transparent;
  font-family:var(--display);font-size:clamp(76px,24vw,96px);line-height:1.05;text-align:center;letter-spacing:.04em;color:var(--ink);outline:none;
  caret-color:var(--amber);transition:border-color .15s}
.digits::placeholder{color:#D5DEDC}
.digits:focus,.digits:focus-visible{border-bottom-color:var(--ink);box-shadow:none}
.join__note{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}

.resume{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;padding:12px 14px;border-radius:14px;background:var(--soft);font-weight:500}
.closed{flex:1;display:grid;place-content:center;text-align:center;gap:6px;color:var(--muted)}
.closed h1{font-family:var(--display);font-weight:400;font-size:30px;color:var(--ink)}

/* ── بندوّر على الرقم: السؤال فوق بيختفي، والرقم بيصير هو العنوان */
.cust--join:has(#seek:not([hidden])) .tk__q,.cust--join:has(#seek:not([hidden])) .tk__hint{display:none}
.seek{text-align:center;padding-top:6px}
.seek__num{font-family:var(--display);font-size:clamp(88px,28vw,116px);line-height:1;padding-top:10px}
.seek__dots{display:flex;justify-content:center;gap:8px;margin:8px 0 14px}
.seek__dots i{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:seek 1.2s ease-in-out infinite}
.seek__dots i:nth-child(2){animation-delay:.2s}
.seek__dots i:nth-child(3){animation-delay:.4s}
.seek.is-stopped .seek__dots{visibility:hidden}
.seek__msg{font-size:17px;font-weight:600;margin-bottom:26px}
.seek.is-stopped .seek__msg{color:var(--danger)}
.seek__acts{display:grid;gap:4px}
@keyframes seek{50%{opacity:.25;transform:scale(.7)}}

/* ── الوقت: رقم كبير + شريط من «هلّأ» لـ «جاهز» */
.timer__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.timer__cap{font-size:15px;font-weight:600;color:var(--muted)}
.timer__time{font-family:var(--display);font-size:clamp(60px,19vw,76px);line-height:1;padding-top:10px}
.timer__eta{text-align:end;font-size:14px;font-weight:500;color:var(--muted);white-space:pre-line;line-height:1.4;padding-bottom:8px}
.timer__track{position:relative;height:14px;margin-top:14px;border-radius:7px;background:var(--soft);overflow:hidden}
.timer__fill{height:100%;width:0;border-radius:7px;background:var(--amber);transition:width .9s linear}
.timer__ends{display:flex;justify-content:space-between;margin-top:6px;font-size:13px;font-weight:600;color:#8FA3A1}
.timer.is-open .timer__time,.timer.is-late .timer__time{font-size:clamp(34px,10vw,42px);line-height:1.25;padding-top:6px}
.timer.is-open .timer__fill{width:38% !important;animation:slide 1.6s ease-in-out infinite alternate}
.timer.is-late .timer__fill{width:100% !important;animation:pulse 1.8s ease-in-out infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-163%)}}
@keyframes pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.timer__fill,.seek__dots i{animation:none !important}}

/* ── التنبيه */
.alerts{margin-top:30px}
.alerts__on{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted)}
.alerts__on[hidden]{display:none}
.alerts__on i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ready);box-shadow:0 0 0 4px var(--ready-soft)}

/* ── شاشة "جاهز": الشاشة كلها بتصير خضرا */
.ready{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:24px 20px max(28px,env(safe-area-inset-bottom));background:var(--ready);color:#04281A;text-align:center;animation:flood .45s ease-out}
.ready__badge{position:relative;display:grid;place-items:center;width:min(230px,58vw);aspect-ratio:1;border-radius:50%;background:#fff;margin-bottom:36px}
.ready__badge::before,.ready__badge::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #fff;animation:wave 2.2s ease-out infinite}
.ready__badge::after{animation-delay:1.1s}
.ready__num{font-family:var(--display);font-weight:400;font-size:clamp(90px,30vw,132px);color:var(--ink);line-height:1;padding-top:14px}
.ready__title{font-family:var(--display);font-weight:400;font-size:46px;line-height:1.2}
.ready__sub{font-size:17px;font-weight:500;opacity:.85;margin-bottom:22px}
.ready .btn{background:var(--ink);color:#fff;width:min(320px,100%)}
.ready__mute{background:none;border:0;color:#04281A;font-weight:600;text-decoration:underline;text-underline-offset:4px;padding:10px}
/* لما تفتح شاشة «جاهز» وتخلص حركة الفتحة، الصفحة اللي تحتها بتختفي (البرغر والبخار والتايمر بيوقفوا رسم).
   على الآيفون كانوا مع الأشعة يعلّقوا كبسة «استلمت طلبي». لما تتسكّر الشاشة بترجع فوراً */
.cust__main{transition:visibility 0s}
.is-ready .cust__main{visibility:hidden;transition:visibility 0s .5s}
@keyframes flood{from{clip-path:circle(0 at 50% 40%)}to{clip-path:circle(150% at 50% 40%)}}
@keyframes wave{from{transform:scale(1);opacity:.9}to{transform:scale(1.32);opacity:0}}
@media (prefers-reduced-motion:reduce){.ready{animation:none}.ready__badge::before,.ready__badge::after{animation:none;opacity:0}}

/* ── بعد الاستلام: نفس التذكرة، بس عليها ختم «استلمته» */
.thanks{flex:1;display:flex;flex-direction:column}
.thanks[hidden]{display:none}
.cust--order .tk--done .tk__num{animation:none;opacity:.22}
.tk__stamp{position:absolute;inset-inline-end:22px;bottom:52px;padding:6px 14px 4px;border:3px solid var(--ready-deep);border-radius:10px;
  color:var(--ready-deep);font-family:var(--display);font-size:26px;line-height:1.3;transform:rotate(-8deg);background:rgba(255,255,255,.35);
  animation:stampdown .5s .2s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stampdown{from{opacity:0;transform:rotate(-8deg) scale(1.25)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.tk__stamp{animation:none}}
.thanks__body{margin-inline:22px}
.thanks__body h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,12vw,52px);line-height:1.15}
.thanks__body>p{color:var(--muted);font-size:16px;margin-top:2px}

/* ── دعوة تقييم Google */
.rate{display:grid;gap:10px;margin-top:30px;padding:18px;border-radius:18px;background:var(--soft)}
.rate[hidden]{display:none}
.rate__q{font-weight:700;font-size:16px}
.cust .rate__google{background:var(--ink);color:#fff;font-weight:700;gap:10px}
.rate__stars{color:var(--amber);letter-spacing:1px;font-size:15px}

/* ── English (المحل لغته إنجليزي): الصفحة من اليسار لليمين */
[dir="ltr"] .tk__num{text-align:left;margin-right:0;margin-left:-4px}
[dir="ltr"] .timer.is-open .timer__fill{animation-name:slide-ltr}
@keyframes slide-ltr{from{transform:translateX(0)}to{transform:translateX(163%)}}
[dir="ltr"] .ready__title{font-size:clamp(32px,9.5vw,46px);text-align:center;padding:0 16px}

/* ── زر تبديل اللغة (المحل مفعّل «الزبون بيبدّل اللغة»): بصفحة الرقم فوق بالزاوية، وبصفحة الطلب تحت جنب «دورك» */
.cust__main{position:relative}
.langsw{position:absolute;z-index:5;top:max(14px,calc(env(safe-area-inset-top) + 8px));inset-inline-end:16px;display:inline-flex;align-items:center;gap:6px;
  min-height:36px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(15,58,64,.14);color:var(--ink);
  font-size:13px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent}
.langsw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.langsw span{font-family:var(--font)}
.langsw span:lang(en){font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.cust--order .langsw{position:static;order:101;align-self:center;margin-top:10px}