/**
 * Spin & Win — offer wheel for the inline checkout.
 *
 * Layout: a centered popup card on every screen size — two columns on desktop
 * (wheel left, copy and form right), the same columns stacked on mobile, always
 * with real breathing room between the card and the screen edge. The wheel is
 * still sized against the actual leftover height so the spin button is never
 * pushed below the fold on a short phone. Everything is driven by tokens on
 * .wpc-spin-modal; a preset class swaps the token block and the widget's
 * colour controls then override it inline.
 */

/* =========================================================
   TOKENS — Clean Light is the base every preset starts from
   ========================================================= */

.wpc-spin-modal {
    --sp-accent: #6d28d9;
    --sp-accent-soft: rgba(109, 40, 217, 0.10);
    --sp-btn-bg: #6d28d9;
    --sp-btn-color: #ffffff;

    --sp-surface: #ffffff;
    --sp-surface-2: #f5f6fa;
    --sp-side: #f2f3f9;
    --sp-side-2: #e9ebf4;
    --sp-rim: rgba(15, 23, 42, 0.08);
    --sp-line: rgba(15, 23, 42, 0.10);

    --sp-text: #0f172a;
    --sp-text-muted: #5b667a;
    --sp-text-faint: #94a3b8;

    --sp-ok: #15803d;
    --sp-ok-bg: rgba(22, 163, 74, 0.10);
    --sp-warn: #b45309;
    --sp-warn-bg: rgba(245, 158, 11, 0.13);
    --sp-danger: #b91c1c;
    --sp-danger-bg: rgba(220, 38, 38, 0.10);

    --sp-pin: #ffffff;
    --sp-radius: 26px;
    --sp-shadow:
        0 44px 90px -22px rgba(15, 23, 42, 0.48),
        0 14px 34px -14px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 0 0 1px rgba(15, 23, 42, 0.06);
    --sp-backdrop: rgba(15, 23, 42, 0.6);
}

/* ---- Dark Luxe ---- */
.wpc-spin-modal.wpc-spin-dark {
    --sp-accent: #d9b45a;
    --sp-accent-soft: rgba(217, 180, 90, 0.14);
    --sp-btn-bg: #d9b45a;
    --sp-btn-color: #1a1713;

    --sp-surface: #16151b;
    --sp-surface-2: #201f28;
    --sp-side: #100f14;
    --sp-side-2: #1b1a22;
    --sp-rim: rgba(255, 255, 255, 0.10);
    --sp-line: rgba(255, 255, 255, 0.11);

    --sp-text: #f7f6f4;
    --sp-text-muted: #a5a1ab;
    --sp-text-faint: #74707c;

    --sp-ok: #5ee08a;
    --sp-ok-bg: rgba(94, 224, 138, 0.12);
    --sp-warn: #f5c451;
    --sp-warn-bg: rgba(245, 196, 81, 0.14);
    --sp-danger: #f98080;
    --sp-danger-bg: rgba(249, 128, 128, 0.12);

    --sp-pin: #f7f6f4;
    --sp-shadow:
        0 44px 90px -20px rgba(0, 0, 0, 0.88),
        0 14px 34px -14px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.09);
    --sp-backdrop: rgba(0, 0, 0, 0.76);
}

/* ---- Vivid Gradient ---- */
.wpc-spin-modal.wpc-spin-vivid {
    --sp-accent: #ffffff;
    --sp-accent-soft: rgba(255, 255, 255, 0.16);
    --sp-btn-bg: #ffffff;
    --sp-btn-color: #4c1d95;

    --sp-surface: transparent;
    --sp-surface-2: rgba(255, 255, 255, 0.13);
    --sp-side: rgba(0, 0, 0, 0.14);
    --sp-side-2: rgba(0, 0, 0, 0.08);
    --sp-rim: rgba(255, 255, 255, 0.26);
    --sp-line: rgba(255, 255, 255, 0.20);

    --sp-text: #ffffff;
    --sp-text-muted: rgba(255, 255, 255, 0.84);
    --sp-text-faint: rgba(255, 255, 255, 0.64);

    --sp-ok: #ffffff;
    --sp-ok-bg: rgba(21, 128, 61, 0.62);
    --sp-warn: #ffffff;
    --sp-warn-bg: rgba(180, 83, 9, 0.62);
    --sp-danger: #ffffff;
    --sp-danger-bg: rgba(190, 18, 60, 0.62);

    --sp-shadow:
        0 46px 100px -16px rgba(76, 29, 149, 0.68),
        0 16px 38px -14px rgba(76, 29, 149, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.16);
    --sp-backdrop: rgba(14, 9, 36, 0.74);
}

.wpc-spin-modal.wpc-spin-vivid .wpc-spin-dialog {
    background:
        radial-gradient(130% 90% at 20% -10%, rgba(255, 255, 255, 0.24), transparent 58%),
        linear-gradient(140deg, var(--sp-grad-1, #7c3aed), var(--sp-grad-2, #ec4899));
}

.wpc-spin-modal.wpc-spin-vivid .wpc-spin-side {
    background: var(--sp-side);
}

/* On the gradient card the accent must stay white, even when the merchant's
   own accent colour is set inline — otherwise these read as low contrast. */
.wpc-spin-modal.wpc-spin-vivid .wpc-spin-eyebrow,
.wpc-spin-modal.wpc-spin-vivid .wpc-spin-badge,
.wpc-spin-modal.wpc-spin-vivid .wpc-spin-phone.is-focus label,
.wpc-spin-modal.wpc-spin-vivid .wpc-spin-phone.has-value label {
    color: #ffffff;
}

.wpc-spin-modal.wpc-spin-vivid .wpc-spin-eyebrow,
.wpc-spin-modal.wpc-spin-vivid .wpc-spin-badge {
    background: rgba(255, 255, 255, 0.17);
}

.wpc-spin-modal.wpc-spin-vivid .wpc-spin-timer-fill {
    background: #ffffff;
}

.wpc-spin-modal.wpc-spin-vivid .wpc-spin-dialog::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 35%, rgba(255, 255, 255, 0.9) 65%, transparent);
}

/* ---- Minimal ---- */
.wpc-spin-modal.wpc-spin-minimal {
    --sp-accent: #111827;
    --sp-accent-soft: rgba(17, 24, 39, 0.06);
    --sp-btn-bg: #111827;
    --sp-btn-color: #ffffff;

    --sp-surface: #ffffff;
    --sp-surface-2: #fafafa;
    --sp-side: #fafafa;
    --sp-side-2: #f4f4f5;
    --sp-rim: rgba(17, 24, 39, 0.10);
    --sp-line: rgba(17, 24, 39, 0.09);

    --sp-radius: 6px;
    --sp-shadow:
        0 38px 80px -22px rgba(0, 0, 0, 0.4),
        0 12px 28px -14px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 0 0 1px rgba(17, 24, 39, 0.09);
    --sp-backdrop: rgba(17, 24, 39, 0.48);
}

/* =========================================================
   SHELL
   ========================================================= */

.wpc-spin-modal {
    position: fixed !important;
    inset: 0;
    z-index: 999990;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

.wpc-spin-modal.is-open {
    display: flex !important;
}

body.wpc-spin-lock {
    overflow: hidden;
}

.wpc-spin-backdrop {
    position: absolute !important;
    inset: 0;
    background: var(--sp-backdrop);
    backdrop-filter: blur(7px) saturate(115%);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
    animation: wpcSpinFade 0.3s ease both;
}

@keyframes wpcSpinFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wpc-spin-dialog {
    position: relative !important;
    display: flex !important;
    width: 100%;
    max-width: 700px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    color: var(--sp-text);
    background: var(--sp-surface);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    animation: wpcSpinRise 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* A thin accent hairline along the top edge — the one premium "signature"
   flourish shared by every preset, always tied to the merchant's own accent. */
.wpc-spin-dialog::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sp-accent) 35%, var(--sp-accent) 65%, transparent);
    opacity: 0.42;
    pointer-events: none;
}

@keyframes wpcSpinRise {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.wpc-spin-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 8;
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
    color: var(--sp-text-faint);
    background: var(--sp-surface-2);
    box-shadow: inset 0 0 0 1px var(--sp-line);
    transition: color 0.18s, transform 0.18s, background-color 0.18s;
}

.wpc-spin-close:hover {
    color: var(--sp-text);
    background: var(--sp-accent-soft);
    transform: rotate(90deg);
}

.wpc-spin-close svg {
    width: 15px;
    height: 15px;
}

/* =========================================================
   LEFT — the wheel
   ========================================================= */

.wpc-spin-side {
    position: relative;
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 24px;
    background:
        radial-gradient(110% 78% at 50% 6%, var(--sp-accent-soft), transparent 68%),
        radial-gradient(120% 100% at 50% 0%, var(--sp-side-2), var(--sp-side) 70%);
    border-right: 1px solid var(--sp-line);
}

.wpc-spin-wheel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    filter: drop-shadow(0 20px 34px rgba(15, 23, 42, 0.30));
}

/* Ambient glow behind the wheel — reads as a lit stage, not a flat sticker */
.wpc-spin-wheel-wrap::before {
    content: '';
    position: absolute;
    inset: -16%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--sp-accent-soft), transparent 72%);
    pointer-events: none;
}

.wpc-spin-canvas {
    display: block;
    border-radius: 50%;
    width: 100%;
    height: auto;
}

/* Pin points down onto the rim at 12 o'clock */
.wpc-spin-pointer {
    position: absolute !important;
    top: calc(var(--sp-wheel, 300px) * -0.028);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: calc(var(--sp-wheel, 300px) * 0.105);
    min-width: 26px;
    aspect-ratio: 34 / 44;
    transform-origin: 50% 20%;
    filter: drop-shadow(0 4px 7px rgba(15, 23, 42, 0.42));
    pointer-events: none;
}

.wpc-spin-pointer svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wpc-spin-pointer.is-tick {
    animation: wpcSpinTick 0.1s ease-out;
}

@keyframes wpcSpinTick {
    0%   { transform: translateX(-50%) rotate(0deg); }
    45%  { transform: translateX(-50%) rotate(-14deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

/* Text only — the hub disc itself is drawn on the canvas */
.wpc-spin-hub {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sp-wheel, 300px) * 0.23);
    height: calc(var(--sp-wheel, 300px) * 0.23);
    border-radius: 50%;
    pointer-events: none;
}

.wpc-spin-hub span {
    font-size: calc(var(--sp-wheel, 300px) * 0.042);
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    color: #2b2f45;
}

/* =========================================================
   RIGHT — copy, form, result
   ========================================================= */

.wpc-spin-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 30px;
    overflow-y: auto;
    scrollbar-width: none;
}

.wpc-spin-panel::-webkit-scrollbar {
    display: none;
}

.wpc-spin-stage {
    display: flex;
    flex-direction: column;
}

.wpc-spin-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sp-accent);
    background: var(--sp-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sp-rim);
}

.wpc-spin-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: wpcSpinBlink 1.8s ease-in-out infinite;
}

@keyframes wpcSpinBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.wpc-spin-title {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--sp-text);
}

.wpc-spin-sub {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sp-text-muted);
}

.wpc-spin-foot {
    margin-top: auto;
}

/* ---- Phone ---- */

.wpc-spin-phone {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0 0 7px;
    border: 1.5px solid var(--sp-line);
    border-radius: 13px;
    background: var(--sp-surface-2);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.wpc-spin-phone.is-focus {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3.5px var(--sp-accent-soft);
}

.wpc-spin-phone.is-invalid {
    border-color: var(--sp-danger);
    animation: wpcSpinShake 0.34s;
}

@keyframes wpcSpinShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.wpc-spin-phone-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px 0 14px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sp-text-muted);
    border-right: 1px solid var(--sp-line);
}

.wpc-spin-phone-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.wpc-spin-phone input {
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 19px 14px 5px !important;
    font-family: inherit !important;
    font-size: 16px !important;   /* 16px stops iOS zooming on focus */
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sp-text) !important;
    line-height: 1.2 !important;
}

.wpc-spin-phone label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sp-text-faint);
    pointer-events: none;
    transition: transform 0.16s ease, font-size 0.16s ease, color 0.16s ease;
}

.wpc-spin-phone.is-focus label,
.wpc-spin-phone.has-value label {
    transform: translateY(-145%);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sp-accent);
}

.wpc-spin-trust {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 14px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--sp-text-faint);
}

.wpc-spin-err {
    display: none;
    margin: 0 0 12px;
    padding: 9px 13px;
    border-radius: 11px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--sp-danger);
    background: var(--sp-danger-bg);
}

.wpc-spin-err.is-shown {
    display: block;
}

/* ---- Buttons ---- */

/* The modal lands inside whatever theme the merchant runs, and themes style
   bare `button` freely — so the properties that decide whether this still reads
   as a call to action are held down rather than left to win on specificity. */
.wpc-spin-go,
.wpc-spin-claim {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 22px !important;
    height: 54px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sp-btn-color) !important;
    background-color: var(--sp-btn-bg) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.07) 100%);
    box-shadow:
        0 16px 32px -10px rgba(15, 23, 42, 0.55),
        0 4px 12px -4px rgba(15, 23, 42, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.wpc-spin-go:hover:not(:disabled),
.wpc-spin-claim:hover {
    transform: translateY(-1.5px);
    box-shadow:
        0 20px 38px -10px rgba(15, 23, 42, 0.6),
        0 6px 16px -6px rgba(15, 23, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.wpc-spin-go:active:not(:disabled),
.wpc-spin-claim:active {
    transform: translateY(0.5px);
}

.wpc-spin-go:disabled {
    cursor: default;
    opacity: 0.72;
}

.wpc-spin-go.is-busy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.32) 50%, transparent 68%);
    animation: wpcSpinSheen 1.25s linear infinite;
}

@keyframes wpcSpinSheen {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.wpc-spin-go svg,
.wpc-spin-claim svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.wpc-spin-skip {
    display: block;
    width: 100% !important;
    margin: 13px 0 0 !important;
    padding: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    background: none !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-align: center;
    color: var(--sp-text-faint) !important;
    transition: color 0.16s;
}

.wpc-spin-skip:hover {
    color: var(--sp-text-muted);
    text-decoration: underline;
}

/* =========================================================
   RESULT
   ========================================================= */

.wpc-spin-result {
    animation: wpcSpinReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wpcSpinReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.wpc-spin-badge {
    width: 54px;
    height: 54px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--sp-accent);
    background: var(--sp-accent-soft);
    animation: wpcSpinPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wpc-spin-badge svg {
    width: 26px;
    height: 26px;
}

.wpc-spin-badge.is-muted {
    color: var(--sp-text-muted);
    background: var(--sp-surface-2);
}

@keyframes wpcSpinPopIn {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

.wpc-spin-result h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--sp-text-muted);
}

.wpc-spin-hero {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 20px;
    line-height: 1.02;
}

.wpc-spin-hero-value {
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--sp-text);
}

.wpc-spin-hero-unit {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-text-muted);
}

.wpc-spin-hero-single {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sp-text);
}

.wpc-spin-applied {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sp-ok);
    background: var(--sp-ok-bg);
}

.wpc-spin-applied svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.wpc-spin-applied.is-pending { color: var(--sp-warn);   background: var(--sp-warn-bg); }
.wpc-spin-applied.is-working { color: var(--sp-text-muted); background: var(--sp-surface-2); }
.wpc-spin-applied.is-failed  { color: var(--sp-danger); background: var(--sp-danger-bg); }

.wpc-spin-applied-spin {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: wpcSpinRotate 0.7s linear infinite;
}

@keyframes wpcSpinRotate {
    to { transform: rotate(360deg); }
}

/* ---- Countdown ---- */

.wpc-spin-timer {
    margin: 0 0 18px;
}

.wpc-spin-timer-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.wpc-spin-timer-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sp-text-muted);
}

.wpc-spin-clock {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sp-text);
}

.wpc-spin-timer-track {
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sp-surface-2);
    box-shadow: inset 0 0 0 1px var(--sp-line);
}

.wpc-spin-timer-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: var(--sp-accent);
    transition: width 0.95s linear, background-color 0.3s;
}

.wpc-spin-timer.is-urgent .wpc-spin-clock,
.wpc-spin-timer.is-urgent .wpc-spin-timer-label { color: var(--sp-danger); }
.wpc-spin-timer.is-urgent .wpc-spin-timer-fill  { background: var(--sp-danger); }
.wpc-spin-timer.is-over .wpc-spin-timer-fill    { width: 0 !important; }

.wpc-spin-code-note {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--sp-text-faint);
}

.wpc-spin-code-note b {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sp-text-muted);
}

.wpc-spin-repeat-note {
    margin: 15px 0 0;
    padding: 10px 13px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sp-text-muted);
    background: var(--sp-surface-2);
}

.wpc-spin-lose p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sp-text-muted);
}

/* ---- Offer that ran out of time ----
   A closed state, not a greyed-out celebration: no dead countdown, no button
   that cannot work, and the prize shown as a record of what they had. */

.wpc-spin-over h3 {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--sp-text);
}

.wpc-spin-over p {
    margin: 14px 0 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--sp-text-muted);
}

.wpc-spin-past {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-radius: 13px;
    background: var(--sp-surface-2);
    box-shadow: inset 0 0 0 1px var(--sp-line);
}

.wpc-spin-past-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    /* No strikethrough: it cuts straight through the Bengali matra and the
       chip beside it already says the offer is over. */
    color: var(--sp-text-muted);
}

.wpc-spin-past-chip {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sp-danger);
    background: var(--sp-danger-bg);
}

/* A close button should not shout like a primary call to action */
.wpc-spin-claim.is-quiet {
    color: var(--sp-text) !important;
    background-color: var(--sp-surface-2) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 1px var(--sp-line) !important;
}

.wpc-spin-claim.is-quiet:hover {
    transform: none;
    background-color: var(--sp-accent-soft) !important;
}

/* =========================================================
   CONFETTI
   ========================================================= */

.wpc-spin-confetti {
    position: absolute !important;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: var(--sp-radius);
    z-index: 7;
}

.wpc-spin-confetti i {
    position: absolute;
    top: -16px;
    width: 7px;
    height: 12px;
    border-radius: 1px;
    animation-name: wpcSpinFall;
    animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1);
    animation-fill-mode: forwards;
}

@keyframes wpcSpinFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(680px) rotate(620deg); opacity: 0; }
}

/* =========================================================
   FLOATING BUTTON — anchored wherever the merchant puts it
   ========================================================= */

/* Every box property is held down: this button lands on top of whatever the
   merchant's theme is, and a theme styling bare `button` turns the circle into
   a bordered grey rectangle otherwise. */
.wpc-spin-fab {
    position: fixed !important;
    z-index: 999980;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto !important;
    height: var(--sp-fab-size) !important;
    min-height: var(--sp-fab-size) !important;
    max-height: none !important;
    min-width: var(--sp-fab-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    color: #fff !important;
    background: var(--sp-fab-bg, linear-gradient(140deg, #7c3aed, #ec4899)) !important;
    box-shadow:
        0 16px 34px -8px rgba(15, 23, 42, 0.5),
        0 4px 12px -4px rgba(15, 23, 42, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wpc-spin-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-fab-size);
    height: var(--sp-fab-size);
    flex: none;
}

/* Themes love to resize svgs inside buttons */
.wpc-spin-fab svg,
.wpc-spin-pill svg {
    max-width: none !important;
    max-height: none !important;
}

.wpc-spin-fab svg {
    width: calc(var(--sp-fab-size) * 0.42);
    height: calc(var(--sp-fab-size) * 0.42);
}

.wpc-spin-fab.has-label {
    padding-right: 20px !important;
}

.wpc-spin-fab-label {
    padding-right: 2px;
}

.wpc-spin-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 34px -8px rgba(15, 23, 42, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

/* Attention halo */
.wpc-spin-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 0 currentColor;
    opacity: 0.5;
    animation: wpcSpinHalo 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes wpcSpinHalo {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.45; }
    70%  { box-shadow: 0 0 0 14px currentColor; opacity: 0; }
    100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

.wpc-spin-fab.no-pulse::before {
    animation: none;
    display: none;
}

.wpc-spin-fab.is-hidden {
    display: none !important;
}

/* The widget writes the desktop and mobile numbers as separate variables and
   this rule picks one, so the media query below can actually win. Setting
   --sp-fab-x inline would beat any stylesheet rule and strand mobile. */
.wpc-spin-fab,
.wpc-spin-pill-fab {
    --sp-fab-x: var(--sp-fab-x-d, 20px);
    --sp-fab-y: var(--sp-fab-y-d, 20px);
    --sp-fab-size: var(--sp-fab-size-d, 56px);
}

/* --- Anchors --- */
.wpc-spin-fab-bottom-left   { left: var(--sp-fab-x) !important;  right: auto !important; bottom: var(--sp-fab-y) !important; top: auto !important; }
.wpc-spin-fab-bottom-right  { right: var(--sp-fab-x) !important; left: auto !important;  bottom: var(--sp-fab-y) !important; top: auto !important; }
.wpc-spin-fab-top-left      { left: var(--sp-fab-x) !important;  right: auto !important; top: var(--sp-fab-y) !important; bottom: auto !important; }
.wpc-spin-fab-top-right     { right: var(--sp-fab-x) !important; left: auto !important;  top: var(--sp-fab-y) !important; bottom: auto !important; }

.wpc-spin-fab-middle-left {
    left: var(--sp-fab-x) !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
}

.wpc-spin-fab-middle-right {
    right: var(--sp-fab-x) !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
}

.wpc-spin-fab-middle-left:hover  { transform: translateY(-50%) scale(1.05); }
.wpc-spin-fab-middle-right:hover { transform: translateY(-50%) scale(1.05); }

/* =========================================================
   REMINDER PILL — four placements, merchant picks one
   ========================================================= */

.wpc-spin-pill {
    z-index: 999978;
    opacity: 0;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: calc(100vw - 32px);
    padding: 9px 9px 9px 15px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    color: #fff !important;
    background: #0f172a !important;
    box-shadow: 0 14px 34px -10px rgba(15, 23, 42, 0.6);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.25s ease;
}

.wpc-spin-pill.is-in {
    opacity: 1;
}

/* ---- Placement: floating at the bottom (default) ---- */
.wpc-spin-pill-bottom {
    position: fixed !important;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%, 26px);
}

.wpc-spin-pill-bottom.is-in {
    transform: translate(-50%, 0);
}

/* Clear the plugin's own mobile order bar */
.wpc-spin-pill-bottom.has-sticky-bar {
    bottom: 84px;
}

/* ---- Placement: full-width ribbon across the top ---- */
.wpc-spin-pill-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    justify-content: center;
    padding: 11px 16px !important;
    border-radius: 0 !important;
    transform: translateY(-100%);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.5);
}

.wpc-spin-pill-top.is-in {
    transform: none;
}

/* ---- Placement: wherever the floating button is anchored ---- */
.wpc-spin-pill-fab {
    position: fixed !important;
    max-width: min(320px, calc(100vw - 28px));
    transform: none;
}

/* The middle anchors own the vertical centring, so win it back */
.wpc-spin-pill-fab.wpc-spin-fab-middle-left,
.wpc-spin-pill-fab.wpc-spin-fab-middle-right {
    transform: translateY(-50%);
}

/* ---- Placement: inline, right above the order total ---- */
.wpc-spin-pill-totals {
    position: static !important;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    margin: 0 0 12px !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    text-align: left;
    transform: translateY(6px);
    color: #14532d !important;
    background: rgba(22, 163, 74, 0.10) !important;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.22);
}

.wpc-spin-pill-totals.is-in {
    transform: none;
}

.wpc-spin-pill-totals .wpc-spin-pill-dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.wpc-spin-pill-totals .wpc-spin-pill-clock {
    margin-left: auto;
    color: #14532d;
    background: rgba(22, 163, 74, 0.16);
}

.wpc-spin-pill-totals.is-urgent {
    color: #7f1d1d !important;
    background: rgba(220, 38, 38, 0.09) !important;
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.24);
}

.wpc-spin-pill-totals.is-urgent .wpc-spin-pill-dot {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.wpc-spin-pill-totals.is-urgent .wpc-spin-pill-clock {
    color: #7f1d1d;
    background: rgba(220, 38, 38, 0.14);
}

.wpc-spin-pill-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
    animation: wpcSpinBlink 1.8s ease-in-out infinite;
}

.wpc-spin-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpc-spin-pill-clock {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.15);
}

.wpc-spin-pill.is-urgent {
    background: #b91c1c !important;
}

.wpc-spin-pill.is-urgent .wpc-spin-pill-dot {
    background: #fecaca;
    box-shadow: 0 0 0 3px rgba(254, 202, 202, 0.22);
}

/* =========================================================
   TOAST
   ========================================================= */

.wpc-spin-toast {
    position: fixed !important;
    left: 50%;
    bottom: 26px;
    z-index: 999995;
    transform: translate(-50%, 22px);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: #15803d;
    box-shadow: 0 16px 34px -10px rgba(21, 128, 61, 0.6);
    transition: opacity 0.3s, transform 0.3s;
}

.wpc-spin-toast.is-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.wpc-spin-toast svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* =========================================================
   MOBILE — the same centered popup, stacked, never edge to edge
   ========================================================= */

@media (max-width: 719px) {
    /* Padding on the shell is what keeps the card off the screen edges */
    .wpc-spin-modal {
        align-items: center;
        justify-content: center;
        padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    }

    .wpc-spin-dialog {
        flex-direction: column;
        max-width: 420px;
        max-height: 100%;
        border-radius: var(--sp-radius);
    }

    .wpc-spin-close {
        top: 12px !important;
        right: 12px !important;
        width: 30px !important;
        height: 30px !important;
    }

    /* The wheel takes whatever height is left and no more */
    .wpc-spin-side {
        flex: 0 1 auto;
        min-height: 0;
        padding: 24px 20px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--sp-line);
    }

    .wpc-spin-wheel-wrap {
        max-width: 100%;
        filter: drop-shadow(0 14px 24px rgba(15, 23, 42, 0.26));
    }

    /* Panel never scrolls the button out of reach */
    .wpc-spin-panel {
        flex: 0 0 auto;
        padding: 18px 22px 22px;
    }

    .wpc-spin-stage,
    .wpc-spin-result {
        text-align: center;
    }

    .wpc-spin-eyebrow {
        align-self: center;
        margin-bottom: 9px;
    }

    .wpc-spin-title {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .wpc-spin-sub {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .wpc-spin-badge {
        margin: 0 auto 12px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .wpc-spin-badge svg {
        width: 22px;
        height: 22px;
    }

    .wpc-spin-hero {
        justify-content: center;
        margin-bottom: 14px;
    }

    .wpc-spin-hero-value {
        font-size: 38px;
    }

    .wpc-spin-hero-single {
        font-size: 24px;
    }

    .wpc-spin-applied,
    .wpc-spin-err {
        text-align: left;
    }

    .wpc-spin-applied,
    .wpc-spin-timer {
        margin-bottom: 12px;
    }

    .wpc-spin-go,
    .wpc-spin-claim {
        height: 52px !important;
        font-size: 15.5px !important;
    }

    .wpc-spin-skip {
        margin-top: 10px;
    }

    .wpc-spin-code-note {
        margin-top: 10px;
    }

    /* Mobile gets its own placement so the button clears the sticky bar */
    .wpc-spin-fab,
    .wpc-spin-pill-fab {
        --sp-fab-x: var(--sp-fab-x-m, 14px);
        --sp-fab-y: var(--sp-fab-y-m, 88px);
        --sp-fab-size: var(--sp-fab-size-m, 48px);
        font-size: 12.5px;
    }

    .wpc-spin-pill-totals {
        font-size: 12.5px;
    }
}

/* Short phones: trim the copy so the wheel keeps its size */
@media (max-width: 719px) and (max-height: 700px) {
    .wpc-spin-modal {
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    }

    .wpc-spin-sub {
        display: none;
    }

    .wpc-spin-side {
        padding: 18px 18px 10px;
    }

    .wpc-spin-panel {
        padding: 14px 18px 18px;
    }

    .wpc-spin-title {
        font-size: 18px;
    }
}

@media (max-width: 719px) and (max-height: 600px) {
    .wpc-spin-eyebrow {
        display: none;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.wpc-spin-go:focus-visible,
.wpc-spin-claim:focus-visible,
.wpc-spin-close:focus-visible,
.wpc-spin-skip:focus-visible,
.wpc-spin-fab:focus-visible,
.wpc-spin-pill:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .wpc-spin-dialog,
    .wpc-spin-backdrop,
    .wpc-spin-badge,
    .wpc-spin-result,
    .wpc-spin-fab::before,
    .wpc-spin-eyebrow-dot,
    .wpc-spin-pill-dot,
    .wpc-spin-go.is-busy::after {
        animation: none !important;
    }

    .wpc-spin-confetti {
        display: none;
    }
}