/* ============================================
   API Component Styles — light theme
   ============================================
   Styling for elements the api/ scripts inject
   at runtime: the live status strip, the offer
   ribbon, and the Google rating badge.

   Flat colours only — no gradients. Values fall
   back to sensible defaults so these components
   still look right if the site theme fails to
   load.
   ============================================ */

/* ---------- Status strip ---------- */
.status-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--paper-2, #f6f5f1);
    border-bottom: 1px solid var(--line-soft, rgba(18, 21, 15, 0.09));
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--text-soft, rgba(18, 21, 15, 0.74));
}

.status-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--wrap, 1180px);
    margin-inline: auto;
    padding: 0.55rem var(--gutter, 1.5rem);
    text-align: center;
}

.status-strip .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-mute, rgba(18, 21, 15, 0.54));
    flex-shrink: 0;
}

.status-strip .status-text a {
    color: inherit;
    text-underline-offset: 2px;
}

.status-strip .status-count {
    color: var(--text-mute, rgba(18, 21, 15, 0.54));
    font-variant-numeric: tabular-nums;
}

.status-strip .status-cta {
    color: var(--green-ink, #0e7a1d);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity 0.25s;
}
.status-strip .status-cta:hover { opacity: 0.7; }

/* Open — the logo's green, with a soft pulse */
.status-strip.is-open .status-dot {
    background: var(--green, #1fb82c);
    box-shadow: 0 0 0 0 rgba(31, 184, 44, 0.55);
    animation: statusPulse 2.6s ease-out infinite;
}
@keyframes statusPulse {
    70%  { box-shadow: 0 0 0 7px rgba(31, 184, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(31, 184, 44, 0); }
}

/* Closed — muted, informational rather than alarming */
.status-strip.is-closed .status-dot { background: var(--paprika, #b4521a); }

/* Ordering paused at the POS while the dining room is open */
.status-strip.is-paused { background: #fdf4dd; }
.status-strip.is-paused .status-dot { background: var(--gold, #f8bc24); }

.status-strip.is-error .status-dot { background: var(--text-mute, rgba(18, 21, 15, 0.54)); }

body.has-status-strip { padding-top: var(--strip-h, 34px); }

/* When ordering is switched off site-wide */
body.ordering-disabled [data-order-url] {
    pointer-events: none;
    opacity: 0.45;
}

@media (max-width: 620px) {
    .status-strip { font-size: 0.72rem; }
    .status-strip-inner { gap: 0.4rem 0.55rem; padding-block: 0.5rem; }
}

/* ---------- Offer ribbon ---------- */
.offer-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.6rem;
    background: #fdf4dd;
    border: 1px solid var(--gold, #f8bc24);
    border-radius: var(--radius-lg, 10px);
}
.offer-ribbon-tag {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-ink, #96660a);
}
.offer-ribbon-text {
    flex: 1;
    min-width: 200px;
    margin: 0;
    font-size: 1rem;
    color: var(--text, #12150f);
}
.offer-ribbon-img {
    max-height: 78px;
    width: auto;
    border-radius: 6px;
}

/* ---------- Google rating badge ---------- */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}
.rating-value {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}
.rating-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 0.9rem;
    line-height: 1;
}
/* Each star is a muted glyph with a clipped gold overlay, so 4.4 reads as 4.4 */
.rating-stars .star {
    position: relative;
    color: rgba(18, 21, 15, 0.2);
}
.rating-stars .star-fill {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    color: var(--gold, #f8bc24);
    white-space: nowrap;
}
.rating-meta {
    font-size: 0.76rem;
    color: var(--text-mute, rgba(18, 21, 15, 0.54));
    letter-spacing: 0.03em;
}

/* On the hero photograph the badge inverts to white */
.hero .rating-value,
.hero .rating-meta { color: var(--on-image, #fff); }
.hero .rating-stars .star { color: rgba(255, 255, 255, 0.35); }