/*
Theme Name: Organio Child
Theme URI: http://demo.casethemes.net/organio/
Author: Case-Themes
Template: organio
Version: 1.6.1
*/

/* ==========================================================================
   HAYFA FOODS - DESIGN REFINEMENTS & LUXURY GOURMET AESTHETICS
   ========================================================================== */

/* 1. CARTES DE RÉASSURANCE HAUT DE GAMME (Pourquoi Acheter chez HAYFA) */
.ct-fancy-box-layout1 .item--inner {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1.5px solid #EFEAE3 !important;
    border-radius: 20px !important;
    padding: 35px 25px 30px 25px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    text-align: center !important;
    position: relative;
    overflow: hidden;
}

.ct-fancy-box-layout1 .item--inner:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(229, 147, 61, 0.16) !important;
    border-color: #E5933D !important;
}

/* Pastille icône élégante en dégradé HAYFA */
.ct-fancy-box-layout1 .item--icon.icon-psb {
    background: linear-gradient(135deg, #E5933D 0%, #D87B22 100%) !important;
    width: 72px !important;
    height: 72px !important;
    line-height: 72px !important;
    margin: 0 auto 22px auto !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 18px rgba(229, 147, 61, 0.28) !important;
    transition: transform 0.3s ease !important;
}

.ct-fancy-box-layout1 .item--inner:hover .item--icon.icon-psb {
    transform: scale(1.08) rotate(3deg) !important;
}

.ct-fancy-box-layout1 .item--icon i,
.ct-fancy-box-layout1 .item--icon svg {
    color: #FFFFFF !important;
    font-size: 32px !important;
    line-height: 1 !important;
}

/* Titres & Textes réassurance */
.ct-fancy-box-layout1 .item--title {
    color: #172B1E !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.2px;
}

.ct-fancy-box-layout1 .item--description {
    color: #555555 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}

/* 2. SECTION COMMUNAUTÉ / INSTAGRAM */
.elementor-element-36b049d img {
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
}

/* 3. POLISH PRODUITS & BOUTIQUE */
.woocommerce-product-inner.style-1 {
    background: #FFFFFF !important;
    border: 1px solid #F0ECE4 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}

.woocommerce-product-inner.style-1:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09) !important;
    border-color: #E5933D !important;
    transform: translateY(-4px) !important;
}

/* 4. BOUTON WHATSAPP FLOTTANT OU INTÉGRÉ */
.btn-whatsapp-hayfa {
    background: #25D366 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 14px 24px !important;
    font-size: 15px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-whatsapp-hayfa:hover {
    background: #1EBE5B !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.4) !important;
}

/* 5. FORMULAIRE DE CONTACT & CARTES DE CONTACT */
.hayfa-contact-card {
    background: #FFFFFF;
    border: 1.5px solid #F0ECE4;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    height: 100%;
}

.hayfa-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(229, 147, 61, 0.14);
    border-color: #E5933D;
}

.hayfa-contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* 6. GOOGLE MAP CONTAINER */
.hayfa-map-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #EAE5DE;
}

/* ==========================================================================
   7. BARRE DE NAVIGATION MOBILE FIXE (BOTTOM SHEET / BOTTOM NAVIGATION)
   ========================================================================== */
.hayfa-bottom-bar {
    display: none !important;
}

@media screen and (max-width: 991px) {
    /* Espace sous le body pour que le bas de page ne soit jamais masqué */
    body {
        padding-bottom: 70px !important;
    }

    .hayfa-bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-top: 1.5px solid rgba(229, 147, 61, 0.22) !important;
        box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08) !important;
        z-index: 999999 !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 0 4px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        margin: 0 !important;
    }

    .hayfa-bottom-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        height: 100% !important;
        text-decoration: none !important;
        color: #666666 !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .hayfa-bottom-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        margin-bottom: 3px !important;
    }

    .hayfa-bottom-icon svg {
        transition: stroke 0.2s ease, transform 0.2s ease !important;
    }

    .hayfa-bottom-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: -0.2px !important;
        line-height: 1 !important;
        transition: color 0.2s ease !important;
    }

    /* Onglet actif */
    .hayfa-bottom-item.is-active,
    .hayfa-bottom-item:active,
    .hayfa-bottom-item:hover {
        color: #E5933D !important;
    }

    .hayfa-bottom-item.is-active .hayfa-bottom-icon svg {
        stroke: #E5933D !important;
        transform: scale(1.08) !important;
    }

    .hayfa-bottom-item.is-active .hayfa-bottom-label {
        color: #E5933D !important;
        font-weight: 700 !important;
    }

    .hayfa-bottom-item.is-active::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 28px !important;
        height: 3px !important;
        background: #E5933D !important;
        border-radius: 0 0 4px 4px !important;
    }

    /* Badge Panier dynamique */
    .hayfa-cart-badge {
        position: absolute !important;
        top: -4px !important;
        right: -8px !important;
        background: #E5933D !important;
        color: #FFFFFF !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        min-width: 17px !important;
        height: 17px !important;
        line-height: 14px !important;
        border-radius: 9px !important;
        text-align: center !important;
        padding: 0 4px !important;
        border: 1.5px solid #FFFFFF !important;
        box-shadow: 0 2px 6px rgba(229, 147, 61, 0.4) !important;
        display: none !important;
    }

    .hayfa-cart-badge.has-items {
        display: inline-block !important;
    }

    /* ======================================================================
       8. OPTIMISATIONS RESPONSIVE GLOBALES POUR SMARTPHONE (<= 991px)
       ====================================================================== */

    /* Logo Header compact sur smartphone */
    #ct-header-wrap .ct-header-branding a img,
    .ct-logo-mobile img {
        max-height: 48px !important;
        width: auto !important;
    }

    /* Titres adaptés smartphone sans coupure brutale */
    h1, .page-title, .entry-title {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }

    h2 {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    /* Bannière titre de page */
    #pagetitle {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    #pagetitle .page-title {
        font-size: 24px !important;
    }

    /* Grille de produits WooCommerce 2 colonnes ergonomique */
    ul.products {
        display: flex !important;
        flex-wrap: wrap !important;
        margin: 0 -6px !important;
    }

    ul.products li.product {
        width: calc(50% - 12px) !important;
        margin: 0 6px 16px 6px !important;
        padding: 10px !important;
    }

    ul.products li.product .woocommerce-product-header img {
        height: auto !important;
        border-radius: 10px !important;
    }

    ul.products li.product .woocommerce-product--title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        min-height: 36px !important;
    }

    ul.products li.product .price {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    ul.products li.product .button {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    /* Fiche produit : bouton WhatsApp tactile */
    .single-product .button.alt {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }

    /* Panier & Checkout WooCommerce sur mobile */
    .woocommerce-cart table.cart,
    .woocommerce-cart table.cart thead {
        border: 0 !important;
    }

    .woocommerce-cart table.cart td.actions .coupon {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .woocommerce-cart table.cart td.actions .coupon input.input-text {
        width: 60% !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100% !important;
        float: none !important;
    }

    /* Cartes de contact et carte Google Map mobile */
    .hayfa-contact-card {
        margin-bottom: 15px !important;
    }

    .hayfa-map-frame iframe {
        height: 320px !important;
    }

    /* Cartes de réassurance mobile */
    .ct-fancy-box-layout1 .item--inner {
        margin-bottom: 15px !important;
        padding: 25px 15px !important;
    }

    /* Bouton retour en haut (scroll-to-top) décalé pour ne pas chevaucher la barre */
    .scroll-top {
        bottom: 74px !important;
    }
}