/* ============================================
   SIPO dynamic component styles — Wrap N Roll
   ============================================
   Styles for elements injected at runtime by
   statusManager.js / offerManager.js, plus the
   API-rendered menu. Colours come from the site
   design tokens in assets/css/style.css.
   ============================================ */

/* ---------- status strip ---------- */
/* Always visible, even while scrolling — pinned above the sticky header. */
.status-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 71;
    background: var(--ink, #100F0F);
    color: var(--cream, #FFFDF3);
    padding: .5rem 0;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
}
.status-strip.open { background: #14532D; }
.status-strip.closed { background: #7F1D1D; }
.status-strip.error { background: var(--ink, #100F0F); }

.status-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding-inline: var(--gutter, 1.25rem);
}
.status-strip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
    opacity: .85;
}
.status-strip.open .status-strip-dot { background: #4ADE80; opacity: 1; }
.status-strip.closed .status-strip-dot { background: #F87171; opacity: 1; }
.status-strip .countdown-timer { font-variant-numeric: tabular-nums; }

/* Reserve space for the fixed strip: push the sticky header below it and
   nudge the whole page down so nothing loads underneath it. Height is
   measured live by statusManager.js into --strip-height; 38px is the
   single-line fallback before that first measurement lands. */
body.has-status-strip {
    padding-top: var(--strip-height, 38px);
}
body.has-status-strip .site-head {
    top: var(--strip-height, 38px);
}

/* ---------- inline offer banner (never a pop-up) ---------- */
.offer-banner {
    background: var(--red, #C23A23);
    color: var(--cream, #FFFDF3);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.offer-banner-inner {
    max-width: var(--maxw, 1240px);
    margin-inline: auto;
    padding: .7rem var(--gutter, 1.25rem);
    display: flex;
    align-items: center;
    gap: .9rem;
}
.offer-banner-img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex: none; }
.offer-banner-text { margin: 0; font-size: .9rem; font-weight: 600; flex: 1; }
.offer-banner-cta {
    flex: none;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: var(--cream, #FFFDF3);
    color: var(--red, #C23A23);
}
.offer-banner-close {
    flex: none;
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    padding: 0 .2rem;
}
.offer-banner-close:hover { opacity: 1; }

/* ---------- API states ---------- */
.api-loading,
.api-empty {
    text-align: center;
    color: var(--ink-55, rgba(16, 15, 15, .55));
    padding: 2.5rem 1rem;
    font-size: .95rem;
}
.api-loading::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 1rem auto 0;
    border: 2px solid var(--ink-14, rgba(16, 15, 15, .14));
    border-top-color: var(--red, #C23A23);
    border-radius: 50%;
    animation: api-spin .7s linear infinite;
}
@keyframes api-spin { to { transform: rotate(360deg); } }

.api-unavailable { color: var(--ink-55, rgba(16, 15, 15, .55)); font-style: italic; }

/* ---------- hours rows (contact page) ---------- */
.hours-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .66rem 0;
    border-bottom: 1px solid var(--ink-08, rgba(16, 15, 15, .08));
    font-size: .96rem;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .day { font-weight: 500; }
.hours-row .time { font-variant-numeric: tabular-nums; color: var(--ink-70, rgba(16, 15, 15, .7)); text-align: right; }
.hours-row.today .day,
.hours-row.today .time { font-weight: 700; color: var(--red, #C23A23); }
.hours-row .closed-day { color: var(--ink-55, rgba(16, 15, 15, .55)); }

/* ---------- hours list (footer) ---------- */
#footer-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
#footer-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; opacity: .85; }
#footer-hours li.today { opacity: 1; font-weight: 700; }
#footer-hours .time { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- one-line hours summary ---------- */
.hours-summary-item { display: block; }
.hours-summary-item b { font-weight: 700; }

/* ---------- floating order button ---------- */
.floating-order {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 65;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.4rem;
    border-radius: 999px;
    background: var(--red, #C23A23);
    color: var(--cream, #FFFDF3);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(16, 15, 15, .28);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.floating-order:hover {
    transform: translateY(-3px);
    background: var(--red-dark, #A22C17);
    box-shadow: 0 14px 34px rgba(16, 15, 15, .34);
}
.floating-order svg { width: 18px; height: 18px; flex: none; }

/* ---------- floating call button (phones only) ---------- */
.floating-call {
    display: none;
    position: fixed;
    left: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 65;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--white, #fff);
    color: var(--red, #C23A23);
    border: 1px solid var(--ink-14, rgba(16, 15, 15, .14));
    box-shadow: 0 8px 28px rgba(16, 15, 15, .28);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.floating-call svg { width: 22px; height: 22px; }
.floating-call:active {
    background: var(--red, #C23A23);
    color: var(--cream, #FFFDF3);
}

@media (max-width: 760px) {
    .floating-call { display: inline-flex; }
    .floating-order { padding: .72rem 1.15rem; font-size: .9rem; }
}

@media (hover: hover) {
    .floating-call:hover {
        transform: translateY(-3px);
        background: var(--red, #C23A23);
        color: var(--cream, #FFFDF3);
        border-color: var(--red, #C23A23);
        box-shadow: 0 14px 34px rgba(16, 15, 15, .34);
    }
}

/* ---------- ordering disabled state ---------- */
body.ordering-disabled .nav-order-btn,
body.ordering-disabled .floating-order,
body.ordering-disabled .order-link,
body.ordering-disabled [data-order-url] {
    opacity: .5;
    pointer-events: none;
    filter: grayscale(.4);
}

@media (prefers-reduced-motion: reduce) {
    .api-loading::after { animation: none; }
    .floating-order,
    .floating-call { transition: none; }
}