/* ========================================================================
   Order Hours — Frontend Styles
   Uses CSS variables from Theme Settings for consistent branding.

   Ultima modificare: 2026-05-15 11:15
   Modificari:
     2026-05-15 11:15 — Bannerul = PRIMUL element pe pagina (deasupra meniului),
       JS-l insereaza inainte de .site-navbar. CSS ramane position:relative
       (curge natural cu pagina, navbar sticky preia top-ul la scroll).
     2026-05-15 11:00 — .oh-banner: scos position:sticky + z-index 1100 (nu mai
       trece peste header).
   ======================================================================== */

/* Closed message box — icon + text pe acelasi rand, cu spatiu intre ele */
.oh-closed-message {
    background: var(--color-primary-lightest);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--border-radius, 8px);
    padding: 12px 16px;
    color: var(--color-text, #333);
    font-size: 0.88rem;
    margin: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.oh-closed-message i {
    color: var(--color-primary);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.oh-closed-message > span,
.oh-closed-message > .oh-msg-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Banner countdown — apare ca PRIMUL element pe pagina (DEASUPRA meniului).
   JS-ul il insereaza inainte de .site-navbar. Curge natural cu pagina la scroll;
   navbar-ul sticky (daca e configurat) preia top-ul dupa ce bannerul iese din vedere. */
.oh-banner {
    position: relative;
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Force-closed banner — gradient mai accentuat + animatie subtila ca sa atraga atentia */
.oh-banner-force-closed {
    background: linear-gradient(135deg, #b3120f 0%, #7a0a08 100%);
    border-bottom: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(179, 18, 15, 0.35);
}
.oh-banner-force-closed i {
    animation: ohBannerPulse 2.4s ease-in-out infinite;
}
@keyframes ohBannerPulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50%      { transform: scale(1.18); opacity: 1; }
}

.oh-banner i {
    font-size: 0.9rem;
}

.oh-banner-text {
    opacity: 0.95;
}

/* Inline countdown text */
.oh-countdown-inline {
    display: inline;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-primary-dark);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* In banner context, countdown is white */
.oh-banner .oh-countdown-inline {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* Disabled add-to-cart button — pastram clickable ca sa fire intercept + toast */
.oh-btn-closed {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    /* NO pointer-events:none — vrem ca click sa declanseze toast-ul prin
       intercept din order-hours.js. Vizual ramane disabled prin opacity. */
}

/* Nu mai are nevoie de offset pt admin-bar pentru ca nu mai e sticky */

/* Mobile responsive */
@media (max-width: 768px) {
    .oh-banner {
        font-size: 0.78rem;
        padding: 8px 12px;
        flex-wrap: wrap;
    }

    .oh-closed-message {
        font-size: 0.82rem;
        padding: 10px 12px;
    }
}

/* ==========================================================================
   LOCKDOWN — site-ul ramane vizibil in spate (frosted glass blur), tintat
   subtil pe culoarea brandului. Card alb central cu logo + titlu + telefon.
   Nu mai e covor de culoare primary peste tot — design clean, premium.
   ========================================================================== */
html.oh-lockdown-active,
html.oh-lockdown-active body {
    overflow: hidden !important;
    height: 100vh !important;
}

.oh-lockdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Tint usor cu primary peste site-ul blurat — site-ul ramane recognoscibil */
    background:
        radial-gradient(circle at 70% 30%,
            color-mix(in srgb, var(--color-primary, #e63946) 14%, transparent) 0%,
            transparent 60%),
        color-mix(in srgb, var(--color-primary, #e63946) 8%, rgba(15, 10, 12, 0.32));
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    backdrop-filter: blur(14px) saturate(1.08);
    animation: ohLockdownFade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
}

/* Fallback pentru browsere fara backdrop-filter — overlay mai opac */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .oh-lockdown-overlay {
        background: color-mix(in srgb, var(--color-primary, #e63946) 24%, rgba(15, 8, 10, 0.65));
    }
}

@keyframes ohLockdownFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Decorative dot — poate fi gol, doar pentru placeholder DOM */
.oh-lockdown-overlay .oh-lockdown-bg { display: none; }

.oh-lockdown-card {
    position: relative;
    text-align: center;
    max-width: 580px;
    width: 100%;
    padding: 10px 18px 22px;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 36px 80px rgba(0, 0, 0, 0.32),
        0 14px 32px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #1a1a1a;
    animation: ohLockdownCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes ohLockdownCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* LOGO HERO — element MARE, dominanta vizuala */
.oh-lockdown-card .oh-lockdown-logo {
    max-height: 260px !important;
    max-width: 100% !important;
    width: auto;
    height: auto;
    margin: 0 auto 8px !important;
    display: block;
    /* Logo in culorile originale — fara filter, fara invert */
}

/* Iconita ceas — mica, badge sub logo */
.oh-lockdown-card .oh-lockdown-icon-wrap {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        var(--color-primary, #e63946) 0%,
        var(--color-primary-dark, #b30b1a) 100%);
    border-radius: 50%;
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--color-primary, #e63946) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.oh-lockdown-card .oh-lockdown-icon-wrap i {
    font-size: 20px;
    color: #fff;
    animation: ohLockdownClock 3s ease-in-out infinite;
}

@keyframes ohLockdownClock {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-6deg); }
    75%      { transform: rotate(6deg); }
}

/* Titlul — fortat dark cu specificitate mare ca sa bata h1{color:var(--color-text)}
   din main.css (var(--color-text) poate fi alb cand site-ul are tema dark) */
.oh-lockdown-card .oh-lockdown-title,
.oh-lockdown-overlay h1.oh-lockdown-title,
.oh-lockdown-overlay .oh-lockdown-title {
    font-size: clamp(1.6rem, 4.6vw, 2.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    margin: 0 0 10px !important;
    color: #0f1419 !important;
    letter-spacing: -0.02em !important;
    font-family: var(--font-family-heading, inherit) !important;
}

.oh-lockdown-card .oh-lockdown-message,
.oh-lockdown-overlay .oh-lockdown-message {
    font-size: clamp(0.95rem, 2.3vw, 1.05rem) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin: 0 auto 20px !important;
    color: #4b5563 !important;
    max-width: 420px !important;
}

/* Buton telefon — gradient primary, text alb VISIBIL pe orice fundal */
.oh-lockdown-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    background: linear-gradient(135deg,
        var(--color-primary, #e63946) 0%,
        var(--color-primary-dark, #b30b1a) 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 999px;
    border: none;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--color-primary, #e63946) 42%, transparent),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.oh-lockdown-phone:hover,
.oh-lockdown-phone:active,
.oh-lockdown-phone:focus,
.oh-lockdown-phone:visited {
    color: #fff !important;
    text-decoration: none !important;
}

.oh-lockdown-phone:hover,
.oh-lockdown-phone:active {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 16px 36px color-mix(in srgb, var(--color-primary, #e63946) 50%, transparent),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.oh-lockdown-phone i,
.oh-lockdown-phone span,
.oh-lockdown-phone strong {
    color: #fff !important;
}

.oh-lockdown-phone i {
    font-size: 1.05rem;
}

.oh-lockdown-phone strong {
    font-weight: 800;
    letter-spacing: 0.02em;
}

@media (max-width: 540px) {
    .oh-lockdown-card {
        padding: 8px 14px 18px;
        border-radius: 20px;
    }
    .oh-lockdown-card .oh-lockdown-logo {
        max-height: 180px !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }
    .oh-lockdown-card .oh-lockdown-icon-wrap {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
    .oh-lockdown-card .oh-lockdown-icon-wrap i {
        font-size: 18px;
    }
    .oh-lockdown-card .oh-lockdown-message,
    .oh-lockdown-overlay .oh-lockdown-message {
        margin-bottom: 16px !important;
    }
    .oh-lockdown-phone {
        padding: 12px 22px;
        font-size: 0.94rem;
    }
}