/* ──────────────────────────────────────────────────────────────────────────────
   Spin the wheel — the parts the motion kit does not already have.

   pf-motion.css draws the wheel itself (.pf-wheel, .pf-hub, .pf-pointer,
   .pf-prize, .pf-stamp, .pf-rays, .pf-confetti) and animates all of it. This
   file adds only what surrounds that: the entry pill, the two-column panel it
   opens in, and the terms.

   Every selector sits under .pf-campaign and this file is only linked inside
   the campaign window, so on 1 December the pill and the panel are gone with no
   release — the same kill switch as the rest of the campaign.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── The entry pill ──────────────────────────────────────────────────────────
   .pf-fab is the kit's class: it owns the hop, this owns the look. Bottom left,
   clear of the chat bubble on the right. */
.pf-campaign .pf-spin-fab {
    position: fixed;
    left: 16px;
    bottom: 20px;
    z-index: 1040;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px 10px 12px;
    border: 0;
    border-radius: 999px;

    background: #140A10;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;

    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    cursor: pointer;

    opacity: 0;
    transform: translateY(12px) scale(.96);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2);
}

.pf-campaign .pf-spin-fab.is-in {
    opacity: 1;
    transform: none;
}

/* Drawn rather than an image, so it needs no request and stays sharp at any
   density. The quarters echo the wheel. */
.pf-campaign .pf-spin-fab .pf-fab-icon {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        conic-gradient(#E61B77 0 25%, #FFFFFF 0 50%,
                       #140A10 0 75%, #F5B21E 0);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* Hover (mouse only): the pill lifts with a pink glow and the little wheel spins once.
   translate and rotate rather than transform, which the arrival and the kit's hop own. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pf-campaign .pf-spin-fab.is-in {
        transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.2),
                    translate .25s ease, box-shadow .25s ease;
    }
    .pf-campaign .pf-spin-fab.is-in:hover,
    .pf-campaign .pf-spin-fab.is-in:focus-visible {
        translate: 0 -3px;
        box-shadow: 0 10px 26px rgba(230, 27, 119, .45), 0 0 0 2px rgba(230, 27, 119, .55);
    }
    .pf-campaign .pf-spin-fab.is-in:hover .pf-fab-icon,
    .pf-campaign .pf-spin-fab.is-in:focus-visible .pf-fab-icon {
        animation: pf-fab-hover-spin .9s cubic-bezier(.2, .8, .2, 1);
    }
}
@keyframes pf-fab-hover-spin { from { rotate: 0turn; } to { rotate: 1turn; } }

/* A prize waiting to be used is worth saying on the pill — it is the only thing
   on screen that knows. */
.pf-campaign .pf-spin-fab[data-prizes]::after {
    content: attr(data-prizes);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #F5B21E;
    color: #140A10;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── The panel ───────────────────────────────────────────────────────────────── */
.pf-campaign .pf-spin-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(32, 16, 26, .72);
}

.pf-campaign .pf-spin-backdrop[hidden] { display: none; }

.pf-campaign .pf-spin-panel {
    /* The confetti layer is absolutely positioned to its host's box, so the host
       has to be the positioning context. */
    position: relative;
    overflow: hidden;

    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px 30px;
    border-radius: 20px;
    color: #FFFFFF;

    /* The magenta ground and lighter spokes from the design. */
    background:
        repeating-conic-gradient(from 0deg at 34% 50%,
            rgba(255, 255, 255, .10) 0deg 5deg,
            rgba(255, 255, 255, 0) 5deg 10deg),
        radial-gradient(circle at 34% 50%, #C2157A 0%, #8E0F57 55%, #6B0B41 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* Two columns: the wheel, then everything said about it. */
.pf-campaign .pf-spin-cols {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.pf-campaign .pf-spin-dismiss {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 3;
    border: 0;
    background: none;
    padding: 4px 6px;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pf-campaign .pf-spin-dismiss:hover { color: #FFFFFF; }

/* ── The wheel ───────────────────────────────────────────────────────────────
   The kit sizes .pf-wheel-wrap at 164px, which is right for the toast-sized
   demo in the motion sheet and too small to carry labels here. */
.pf-campaign .pf-spin-col-wheel .pf-wheel-wrap {
    width: 290px;
    height: 290px;
    max-width: 100%;
    margin: 0 auto;
}

.pf-campaign .pf-spin-col-wheel .pf-wheel {
    /* The dark rim the lights sit on. */
    border-width: 13px;
    box-shadow: 0 0 0 3px #F5B21E, 0 10px 30px rgba(0, 0, 0, .4);
}

/* The labels and rim lights, drawn into the wheel so they turn with it. */
.pf-campaign .pf-spin-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pf-campaign .pf-spin-face text {
    font-family: Figtree, sans-serif;
    font-weight: 800;
    font-size: 9px;
    letter-spacing: .2px;
}

.pf-campaign .pf-spin-col-wheel .pf-hub {
    width: 86px;
    height: 86px;
    font-size: 16px;
    border-width: 5px;
    z-index: 2;
}

/* ── The copy ────────────────────────────────────────────────────────────────── */
.pf-campaign .pf-spin-title {
    margin: 0;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
}

.pf-campaign .pf-spin-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #F5B21E;
    color: #140A10;
    font-size: 13px;
    font-weight: 800;
}

.pf-campaign .pf-spin-lede {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .95);
}

/* BC's terms, verbatim and quiet: present for anyone who wants them, not
   competing with the button. */
.pf-campaign .pf-spin-terms-box {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .22);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.pf-campaign .pf-spin-note {
    margin: 12px 0 0;
    min-height: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

.pf-campaign .pf-spin-won { display: block; margin-top: 12px; }
.pf-campaign .pf-spin-won[hidden] { display: none; }

.pf-campaign .pf-spin-terms-line {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
}

.pf-campaign .pf-spin-go {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #B01268;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.pf-campaign .pf-spin-go:disabled {
    background: rgba(255, 255, 255, .45);
    color: rgba(20, 10, 16, .5);
    cursor: default;
    box-shadow: none;
}

/* ── Terms ───────────────────────────────────────────────────────────────────── */
.pf-campaign .pf-spin-terms {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

.pf-campaign .pf-spin-terms summary {
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

.pf-campaign .pf-spin-odds {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.pf-campaign .pf-spin-odds li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* The swatch ties each line to its slice on the wheel. */
.pf-campaign .pf-spin-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, .5);
}

/* A prize at its cap is still listed — it is still on the wheel — but it is not
   something anyone can win today. */
.pf-campaign .pf-spin-odds li.is-out {
    opacity: .45;
    text-decoration: line-through;
}

.pf-campaign .pf-spin-odds-note {
    margin: 8px 0 0;
    opacity: .75;
}

/* ── Narrow screens ──────────────────────────────────────────────────────────
   One column, wheel first — it is what the panel is for. */
@media (max-width: 767.98px) {
    .pf-campaign .pf-spin-panel { padding: 22px 18px; }

    .pf-campaign .pf-spin-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        text-align: center;
    }

    .pf-campaign .pf-spin-col-wheel .pf-wheel-wrap {
        width: 240px;
        height: 240px;
    }

    .pf-campaign .pf-spin-title { font-size: 22px; }

    .pf-campaign .pf-spin-odds li { text-align: left; }

    /* Clear of the bottom navigation, which the chat bubble also sits above. */
    .pf-campaign .pf-spin-fab {
        bottom: 76px;
        font-size: 13px;
        padding: 9px 15px 9px 10px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────────
   The kit already silences its own animations. This only covers the arrival,
   which is this file's. The wheel still turns to the winning segment, because
   that is the result and not decoration — pf.spinWheel sets it without the
   transition. */
@media (prefers-reduced-motion: reduce) {
    .pf-campaign .pf-spin-fab { transition: none !important; }
}

/* ── PF-16: the wheel is on top of everything while it is open ───────────────
   The WhatsApp button sits at z-index 9990 and the panel at 1060, so it covered
   the Spin now button and part of the prize text on a phone. Raising the panel
   above it is better than hiding the button: nothing moves on the page behind,
   and a visitor who closes the panel finds WhatsApp where they left it.

   The class goes on <body> while the panel is open, so the rule can reach a
   button that is not inside the panel. */
.pf-campaign .pf-spin-backdrop {
    z-index: 10050;
}

.pf-spin-open .wa-float-btn,
.pf-spin-open #whatsapp-float,
.pf-spin-open .whatsapp-float {
    /* Hidden rather than lowered: the button is fixed and its own stacking
       context, so a z-index below the panel is not always enough. */
    visibility: hidden !important;
}

/* ── PF-17: the panel fades and rises instead of appearing instantly ─────────
   200ms in, 160ms out, per the review. The backdrop carries the fade and the
   panel the rise, so the two read as one movement.

   Reduced motion is honoured by the kit's blanket rule, which collapses every
   duration under .pf-campaign — so this needs no media query of its own. */
.pf-campaign .pf-spin-backdrop {
    opacity: 0;
    transition: opacity .2s ease;
}

.pf-campaign .pf-spin-backdrop.is-open {
    opacity: 1;
}

.pf-campaign .pf-spin-backdrop.is-closing {
    opacity: 0;
    transition: opacity .16s ease;
}

.pf-campaign .pf-spin-backdrop .pf-spin-panel {
    transform: translateY(14px);
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.05);
}

.pf-campaign .pf-spin-backdrop.is-open .pf-spin-panel {
    transform: none;
}

/* ── PF-13: a close button that cannot be mistaken for the prize ─────────────
   It read "Not now" in the corner, in the same colour as the copy beside it,
   and overlapped the panel's content. A round target with a solid ground reads
   as a control, and 40px is a comfortable tap. */
.pf-campaign .pf-spin-dismiss {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .34);
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
}

.pf-campaign .pf-spin-dismiss:hover,
.pf-campaign .pf-spin-dismiss:focus-visible {
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
}

/* ── PF-20: the panel fits a 375 x 812 screen ────────────────────────────────
   It was slightly taller than the screen, which pushed "Prizes, odds and terms"
   below the fold — the one link that explains what the wheel is offering.
   Tighter padding and a smaller wheel buy back the height. */
@media (max-width: 575.98px) {
    .pf-campaign .pf-spin-panel {
        padding: 18px 14px;
        max-height: calc(100vh - 20px);
    }

    .pf-campaign .pf-spin-col-wheel .pf-wheel-wrap {
        width: 200px;
        height: 200px;
    }

    .pf-campaign .pf-spin-cols { gap: 12px; }
    .pf-campaign .pf-spin-title { font-size: 19px; }
    .pf-campaign .pf-spin-lede { font-size: 13px; margin-top: 8px; }
    .pf-campaign .pf-spin-terms-box { font-size: 11px; padding: 8px 10px; margin-top: 10px; }
    .pf-campaign .pf-spin-go { padding: 12px 16px; font-size: 16px; margin-top: 12px; }
    .pf-campaign .pf-spin-col-wheel .pf-hub { width: 66px; height: 66px; font-size: 13px; }
}

/* ── PF-22: the wheel while an unused prize is still in hand ─────────────────
   BC allows one unused prize at a time, so there is nothing to win until this
   one is spent. The Spin button is already disabled, but a wheel that still
   looks live beside it reads as one that failed to respond rather than one
   that is deliberately closed — so it is greyed in the place the eye goes
   first, and the message beside it says why. */
.pf-campaign .pf-wheel.pf-wheel--held {
    filter: grayscale(1);
    opacity: 0.55;
}