/* MBK lakossági wizard v2 – arculati illesztés a my-book.hu-hoz (Woodmart téma).
   Forrás-értékek a WP témából: --wd-primary-color rgb(181,131,82), --wd-text-font "Roboto",
   --wd-title-font "Playfair Display", pill gombok (35px radius), fehér alap, #f7f7f7 szekciók.
   A bronz (#b58352) fehér szövegen csak 3,3:1 – ezért a GOMB-háttér és a márkaszínű szöveg a
   sötétített --brand-strong (#8f6035, 5,4:1), a világos bronz csak dekoráció (keret, kiemelés). */

:root{
  /* felületek */
  --page:#f7f5f2; --card:#fff; --alt:#f7f7f7; --tint:#faf5ef;
  --line:#e6e0d8; --line-strong:#d8cfc2;
  /* szöveg (mind ≥4,5:1 fehéren) */
  --ink:#212121; --text:#3a3a3a; --muted:#6b6b6b;
  /* márka */
  --brand:#b58352; --brand-soft:#c6a07d;
  --brand-strong:#8f6035; --brand-strong-h:#7d5528;
  /* állapotok */
  --err:#b3261e; --err-bg:#fdecea; --warn-bg:#fff3cd; --warn-ink:#7a5b00;
  --radius:10px; --pill:999px;
  --shadow:0 1px 2px rgba(33,33,33,.04),0 8px 24px rgba(33,33,33,.05);
  --font:"Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-title:"Playfair Display",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--page);color:var(--text);line-height:1.6;
     font-size:16px;padding:0 16px 40px;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto}

/* ---------- fejléc: my-book.hu logó + visszaút a főoldalra ---------- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:760px;margin:0 auto;padding:18px 0 14px}
.site-head .logo{display:inline-flex;align-items:center}
.site-head .logo img{display:block;height:38px;width:auto}
.site-head .home{font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-strong);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.site-head .home:hover{color:var(--brand-strong-h);border-color:var(--brand)}

h1{font-family:var(--font-title);font-size:1.85rem;font-weight:600;line-height:1.25;
   text-align:center;margin:14px 0 6px;color:var(--ink);letter-spacing:-.01em}
.sub{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:20px}
.demo-badge{display:block;text-align:center;margin:0 auto 14px;max-width:360px;background:var(--warn-bg);
  color:var(--warn-ink);font-size:.75rem;font-weight:700;padding:6px 12px;border-radius:var(--radius);letter-spacing:.4px}

/* ---------- haladásjelző ---------- */
.progress{margin-bottom:18px}
.steps-nav{display:flex;gap:5px}
.steps-nav div{flex:1;height:5px;border-radius:3px;background:var(--line);transition:background .3s}
.steps-nav div.on{background:var(--brand)}
.steps-nav div.now{background:var(--brand-strong)}
.steps-label{margin-top:8px;font-size:.76rem;color:var(--muted);text-align:center;
  letter-spacing:.06em;text-transform:uppercase;font-weight:500}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{font-family:var(--font-title);font-size:1.4rem;font-weight:600;line-height:1.3;
  margin-bottom:4px;color:var(--ink)}
.card h3{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.intro{color:var(--muted);font-size:.9rem;margin-bottom:22px}

/* ---------- kérdés-blokk: címke » vezérlő » inline hint » kinyitható magyarázat ---------- */
.q{margin-bottom:22px}
.q:last-of-type{margin-bottom:12px}
.lbl,label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin:0 0 7px}
.lbl.req::after{content:' *';color:var(--err)}
.hint{color:var(--muted);font-size:.83rem;margin-top:7px;line-height:1.55}
details.explain{margin-top:7px}
details.explain summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.8rem;
  font-weight:500;color:var(--brand-strong);list-style:none;padding:3px 0;
  border-bottom:1px solid var(--line-strong);width:fit-content}
details.explain summary:hover{color:var(--brand-strong-h);border-color:var(--brand)}
details.explain summary::-webkit-details-marker{display:none}
details.explain summary::before{content:'?';display:inline-grid;place-items:center;width:16px;height:16px;
  border-radius:50%;background:var(--brand-strong);color:#fff;font-size:.66rem;font-weight:700;flex:0 0 16px}
details.explain[open] summary{margin-bottom:8px}
details.explain p{font-size:.83rem;color:var(--text);background:var(--tint);
  border-left:3px solid var(--brand);padding:12px 14px;border-radius:0 6px 6px 0;line-height:1.65}

/* ---------- választó-csempék ---------- */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.opt{border:1px solid var(--line-strong);border-radius:var(--radius);padding:14px 12px;cursor:pointer;
  text-align:center;background:#fff;transition:border-color .15s,background .15s,box-shadow .15s;
  font:inherit;color:var(--text);width:100%;min-height:52px}
.opt:hover{border-color:var(--brand)}
.opt.sel{border-color:var(--brand-strong);background:var(--tint);color:var(--ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--brand-strong)}
.opt small{display:block;color:var(--muted);font-weight:400;font-size:.75rem;margin-top:3px}

input,select,textarea{font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--line-strong);
  border-radius:8px;width:100%;background:#fff;color:var(--ink)}
textarea{resize:vertical;min-height:76px;line-height:1.55}
input::placeholder,textarea::placeholder{color:#8d8d8d}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px;border-radius:4px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-strong);outline-offset:1px;border-color:var(--brand-strong)}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>div{flex:1;min-width:140px}

/* ---------- gombok (Woodmart-stílusú pill) ---------- */
.btns{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.btns-right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
/* FIGYELEM: a .opt csempék és a .fcard kártyák is <button>-ök – a nagybetűsítés és a
   betűköz ezért CSAK a valódi akciógombokra érvényes, különben a csempék szövege is elromlik. */
button{font:inherit;font-family:var(--font);border:0;cursor:pointer;letter-spacing:normal;text-transform:none}
.next,.back,.ghost{font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 30px;border-radius:var(--pill);min-height:48px;
  transition:background .2s,color .2s,border-color .2s}
.next{background:var(--brand-strong);color:#fff}
.next:hover{background:var(--brand-strong-h)}
.next:disabled{background:#d5cec5;color:#fff;cursor:default}
.back{background:var(--alt);color:var(--ink)}
.back:hover{background:#ececec}
.ghost{background:transparent;color:var(--brand-strong);border:1px solid var(--line-strong)}
.ghost:hover{border-color:var(--brand);color:var(--brand-strong-h)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:.8rem;font-weight:500;
  letter-spacing:normal;text-transform:none;min-height:0;color:var(--brand-strong);
  border-bottom:1px solid var(--line-strong);cursor:pointer}
.linkbtn:hover{color:var(--brand-strong-h);border-color:var(--brand)}

.err{background:var(--err-bg);color:var(--err);padding:12px 15px;border-radius:8px;margin:10px 0;
  font-size:.88rem;border-left:3px solid var(--err)}

/* ---------- felületnemesítés – kirakat ---------- */
.showcase{border:1px solid var(--line);background:#fcfbf9;border-radius:var(--radius);padding:18px;margin:20px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin:14px 0}
.fcard{display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:0 0 14px;overflow:hidden;cursor:pointer;font:inherit;color:var(--text);
  transition:border-color .15s,box-shadow .15s}
.fcard:hover{border-color:var(--brand)}
.fcard.sel{border-color:var(--brand-strong);box-shadow:inset 0 0 0 1px var(--brand-strong)}
.fimg{display:block;height:104px;background-size:cover;background-position:center;background-color:#efeae2}
/* Valós fotóig kód-specifikus, absztrakt háttér – szándékosan NEM fotó-imitáció. */
.fimg.placeholder{background:linear-gradient(135deg,#e9e2d6 0%,#d9cfbe 50%,#efe9df 100%)}
.fimg.placeholder.f-aranyozas{background:linear-gradient(115deg,#8d6f2a 0%,#e6c565 28%,#fff3c4 44%,#d4a938 60%,#8d6f2a 100%)}
.fimg.placeholder.f-formalakk{background:linear-gradient(115deg,#2f3b38 0%,#4a5a56 40%,#dfe8e4 52%,#3f4d49 64%,#2f3b38 100%)}
.fimg.placeholder.f-uv_lakk{background:linear-gradient(115deg,#dfd8cc 0%,#fbf9f5 45%,#cfc6b6 100%)}
.fimg.placeholder.f-pregeles,
.fimg.placeholder.f-dombornyomas{background:linear-gradient(135deg,#e4dccd 0%,#cdc2ad 45%,#f0eae0 100%)}
.fname{font-weight:600;font-size:.92rem;color:var(--ink);padding:10px 13px 0;line-height:1.35}
.fdesc{font-size:.79rem;color:var(--muted);padding:2px 13px 0;line-height:1.5}
.fprice{font-size:.8rem;font-weight:700;color:var(--brand-strong);padding:6px 13px 0}

/* további felületkezelések – szándékosan visszafogott, „csak pipálható” szint */
.more-finishing{margin:0 0 16px}
.more-finishing h4{font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:2px}
.services.compact .service{padding:11px 13px;background:#fbfaf8}
.services.compact .sname{font-weight:500;font-size:.87rem}
.services.compact .sname em{font-weight:600;color:var(--muted)}

/* ---------- szolgáltatások ---------- */
.services{display:grid;gap:10px;margin-bottom:8px}
.service{display:grid;grid-template-columns:22px 1fr;gap:4px 12px;align-items:start;border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:14px 15px;cursor:pointer;background:#fff;margin:0;font-weight:400;
  transition:border-color .15s,background .15s}
.service:hover{border-color:var(--brand)}
.service:has(input:checked){border-color:var(--brand-strong);background:var(--tint)}
.service input{width:19px;height:19px;margin-top:2px;accent-color:var(--brand-strong)}
.sname{font-weight:600;font-size:.92rem;color:var(--ink);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sname em{font-style:normal;font-weight:700;color:var(--brand-strong);font-size:.82rem;white-space:nowrap}
.sdesc{grid-column:2;font-size:.81rem;color:var(--muted);line-height:1.5}

/* ---------- kalkuláció ---------- */
.price-table{width:100%;border-collapse:collapse;margin:16px 0}
.price-table th{background:var(--brand-strong);color:#fff;padding:11px 9px;font-size:.72rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.price-table th:first-child{border-radius:8px 0 0 0}
.price-table th:last-child{border-radius:0 8px 0 0}
.price-table td{border:1px solid var(--line);padding:12px 10px;text-align:center}
.gross{font-family:var(--font-title);font-size:1.2rem;color:var(--ink);font-weight:600;display:block}
.qty{font-weight:600;color:var(--ink)}
.net{font-size:.78rem;color:var(--muted)}
.price-table td>span{display:block}
.note{font-size:.82rem;color:var(--muted);background:var(--alt);border-left:3px solid var(--line-strong);
  padding:10px 14px;border-radius:0 6px 6px 0;margin:12px 0;line-height:1.6}
.note.legal{border-left-color:var(--brand)}
.extras{margin:16px 0}
.extras h3{font-size:.92rem;margin-bottom:8px}
.extras ul{list-style:none}
.extras li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:.88rem}
.extras li strong{color:var(--ink);white-space:nowrap;font-weight:600}

.consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:.85rem;
  font-weight:400;color:var(--text);cursor:pointer;line-height:1.55}
.consent input{margin-top:3px;width:19px;height:19px;flex-shrink:0;accent-color:var(--brand-strong)}
.consent a{color:var(--brand-strong)}
.ok-box{background:var(--tint);border:1px solid var(--brand);color:var(--ink);padding:20px;
  border-radius:var(--radius);text-align:center;font-weight:600}
.ok-box .ref{font-weight:400;font-size:.85rem;color:var(--muted)}
.spin{text-align:center;color:var(--muted);padding:24px}
.hp{position:absolute;left:-9999px;top:-9999px}

/* ---------- lábléc ---------- */
.site-foot{max-width:760px;margin:24px auto 0;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.7}
.site-foot a{color:var(--brand-strong)}
.site-foot .legal{display:block;margin-bottom:6px}

/* ---------- mobil ---------- */
@media(max-width:640px){
  body{padding:0 12px 32px}
  .site-head{padding:14px 0 10px}
  .site-head .logo img{height:32px}
  .site-head .home{font-size:.7rem}
  h1{font-size:1.5rem}
  .card{padding:20px 18px}
  .card h2{font-size:1.22rem}
  .opts{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .btns{flex-direction:column-reverse;align-items:stretch}
  .btns>*{width:100%}
  .btns button{width:100%}
  .btns-right{flex-direction:column-reverse;width:100%}
  .row{gap:12px}
  .row>div{min-width:100%}

  /* ártáblázat mobilon: soronként kártya, fejléc-címkékkel */
  .price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:100%}
  .price-table thead{position:absolute;left:-9999px}
  .price-table{border-collapse:separate;border-spacing:0}
  .price-table tr{border:1px solid var(--line-strong);border-radius:var(--radius);
    margin-bottom:12px;padding:6px 0;background:#fff}
  .price-table td{border:0;border-bottom:1px solid var(--line);text-align:right;
    padding:9px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .price-table tr td:last-child{border-bottom:0}
  .price-table td::before{content:attr(data-th);font-size:.74rem;font-weight:500;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;text-align:left;flex:0 0 auto}
  .gross{font-size:1.1rem}
}
/* 390 px-es telefonon még KÉT oszlop legyen – egy oszlopnál a 4 méret-csempe
   önmagában elvinne egy fél képernyőt. Egy oszlopra csak a legkeskenyebb készülékeken váltunk. */
@media(max-width:359px){
  .opts{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

/* Az alcím bevezető: az 1. lépés után mobilon csak helyet foglalna a kérdések elől. */
@media(max-width:640px){
  body.stepped .sub{display:none}
  body.stepped h1{font-size:1.28rem;margin:10px 0 12px}
}

/* ---------- kisegítő beállítások ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}