/* WhatsApp order confirmations (2026-11-08, part 7). Uses the Skinpop tokens from skinpop-ui.css. */
.od-chip.wa{display:inline-flex;align-items:center;gap:4px}
.od-chip.wa svg{width:12px;height:12px;flex:none}
.od-chip.ok{background:var(--sp-ok-soft,#E3F3E9);color:var(--sp-ok-ink,#1F7A45)}
.od-chip.warn{background:var(--sp-butter-soft,#FFF1C2);color:var(--sp-butter-ink,#7a5600)}
.od-chip.bad{background:color-mix(in srgb,var(--sp-red) 12%,#fff);color:var(--sp-red)}
.od-chip.muted{opacity:.75}
.wa-box{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px;border-radius:14px;background:var(--sp-sky-soft,#E6F1FC);color:var(--sp-ink)}
.wa-box>svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--sp-sky-ink,#1d4f80)}
.wa-box>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wa-box b{font:600 14px/1.3 var(--sp-body)}
.wa-box span{font:500 12.5px/1.4 var(--sp-body);color:var(--sp-muted)}
.wa-box.ok{background:var(--sp-ok-soft,#E3F3E9)}.wa-box.ok>svg{color:var(--sp-ok-ink,#1F7A45)}
.wa-box.warn{background:var(--sp-butter-soft,#FFF1C2)}.wa-box.warn>svg{color:var(--sp-butter-ink,#7a5600)}
.wa-box.bad{background:color-mix(in srgb,var(--sp-red) 9%,#fff)}.wa-box.bad>svg{color:var(--sp-red)}
.wa-box .mn-btn{flex:none;align-self:center}
.wa-pane>#orders-slot{display:none}
.wa-wrap{display:flex;flex-direction:column;gap:10px;max-width:760px}
.wa-banner{padding:10px 12px;border-radius:12px;background:var(--sp-cream,#FFF6EE);border:1px solid var(--sp-line,#eadfd6);font:500 13px/1.4 var(--sp-body);color:var(--sp-ink)}
.wa-banner.warn{background:var(--sp-butter-soft,#FFF1C2);border-color:transparent}
.wa-filters{display:flex;flex-wrap:wrap;gap:6px}
.wa-filters button{border:1px solid var(--sp-line,#eadfd6);background:#fff;color:var(--sp-ink);border-radius:999px;padding:7px 12px;font:600 13px/1 var(--sp-body);cursor:pointer}
.wa-filters button[aria-pressed="true"]{background:var(--sp-ink);border-color:var(--sp-ink);color:#fff}
.wa-list{display:flex;flex-direction:column;border:1px solid var(--sp-line,#eadfd6);border-radius:14px;background:#fff;overflow:hidden}
.wa-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--sp-line,#eadfd6);min-width:0}
.wa-row:first-child{border-top:0}
.wa-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0;text-align:left;color:var(--sp-ink);font:inherit;cursor:pointer}
.wa-open b{font:600 14px/1.3 var(--sp-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-open span{font:500 12px/1.3 var(--sp-body);color:var(--sp-muted)}
.wa-open:hover b{color:var(--sp-red)}
.wa-open:focus-visible{outline:2px solid var(--sp-red);outline-offset:3px;border-radius:6px}
.wa-row .od-chip{flex:none}
.wa-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.wa-mode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border-radius:14px;border:1.5px solid var(--sp-line,#eadfd6);background:#fff;color:var(--sp-ink);text-align:left;font:inherit;cursor:pointer;min-width:0}
.wa-mode b{font:700 15px/1.2 var(--sp-body)}
.wa-mode small{font:500 12px/1.3 var(--sp-body);color:var(--sp-muted)}
.wa-mode[aria-pressed="true"]{border-color:var(--sp-red);background:color-mix(in srgb,var(--sp-red) 5%,#fff)}
.wa-mode[aria-pressed="true"] b{color:var(--sp-red)}
.wa-mode:focus-visible{outline:2px solid var(--sp-red);outline-offset:2px}
.wa-input{width:min(260px,100%);min-width:0;padding:9px 11px;border:1px solid var(--sp-line,#eadfd6);border-radius:10px;font:500 14px/1.2 var(--sp-body);color:var(--sp-ink);background:#fff}
.wa-input:focus{outline:2px solid var(--sp-red);outline-offset:1px}
.wa-adv summary{cursor:pointer;padding:14px 16px;font:600 14px/1.3 var(--sp-body)}
.wa-adv .rp-small{padding:0 16px 14px;margin:0}
.wa-actions{display:flex;justify-content:flex-end;margin-top:6px}
@media (max-width:560px){.wa-modes{grid-template-columns:minmax(0,1fr)}.wa-card .st-row:not(.col){flex-wrap:wrap}.wa-input{width:100%}}
/* Part 8: templates, video and guide */
.wa-top{display:flex;justify-content:flex-end;margin-bottom:10px}
.wa-top .mn-btn{display:inline-flex;align-items:center;gap:6px}
.wa-top svg{width:16px;height:16px}
.wa-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px;align-items:start}
.wa-slots .st-card{margin:0}
.wa-slot .st-row.col{gap:10px}
.wa-slot-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.wa-slot-head b{font:700 15px/1.2 var(--sp-body)}
.wa-err{display:block;color:var(--sp-red);font:500 12.5px/1.4 var(--sp-body)}
.wa-field{display:flex;flex-direction:column;gap:5px;width:100%;min-width:0}
.wa-field>span,.wa-label{font:600 12px/1.2 var(--sp-body);color:var(--sp-muted);letter-spacing:.02em}
.wa-field select,.wa-field input,.wa-field textarea{width:100%;min-width:0;box-sizing:border-box;padding:9px 11px;border:1px solid var(--sp-line,#eadfd6);border-radius:10px;font:500 14px/1.4 var(--sp-body);color:var(--sp-ink);background:#fff}
.wa-field textarea{resize:vertical;min-height:150px}
.wa-field select:focus,.wa-field input:focus,.wa-field textarea:focus{outline:2px solid var(--sp-red);outline-offset:1px}
.wa-bubble{white-space:pre-wrap;overflow-wrap:anywhere;background:#E7F6E1;color:#1d2b1a;border-radius:4px 14px 14px 14px;padding:10px 12px;font:500 13.5px/1.45 var(--sp-body);max-height:260px;overflow:auto;width:100%;box-sizing:border-box}
.wa-bubble mark{background:color-mix(in srgb,var(--sp-butter,#FFD45C) 55%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.wa-btns{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.wa-btns span{flex:1 1 auto;text-align:center;padding:7px 10px;border-radius:10px;background:#fff;border:1px solid var(--sp-line,#eadfd6);color:#1f7a8c;font:600 13px/1.2 var(--sp-body)}
.wa-row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wa-video{display:flex;flex-direction:column;gap:8px;width:100%;padding-top:10px;border-top:1px solid var(--sp-line,#eadfd6)}
.wa-video video{width:100%;max-width:320px;aspect-ratio:16/9;border-radius:12px;background:#000}
.wa-upload{position:relative;overflow:hidden;cursor:pointer}
.wa-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.wa-upload:focus-within{outline:2px solid var(--sp-red);outline-offset:2px}
.wa-note{margin:12px 2px}
.wa-note a{color:var(--sp-red)}
.wa-actions{gap:10px;align-items:center}
.wa-sheet-card{display:flex;flex-direction:column;gap:12px}
.wa-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wa-guide{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font:500 14px/1.5 var(--sp-body);color:var(--sp-ink)}
.wa-guide ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.wa-ed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wa-ed-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.wa-listtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wa-listtop .mn-link{background:none;border:0;color:var(--sp-red);font:600 13px/1 var(--sp-body);cursor:pointer;padding:6px 0}
@media (max-width:560px){.wa-ed-grid,.wa-ed-grid.three{grid-template-columns:minmax(0,1fr)}}
/* One column width for the whole WhatsApp tab; template cards side by side only when there is room */
#st .wa-top,#st .wa-slots,#st .wa-note,#st .wa-actions{max-width:760px}
#st .wa-slots .st-card{max-width:none}
#st .wa-top{margin:-4px 0 10px}
.wa-sheet-card .wa-field textarea{min-height:120px}