/* ============================================================
   Hackify — Request a quote / Book a demo
   ============================================================ */
:root {
  --f-field: #fafaf9;
  --f-field-line: #e4e2df;
  --f-line: #ecebe9;
  --f-line-2: #dedcd9;
  --f-soft: #fff4e3;
  --f-soft-2: #fffaf2;
  --f-danger: #d92d20;
  --f-shadow: 0 40px 120px rgba(20, 16, 12, .32), 0 8px 24px rgba(20, 16, 12, .12);
  --f-spectrum: linear-gradient(var(--sdir, 90deg), #f26722 0%, #ff7a1a 45%, #faa541 85%, #ffd166 100%);
  --f-btn: linear-gradient(var(--sdir, 90deg), #ef5f1c 0%, #ff7a1a 55%, #fb963a 100%);
}
[data-theme="dark"] {
  --f-field: #2a2b2d;
  --f-field-line: #3d3f41;
  --f-line: #36373a;
  --f-line-2: #46474a;
  --f-soft: rgba(242, 103, 34, .13);
  --f-soft-2: rgba(242, 103, 34, .07);
  --f-danger: #ff7b6e;
  --f-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .3);
}

/* ---------- Shell ---------- */
.flow { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; }
.flow[hidden], .flow__panel[hidden] { display: none !important; }
.flow__veil {
  position: absolute; inset: 0;
  background: rgba(17, 17, 19, .56);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
}
.flow__burst {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(255, 209, 102, .9), transparent 70%),
    radial-gradient(70% 70% at 20% 80%, rgba(242, 103, 34, .95), transparent 70%),
    linear-gradient(135deg, #f26722, #ff7a1a 38%, #faa541 72%, #ffd166);
}
.flow__confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; opacity: 0; }

.flow__panel {
  position: relative; z-index: 2;
  width: min(1180px, calc(100vw - 48px));
  height: min(800px, calc(100vh - 48px)); height: min(800px, calc(100dvh - 48px));
  display: grid; grid-template-columns: 348px minmax(0, 1fr);
  border-radius: 30px; overflow: hidden;
  background: var(--bg); color: var(--text);
  box-shadow: var(--f-shadow);
  isolation: isolate;
}
html[lang="ar"] .flow { font-family: var(--font-arabic); }

/* Native cursor inside the dialog — forms deserve a real caret */
body.flow-open .cursor-dot, body.flow-open .cursor-ring, body.flow-open .cursor-label { opacity: 0 !important; }
body.cursor-on.flow-open .flow * { cursor: auto !important; }
body.cursor-on.flow-open .flow :is(button, label, .opt, .pick, .slot, .cal__day, .linkbtn) { cursor: pointer !important; }
body.cursor-on.flow-open .flow :is(input[type="text"], input[type="email"], input[type="tel"], textarea) { cursor: text !important; }
body.cursor-on.flow-open .flow :is(button[disabled], .cal__day[disabled]) { cursor: default !important; }

/* ---------- Rail (summary) ---------- */
.rail {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 40px 34px 34px;
  background: #18191b; color: #f4f4f4;
}
.rail__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rail__art i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: railDrift 14s ease-in-out infinite alternate;
}
.rail__art i:nth-child(1) { width: 320px; height: 320px; background: #f26722; bottom: -140px; inset-inline-start: -120px; }
.rail__art i:nth-child(2) { width: 240px; height: 240px; background: #faa541; bottom: 60px; inset-inline-end: -150px; animation-duration: 18s; opacity: .35; }
.rail__art i:nth-child(3) { width: 200px; height: 200px; background: #ffd166; top: -120px; inset-inline-start: 40%; animation-duration: 22s; opacity: .18; }
@keyframes railDrift { to { transform: translate3d(30px, -40px, 0) scale(1.15); } }
.rail > :not(.rail__art) { position: relative; z-index: 1; }
.rail__brand {
  position: absolute !important; top: -26px; inset-inline-end: -40px; width: 210px; height: 210px; opacity: .07;
  transform: rotate(-12deg);
}
html[dir="rtl"] .rail__brand { transform: scaleX(-1) rotate(-12deg); }
.rail__brand svg { width: 100%; height: 100%; }
.rail__brand svg path { fill: #fff !important; }
.rail__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 244, 244, .6); }
html[lang="ar"] .rail__eyebrow { letter-spacing: 0; font-size: 13px; }
.rail__total { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.rail__num {
  font-family: var(--font-latin); font-size: 128px; line-height: .86; font-weight: 600; letter-spacing: -.05em;
  background: linear-gradient(180deg, #ffd166 0%, #faa541 40%, #f26722 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.1ch;
}
.rail__unit { font-size: 20px; font-weight: 600; color: #fff; }
.rail__break { margin: 0; font-size: 14px; color: rgba(244, 244, 244, .72); }
.rail__chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rail__chips li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; font-weight: 500; color: #fff;
}
.rail__chips .ico { width: 16px; height: 16px; color: #faa541; }
.rail__none { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: rgba(244, 244, 244, .55); max-width: 30ch; }
.rail__none[hidden] { display: none; }
.rail__next { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rail__next ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.rail__next li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(244, 244, 244, .86); }
.rail__next b {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; font-weight: 600; color: #ffd166; border: 1px solid rgba(255, 209, 102, .35);
}

/* Demo ticket */
.rail--demo { justify-content: center; gap: 18px; }
.ticket {
  position: relative; border-radius: 24px; padding: 22px 22px 20px;
  background: #fffdf8; color: #232426;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.ticket__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ticket__mark { width: 22px; height: 22px; display: inline-block; }
.ticket__mark svg { width: 100%; height: 100%; display: block; }
html[dir="rtl"] .ticket__mark { transform: scaleX(-1); }
.ticket__type {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: #fff1e2; color: #d4541a; white-space: nowrap;
}
.ticket__type[hidden] { display: none; }
.ticket__date { display: flex; align-items: flex-end; gap: 14px; margin: 22px 0 16px; perspective: 400px; }
.ticket__day {
  font-family: var(--font-latin); font-size: 92px; line-height: .8; font-weight: 600; letter-spacing: -.05em;
  background: linear-gradient(180deg, #f26722, #faa541); -webkit-background-clip: text; background-clip: text; color: transparent;
  min-width: 1ch; display: inline-block;
}
.ticket__dm { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }
.ticket__wd { font-size: 17px; font-weight: 600; }
.ticket__mo { font-size: 13px; color: #68686a; }
.ticket__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticket__meta li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; }
.ticket__meta .ico { width: 18px; height: 18px; color: #f26722; flex: none; }
.ticket__meta span { unicode-bidi: plaintext; }
.ticket__cut {
  position: relative; height: 0; margin: 20px -22px 18px;
  border-top: 2px dashed #e7e1d8;
}
.ticket__cut::before, .ticket__cut::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: #18191b;
}
.ticket__cut::before { left: -12px; } .ticket__cut::after { right: -12px; }
.ticket__who { display: flex; flex-direction: column; gap: 2px; min-height: 42px; }
.flow__panel.is-stamped .ticket__who { padding-inline-end: 112px; }
.ticket__name { font-size: 16px; font-weight: 600; }
.ticket__org { font-size: 13px; color: #68686a; }
.ticket__status {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12px; font-weight: 600; color: #8a5a00; background: #fff4d6; border-radius: 999px; padding: 5px 10px;
}
.ticket__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f5a623; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.ticket__stamp {
  position: absolute; bottom: 24px; inset-inline-end: 20px; opacity: 0; pointer-events: none;
  border: 3px solid #f26722; color: #f26722; border-radius: 10px; padding: 5px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-12deg); mix-blend-mode: multiply;
}
html[lang="ar"] .ticket__stamp { letter-spacing: 0; }
.flow__panel.is-stamped .ticket__stamp { opacity: 1; }
.flow__panel.is-stamped .ticket__status { display: none; }

/* ---------- Main column ---------- */
.flow__main { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.flow__close {
  position: absolute; z-index: 5; top: 22px; inset-inline-end: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--f-line-2); background: var(--bg);
  display: grid; place-items: center; transition: transform .45s var(--ease-out), border-color .25s, background-color .25s;
}
.flow__close i { position: absolute; width: 16px; height: 1.8px; border-radius: 2px; background: var(--text); transform: rotate(45deg); }
.flow__close i + i { transform: rotate(-45deg); }
.flow__close:hover { transform: rotate(90deg); border-color: var(--brand); }
.flow__close:focus-visible, .fbtn:focus-visible, .linkbtn:focus-visible, .cal__nav:focus-visible, .cal__day:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

.flow__head { padding: 36px 96px 18px 48px; }
html[dir="rtl"] .flow__head { padding: 36px 48px 18px 96px; }
.flow__title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.flow__title:focus { outline: none; }
html[lang="ar"] .flow__title { letter-spacing: 0; }
.flow__mini { display: none; }

.stepper { list-style: none; margin: 18px 0 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.stepper__item { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-3); transition: color .3s; }
.stepper__dot {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--f-line-2); font-size: 13px; font-weight: 600; color: var(--text-3);
  transition: background .35s, border-color .35s, color .35s;
}
.stepper__dot b { font-weight: 600; transition: opacity .2s, transform .3s var(--ease-out); }
.stepper__dot svg { position: absolute; width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .45s var(--ease-out); }
.stepper__item.is-current { color: var(--text); }
.stepper__item.is-current .stepper__dot { border-color: transparent; background: var(--f-spectrum); color: #fff; box-shadow: 0 6px 18px rgba(242, 103, 34, .35); }
.stepper__item.is-done { color: var(--text-2); }
.stepper__item.is-done .stepper__dot { border-color: var(--brand); background: var(--brand); color: #fff; }
.stepper__item.is-done .stepper__dot b { opacity: 0; transform: scale(.4); }
.stepper__item.is-done .stepper__dot svg { opacity: 1; transform: scale(1); }
.stepper__bar { flex: 0 0 64px; height: 2px; border-radius: 2px; background: var(--f-line-2); overflow: hidden; }
.stepper__bar i { display: block; height: 100%; background: var(--f-spectrum); transform: scaleX(0); transform-origin: left center; }
html[dir="rtl"] .stepper__bar i { transform-origin: right center; }

.flow__body {
  overflow-y: auto; overscroll-behavior: contain; min-height: 0;
  padding: 10px 48px 36px; scrollbar-width: thin; scrollbar-color: var(--f-line-2) transparent;
}
.flow__step { display: none; }
.flow__step.is-active { display: block; }

/* ---------- Blocks ---------- */
.blk + .blk, .picks + .blk { margin-top: 30px; }
.blk__head { margin-bottom: 14px; }
.blk__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.blk__t { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 17px; font-weight: 600; color: var(--text); }
.blk__sub { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.blk__label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; padding: 0; }
.tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--brand); border: 1px solid var(--tag-border); background: var(--tag-bg);
}
.tag--soft { color: #1d7a4c; border-color: rgba(29, 122, 76, .25); background: rgba(29, 122, 76, .08); }
[data-theme="dark"] .tag--soft { color: #4cc38a; border-color: rgba(76, 195, 138, .3); background: rgba(76, 195, 138, .1); }
.linkbtn {
  border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--brand);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.linkbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
.linkbtn .ico { width: 16px; height: 16px; }
html[dir="rtl"] .linkbtn .ico { transform: scaleX(-1); }

/* Core modules — included */
.cores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.core {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--f-soft-2); border: 1px solid var(--f-line);
}
.core__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--brand); border: 1px solid var(--f-line); }
.core__ico .ico { width: 18px; height: 18px; }
.core__name { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.core__tick { margin-inline-start: auto; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1d7a4c; color: #fff; }
[data-theme="dark"] .core__tick { background: #2f9e67; }
.core__tick .ico { width: 12px; height: 12px; stroke-width: 2.6; }

/* Add-on modules — selectable */
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.opt {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 16px 16px 18px; border-radius: 18px;
  border: 1.5px solid var(--f-line-2); background: var(--card-bg);
  transition: border-color .25s, background-color .25s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 45%, var(--f-line-2)); box-shadow: 0 12px 30px rgba(242, 103, 34, .1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.opt__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.opt__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--f-soft); color: var(--brand); transition: background .3s, color .3s; }
.opt__ico .ico { width: 22px; height: 22px; }
.opt__box {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--neutral-50); transition: background .25s, border-color .25s, transform .4s var(--ease-out);
}
.opt__check { width: 14px; height: 14px; color: #fff; stroke-width: 2.6; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease-out) .05s; }
.opt__name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.opt__desc {
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.opt:has(input:checked) {
  border-color: var(--brand);
  background: linear-gradient(180deg, var(--f-soft) 0%, var(--card-bg) 75%);
  box-shadow: 0 14px 34px rgba(242, 103, 34, .16);
}
.opt:has(input:checked) .opt__ico { background: var(--f-spectrum); color: #fff; }
.opt:has(input:checked) .opt__box { background: var(--brand); border-color: var(--brand); transform: scale(1.08); }
.opt:has(input:checked) .opt__check { stroke-dashoffset: 0; }

/* ---------- Picks (radio pills) ---------- */
.picks { border: 0; margin: 0; padding: 0; min-width: 0; }
.picks > .blk__t { margin-bottom: 14px; }
.picks__row { display: flex; flex-wrap: wrap; gap: 10px; }
.pick {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  border: 1.5px solid var(--f-line-2); background: var(--card-bg);
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: border-color .25s, background-color .25s, box-shadow .3s, transform .3s var(--ease-out);
}
html[dir="rtl"] .pick { padding: 12px 14px 12px 18px; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick .ico { width: 20px; height: 20px; color: var(--brand); transition: transform .45s var(--ease-out); }
.pick:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--f-line-2)); transform: translateY(-1px); }
.pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.pick:has(input:checked) { border-color: var(--brand); background: var(--f-soft); box-shadow: 0 8px 22px rgba(242, 103, 34, .16); }
.pick:has(input:checked) .ico { transform: rotate(-8deg) scale(1.12); }
.pick--sm { padding: 10px 16px; }
html[dir="rtl"] .pick--sm { padding: 10px 16px; }

/* ---------- Scheduler ---------- */
.sched { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px; margin-top: 14px; align-items: start; }
.cal { border: 1.5px solid var(--f-line); border-radius: 22px; padding: 16px 16px 12px; background: var(--card-bg); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__month { font-size: 15px; font-weight: 600; }
.cal__nav {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--f-line-2); background: none; color: var(--text);
  display: grid; place-items: center; transition: border-color .2s, background-color .2s;
}
.cal__nav .ico { width: 18px; height: 18px; }
html[dir="rtl"] .cal__nav .ico { transform: scaleX(-1); }
.cal__nav:hover:not(:disabled) { border-color: var(--brand); background: var(--f-soft); }
.cal__nav:disabled { opacity: .3; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__week { margin-bottom: 4px; }
.cal__week span { text-align: center; font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
html[lang="ar"] .cal__week span { font-size: 10.5px; }
.cal__grid { gap: 2px; }
.cal__day {
  position: relative; aspect-ratio: 1; width: 100%; max-height: 46px; justify-self: center;
  border: 0; border-radius: 50%; background: none; color: var(--text);
  font-family: var(--font-latin); font-size: 14px; font-weight: 500;
  display: grid; place-items: center; transition: background-color .2s, color .2s;
}
.cal__day > span { position: relative; z-index: 1; }
.cal__day:hover:not(:disabled):not(.is-sel) { background: var(--f-soft); color: var(--brand); }
.cal__day:disabled { color: var(--text-3); opacity: .38; }
.cal__day.is-today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.cal__day.is-sel { color: #fff; font-weight: 600; }
.cal__day.is-sel::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--f-spectrum); box-shadow: 0 8px 20px rgba(242, 103, 34, .38); }

.slots-wrap { min-width: 0; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 48px; padding: 8px 10px; border-radius: 14px;
  border: 1.5px solid var(--f-line-2); background: var(--card-bg);
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .3s;
}
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot__t { font-family: var(--font-latin); font-size: 14px; font-weight: 600; direction: ltr; }
html[lang="ar"] .slot__t { font-family: var(--font-arabic); direction: rtl; }
.slot__l { font-size: 11px; color: var(--text-3); }
.slot:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--f-line-2)); }
.slot:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.slot:has(input:checked) { border-color: var(--brand); background: var(--f-soft); color: var(--brand); box-shadow: 0 8px 20px rgba(242, 103, 34, .14); }
.slot:has(input:checked) .slot__l { color: color-mix(in srgb, var(--brand) 70%, var(--text-3)); }
.slots__empty {
  grid-column: 1 / -1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 44px 16px; border-radius: 18px; border: 1.5px dashed var(--f-line-2);
  text-align: center; font-size: 14px; color: var(--text-3);
}
.slots__empty .ico { width: 26px; height: 26px; color: var(--brand); opacity: .7; }
.slots__tz { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--text-3); }
.slots__tz .ico { width: 15px; height: 15px; flex: none; }

/* ---------- Form ---------- */
.form { margin: 0; }
.form > .blk__t { margin-bottom: 18px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 22px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; height: 60px; padding: 26px 16px 8px; border-radius: 15px;
  border: 1.5px solid var(--f-field-line); background: var(--f-field); color: var(--text);
  font: inherit; font-size: 15px; outline: none; appearance: none;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
html[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.field textarea { height: auto; min-height: 116px; padding-top: 30px; resize: vertical; line-height: 1.5; }
.field label {
  position: absolute; top: 19px; inset-inline-start: 17px; max-width: calc(100% - 34px);
  font-size: 15px; color: var(--text-3); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: left top; transition: transform .25s var(--ease-out), color .2s;
}
html[dir="rtl"] .field label { transform-origin: right top; }
.field label em { font-style: normal; font-size: 12px; color: var(--text-3); opacity: .8; }
.field textarea::placeholder { color: transparent; transition: color .2s; }
.field textarea:focus::placeholder { color: var(--text-3); }
.field :is(input, textarea):focus { border-color: var(--brand); background: var(--bg); box-shadow: 0 0 0 4px rgba(242, 103, 34, .14); }
.field :is(input, textarea):focus + label,
.field :is(input, textarea):not(:placeholder-shown) + label { transform: translateY(-11px) scale(.78); color: var(--text-2); }
.field :is(input, textarea):focus + label { color: var(--brand); }
.field.is-invalid :is(input, textarea) { border-color: var(--f-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-danger) 14%, transparent); }
.field.is-invalid label { color: var(--f-danger) !important; }
.field__err { display: block; min-height: 0; font-size: 12.5px; color: var(--f-danger); margin-top: 6px; }
.field__err:empty { display: none; }
.field--area { margin-top: 22px; }
.picks + .field--area { margin-top: 24px; }
.hp { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; inset-inline-start: -9999px; }
.form__privacy { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 12.5px; color: var(--text-3); }
.form__privacy .ico { width: 15px; height: 15px; flex: none; }

/* ---------- Footer ---------- */
.flow__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 48px; border-top: 1px solid var(--f-line); background: var(--bg);
}
.flow__sum { margin: 0; font-size: 14px; color: var(--text-2); min-width: 0; }
.flow__sum b { color: var(--text); font-weight: 600; }
.flow__sum--demo { display: flex; align-items: center; gap: 8px; }
.flow__sum--demo .ico { width: 18px; height: 18px; color: var(--brand); flex: none; }
.flow__err { margin: 0; flex: 1; font-size: 13px; color: var(--f-danger); }
.flow__err[hidden] { display: none; }
.flow__foot:has(.flow__err:not([hidden])) .flow__sum { display: none; }
.flow__actions { display: flex; gap: 10px; flex: none; margin-inline-start: auto; }
.flow__panel.is-done .flow__foot { display: none; }

.fbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px; overflow: hidden;
  font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), opacity .25s, border-color .2s, background-color .2s;
}
.fbtn .ico { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease-out); }
html[dir="rtl"] .fbtn > .ico:last-child { transform: scaleX(-1); }
.fbtn:active { transform: scale(.97); }
.fbtn--primary { background: var(--f-btn); color: #fff; text-shadow: 0 1px 1px rgba(160, 60, 0, .25); }
.fbtn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .32) 50%, transparent 68%);
  transform: translateX(-130%) skewX(-8deg);
}
.fbtn--primary:hover::after { transform: translateX(130%) skewX(-8deg); transition: transform .75s var(--ease-out); }
.fbtn--primary:hover { box-shadow: 0 14px 34px rgba(242, 103, 34, .38); }
.fbtn--primary:hover > .ico:last-child { transform: translateX(4px); }
html[dir="rtl"] .fbtn--primary:hover > .ico:last-child { transform: scaleX(-1) translateX(4px); }
[data-flow-next]:not(.is-ready) { opacity: .5; filter: saturate(.6); box-shadow: none; }
[data-flow-next]:not(.is-ready)::after { display: none; }
.fbtn--ghost { background: transparent; color: var(--text); border-color: var(--f-line-2); }
.fbtn--ghost:hover { border-color: var(--text-2); }
.fbtn__spin {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.flow__panel.is-sending .fbtn__spin { display: inline-block; }
.flow__panel.is-sending [data-flow-next] > .ico { display: none; }
.flow__panel.is-sending [data-flow-next] { pointer-events: none; }

/* ---------- Done ---------- */
.done.is-active { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 0 12px; }
.done__badge { width: 124px; height: 124px; margin-bottom: 22px; }
.done__badge svg { width: 100%; height: 100%; overflow: visible; }
.done__ring { transform: rotate(-90deg); transform-origin: 60px 60px; }
.done__t { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.2; outline: none; }
.done__when {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 9px 16px; border-radius: 999px;
  background: var(--f-soft); color: var(--brand); font-size: 15px; font-weight: 600;
}
.done__when .ico { width: 18px; height: 18px; }
.done__p { margin: 16px 0 0; max-width: 520px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.done__p b { color: var(--text); font-weight: 600; unicode-bidi: isolate; }
.done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.done__cross { margin: 26px 0 0; font-size: 14px; color: var(--text-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .flow__panel { grid-template-columns: 300px minmax(0, 1fr); }
  .rail { padding: 34px 26px 28px; }
  .rail__num { font-size: 104px; }
  .ticket__day { font-size: 78px; }
  .sched { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .flow__panel {
    width: 100vw; height: 100vh; height: 100dvh; border-radius: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .rail { display: none; }
  .flow__head, html[dir="rtl"] .flow__head { padding: 22px 20px 12px; padding-inline-end: 76px; }
  .flow__close { top: 16px; inset-inline-end: 16px; }
  .flow__mini {
    display: inline-block; margin: 14px 0 0; padding: 7px 14px; border-radius: 999px;
    background: var(--f-soft); color: var(--text); font-size: 13px;
  }
  .flow__panel.is-done .flow__mini { display: none; }
  .flow__body { padding: 6px 20px 28px; }
  .flow__foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .flow__sum { display: none; }
  .flow__actions { width: 100%; }
  .flow__actions .fbtn { flex: 1; padding: 0 16px; }
  .flow__err:not([hidden]) { position: absolute; bottom: 100%; inset-inline: 0; padding: 10px 20px; background: var(--bg); border-top: 1px solid var(--f-line); }
  .flow__foot { position: relative; }
}
@media (max-width: 600px) {
  .form__grid { grid-template-columns: 1fr; }
  .opts { grid-template-columns: 1fr; }
  .cores { grid-template-columns: 1fr 1fr; }
  .core__name { font-size: 12.5px; }
  .core { padding: 8px 10px; gap: 8px; }
  .core__ico { width: 30px; height: 30px; }
  .core__tick { display: none; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk__head--row { flex-direction: column; align-items: flex-start; }
  .stepper__item:not(.is-current) .stepper__label { display: none; }
  .stepper__bar { flex-basis: 40px; }
  .pick { padding: 10px 14px 10px 12px; font-size: 13.5px; }
}
@media (max-height: 720px) and (min-width: 861px) {
  .flow__head { padding-top: 26px; }
  .rail { padding-top: 30px; }
  .rail__num { font-size: 96px; }
  .ticket__date { margin: 14px 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__art i, .ticket__status::before { animation: none; }
  .opt, .pick, .flow__close, .fbtn { transition: none; }
}