/*
 * Vendégoldal (V1–V9). Telefonra készült (390 px a minta); 768 px felett a Design 15_/16_ asztali
 * nézete: kék–fekete átlós háttér, középen 720 px széles kártya.
 */
body.vendeg{background:var(--szin-feher)}
.lap{min-height:100vh;display:flex;flex-direction:column;background:var(--szin-feher);position:relative}
.lap.szurke{background:var(--szin-vilagosszurke)}

/* Fejléc */
.hdr{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--szin-feher);flex:none}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--szin-fekete);text-decoration:none}
.brand:hover{color:var(--szin-fekete)}
.brand svg{color:var(--szin-kek)}
.brand img{height:24px;width:auto}
.hdr-tel{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--szin-kek);text-decoration:none}
.hdr-tel .szam{display:none}

/* Átlós sáv és haladásjelző */
.band{position:relative;height:22px;background:var(--szin-kek);overflow:hidden;flex:none}
.band div{position:absolute;right:0;top:0;bottom:0;width:60%;background:var(--szin-fekete);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 16px 14px;background:var(--szin-feher);margin:0;list-style:none}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:rgba(var(--fekete-rgb),.6);text-align:center}
.step .dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:2px solid rgba(var(--fekete-rgb),.2);color:rgba(var(--fekete-rgb),.6);background:var(--szin-feher)}
.step.done .dot{background:var(--szin-sotetkek);border-color:var(--szin-sotetkek);color:var(--szin-feher)}
.step.cur .dot{background:var(--szin-fekete);border-color:var(--szin-fekete);color:var(--szin-feher)}
.step.cur{color:var(--szin-fekete);font-weight:600}
.step a{color:inherit;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px}

/* V1 hős-sáv */
.hos{position:relative;height:300px;background:var(--szin-kek);overflow:hidden;flex:none}
.hos .fekete{position:absolute;left:0;right:0;bottom:0;height:235px;background:var(--szin-fekete);clip-path:polygon(0 28%,100% 0,100% 100%,0 100%)}
.hos .dis1{position:absolute;right:-20px;top:10px;opacity:.14;color:#FFFFFF;stroke-width:1}
.hos .dis2{position:absolute;left:18px;top:22px;opacity:.22;color:#FFFFFF}
.hos .szoveg{position:absolute;left:24px;right:24px;bottom:26px;display:flex;flex-direction:column;gap:8px}
.hos h1{font-size:32px;color:#FFFFFF}
.hos h1 .hl{color:var(--szin-kek)}
.hos .alcim{margin:0;color:rgba(255,255,255,.88)}
.hos .sm{margin:0;color:rgba(255,255,255,.65)}
.udvozlo{margin:14px 20px 0;padding:10px 14px;border-radius:12px;background:rgba(var(--kek-rgb),.12);display:flex;align-items:center;gap:10px}
.udvozlo svg{color:var(--szin-kek);flex:none}
.udvozlo p{margin:0;font-size:14px;color:rgba(var(--fekete-rgb),.75)}
.v1-gomb{padding:20px 20px 16px}
.v1-gomb .megj{display:none}
.v1-info{background:var(--szin-vilagosszurke);padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.infok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.info{padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.info svg{color:var(--szin-kek)}
.info .cim{font-size:12px;font-weight:600}
.info .sm{color:var(--szin-fekete)}
.info a.utvonal{font-size:12px;font-weight:600;text-decoration:none}
.hogyan{padding:16px;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.hogyan ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.hogyan li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.hogyan .szam{flex:none;width:24px;height:24px;border-radius:50%;background:var(--szin-sotetkek);color:#FFFFFF;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.labjegy{margin:auto 0 0;text-align:center}

/* V2 szolgáltatáslista */
.fejcim{padding:4px 20px 14px;display:flex;flex-direction:column;gap:4px}
.fejcim p{margin:0}
.lista{flex:1;display:flex;flex-direction:column;padding-bottom:16px}
.kat-csoport{display:flex;flex-direction:column}
.cat{font-size:12px;font-weight:600;color:rgba(var(--fekete-rgb),.6);text-transform:uppercase;letter-spacing:.05em;padding:14px 20px 8px;background:var(--szin-vilagosszurke)}
.row{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--szin-feher);border-top:1px solid var(--szin-vilagosszurke);min-height:60px;cursor:pointer}
.cat+.row,.cat+.szolg>.row{border-top:0}
.row input{width:22px;height:22px;margin:0;accent-color:var(--szin-kek);flex:none}
.row .name{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.row .price{font-size:15px;font-weight:600;white-space:nowrap}
.row .nyil{color:rgba(var(--fekete-rgb),.4);flex:none}
.row.off{cursor:default}
.row.off .txt,.row.off .price{color:rgba(var(--fekete-rgb),.4)}
.row .kieg-megj{color:var(--szin-sotetkek);font-size:11px;display:none}
.row.off .kieg-megj{display:block}
.valtozatok{display:none}
.szolg.nyitva .valtozatok{display:block}
.sub{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 54px;background:var(--szin-vilagosszurke);min-height:44px;cursor:pointer}
.sub input{width:20px;height:20px;margin:0;accent-color:var(--szin-kek);flex:none}
.sub .name{flex:1;display:flex;flex-direction:column}
.sub .name .txt{font-size:14px}
.sub .price{font-size:14px;font-weight:600;white-space:nowrap}
.sub.on{background:rgba(var(--kek-rgb),.12)}
.sub.on .name .txt{font-weight:600}
.kivalasztva{display:none}
.bar{position:sticky;bottom:0;left:0;right:0;height:76px;background:var(--szin-fekete);display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:12px;color:#FFFFFF;z-index:5;margin-top:auto}
.bar .osszeg{font-size:15px;font-weight:600}
.bar .osszeg.ures{font-weight:400;color:rgba(255,255,255,.6)}
.btn-go{display:flex;align-items:center;justify-content:center;height:44px;padding:0 26px;background:var(--szin-sotetkek);color:#FFFFFF;border-radius:12px;font-weight:600;font-size:15px;text-decoration:none;border:0;font-family:inherit;cursor:pointer;flex:none}
.btn-go[disabled]{background:rgba(255,255,255,.18);color:rgba(255,255,255,.5);cursor:default}
.urlap-hiba{margin:0 20px 10px;padding:10px 14px;border-radius:12px;background:rgba(var(--piros-rgb),.1);color:var(--szin-piros);font-size:13px;display:flex;gap:8px;align-items:center}

/* V3 időpont */
.tartalom{padding:12px 20px 0;display:flex;flex-direction:column;gap:16px;flex:1}
.valasztott{padding:12px 14px;display:flex;align-items:center;gap:12px}
.valasztott>div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.valasztott .nevek{font-size:14px;font-weight:600}
.valasztott a{font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.napsav-fej{display:flex;justify-content:space-between}
.napsav{display:flex;gap:6px;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:thin}
.day{flex:none;width:48px;height:64px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--szin-feher);border:0;font-family:inherit;cursor:pointer;color:var(--szin-fekete);text-decoration:none}
.day:hover{color:var(--szin-fekete)}
.day .dn{font-size:11px;color:rgba(var(--fekete-rgb),.6)}
.day .dd{font-size:16px;font-weight:600;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.day.sel .dd{background:var(--szin-sotetkek);color:#FFFFFF}
.day.full{cursor:default}
.day.full .dd{color:rgba(var(--fekete-rgb),.35);text-decoration:line-through}
.day.full .dn{color:rgba(var(--fekete-rgb),.35)}
.idopontok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.slot{height:48px;border-radius:12px;border:2px solid var(--szin-sotetkek);background:var(--szin-feher);color:var(--szin-sotetkek);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer}
.slot.sel{background:var(--szin-sotetkek);color:#FFFFFF}
.lap-alja{margin-top:auto;padding:12px 0 20px}
.nincs-ido{padding:14px 16px;font-size:14px;color:rgba(var(--fekete-rgb),.7)}

/* V4 adatok */
.urlap{padding:4px 20px 20px;display:flex;flex-direction:column;gap:16px;flex:1}
.urlap .fej{display:flex;flex-direction:column;gap:4px}
.urlap .fej p{margin:0}
.urlap .torles{display:flex;gap:6px}
.urlap .torles button{font-size:12px}
.ket-mezo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.meret-valaszto{display:flex;gap:8px}
.meret-valaszto label{flex:1;height:48px;border:1.5px solid rgba(var(--fekete-rgb),.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer;color:rgba(var(--fekete-rgb),.7)}
.meret-valaszto input{position:absolute;opacity:0;width:0;height:0}
.meret-valaszto input:checked+span{color:var(--szin-sotetkek)}
.meret-valaszto label:has(input:checked){border:2px solid var(--szin-sotetkek);background:rgba(var(--kek-rgb),.12)}
.meret-valaszto.err label{border-color:var(--szin-piros)}

/* V5 összegzés */
.osszegzo{padding:8px 20px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.tetelek{padding:16px;display:flex;flex-direction:column;gap:10px}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.line .n{display:flex;flex-direction:column}
.line .ar{font-weight:600;white-space:nowrap}
.line.nagy{font-size:16px}
.line.nagy span{font-weight:600}
.line.eloleg{color:var(--szin-sotetkek)}
.valaszto{height:1px;background:var(--szin-vilagosszurke);margin:4px 0}
.adatsor{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.adatsor div{display:flex;align-items:center;gap:10px;font-size:14px}
.adatsor svg{color:var(--szin-kek);flex:none}
.adatsor strong{font-weight:600}
.szabaly{padding:12px 14px;border-radius:12px;background:rgba(var(--fekete-rgb),.05);display:flex;gap:10px;align-items:flex-start}
.szabaly svg{color:rgba(var(--fekete-rgb),.5);flex:none;margin-top:1px}
.szabaly p{margin:0;font-size:13px;color:rgba(var(--fekete-rgb),.7)}
.fizetes-gomb{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:center}
.logok{display:flex;gap:8px;align-items:center}
.logok .logo{height:28px;padding:0 12px;border-radius:6px;background:var(--szin-vilagosszurke);color:rgba(var(--fekete-rgb),.55);font-size:11px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center}

/* V6 siker, V9 hiba */
.siker{padding:36px 20px 20px;display:flex;flex-direction:column;gap:18px;align-items:center;flex:1}
.pipa-kor{width:96px;height:96px;border-radius:50%;background:var(--szin-zold);display:flex;align-items:center;justify-content:center;color:#FFFFFF;flex:none}
.siker h1{text-align:center}
.reszletek{width:100%;padding:16px;display:flex;flex-direction:column;gap:12px}
.irow{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45}
.irow svg{color:var(--szin-kek);flex:none;margin-top:1px}
.irow strong{font-weight:600}
.siker .megjegyzes{margin:0;font-size:14px;text-align:center;color:rgba(var(--fekete-rgb),.7)}
.siker .gombok{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.siker .uj{margin-top:auto;font-size:14px;font-weight:600;text-decoration:none}
.hibalap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 28px 60px;text-align:center}
.hibalap .ikon{width:72px;height:72px;border-radius:50%;background:rgba(var(--kek-rgb),.12);color:var(--szin-sotetkek);display:flex;align-items:center;justify-content:center}
.hibalap p{margin:0;color:rgba(var(--fekete-rgb),.7)}
.hibalap .gombok{width:100%;margin-top:10px;display:flex;flex-direction:column;gap:14px;align-items:center}
.hibalap .gombok a.tel{font-size:14px;font-weight:600;text-decoration:none}

/* ---- Asztali nézet (Design 15_, 16_): átlós kék–fekete háttér, középen 720 px kártya ---- */
@media (min-width:768px){
  body.vendeg{background:var(--szin-kek);min-height:100vh}
  body.vendeg::before{content:"";position:fixed;inset:0;background:var(--szin-fekete);clip-path:polygon(0 62%,100% 28%,100% 100%,0 100%);z-index:0}
  .lap{position:relative;z-index:1;width:720px;max-width:calc(100% - 48px);min-height:0;margin:40px auto;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(var(--fekete-rgb),.25)}
  .hdr{height:60px;padding:0 32px;border-bottom:1px solid var(--szin-vilagosszurke)}
  .brand{font-size:17px;gap:10px}
  .hdr-tel{width:auto;gap:8px;padding:0 14px;font-size:14px;font-weight:600}
  .hdr-tel .szam{display:inline}
  .band div{width:50%;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
  .steps{padding:14px 120px}
  .step{font-size:12px}
  .step .dot{width:26px;height:26px}
  .hos{height:220px}
  .hos .fekete{height:175px;clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
  .hos .szoveg{left:32px;right:32px;gap:6px}
  .hos h1{font-size:36px}
  .hos .alcim{font-size:16px}
  .udvozlo{margin:20px 32px 0}
  .v1-gomb{padding:24px 32px 0;display:flex;gap:16px;align-items:center}
  .v1-gomb .btn-p{max-width:320px}
  .v1-gomb .megj{display:block;margin:0;font-size:13px}
  .v1-info{background:var(--szin-feher);padding:20px 32px 20px;gap:20px}
  .infok{gap:14px}
  .info.card{box-shadow:none;background:var(--szin-vilagosszurke);padding:14px 16px}
  .info svg{display:none}
  .info .cim{font-size:13px}
  .info .sm{font-size:14px;line-height:1.5}
  .info a.utvonal{font-size:13px}
  .hogyan{display:none}
  .fejcim{padding:4px 32px 6px;flex-direction:row;align-items:baseline;gap:14px}
  .lista{display:block;columns:2;column-gap:24px;padding:0 32px 20px}
  .kat-csoport{break-inside:avoid;gap:8px;padding-bottom:4px}
  .cat{background:none;padding:12px 0 6px}
  .row{padding:10px 12px;border:1px solid var(--szin-vilagosszurke);border-radius:12px;min-height:56px}
  .cat+.row,.cat+.szolg>.row{border-top:1px solid var(--szin-vilagosszurke)}
  .row.on{border-color:var(--szin-kek)}
  .row .txt{font-size:14px}
  .row .price{font-size:14px}
  .szolg{display:flex;flex-direction:column;gap:8px}
  .valtozatok{flex-direction:column;gap:8px}
  .szolg.nyitva .valtozatok{display:flex}
  .sub{padding:8px 12px 8px 46px;border-radius:10px;min-height:40px}
  .sub .name{flex-direction:row;gap:8px;align-items:baseline;font-size:13px}
  .sub .name .txt{font-size:13px}
  .sub .price{font-size:13px}
  .kivalasztva{break-inside:avoid;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--szin-vilagosszurke);flex-direction:column;gap:6px}
  .kivalasztva.van{display:flex}
  .kivalasztva b{font-size:13px;font-weight:600}
  .kivalasztva .txt{font-size:13px}
  .bar{position:static;height:72px;padding:0 32px}
  .bar .osszeg{font-size:16px}
  .tartalom,.urlap,.osszegzo{padding-left:32px;padding-right:32px}
  .napsav{margin:0 -32px;padding:0 32px 4px}
  .idopontok{grid-template-columns:repeat(4,minmax(0,1fr))}
  .siker{padding-left:32px;padding-right:32px}
  .hibalap{min-height:480px}
}