/* ============================================================
   ZENTUS — foglalási modul (#audit szekció, A→B→C→D állapotgép).
   A Pencil 12_Closing_CTA frame-ek alapján, brand-tokenek a zentus.css-ből.
   ============================================================ */

.booking { position: relative; }
/* a foglalási oldal vízszintes túlcsordulás-gátlása mobilon (nincs nav/partial) */
.geo-booking { overflow-x: clip; }
/* A · ALAP — a trust-sor pipa-ikonjai zöldek (tXkxF) */
.booking .closing-trust svg, .booking .closing-trust i { color: var(--success, #1FA971); }

/* állapot-átmenet: opacity + transform (nincs layout-animáció) */
.booking-view { transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.booking-view[hidden] { display: none; }
.booking-view.is-entering { opacity: 0; transform: translateY(14px); }
.booking-view.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .booking-view { transition: none; }
  .booking-view.is-entering { opacity: 1; transform: none; }
}

/* ---- közös fejléc (B/C) ---- */
.bk-stage { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 24px); }
.bk-head { text-align: center; margin-bottom: 28px; }
.bk-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-link, #1268C9); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.bk-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.bk-h { color: var(--navy); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.8px; line-height: 1.12; margin: 12px 0 0; outline: none; }
.bk-sub { color: var(--text); font-size: 15px; line-height: 1.55; margin: 12px auto 0; max-width: 56ch; }

/* ---- kártya alap (B/C) ---- */
.bk-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card-lg, 20px); box-shadow: 0 24px 60px rgba(48,60,96,0.10); overflow: hidden; }

/* oldalsó panel (logó + meta) */
.bk-aside, .bk-summary { background: linear-gradient(160deg, #F2F3F7 0%, #E9EEF8 100%); padding: 28px; border-right: 1px solid var(--border); }
.bk-aside-logo { height: 30px; width: auto; display: block; }
.bk-aside-title { color: var(--navy); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-top: 18px; }
.bk-meta, .bk-summary-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.bk-meta li, .bk-summary-list li { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: 14px; font-weight: 500; }
.bk-meta i, .bk-summary-list i, .bk-aside [data-lucide], .bk-summary [data-lucide] { width: 16px; height: 16px; color: var(--blue); flex: none; }
.bk-aside-desc { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 18px 0 0; }
.bk-summary-tip { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin: 18px 0 0; }
.bk-summary-tip i { margin-top: 1px; }

/* ============================================================
   B · NAPTÁR
   ============================================================ */
.bk-card--cal { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; }
.bk-cal { padding: 24px; border-right: 1px solid var(--border); }
.bk-cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bk-cal-month { color: var(--navy); font-size: 15px; font-weight: 700; }
.bk-cal-nav { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--white); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.bk-cal-nav:hover:not(:disabled) { background: var(--bg); border-color: var(--blue-ice, #4DA3F5); }
.bk-cal-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.bk-cal-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-cal-nav i { width: 18px; height: 18px; }
.bk-cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.bk-cal-dow span { text-align: center; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-day { aspect-ratio: 1; border: 0; background: transparent; border-radius: 9px; color: var(--navy); font-family: var(--font); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; }
.bk-day--empty { visibility: hidden; }
.bk-day--off { color: #b8c0cf; cursor: default; }
.bk-day--avail { background: rgba(24,132,240,0.08); color: var(--blue-link, #1268C9); font-weight: 700; }
.bk-day--avail:hover { background: rgba(24,132,240,0.18); }
.bk-day.is-selected { background: var(--blue); color: var(--white); }
.bk-day:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-tz { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; margin: 16px 0 0; }
.bk-tz i { width: 14px; height: 14px; }

/* idősáv-lista */
.bk-slots { padding: 24px 22px; display: flex; flex-direction: column; min-height: 320px; }
.bk-slots-head { color: var(--navy); font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.bk-slots-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 360px; padding-right: 2px; }
.bk-slot { padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-btn, 10px); background: var(--white); color: var(--navy); font-family: var(--font); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.bk-slot:hover { border-color: var(--blue); color: var(--blue-link, #1268C9); }
.bk-slot.is-selected { background: var(--blue); border-color: var(--blue); color: var(--white); }
.bk-slot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bk-slots-empty, .bk-slots-hint { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 8px 0 0; }
.bk-slots-empty .bk-link { margin-top: 8px; }
/* skeleton */
.bk-skel { height: 40px; border-radius: var(--r-btn, 10px); background: linear-gradient(100deg, #eef1f6 30%, #f6f8fb 50%, #eef1f6 70%); background-size: 200% 100%; animation: bk-shimmer 1.2s ease-in-out infinite; }
@keyframes bk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bk-skel { animation: none; } }

/* láb (vissza + foglalás) */
/* láb: a foglalás-gomb KÖZÉPEN, a Vissza link balra */
.bk-foot { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; min-height: 48px; }
.bk-foot .bk-link[data-book-back] { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.bk-link { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--blue-link, #1268C9); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 4px; }
.bk-link:hover { text-decoration: underline; }
.bk-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.bk-link i { width: 16px; height: 16px; }
.bk-confirm-slot { min-height: 48px; }

/* ============================================================
   C · ADATAID
   ============================================================ */
/* folyamatjelző pill (B + C) — fehér pirula, check/pötty + caps-címkék */
.bk-progress { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 4px; padding: 7px 14px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; max-width: 100%; }
.bk-pstep { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.bk-pstep.is-current { color: var(--navy); font-weight: 700; }
.bk-pstep.is-done { color: var(--text-muted); }
.bk-pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex: none; }
.bk-pstep.is-current .bk-pdot { background: var(--blue); }
.bk-pstep.is-done i, .bk-pstep.is-done svg { width: 13px; height: 13px; color: var(--success, #1FA971); flex: none; }
.bk-psep { width: 18px; height: 1px; background: var(--border); flex: none; }

.bk-card--details { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.bk-form { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.bk-form-h { color: var(--navy); font-size: 17px; font-weight: 700; margin: 0; }
.bk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field label { color: var(--navy); font-size: 13px; font-weight: 600; white-space: nowrap; }
.bk-req { color: var(--blue); }
.bk-opt { color: var(--text-muted); font-weight: 400; }
.bk-field input, .bk-field select, .bk-field textarea { font-family: var(--font); font-size: 15px; color: var(--navy); padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-btn, 10px); background: var(--white); width: 100%; }
.bk-field textarea { resize: vertical; min-height: 76px; }
.bk-field input:focus-visible, .bk-field select:focus-visible, .bk-field textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.bk-field.has-error input, .bk-field.has-error select { border-color: var(--error, #C7382E); }
.bk-help { color: var(--text-muted); font-size: 12px; }
.bk-err { color: var(--error, #C7382E); font-size: 12.5px; min-height: 0; }
.bk-err:empty { display: none; }
.bk-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 13.5px; line-height: 1.5; }
.bk-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--blue); }
.bk-consent a { color: var(--blue-link, #1268C9); }
.bk-consent a:hover { text-decoration: underline; }
.bk-microcopy { color: var(--text-muted); font-size: 12px; line-height: 1.5; margin: 0; }
.bk-form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bk-form-actions .btn { min-height: 48px; }
.bk-form-msg { margin: 0; font-size: 13.5px; min-height: 1.2em; }
.bk-form-msg.is-error { color: var(--error, #C7382E); }
.bk-form-msg.is-sending { color: var(--text-muted); }

/* ============================================================
   D · MEGERŐSÍTVE
   ============================================================ */
.bk-confirm { position: relative; overflow: hidden; max-width: 1040px; margin-inline: auto; text-align: center; background: linear-gradient(135deg, #FAFBFD 0%, #E8EFFA 100%); border: 1px solid var(--border); border-radius: var(--r-card-lg, 20px); box-shadow: 0 24px 60px rgba(24,132,240,0.12); padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; }
.bk-confirm-decor { position: absolute; top: -80px; right: -60px; width: 360px; height: auto; opacity: 0.07; pointer-events: none; }
.bk-confirm-badge { position: relative; display: inline-flex; align-items: center; gap: 8px; background: rgba(31,169,113,0.08); border-radius: 999px; padding: 6px 12px; color: #176B49; font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.bk-confirm-baddot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #1FA971); }
.bk-check { position: relative; width: 96px; height: 96px; border-radius: 50%; background: rgba(31,169,113,0.1); display: inline-flex; align-items: center; justify-content: center; margin-top: 20px; }
.bk-check::before { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; background: var(--success, #1FA971); box-shadow: 0 6px 18px rgba(31,169,113,0.28); }
.bk-check i, .bk-check svg { position: relative; z-index: 1; width: 34px; height: 34px; color: var(--white); }
.bk-confirm .bk-h { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin-top: 18px; }
.bk-confirm-lead { position: relative; color: var(--text); font-size: 17px; line-height: 1.55; margin: 14px auto 0; max-width: 52ch; }
/* összegző kártya — 3 cella, oszlop-elválasztóval */
.bk-summary-card { position: relative; width: 100%; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--white); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(48,60,96,0.06); text-align: left; }
.bk-sc { display: flex; align-items: center; gap: 14px; padding: 22px 24px; }
.bk-sc + .bk-sc { border-left: 1px solid var(--border); }
.bk-sc-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(24,132,240,0.08); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bk-sc-ic i, .bk-sc-ic svg { width: 18px; height: 18px; }
.bk-sc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-sc-l { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; }
.bk-sc-v { color: var(--navy); font-size: 15px; font-weight: 600; }
/* mi történik most */
.bk-next { position: relative; width: 100%; text-align: left; margin: 28px 0 0; }
.bk-next-h { color: var(--navy); font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.bk-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bk-next-list li { display: flex; gap: 12px; align-items: flex-start; }
.bk-next-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(24,132,240,0.08); color: var(--blue-link, #1268C9); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bk-next-tx { display: flex; flex-direction: column; gap: 2px; }
.bk-next-t { color: var(--navy); font-size: 14px; font-weight: 600; }
.bk-next-d { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.bk-next-d strong { color: var(--navy); }
.bk-confirm-actions { position: relative; margin: 28px 0 0; }
.bk-confirm-actions .btn { min-height: 50px; display: inline-flex; align-items: center; gap: 8px; }
.bk-confirm-actions .btn i, .bk-confirm-actions .btn svg { width: 18px; height: 18px; }
.bk-reschedule { position: relative; margin: 16px 0 0; }
.bk-reschedule a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.bk-reschedule a:hover { color: var(--blue-link, #1268C9); }
.bk-reschedule i, .bk-reschedule svg { width: 14px; height: 14px; }

/* ============================================================
   RESZPONZÍV
   ============================================================ */
@media (max-width: 920px) {
  .bk-card--cal { grid-template-columns: 1fr; }
  .bk-card--details { grid-template-columns: 1fr; }
  .bk-aside, .bk-summary { border-right: 0; border-bottom: 1px solid var(--border); }
  .bk-cal { border-right: 0; border-bottom: 1px solid var(--border); }
  .bk-slots { min-height: 0; }
  .bk-slots-list { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .bk-slot { flex: 1 1 90px; }
}
@media (max-width: 620px) {
  .bk-progress { gap: 5px; padding: 7px 12px; }
  /* a lépés-felirat sima szöveg (nincs .bk-plabel wrapper), ezért a nem-aktív
     lépéseknél font-size:0-val rejtjük a szöveget — a pötty/ikon (fix méret) marad */
  .bk-progress .bk-pstep:not(.is-current) { font-size: 0; gap: 0; }
  .bk-summary-card { grid-template-columns: 1fr; }
  .bk-sc + .bk-sc { border-left: 0; border-top: 1px solid var(--border); }
  .bk-foot { flex-direction: column-reverse; }
  .bk-foot .bk-link[data-book-back] { position: static; transform: none; }
}
@media (max-width: 640px) {
  .bk-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bk-day { font-size: 13px; }
  .bk-day { font-size: 13px; }
  .bk-cal-nav, .bk-day, .bk-slot { min-height: 44px; }
  .bk-foot .btn { width: 100%; }
  /* mobilon kevesebb padding (több hely a naptárnak/óráknak), és az órák fix
     3-oszlopos rácsba kerülnek, ami minmax(0,1fr) miatt sosem lóg túl/vágódik le */
  .bk-cal, .bk-slots { padding: 18px 14px; }
  .bk-cal-grid, .bk-cal-dow { gap: 8px; }
  .bk-slots-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bk-slot { flex: none; padding: 11px 4px; }
  /* a hint/üzenet ne egy szűk grid-cellába szoruljon (szavanként tördelne),
     hanem fogja át a teljes szélességet */
  .bk-slots-list .bk-slots-hint,
  .bk-slots-list .bk-slots-empty { grid-column: 1 / -1; }
}