/* ============================================================================
   style-polish.css — professional polish layer
   ----------------------------------------------------------------------------
   Added 2026-07-26. This file is PURELY ADDITIVE: it restyles what is already
   there and introduces no new markup requirements. The whole look can be
   reverted by commenting out the single <link> to this file in
   usersc/templates/pops/header.php (see also git tag style-v1-pre-polish).

   Loaded LAST (after style-pop.css / hero.css) so it can override without
   !important in most places. !important appears only where an existing rule
   already uses it, or where a later in-body <style> block would otherwise win
   (notably the flip counter, whose CSS is emitted inline by
   includes/function_count_flip.php AFTER the head stylesheets — hence the
   #flip-counter ID prefix to raise specificity).

   Design brief: gradient + raised card + a single top-corner light pool,
   embossed heading, odometer counter, frosted ghost CTA, and a small hover
   lift on buttons. Enough depth to feel crafted without going glossy.

   Contents
     1. Tokens
     2. Hero cards (all 11 hero locations)
     3. Odometer / flip counter
     4. Hero search field
     5. Hero buttons — solid + frosted ghost
     6. Site-wide polish: cards, buttons, forms, badges, dropdowns
     7. Motion & accessibility
   ========================================================================= */


/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
    --pt-purple: #9d02fc;
    --pt-purple-lift: #a62bff;   /* lighter, top-left of the hero gradient   */
    --pt-purple-deep: #7d00cc;   /* deeper, bottom-right of the gradient     */
    --pt-purple-ink: #4d0b7d;    /* odometer tiles / darkest brand shade     */
    --pt-bg: #f6f2fb;            /* page background — light lavender         */

    /* Brand typeface. Loaded in usersc/templates/pops/header.php — change the
       family in BOTH places to trial another. Close alternates in the same
       geometric-grotesque vein, if this one isn't the match: 'Space Grotesk'
       (squarer, quirkier), 'Manrope' (softer), 'Archivo' (tighter, more
       neutral). The system stack stays as the fallback. */
    --pt-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
                    'Noto Color Emoji';

    /* One shadow ramp reused everywhere so depth reads consistently. */
    --pt-shadow-sm: 0 1px 2px rgba(24, 6, 41, .06), 0 2px 6px rgba(24, 6, 41, .05);
    --pt-shadow-md: 0 2px 4px rgba(24, 6, 41, .06), 0 8px 20px -6px rgba(24, 6, 41, .12);
    --pt-shadow-lg: 0 4px 8px rgba(24, 6, 41, .07), 0 18px 40px -12px rgba(24, 6, 41, .18);
    --pt-shadow-hero: 0 2px 4px rgba(77, 11, 125, .18), 0 22px 45px -14px rgba(93, 0, 150, .45);

    --pt-radius: 0.75rem;
    --pt-radius-lg: 1.25rem;
    --pt-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Page background: a light lavender that sits under the purple brand, replacing
   the cool #e8f7ff blue from style-pop.css (which fought the purple). Same
   specificity as that rule, but this sheet loads later, so it wins. */
body,
html {
    background: var(--pt-bg);
}

/* ---------- 1b. Typography ---------------------------------------------- */

/* Applied on body and inherited. `button`/`input`/`select`/`textarea` don't
   inherit font by default, so they're named explicitly or they'd island out on
   the old system stack. */
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.search-input,
.dropdown-item {
    font-family: var(--pt-font-sans);
}

/* Crisper type rendering — small change, noticeable across the whole site. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings: heavier and tightly tracked, which is what gives the reference its
   confident look. Optical tracking tightens as size grows. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--pt-font-sans);
    font-weight: 700;
    letter-spacing: -0.021em;
    line-height: 1.15;
}

h1, .display-1, .display-2, .display-3, .display-4 {
    letter-spacing: -0.028em;
}

h5, h6 {
    letter-spacing: -0.012em;
    line-height: 1.25;
}

/* Tabular figures wherever numbers are compared down a column — prices,
   counts, rankings — so digits line up instead of jittering. */
.table td,
.table th,
.price,
.badge,
#flip-counter .digit {
    font-variant-numeric: tabular-nums;
}


/* ---------- 2. Hero cards ----------------------------------------------- */
/* Two markup shapes cover every page:
     .hero-section header  -> homepage (index.php)
     .card.bg-primary      -> heroCard() plus the ten index_ and fetch_p heroes
   Styling both together is what makes the heroes finally match.            */

.hero-section header,
.card.bg-primary {
    position: relative;
    isolation: isolate;              /* keep the light pool behind content   */
    border: 0;
    border-radius: var(--pt-radius-lg);
    background-image: linear-gradient(145deg,
                        var(--pt-purple-lift) 0%,
                        var(--pt-purple) 46%,
                        var(--pt-purple-deep) 100%);
    background-color: var(--pt-purple);   /* fallback before gradient paints */
    box-shadow: var(--pt-shadow-hero),
                inset 0 1px 0 rgba(255, 255, 255, .22),   /* top emboss edge */
                inset 0 -1px 0 rgba(0, 0, 0, .12);        /* bottom shade    */
}

/* The single top-corner light pool. One soft highlight only — more than one
   reads as "glossy", which the brief explicitly rules out.

   `border-radius: inherit` rounds the pool to the card's own corners. Do NOT
   swap this for `overflow: hidden` on the card: heroCard() renders Bootstrap
   dropdowns inside its <h1> (and $gridViewDropdown below), and an overflow
   ancestor clips those menus shut. */
.hero-section header::before,
.card.bg-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(115% 85% at 18% -12%,
                    rgba(255, 255, 255, .30) 0%,
                    rgba(255, 255, 255, .10) 38%,
                    rgba(255, 255, 255, 0) 68%);
}

/* Embossed heading: a hairline of light above, soft shade below. */
.hero-section header h1,
.card.bg-primary h1 {
    font-weight: 600;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .16),
                 0 2px 10px rgba(52, 0, 88, .34);
}

/* Supporting copy sits back a step so the heading leads. */
.hero-section header .lead,
.card.bg-primary .lead {
    color: rgba(255, 255, 255, .90);
    text-shadow: 0 1px 6px rgba(52, 0, 88, .22);
}

.hero-section .tracked-pops {
    font-weight: 600;
    color: #fff;
}

/* The decorative far-right icon in the heroCard()/index_* variants. */
.card.bg-primary .fa-6x {
    opacity: .38;
    filter: drop-shadow(0 6px 14px rgba(52, 0, 88, .35));
}

/* Not every .card.bg-primary is a hero: index_list.php and user_collections_old
   .php use the same classes for small "Create list" / "Join" tiles inside a
   grid. Those are anchors, so a.card.bg-primary dials the hero scale back down
   to tile scale and restores a proper click affordance. */
a.card.bg-primary {
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-md),
                inset 0 1px 0 rgba(255, 255, 255, .20);
    transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease),
                filter .2s var(--pt-ease);
}

a.card.bg-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: var(--pt-shadow-lg),
                inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* Hamburger sits on the gradient — give it the same frosted treatment. */
.hero-menu-btn {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color .2s var(--pt-ease), transform .2s var(--pt-ease);
}

.hero-menu-btn:hover {
    background: rgba(255, 255, 255, .30);
    transform: translateY(-1px);
}


/* ---------- 3. Odometer / flip counter ---------------------------------- */
/* Reference look: dark recessed tiles, white numerals. The ID prefix beats
   both style-pop.css's !important rule and the in-body <style> block, while
   leaving the .upper/.lower flip animation mechanism untouched.             */

#flip-counter {
    gap: 2px;
    margin-bottom: .25rem;
}

#flip-counter .digit-container {
    filter: drop-shadow(0 4px 10px rgba(40, 0, 70, .34));
}

#flip-counter .digit-container > div {
    background: linear-gradient(180deg, #5c119a 0%, var(--pt-purple-ink) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Keep the split-flap seam: top half rounds up, bottom half rounds down. */
#flip-counter .digit-container > .upper {
    border-radius: 10px 10px 0 0 !important;
    background: linear-gradient(180deg, #61139f 0%, #500d84 100%) !important;
}

#flip-counter .digit-container > .lower {
    border-radius: 0 0 10px 10px !important;
    background: linear-gradient(180deg, #4a0a78 0%, #3d0764 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .22);
}

#flip-counter .digit {
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}


/* ---------- 4. Hero search field ---------------------------------------- */

.hero-section .search-form,
.card.bg-primary .search-form {
    padding: .55rem .65rem .55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 10px 24px -10px rgba(52, 0, 88, .45),
                inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: box-shadow .22s var(--pt-ease), transform .22s var(--pt-ease);
}

.hero-section .search-form:focus-within,
.card.bg-primary .search-form:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(52, 0, 88, .55),
                0 0 0 4px rgba(255, 255, 255, .28);
    outline: none;                 /* replaced by the ring above */
}

/* The pill button inside the search field. The heroCard() variants carry an
   empty inline `background-color:` (harmless), so a class rule still applies. */
.hero-section .search-button,
.card.bg-primary .search-button {
    background: linear-gradient(180deg, var(--pt-purple-lift) 0%, var(--pt-purple) 100%);
    box-shadow: 0 2px 6px rgba(93, 0, 150, .35),
                inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: filter .2s var(--pt-ease), transform .2s var(--pt-ease),
                box-shadow .2s var(--pt-ease);
}

.hero-section .search-button:hover,
.card.bg-primary .search-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(93, 0, 150, .45),
                inset 0 1px 0 rgba(255, 255, 255, .3);
}

.hero-section .search-button:active,
.card.bg-primary .search-button:active {
    transform: translateY(0);
}


/* ---------- 5. Hero buttons: solid + frosted ghost ---------------------- */
/* btn-light  -> the solid white "Free Sign Up"
   btn-outline-light -> the frosted ghost "Find a POP!"                     */

/* Shape is inherited from the house pill in section 6 — deliberately not
   overridden here, so the hero matches the rest of the site. */
.hero-section .btn,
.card.bg-primary .btn {
    /* !important only because style-pop.css sets `.btn { font-weight: 500
       !important }`, which no amount of specificity can beat. */
    font-weight: 600 !important;
    transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease),
                background-color .2s var(--pt-ease), color .2s var(--pt-ease);
}

.hero-section .btn-light,
.card.bg-primary .btn-light {
    color: var(--pt-purple);
    background: #fff;
    border-color: #fff;
    box-shadow: 0 8px 18px -8px rgba(40, 0, 70, .5),
                inset 0 -1px 0 rgba(77, 11, 125, .12);
}

.hero-section .btn-outline-light,
.card.bg-primary .btn-outline-light {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-section .btn-outline-light:hover,
.card.bg-primary .btn-outline-light:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .60);
    color: #fff;
}

/* The small interactive hover lift. */
.hero-section .btn:hover,
.card.bg-primary .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(40, 0, 70, .55);
}

.hero-section .btn:active,
.card.bg-primary .btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px -6px rgba(40, 0, 70, .5);
}

/* Visible keyboard focus on the gradient, where the default ring disappears. */
.hero-section .btn:focus-visible,
.card.bg-primary .btn:focus-visible,
.hero-menu-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}


/* ---------- 6. Site-wide polish ---------------------------------------- */
/* Softer, more consistent depth on ordinary cards. Scoped away from the hero
   and from the dark navbar/footer/offcanvas, which stay exactly as they are. */

.card:not(.bg-primary):not(.bg-dark) {
    border-color: rgba(24, 6, 41, .08);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-sm);
    transition: transform .2s var(--pt-ease), box-shadow .2s var(--pt-ease),
                border-color .2s var(--pt-ease);
}

/* Only cards that are actually clickable get the lift affordance. Kept as two
   separate rules on purpose: an unsupported :has() would invalidate the whole
   selector list, taking the plain a.card case down with it. */
a.card:not(.bg-primary):hover {
    transform: translateY(-2px);
    border-color: rgba(157, 2, 252, .22);
    box-shadow: var(--pt-shadow-md);
}

.card:not(.bg-primary):has(> a):hover {
    transform: translateY(-2px);
    border-color: rgba(157, 2, 252, .22);
    box-shadow: var(--pt-shadow-md);
}

/* --- Button system -----------------------------------------------------
   ONE house button, taken from the "Hottest POPs This Week" cards: a pill with
   the 145deg brand gradient and a soft purple glow. Everything else on the site
   now matches it.

   The homepage alone had 16 distinct button signatures across NINE corner radii
   (6, 8, 9.6, 23, 25, 50%, 84, 800, 9999px), because style-pop.css pills
   .btn-lg at 84px and .btn-sm at 23px while a plain .btn falls through to
   Bootstrap's 6px. Now every size is a pill, so buttons differ only in scale.

   Shape is set broadly on .btn (safe for any colour); the gradient is scoped to
   .btn-primary so the deliberately multi-coloured buttons — btn-amazon
   orange/yellow/green, btn-warning, btn-outline-dark — keep their own colours
   and only inherit the shape, weight and hover behaviour. */

/* Base: pill shape plus a neutral depth that never tints a bespoke colour.
   Deliberately kept at (0,1,0) specificity so that .btn-primary (same
   specificity, declared later) and the hero's .hero-section .btn-light /
   .btn-outline-light (higher specificity) both override it cleanly. An earlier
   draft used a long :not() chain here, which computes to (0,8,0) and silently
   outranked the hero button styling. */
.btn,
.btn-sm,
.btn-lg {
    border-radius: 50rem;
    box-shadow: 0 2px 5px rgba(24, 6, 41, .10),
                inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .18s var(--pt-ease), box-shadow .18s var(--pt-ease),
                background-color .18s var(--pt-ease), border-color .18s var(--pt-ease),
                filter .18s var(--pt-ease), color .18s var(--pt-ease);
}

/* Round icon buttons stay circles. .btn-close is Bootstrap's own X glyph and is
   deliberately left alone. */
.btn.rounded-circle,
.btn.round-button,
.btn.round-nav-button { border-radius: 50%; }

/* The offcanvas drawer forced its own radius; keep it on the house shape. */
.offcanvas .btn { border-radius: 50rem; }
.offcanvas .btn.rounded-circle { border-radius: 50%; }

.btn:not(.btn-link):not(.round-button):not(.round-nav-button):hover {
    transform: translateY(-1px);
    box-shadow: var(--pt-shadow-sm);
}

.btn:not(.btn-link):active {
    transform: translateY(0);
}

/* THE house button. .btn-preorder shares the declaration rather than mirroring
   it, so the two can never drift apart.

   .btn-preorder replaced ~600 characters of inline style per instance (plus
   onmouseover/onmouseout handlers) that painted a blue-leaning #6e2eff gradient
   — a third distinct purple. */
.btn-primary,
.btn-preorder {
    background-image: linear-gradient(145deg, var(--pt-purple-lift) 0%, var(--pt-purple-deep) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 6px 12px rgba(93, 0, 150, .34),
                inset 0 1px 0 rgba(255, 255, 255, .2),
                0 2px 4px rgba(0, 0, 0, .1);
}

.btn-primary:hover,
.btn-preorder:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 9px 18px rgba(93, 0, 150, .44),
                inset 0 1px 0 rgba(255, 255, 255, .22),
                0 4px 8px rgba(0, 0, 0, .14);
}

/* Secondary action: same pill and glow language, hollow until hovered. */
.btn-outline-primary {
    border: 1px solid var(--pt-purple);
    color: var(--pt-purple);
    background-image: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-image: linear-gradient(145deg, var(--pt-purple-lift) 0%, var(--pt-purple-deep) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 9px 18px rgba(93, 0, 150, .38),
                inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* Flat variants keep no depth at all. Listed last so it beats the base .btn
   shadow above without needing !important. */
.btn-link,
.btn-close,
.btn.rounded-circle,
.btn.round-button,
.btn.round-nav-button {
    box-shadow: none;
}

/* Round icon buttons: keep them flat, just make the hover legible. */
.round-button,
.round-nav-button {
    transition: background-color .18s var(--pt-ease), color .18s var(--pt-ease),
                box-shadow .18s var(--pt-ease);
}

.round-button:hover,
.round-nav-button:hover:not(:disabled) {
    box-shadow: var(--pt-shadow-sm);
}

/* Form controls: one brand-purple focus ring instead of Bootstrap blue. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(157, 2, 252, .55);
    box-shadow: 0 0 0 .22rem rgba(157, 2, 252, .16);
}

.form-check-input:checked {
    background-color: var(--pt-purple);
    border-color: var(--pt-purple);
}

/* Badges: slightly tighter and less shouty. */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: .45rem;
}

/* Dropdowns: soften the panel and give items a brand-tinted hover. */
.dropdown-menu {
    border-color: rgba(24, 6, 41, .08);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-lg);
    padding: .35rem;
}

.dropdown-item {
    border-radius: .45rem;
    transition: background-color .15s var(--pt-ease), color .15s var(--pt-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(157, 2, 252, .08);
    color: var(--pt-purple) !important;   /* beats style-backdrops.php's rule */
}

/* Tables: lighter rules, brand-tinted row hover. */
.table > :not(caption) > * > * {
    border-color: rgba(24, 6, 41, .07);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(157, 2, 252, .04);
}

/* Modals: match the card depth ramp. */
.modal-content {
    border: 0;
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-lg);
}

/* Images inside cards shouldn't poke past the softened corners. */
.card > img:first-child,
.card > a:first-child > img:first-child {
    border-top-left-radius: calc(var(--pt-radius) - 1px);
    border-top-right-radius: calc(var(--pt-radius) - 1px);
}


/* ---------- 7. Motion & accessibility ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero-section .btn,
    .card.bg-primary .btn,
    .hero-section .search-form,
    .card.bg-primary .search-form,
    .hero-menu-btn,
    .card,
    .btn,
    .dropdown-item,
    .round-button,
    .round-nav-button,
    .search-button {
        transition: none !important;
    }

    .hero-section .btn:hover,
    .card.bg-primary .btn:hover,
    .btn:hover,
    a.card:hover,
    .hero-menu-btn:hover,
    .search-button:hover,
    .card:not(.bg-primary):has(> a):hover {
        transform: none !important;
    }
}

/* backdrop-filter is unsupported on older Android WebView / Firefox <103; the
   ghost button must stay legible there, so fall back to a flatter tint. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .hero-section .btn-outline-light,
    .card.bg-primary .btn-outline-light {
        background: rgba(255, 255, 255, .24);
    }
}

/* Tighten the hero on phones: the 3rem padding is too generous below ~576px. */
@media (max-width: 575.98px) {
    .hero-section header {
        padding: 1.75rem 1.25rem;
        border-radius: 1rem;
    }

    .card.bg-primary .card-body.p-5 {
        padding: 1.75rem 1.25rem !important;
    }

    .hero-section header h1,
    .card.bg-primary h1 {
        font-size: 1.9rem;
    }

    #flip-counter .digit-container {
        font-size: 30px;
        width: 32px;
        margin: 0 2px;
    }
}