/* "Free extras" dialog (shared/business-extras.js). Same look as assessment/'s extras list (.xs/.xo/.tick),
 * with its own tokens so it reads the same on any host page. Everything is scoped under .bx. */
.bx{
  --bx-ink:#10224f; --bx-text:#1c2a4d; --bx-muted:#5b6b8c; --bx-bg:#f4f8fd; --bx-card:#fff; --bx-line:#e2e8f4;
  --bx-primary:#2f6fed; --bx-primary-h:#2358c8; --bx-primary-soft:#e7efff; --bx-good:#1f8a4c; --bx-good-soft:#e5f5ec; --bx-warn:#a86b00;
  --bx-shadow:0 2px 4px rgba(16,34,79,.06),0 30px 80px rgba(16,34,79,.22);
}
@media (prefers-color-scheme:dark){.bx{
  --bx-ink:#eef2fb; --bx-text:#d9e1f2; --bx-muted:#a2aecb; --bx-bg:#0b1226; --bx-card:#131b36; --bx-line:#253154;
  --bx-primary:#4a7ff0; --bx-primary-h:#6b97f5; --bx-primary-soft:#1a2a55; --bx-good:#4cc38a; --bx-good-soft:#123326; --bx-warn:#e0a94a;
  --bx-shadow:0 30px 80px rgba(0,0,0,.6);
}}
dialog.bx{width:calc(100% - 32px);max-width:560px;max-height:calc(100dvh - 32px);overflow:auto;padding:24px 22px 20px;border:0;border-radius:22px;
  background:var(--bx-card);color:var(--bx-text);box-shadow:var(--bx-shadow);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  animation:bx-pop .35s cubic-bezier(.2,.9,.3,1.2)}
dialog.bx::backdrop{background:rgba(8,14,34,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@keyframes bx-pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.bx *{box-sizing:border-box}
.bx button,.bx input{font:inherit;color:inherit}
.bx button{cursor:pointer}
.bx [hidden]{display:none!important}
.bx :focus-visible{outline:3px solid var(--bx-primary);outline-offset:2px;border-radius:8px}
.bx-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--bx-muted);font-size:22px;line-height:1}
.bx-x:hover{background:var(--bx-bg)}
.bx h2{margin:0 0 4px;padding:0 28px;color:var(--bx-ink);font-size:1.3rem;letter-spacing:-.02em;line-height:1.2;text-align:center}
.bx-sub{margin:0 0 4px;font-size:14px;color:var(--bx-muted);text-align:center}

.bx-sep{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--bx-muted);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.bx-sep::before,.bx-sep::after{content:"";flex:1;height:1px;background:var(--bx-line)}
.bx-hint{font-size:13.5px;color:var(--bx-muted);text-align:center;margin:-4px 0 12px}
.bx .xs{display:grid;gap:10px;text-align:left}
.bx .xo{border:1.5px solid var(--bx-line);border-radius:15px;background:var(--bx-card);transition:border-color .15s,background .15s}
.bx .xo.on{border-color:var(--bx-primary);background:var(--bx-primary-soft)}
.bx .xo-h{display:flex;gap:12px;align-items:center;padding:13px 14px;width:100%;background:none;border:0;text-align:left}
.bx .xo-h .e{font-size:24px;flex:none}
.bx .xo-h b{display:block;color:var(--bx-ink);font-size:15px;line-height:1.25}
.bx .xo-h span{display:block;font-size:12.5px;color:var(--bx-muted);line-height:1.35}
.bx .tick{margin-left:auto;width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--bx-primary);display:grid;place-items:center;color:transparent;font-weight:900;font-size:14px;background:var(--bx-card)}
.bx .xo-h .tick{display:grid;color:transparent}
.bx .xo.on .xo-h .tick{background:var(--bx-primary);border-color:var(--bx-primary);color:#fff}
.bx .free{display:inline-block;font-size:10.5px;font-weight:850;letter-spacing:.06em;color:var(--bx-good);background:var(--bx-good-soft);padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px;line-height:1.5}
.bx .xo-h b .free{display:inline-block;color:var(--bx-good);font-size:10.5px;line-height:1.5}
.bx .xo-b{display:none;padding:0 14px 14px}
.bx .xo.on .xo-b{display:block}
.bx .xo-b label{font-size:13px;font-weight:700;color:var(--bx-ink);display:block;margin:4px 0 5px}
.bx .xo-b input{width:100%;padding:10px 12px;font-size:15px;border:1.5px solid var(--bx-line);border-radius:12px;background:var(--bx-card)}
.bx .xo-b p{margin:0;font-size:13px;color:var(--bx-muted)}
/* an extra that is already done on this page (e.g. the ad just posted): ticked, not clickable */
.bx .xo.done{border-color:var(--bx-good);background:var(--bx-good-soft)}
.bx .xo.done .xo-h{cursor:default}
.bx .xo.done .tick{background:var(--bx-good);border-color:var(--bx-good);color:#fff}
@keyframes bx-nudge{0%,100%{transform:scale(1)}45%{transform:scale(1.4);box-shadow:0 0 0 7px var(--bx-primary-soft)}}
.bx .xs.attn .xo:not(.on):not(.done) .tick{animation:bx-nudge .75s ease-in-out 3 both;animation-delay:calc(var(--i) * .18s)}

.bx-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:4px;padding:14px 20px;border:0;border-radius:14px;
  background:var(--bx-primary);color:#fff!important;font-weight:800;font-size:16px}
.bx-go:hover:not(:disabled){background:var(--bx-primary-h)}
.bx-go:disabled{opacity:.55;cursor:default}
.bx-skip{display:block;margin:10px auto 0;border:0;background:none;color:var(--bx-muted);font-size:13.5px;text-decoration:underline}
.bx-err{background:#fdecee;color:#8c1d26;border-radius:10px;padding:10px 12px;font-size:14px}
@media (prefers-color-scheme:dark){.bx-err{background:#3a1418;color:#ffb3b9}}
.bx-st{display:grid;gap:8px;text-align:left}
.bx-st div{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:10px 12px;border-radius:12px;background:var(--bx-bg);border:1px solid var(--bx-line)}
.bx-st div b{color:var(--bx-ink)}
.bx-st a{color:var(--bx-primary);font-weight:700}
.bx-st .ok{color:var(--bx-good);font-weight:900}
.bx-st .pd{color:var(--bx-warn);font-weight:900}
@media (prefers-reduced-motion:reduce){dialog.bx,.bx *{animation:none!important;transition:none!important}}
@media (max-width:480px){dialog.bx{padding:22px 16px 16px}}