/* ============================================
   SIPO Dynamic Component Styles
   Johny The Fishmonger — navy / yellow palette
   ============================================ */
:root {
    --sipo-navy: #0c2c56;
    --sipo-navy-2: #0b2342;
    --sipo-yellow: #ffd84d;
    --sipo-green: #0f5132;
    --sipo-red: #7f1d1d;
    --sipo-text: #1c2330;
    --sipo-muted: #6b7280;
    --sipo-card: #f7f8fb;
    --sipo-border: #e6e9ef;
    --strip-height: 34px;
}

/* ============ Status Strip ============ */
.status-strip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    background: var(--sipo-navy-2);
    color: #fff;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
    transition: background 0.3s ease;
}

.status-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.status-strip-text strong { color: var(--sipo-yellow); font-weight: 700; }

/* Two labels, one shown at a time — see _setStripText in statusManager.js.
   Narrow screens get the terse one so the bar never wraps to a second line. */
.strip-short { display: none; }
.strip-full { display: inline; }

.status-strip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: #94a3b8;
}

.status-strip.open { background: var(--sipo-green); }
.status-strip.open .status-strip-dot {
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: sipo-pulse 2s infinite;
}

.status-strip.closed { background: var(--sipo-red); }
.status-strip.closed .status-strip-dot { background: #fca5a5; }

.status-strip.error { background: var(--sipo-navy-2); }

@keyframes sipo-pulse {
    70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

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

@media (max-width: 700px) {
    .status-strip {
        font-size: 0.8rem;
        padding: 6px 12px;
        white-space: nowrap;
        overflow: hidden;
    }
    .strip-short { display: inline; }
    .strip-full { display: none; }
}

/* ============ Offer Modal ============ */
.sipo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 35, 66, 0.78);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.sipo-modal-overlay.active { opacity: 1; visibility: visible; }

.sipo-modal {
    background: var(--sipo-navy);
    color: #fff;
    padding: 2.4rem 2rem;
    border-radius: 20px;
    max-width: 430px;
    width: 100%;
    text-align: center;
    position: relative;
    transform: translateY(18px);
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(11, 35, 66, 0.45);
}
.sipo-modal-overlay.active .sipo-modal { transform: translateY(0); }

.sipo-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}
.sipo-modal-close:hover { opacity: 1; }

.sipo-modal-icon { margin-bottom: 1.1rem; }
.sipo-modal-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.8rem; }
.sipo-modal-text { font-size: 0.98rem; color: rgba(255, 255, 255, 0.85); margin: 0 0 1.6rem; }
.sipo-modal-img img { width: 100%; border-radius: 12px; margin-bottom: 1.4rem; }
.sipo-modal-btn { display: inline-block; width: 100%; }
.offer-modal { border: 2px solid var(--sipo-yellow); }
.offer-modal .sipo-modal-title { color: var(--sipo-yellow); }

/* ============ Opening hours (footer list) ============ */
#footer-hours {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.9rem;
}
#footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#footer-hours li:last-child { border-bottom: none; }
#footer-hours .day { opacity: 0.8; }
#footer-hours .time { text-align: right; }
#footer-hours li.today { color: var(--sipo-yellow); font-weight: 600; }
#footer-hours li.today .day { opacity: 1; }
#footer-hours .closed-day { opacity: 0.55; }

/* ============ Opening hours (row table) ============ */
.hours-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sipo-border);
    font-size: 0.94rem;
}
.hours-row:last-child { border-bottom: none; }
.hours-row .day { color: var(--sipo-text); }
.hours-row .time { text-align: right; color: var(--sipo-muted); }
.hours-row.today {
    background: #fffbe8;
    font-weight: 600;
}
.hours-row.today .time { color: var(--sipo-text); }
.hours-row .closed-day { opacity: 0.6; }

/* ============ Best-seller cards (injected) ============ */
.card-noimg {
    height: 170px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eaf3ff, #f7f8fb);
}
.card-noimg svg { width: 54px; height: 54px; fill: var(--sipo-navy); opacity: 0.18; }

.card-badge {
    display: inline-block;
    background: var(--sipo-yellow);
    color: #111;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 50px;
    margin-bottom: 8px;
}
.card-cat {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--sipo-muted);
    margin-top: 2px;
}
.card-price {
    margin-top: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sipo-navy);
}

/* ============ Today's Catch page ============ */
.catch-toolbar {
    position: sticky;
    top: calc(62px + var(--strip-height, 0px));
    z-index: 40;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sipo-border);
    padding: 14px 0 10px;
}
body:not(.has-status-strip) .catch-toolbar { top: 62px; }

.catch-toolbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
}

.catch-search-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.catch-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.catch-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    fill: var(--sipo-muted);
    pointer-events: none;
}
.catch-search input {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    padding: 11px 14px 11px 38px;
    border: 1px solid var(--sipo-border);
    border-radius: 10px;
    background: var(--sipo-card);
    color: var(--sipo-text);
}
.catch-search input:focus {
    outline: none;
    border-color: var(--sipo-navy);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(12, 44, 86, 0.1);
}

#catch-count {
    font-size: 0.86rem;
    color: var(--sipo-muted);
    white-space: nowrap;
}

.catch-pills {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
.catch-pills::-webkit-scrollbar { height: 5px; }
.catch-pills::-webkit-scrollbar-thumb { background: var(--sipo-border); border-radius: 5px; }

.catch-pill {
    flex: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 50px;
    border: 1px solid var(--sipo-border);
    background: #fff;
    color: var(--sipo-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.catch-pill:hover { border-color: var(--sipo-navy); }
.catch-pill.active {
    background: var(--sipo-navy);
    border-color: var(--sipo-navy);
    color: #fff;
}

.catch-section { margin-bottom: 40px; }
.catch-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    color: var(--sipo-navy);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sipo-yellow);
}
.catch-section-title span {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--sipo-muted);
    background: var(--sipo-card);
    border: 1px solid var(--sipo-border);
    border-radius: 50px;
    padding: 2px 9px;
}

.catch-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}
@media (max-width: 720px) {
    .catch-items { grid-template-columns: 1fr; }
}

.catch-item {
    display: grid;
    grid-template-columns: 46px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--sipo-card);
    border: 1px solid var(--sipo-border);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.catch-item:hover {
    border-color: rgba(12, 44, 86, 0.35);
    box-shadow: 0 4px 14px rgba(12, 44, 86, 0.07);
}

.catch-thumb {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    background: #eaf3ff;
    flex: none;
}
.catch-thumb-empty { display: grid; place-items: center; }
.catch-thumb-empty svg { width: 22px; height: 22px; fill: var(--sipo-navy); opacity: 0.22; }

.catch-name {
    font-size: 0.93rem;
    font-weight: 500;
    line-height: 1.35;
    min-width: 0;
}

.catch-price {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--sipo-navy);
    white-space: nowrap;
}
.catch-price-ask {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sipo-muted);
}

.catch-order {
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--sipo-navy);
    color: #fff;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.catch-order:hover { background: var(--sipo-yellow); color: #111; }

.catch-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sipo-muted);
}
.catch-empty p { margin: 0 0 18px; }

.catch-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--sipo-muted);
}
.catch-loading::after {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    margin: 16px auto 0;
    border: 3px solid var(--sipo-border);
    border-top-color: var(--sipo-navy);
    border-radius: 50%;
    animation: sipo-spin 0.8s linear infinite;
}
@keyframes sipo-spin { to { transform: rotate(360deg); } }

/* ============ Ordering disabled state ============ */
body.ordering-disabled .cta,
body.ordering-disabled [data-order-url] {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.6);
}