/* Top promo bar. Sits above the fixed header. index.js writes two numbers:
   --promo-bar-height, the measured height, which pads the page down; and
   --promo-bar-header-offset, the part of the bar still on screen, which is
   where the fixed header sits. As the bar scrolls out the header follows it
   up and then stays at the top, so there is never a gap above the menu. */

:root {
    --promo-bar-height: 56px;
    --promo-bar-header-offset: 56px;
}

body:has(.promo-bar) {
    padding-top: var(--promo-bar-height);

    .header-transparent {
        top: var(--promo-bar-header-offset);

        .header {
            top: calc(10px + var(--promo-bar-header-offset));
        }
    }
}

.promo-bar,
.promo-bar * {
    box-sizing: border-box;
}

.promo-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    width: 100%;
    min-height: 56px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #2f1d49;
    background-color: #fff6ee;
    background-image:
        radial-gradient(ellipse 22% 140% at 8% 50%, rgba(255, 215, 2, 0.22), transparent),
        radial-gradient(ellipse 30% 160% at 92% 40%, rgba(255, 61, 113, 0.14), transparent),
        linear-gradient(90deg, #fff7e8 0%, #fff1f4 55%, #f4f0ff 100%);
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

/* confetti: a handful of fixed dots, no image request */
.promo-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 6% 28%, #ffd702 99%, transparent),
        radial-gradient(2px 2px at 17% 78%, #ff3d71 99%, transparent),
        radial-gradient(2px 2px at 29% 18%, #b4aef7 99%, transparent),
        radial-gradient(3px 3px at 41% 84%, #ffd702 99%, transparent),
        radial-gradient(2px 2px at 58% 22%, #ff3d71 99%, transparent),
        radial-gradient(2px 2px at 69% 76%, #b4aef7 99%, transparent),
        radial-gradient(3px 3px at 83% 30%, #ffd702 99%, transparent),
        radial-gradient(2px 2px at 95% 72%, #ff3d71 99%, transparent);
    opacity: 0.85;
}

.promo-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 16px;
}

/* the "Q4": a gradient word mark with a two-line caption, no container */
.promo-bar__badge {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.promo-bar__badge-num {
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #ffb800 0%, #ff3d71 60%, #fc2278 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.promo-bar__badge-txt {
    color: #e8175d;
    font-weight: 700;
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: start;
}

.promo-bar__text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-bar__title {
    color: #2f1d49;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.promo-bar__sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: rgba(47, 29, 73, 0.22);
    flex-shrink: 0;
}

.promo-bar__offer {
    color: #5a4a7a;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
}

.promo-bar__offer strong {
    color: #e8175d;
    font-weight: 700;
}

.promo-bar__countdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.promo-bar__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 6px 3px;
    border-radius: 8px;
    background: rgba(47, 29, 73, 0.06);
    border: 1px solid rgba(47, 29, 73, 0.12);
}

.promo-bar__unit span {
    color: #2f1d49;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.promo-bar__unit small {
    margin-top: 2px;
    color: #7d6f9a;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.promo-bar__colon {
    color: #b3a7c9;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

.promo-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ff3d71;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(255, 61, 113, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

    &:hover {
        color: #fff;
        background: #f02a62;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(255, 61, 113, 0.4);
    }

    svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }
}

[dir="rtl"] .promo-bar__btn svg {
    transform: scaleX(-1);
}

@media (max-width: 1100px) {
    /* the sentence goes first; the title and the discount carry the message */
    .promo-bar__offer-label,
    .promo-bar__sep {
        display: none;
    }

    .promo-bar__inner {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    body:has(.promo-bar) .header-transparent .header {
        top: var(--promo-bar-header-offset);
    }

    .promo-bar {
        white-space: normal;
        text-align: center;
    }

    .promo-bar__inner {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .promo-bar__text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        text-align: start;
    }

    .promo-bar__badge-num {
        font-size: 26px;
    }

    .promo-bar__title {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    /* the word mark goes too: the title carries the season */
    .promo-bar__badge {
        display: none;
    }

    .promo-bar__text {
        align-items: center;
        text-align: center;
    }

    .promo-bar__unit {
        min-width: 32px;
        padding: 3px 4px 2px;
    }

    .promo-bar__countdown {
        gap: 3px;
    }

    .promo-bar__btn {
        padding: 7px 12px;
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    /* seconds are decoration on a 360px screen */
    .promo-bar__countdown > .promo-bar__unit:last-child,
    .promo-bar__countdown > .promo-bar__colon:last-of-type {
        display: none;
    }
}