/* advertising (customer app, partner portal, back-office): sponsored offers and the promotion dialog, from the design.
   The ad bar, ad slots, ad cards and the placement picker are in mockup.css. */
.adslot:empty{display:none}
.mine-grid .adslot{margin:0}
.adbar-x:hover{background:var(--surface2)}
.adcard .plogo{border-radius:12px}
.offer.spons{position:relative;border-width:2px;cursor:pointer}
.offer.sp-gold{border-color:#d4a531;background:linear-gradient(160deg,color-mix(in srgb,#E2B13C 16%,var(--surface)),var(--surface) 60%)}
.offer.sp-teal{border-color:var(--teal);background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 14%,var(--surface)),var(--surface) 60%)}
.offer.sp-coral{border-color:#E8735A;background:linear-gradient(160deg,color-mix(in srgb,#E8735A 14%,var(--surface)),var(--surface) 60%)}
.offer.sp-gold .pct{background:linear-gradient(135deg,#d4a531,#8a6400)}.offer.sp-teal .pct{background:var(--teal)}.offer.sp-coral .pct{background:#D9573E}
.sp-ribbon{position:absolute;top:12px;inset-inline-end:-6px;font-size:11.5px;font-weight:800;padding:3px 12px;border-radius:6px;color:#fff;background:#d4a531;box-shadow:0 4px 10px -4px rgba(0,0,0,.3);z-index:1}
.offer.sp-teal .sp-ribbon{background:var(--teal)}.offer.sp-coral .sp-ribbon{background:#D9573E}
.spdlg .sp-opt,.sp-slot{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer}
.sp-opt:has(input:checked),.sp-slot:has(input:checked){border-color:var(--teal);background:var(--surface2)}
.sp-slot{grid-template-columns:auto auto 1fr auto}.sp-slot.full{opacity:.5;cursor:default}
.sp-opt small,.sp-slot small{display:block;color:var(--muted);font-size:12.5px}.sp-slot .adsl-ic svg{width:28px;height:28px}
.sp-pr{font-weight:700;color:#8A6400;font-size:13px;white-space:nowrap}
.sp-slots{display:grid;gap:8px}
.sp-themes{display:flex;gap:8px;margin-top:10px}
.sp-th{border:2px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:600;font-size:13px;color:#fff}
.sp-th.gold{background:#d4a531}.sp-th.teal{background:var(--teal)}.sp-th.coral{background:#D9573E}
.sp-th[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
.sp-prev{padding:12px;background:var(--surface2);border-radius:14px}
.spbtn{background:linear-gradient(135deg,#e2b13c,#a8781a);color:#2a1d02}
.it.spit.gold{border-color:#d4a531}.it.spit.teal{border-color:var(--teal)}.it.spit.coral{border-color:#D9573E}
.sp-on{color:#8A6400!important;font-weight:600;margin-top:2px}
:root[data-theme="dark"] .sp-on,:root[data-theme="dark"] .sp-pr,:root[data-theme="dark"] .adsl-p{color:#E2B13C!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-on,:root:not([data-theme="light"]) .sp-pr,:root:not([data-theme="light"]) .adsl-p{color:#E2B13C!important}}
@media (max-width:860px){.ad2{grid-template-columns:1fr}}