/* core.css — shared base + components for every site.
   Sites override tokens (and add section styles) in assets/css/theme.css.
   RTL-first: logical properties only. No letter-spacing on Persian. */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --c-ink: #1f2224;
  --c-ink-2: #4b5155;
  --c-bg: #ecece8;
  --c-surface: #ffffff;
  --c-line: #d3d4cf;
  --c-line-strong: #868a88;     /* ≥3:1 on white: input borders */
  --c-dark: #2b2d2f;
  --c-dark-2: #3a3d40;
  --c-on-dark: #f3f2ee;
  --c-on-dark-2: #c8c9c4;
  --c-accent: #f5c400;
  --c-on-accent: #1f2224;
  --c-link: #0f5aa8;
  --c-ok: #2e6b3f;
  --c-err: #b3261e;
  --c-err-bg: #fbeceb;
  --c-focus: #0f5aa8;
  --c-plate-blue: #0f4fa0;
  /* shape: each radius has a role */
  --r-0: 0;      /* photos, bands, boards' outer edge */
  --r-1: 3px;    /* inputs, slot chips, small buttons */
  --r-2: 6px;    /* plates (real plates have rounded corners) */
  --r-3: 14px;   /* the one featured sheet per page */
  /* elevation: one lifted element per view, everything else is flat */
  --sh-0: none;
  --sh-lift: 0 24px 48px -28px rgb(20 22 24 / .55), 0 2px 0 rgb(20 22 24 / .05);
  /* spacing (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  /* type */
  --font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  /* motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.9;
  color: var(--c-ink);
  background: var(--c-bg);
  text-align: start;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset { margin: 0; }
h1, h2, h3 { line-height: 1.35; font-weight: 800; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }
a { color: var(--c-link); text-underline-offset: .25em; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; float: inline-start; width: 100%; }
legend + * { clear: both; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* Any dark section sets data-surface="dark": the focus ring switches to a light colour (blue is 2:1 on asphalt). */
[data-surface='dark'] { --c-focus: var(--c-accent); }

/* Browser surfaces carry the palette too. */
::selection { background: var(--c-accent); color: var(--c-on-accent); }
input, textarea { caret-color: var(--c-link); }
/* Tabular figures only where numbers stack in columns (admin table) or must not reflow. */
.ticket__code strong, .num { font-variant-numeric: tabular-nums; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: var(--s-4); top: -10rem; z-index: 10;
  background: var(--c-accent); color: var(--c-on-accent); padding: var(--s-2) var(--s-4); font-weight: 700;
}
.skip:focus { top: var(--s-2); }
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Primary action: the ticket ---------- */
/* Notched like a queue ticket. Unique shape on the page: only the primary
   action (and the confirmation it produces) uses it. */
.btn-ticket {
  --notch: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.25rem; padding: 0 var(--s-6);
  border: 0; border-radius: var(--r-1);
  background: var(--c-accent); color: var(--c-on-accent);
  font-weight: 800; font-size: var(--t-md); text-decoration: none; cursor: pointer;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-ticket:hover { background: #ffd21f; }
.btn-ticket:active { transform: translateY(1px); }
/* The mask would clip an outline, so focus is drawn inside. */
.btn-ticket:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-dark), inset 0 0 0 5px var(--c-accent), inset 0 0 0 7px var(--c-dark); }
.btn-ticket[aria-busy='true'] { cursor: progress; background: #e8d27a; }
.btn-plain {
  min-height: 2.75rem; padding: 0 var(--s-4); border: 2px solid var(--c-dark); border-radius: var(--r-1);
  background: transparent; font-weight: 700; cursor: pointer;
}

/* ---------- Booking widget ---------- */
.bk__alert {
  border: 1.5px solid var(--c-err); background: var(--c-err-bg); color: var(--c-ink);
  padding: var(--s-3) var(--s-4); margin-block-end: var(--s-5); border-radius: var(--r-1);
}
.bk__alert ul { list-style: disc; padding-inline-start: var(--s-5); }
.bk__alert:focus { outline: none; }

.bk__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.bk-form { display: contents; }
/* Grid items default to min-width:auto; the 14-day strip must scroll, not widen the page. */
.bk__steps > *, .bk-form > * { min-width: 0; }

/* Each step sits on a painted lane: number square + dashed yellow line down to the next step. */
.bk__step { position: relative; padding-inline-start: 3.25rem; }
.bk__step::before {
  content: ''; position: absolute; inset-inline-start: calc(1.125rem - 2px); top: 2.75rem; bottom: calc(-1 * var(--s-6) + .5rem);
  width: 4px;
  background: repeating-linear-gradient(to bottom, var(--c-accent) 0 14px, transparent 14px 26px);
}
.bk__step.details::before { display: none; }
.bk__legend { font-weight: 800; font-size: var(--t-lg); line-height: 1.5; margin-block-end: var(--s-4); }
.bk__num {
  position: absolute; inset-inline-start: 0; top: 0;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  background: var(--c-dark); color: var(--c-accent); font-weight: 900; font-size: 1.1rem; border-radius: var(--r-1);
}

/* Days: horizontal strip on phones, real 7-column week grid on wider screens. */
.days {
  /* Phones: 3 whole days + half of the 4th at any width, so the cut-off card says "more this way".
     Visible width = 100% + the end padding (--s-4); 3 cards + 3 gaps + 0.5 card fill it. */
  display: grid; grid-auto-flow: column; gap: var(--s-2);
  grid-auto-columns: max(3.9rem, calc((100% + var(--s-4) - 3 * var(--s-2)) / 3.5));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-block-end: var(--s-3); margin-inline-end: calc(-1 * var(--s-4)); padding-inline-end: var(--s-4);
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent;
}
.days__wd, .day--pad { display: none; }
.day {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0;
  min-height: 6.25rem; padding: var(--s-2) var(--s-1) var(--s-3);
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-surface);
  cursor: pointer; scroll-snap-align: start; text-align: center; line-height: 1.4;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day__wd { font-size: .8rem; color: var(--c-ink-2); }
.day__num { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.day__mo { font-size: .8rem; }
.day__note { font-size: .72rem; color: var(--c-ink-2); min-height: 1.1em; }
.day.is-short .day__note { color: var(--c-ink); font-weight: 700; }
.day.is-holiday .day__num { color: var(--c-err); }
.day:hover { border-color: var(--c-dark); }
.day:has(input:checked) { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-on-dark); }
.day:has(input:checked) .day__wd, .day:has(input:checked) .day__note { color: var(--c-on-dark-2); }
.day:has(input:checked) .day__num { color: var(--c-on-dark); }
.day:has(input:checked)::after {
  content: ''; position: absolute; inset-inline: 22%; bottom: 6px; height: 4px; background: var(--c-accent);
}
.day:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.day.is-full { cursor: not-allowed; background: transparent; border-style: dashed; color: var(--c-ink-2); }
.day.is-full .day__num { text-decoration: line-through; text-decoration-thickness: 2px; }

@media (min-width: 40rem) {
  .days {
    grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-columns: auto;
    overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  .days__wd { display: block; text-align: center; font-size: var(--t-sm); color: var(--c-ink-2); font-weight: 700; }
  .day--pad { display: block; }
  .day { min-height: 5.75rem; }
}

/* Slots */
.slots__day { display: block; font-size: var(--t-base); font-weight: 500; color: var(--c-ink-2); }
.slots__group + .slots__group { margin-block-start: var(--s-4); }
.slots__label { font-size: var(--t-sm); color: var(--c-ink-2); margin-block-end: var(--s-2); }
/* A later group behind a native <details> toggle (works without JS). */
.slots__toggle {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3);
  min-height: 3rem; padding: var(--s-2) var(--s-4); padding-inline-end: 2.75rem;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-bg);
  list-style: none; cursor: pointer; line-height: 1.6;
}
.slots__toggle::-webkit-details-marker { display: none; }
.slots__toggle::after {
  content: ''; position: absolute; inset-inline-end: 1.1rem; top: 50%; width: .55rem; height: .55rem;
  border: solid var(--c-ink); border-width: 0 2.5px 2.5px 0; transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.slots__more[open] > .slots__toggle::after { transform: translateY(-25%) rotate(-135deg); }
.slots__more[open] > .slots__toggle { margin-block-end: var(--s-3); }
.slots__toggle:hover { border-color: var(--c-dark); }
.slots__toggle-title { font-weight: 800; }
.slots__toggle-meta { font-size: var(--t-sm); color: var(--c-ink-2); }
/* Timetable: one row per hour (numeral at the start), slots placed by minute.
   Narrow container: 3 columns (a 10-minute hour wraps :00–:20 / :30–:50).
   Wide container: 6 columns, every :20 sits under every other :20. */
.slots { container: slots / inline-size; }
.slots__grid { display: grid; }
.slots__hour {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; column-gap: var(--s-2);
  padding-block: var(--s-2); border-block-start: 1px solid var(--c-line);
}
.slots__hour:first-child { border-block-start: 0; padding-block-start: 0; }
.slots__h { font-weight: 800; font-size: 1.15rem; line-height: 2.75rem; color: var(--c-ink-2); text-align: center; }
.slots__row { display: grid; grid-template-columns: repeat(3, minmax(2.75rem, 1fr)); gap: 6px; }
.slots__row--e20 .m0, .slots__row--e10 .m0, .slots__row--e10 .m30 { grid-column: 1; }
.slots__row--e20 .m20, .slots__row--e10 .m10, .slots__row--e10 .m40 { grid-column: 2; }
.slots__row--e20 .m40, .slots__row--e10 .m20, .slots__row--e10 .m50 { grid-column: 3; }
.slots__row--e10 .m30, .slots__row--e10 .m40, .slots__row--e10 .m50 { grid-row: 2; }
@container slots (min-width: 24rem) {
  .slots__row { grid-template-columns: repeat(6, minmax(2.75rem, 1fr)); }
  .slots__row .m0 { grid-column: 1; } .slots__row .m10 { grid-column: 2; } .slots__row .m20 { grid-column: 3; }
  .slots__row .m30 { grid-column: 4; } .slots__row .m40 { grid-column: 5; } .slots__row .m50 { grid-column: 6; }
  .slots__row .m30, .slots__row .m40, .slots__row .m50 { grid-row: 1; }
}
.slot { position: relative; min-width: 0; }
.slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* At rest: a light bay with a short curb line, no box. */
.slot span {
  position: relative; display: grid; place-items: center; min-height: 2.75rem;
  border-radius: var(--r-1); background: #f1f1ed; color: var(--c-ink);
  font-weight: 600; font-size: 1rem; cursor: pointer;
  box-shadow: inset 0 -2px 0 var(--c-line-strong);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.slot:hover span { background: var(--c-surface); box-shadow: inset 0 0 0 1.5px var(--c-dark); }
.slot input:checked + span { background: var(--c-dark); color: var(--c-accent); font-weight: 800; box-shadow: inset 0 -4px 0 var(--c-accent); }
.slot input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.slot.is-taken span {
  cursor: not-allowed; background: transparent; box-shadow: none;
  color: #63686b; font-weight: 400; text-decoration: line-through; /* 5.6:1 on white */
}
.slot.is-taken input { cursor: not-allowed; }
.slots__empty { padding: var(--s-4); border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-1); }
.slots.is-loading { opacity: .55; pointer-events: none; transition: opacity var(--dur) var(--ease); }

/* Fields */
.field { margin-block-end: var(--s-5); }
.field__label { display: block; font-weight: 700; margin-block-end: var(--s-1); line-height: 1.6; }
.field__opt { font-weight: 400; color: var(--c-ink-2); }
.field__hint { font-size: var(--t-sm); color: var(--c-ink-2); margin-block-start: var(--s-1); line-height: 1.7; }
.field__err { font-size: var(--t-sm); color: var(--c-err); font-weight: 700; margin-block-start: var(--s-1); }
.field input:not([type='radio']):not(.plate__digits), .field select, .field textarea {
  display: block; width: 100%; min-height: 3rem; padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-1); background: var(--c-surface);
}
/* LTR values (phone numbers) in an RTL form still line up with the RTL labels. */
[dir='rtl'] .field input[dir='ltr'] { text-align: right; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-dark); }
.field.is-invalid input:not(.plate__digits), .field.is-invalid textarea, .field.is-invalid select { border-color: var(--c-err); border-width: 2px; }

/* ---------- Iranian licence plate ---------- */
/* Physical order, left to right: [band] [2 digits] [letter] [3 digits] | ایران [2 digits]. */
.plate {
  --plate-h: 4.25rem;
  display: flex; align-items: stretch; width: 100%; max-width: 24rem; height: var(--plate-h);
  background: #fff; border: 2.5px solid #16181a; border-radius: var(--r-2); overflow: hidden;
  font-weight: 800; line-height: 1;
}
.plate__band {
  flex: 0 0 2.1rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  background: var(--c-plate-blue); color: #fff; padding: 5px 2px 6px;
}
.plate__flag {
  width: 1.35rem; height: .9rem;
  background: linear-gradient(#239f40 0 33.3%, #fff 0 66.6%, #da0000 0); /* the flag's three bands */
}
.plate__ir { font-size: .5rem; font-weight: 700; line-height: 1.25; text-align: center; font-family: var(--font); }
.plate__main { flex: 1; display: flex; align-items: center; justify-content: space-evenly; gap: 2px; padding-inline: 4px; min-width: 0; }
.plate__digits {
  min-width: 0; height: calc(var(--plate-h) - 14px); padding: 0; border: 0; border-radius: var(--r-1);
  background: transparent; text-align: center; font-weight: 800; font-size: clamp(1.45rem, 1rem + 2.4vw, 2rem);
  caret-color: var(--c-plate-blue);
}
/* Widths in em of the digit font: never derived from the container (avoids intrinsic-size loops). */
.plate__digits--two, .plate__digits--iran { flex: 0 1 auto; width: 1.9em; }
.plate__digits--three { flex: 0 1 auto; width: 2.7em; }
/* Empty boxes show an example in light grey inside a dashed box, matching the letter box. */
.plate__digits::placeholder { color: #a9adaa; opacity: 1; }
.plate__digits:placeholder-shown { outline: 1.5px dashed var(--c-line-strong); outline-offset: -3px; }
.plate__digits:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; background: #fff8d6; }
.plate__letter { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.plate__letter select {
  min-height: 2.75rem; max-width: 7.5rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-1);
  background: #fff; font-weight: 800; font-size: 1.15rem; padding-inline: var(--s-1);
}
.plate__face { display: none; }
/* With JS: the native select stays (keyboard + screen readers), but is transparent over a big plate letter. */
.js .plate__letter select {
  position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; cursor: pointer; font-size: 16px;
}
.js .plate__face {
  display: grid; place-items: center; min-width: 2.6rem; height: calc(var(--plate-h) - 14px); padding-inline: var(--s-1);
  font-size: clamp(1.45rem, 1rem + 2.4vw, 2rem); border-radius: var(--r-1);
}
.js .plate__face.is-empty { font-size: .95rem; font-weight: 700; color: #6b7073; border: 1.5px dashed var(--c-line-strong); }
.js .plate__letter:focus-within .plate__face { outline: 2px solid var(--c-focus); outline-offset: -2px; background: #fff8d6; }
.plate__iran {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-inline-start: 2.5px solid #16181a; padding-inline: 4px; min-width: 3.3rem;
}
.plate__iran-word { font-size: .72rem; font-weight: 700; line-height: 1; margin-block-start: 4px; font-family: var(--font); }
.plate__iran .plate__digits { height: calc(var(--plate-h) - 30px); }
.plate-field.is-invalid .plate { border-color: var(--c-err); box-shadow: 0 0 0 2px var(--c-err); }

.bk__summary { font-weight: 700; margin-block: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); background: var(--c-bg); border-radius: var(--r-1); }
.details .btn-ticket { width: 100%; }

/* ---------- Confirmation ticket ---------- */
.ticket {
  position: relative; padding: var(--s-6) var(--s-5) var(--s-5); padding-inline-end: 8.5rem;
  background: #fffdf3; border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-1);
  -webkit-mask:
    radial-gradient(circle 6px at 50% 0, #0000 97%, #000) 0 0 / 18px 51% repeat-x,
    radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) 0 100% / 18px 51% repeat-x;
  mask:
    radial-gradient(circle 6px at 50% 0, #0000 97%, #000) 0 0 / 18px 51% repeat-x,
    radial-gradient(circle 6px at 50% 100%, #0000 97%, #000) 0 100% / 18px 51% repeat-x;
}
.ticket:focus { outline: none; }
.ticket__title { font-size: var(--t-lg); font-weight: 800; line-height: 1.6; color: var(--c-ink); }
.ticket__code { margin-block: var(--s-4); font-size: var(--t-md); }
.ticket__code strong {
  display: inline-block; margin-inline-start: var(--s-2); padding: 0 var(--s-3);
  border: 2.5px solid #16181a; border-radius: var(--r-2); background: #fff;
  font-size: 1.75rem; font-weight: 900; line-height: 1.5;
}
.ticket__note { color: var(--c-ink-2); max-width: 46ch; }
.ticket__again { display: inline-block; margin-block-start: var(--s-4); font-weight: 700; }
.stamp {
  position: absolute; inset-inline-end: var(--s-4); top: var(--s-5);
  display: grid; place-items: center; align-content: center; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  border: 3px solid var(--c-ok); box-shadow: inset 0 0 0 3px #fffdf3, inset 0 0 0 5px var(--c-ok);
  color: var(--c-ok); text-align: center; line-height: 1.25; rotate: -12deg; opacity: .92;
}
.stamp__word { font-weight: 900; font-size: 1.15rem; }
.stamp__code { font-weight: 800; font-size: .95rem; }
.ticket.is-new .stamp { animation: stamp-in 380ms cubic-bezier(.16, 1, .3, 1) 250ms both; } /* a firm press, no bounce */
@keyframes stamp-in { from { scale: 1.6; opacity: 0; } to { scale: 1; opacity: .92; } }
@media (max-width: 30rem) {
  .ticket { padding-inline-end: var(--s-5); padding-block-start: 7.5rem; }
  .stamp { top: var(--s-4); inset-inline-end: auto; inset-inline-start: var(--s-5); width: 5.5rem; height: 5.5rem; }
}

/* ---------- Generic forms (sites with forms) ---------- */
.cf { max-width: 36rem; }
.cf .btn-ticket { width: 100%; }
.cf--done { padding: var(--s-5); border: 1.5px solid var(--c-ok); border-radius: var(--r-1); background: var(--c-surface); font-weight: 700; }

.err-page { max-width: 40rem; margin: 20vh auto; padding: var(--gutter); font-size: var(--t-md); }

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