/* ==========================================================================
   OR Timeslots — Store status (top bar, hero line, shop card, cart notice)
   Uses Orpington Rasoi V2 tokens with fallbacks so it works in any theme.

   The "lamp" is the one expressive element: a small kitchen pass light.
   Open  = lit green with a slow breathing glow.
   Closed = unlit ring, pre-orders still possible.
   Paused = steady amber.
   ========================================================================== */

body.or-ts-has-bar {
    --or-ts-bar-h: 44px;
}

.or-ts-status {
    --or-ts-lamp: #A8A29E;
    --or-ts-glow: transparent;
    font-family: var(--font-body, 'Nunito Sans', -apple-system, sans-serif);
}

.or-ts-status.is-open   { --or-ts-lamp: #4ADE80; --or-ts-glow: rgba(74, 222, 128, 0.45); }
.or-ts-status.is-paused { --or-ts-lamp: #F59E0B; --or-ts-glow: rgba(245, 158, 11, 0.35); }

.or-ts-status__inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.or-ts-status__body { min-width: 0; flex: 1 1 auto; }

.or-ts-status__msg {
    margin: 0;
    line-height: 1.3;
}

.or-ts-time {
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-weight: 600;
    font-variant-numeric: lining-nums;
}

/* ── Lamp ── */

.or-ts-lamp {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--or-ts-lamp);
    box-shadow: 0 0 0 3px var(--or-ts-glow);
}

.or-ts-status.is-closed .or-ts-lamp,
.or-ts-status.is-unavailable .or-ts-lamp {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--or-ts-lamp);
}

@media (prefers-reduced-motion: no-preference) {
    .or-ts-status.is-open .or-ts-lamp {
        animation: or-ts-breathe 2.8s ease-in-out infinite;
    }
}

@keyframes or-ts-breathe {
    0%, 100% { box-shadow: 0 0 0 2px var(--or-ts-glow); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ── Bar: fixed strip above the site header ── */

.or-ts-status--bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1001;
    height: var(--or-ts-bar-h, 44px);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: var(--color-text, #1C1917);
    color: #F5F3F0;
    font-size: 0.8125rem;
}

.or-ts-status--bar .or-ts-status__inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.or-ts-status--bar .or-ts-status__msg {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.or-ts-status--bar .or-ts-time { color: #FFFFFF; }

.or-ts-status__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.875rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary, #C84B2F);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.or-ts-status__cta:hover,
.or-ts-status__cta:focus-visible { background: var(--color-primary-hover, #A83B22); color: #FFFFFF; }

.or-ts-status__cta:focus-visible,
.or-ts-status a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* Already on the menu — the CTA would link to the page you're on. */
body.woocommerce-shop .or-ts-status--bar .or-ts-status__cta { display: none; }

@media (min-width: 640px) {
    body.or-ts-has-bar { --or-ts-bar-h: 40px; }
    .or-ts-status--bar { font-size: 0.875rem; }
    .or-ts-status--bar .or-ts-status__inner { justify-content: center; }
    .or-ts-status--bar .or-ts-status__body { flex: 0 1 auto; }
    .or-ts-status--bar .or-ts-status__msg { -webkit-line-clamp: 1; }
}

/* ── Inline: one line, inherits colour (hero, anywhere) ── */

.or-ts-status--inline {
    display: inline-flex;
    font-size: 0.9375rem;
}

/* ── Card: shop page ── */

.or-ts-status--card {
    padding: 1rem 1.125rem;
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E7E5E4);
    border-radius: var(--radius-lg, 16px);
    color: var(--color-text, #1C1917);
}

.or-ts-status--card .or-ts-status__inner { align-items: flex-start; }
.or-ts-status--card .or-ts-lamp { margin-top: 0.4rem; }
.or-ts-status--card.is-closed .or-ts-lamp,
.or-ts-status--card.is-unavailable .or-ts-lamp { --or-ts-lamp: var(--color-text-secondary, #78716C); }
.or-ts-status--card.is-open .or-ts-lamp { --or-ts-lamp: var(--color-success, #15803D); }

.or-ts-status--card .or-ts-status__msg {
    font-family: var(--font-heading, 'Fraunces', Georgia, serif);
    font-size: 1.0625rem;
    font-weight: 500;
}

.or-ts-status--card .or-ts-time { font-weight: 700; }

.or-ts-status__services {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #78716C);
}

.or-ts-status__services li { display: flex; align-items: center; gap: 0.375rem; }
.or-ts-status__services i { color: var(--color-primary, #C84B2F); width: 1rem; text-align: center; }
.or-ts-status__when { color: var(--color-text, #1C1917); font-weight: 600; }

/* ── Notice: cart + checkout picker ── */

.or-ts-status--notice {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-primary-light, #FDF0EC);
    border-radius: var(--radius-md, 12px);
    color: var(--color-text, #1C1917);
    font-size: 0.9375rem;
}

.or-ts-status--notice.is-open { background: #F0FDF4; }
.or-ts-status--notice.is-open .or-ts-lamp { --or-ts-lamp: var(--color-success, #15803D); }
.or-ts-status--notice.is-closed .or-ts-lamp { --or-ts-lamp: var(--color-primary, #C84B2F); }

/* Keep the hidden attribute working against the display rules above. */
.or-ts-status__services li[hidden],
.or-ts-status__cta[hidden] { display: none; }

/* ── Make room for the bar ──
   The theme's header is position: fixed at the top, so the bar would sit on top
   of it. Push the header down by the bar's height and grow the body's top
   padding to match. Done here (not only in the theme) so the bar never covers
   the header, whichever theme version is live. Theme 2.5.0+ uses the same
   values, so the two agree. */
body.or-ts-has-bar {
    padding-top: calc(var(--header-height, 88px) + var(--or-ts-bar-h));
}

body.or-ts-has-bar .site-header {
    top: var(--or-ts-bar-h);
}

/* Logged-in staff: stack below the fixed WP admin bar (it only stays fixed above 600px). */
@media (min-width: 601px) {
    body.admin-bar .or-ts-status--bar { top: var(--wp-admin--admin-bar--height, 32px); }
    body.admin-bar.or-ts-has-bar .site-header {
        top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--or-ts-bar-h));
    }
}