/* promos.css — Promotions page and its three-step drawer.
 *
 * Reuses crm.css for the drawer shell (.crm-drawer-wrap, .crm-drawer, the
 * scrim, .crm-primary / .crm-ghost, .crm-tabbar, .crm-pager) so a promotion
 * drawer and a smart-list drawer slide the same way and close the same way.
 * Only what is specific to promotions lives here.
 */

/* ---- list -------------------------------------------------------------- */
.pr-table{width:100%;border-collapse:collapse;font-size:13px}
.pr-table th{text-align:left;font-weight:600;color:var(--nt-ink-2);font-size:11.5px;
 text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;
 border-bottom:1px solid var(--nt-line);white-space:nowrap}
.pr-table th.r,.pr-table td.r{text-align:right}
.pr-table td{border-bottom:1px solid var(--nt-line);vertical-align:top}
.pr-table tr:hover td{background:var(--nt-raised)}

.pr-name{font-weight:600;color:var(--nt-ink)}
.pr-sub{display:flex;gap:6px;align-items:center;margin-top:3px}
.pr-ver{font-size:11px;color:var(--nt-ink-2)}
.pr-code{background:var(--nt-surface);border-radius:5px;padding:2px 7px;font-size:12px;
 letter-spacing:.06em}

.pr-act{white-space:nowrap;text-align:right}
.pr-mini{border:1px solid var(--nt-line);background:var(--nt-surface);border-radius:7px;
 padding:5px 10px;font-size:12px;color:var(--nt-ink);cursor:pointer;margin-left:5px}
.pr-mini:hover{background:var(--nt-surface)}
.pr-mini.danger{color:var(--nt-failed-text);border-color:var(--nt-line)}
.pr-mini.danger:hover{background:var(--nt-surface)}

.pr-count{background:rgba(0,0,0,.08);border-radius:999px;padding:0 7px;
 font-size:11px;min-width:18px;text-align:center}
.crm-tabchip.on .pr-count{background:color-mix(in oklab, var(--nt-action) 18%, var(--nt-surface))}
.pr-new{margin-left:auto}

/* ---- the drawer, three steps ------------------------------------------- */
.pr-rail{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.pr-dotwrap{display:flex;align-items:center;gap:7px}
.pr-dot{width:24px;height:24px;border-radius:50%;background:var(--nt-bg);color:var(--nt-ink-2);
 display:flex;align-items:center;justify-content:center;font-size:12px;
 font-weight:700;flex:0 0 auto}
.pr-dot.on{background:var(--nt-action);color:#fff}
.pr-dot.done{background:color-mix(in oklab, var(--nt-paid) 12%, var(--nt-surface));color:var(--nt-paid-text)}
.pr-dot.go{cursor:pointer}
.pr-dot.go:hover{background:var(--nt-bg)}
.pr-dotlabel{font-size:12px;color:var(--nt-ink-2)}
.pr-dot.on + .pr-dotlabel{color:var(--nt-ink);font-weight:600}
.pr-bar{flex:1;height:2px;background:var(--nt-bg);min-width:14px}

.pr-step{font-size:12.5px;color:var(--nt-ink-2);margin-bottom:14px}

.pr-f{margin-bottom:15px}
.pr-l{display:block;font-size:12px;color:var(--nt-ink-2);margin-bottom:5px}
.pr-in{width:100%;border:1px solid var(--nt-line);border-radius:8px;padding:9px 11px;
 font-size:13.5px;color:var(--nt-ink);background:var(--nt-surface);font-family:inherit}
.pr-in:focus{outline:none;border-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface));box-shadow:0 0 0 3px color-mix(in oklab, var(--nt-action) 9%, transparent)}
.pr-hint{font-size:11.5px;color:var(--nt-ink-2);margin-top:5px}
.pr-row{display:flex;align-items:center;gap:9px}
.pr-row .pr-in{flex:1}
.pr-to{font-size:12.5px;color:var(--nt-ink-2)}

.pr-chips{display:flex;gap:6px;flex-wrap:wrap}
.pr-chip{border:1px solid var(--nt-line);border-radius:999px;padding:6px 13px;
 font-size:12.5px;background:var(--nt-surface);color:var(--nt-ink);cursor:pointer}
.pr-chip:hover{background:var(--nt-surface)}
.pr-chip.on{background:var(--nt-ground);border-color:var(--nt-line);color:#fff}
/* Not "unselected" — this restaurant cannot honour this kind of offer on this
   channel yet. Struck through so it reads as unavailable rather than unchosen. */
.pr-chip.off{opacity:.45;cursor:not-allowed;text-decoration:line-through;
 background:var(--nt-surface)}
.pr-chip.off:hover{background:var(--nt-surface);border-color:var(--nt-line)}
.pr-more{border:none;background:transparent;color:var(--nt-action-text);font-size:12px;
 cursor:pointer;padding:7px 0 0;display:block}

.pr-adv{border:1px solid var(--nt-line);border-radius:9px;margin-top:6px}
.pr-adv summary{padding:11px 13px;font-size:12.5px;font-weight:600;
 cursor:pointer;color:var(--nt-ink);list-style:none}
.pr-adv summary::-webkit-details-marker{display:none}
.pr-adv summary::before{content:'＋ ';color:var(--nt-ink-2)}
.pr-adv[open] summary::before{content:'－ '}
.pr-advb{padding:2px 13px 12px;border-top:1px solid var(--nt-line)}

/* ---- step 3: the restatement ------------------------------------------- */
.pr-sim{background:var(--nt-surface);border:1px solid var(--nt-line);border-radius:10px;
 padding:15px 16px}
.pr-sim-h{font-size:14.5px;font-weight:600;color:var(--nt-ink)}
.pr-sim-e{font-size:13.5px;color:var(--nt-paid-text);margin-top:8px;line-height:1.5}
.pr-sim-s{font-size:12.5px;color:var(--nt-ink);margin-top:10px}

.pr-warn{background:var(--nt-surface);border:1px solid var(--nt-line);border-radius:9px;
 padding:11px 13px;font-size:12.5px;color:var(--nt-ink-2);margin-top:9px}
.pr-warn::before{content:'⚠ '}

.pr-errs{background:var(--nt-surface);border:1px solid var(--nt-line);border-radius:10px;
 padding:13px 15px}
.pr-errs-h{font-size:13.5px;font-weight:600;color:var(--nt-failed-text);margin-bottom:9px}
.pr-err{display:flex;align-items:center;justify-content:space-between;gap:12px;
 font-size:12.5px;color:var(--nt-ink);padding:5px 0}

.pr-note{font-size:11.5px;color:var(--nt-ink-2);margin-top:12px;line-height:1.5}

/* ---- the sixteen types ------------------------------------------------- */
.pr-h{font-size:12px;text-transform:uppercase;letter-spacing:.04em;
 color:var(--nt-ink-2);margin:16px 0 9px;font-weight:600}
.pr-h:first-child{margin-top:0}
.pr-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
 gap:9px}
.pr-card{border:1px solid var(--nt-line);border-radius:10px;padding:12px 13px;
 background:var(--nt-surface);text-align:left;cursor:pointer;font-family:inherit}
.pr-card:hover{border-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface));background:var(--nt-surface)}
.pr-card-t{font-size:13px;font-weight:600;color:var(--nt-ink)}
.pr-card-b{font-size:11.5px;color:var(--nt-ink-2);margin-top:4px;line-height:1.4}
.pr-card-s{font-size:10.5px;color:var(--nt-ink-2);margin-top:7px;text-transform:uppercase;
 letter-spacing:.04em}
.pr-card.soon{opacity:.55;cursor:default;background:var(--nt-surface)}
.pr-card.soon:hover{border-color:var(--nt-line);background:var(--nt-surface)}

/* ---- the item picker ---------------------------------------------------- */
/* Picked things sit ABOVE the search, because what you have chosen is the
   answer and the search is the tool. An owner scanning a half-built bundle
   should not have to look past 40 results to find the two items in it. */
.pr-pick{border:1px solid var(--nt-line);border-radius:9px;padding:10px}
.pr-picked{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.pr-picked-i{display:flex;align-items:center;gap:5px;background:var(--nt-ground);
 color:#fff;border-radius:999px;padding:4px 5px 4px 11px;font-size:12px}
.pr-picked-i .pr-qty{width:42px;border:none;border-radius:5px;padding:2px 4px;
 font:inherit;font-size:12px;text-align:center;background:rgba(255,255,255,.16);
 color:#fff;-moz-appearance:textfield}
.pr-picked-i .pr-qty:focus{outline:2px solid var(--nt-line);outline-offset:-2px}
.pr-times{opacity:.6}
.pr-x{border:none;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;
 width:18px;height:18px;border-radius:50%;line-height:1;font-size:13px;
 font-family:inherit;padding:0}
.pr-x:hover{background:rgba(255,255,255,.34)}
/* A bundle's parts. Boxed rather than run together, because "2 kebabs AND 2
   drinks" and "any 4 items" are different offers and the difference has to be
   visible before the owner saves. */
.pr-part{border:1px solid var(--nt-line);border-radius:8px;padding:8px 9px;
 margin-bottom:7px;background:var(--nt-surface)}
.pr-part.on{border-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface));background:var(--nt-surface)}
.pr-part-h{display:flex;align-items:center;justify-content:space-between;
 gap:8px;font-size:12px;font-weight:600;color:var(--nt-ink-2);margin-bottom:6px}
/* Per-item percentage — narrower than the quantity box and never confusable
   with it, since one multiplies and the other discounts. */
.pr-picked-i .pr-pct{width:46px}

.pr-results{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
 max-height:190px;overflow-y:auto}
.pr-res{border:1px solid var(--nt-line);background:var(--nt-surface);border-radius:999px;
 padding:5px 11px;font-size:12px;font-family:inherit;cursor:pointer;
 color:var(--nt-ink)}
.pr-res:hover{border-color:color-mix(in oklab, var(--nt-action) 45%, var(--nt-surface));background:var(--nt-surface)}
/* A whole category is a bigger commitment than one item — 30% off "All
   desserts" and 30% off one cake look identical in a flat list, and the owner
   only finds out which they picked when the takings arrive. */
.pr-res.cat{border-style:dashed;font-weight:600;color:var(--nt-ink)}

/* The drawer footer holds up to three buttons here, not the CRM's fixed
   Close/Save pair, so the actions live in their own flex box. */
#pr-drawer-actions{display:flex;gap:9px;align-items:center}