/**
 * Promo bar above the header.
 *
 * Two layouts from one markup. On a wide screen the offer reads as a sentence
 * with a pill button on the right. Below 780px the sentence does not fit: the
 * discount moves into a badge, the copy shrinks to two tight lines, and the
 * whole bar becomes the tap target with a round arrow instead of a text button.
 *
 * Design system: rip- prefix, tokens, flat brand indigo, sharp edges on the
 * bar, pill shapes reserved for the button and the discount badge.
 */

.rip-promo-bar {
    display: block;
    background: var(--rip-primary, #4F46E5);
    color: #fff;
    font-family: var(--rip-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.4;
    position: relative;
    z-index: 30;
}

/* Rendered with the attribute set; the script removes it once it has checked
   the dismissal flag. A class alone would beat the browser default and the bar
   would flash before the check. */
.rip-promo-bar[hidden] {
    display: none !important;
}

.rip-promo-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.625rem 3rem 0.625rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.rip-promo-bar__text {
    margin: 0;
    min-width: 0;
}

.rip-promo-bar__badge,
.rip-promo-bar__headline-short,
.rip-promo-bar__hint-short,
.rip-promo-bar__sep--mobile,
.rip-promo-bar__cta-arrow {
    display: none;
}

.rip-promo-bar__sep {
    opacity: 0.6;
    margin: 0 0.25rem;
}

.rip-promo-bar__code {
    font-family: var(--rip-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.16);
    padding: 0.125rem 0.4375rem;
    border-radius: var(--rip-radius-sm, 4px);
}

.rip-promo-bar__countdown {
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
    white-space: nowrap;
    margin-left: 1.25rem;
}

.rip-promo-bar__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #fff;
    color: var(--rip-primary, #4F46E5) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.4375rem 1.125rem;
    border-radius: var(--rip-radius-full, 9999px);
    transition: var(--rip-transition, all .15s ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.rip-promo-bar__cta:hover,
.rip-promo-bar__cta:focus-visible {
    background: var(--rip-gray-100, #F3F4F6);
    color: var(--rip-primary-dark, #3730A3) !important;
}

.rip-promo-bar__close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0.375rem;
    line-height: 0;
    z-index: 2;
}

.rip-promo-bar__close:hover,
.rip-promo-bar__close:focus-visible {
    opacity: 1;
}

.rip-promo-bar :focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The theme header is sticky; without this the bar would slide under it. */
.rip-has-promo-bar .l-header.pos_fixed {
    position: relative;
}

/* --- Phone and small tablet ------------------------------------------- */
@media (max-width: 780px) {
    .rip-promo-bar__inner {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 0.4375rem 2.25rem 0.4375rem 0.75rem;
    }

    /* The discount carries the offer where the sentence cannot. */
    .rip-promo-bar__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: #fff;
        color: var(--rip-primary, #4F46E5);
        font-weight: 800;
        font-size: 0.875rem;
        font-variant-numeric: tabular-nums;
        padding: 0.3125rem 0.625rem;
        border-radius: var(--rip-radius-full, 9999px);
        white-space: nowrap;
    }

    /* Block, not a flex column: the headline below is display:block and the
       rest stays inline, so line two reads as one run. As a flex column every
       span would claim its own line and the separator would sit alone. */
    .rip-promo-bar__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rip-promo-bar__headline,
    .rip-promo-bar__hint,
    .rip-promo-bar__sep,
    .rip-promo-bar__cta-label {
        display: none;
    }

    .rip-promo-bar__headline-short {
        display: block;
        font-size: 0.875rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Second line: code and countdown sit together, separated by a dot. */
    .rip-promo-bar__hint-short,
    .rip-promo-bar__sep--mobile,
    .rip-promo-bar__countdown {
        display: inline;
        font-size: 0.75rem;
        line-height: 1.25;
        opacity: 0.9;
        margin-left: 0;
        white-space: nowrap;
    }

    .rip-promo-bar__sep--mobile {
        margin: 0 0.25rem;
    }

    .rip-promo-bar__code {
        font-size: 0.75rem;
        padding: 0.0625rem 0.3125rem;
    }

    /* Text button becomes a round arrow; the whole bar is the tap target. */
    .rip-promo-bar__cta {
        padding: 0;
        width: 2rem;
        height: 2rem;
        justify-content: center;
        gap: 0;
        flex-shrink: 0;
    }

    .rip-promo-bar__cta-arrow {
        display: block;
    }

    /* Stretch the link across the bar so a thumb anywhere on it works. The
       close button sits above it via z-index. */
    .rip-promo-bar__cta::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .rip-promo-bar__close {
        right: 0.375rem;
        padding: 0.25rem;
    }
}

/* Very narrow phones: the countdown is the first thing that can go. */
@media (max-width: 360px) {
    .rip-promo-bar__sep--mobile,
    .rip-promo-bar__countdown {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rip-promo-bar__cta {
        transition: none;
    }
}