/* ==========================================================================
   Black Friday theme. Loaded after app.css only while the campaign runs
   (App\Services\BlackFriday), so removing it leaves the site exactly as it was.
   Not in a layer on purpose: unlayered rules beat every layer of app.css.
   ========================================================================== */
:root {
    --bf-purple: #a855f7;
    --bf-magenta: #d946ef;

    /* The brand tokens: everything in app.css follows them */
    --blue: #a855f7;
    --blue-2: #c084fc;
    --blue-3: #e9d5ff;
    --blue-rgb: 168 85 247;
    --blue-soft: rgb(168 85 247 / .14);
    --blue-ring: rgb(168 85 247 / .5);
    --blue-top: #b76dfa;

    --orange: #d946ef;
    --orange-2: #e879f9;
    --orange-rgb: 217 70 239;
    --orange-soft: rgb(217 70 239 / .14);
    --orange-hover-top: #e879f9;
    --orange-hover: #c026d3;

    --brand-mid: #c026d3;
    --brand-gradient: linear-gradient(100deg, #8b5cf6 0%, #a855f7 45%, #e879f9 100%);

    /* Surfaces: from blue-black to violet-black */
    --bg: #08040f;
    --bg-2: #0d0717;
    --bg-deep: #060310;
    --surface: #130b20;
    --surface-2: #1a102b;
    --surface-3: #241739;
    --surface-hover: #2a1b42;
    --bg-rgb: 8 4 15;
    --bg-2-rgb: 13 7 23;
    --surface-rgb: 19 11 32;
    --overlay: rgb(6 2 12 / .76);

    --border: rgb(192 132 252 / .13);
    --border-2: rgb(192 132 252 / .22);
    --border-3: rgb(192 132 252 / .36);

    --grid-line: rgb(192 132 252 / .055);
    --grid-dot: rgb(232 121 249 / .22);

    --text-2: #b6aac9;
    --text-3: #80739a;
}

body {
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 480px at 12% -8%, rgb(168 85 247 / .16), transparent 70%),
        radial-gradient(800px 460px at 92% 4%, rgb(217 70 239 / .11), transparent 70%);
    background-repeat: no-repeat;
}

/* The logo is blue and orange artwork: silver with a violet glow, like the banner */
.nav-logo img {
    filter: grayscale(1) brightness(1.35) drop-shadow(0 0 8px rgb(192 132 252 / .8));
}

.pcard-tag.bf-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    border-color: transparent;
    box-shadow: 0 4px 14px -4px rgb(217 70 239 / .8);
}

.pcard:hover {
    border-color: rgb(192 132 252 / .45);
    box-shadow: 0 18px 44px -24px rgb(168 85 247 / .75);
}

/* ---------------------------------------------------------------- top bar */
.bf-bar {
    position: relative;
    z-index: 5;
    color: #fff;
    background: linear-gradient(90deg, #1b0b33 0%, #4c1d95 28%, #86198f 62%, #1b0b33 100%);
    border-bottom: 1px solid rgb(232 121 249 / .35);
    font-size: var(--fs-sm);
}
.bf-bar[hidden] { display: none; }

.bf-bar-in {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    min-height: 44px;
    padding-block: .35rem;
}

.bf-bar-title {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bf-bar-title i { color: #f0abfc; }
.bf-bar-off { font-weight: 600; }

.bf-code {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .65rem;
    color: #fff;
    font: inherit;
    background: rgb(8 4 15 / .55);
    border: 1px dashed #e879f9;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.bf-code:hover { background: rgb(8 4 15 / .85); transform: translateY(-1px); }
.bf-code:focus-visible { outline: 2px solid #f0abfc; outline-offset: 2px; }
.bf-code strong { font-family: var(--font-display); font-weight: 800; letter-spacing: .05em; }
.bf-code-label { color: #e9d5ff; font-size: .85em; }
.bf-code i { font-size: .85em; opacity: .8; }

.bf-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.bf-count-label { font-weight: 400; opacity: .85; }

.bf-bar-cta {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.bf-bar-cta:hover { color: #f0abfc; }

/* -------------------------------------------------------------- home hero */
.bf-hero {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-block: 1.25rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, rgb(139 92 246 / .2), rgb(217 70 239 / .13));
    border: 1px solid rgb(232 121 249 / .4);
    border-radius: var(--radius);
    box-shadow: 0 0 34px -12px rgb(217 70 239 / .65);
}
.bf-hero-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; }
.bf-hero-title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(100deg, #fff, #e879f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bf-hero-off { font-size: var(--fs-lg); font-weight: 700; color: #f0abfc; }
.bf-hero-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; }
.bf-code.is-lg { padding: .45rem .9rem; font-size: var(--fs-lg); }
.bf-hero-rules { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }

/* The banner carries its own text: nothing may cover it, and it must not be cropped */
.hero-frame img { aspect-ratio: 1672 / 941; object-position: center; }
.hero-float { display: none; }

/* ---------------------------------------------------------------- prices */
.pcard-price.bf-price { display: inline-flex; flex-direction: column; line-height: 1.15; }
/* The old price sits under the new one, so the price stays narrow and the buttons keep their row */
.pcard-price.bf-price small {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .35rem;
    margin-top: .15rem;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    color: #e879f9;
}
.pcard-price.bf-price small s { color: var(--text-3); font-weight: 500; }
/* On a narrow card the code line drops under the old price instead of pushing the buttons out */
.pcard-price.bf-price { min-width: 0; }
.pcard-foot .pcard-actions { flex-shrink: 0; }

.buy-price .bf-old { font-size: var(--fs-base); color: var(--text-3); }
.bf-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .6rem .75rem;
    background: rgb(168 85 247 / .12);
    border: 1px solid rgb(232 121 249 / .32);
    border-radius: var(--radius-sm);
}
.bf-buy-off {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    color: #f0abfc;
    font-size: var(--fs-sm);
}

.bf-cart-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-bottom: .6rem;
    padding: .6rem .75rem;
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-sm);
    text-align: center;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    border-radius: var(--radius-sm);
    transition: filter .15s ease;
}
.bf-cart-cta:hover { color: #fff; filter: brightness(1.12); }

@media (max-width: 640px) {
    .bf-bar { font-size: var(--fs-xs); }
    .bf-bar-off, .bf-count-label, .bf-bar-cta { display: none; }
    .bf-bar-in { gap: .35rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bf-code, .bf-cart-cta { transition: none; }
    .bf-code:hover { transform: none; }
}