/* Customer layout: order steps, time picker, item cards, summaries, tracking. Uses only tokens from tokens.css. */
/* ---------- Phase 2: customer ordering ---------- */
body.role-customer .bar.cbar{background:var(--white);color:var(--pink);border-bottom:1px solid var(--line)}
.logo small{font-weight:600;color:var(--sub);font-size:12px;margin-inline-start:6px}
.cbody{padding-bottom:40px}
.stepline{font-size:11.5px;font-weight:800;color:var(--sub);text-transform:uppercase;letter-spacing:.4px}
.bars{display:flex;gap:4px;margin:6px 0 12px}
.bars i{flex:1;height:4px;border-radius:2px;background:var(--track)}.bars i.on{background:var(--accent)}
.cats{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.cat{position:relative;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--white)}
.cat input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.cat:has(input:checked){background:var(--accent-bg);border-color:var(--accent)}
.cat .ce{font-size:24px;flex:none}
.cat .ct{display:block;min-width:0}.cat .ct b{display:block;font-size:15px}.cat .ct small{display:block;font-size:12px;color:var(--sub)}
.cat.off{background:var(--greybg);cursor:default;opacity:.75}.cat.off .ct b{color:var(--grey)}
.pick-hint{font-size:12px;color:var(--sub)}
/* time picker */
.timeline{border:1.5px solid var(--line);border-radius:12px;padding:6px 10px;margin:10px 0}
.tl-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.tl-h{width:46px;font-size:12px;color:var(--sub);flex:none;border-inline-end:2px solid var(--line);padding-inline-end:6px}
.slot{flex:1;position:relative;text-align:center}
.slot span,.slot.off{display:block;border-radius:16px;padding:7px 4px;font-size:13px;font-weight:700}
.slot.free span{background:var(--greenbg);color:var(--green-ink);border:1.5px solid var(--green-line);cursor:pointer}
.slot.free input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.slot.free input:checked+span{background:var(--green);color:var(--white);border-color:var(--green)}
.slot.free input:focus-visible+span{outline:3px solid var(--accent-bg);outline-offset:1px}
.slot.off{background:var(--greybg);color:var(--off-ink);text-decoration:line-through}
.legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--sub);margin-bottom:6px}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle}
.lg.free{background:var(--greenbg);border:1px solid var(--green-line)}.lg.off{background:var(--greybg)}.lg.pick{background:var(--green)}
/* item cards */
.itm{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px;background:var(--white)}
.itm .photo{width:64px;height:64px}.itm .photo.ph{font-size:30px}
.itm .im{flex:1;min-width:0;display:block}
.itm .im b{display:block;font-size:15px;overflow-wrap:anywhere}
.itm .im small{display:block;font-size:12px;color:var(--sub);overflow-wrap:anywhere}
.itm .pr{display:block;font-weight:800;color:var(--accent);font-size:14px;margin:2px 0 6px}
.itm.off{background:var(--greybg)}.itm.off .im b{color:var(--grey)}
.na{color:var(--grey)!important}
.itm.card{align-items:center;cursor:pointer}
.itm.card input[type=checkbox],.itm.card input[type=radio]{width:22px;height:22px;accent-color:var(--accent);flex:none}
.free-tag{background:var(--green);color:var(--white);font-size:11px;font-weight:800;border-radius:10px;padding:3px 9px;white-space:nowrap}
.qty{display:flex;align-items:center;gap:8px}
.qty .in{width:64px;text-align:center;font-weight:800;font-size:17px;padding:8px 4px}
.qty .step{width:40px;height:40px;font-size:20px}
.caketext{margin-top:8px}
.caketext[hidden]{display:none}
/* order summary */
.sum{border:1.5px solid var(--line);border-radius:14px;padding:2px 12px;margin:10px 0;background:var(--white)}
.sum .sl{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.sum .sl:last-child{border:none}
.sum .sn small{display:block;font-size:12px;color:var(--sub);font-weight:400;overflow-wrap:anywhere}
.sum .sp{font-weight:800;white-space:nowrap;text-align:end}.sum .sp.muted{font-weight:600}
.sum .big{font-size:16px}
.chg{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none}
.muted{color:var(--sub)}
/* contact chips */
.methods{display:flex;gap:8px;margin:4px 0 8px}
.cm{flex:1;position:relative}
.cm input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cm span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:62px;border:1.5px solid var(--line);border-radius:12px;padding:6px 4px;font-size:13px;font-weight:700;background:var(--white);color:var(--ink);text-align:center}
.cm span i{font-style:normal;font-size:18px}
.cm span small{font-size:10.5px;color:var(--green);font-weight:800}
.cm input:checked+span{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink)}
.cm input:focus-visible+span{outline:3px solid var(--accent-bg);outline-offset:1px}
.kinds{display:flex;gap:8px;margin:6px 0 4px}
.kind{flex:1;position:relative}
.kind input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.kind span{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid var(--line);border-radius:14px;padding:14px 6px;font-weight:800;font-size:14px;text-align:center;background:var(--white)}
.kind span i{font-style:normal;font-size:26px}
.kind input:checked+span{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink)}
.kind input:focus-visible+span{outline:3px solid var(--accent-bg);outline-offset:1px}
.trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
/* kinds (two delivery types) */
.kind span small{font-weight:500;font-size:11.5px;color:var(--sub);line-height:1.3}
/* ---- order tracking and payment ---- */
.steps{list-style:none;margin:12px 0 14px;padding:0}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:7px 0;position:relative;color:var(--sub)}
.steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:13px;top:34px;bottom:-6px;width:2px;background:var(--track)}
.steps li.done:not(:last-child)::after{background:var(--green)}
.steps .dot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--track);color:var(--sub);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.steps li.done .dot{background:var(--green);color:var(--white)}
.steps li.now .dot{background:var(--accent);color:var(--white)}
.steps li.now b,.steps li.done b{color:var(--ink)}
.steps .stp b{display:block;font-size:15px}
.steps .stp small{display:block;font-size:12.5px;min-height:1em}
.paycard{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer;background:var(--white)}
.paycard input{width:22px;height:22px;accent-color:var(--accent);flex:none;margin-top:2px}
.paycard:has(input:checked){background:var(--accent-bg);border-color:var(--accent)}
.pc-body{display:block;min-width:0}
.pc-body b{display:block;font-size:15px}
.pc-body small{display:block;font-size:12px;color:var(--sub)}
.pc-det{display:block;font-size:14px;overflow-wrap:anywhere;margin-top:3px}
.countdown{font-family:var(--font-mono);font-size:15px;margin-inline-start:6px}

/* Phase 4: when / where choices in a column, "It's me", hotel search */
.kinds.col{flex-direction:column}
.kinds.col .kind span{flex-direction:row;justify-content:flex-start;text-align:start;gap:12px;padding:12px 14px}
.kinds.col .kind span i{font-size:24px}
.kinds.col .kind span small{display:block;margin-inline-start:auto;text-align:end;max-width:55%}
.itsme{border:1.5px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:6px 0 10px;background:var(--white)}
.findrow .btn{margin-top:0}
.found p{margin:4px 0}
.found-list{margin:6px 0 0;padding-inline-start:18px}

/* Payment details per way (23/10/2026): all shown without JS; with a choice only the chosen one */
.paydet{border:1.5px solid var(--accent);border-radius:var(--radius);padding:12px;margin:4px 0 10px;background:var(--white)}
.pd-head{font-weight:700;margin-bottom:6px}
.pd-line{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line)}
.pd-line:first-of-type{border-top:0}
.pd-text{min-width:0;overflow-wrap:anywhere;font-size:15px}
.copybtn{flex:none;min-height:40px;padding:6px 14px;border:1.5px solid var(--accent);border-radius:var(--radius);background:var(--white);color:var(--accent);font:inherit;font-size:14px;cursor:pointer}
.copybtn.done{background:var(--accent-bg)}
.qrbig{display:block;width:min(100%,300px);margin:4px auto 6px}
.qrbig img{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.paydet + small,.paydet .hint{display:block;text-align:center}
[data-payform]:has(.paypick input:checked) .paydet{display:none}
[data-payform]:has(.paypick input[value=paypal]:checked) .paydet[data-paydet=paypal],
[data-payform]:has(.paypick input[value=wise]:checked) .paydet[data-paydet=wise],
[data-payform]:has(.paypick input[value=thai_qr]:checked) .paydet[data-paydet=thai_qr],
[data-payform]:has(.paypick input[value=crypto]:checked) .paydet[data-paydet=crypto],
[data-payform]:has(.paypick input[value=ru_bank]:checked) .paydet[data-paydet=ru_bank]{display:block}
[data-payform].js-pay .paydet{display:none}
[data-payform].js-pay .paydet.on{display:block}

/* required mark (23/10/2026) */
.req{color:var(--red);font-weight:700}

/* One-of-N choices in the order flow: plain radio buttons in a vertical list (Anton and Irina, 23/10/2026) */
.rlist{display:block;margin:6px 0 8px}
.ropt{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;margin:0 0 8px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--white);cursor:pointer}
.ropt input[type=radio]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--accent);cursor:pointer}
.ropt .rt{display:block;flex:1;min-width:0}
.ropt .rt b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.ropt .rt small{display:block;font-size:12.5px;color:var(--sub);line-height:1.35;margin-top:2px}
.ropt .rt small.good{color:var(--green-ink);font-weight:700}
.ropt .rp{flex:none;font-weight:700;font-size:14px}
.ropt:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.ropt:has(input:checked) .rt b{color:var(--accent-ink)}
.ropt:has(input:focus-visible){outline:3px solid var(--accent-bg);outline-offset:1px}
.ropt.off{background:var(--greybg);color:var(--off-ink);cursor:default}
.ropt.off .rt b{text-decoration:line-through}
.ropt.off input[type=radio]{cursor:default}