/* ======================================================================
   OVANIE — NAVBAR PUBLIQUE UNIFIÉE
   Référence visuelle : navbar de la page d'accueil.
   Chargée globalement par layouts/guest.blade.php après les CSS de page.
====================================================================== */

:root {
    --ov-navbar-orange: #ff6600;
}

html body .ovanie-header {
    background: linear-gradient(180deg, #00163b 0%, #00122f 100%) !important;
    box-shadow: none !important;
}

html body .ovanie-header .ovanie-header__wrap {
    width: min(calc(100% - 64px), 1480px) !important;
}

html body .ovanie-header .ovanie-header__main {
    height: 64px !important;
    grid-template-columns: 305px minmax(460px, 1fr) 380px !important;
    gap: 16px !important;
}

html body .ovanie-header .ovanie-header__logo img {
    width: 145px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Téléphone */
html body .ovanie-header .ovanie-header__phone {
    max-width: 156px !important;
    animation: ovNavbarPhoneFloat 1.6s ease-in-out infinite !important;
    transform-origin: center center;
    will-change: transform;
}

html body .ovanie-header .ovanie-header__phone-icon {
    position: relative;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 102, 0, .10) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 0 0 0 rgba(255, 102, 0, .35) !important;
    animation: ovNavbarPhonePulse 1.25s ease-out infinite !important;
}

html body .ovanie-header .ovanie-header__phone-icon::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(255, 102, 0, .55);
    border-radius: 999px;
    pointer-events: none;
    animation: ovNavbarPhoneRing 1.25s ease-out infinite !important;
}

html body .ovanie-header .ovanie-header__phone-icon svg,
html body .ovanie-header .ovanie-header__phone-icon i {
    width: 20px !important;
    height: 20px !important;
    animation: ovNavbarPhoneShake .82s ease-in-out infinite !important;
    transform-origin: center center;
}

html body .ovanie-header .ovanie-header__phone-label {
    font-size: 10px !important;
    color: rgba(255, 255, 255, .82) !important;
}

html body .ovanie-header .ovanie-header__phone-number {
    font-size: 13px !important;
    letter-spacing: .2px !important;
    animation: ovNavbarPhoneGlow 1.25s ease-in-out infinite alternate !important;
}

@keyframes ovNavbarPhoneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes ovNavbarPhoneShake {
    0%, 100% { transform: rotate(-10deg); }
    20% { transform: rotate(11deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-4deg); }
}

@keyframes ovNavbarPhonePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, .40); }
    70% { box-shadow: 0 0 0 9px rgba(255, 102, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); }
}

@keyframes ovNavbarPhoneRing {
    0% { transform: scale(.82); opacity: .85; }
    75%, 100% { transform: scale(1.30); opacity: 0; }
}

@keyframes ovNavbarPhoneGlow {
    from { text-shadow: 0 0 0 rgba(255, 102, 0, 0); }
    to { text-shadow: 0 0 10px rgba(255, 102, 0, .55); }
}

/* Recherche marketplace */
html body .ovanie-header form.ovanie-search {
    position: relative !important;
    display: grid !important;
    align-items: stretch !important;
    grid-template-columns: 170px minmax(220px, 1fr) 52px !important;
    min-height: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html body .ovanie-header form.ovanie-search:focus-within {
    border-color: rgba(255, 102, 0, .95) !important;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .18), 0 10px 28px rgba(0, 0, 0, .26) !important;
    transform: translateY(-1px);
}

html body .ovanie-header form.ovanie-search select {
    width: 170px !important;
    min-width: 170px !important;
    height: 100% !important;
    padding: 0 38px 0 16px !important;
    border: 0 !important;
    border-right: 1px solid #e4e7ec !important;
    border-radius: 0 !important;
    background-color: #f8fafc !important;
    color: #101828 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

html body .ovanie-header form.ovanie-search input {
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 18px !important;
    border: 0 !important;
    background: #fff !important;
    color: #101828 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

html body .ovanie-header form.ovanie-search input::placeholder {
    color: #98a2b3 !important;
    font-weight: 600 !important;
}

html body .ovanie-header form.ovanie-search button {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #ff710f 0%, #f45a00 100%) !important;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .06) !important;
    line-height: 0 !important;
}

html body .ovanie-header form.ovanie-search button:hover {
    filter: brightness(1.06) !important;
}

html body .ovanie-header form.ovanie-search button svg,
html body .ovanie-header form.ovanie-search button i {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto !important;
    transform: none !important;
    stroke-width: 2.4 !important;
}

/* Actions */
html body .ovanie-header .ovanie-header__actions {
    gap: 14px !important;
}

html body .ovanie-header .ovanie-account__small,
html body .ovanie-header .ovanie-action__small {
    font-size: 9px !important;
}

html body .ovanie-header .ovanie-account__strong,
html body .ovanie-header .ovanie-action__strong {
    font-size: 11px !important;
}

html body .ovanie-header .ovanie-cart svg,
html body .ovanie-header .ovanie-cart i {
    width: 30px !important;
    height: 30px !important;
}

/* Navigation secondaire */
html body .ovanie-header .ovanie-nav {
    min-height: 42px !important;
    height: 42px !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    gap: 0 !important;
    justify-content: space-between !important;
}

html body .ovanie-header .ovanie-nav__categories,
html body .ovanie-header .ovanie-nav__link,
html body .ovanie-header .ovanie-nav-dropdown__trigger,
html body .ovanie-header .ovanie-nav__link--button {
    height: 42px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body .ovanie-header .ovanie-nav__categories {
    padding-left: 0 !important;
}

html body .ovanie-header .ovanie-nav__delivery-bubble {
    height: 32px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: var(--ov-navbar-orange) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body .ovanie-header .ovanie-nav__new {
    padding: 2px 7px !important;
    border-radius: 4px !important;
    color: #fff !important;
    background: #64c800 !important;
    font-size: 9px !important;
}

/* Grand desktop : structure identique à l'accueil */
@media (min-width: 1281px) {
    html body .ovanie-header .ovanie-header__wrap {
        width: min(calc(100% - 40px), 1680px) !important;
        overflow: visible !important;
    }

    html body .ovanie-header .ovanie-header__main {
        display: grid !important;
        grid-template-columns: minmax(350px, 430px) minmax(320px, 1fr) minmax(300px, 330px) !important;
        grid-template-rows: 76px !important;
        align-items: center !important;
        gap: 14px !important;
        height: 76px !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body .ovanie-header .ovanie-header__logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    html body .ovanie-header .ovanie-header__phone {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        max-width: 182px !important;
    }

    html body .ovanie-header form.ovanie-search {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        grid-template-columns: minmax(145px, 185px) minmax(160px, 1fr) 54px !important;
    }

    html body .ovanie-header .ovanie-header__actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(116px, 1fr) 88px 48px !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    html body .ovanie-header .ovanie-cart {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        overflow: visible !important;
    }
}

/* Tablette paysage / petit desktop */
@media (min-width: 981px) and (max-width: 1280px) {
    html body .ovanie-header .ovanie-header__wrap {
        width: min(calc(100% - 28px), 1240px) !important;
        overflow: visible !important;
    }

    html body .ovanie-header .ovanie-header__main {
        display: grid !important;
        grid-template-columns: 190px minmax(0, 1fr) 294px !important;
        grid-template-rows: 52px 46px !important;
        align-items: center !important;
        column-gap: 12px !important;
        row-gap: 7px !important;
        height: auto !important;
        min-height: 112px !important;
        padding: 5px 0 8px !important;
        overflow: visible !important;
    }

    html body .ovanie-header .ovanie-header__logo {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    html body .ovanie-header .ovanie-header__logo img {
        width: 170px !important;
        max-width: 100% !important;
    }

    html body .ovanie-header .ovanie-header__phone {
        display: none !important;
    }

    html body .ovanie-header .ovanie-header__actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(116px, 1fr) 86px 44px !important;
        gap: 7px !important;
        justify-self: end !important;
        width: 294px !important;
        min-width: 294px !important;
        max-width: 294px !important;
        overflow: visible !important;
    }

    html body .ovanie-header form.ovanie-search {
        position: relative !important;
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        grid-template-columns: minmax(150px, 190px) minmax(180px, 1fr) 52px !important;
        z-index: 2 !important;
        overflow: hidden !important;
    }

    html body .ovanie-header form.ovanie-search select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 10.5px !important;
        padding-left: 12px !important;
    }

    html body .ovanie-header form.ovanie-search input {
        font-size: 11.5px !important;
        padding-inline: 14px !important;
    }

    html body .ovanie-header .ovanie-nav {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html body .ovanie-header .ovanie-nav::-webkit-scrollbar {
        display: none !important;
    }

    html body .ovanie-header .ovanie-nav__link,
    html body .ovanie-header .ovanie-nav__categories {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    html body .ovanie-header .ovanie-cart {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        overflow: visible !important;
    }
}

/* Mobile : même structure à deux lignes que l'accueil */
@media (max-width: 980px) {
    html body header.ovanie-header {
        position: relative !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html body header.ovanie-header .ovanie-header__wrap {
        display: block !important;
        width: min(calc(100% - 20px), 960px) !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    html body header.ovanie-header .ovanie-header__main {
        display: grid !important;
        grid-template-columns: 42px minmax(86px, 118px) minmax(0, 1fr) 42px !important;
        grid-template-rows: 42px 44px !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        min-height: 112px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px 0 10px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body header.ovanie-header .ovanie-header__phone {
        display: none !important;
    }

    html body header.ovanie-header form.ovanie-search {
        position: relative !important;
        grid-column: 1 / 5 !important;
        grid-row: 2 !important;
        align-self: stretch !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        margin: 0 !important;
        transform: none !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        z-index: 5 !important;
        overflow: hidden !important;
    }

    html body header.ovanie-header form.ovanie-search select {
        display: none !important;
    }

    html body header.ovanie-header form.ovanie-search input {
        font-size: 11px !important;
        padding-inline: 13px !important;
    }

    html body header.ovanie-header form.ovanie-search button {
        width: 46px !important;
        min-width: 46px !important;
    }
}

@media (max-width: 520px) {
    html body header.ovanie-header .ovanie-header__main {
        grid-template-columns: 38px minmax(78px, 102px) minmax(0, 1fr) 38px !important;
        grid-template-rows: 38px 42px !important;
        column-gap: 6px !important;
        row-gap: 7px !important;
        min-height: 102px !important;
        padding: 7px 0 8px !important;
    }

    html body header.ovanie-header form.ovanie-search {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }

    html body header.ovanie-header form.ovanie-search button {
        width: 42px !important;
        min-width: 42px !important;
    }
}