/* ==========================================================================
   OFFER BAR — hot-offer banner with countdown (see js/offers.js).
   Self-contained: delete this file + its <link> to remove the styling.
   ========================================================================== */

.offer-bar {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 220% at 100% 0%, rgba(255, 90, 54, 0.55) 0%, rgba(255, 90, 54, 0) 55%),
        radial-gradient(90% 200% at 0% 100%, rgba(0, 150, 200, 0.45) 0%, rgba(0, 150, 200, 0) 60%),
        linear-gradient(105deg, #06182f 0%, #0c2340 55%, #12335f 100%);
    border-bottom: 3px solid var(--color-citrus);
    box-shadow: 0 6px 24px rgba(12, 35, 64, 0.28);
    animation: offer-in 0.5s ease-out both;
    touch-action: pan-y;               /* vertical scroll stays native; sideways swipes switch offers */
}

/* diagonal "frost" stripes + a light that sweeps across */
.offer-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 14px, rgba(255, 255, 255, 0) 14px 34px);
    pointer-events: none;
}
.offer-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26%;
    left: -35%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: offer-sweep 6s ease-in-out infinite;
    pointer-events: none;
}

.offer-bar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* ---- "HOT" badge --------------------------------------------------------- */
.offer-bar__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    background: linear-gradient(135deg, #ffd166 0%, var(--color-citrus) 55%, #ff7a2f 100%);
    box-shadow: 0 0 0 0 rgba(255, 164, 28, 0.7);
    animation: offer-pulse 2s ease-out infinite;
}
.offer-bar__badge svg { animation: offer-flicker 1.3s ease-in-out infinite; transform-origin: 50% 90%; }

/* ---- copy ---------------------------------------------------------------- */
.offer-bar__copy { flex: 1 1 auto; min-width: 0; }
.offer-bar__title {
    margin: 0;
    font-size: clamp(18px, 2.1vw, 26px);
    font-weight: 900;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
/* the items inside the offer (always visible, wraps on small screens) */
.offer-bar__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.offer-bar__items li {
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offer-bar__items b { color: #ffd166; font-weight: 900; }

.offer-bar__text {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-frost-cyan);
}

/* ---- countdown ----------------------------------------------------------- */
.offer-bar__timer { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.offer-bar__ends { font-size: 12px; font-weight: 700; color: #ffd166; text-transform: uppercase; letter-spacing: 0.04em; }
.offer-timer { display: flex; gap: 6px; direction: ltr; }
.offer-timer__cell[hidden] { display: none; }
.offer-timer__cell {
    min-width: 52px;
    padding: 6px 4px 5px;
    text-align: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
}
.offer-timer__cell b {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.offer-timer__cell small { display: block; font-size: 10px; font-weight: 700; color: var(--color-frost-cyan); }
.offer-timer__cell[data-unit="s"] b { color: #ffd166; }

/* ---- price --------------------------------------------------------------- */
.offer-bar__deal { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.offer-bar__was { font-size: 13px; color: #9fb8d1; text-decoration: line-through; }
.offer-bar__price { font-size: 24px; font-weight: 900; color: #fff; }
.offer-bar__save { font-size: 12px; font-weight: 800; color: #7dffb2; }

/* ---- button -------------------------------------------------------------- */
.offer-bar__cta {
    flex: none;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 900;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-primary);
    background: linear-gradient(135deg, #ffd166 0%, var(--color-citrus) 60%, #ff7a2f 100%);
    box-shadow: 0 6px 18px rgba(255, 164, 28, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: offer-nudge 2.8s ease-in-out infinite;
}
.offer-bar__cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: offer-shine 3.2s ease-in-out infinite;
}
.offer-bar__cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(255, 164, 28, 0.6); }
.offer-bar__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.offer-bar__cta--done { background: #fff; color: var(--color-primary); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); animation: none; }
.offer-bar__cta--done::after { display: none; }

/* ---- pager dots (only when several offers are live) ----------------------- */
.offer-bar__dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 4px; padding: 0 0 6px; margin-top: -6px; }
.offer-bar__dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.offer-bar__dot::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}
.offer-bar__dot--on::before { background: var(--color-citrus); inset: 8px; }

/* ---- floating snowflakes -------------------------------------------------- */
.offer-bar__flake {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    animation: offer-float 7s ease-in-out infinite;
}
.offer-bar__flake--1 { top: 18%; inset-inline-start: 22%; animation-delay: 0s; }
.offer-bar__flake--2 { top: 62%; inset-inline-start: 58%; width: 7px; height: 7px; animation-delay: 2.2s; }
.offer-bar__flake--3 { top: 25%; inset-inline-start: 84%; width: 6px; height: 6px; animation-delay: 4.1s; }

/* ---- motion -------------------------------------------------------------- */
@keyframes offer-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes offer-sweep { 0%, 55% { left: -35%; } 100% { left: 125%; } }
@keyframes offer-shine { 0%, 60% { left: -60%; } 100% { left: 140%; } }
@keyframes offer-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 164, 28, 0.65); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 164, 28, 0); } }
@keyframes offer-flicker { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12, 1.2) rotate(-4deg); } }
@keyframes offer-nudge { 0%, 88%, 100% { transform: scale(1); } 94% { transform: scale(1.06); } }
@keyframes offer-float { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-14px); opacity: 0.9; } }

@media (prefers-reduced-motion: reduce) {
    .offer-bar, .offer-bar::after, .offer-bar__badge, .offer-bar__badge svg,
    .offer-bar__cta, .offer-bar__cta::after, .offer-bar__flake { animation: none !important; }
}

/* ---- tablet --------------------------------------------------------------- */
@media (max-width: 1000px) {
    .offer-bar__inner { flex-wrap: wrap; row-gap: 12px; }
    .offer-bar__copy { flex: 1 1 280px; }
    .offer-bar__badge { order: 0; }
}

/* ---- phone ---------------------------------------------------------------- */
@media (max-width: 640px) {
    .offer-bar__inner { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding-top: 12px; padding-bottom: 12px; }
    .offer-bar__badge { grid-column: 1; justify-self: start; padding: 5px 10px; font-size: 12px; }
    .offer-bar__copy { grid-column: 1 / -1; }
    .offer-bar__title { font-size: 17px; }
    .offer-bar__timer { grid-column: 1; align-items: flex-start; }
    .offer-timer__cell { min-width: 46px; }
    .offer-timer__cell b { font-size: 20px; }
    .offer-bar__deal { grid-column: 2; grid-row: 3; align-items: flex-end; }
    .offer-bar__cta { grid-column: 1 / -1; width: 100%; }
}


/* ---- switching between offers (js/offers.js) ----
   The bar stays put; only the content inside the stage slides and fades. Old and new content are
   stacked in the same grid cell while they cross over, and the stage eases to the new height. */
.offer-bar__stage { position: relative; z-index: 1; display: grid; }
.offer-bar__stage > .offer-bar__inner { grid-area: 1 / 1; width: 100%; min-width: 0; will-change: transform, opacity; }
.offer-bar__dots[hidden] { display: none; }