/* ==========================================================
   Styles for elements injected by the SIPO API layer
   (status strip + inline offer banner). Keeping them here
   means the site stylesheet never has to know about them.
   ========================================================== */

/* ---------- live status strip ---------- */
.status-strip {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 950;
    background: var(--crimson-deep, #5c0118);
    color: var(--cream, #fdf1dc);
    font-size: .82rem;
    line-height: 1.35;
    transition: background-color .3s ease;
}

.status-strip-inner {
    width: min(100% - 2.3rem, 1200px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
}

.status-dot {
    flex: 0 0 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
}

.status-text { flex: 1; min-width: 0; font-weight: 500; }
.status-text .countdown { opacity: .75; font-variant-numeric: tabular-nums; }

.status-cta {
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .28rem .7rem;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    transition: background-color .2s ease, border-color .2s ease;
}
.status-cta:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }

.status-strip.is-open { background: #2f6f47; }
.status-strip.is-open .status-dot { animation: sipo-pulse 2.4s ease-out infinite; }
.status-strip.is-closed { background: var(--crimson-deep, #5c0118); }
.status-strip.is-error { background: #4a3b33; }

@keyframes sipo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (max-width: 620px) {
    .status-strip { font-size: .76rem; }
    .status-cta { display: none; }
}

/* ---------- inline offer banner (never a pop-up) ---------- */
.offer-banner[hidden] { display: none !important; }

.offer-banner {
    background: var(--turmeric, #dd9b2d);
    color: #2b1a05;
    margin-top: calc(var(--strip-height, 0px) + var(--nav-height, 74px));
}

.offer-inner {
    width: min(100% - 2.3rem, 1200px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 0;
    flex-wrap: wrap;
}

.offer-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.offer-text { flex: 1; min-width: 200px; margin: 0; font-weight: 600; font-size: .95rem; }

.offer-cta {
    text-decoration: none;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: #2b1a05;
    color: #fff;
}
.offer-cta:hover { background: #000; }

/* A page that shows the banner shouldn't double up on top spacing */
.offer-banner:not([hidden]) ~ .hero,
.offer-banner:not([hidden]) ~ .page-head { padding-top: clamp(2.4rem, 5vw, 4rem); }

@media (prefers-reduced-motion: reduce) {
    .status-strip.is-open .status-dot { animation: none; }
}