/* Esküvői költségvetés kalkulátor – a tervezo.css-re épül (tokenek, .ledger, .btn, .qa, fejléc, lábléc).
   Irány
   – Termék: ingyenes kalkulátor, ami a keretet kategóriánként forintra bontja, és átvezet az Esküvőszervezőbe.
   – Karakter: józan, számoló, mint egy jól vezetett háztartási főkönyv. Nem riogat, nem ígér.
   – Világ: a szervezőasztalon egy főkönyvi lap, pontozott vezetővonallal, ceruzával átírható összegekkel.
   – Momentum: maga a lap – kartoték füllel, a sorok összege a lap alján, a maradék bordóval, ha túlléptétek.
   – Szignatúra: az átírt összeg mellett halványan ott marad az ajánlott, mint egy javítás a margón.
   Csendes keret, egy akcentus (bordó), 4px-es skála, 400–600 súly, táblázatos számok. */

.kx{padding:clamp(24px,4vw,56px) 0 0}
.crumbs{margin:0 0 16px;font-size:14px;color:var(--text-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.crumbs li{display:inline-flex;align-items:center;gap:4px}
.crumbs li+li::before{content:"›";color:var(--text-3);padding:0 4px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2)}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--text)}
@media (max-width:600px){.crumbs{margin-bottom:4px}.crumbs a{min-height:32px}}

.kx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,5vw,80px);align-items:start}
.kx-h1{font-size:clamp(36px,5.2vw,72px);line-height:1;letter-spacing:-.025em;margin:0;text-wrap:balance}
.kx-lead{margin:16px 0 0;font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--text-2);max-width:32em}
.kx-side{position:sticky;top:96px}
@media (max-width:1000px){.kx-grid{grid-template-columns:1fr;gap:24px}.kx-side{position:static}}

/* ---------- Beviteli mezők ---------- */
.kform{margin-top:28px;display:flex;flex-direction:column;gap:20px}
@media (max-width:600px){.kx-lead{margin-top:12px;font-size:16px}.kform{margin-top:20px;gap:16px}.chk label{padding:6px 0}}
.fld{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.fld>label,.fld>legend{padding:0;font-size:15px;font-weight:500;color:var(--text)}
.fld small{font-size:13.5px;color:var(--text-3);font-weight:400}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--surface-3)}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:999px;font-size:15px;font-weight:500;color:var(--text-2);cursor:pointer;text-align:center;line-height:1.2}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--line),0 4px 10px -8px rgba(27,42,68,.5)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.box{display:flex;align-items:center;height:52px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s}
.box:focus-within{box-shadow:inset 0 0 0 1.5px var(--text)}
.box input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 16px;font:500 18px/1 var(--sans);color:var(--text);font-variant-numeric:tabular-nums;outline:none}
.box .unit{padding:0 16px 0 0;color:var(--text-3);font-size:16px;white-space:nowrap}
.step{display:grid;place-items:center;width:52px;height:52px;flex:none;color:var(--text-2);font-size:22px;line-height:1}
.step:hover{color:var(--text)}
.step:first-child{border-right:1px solid var(--line)}
.step:last-child{border-left:1px solid var(--line)}
.box-g input{text-align:center;padding:0 8px}
.chk{display:flex;flex-direction:column;gap:4px}
.chk label{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;font-size:15.5px;line-height:1.4;color:var(--text);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--line-2);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.chk input:checked{background:var(--accent);box-shadow:none}
.chk input:checked::after{content:"";width:6px;height:11px;border:solid var(--surface);border-width:0 2px 2px 0;transform:translate(0,-1px) rotate(45deg)}
.chk small{display:block;margin-top:2px}
.kform [hidden]{display:none}
.kx-note{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-3)}

/* ---------- A főkönyvi lap ---------- */
.sheet{position:relative;margin-top:16px;background:var(--surface);border-radius:var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg);box-shadow:var(--shadow-lg);padding:28px 28px 24px}
.sheet .ftab{height:24px;top:-23px;line-height:24px;font-size:13px;padding:0 14px}
.sheet-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}
.sheet-t{margin:0;font:400 24px/1.15 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 40;letter-spacing:-.01em}
.sheet-d{font-size:13px;color:var(--text-3)}
.sum.ledger{gap:8px;font-size:15.5px;padding:16px;margin:0 0 20px;border-radius:var(--r);background:var(--bg-2)}
.sum.ledger b{font-size:16px}
.sum .total b{color:var(--text)}
.sum .total.over span,.sum .total.over b{color:var(--accent)}

.krows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kr{padding:6px 0 8px;border-bottom:1px solid var(--line)}
.kr:last-child{border-bottom:0}
.kr-line{display:flex;align-items:baseline;gap:8px}
.kr-line::before{content:"";order:2;flex:1;min-width:12px;align-self:baseline;height:0;border-bottom:1.5px dotted var(--line-2);margin-bottom:-1px}
.kr-name{order:1;font-size:16px;color:var(--text);line-height:1.3;min-width:0}
.kr-amt{order:3;display:inline-flex;align-items:baseline;gap:4px;flex:none}
.kr-in{width:10.5ch;height:44px;margin:-4px 0;padding:0 6px;border:0;border-radius:var(--r-sm);background:transparent;font:600 17px/44px var(--sans);font-variant-numeric:tabular-nums;color:var(--text);text-align:right;box-shadow:inset 0 -1px 0 var(--line-2);transition:background .2s,box-shadow .2s}
.kr-in:hover{background:var(--bg-2)}
.kr-in:focus{outline:none;background:var(--bg-2);box-shadow:inset 0 0 0 1.5px var(--text)}
.kr-ft{font-size:15px;color:var(--text-3)}
.kr-note{display:flex;align-items:center;gap:8px;margin:0;min-height:20px;font-size:13px;line-height:1.4;color:var(--text-3)}
.kr-reset{display:none;margin-left:auto;min-height:32px;padding:0 4px;font-size:13px;font-weight:600;color:var(--accent)}
.kr-reset:hover{text-decoration:underline;text-underline-offset:3px}
.kr.is-ov .kr-in{color:var(--accent)}
.kr.is-ov .kr-reset{display:inline-flex;align-items:center}
.kr.is-ov .kr-hint{color:var(--text-2);text-decoration:line-through;text-decoration-color:var(--line-2)}
.kr.is-off .kr-name,.kr.is-off .kr-in{color:var(--text-3)}

.sheet-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:1px dashed var(--line-2)}
.sheet-act .btn{height:44px;padding:0 16px;font-size:15px}
.sheet-act .btn .i{width:18px;height:18px}
.sheet-act .btn:hover .i{transform:none}
.btn-txt{color:var(--text-2);font-weight:500}
.btn-txt:hover{color:var(--text)}

.next{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.next p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-3);max-width:36em}
.next .actions{gap:8px 16px;align-items:center}

@media (max-width:600px){
  .sheet{padding:22px 16px 18px;margin-top:20px}
  .sheet-h{flex-direction:column;gap:2px;align-items:flex-start}
  .sheet-t{font-size:21px}
  .sum.ledger{padding:12px;font-size:14.5px}
  .kr-name{font-size:15px}
  .kr-in{width:9.6ch;font-size:16px;padding:0 4px}
  .kr-ft{font-size:14px}
  .sheet-act .btn{flex:1 1 100%}
  .next .actions{flex-direction:column;align-items:stretch}
  .next .btn{width:100%}
  .next .link{align-self:center}
}

/* ---------- Tartalom ---------- */
.kdoc{margin-top:clamp(56px,8vw,112px)}
.kdoc .dossier-in{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.prose{max-width:720px;margin:0 auto}
.prose>section{padding:clamp(32px,5vw,56px) 0}
.prose>section+section{border-top:1px solid var(--line)}
.prose>section:first-child{padding-top:0}
.prose .h2{font-size:clamp(30px,3.6vw,46px);margin:0 0 20px}
.prose h3{font:400 24px/1.2 var(--serif);font-variation-settings:"opsz" 144,"SOFT" 40;letter-spacing:-.01em;margin:32px 0 8px}
.prose p,.prose li{font-size:17px;line-height:1.65;color:var(--text-2)}
.prose p{margin:0 0 16px}
.prose strong{color:var(--text);font-weight:600}
.prose a:not(.btn){color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
.prose a:not(.btn):hover{text-decoration-color:var(--accent)}
.prose ol,.prose ul{margin:0 0 16px;padding-left:24px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--text-3)}
.src{font-size:14px!important;color:var(--text-3)!important}

.ptable{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:15.5px;font-variant-numeric:tabular-nums}
.ptable caption{caption-side:bottom;text-align:left;padding-top:12px;font-size:14px;color:var(--text-3);line-height:1.5}
.ptable th,.ptable td{padding:10px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.4}
.ptable thead th{font-size:14px;font-weight:500;color:var(--text-3);border-bottom-color:var(--line-2)}
.ptable tbody th{font-weight:500;color:var(--text)}
.ptable td{color:var(--text-2)}
.ptable td:nth-child(2){white-space:nowrap;color:var(--text);font-weight:500}
.ptable th:first-child,.ptable td:first-child{padding-left:0}
@media (max-width:600px){
  .ptable,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block}
  .ptable thead{display:none}
  .ptable caption{display:block;padding:0 0 8px}
  .ptable tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .ptable th,.ptable td{padding:0;border:0}
  .ptable td:nth-child(2){margin-top:2px}
  .ptable td:nth-child(3){font-size:14px;color:var(--text-3)}
}

.example{position:relative;margin:40px 0 12px;background:var(--surface);border-radius:var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg);box-shadow:var(--shadow);padding:24px 24px 20px}
.example .ftab{height:22px;top:-21px;line-height:22px}
.example .ledger{font-size:15.5px;gap:8px}
.example .ledger span{color:var(--text)}
@media (max-width:600px){.example{padding:20px 16px 16px}.example .ledger{font-size:14.5px}}

.ticks{list-style:none;padding:0!important}
.ticks li{position:relative;padding-left:32px}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--line-2)}

.kfaq{max-width:880px;margin:0 auto}
.kfaq .h2{margin-bottom:24px}

.rel{max-width:880px;margin:0 auto}
.rel .h2{font-size:clamp(28px,3.2vw,40px);margin:0 0 20px}
.rel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rel-list a{display:flex;flex-direction:column;gap:4px;min-height:44px;height:100%;padding:16px 20px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);transition:box-shadow .2s}
.rel-list a:hover{box-shadow:0 0 0 1px var(--line-2),0 10px 22px -18px rgba(27,42,68,.45)}
.rel-list b{font-weight:600;font-size:16px;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:8px}
.rel-list b .i{width:18px;height:18px;color:var(--text-3)}
.rel-list span{font-size:14.5px;line-height:1.45;color:var(--text-2)}
@media (max-width:700px){.rel-list{grid-template-columns:1fr}}
.kdoc .sec{padding:clamp(48px,6vw,80px) 0}
.kdoc .sec:first-child{padding-top:0}

/* ---------- Nyomtatás: csak a lap ---------- */
.print-only{display:none}
@media print{
  @page{size:A4;margin:16mm}
  html,body{background:#fff!important;color:#111}
  .top,.foot,.crumbs,.kdoc,.kx-intro,.next,.skip,.sheet .ftab,.sheet-act,.kr-reset{display:none!important}
  .kx{padding:0}
  .kx .wrap{padding:0;max-width:none}
  .kx-grid{display:block}
  .kx-side{position:static}
  .print-only{display:block}
  .sheet{margin:0;box-shadow:none;padding:0;border-radius:0}
  .sheet-h{flex-direction:column;gap:4px;align-items:flex-start}
  .sum.ledger{background:none;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid #999;border-radius:0}
  .kr-in{box-shadow:none!important;background:none!important;color:#111!important}
  .kr{break-inside:avoid}
}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}