/* ==========================================================================
   DilaWEB – Időpontfoglalás: a közös varázsló stílusa (booking.js párja)

   Önmagában elég: a leszállított oldalra ezt a két fájlt kell átvinni. Saját
   színkonstans nincs – minden az oldal `--pv-*` tokenjeiből származik, ezért a
   wizard automatikusan az ügyfél színeit, betűit és sarok-lekerekítését veszi
   fel, és soha nem néz ki idegen bedolgozott widgetnek.

   A töréspontok NEM az ablakhoz, hanem a varázsló saját szélességéhez
   igazodnak (container query), így a tervező osztott képernyőjén is helyesen
   vált mobil elrendezésre.
   ========================================================================== */
.bk {
  /* Az oldal tokenjei; a tartalék értékek csak akkor látszanak, ha a befoglaló
     oldal egyáltalán nem állít tokent (pl. önálló tesztlap). */
  --bk-primary:    var(--pv-primary, #DE8524);
  --bk-secondary:  var(--pv-secondary, #F0B166);
  --bk-bg:         var(--pv-bg, #070B11);
  --bk-text:       var(--pv-text, #E8EDF5);
  --bk-on-primary: var(--pv-on-primary, #1A1206);
  --bk-radius:     var(--pv-radius, 16px);
  --bk-font-head:  var(--pv-font-head, inherit);
  /* betűméret-szorzó: a foglalás is az oldal (vagy a foglalás-szekció) méretét
     veszi fel – tartalék az 1, ha a wizard önálló lapon áll */
  --bk-fs:         var(--pv-fs, 1);

  /* Származtatott felületek – ugyanaz a keverés, mint az oldal többi részén */
  --bk-muted:   color-mix(in srgb, var(--bk-text) 62%, var(--bk-bg));
  --bk-surface: color-mix(in srgb, var(--bk-text) 5%, var(--bk-bg));
  --bk-line:    color-mix(in srgb, var(--bk-text) 15%, var(--bk-bg));
  --bk-ok:      color-mix(in srgb, var(--bk-primary) 70%, #2BB673);
  --bk-err:     #E5484D;

  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: left;                     /* a rácsban a középre zárás olvashatatlan */
}

.bk h3, .bk h4 { font-family: var(--bk-font-head); font-weight: 700; margin: 0; }
.bk-h  { font-size: calc(clamp(1.05rem, 2.6cqi, 1.3rem) * var(--bk-fs)); }
.bk-h4 { font-size: calc(0.95rem * var(--bk-fs)); margin-top: 0.2rem; }
.bk-muted { color: var(--bk-muted); }
.bk-body { display: flex; flex-direction: column; gap: 0.9rem; }
.bk-empty { color: var(--bk-muted); font-size: calc(0.87rem * var(--bk-fs)); }
.bk-h:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 3px; }

/* --- gombok: a wizard saját, tokenekből származó gombjai ------------------ */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;         /* ha törik a felirat, középre zárva törjön */
  text-wrap: balance;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: calc(var(--bk-radius) * 0.6);
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: calc(0.9rem * var(--bk-fs));
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s, border-color 0.2s, background-color 0.2s;
}
.bk-btn--primary { background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-btn--primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.bk-btn--ghost { border-color: var(--bk-line); background: var(--bk-surface); color: var(--bk-text); }
.bk-btn--ghost:hover:not(:disabled) { border-color: var(--bk-secondary); transform: translateY(-2px); }
.bk-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
/* A fókuszgyűrű a gombon KÍVÜL fut, így a tele gombon is látszik */
.bk-btn:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; }

/* Töltésjelző a megerősítés gombon – küldés közben nincs második kattintás */
.bk-spin {
  width: 0.95rem; height: 0.95rem; flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bk-spin 0.7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* --- lépésjelző ---------------------------------------------------------- */
.bk-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 0; padding: 0;
  list-style: none;
  font-size: calc(0.78rem * var(--bk-fs));
}
.bk-steps__item { display: flex; align-items: center; gap: 0.5rem; }
.bk-steps__item::after { content: "›"; color: var(--bk-muted); }
.bk-steps__item:last-child::after { content: none; }
.bk-steps__btn {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bk-line);
  border-radius: 999px;
  background: none;
  color: var(--bk-muted);
  font: inherit;
  white-space: nowrap;
}
.bk-steps__item.is-done .bk-steps__btn { color: var(--bk-text); cursor: pointer; }
.bk-steps__item.is-done .bk-steps__btn:hover { border-color: var(--bk-primary); color: var(--bk-primary); }
.bk-steps__item.is-now .bk-steps__btn {
  border-color: var(--bk-primary);
  background: color-mix(in srgb, var(--bk-primary) 16%, transparent);
  color: var(--bk-text);
  font-weight: 700;
}

.bk-demo {
  padding: 0.55rem 0.8rem;
  border: 1px dashed var(--bk-line);
  border-radius: calc(var(--bk-radius) * 0.5);
  color: var(--bk-muted);
  font-size: calc(0.78rem * var(--bk-fs));
}

/* --- 1–2. lépés: szolgáltatás- és munkatárs-kártyák ---------------------- */
.bk-cards { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.bk-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: var(--bk-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.bk-card:hover { border-color: var(--bk-primary); transform: translateY(-2px); }
.bk-card.is-on { border-color: var(--bk-primary); box-shadow: inset 0 0 0 1px var(--bk-primary); }
.bk-card__name { font-family: var(--bk-font-head); font-weight: 700; }
.bk-card__meta { color: var(--bk-muted); font-size: calc(0.8rem * var(--bk-fs)); }
.bk-card__price { color: var(--bk-primary); font-weight: 600; font-size: calc(0.88rem * var(--bk-fs)); }

/* Munkatárs-kártya: arckép + név egy sorban. A kép nem dísz – a "kihez menjek"
   döntést könnyíti, ezért a névvel egy magasságban áll. */
.bk-card--person { flex-direction: row; align-items: center; gap: 0.75rem; }
.bk-avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--bk-line);
  background: color-mix(in srgb, var(--bk-primary) 14%, var(--bk-surface));
}
.bk-avatar--txt {
  display: grid;
  place-items: center;
  font-family: var(--bk-font-head);
  font-weight: 700;
  font-size: calc(0.95rem * var(--bk-fs));
  color: var(--bk-primary);
}

/* --- 3. lépés: heti naptár ----------------------------------------------- */
.bk-cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bk-line);
  font-size: calc(0.9rem * var(--bk-fs));
}
.bk-nav {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--bk-line);
  border-radius: 999px;
  background: var(--bk-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bk-nav:hover:not(:disabled) { border-color: var(--bk-primary); color: var(--bk-primary); }
.bk-nav:disabled { opacity: 0.35; cursor: not-allowed; }

/* Mobil napválasztó csík – széles helyen a heti rács veszi át (lásd lentebb) */
.bk-chips { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.2rem; }
.bk-chip {
  flex: none;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--bk-line);
  border-radius: 999px;
  background: var(--bk-surface);
  color: inherit;
  font: inherit;
  font-size: calc(0.8rem * var(--bk-fs));
  cursor: pointer;
}
.bk-chip.is-on { border-color: var(--bk-primary); background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-chip:disabled { opacity: 0.35; cursor: not-allowed; }

.bk-cal { display: grid; gap: 0.7rem; }
.bk-day { min-width: 0; }
.bk-day__head {
  font-size: calc(0.78rem * var(--bk-fs));
  color: var(--bk-muted);
  text-transform: capitalize;
  padding-bottom: 0.4rem;
}
.bk-day__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: 0.35rem; }
.bk-day__none { color: var(--bk-muted); font-size: calc(0.76rem * var(--bk-fs)); }

.bk-slot {
  padding: 0.45rem 0.2rem;
  border: 1px solid var(--bk-line);
  border-radius: calc(var(--bk-radius) * 0.45);
  background: var(--bk-surface);
  color: inherit;
  font: inherit;
  font-size: calc(0.82rem * var(--bk-fs));
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.bk-slot:hover:not(:disabled) { border-color: var(--bk-primary); background: color-mix(in srgb, var(--bk-primary) 14%, transparent); }
.bk-slot.is-on { border-color: var(--bk-primary); background: var(--bk-primary); color: var(--bk-on-primary); font-weight: 700; }
/* Foglalt és múltbeli: `disabled`, tehát billentyűzettel se fókuszálható */
.bk-slot:disabled { cursor: not-allowed; color: var(--bk-muted); background: none; }
.bk-slot.is-taken { text-decoration: line-through; border-style: dashed; }
.bk-slot.is-past { opacity: 0.4; }

/* --- 4. lépés: összegzés ------------------------------------------------- */
.bk-facts {
  display: grid;
  gap: 0.1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: var(--bk-surface);
}
.bk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.35rem 0;
  font-size: calc(0.88rem * var(--bk-fs));
}
.bk-row + .bk-row { border-top: 1px solid var(--bk-line); }
.bk-row strong { font-weight: 600; text-align: right; }

.bk-ident { display: flex; flex-direction: column; gap: 0.7rem; }
.bk-ident__who { font-size: calc(0.85rem * var(--bk-fs)); color: var(--bk-muted); }
.bk-ident__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.bk-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: calc(0.78rem * var(--bk-fs)); color: var(--bk-muted); }
.bk-field input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bk-line);
  border-radius: calc(var(--bk-radius) * 0.5);
  background: var(--bk-surface);
  color: var(--bk-text);
  font-size: calc(0.9rem * var(--bk-fs));
}
.bk-field input:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 1px; }
.bk-confirm { align-self: flex-start; margin-top: 0.3rem; }

/* Robotfogó mező: a képernyőn kívül, de NEM display:none – azt a botok egy része
   felismeri és kihagyja. Ember nem éri el (aria-hidden + tabindex="-1"). */
.bk-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- siker / hiba: nagy, magától el nem tűnő panel ----------------------- */
.bk-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: clamp(1.1rem, 4cqi, 2rem);
  border: 1px solid;
  border-radius: var(--bk-radius);
}
.bk-panel h3 { font-size: calc(clamp(1.15rem, 3.4cqi, 1.6rem) * var(--bk-fs)); }
.bk-panel p { font-size: calc(0.9rem * var(--bk-fs)); color: var(--bk-muted); }
.bk-panel .bk-facts { width: 100%; background: none; }
.bk-panel__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.bk-panel__icon svg { width: 1.4rem; height: 1.4rem; }
.bk-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; }

.bk-panel--ok {
  border-color: var(--bk-ok);
  background: color-mix(in srgb, var(--bk-ok) 10%, transparent);
}
.bk-panel--ok .bk-panel__icon { background: var(--bk-ok); color: var(--bk-on-primary); }
.bk-panel--err {
  border-color: var(--bk-err);
  background: color-mix(in srgb, var(--bk-err) 10%, transparent);
}
.bk-panel--err .bk-panel__icon { background: var(--bk-err); color: #fff; }

/* Beküldés előtti mezőhiba: a lépésen belül, nem panelként */
.bk-inline {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--bk-err);
  border-radius: calc(var(--bk-radius) * 0.5);
  color: var(--bk-err);
  font-size: calc(0.83rem * var(--bk-fs));
  font-weight: 600;
}

.bk-foot { display: flex; gap: 0.6rem; }
.bk-foot:empty { display: none; }

/* ==========================================================================
   FIÓK (booking.js → mountAccount)

   Ugyanaz a nyelv, mint a varázslóé: ugyanazok a tokenek, ugyanaz a gomb, mező
   és kártya. Nem külön „bejelentkező felület", hanem az oldal egy szekciója.
   ========================================================================== */
.bk-acc { display: flex; flex-direction: column; gap: 1.1rem; }

/* --- kijelentkezve: egy kártya, mobilon teljes szélességben --------------- */
.bk-acc__card {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  background: var(--bk-surface);
}

.bk-tabs { display: flex; gap: 0.3rem; padding: 0.25rem; border: 1px solid var(--bk-line); border-radius: 999px; }
.bk-tab {
  flex: 1; min-height: 2.4rem;
  padding: 0.5rem 0.8rem;
  border: 0; border-radius: 999px;
  background: none; color: var(--bk-muted);
  font: inherit; font-size: calc(0.88rem * var(--bk-fs)); font-weight: 600;
  cursor: pointer; transition: color 0.15s, background-color 0.15s;
}
.bk-tab:hover, .bk-tab:focus-visible { color: var(--bk-text); }
.bk-tab.is-on { background: var(--bk-primary); color: var(--bk-on-primary); }

/* Google: a márkajel színes, a gomb maga az oldal gombja marad */
.bk-google { justify-content: center; gap: 0.6rem; }
.bk-google__g { width: 1.1em; height: 1.1em; flex: none; }

/* „vagy" elválasztó – vonal, benne a szó */
.bk-or {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0; color: var(--bk-muted); font-size: calc(0.78rem * var(--bk-fs));
  text-transform: lowercase;
}
.bk-or::before, .bk-or::after { content: ""; flex: 1; height: 1px; background: var(--bk-line); }

.bk-form { display: flex; flex-direction: column; gap: 0.7rem; }
.bk-form .bk-btn { align-self: stretch; justify-content: center; }

.bk-links { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.bk-links button {
  min-height: 2.75rem;                  /* ujjnyi cél akkor is, ha csak szöveg */
  padding: 0; border: 0; background: none;
  color: var(--bk-muted); font: inherit; font-size: calc(0.82rem * var(--bk-fs));
  text-decoration: underline; cursor: pointer;
}
.bk-links button:hover, .bk-links button:focus-visible { color: var(--bk-primary); }

/* Visszajelzés: üresen nem foglal helyet, hibánál piros, sikernél accent */
.bk-msg { margin: 0; font-size: calc(0.82rem * var(--bk-fs)); font-weight: 600; color: var(--bk-primary); }
.bk-msg:empty { display: none; }
.bk-msg.is-bad { color: var(--bk-err); }

/* --- bejelentkezve ------------------------------------------------------- */
.bk-acc__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--bk-line);
}
.bk-acc__me { display: flex; flex-direction: column; }
.bk-acc__me strong { font-family: var(--bk-font-head); font-size: calc(1.05rem * var(--bk-fs)); }
.bk-acc__me span { font-size: calc(0.8rem * var(--bk-fs)); }

.bk-acc__box { display: flex; flex-direction: column; gap: 0.6rem; }
.bk-acc__box .bk-h4:not(:first-child) { margin-top: 0.6rem; }

.bk-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.bk-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bk-line);
  border-radius: calc(var(--bk-radius) * 0.75);
  background: var(--bk-surface);
}
.bk-item__main { display: flex; flex-direction: column; min-width: 0; }
.bk-item__main strong { font-size: calc(0.92rem * var(--bk-fs)); }
.bk-item__main span { font-size: calc(0.8rem * var(--bk-fs)); }
.bk-btn--sm { padding: 0.45rem 0.9rem; font-size: calc(0.8rem * var(--bk-fs)); }

/* --- 4. lépés: „a fiókom adatait használom" ------------------------------ */
.bk-check {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem;                  /* a sor egésze ujjnyi cél */
  font-size: calc(0.88rem * var(--bk-fs)); font-weight: 600;
  cursor: pointer;
}
.bk-check input {
  width: 1.15rem; height: 1.15rem; flex: none;
  accent-color: var(--bk-primary); cursor: pointer;
}
.bk-check input:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; }
.bk-note { margin: 0; color: var(--bk-muted); font-size: calc(0.78rem * var(--bk-fs)); }

/* --- töréspontok: a varázsló SAJÁT szélességéhez igazodnak --------------- */
.bk-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }

@container (max-width: 46rem) {
  /* Szűk helyen a heti rács szétesne: napválasztó csík + egy nap óralistája */
  .bk-cal { grid-template-columns: 1fr; }
  .bk-day:not([data-sel]) { display: none; }
  .bk-day__head { font-size: calc(0.85rem * var(--bk-fs)); color: var(--bk-text); font-weight: 700; }
}
@container (min-width: 46.001rem) {
  .bk-chips { display: none; }
  .bk-cards { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .bk-avatar { width: 3.5rem; height: 3.5rem; font-size: calc(1.05rem * var(--bk-fs)); }
  .bk-day__slots { grid-template-columns: 1fr; }
  /* Széles helyen a belépőkártya nem nyúlik szét; a fiók-űrlapok gombja
     viszont már nem sorhossznyi (a kártyáé marad teljes szélességű). */
  .bk-acc__card { max-width: 26rem; margin-inline: auto; padding: 1.5rem; }
  .bk-acc__box .bk-form .bk-btn { align-self: flex-start; }
  /* Vezeték- és keresztnév egy sorban: a kettő együtt egy adat. A hosszabb
     mezők (e-mail, telefon) a teljes szélességet kapják. */
  .bk-acc__box [data-form="profile"] { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .bk-acc__box [data-form="profile"] > :not(.bk-field),
  .bk-acc__box [data-form="profile"] .bk-field:has([data-f="email"]),
  .bk-acc__box [data-form="profile"] .bk-field:has([data-f="phone"]) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-btn, .bk-card, .bk-tab { transition: none; }
  .bk-btn:hover, .bk-card:hover { transform: none; }
  .bk-spin { animation-duration: 2s; }
}

/* --- Érintés: ujjnyi célok a foglalásban ---------------------------------
   A varázsló a kész ügyféloldalon fut, ahol a foglalók többsége telefonos.
   Az időpont-gombok a legkritikusabbak: apró célt elvéteni = elmaradt foglalás.
   ---------------------------------------------------------------------- */
@media (pointer: coarse) {
  .bk-nav { width: 2.75rem; height: 2.75rem; }
  .bk-slot { min-height: 2.75rem; }
  .bk-chip { min-height: 2.5rem; }
  .bk-tab, .bk-btn--sm { min-height: 2.75rem; }
  /* iOS 16px alatti mezőnél belezoomol a lapba fókuszáláskor – a szorzó marad,
     csak alulról van megfogva */
  .bk-field input { font-size: max(16px, calc(0.9rem * var(--bk-fs))); }
}