/* ============================================================
   PLAY4KIDS — košík, poptávka, pokladna, objednávka (P7b)
   PLAN-2026-10-01-play4kids-krok1.md §2.6, §3 P7b. Načítají ho jen
   stránky Cart/*, Checkout/*, Order/*, Payment/* ({block head}).
   Navazuje na style.css (tokeny, .bitem, .btotal, .bform, .fgrid,
   .field, .okbox z obrazovky „Poptávka“ návrhu 3.1): bílý základ,
   nejvýš jedna úroveň kontejneru, vlasové linky mezi řádky,
   3 rádiusy (24 panely · 20 média · 14 ovládací prvky).
   Zrcadlo ve www/themes/play4kids/assets (npm run sync:assets).
   ============================================================ */

/* ---------- obecné ---------- */
.shopw{padding-top:28px;padding-bottom:150px}
.shopw>h1,.bkw>h1{font-size:2.125rem}   /* návrh 3.1 obrazovka Poptávka: 34 px na počítači i telefonu */
.mut{color:var(--muted)}
.hint{font-size:14px;color:var(--ink-2);margin-top:8px}
.legal{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:14px}
.legal a,.hint a{font-weight:700}
.rqp{color:var(--purple);font-weight:800}
.fsum p+p{margin-top:4px}
.fsum ul{margin:0;padding-left:1.1em;list-style:disc}
.notice--ok{background:var(--wash-meadow);font-weight:600;align-items:flex-start;line-height:1.5}
.notice--ok svg{color:var(--green-t);margin-top:2px}
.notice--review{background:var(--wash-sky);font-weight:600;align-items:flex-start;line-height:1.5;margin-top:18px}
.notice--review svg{color:var(--blue-d);margin-top:2px}
.gdpr small{font-size:13px;color:var(--ink-2);font-weight:500}
.gdpr b{font-weight:700}

/* ---------- košík: upozornění a sekce ---------- */
.ck-notes{display:grid;gap:8px;margin:22px 0 0}
.ck-notes .notice{font-weight:600;align-items:flex-start;line-height:1.45}
.ck-hint{margin-top:18px;font-weight:600}
.ck-hint svg{color:var(--blue-d)}
.ck-empty{margin-top:32px}
.ck-empty .oksun,.bkcol .empty .oksun{width:84px;height:84px;margin:0 auto 10px;color:var(--sun)}
.ck-empty .ctas,.bkcol .empty .ctas{justify-content:center;margin-top:18px}
.ck-empty .ctas .btn,.bkcol .empty .ctas .btn{margin-top:0}
.ck-sec{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.ck-sec:first-of-type{border-top:0;padding-top:0}
.ck-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ck-head h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);display:flex;align-items:center;gap:12px}
.ck-head h2 svg{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--sun);box-sizing:content-box;flex:none}
.ck-sec--inq .ck-head h2 svg{background:#E3F0FA;color:var(--blue-d)}
.ck-n{font-weight:700;font-size:14.5px;color:var(--ink-2)}
.ck-sub{color:var(--ink-2);margin-top:6px;max-width:62ch}
.ck-sec .bkgrid{margin-top:24px}

/* ---------- řádek košíku / poptávky (doplňky .bitem z návrhu) ---------- */
.bitem .bm{min-width:0}
.bitem .bi{display:grid;place-items:center}
.bitem .bi .ph-logo{width:60%;height:auto;opacity:.35}
.bitem h3 a{color:inherit;text-decoration:none}
.bitem h3 a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.bitem .bp .bu{display:block}
.bitem .bctl form{margin:0;display:inline-flex;align-items:center;gap:8px}
.bitem .bctl .stepper{height:44px}
.bitem .bctl .stepper button{width:40px;height:40px}
.bitem .bctl .stepper input{width:52px}
.bitem[aria-busy=true]{opacity:.55;pointer-events:none}
/* bez JS: počet kusů se uloží tlačítkem „Upravit“, +/− potřebují skript (main.js) */
html:not(.js) .bqty .stepper button{display:none}
html.js .bqty .bupd{display:none}
.bkcol{display:grid;gap:14px;align-content:start}

/* ---------- souhrn sekce košíku (panel vpravo) ---------- */
.osum{background:var(--fill);border-radius:var(--r-xl);padding:22px 24px;display:grid;gap:14px;align-content:start}
.osum h3{font-size:1.2rem}
.osum--inq{background:none;padding:0}
.osum .n,.cosum .n{font-size:13.5px;color:var(--ink-2);font-weight:600}
.osum .btn-block,.cosum .btn-block{min-height:54px}
.osum .fsum{margin:0}
.srows{display:grid;gap:0;margin:0}
.srows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.srows>div:first-child{border-top:1px solid var(--line)}
.srows dt{font-weight:600;color:var(--ink-2);min-width:0}
.srows dt small{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
.srows dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.osum .srows>div,.cosum .srows>div{border-color:var(--line-2)}
.stotal{display:grid;gap:2px}
.stotal .l{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.stotal .t{font:800 2rem/1.05 var(--f-t)}
.stotal .v{font-size:13.5px;color:var(--ink-2)}

/* ---------- formulář poptávky: organizace + IČO ---------- */
.orgrow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.orgrow>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.orgrow label{font-weight:700;font-size:14.5px}
.field.org>.hint{margin-top:0}
.file input:focus-visible+label{outline:3px solid #1B4DB1;outline-offset:3px}
.bform .fsum{margin-bottom:14px}
.bform .fsum:focus{outline:none}
@media (max-width:560px){.orgrow{grid-template-columns:1fr}}

/* ---------- poděkování, výsledky (okbox z návrhu) ---------- */
.okbox h1{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem)}
.okbox .kick{margin-bottom:10px}
.oknum{font:700 1.15rem/1.2 var(--f-a);margin-top:12px;color:var(--ink)}
.okbox .lead{margin-top:12px}
.okbox .n{font-size:14px;color:var(--ink-2);margin-top:10px}
.okbox .okh2{font-size:1.25rem;margin-top:26px}
.okctas{margin-top:24px}
.okbox .oksum h2{font-size:1.2rem;margin-bottom:10px}
.okbox .srows{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.okbox .qrbox h2{font-size:1.2rem}
.okbox .oksum h3{font-size:1.02rem;margin-top:18px}
.okbox .oksum .n{margin-top:12px}
.okbox .oksum .stotal{margin-top:14px}
.okbox--solo{grid-template-columns:minmax(0,760px)}
.tyhelp{margin-top:40px;max-width:72ch}
.bitems--sum{display:grid;gap:0;margin-bottom:12px}
.sline{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.sline .nm{font-weight:700;min-width:0}
.sline .nm small{display:block;font-weight:600;color:var(--muted);font-size:12.5px}
.sline .q{color:var(--ink-2);white-space:nowrap}
.sline .pr{font-weight:800;white-space:nowrap;text-align:right}
.qrbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;background:var(--fill);border-radius:var(--r-xl);padding:22px;margin-top:22px}
.qrbox h2{font-size:1.2rem;margin-bottom:10px}
.qrbox .qr{text-align:center}
.qrbox .qr img{width:200px;height:200px;border-radius:var(--r-md);background:#fff;padding:8px}
.qrbox .srows dd{white-space:normal}
.qrbox .lnk{min-height:32px;font-size:13.5px;margin-left:6px}
@media (max-width:640px){.qrbox{grid-template-columns:1fr}.qrbox .qr img{margin:0 auto}}

/* ---------- pokladna: kroky ---------- */
.costeps{margin:4px 0 22px}
.costeps ol{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;counter-reset:none}
.costeps li{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--muted)}
.costeps li a{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-height:44px}
.costeps li a:hover .l{text-decoration:underline}
.costeps .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fill-2);color:var(--ink-2);font:700 15px/1 var(--f-a);flex:none}
.costeps li.done{color:var(--ink-2)}
.costeps li.done .n{background:var(--green);color:#fff}
.costeps li.cur{color:var(--ink)}
.costeps li.cur .n{background:var(--sun);color:var(--ink)}
html[data-aud=b2g] .costeps li.cur .n{background:var(--blue);color:#fff}

/* ---------- pokladna: rozvržení ---------- */
.cogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:48px;align-items:start;margin-top:28px}
.comain{min-width:0}
.coform{margin:0}
.cosec{padding:26px 0;border-top:1px solid var(--line)}
.cosec:first-child,.coform>.fsum+.cosec{border-top:0;padding-top:0}
.coform>.fsum{margin-bottom:22px}
.cosec>h2,.cosec-h h2{font-size:1.35rem;margin-bottom:14px}
.cosec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cosec-h .lnk{min-height:36px;font-size:14.5px}
.cosec .fgrid{margin-top:4px}
.cofs{border:0;margin:14px 0 0;padding:0;min-width:0}
.fldrow{display:flex;gap:8px;align-items:center}
.fldrow .inp{flex:1;min-width:0}
.fldrow .btn{flex:none}
.cocols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cocols h3,.oksum h3{font-size:1rem;margin-bottom:6px}
.coaddr{font-size:15px;line-height:1.6;color:var(--ink-2)}
.coaddr b{color:var(--ink)}
.conote{white-space:normal;color:var(--ink-2)}
.coactions{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.coactions .btn-pri{min-width:240px}
.cofinal{margin-top:22px}
.cofinal .gdpr{margin-top:4px}
@media (max-width:980px){.cogrid{grid-template-columns:1fr;gap:36px}.cocols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cocols{grid-template-columns:1fr}.coactions{flex-direction:column;align-items:stretch}.coactions .btn{width:100%}}

/* ---------- pokladna: volby dopravy a platby ---------- */
.choices{display:grid;gap:10px}
.choices--inline{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:var(--r-md);background:#fff;border:1.5px solid var(--line-2);cursor:pointer;transition:border-color .15s,background-color .15s}
.choice:hover{border-color:var(--ink-2)}
.choice:has(input:checked){border-color:var(--sel-edge);background:var(--sel)}
.choice input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--blue)}
.choice input:focus-visible{outline:3px solid #1B4DB1;outline-offset:3px}
.choice .cb{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.choice .cn{font-weight:800;line-height:1.25}
.choice .cnote{font-size:13.5px;font-weight:700;color:var(--green-t)}
.choice .cdesc{font-size:14px;color:var(--ink-2);line-height:1.45}
.choice .cp{font-weight:800;white-space:nowrap;text-align:right;flex:none}
.choice--sm{padding:10px 14px;align-items:center}
.pickup{margin:0 0 6px 36px;padding:12px 0;display:grid;gap:8px}
.pickup-sel{font-weight:700}
[data-payment-choices][aria-busy=true]{opacity:.55}

/* ---------- pokladna: boční souhrn ---------- */
.coaside{position:sticky;top:calc(var(--hdr) + 16px)}
.cosum{background:var(--fill);border-radius:var(--r-xl);padding:22px 24px;display:grid;gap:14px}
.cosum h2{font-size:1.25rem}
.cosum-lines .bitem{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px 0;border-color:var(--line-2)}
.cosum-lines .bitem:first-child{border-top:0;padding-top:0}
.cosum-lines .bitem .bi{width:56px;height:56px;border-radius:12px;background:#fff}
.cosum-lines .bitem h3{font-size:.98rem}
.cosum-lines .bitem .bs{font-size:12.5px}
.cosum-lines .bitem .bp b{font-size:.98rem}
.cosum-lines .bitem .bp small:not(.bu){display:none}
.cosum-lines .bitem .bt{flex-direction:column;gap:4px}
.cosum-lines .bitem .bp{text-align:left}
@media (max-width:980px){.coaside{position:static}}

/* ---------- objednávka: detail, sledování ---------- */
.odhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.odhead .lead{margin-top:6px}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;font-weight:800;font-size:14px;background:var(--fill-2);color:var(--ink)}
.pill--paid{background:#E3F4E8;color:var(--green-t)}
.pill--pending{background:var(--wash-sun);color:#5C3D00}
.pill--cancelled{background:#FDECEC;color:var(--red-t)}
.trform{max-width:640px;margin-top:28px}
.trform .full .btn{min-width:220px}
.trhint{max-width:640px}

@media print{
  .bctl,.coactions,.costeps,.okctas{display:none!important}
  .cogrid{grid-template-columns:1fr}
}

/* chyba pole (.err je v style.css třída stránky 404 — u polí proto .has-err) */
.field.has-err .inp,.field.has-err .sel{border-color:var(--red-t);background:#FFF7F7}

/* volby dopravy a platby na telefonu (QA vizuál P10): cena pod názvem, poznámka a popis přes celou šířku — dlouhá
   cena „price to be confirmed“ / „Preis wird bestätigt“ jinak zúžila název i popis na sloupec ~90 px */
@media (max-width:560px){
  .choice:not(.choice--sm){display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;row-gap:3px}
  .choice:not(.choice--sm) .cb{display:contents}
  .choice:not(.choice--sm) input{grid-column:1;grid-row:1}
  .choice:not(.choice--sm) .cn{grid-column:2;grid-row:1}
  .choice:not(.choice--sm) .cp{grid-column:2;grid-row:2;text-align:left;white-space:normal}
  .choice:not(.choice--sm) .cnote,.choice:not(.choice--sm) .cdesc{grid-column:2}
}