/**
 * Prime Club Reserve — widget card styling
 *
 * Companion styles for `[pc_reserve_widget campaign="ID" variation="ID"]`
 * (includes/class-pcr-shortcodes.php, task 2.3). Enqueued only when that
 * shortcode renders. Class prefix `pcr-widget` — deliberately separate from
 * `pcr-ticker` (task 2.2) so the two stylesheets never collide/overlap even
 * if both shortcodes land on the same deal page.
 *
 * TASK 2.4 ADDITION: the "Remind Me" footer pill now drives a real capture
 * flow (`.pcr-widget__remind-*` rules below) — logged-in one-click submit
 * ("Reminder Set!" mint-chip confirmation state, restyled per Figma
 * 16010:318-321 in task 49.1) and a guest expanded email row (combined
 * pill input + "Submit" button + check-icon success line, per Figma
 * 16010:238/16010:278/16010:282-285, also task 49.1).
 *
 * Design tokens taken directly from Figma 12976:6983 (count variant) /
 * 13017:11069 (amount variant) and the color-state reference 12647:4120:
 *   - outer frame: column, 35px gap between the card and the "How this
 *     works" block; card is 390px wide in the source frame — made fluid
 *     here (`max-width: 390px; width: 100%`) since this is a sidebar embed;
 *   - card: bg #fff8f1, radius 20px, padding 32px 25px 25px;
 *   - inner content column: 340px (100% of the card's content box at the
 *     390px reference width), 5px extra horizontal padding, 20px gap between
 *     sections;
 *   - gap headline: Plus Jakarta Sans Bold 22px/22px, -0.44px, #161616;
 *     subline: Medium 14px/21px, -0.14px, #5a5a5a;
 *   - progress track: #e6ded7, 12px tall, 64px radius; fill: 1.5px border,
 *     ~18.5px radius, color-state gradient (see .pcr-widget__fill--* below);
 *     percent label: Bold 15px, -0.45px, #161616;
 *   - social-proof row: dashed 0.7px #c4c4c4 top+bottom, 12px vertical
 *     padding, member count ExtraBold 15px #161616 / rest Medium 15px #5a5a5a;
 *   - Reserve CTA: bg #ffcea0, 55px tall, 100px radius, SemiBold 15px,
 *     -0.15px, #161616;
 *   - Share CTA: 0.7px solid #a4a4a4 border, 50px tall, 50px radius,
 *     SemiBold 15px; caption below: Medium 12px #5a5a5a, centered;
 *   - footer: dashed 0.7px top border, 13px top padding, space-between;
 *     disclaimer Medium 10px/16px #5a5a5a (max-width ~186px); "Remind Me"
 *     pill: 0.7px #a4a4a4 border, 50px radius, 8px 11px 8px 14px padding,
 *     SemiBold 14px #161616 + clock icon.
 *
 * PROGRESS-BAR COLOR STATES (12647:4120, decision #12 — EXACT thresholds
 * live in PHP/JS, this file only supplies the 3 fixed color treatments):
 * teal < 70%, amber 70–89%, red >= 90%. Task 34.4 (Mayur follow-up
 * 2026-08-01): the gradient/border tokens below are now byte-matched to the
 * node's own dev-mode export (they were previously approximated). The old
 * amber/red-only clip-path ::before/::after glints are REMOVED — replaced by
 * the shared PNG sparkle system below (`.pcr-progress__spark*`), which
 * renders on ALL THREE states via server-side <img> markup, not CSS shapes.
 *
 * @package PrimeClubReserve
 */

.pcr-widget {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 35px;
    max-width: 390px;
    width: 100%;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.pcr-widget[hidden] {
    display: none;
}

/*
 * State fragments (task 2.5): build_widget_markup() (includes/class-pcr-shortcodes.php)
 * server-renders every headline state (live/unlocked/pending/expired) plus
 * the live-only CTA/share/footer/how-it-works block in the SAME markup,
 * each carrying a bare `hidden` attribute except the one matching the
 * current state — assets/js/reserve-widget.js toggles `hidden` between
 * polls. Several of those fragments (`.pcr-widget__gap-block`,
 * `.pcr-widget__share-block`, `.pcr-widget__footer`, `.pcr-widget__how`) set
 * their OWN `display: flex/column` below, which — being an author rule —
 * would otherwise beat the browser's default `[hidden] { display: none }`
 * UA rule. This blanket override guarantees `hidden` always wins inside a
 * widget card, regardless of what any specific fragment's own display value is.
 */
.pcr-widget [hidden] {
    display: none !important;
}

.pcr-widget *,
.pcr-widget *::before,
.pcr-widget *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------ */

.pcr-widget__card {
    display: flex;
    flex-direction: column;
    gap: 23px;
    background-color: #fff8f1;
    border-radius: 20px;
    padding: 32px 25px 25px;
}

.pcr-widget__inner {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---------------------------------------------------------------------
 * Gap headline + subline
 * ------------------------------------------------------------------ */

.pcr-widget__gap-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pcr-widget__headline {
    margin: 0;
    font-weight: 700;
    font-size: 22px;
    /* 30px (was 22px): the copy pass (Figma 13765-1635/-1675) moved the
       full "more needed to unlock this deal" sentence into this heading,
       so it now wraps to two lines — both frames set ~30px leading. */
    line-height: 30px;
    letter-spacing: -0.44px;
    color: #161616;
}

.pcr-widget__subline {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.14px;
    color: #5a5a5a;
}

/* ---------------------------------------------------------------------
 * Progress bar
 * ------------------------------------------------------------------ */

.pcr-widget__progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pcr-widget__track {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
    border-radius: 64px;
    background-color: #e6ded7;
    overflow: hidden;
}

.pcr-widget__fill {
    position: relative;
    height: 100%;
    min-width: 12px;
    border-radius: 18.5px;
    border: 1.5px solid transparent;
    transition: width 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.pcr-widget__fill--teal {
    background: linear-gradient(-9.84deg, #10edd3 17.098%, #acfff5 71.751%);
    border-color: #92f3e7;
}

.pcr-widget__fill--amber {
    background: linear-gradient(-6.93deg, #ffac5d 17.194%, #ffd3aa 82.103%);
    border-color: #ffe9d6;
}

.pcr-widget__fill--red {
    background: linear-gradient(-5.55deg, #ff5762 17.196%, #ffafb4 83.473%);
    border-color: #ffd1d3;
}

.pcr-widget__percent {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.45px;
    color: #161616;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Task 34.4 — PNG sparkle system (replaces the 34.2 CSS-star engine)
 *
 * Server-rendered by includes/class-pcr-shortcodes.php as an <img> child of
 * `.pcr-widget__fill` (position:relative above, so it anchors there and
 * rides the fill through the entry animation automatically — no JS
 * injection needed any more). `.pcr-widget__track`'s existing
 * `overflow: hidden` clips it exactly like the node (the fill itself must
 * NOT clip). Class names (`.pcr-progress__spark`, `--cluster`) are the
 * SAME shared ones the confirmation page's progress bar uses
 * (reserve-confirmation.css) — only the geometry below is tuned to this
 * surface's own fill (single 84px cluster, no glitter sheet on the widget
 * per node 12647:4120).
 *
 * Geometry: node cluster center sits ≈32px inside the fill's right tip.
 * An 84px-wide img with `right: -10px` (10px PAST the tip) puts its left
 * edge at tip+10-84 = tip-74 and its center at tip+10-42 = tip-32 — matches.
 * ------------------------------------------------------------------ */

.pcr-widget__fill > .pcr-progress__spark {
    position: absolute;
    pointer-events: none;
    opacity: 1;
    animation: pcr-sparkle-twinkle 2.4s ease-in-out infinite alternate;
}

.pcr-widget__fill > .pcr-progress__spark--cluster {
    width: 84px;
    height: 84px;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
}

/* Gentle infinite twinkle — opacity + a subtle `scale` pulse. `scale` is
   the standalone CSS property (not `transform`), so it never clobbers the
   `transform: translateY(-50%)` used for vertical centering above. */
@keyframes pcr-sparkle-twinkle {
    from {
        opacity: 0.55;
        scale: 0.92;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcr-progress__spark {
        /* Static, still visible (matches the node — no motion, not hidden). */
        animation: none;
        opacity: 1;
        scale: 1;
    }
}

/* ---------------------------------------------------------------------
 * Social proof
 * ------------------------------------------------------------------ */

.pcr-widget__social {
    margin: 0;
    padding: 12px 0;
    border-top: 0.7px dashed #c4c4c4;
    border-bottom: 0.7px dashed #c4c4c4;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: #5a5a5a;
}

.pcr-widget__social strong {
    font-weight: 800;
    color: #161616;
}

/* ---------------------------------------------------------------------
 * CTAs
 * ------------------------------------------------------------------ */

.pcr-widget__reserve-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 100px;
    background-color: #ffcea0;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.15px;
    color: #161616;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.pcr-widget__share-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcr-widget__share-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border: 0.7px solid #a4a4a4;
    border-radius: 50px;
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    color: #161616;
    cursor: pointer;
}

.pcr-widget__share-caption {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    color: #5a5a5a;
    text-align: center;
}

/* ---------------------------------------------------------------------
 * Footer: disclaimer + Remind Me
 * ------------------------------------------------------------------ */

.pcr-widget__footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 13px;
    border-top: 0.7px dashed #c4c4c4;
}

/*
 * Task 2.4: the disclaimer + Remind Me pill used to be the footer's only
 * (direct, space-between) children — now wrapped in their own row so the
 * guest capture form (`.pcr-widget__remind-capture` below) can sit stacked
 * underneath without disturbing that original space-between layout.
 */
.pcr-widget__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pcr-widget__disclaimer {
    margin: 0;
    max-width: 186px;
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    color: #5a5a5a;
}

.pcr-widget__remind-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px 8px 14px;
    border: 0.7px solid #a4a4a4;
    border-radius: 50px;
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    color: #161616;
    white-space: nowrap;
    cursor: pointer;
}

.pcr-widget__remind-icon {
    flex-shrink: 0;
}

/*
 * "Reminder Set!" confirmation state (logged-in one-click flow, Figma
 * 16010:318-321) — mint chip with a check icon supplied via `::before`
 * (pcr-remind-check.svg) since reserve-widget.js swaps the pill's
 * textContent only and the inline clock icon markup is discarded by design.
 */
.pcr-widget__remind-cta.is-done {
    border: 0.5px solid #43a297;
    background: #f0fdfb;
    border-radius: 26px;
    padding: 7px 10px 7px 8px;
    gap: 6px;
    font-size: 14px;
    color: #161616;
    cursor: default;
}

.pcr-widget__remind-cta.is-done::before {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url(../img/pcr-remind-check.svg) no-repeat center / contain;
}

.pcr-widget__remind-cta:disabled {
    opacity: 0.6;
    cursor: default;
}

.pcr-widget__remind-cta.is-done:disabled {
    opacity: 1;
}

.pcr-widget__remind {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.pcr-widget__remind-error {
    margin: 0;
    max-width: 200px;
    font-weight: 500;
    font-size: 11px;
    line-height: 15px;
    color: #d0453c;
    text-align: right;
}

/* ---------------------------------------------------------------------
 * Guest capture row (Figma 16010:238/16010:278): a single combined pill —
 * borderless email input + peach "Submit" button sharing one rounded shell.
 * ------------------------------------------------------------------ */

.pcr-widget__remind-capture {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pcr-widget__remind-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.pcr-widget__remind-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 0.7px solid #e3e3e3;
    border-radius: 84px;
    padding: 5px 5px 5px 20px;
}

.pcr-widget__remind-row:focus-within {
    outline: 2px solid #ffcea0;
    outline-offset: 1px;
}

.pcr-widget__remind-label {
    /* Visually hidden, still announced by screen readers — the placeholder
       carries the visible label per the task's input spec. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pcr-widget__remind-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    color: #161616;
    outline: none;
}

.pcr-widget__remind-input::placeholder {
    color: #bfbfbf;
}

.pcr-widget__remind-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 15px 20px;
    border: none;
    border-radius: 50px;
    background-color: #ffcea0;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.15px;
    color: #161616;
    white-space: nowrap;
    cursor: pointer;
}

.pcr-widget__remind-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/*
 * Honeypot (§4.7 hardening) — visually hidden without display:none (a
 * common bot heuristic skips display:none/visibility:hidden fields), kept
 * out of the tab order and off-screen for sighted users.
 */
.pcr-widget__remind-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pcr-widget__remind-message {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #5a5a5a;
}

.pcr-widget__remind-message--error {
    color: #d0453c;
}

.pcr-widget__remind-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.28px;
    color: #161616;
}

/*
 * `[hidden]` is a UA default of `display: none`, but the `display: flex`
 * above has higher specificity (an attribute selector vs. an element's
 * default styles) and would otherwise override it, leaving the row visible
 * before reserve-widget.js reveals it. This guard restores the hide.
 */
.pcr-widget__remind-success[hidden] {
    display: none;
}

.pcr-widget__remind-success-icon {
    flex-shrink: 0;
}

@media (max-width: 400px) {
    .pcr-widget__card {
        padding: 24px 18px 18px;
    }

    .pcr-widget__footer {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------
 * Reserved-user referral row (task 14.1) — replaces `.pcr-widget__reserve-cta`
 * once the viewing user holds an active reservation (includes/class-pcr-shortcodes.php).
 * Same component style as the reserve-confirmation page's own copy row
 * (themes/primeclub/templates/reserve-confirmation.php:475-495,
 * `.pcr-confirm__referral-link-row`), adapted to this card's existing peach/
 * rounded tokens rather than that page's own palette.
 * ------------------------------------------------------------------ */

.pcr-widget__referral-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pcr-widget__referral-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 55px;
    padding: 0 16px;
    border: 0.7px solid #a4a4a4;
    border-radius: 100px;
    background-color: #fff;
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    color: #161616;
}

.pcr-widget__referral-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 0 20px;
    border: none;
    border-radius: 100px;
    background-color: #ffcea0;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.14px;
    color: #161616;
    white-space: nowrap;
    cursor: pointer;
}

.pcr-widget__referral-copy.is-copied {
    background-color: #d7f5ee;
}

/* ---------------------------------------------------------------------
 * "Share this deal" popup (task 14.1, Figma 13744-578) — design tokens
 * taken directly from the Phase-14 tracker entry's dev-mode export:
 *   - backdrop rgba(56,23,9,0.3) + backdrop-filter: blur(7.5px);
 *   - dialog: white bg, 1px solid #efefef, radius 20px, padding 25px,
 *     column gap 22px, shadow 0 25px 70px rgba(62,43,31,0.1);
 *   - title: Plus Jakarta Sans Bold 20px #161616, -0.4px tracking;
 *   - chip: bg #fff5ed, radius 7px, padding 15px, gap 15px, image 40x40,
 *     name SemiBold 16px #161616, subline Regular 14px #636363;
 *   - buttons: 180x45px in a 2-col grid (10px gap, 370px content width ->
 *     1-col under ~400px), bg #fafbfb, 1px solid #ececec, radius 7px,
 *     icon-label gap 7px; icons are share-popup-*.svg (task 26.2, Figma
 *     16005-58) with differing natural aspect (e.g. 17x13, 15x15) rendered
 *     in a 15x15 box via object-fit: contain to avoid distortion, + label
 *     Medium 14px #3a3a3a;
 *   - close ✕: 25px square, top-right, 11px inset.
 * Fonts/colors otherwise reuse this stylesheet's existing widget tokens —
 * no new font-family declared here.
 * ------------------------------------------------------------------ */

.pcr-widget__share-popup[hidden] {
    display: none;
}

.pcr-widget__share-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.pcr-widget__share-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(56, 23, 9, 0.3);
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
    border: none;
    padding: 0;
    cursor: pointer;
}

.pcr-widget__share-popup-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 25px 70px rgba(62, 43, 31, 0.1);
    box-sizing: border-box;
}

.pcr-widget__share-popup-close-btn {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    color: #161616;
    cursor: pointer;
    padding: 0;
}

.pcr-widget__share-popup-title {
    margin: 0;
    padding-right: 25px;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.4px;
    color: #161616;
}

.pcr-widget__share-popup-chip {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 7px;
    background-color: #fff5ed;
}

.pcr-widget__share-popup-chip-img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    object-fit: cover;
}

.pcr-widget__share-popup-chip-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pcr-widget__share-popup-chip-name {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #161616;
}

.pcr-widget__share-popup-chip-sub {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: #636363;
}

.pcr-widget__share-popup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pcr-widget__share-popup-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    height: 45px;
    border: 1px solid #ececec;
    border-radius: 7px;
    background-color: #fafbfb;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    color: #3a3a3a;
    text-decoration: none;
    cursor: pointer;
}

.pcr-widget__share-popup-btn-icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.pcr-widget__share-popup-btn-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcr-widget__share-popup-btn.is-copied {
    border-color: #92f3e7;
    background-color: #f2fffc;
}

@media (max-width: 400px) {
    .pcr-widget__share-popup-grid {
        grid-template-columns: 1fr;
    }

    .pcr-widget__referral-row {
        flex-wrap: wrap;
    }

    .pcr-widget__referral-copy {
        width: 100%;
    }
}