/* 2Break booking — mobile-first, RTL. "Ink, glass and one glow". Premium refresh. */

/* ============================================================
   TOKENS — declared with :where(:root) (specificity 0) so the
   PHP-injected :root theme (--primary/--primary-d/--dark/--on-primary,
   emitted in an inline <style> BEFORE this file) always wins. (spec 0.2)
   Never rename these; values only. New tokens added below.
   ============================================================ */
:where(:root){
  /* PHP-injected theme (fallback defaults) */
  --primary:#ffc400; --primary-d:#c99b00; --on-primary:#161616; --dark:#0f0f12;

  /* surfaces derived from --dark */
  --bg:var(--dark);
  --panel:color-mix(in srgb, var(--dark) 95%, #fff);
  --panel-2:color-mix(in srgb, var(--dark) 90%, #fff);
  --line:color-mix(in srgb, var(--dark) 84%, #fff);
  --text:#f4f4f6; --muted:#a3a3ae; --ok:#22c55e;

  /* geometry */
  --radius-sm:12px; --radius:18px; --radius-lg:24px; --radius-pill:999px;

  /* elevation */
  --hair:inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow:0 10px 30px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg:0 24px 56px rgba(0,0,0,.50), 0 6px 16px rgba(0,0,0,.30);
  --glow:0 10px 28px color-mix(in srgb, var(--primary) 30%, transparent);
  --glow-hover:0 14px 34px color-mix(in srgb, var(--primary) 40%, transparent);
  --ring:0 0 0 2px var(--bg), 0 0 0 4px var(--primary);

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:48px;

  /* type */
  --font:'Heebo','Segoe UI',Rubik,system-ui,-apple-system,Arial,sans-serif;
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:20px; --fs-h1:28px; --fs-display:72px;

  /* motion */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
}

/* ============================================================
   LIGHT variant — opt-in via <html data-theme="light">. Same brand
   yellow, light surfaces. Lets the site be marketed light OR dark.
   ============================================================ */
:root[data-theme="light"]{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --panel-2:#eef1f5;
  --line:#e2e7ee;
  --text:#1b1f24; --muted:#5b6674;
  --hair:inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.05);
  --shadow:0 10px 30px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --shadow-lg:0 24px 56px rgba(16,24,40,.16), 0 6px 16px rgba(16,24,40,.08);
  --ring:0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{overflow-x:clip; min-height:100vh; min-height:100dvh}
html,body{margin:0; padding:0}
body{
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    var(--bg);
  color:var(--text);
  min-height:100vh; min-height:100dvh;
  line-height:1.5; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:520px; margin:0 auto; padding:16px 16px calc(40px + env(safe-area-inset-bottom)); position:relative}

/* ---- progress dots ---- */
.steps{display:flex; gap:8px; justify-content:center; margin:6px 0 20px}
.steps .dot{width:26px; height:5px; border-radius:var(--radius-pill); background:var(--line);
  transition:width var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std)}
.steps .dot.active{width:36px; background:var(--primary);
  box-shadow:0 0 12px color-mix(in srgb, var(--primary) 60%, transparent)}
.steps .dot.done{background:var(--primary); opacity:.5}

/* ---- screens ---- */
.screen{display:none; animation:slide var(--dur-3) var(--ease-out) both}
.screen.active{display:block}
@keyframes slide{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.head{position:relative; text-align:center; margin-bottom:22px}
.head h1{font-size:clamp(26px, 6vw, 28px); margin:0 0 4px; font-weight:800; line-height:1.15; letter-spacing:-.02em}
.head p{margin:0; color:var(--muted); font-size:15px}
.back{
  position:absolute; inset-inline-start:0; top:2px; width:44px; height:44px;
  border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--panel);
  color:var(--text); font-size:22px; cursor:pointer; line-height:1;
  box-shadow:var(--hair), var(--shadow-sm);
  transition:transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std);
}
.back:active{transform:scale(.94)}
.back:focus-visible{outline:none; box-shadow:var(--ring)}

/* ---- stepper (participants) ---- */
.stepper{display:flex; align-items:center; justify-content:center; gap:24px; margin:28px 0 6px}
.round{
  width:64px; height:64px; border-radius:50%; cursor:pointer;
  font-size:32px; font-weight:600; color:var(--text); background:var(--panel-2);
  border:1px solid var(--line); box-shadow:var(--hair), var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);
}
.round:active{transform:scale(.92)}
.round:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}
.round:focus-visible{outline:none; box-shadow:var(--ring)}
.count{
  font-size:clamp(56px, 18vw, 72px); font-weight:800; letter-spacing:-.03em; line-height:1;
  width:150px; max-width:44vw; text-align:center; font-variant-numeric:tabular-nums;
  background:transparent; border:none; color:var(--text); outline:none;
  padding:6px 0; border-radius:var(--radius-sm); font-family:inherit; caret-color:var(--primary);
  transition:background var(--dur-2) var(--ease-std), box-shadow var(--dur-1) var(--ease-std);
}
.count:focus{background:color-mix(in srgb, var(--primary) 10%, transparent)}
.count:focus-visible{box-shadow:var(--ring)}
.ppl-hint{text-align:center; font-size:15px; font-weight:600; min-height:24px; margin-bottom:26px;
  color:color-mix(in srgb, var(--primary) 70%, var(--text))}

/* ---- buttons ---- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 22px; border:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:18px; line-height:1.2;
  border-radius:var(--radius); color:var(--text);
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
  transition:transform var(--dur-1) var(--ease-std),
    box-shadow var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std), filter var(--dur-2) var(--ease-std);
}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none; box-shadow:var(--ring), var(--glow)}
.btn-block{width:100%}
.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, #fff), var(--primary));
  color:var(--on-primary);
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:active{transform:translateY(0) scale(.98); box-shadow:var(--shadow-sm)}
.btn:disabled,.btn-primary:disabled{
  background:color-mix(in srgb, var(--primary) 28%, var(--panel-2));
  color:color-mix(in srgb, var(--text) 45%, transparent);
  box-shadow:none; filter:none; cursor:not-allowed;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{transform:translateY(-1px); box-shadow:var(--glow-hover), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn:disabled:hover,.btn-primary:disabled:hover{transform:none; box-shadow:none}
}

/* ---- month nav + calendar ---- */
.month-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.month-nav div{font-weight:800; font-size:18px}
.chev{width:44px; height:44px; border-radius:var(--radius-sm); background:var(--panel); border:1px solid var(--line);
  color:var(--text); font-size:22px; cursor:pointer; box-shadow:var(--hair), var(--shadow-sm);
  transition:transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std)}
.chev:active{transform:scale(.92)}
.chev:disabled{opacity:.3; cursor:not-allowed; box-shadow:none}
.chev:focus-visible{outline:none; box-shadow:var(--ring)}
@media (hover:hover) and (pointer:fine){
  .chev:not(:disabled):hover{border-color:color-mix(in srgb, var(--primary) 55%, var(--line))}
}

.calendar{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-dow{color:var(--muted); font-size:13px; font-weight:500; text-align:center; padding-bottom:6px}
.day{
  aspect-ratio:1; min-height:44px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer; font-weight:700; font-size:16px; position:relative; box-shadow:var(--hair);
  transition:transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std),
    background var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.day .rem{font-size:10px; font-weight:600; color:var(--ok)}
.day.empty{background:transparent; border:none; cursor:default; box-shadow:none}
.day.closed{opacity:.28; cursor:not-allowed; background:transparent; border-style:dashed; box-shadow:none}
.day.closed .rem{display:none}
.day.sel{background:var(--primary); border-color:var(--primary); color:var(--on-primary);
  box-shadow:var(--glow); transform:scale(1.04)}
.day.sel .rem{color:var(--on-primary)}
.day:not(.closed):not(.sel):active{transform:scale(.93)}
.day:focus-visible{outline:none; box-shadow:var(--ring)}
@media (hover:hover) and (pointer:fine){
  .day:not(.closed):not(.empty):not(.sel):hover{border-color:color-mix(in srgb, var(--primary) 50%, var(--line)); background:var(--panel-2)}
}

/* ---- time slots ---- */
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px}
.slot{
  min-height:64px; padding:16px 8px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel); cursor:pointer; box-shadow:var(--hair), var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  animation:rise var(--dur-2) var(--ease-out) both;
  transition:transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std),
    background var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.slot .t{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.slot .rem{font-size:11px; color:var(--ok); margin-top:3px}
.slot.sel{background:var(--primary); border-color:var(--primary); color:var(--on-primary); box-shadow:var(--glow)}
.slot.sel .rem{color:var(--on-primary)}
.slot.sel::after{content:''; width:6px; height:6px; border-radius:50%; background:var(--on-primary); margin-top:6px}
.slot:active{transform:scale(.96)}
.slot:focus-visible{outline:none; box-shadow:var(--ring)}
@media (hover:hover) and (pointer:fine){
  .slot:not(.sel):hover{border-color:color-mix(in srgb, var(--primary) 50%, var(--line)); transform:translateY(-1px)}
}
.slot:nth-child(1){animation-delay:0ms}
.slot:nth-child(2){animation-delay:20ms}
.slot:nth-child(3){animation-delay:40ms}
.slot:nth-child(4){animation-delay:60ms}
.slot:nth-child(5){animation-delay:80ms}
.slot:nth-child(6){animation-delay:100ms}
.slot:nth-child(7){animation-delay:120ms}
.slot:nth-child(8){animation-delay:140ms}
.slot:nth-child(9){animation-delay:160ms}
.slot:nth-child(10){animation-delay:180ms}
.slot:nth-child(11){animation-delay:200ms}
.slot:nth-child(12){animation-delay:220ms}
.empty-state{grid-column:1/-1; text-align:center; color:var(--muted); font-size:15px; padding:44px 0}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---- summary / glass cards ---- */
.summary,.wrap .cur-box,.hold-timer{
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 45%, var(--panel)), var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--hair), var(--shadow-sm); padding:18px;
}
.summary{margin-bottom:18px; display:grid; gap:10px}
.summary .row{display:flex; justify-content:space-between; align-items:center; font-size:15px}
.summary .row span{color:var(--muted)}
.summary .row b{font-weight:700}
.summary .row.total{border-top:1px dashed color-mix(in srgb, var(--line) 70%, var(--primary));
  padding-top:12px; font-size:19px}
.summary .row.total b{color:var(--primary); font-size:22px; font-weight:800}

/* ---- form ---- */
.form{display:grid; gap:14px; margin-bottom:16px}
.field label{display:block; font-size:14px; color:var(--muted); margin-bottom:8px; font-weight:600}
.field label .req{color:#ff6b76; font-weight:700; margin-inline-start:2px}
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); font-family:inherit; font-size:16px;
  box-shadow:var(--hair);
  transition:border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std);
}
.field textarea{min-height:88px; resize:vertical}
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  background:color-mix(in srgb, var(--panel-2) 85%, var(--panel));
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{
  border-color:#ff4d5a; box-shadow:0 0 0 3px rgba(255,77,90,.22);
}
.field.invalid label{color:#ff8a93}
.seg{display:flex; gap:8px}
.seg button{
  flex:1; min-height:48px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel-2); color:var(--text); font-family:inherit; font-weight:700; cursor:pointer;
  box-shadow:var(--hair);
  transition:transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std),
    background var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}
.seg button:active{transform:scale(.97)}
.seg button:focus-visible{outline:none; box-shadow:var(--ring)}
.seg button.on{background:var(--primary); border-color:var(--primary); color:var(--on-primary);
  box-shadow:0 6px 16px color-mix(in srgb, var(--primary) 20%, transparent)}

/* ---- hold timer ---- */
.hold-timer{display:flex; align-items:center; justify-content:center; gap:8px;
  background:color-mix(in srgb, var(--primary) 10%, var(--panel));
  border:1px solid color-mix(in srgb, var(--primary) 55%, transparent); color:var(--text);
  border-radius:var(--radius-sm); margin-bottom:14px; font-size:15px; font-weight:600}
.hold-timer .clock{font-size:19px}
.hold-timer b{font-variant-numeric:tabular-nums; font-size:19px; color:var(--primary); min-width:52px; text-align:center}
.hold-timer.urgent{animation:pulseRed 1s ease-in-out infinite}
@keyframes pulseRed{50%{background:rgba(225,29,42,.28); border-color:#ff4d5a}}
.fineprint{text-align:center; color:var(--muted); font-size:13px; font-weight:500; margin-top:12px}
/* terms acceptance row (before pay) */
.terms{display:flex; align-items:center; gap:10px; margin:2px 0 14px; color:var(--text);
  font-size:14px; line-height:1.4; cursor:pointer; user-select:none}
.terms input{width:20px; height:20px; flex:none; accent-color:var(--primary); cursor:pointer}
.terms a{color:var(--primary); font-weight:700; text-decoration:underline}
.terms .req{color:#ff4d5a; font-weight:800}
.terms.shake{animation:shakeX .4s}
@keyframes shakeX{0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}}

/* ---- toast ---- */
.toast{
  position:fixed; inset-inline:16px; bottom:calc(20px + env(safe-area-inset-bottom));
  max-width:490px; margin:0 auto; z-index:50; text-align:center; font-weight:600; font-size:15px;
  padding:14px 18px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb, var(--primary) 60%, transparent);
  color:var(--text);
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.35);
  animation:pop .22s var(--ease-out) both;
}
@keyframes pop{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ---- spinner on buttons ---- */
.btn.loading{position:relative; color:transparent}
.btn.loading::after{content:''; position:absolute; width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(0,0,0,.25); border-top-color:var(--on-primary); animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes badgePop{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:scale(1)}}

/* ============================================================
   RESULT / VOUCHER / manage cur-box (spec C12)
   .card.result base lives here (no inline override on return pages).
   .voucher & manage .cur-box overridden with higher specificity.
   ============================================================ */
.return-page{display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; padding:20px}
/* On the centered result pages the credit must sit at the bottom, not become a flex item
   beside the card. Pin it to the bottom-center instead of letting it float mid-page. */
.return-page .site-credit{position:fixed; inset-block-end:16px; inset-inline:0; padding:0 16px}
.card.result{
  position:relative; overflow:hidden; max-width:440px; width:100%;
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 40%, var(--panel)), var(--panel));
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px 26px 30px; text-align:center;
  box-shadow:var(--hair), var(--shadow-lg);
}
.card.result::before{content:''; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--primary)}
.card.result.is-success::before{background:var(--ok)}
.card.result.is-cancel::before{background:#ff4d5a}
.card.result.is-pending::before{background:var(--primary)}
.card.result.is-success{border-color:color-mix(in srgb, var(--ok) 45%, var(--line))}
.result-icon{
  width:96px; height:96px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center;
  font-size:48px; background:color-mix(in srgb, var(--primary) 12%, var(--panel-2));
}
.card.result.is-success .result-icon{background:color-mix(in srgb, var(--ok) 14%, var(--panel-2))}
.card.result.is-cancel .result-icon{background:color-mix(in srgb, #ff4d5a 14%, var(--panel-2))}
.result-icon.spin{animation:tick 1.2s ease-in-out infinite}
@keyframes tick{50%{transform:scale(1.15)}}
.card.result h1{margin:6px 0 8px; font-size:24px; font-weight:800; letter-spacing:-.02em}
.card.result p{color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 20px}
.card.result .btn{margin-top:20px; min-width:220px}
.result-details{display:grid; gap:0; text-align:start; margin-top:18px}
.result-details div{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line)}
.result-details div:last-child{border-bottom:none}
.result-details span{color:var(--muted); font-size:14px}
.result-details b{font-weight:700; font-variant-numeric:tabular-nums}

/* manage.php current-booking box */
.wrap .cur-box{margin-bottom:18px}
.wrap .cur-box .cur-t{color:var(--muted); font-size:13px; font-weight:500; margin-bottom:6px}
.wrap .cur-box .cur-v{font-size:20px; font-weight:800}

/* gift-card.php voucher — not inside .wrap, so bump via body */
body .voucher{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg), var(--hair);
}
body .voucher .amt{font-size:56px; font-weight:800; letter-spacing:-.03em}
body .voucher .barcode{border-radius:12px}
body .voucher .code{font-size:20px; letter-spacing:.2em}

/* ============================================================
   RESPONSIVE (spec E)
   ============================================================ */
@media (max-width:480px){
  .wrap{padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
  .head h1{font-size:26px}
  .count{font-size:clamp(56px, 18vw, 64px)}
  .calendar{gap:6px}
  .slots{grid-template-columns:repeat(3, 1fr)}
  .round{width:60px; height:60px}
  .btn{min-height:54px}
  #pay.btn{position:sticky; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:5}
}
@media (min-width:481px) and (max-width:860px){
  .wrap{padding:24px 20px 48px}
  .head h1{font-size:28px}
  .calendar{gap:7px}
}
@media (min-width:481px){
  .slots{grid-template-columns:repeat(auto-fill, minmax(112px, 1fr))}
}
@media (min-width:861px){
  .wrap{padding:40px 20px 64px}
  .head h1{font-size:32px}
  .calendar{gap:8px}
  .round{width:64px; height:64px}
  .btn{min-height:56px}
}
@media (min-width:560px){ .head h1{font-size:clamp(28px, 4vw, 32px)} }

/* Coarse-pointer touch targets */
@media (pointer:coarse){
  .day{min-height:44px}
  .slot{min-height:64px}
  .chev,.back{width:44px; height:44px}
  .seg button{min-height:48px}
}

/* ============================================================
   REDUCED MOTION (spec D)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn.loading::after{animation-duration:.7s !important; animation-iteration-count:infinite !important}
  .hold-timer.urgent{background:rgba(225,29,42,.28); border-color:#ff4d5a}
  .screen,.slot,.toast{animation:none; opacity:1; transform:none}
}

/* outward-facing copyright — auto-year via PHP date('Y') */
.site-credit{text-align:center; color:var(--muted); opacity:.7; font-size:11px;
  padding:22px 16px 26px; letter-spacing:.02em}