/* ============================================
   SIPO API component styles — Scarface Pizzeria
   ============================================
   Everything here styles markup that the `api/`
   modules inject or render at runtime. Colours
   come from the tokens in css/style.css, so this
   file carries no palette of its own.
   ============================================ */

/* ---------- Status strip (statusManager.js) ---------- */
.status-strip {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--ink);
    color: var(--white);
    font-family: var(--display);
    letter-spacing: .05em;
    font-size: 1.05rem;
    text-align: center;
    padding: .5rem 0;
    border-bottom: 3px solid var(--ink);
}
.status-strip.open { background: var(--green); border-bottom-color: var(--green-dk); }
.status-strip.closed { background: var(--red); border-bottom-color: var(--red-dk); }
.status-strip.error { background: var(--ink); }
.status-strip-inner {
    width: var(--shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}
.status-strip-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}
.countdown-timer { font-variant-numeric: tabular-nums; }

/* The strip and the site header are both sticky, so the header has to be
   offset by the strip's measured height (statusManager.js sets the variable)
   or the two would land on top of each other at the top of the viewport. */
body.has-status-strip .site-head { top: var(--strip-height, 0px); }
body.has-status-strip .menu-nav { top: calc(var(--strip-height, 0px) + 92px); }
body.has-status-strip { scroll-padding-top: calc(var(--strip-height, 0px) + 100px); }
@media (max-width: 820px) {
    body.has-status-strip .menu-nav { top: calc(var(--strip-height, 0px) + 78px); }
    body.has-status-strip { scroll-padding-top: calc(var(--strip-height, 0px) + 86px); }
}

/* ---------- Status chip + today's hours ---------- */
[data-field="status"] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--display);
    letter-spacing: .04em;
    font-size: 1.1rem;
    padding: .3rem .85rem;
    border: 3px solid currentColor;
    color: var(--ink);
}
[data-field="status"] .dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
[data-field="status"].is-open { color: var(--green); }
[data-field="status"].is-closed { color: var(--red); }

/* ---------- Service pills ---------- */
[data-field="services"] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: inherit;
}
.service-pill {
    font-family: var(--display);
    letter-spacing: .06em;
    font-size: .95rem;
    padding: .18rem .7rem;
    background: var(--green);
    color: var(--white);
}

/* ---------- Address + alert ---------- */
.address-link { text-decoration: none; border-bottom: 2px solid var(--red); }
.address-link:hover { color: var(--red); }

[data-field="alert"] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    background: var(--yellow);
    border: 3px solid var(--ink);
    padding: .8rem 1rem;
    font-weight: 600;
    color: var(--ink);
}
.alert-mark { color: var(--red); font-size: 1.1rem; line-height: 1.3; }

/* ---------- Opening hours ---------- */
[data-field="hours-list"], #footer-hours {
    list-style: none;
    margin: 0;
    padding: 0;
}
[data-field="hours-list"] li, #footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    font-weight: 600;
    font-size: .97rem;
}
.hours-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 2px dotted rgba(17, 17, 17, .25);
    font-weight: 600;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .day, [data-field="hours-list"] li .day { white-space: nowrap; }
.hours-row .time, [data-field="hours-list"] li .time { text-align: right; }
.hours-row.today, [data-field="hours-list"] li.today, #footer-hours li.today {
    color: var(--red);
    font-weight: 800;
}
.hours-row.today .day::after, [data-field="hours-list"] li.today .day::after {
    content: " · today";
    font-weight: 600;
    font-size: .85em;
}
.closed-day { color: var(--ink-soft); font-weight: 600; }
.next-day {
    display: inline-block;
    margin-left: .4rem;
    font-family: var(--display);
    font-size: .72rem;
    letter-spacing: .06em;
    padding: .05rem .35rem;
    background: var(--orange);
    color: var(--white);
    vertical-align: middle;
}

/* ---------- Loading / empty ---------- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 2.5rem 0;
    font-weight: 600;
    color: var(--ink-soft);
}
.spinner {
    width: 20px; height: 20px;
    border: 3px solid rgba(17, 17, 17, .18);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: sipo-spin .7s linear infinite;
}
@keyframes sipo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.menu-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    font-weight: 600;
}
.menu-empty a { color: var(--red); }

/* ---------- Popular dish cards (home) ---------- */
.dish-card {
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 rgba(17, 17, 17, .16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dish-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 4px solid var(--ink);
}
.dish-media img { width: 100%; height: 100%; object-fit: cover; }
.dish-media.is-empty {
    display: grid;
    place-items: center;
    background: var(--yellow);
}
.dish-mark {
    display: grid;
    place-items: center;
    gap: .4rem;
    color: var(--red);
}
.dish-mark svg { width: 34px; height: 34px; }
.dish-mark-text {
    font-family: var(--display);
    letter-spacing: .06em;
    font-size: .9rem;
}
.dish-badge {
    position: absolute;
    top: .6rem; left: .6rem;
    font-family: var(--display);
    letter-spacing: .05em;
    font-size: .88rem;
    padding: .15rem .6rem;
    background: var(--red);
    color: var(--white);
}
.dish-body {
    padding: 1.1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dish-body h3 { color: var(--red); margin-bottom: .3rem; }
.dish-body p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 1rem; }
.dish-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
}
.dish-order {
    font-family: var(--display);
    letter-spacing: .05em;
    font-size: 1.05rem;
    text-decoration: none;
    padding: .4rem 1rem;
    background: var(--green);
    color: var(--white);
    border: 2px solid var(--green);
}
.dish-order:hover { background: var(--green-dk); border-color: var(--green-dk); }

/* ---------- Prices ---------- */
.dish-prices { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.size-price {
    font-family: var(--display);
    letter-spacing: .03em;
    font-size: 1.15rem;
    color: var(--red);
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
}
.size-price em {
    font-style: normal;
    font-family: var(--body);
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
}
.size-price.single { font-size: 1.25rem; }

/* ---------- Menu page (app.js → MenuPage) ---------- */
#api-menu-tabs {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding: .7rem 0;
    scrollbar-width: none;
}
#api-menu-tabs::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: none;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--display);
    letter-spacing: .04em;
    font-size: 1.12rem;
    color: var(--white);
    padding: .35rem .9rem;
    border: 2px solid rgba(255, 255, 255, .5);
    transition: .15s;
}
.cat-chip:hover { border-color: var(--white); }
.cat-chip.active { background: var(--yellow); border-color: var(--yellow); color: var(--red); }

.menu-section { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; }
.menu-section:nth-of-type(even) { background: var(--yellow); }
.menu-section > * { width: var(--shell); margin-inline: auto; }
.menu-section-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}
.menu-section-head h2 { color: var(--red); }
.menu-section-count {
    font-family: var(--display);
    letter-spacing: .06em;
    font-size: 1rem;
    color: var(--green);
}

.dish-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 0 3rem;
}
.dish-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 2px dotted rgba(17, 17, 17, .3);
}
.dish-thumb {
    flex: none;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 3px solid var(--ink);
}
.dish-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dish-info { flex: 1; min-width: 0; }
.dish-info h3 {
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: .15rem;
}
.dish-info p {
    font-size: .95rem;
    color: var(--ink-soft);
    margin: 0;
    max-width: 50ch;
}
.dish-options {
    font-size: .85rem !important;
    color: var(--green) !important;
    font-weight: 600;
    margin-top: .25rem !important;
}
.dish-row .dish-prices {
    flex: none;
    justify-content: flex-end;
    text-align: right;
    flex-direction: column;
    gap: .1rem;
}
.dish-row .size-price { justify-content: flex-end; }

@media (max-width: 560px) {
    .dish-list { grid-template-columns: 1fr; }
    .dish-thumb { width: 62px; height: 62px; }
    .status-strip { font-size: .95rem; }
}