/* ============================================================
   ONLINE FOGLALÓ — szakember → szolgáltatás → időpont → adatok
   (csak a kapcsolat-oldal tölti be)
   ============================================================ */
.foglalo{border:1px solid var(--line); background:var(--ivory); padding:clamp(20px,3.4vw,48px)}
.fl-lepesek{display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0 0 clamp(26px,3.4vw,42px); padding:0; border-bottom:1px solid var(--line-soft)}
.fl-lepesek li{display:flex; align-items:center; gap:10px; padding:0 0 16px; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px}
.fl-lepesek .num{display:inline-grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; font-size:12.5px; letter-spacing:0; flex:0 0 auto}
.fl-lepesek li[aria-current]{color:var(--ink); border-bottom-color:var(--gold)}
.fl-lepesek li[aria-current] .num{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.fl-lepesek li.kesz .num{background:var(--gold); border-color:var(--gold); color:var(--ink)}

.fl-test{display:grid; grid-template-columns:1fr 300px; gap:clamp(24px,3.4vw,48px); align-items:start}
.fl-test[hidden],.fl-lepesek[hidden],.fl-nincs[hidden]{display:none}
.fl-lepes{border:0; margin:0; padding:0; min-width:0}
.fl-lepes legend{font-family:var(--f-disp); font-size:clamp(20px,2vw,25px); letter-spacing:.04em; padding:0; margin-bottom:22px; outline:none}
.fl-lepes[hidden]{display:none}

/* 1 · szakember */
.fl-emberek{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.fl-ember{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:18px 8px 16px; background:transparent; border:1px solid var(--line-soft); cursor:pointer; transition:border-color .3s, background .3s}
.fl-ember:hover{border-color:var(--gold)}
.fl-ember[aria-pressed="true"]{border-color:var(--ink); background:rgba(176,132,85,.1); box-shadow:inset 0 0 0 1px var(--ink)}
.fl-ember .ring{width:88px; padding:4px; margin:0 0 8px; box-shadow:none}
.fl-ember-nev{font-family:var(--f-disp); font-size:16px; letter-spacing:.03em; line-height:1.3}
.fl-ember-szerep{font-size:12.5px; line-height:1.45; color:var(--muted)}
.fl-ember-tolt{cursor:progress}
.fl-ember-tolt .ring, .fl-ember-tolt .fl-ember-szerep{opacity:.55}
.fl-ember-tel{cursor:default; border-style:dashed}
.fl-ember-tel:hover{border-color:var(--line-soft)}
.fl-ember-tel .ring{opacity:.6}
.fl-ember-linkek{font-size:13px; margin-top:2px}
.fl-ember-linkek a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* 2 · szolgáltatás(ok) — jelölőnégyzetek, az ár egyedül a jobb szélen; több is kijelölhető */
.fl-szolg{display:grid; border-top:1px solid var(--line)}
.fl-szolg-sor{display:grid; grid-template-columns:auto 1fr auto auto; gap:6px 16px; align-items:baseline; text-align:left; padding:15px 14px; background:transparent; border:0; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .3s; font:inherit; color:inherit; width:100%}
.fl-szolg-sor:hover{background:rgba(176,132,85,.08)}
.fl-szolg-sor.on{background:rgba(176,132,85,.16)}
.fl-szolg-sor .nev{font-size:16px}
.fl-szolg-sor .perc{font-size:13.5px; color:var(--muted); white-space:nowrap}
.fl-szolg-sor .ar{font-size:15px; font-weight:600; white-space:nowrap; text-align:right; min-width:7.5em}
.fl-szolg-sor input{appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0; align-self:center; border:1px solid var(--gold-dp); background:#fff; position:relative; cursor:pointer; border-radius:0}
.fl-szolg-sor input:checked{background:var(--ink); border-color:var(--ink)}
.fl-szolg-sor input:checked::after{content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border-right:1.5px solid var(--ivory); border-bottom:1.5px solid var(--ivory); transform:rotate(45deg)}
.fl-szolg-sor input:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
/* lenyíló tétel (1D…6D, gyanta-területek): a jelölő helyén nyíl */
.fl-csop-fej{grid-template-columns:1fr auto auto}
.fl-csop-fej .nev{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 12px}
.fl-nyit{width:18px; flex:0 0 18px; align-self:center; height:18px; position:relative}
.fl-nyit::before{content:''; position:absolute; left:5px; top:3px; width:7px; height:7px; border-right:1.5px solid var(--gold-dp); border-bottom:1.5px solid var(--gold-dp); transform:rotate(45deg); transition:transform .3s}
.fl-csop-fej[aria-expanded="true"] .fl-nyit::before{transform:translateY(4px) rotate(-135deg)}
.fl-csop-val{font-size:13.5px; font-weight:600; color:var(--gold-dp)}
.fl-valt{background:var(--ivory-2); border-bottom:1px solid var(--line-soft); padding:4px 0 8px}
.fl-valt[hidden]{display:none}
.fl-valt .fl-szolg-sor{padding:11px 14px 11px 48px; border-bottom:0}
.fl-valt .fl-szolg-sor .nev{font-size:15px}
.fl-valt-sugo{margin:8px 14px 2px 48px; font-size:13px; color:var(--muted)}
.fl-kosar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-top:22px}
.fl-kosar p{margin:0; font-size:15.5px; color:var(--espresso)}
.fl-kosar .btn:disabled{opacity:.45; cursor:default}
/* átütemezés: tájékoztató sáv a foglaló fölött */
.fl-atut{margin:0 0 clamp(20px,3vw,32px); padding:14px 18px; border-left:2px solid var(--gold); background:var(--ivory-2); font-size:15px; line-height:1.6}
.fl-atut[hidden]{display:none}

/* 3 · naptár és időpontok */
.fl-idopont{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start}
.fl-honap{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.fl-honap b{font-family:var(--f-disp); font-weight:400; font-size:19px; letter-spacing:.04em}
.fl-nyil{width:40px; height:40px; border:1px solid var(--line); background:transparent; cursor:pointer; position:relative}
.fl-nyil::before{content:''; position:absolute; left:16px; top:15px; width:9px; height:9px; border-left:1px solid var(--ink); border-bottom:1px solid var(--ink); transform:rotate(45deg)}
.fl-nyil-jobb::before{left:12px; transform:rotate(-135deg)}
.fl-nyil:disabled{opacity:.3; cursor:default}
.fl-hetnapok,.fl-napok{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.fl-hetnapok span{font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--gold-dp); text-align:center; padding:6px 0}
.fl-nap{aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); background:#fff; font-size:15.5px; cursor:pointer; padding:0; transition:background .25s, color .25s, border-color .25s}
.fl-nap:hover:not(:disabled){border-color:var(--ink)}
.fl-nap:disabled{background:transparent; border-color:transparent; color:#A99E8F; cursor:default}
.fl-nap.ures{border:0; background:none}
.fl-nap.tolt{animation:flTolt 1.1s ease-in-out infinite alternate}
@keyframes flTolt{to{opacity:.45}}
.fl-nap.aktiv{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.fl-savok-cim{font-size:15px; color:var(--espresso); margin:6px 0 14px; min-height:3em}
.fl-savok{display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px}
.fl-sav{padding:11px 0; border:1px solid var(--line); background:#fff; font-size:15.5px; cursor:pointer; transition:background .25s, border-color .25s}
.fl-sav:hover{border-color:var(--ink)}
.fl-sav.aktiv{background:var(--ink); color:var(--ivory); border-color:var(--ink)}

/* 4 · adatok */
.fl-csapda{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fgdpr{grid-column:1 / -1; display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.6; color:var(--muted); cursor:pointer}
.fgdpr input{appearance:none; -webkit-appearance:none; flex:0 0 auto; width:18px; height:18px; margin-top:3px; border:1px solid var(--gold-dp); background:transparent; cursor:pointer; position:relative; border-radius:0}
.fgdpr input:checked{background:var(--ink); border-color:var(--ink)}
.fgdpr input:checked::after{content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border-right:1.5px solid var(--ivory); border-bottom:1.5px solid var(--ivory); transform:rotate(45deg)}
.factions .btn:disabled{opacity:.6; cursor:progress}

.fl-kesz{text-align:center; padding:clamp(20px,4vw,50px) 0; outline:none}
.fl-kesz h3{margin:22px 0 14px}
.fl-kesz .lead{max-width:560px; margin:0 auto 12px}
.fl-kesz .btn{margin-top:14px}

/* összegzés */
.fl-osszegzes{position:sticky; top:calc(var(--head-h) + 24px); border:1px solid var(--line); padding:22px 22px 18px; background:var(--ivory-2)}
.fl-osszegzes .eyebrow{margin-bottom:12px}
.fl-osszegzes dl{margin:0 0 16px}
.fl-osszegzes dl > div{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.fl-osszegzes dt{grid-column:1; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dp)}
.fl-osszegzes dd{grid-column:1; margin:0; font-size:15px; line-height:1.5}
.fl-modosit{grid-column:2; grid-row:1 / span 2; align-self:center; background:none; border:0; border-bottom:1px solid var(--line); padding:2px 0; font-size:12.5px; color:var(--gold-dp); cursor:pointer}
.fl-modosit[hidden]{display:none}
.fl-osszegzes .small{font-size:13.5px; margin:0}
.fl-nincs{text-align:center; padding:clamp(20px,4vw,44px) 0}
.fl-nincs .lead{max-width:560px; margin:22px auto 24px}

@media (max-width:1100px){
  .fl-test{grid-template-columns:1fr}
  .fl-osszegzes{position:static; order:-1}
  .fl-emberek{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:749px){
  .fl-lepesek{grid-template-columns:repeat(4,auto); justify-content:space-between}
  .fl-lepesek li{font-size:0; gap:0; letter-spacing:0}
  .fl-lepesek li[aria-current]{font-size:12px; gap:8px; letter-spacing:.12em}
  .fl-emberek{grid-template-columns:1fr 1fr}
  .fl-emberek .fl-ember:last-child{grid-column:1 / -1}
  .fl-idopont{grid-template-columns:1fr}
  .fl-szolg-sor{grid-template-columns:auto 1fr auto; padding:14px 6px; gap:4px 14px}
  .fl-szolg-sor input{grid-row:1 / span 2}
  .fl-szolg-sor .perc{grid-column:2; grid-row:2}
  .fl-szolg-sor .ar{grid-row:1 / span 2; grid-column:3; align-self:center; min-width:0}
  .fl-csop-fej{grid-template-columns:1fr auto}
  .fl-csop-fej .perc{grid-column:1; padding-left:30px}
  .fl-csop-fej .ar{grid-column:2}
  .fl-valt .fl-szolg-sor{padding:11px 6px 11px 30px}
  .fl-valt-sugo{margin-left:30px}
  .fl-kosar .btn{width:100%}
}

/* a page-hero közvetlenül fölötte van, saját címblokk nélkül — kisebb felső térköz */
.foglalo-sec{padding-top:clamp(36px,5vw,64px)}

/* ============================================================
   FOGLALÁS KEZELÉSE (foglalas.html) — a levelek gombjai ide visznek
   ============================================================ */
.kezelo-sec{padding-top:clamp(40px,6vw,80px)}
.kezelo{max-width:620px; margin:0 auto; border:1px solid var(--line); background:var(--ivory); padding:clamp(26px,4vw,48px); text-align:center}
.kezelo h1{font-size:clamp(26px,3.2vw,36px); margin:20px 0 22px; outline:none}
.kezelo .lead{max-width:none; margin:0 0 14px}
.kezelo-adatok{text-align:left; margin:0 0 22px; border-top:1px solid var(--line)}
.kezelo-adatok > div{display:grid; grid-template-columns:minmax(0,9em) 1fr; gap:4px 18px; padding:12px 4px; border-bottom:1px solid var(--line-soft)}
.kezelo-adatok dt{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dp); padding-top:3px}
.kezelo-adatok dd{margin:0; font-size:16px; line-height:1.5}
.kezelo-gombok{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px}
.kezelo-gombok .btn:disabled{opacity:.6; cursor:progress}
.kezelo-hiba{color:#9A3B2E; margin:12px 0 0}
@media (max-width:749px){
  .kezelo-adatok > div{grid-template-columns:1fr}
  .kezelo-gombok .btn{width:100%}
}