/* =====================================================================
   OhMyBread — LIVRAISON_001 : Hub contextuel mobile
   Fichier : woostify-child/css/livraison.css
   Portee :  pages 3800, 3808, 3806 (enqueue conditionnel)
   Design tokens : --omb-coral:#FF6B6B, --omb-navy:#2C3E50,
                   --omb-cream:#FFF8F3, --omb-rose-powder:#FFE5E5
   Added: Mars 2026
   ===================================================================== */

/* ---------------------------------------------------------------
   GLOBAL : masquer le hub sur desktop — visible uniquement mobile
   --------------------------------------------------------------- */
.omb-livraison-hub {
    display: none;
}

/* Masquer le formulaire waitlist sur desktop (redondant avec commune checker) */
.omb-livraison-waitlist {
    display: none;
}

/* ---------------------------------------------------------------
   @media (max-width: 430px) — toutes les regles mobiles
   --------------------------------------------------------------- */
@media (max-width: 430px) {

    /* -- Afficher le hub + masquer le bloc wp:html existant -- */
    .omb-livraison-hub {
        display: block;
        padding: 12px 16px 80px; /* 80px clearance bottom nav */
        box-sizing: border-box;
    }

    .delivery-zones-section {
        display: none !important;
    }

    /* ==============================================================
       BANNIERE prochaine livraison
       Identique a .omb-mobile-next-delivery (MOBILE_007, Mon Compte)
       ============================================================== */
    .omb-livraison-banner {
        background: var(--omb-cream, #FFF8F3);
        border: 1px solid var(--omb-rose-powder, #FFE5E5);
        border-left: 4px solid var(--omb-coral, #FF6B6B);
        border-radius: 0 12px 12px 0;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .omb-livraison-banner__label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--omb-coral, #FF6B6B);
        margin-bottom: 6px;
    }

    .omb-livraison-banner__body {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--omb-navy, #2C3E50);
        line-height: 1.6;
    }

    .omb-livraison-banner__date {
        font-size: 14px;
        font-weight: 500;
        color: var(--omb-navy, #2C3E50);
    }

    .omb-livraison-banner__date strong {
        font-weight: 700;
    }

    .omb-livraison-banner__slot {
        font-weight: 400;
        color: var(--omb-navy, #2C3E50);
    }

    .omb-livraison-banner__sep {
        color: #aaa;
        margin: 0 2px;
    }

    .omb-livraison-banner__countdown {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        color: var(--omb-coral, #FF6B6B);
        min-width: 10px;
    }

    /* Skeleton shimmer pendant le calcul JS */
    .omb-shimmer {
        min-width: 80px;
        height: 14px;
        background: linear-gradient(90deg, #FFE5E5 25%, #FFF0F0 50%, #FFE5E5 75%);
        background-size: 200% 100%;
        animation: omb-shimmer-liv 1.5s infinite;
        border-radius: 4px;
        vertical-align: middle;
        color: transparent;
        user-select: none;
    }

    @keyframes omb-shimmer-liv {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ==============================================================
       TITRE DE SECTION (commandes a venir)
       Identique aux section titles EDITADDR / EDITACCT
       ============================================================== */
    .omb-livraison-section-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--omb-navy, #2C3E50) !important;
        margin: 0 0 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 2px solid var(--omb-rose-powder, #FFE5E5) !important;
        line-height: 1.3 !important;
    }

    /* ==============================================================
       CARTES COMMANDES A VENIR
       ============================================================== */
    .omb-livraison-orders {
        margin-bottom: 8px;
    }

    .omb-livraison-order {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .omb-livraison-order:active {
        border-color: var(--omb-coral, #FF6B6B);
        box-shadow: 0 4px 16px rgba(255, 107, 107, 0.15);
    }

    .omb-livraison-order__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .omb-livraison-order__num {
        font-size: 14px;
        font-weight: 700;
        color: var(--omb-coral, #FF6B6B);
    }

    /* Badge statut — identique a .omb-mobile-next-delivery__status */
    .omb-livraison-order__badge {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        background: rgba(255, 107, 107, 0.15);
        color: var(--omb-coral, #FF6B6B);
    }

    .omb-livraison-order__badge--processing {
        background: rgba(44, 102, 45, 0.1);
        color: #2c662d;
    }

    .omb-livraison-order__badge--completed {
        background: rgba(44, 102, 45, 0.1);
        color: #2c662d;
    }

    .omb-livraison-order__badge--on-hold {
        background: rgba(255, 107, 107, 0.1);
        color: var(--omb-coral, #FF6B6B);
    }

    .omb-livraison-order__badge--pending {
        background: rgba(255, 107, 107, 0.15);
        color: var(--omb-coral, #FF6B6B);
    }

    .omb-livraison-order__date {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--omb-navy, #2C3E50) !important;
        margin: 0 0 4px !important;
    }

    .omb-livraison-order__meta {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #666 !important;
        margin: 0 0 10px !important;
    }

    .omb-livraison-order__sep {
        color: #aaa;
    }

    /* Bouton "Voir details" — style outline coral pill */
    .omb-livraison-order__btn {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        color: var(--omb-coral, #FF6B6B) !important;
        border: 1.5px solid var(--omb-coral, #FF6B6B) !important;
        border-radius: 50px !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
    }

    .omb-livraison-order__btn:active {
        background: var(--omb-coral, #FF6B6B) !important;
        color: #fff !important;
    }

    /* Lien "Voir toutes mes commandes" */
    .omb-livraison-orders__view-all {
        display: block !important;
        text-align: center !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--omb-coral, #FF6B6B) !important;
        text-decoration: underline !important;
        padding: 8px 0 !important;
        margin-top: 4px !important;
        min-height: 44px !important;
        line-height: 44px !important;
    }

    /* ==============================================================
       ETAT VIDE (client connecte sans commande a venir)
       Identique a .omb-orders-empty (Mon Compte, ORDERS)
       ============================================================== */
    .omb-livraison-empty {
        background: var(--omb-cream, #FFF8F3);
        border: 1px solid var(--omb-rose-powder, #FFE5E5);
        border-radius: 12px;
        padding: 32px 16px;
        text-align: center;
    }

    .omb-livraison-empty__icon {
        display: block;
        margin: 0 auto 12px;
        line-height: 1;
    }

    .omb-livraison-empty__text {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #666 !important;
        margin: 0 0 16px !important;
        line-height: 1.5 !important;
    }

    .omb-livraison-empty__cta {
        display: inline-block !important;
        background: var(--omb-coral, #FF6B6B) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 12px 24px !important;
        min-height: 48px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }

    .omb-livraison-empty__cta:active {
        background: var(--omb-navy, #2C3E50) !important;
        color: #fff !important;
    }

    /* ==============================================================
       FORMULAIRE WAITLIST (visiteur anonyme uniquement)
       ============================================================== */
    .omb-livraison-waitlist {
        background: linear-gradient(135deg, var(--omb-rose-powder, #FFE5E5) 0%, #FFF0F0 100%);
        border: 1px solid rgba(255, 107, 107, 0.15);
        border-radius: 12px;
        padding: 20px 16px;
        margin-top: 16px;
    }

    .omb-livraison-waitlist__title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--omb-navy, #2C3E50) !important;
        margin: 0 0 12px !important;
        text-align: left !important;
        line-height: 1.4 !important;
    }

    .omb-livraison-waitlist__form {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .omb-livraison-waitlist__field-wrap {
        position: relative;
    }

    .omb-livraison-waitlist__input {
        display: block !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        border: 1.5px solid rgba(44, 62, 80, 0.2) !important;
        border-radius: 8px !important;
        padding: 0 14px !important;
        font-size: 15px !important;
        color: var(--omb-navy, #2C3E50) !important;
        background: #fff !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease !important;
        -webkit-appearance: none !important;
    }

    .omb-livraison-waitlist__input::placeholder {
        color: #999 !important;
    }

    .omb-livraison-waitlist__input:focus {
        border-color: var(--omb-coral, #FF6B6B) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15) !important;
    }

    .omb-livraison-waitlist__input--error {
        border-color: #e74c3c !important;
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15) !important;
    }

    .omb-livraison-waitlist__field-error {
        display: block !important;
        font-size: 12px !important;
        color: #e74c3c !important;
        margin-top: 4px !important;
        min-height: 16px !important;
    }

    /* Bouton waitlist — pill coral pleine largeur */
    .omb-livraison-waitlist__btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: var(--omb-coral, #FF6B6B) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 50px !important;
        padding: 12px 24px !important;
        min-height: 48px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        margin-top: 4px !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
    }

    .omb-livraison-waitlist__btn:active {
        background: var(--omb-navy, #2C3E50) !important;
    }

    .omb-livraison-waitlist__btn:disabled {
        opacity: 0.7 !important;
        cursor: not-allowed !important;
    }

    /* Etat de succes (remplace le form) */
    .omb-livraison-waitlist__success {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: #fff;
        border: 1px solid rgba(44, 102, 45, 0.3);
        border-radius: 8px;
        padding: 14px 16px;
    }

    .omb-livraison-waitlist__success-icon {
        flex-shrink: 0;
        line-height: 1;
        margin-top: 1px;
    }

    .omb-livraison-waitlist__success-text {
        font-size: 13px;
        color: var(--omb-navy, #2C3E50);
        line-height: 1.5;
    }

    /* Etat d'erreur serveur */
    .omb-livraison-waitlist__server-error {
        background: rgba(231, 76, 60, 0.08);
        border: 1px solid rgba(231, 76, 60, 0.3);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 13px;
        color: #c0392b;
        margin-top: 8px;
    }

    /* ==============================================================
       MASQUAGE CSS PAR ETAT CONNEXION
       body.logged-in (WordPress natif) masque les sections non pertinentes.
       ============================================================== */

    /* Stats bar : masquee pour TOUS sur mobile (LIV-19) */
    .stats-bar {
        display: none !important;
    }

    /* Sections existantes masquees pour les connectes */
    body.logged-in .search-container,
    body.logged-in .zones-content,
    body.logged-in .communes-list,
    body.logged-in .cta-container {
        display: none !important;
    }

    /* Hub guest masque pour les connectes (double securite) */
    body.logged-in .omb-livraison-hub__guest {
        display: none !important;
    }

    /* Hub loggedin masque pour les anonymes (double securite) */
    body:not(.logged-in) .omb-livraison-hub__loggedin {
        display: none !important;
    }

    /* ==============================================================
       RESTYLING DU CHAMP DE RECHERCHE EXISTANT (visiteur anonyme)
       Classes du bloc wp:html : .search-box, .communes-grid, .commune-card
       ============================================================== */

    /* Champ de recherche commune */
    #communeSearch,
    .search-box {
        height: 48px !important;
        min-height: 48px !important;
        border: 1.5px solid rgba(44, 62, 80, 0.2) !important;
        border-radius: 8px !important;
        padding: 0 40px 0 14px !important;
        font-size: 15px !important;
        color: var(--omb-navy, #2C3E50) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease !important;
        background: #fff !important;
        -webkit-appearance: none !important;
    }

    #communeSearch:focus,
    .search-box:focus {
        border-color: var(--omb-coral, #FF6B6B) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15) !important;
    }

    /* Grille communes : 2 colonnes */
    .communes-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    /* Cartes communes */
    .commune-card {
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        padding: 10px 12px !important;
        transition: border-color 0.15s ease !important;
    }

    .commune-card .commune-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--omb-navy, #2C3E50) !important;
        display: block !important;
    }

    .commune-card .commune-postal {
        font-size: 11px !important;
        color: #666 !important;
        display: block !important;
    }

    /* Commune en cours de match (search active) */
    .commune-card.matched,
    .commune-card:has(> .matched) {
        border-color: var(--omb-coral, #FF6B6B) !important;
        background: #FFF8F3 !important;
    }

} /* end @media (max-width: 430px) */