/* ====================================================================
   WOOFOOD — QUICKVIEW PRODUCT POPUP (refactor propre)
   --------------------------------------------------------------------
   Architecture flexbox claire :
   .modal__overlay (fixed, full viewport, blur backdrop)
     └─ .content (card centrée, flex column, max 560×90vh)
         ├─ .modal__header  (flex: 0 0 auto)  → titre + close X
         ├─ .modal__container (flex: 1 1 auto, overflow-y auto)
         │   └─ .modal__content
         │       ├─ .column-50-wf.image-column  → image produit
         │       └─ .column-50-wf  → prix, description, options, qty, bouton
         └─ .modal__footer  (flex: 0 0 auto)  → vide, sert d'ancrage visuel

   Le bouton "Ajouter au panier" est extrait visuellement via
   position: sticky bottom 0 sur le bouton lui-même. La zone scrollable
   a un padding-bottom suffisant pour ne JAMAIS cacher la quantité.

   Palette bistro :
     #1A1A1A charbon  •  #FAFAF7 crème  •  #D4A017 moutarde  •  #E5E1D8 bordure
   ==================================================================== */


/* --------------------------------------------------------------------
   0. NOTIFICATION ajout panier (cart_notice)
   -------------------------------------------------------------------- */
.wf_cart_notice {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    color: #2E7D32;
    background: #FAFAF7;
    border: 1px solid #2E7D32;
    border-radius: 8px;
    padding: 14px 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    margin: 0;
    z-index: 10000000;
    display: none;
    opacity: 0;
    transition: opacity 0.2s linear, transform 0.2s linear;
}


/* --------------------------------------------------------------------
   1. MODAL OVERLAY — voile derrière la carte
   -------------------------------------------------------------------- */
.modal.wf_product_view,
.modal.wf_category_view {
    z-index: 9999999;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Le voile (.modal__overlay) est déjà stylé dans default.css.
   On surcharge ici pour le centrage flex + le padding autour de la carte. */
.wf_product_view .modal__overlay,
.wf_category_view .modal__overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}


/* --------------------------------------------------------------------
   2. LA CARTE — wrapper du contenu AJAX (.content)
   -------------------------------------------------------------------- */
.wf_product_view .content {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    height: auto;
    overflow: hidden;          /* le scroll interne se fait dans modal__container */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;        /* ancre pour le bouton .single_add_to_cart_button absolu */
}


/* --------------------------------------------------------------------
   3. HEADER — titre du produit + bouton fermer
   -------------------------------------------------------------------- */
.wf_product_view .modal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    margin: 0;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E1D8;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    position: relative;
}

.wf_product_view .modal__title,
.wf_product_view h2.modal__title {
    margin: 0;
    padding: 0;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #1A1A1A;
    flex: 1 1 auto;
    text-align: center;
}

/* Bouton X — top-right de la carte (pas dans le flux du header) */
.wf_product_view .modal__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 0;
    transition: background 0.2s ease;
}
.wf_product_view .modal__close:hover {
    background: #E5E1D8;
}
.wf_product_view .modal__close::before {
    content: "×";
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #1A1A1A;
    display: block;
}


/* --------------------------------------------------------------------
   4. CONTAINER — zone scrollable principale
   -------------------------------------------------------------------- */
.wf_product_view .modal__container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 70px 0;          /* 70px en bas = espace réservé pour le bouton absolu */
    margin: 0;
    background: #FFFFFF;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.wf_product_view .modal__content {
    padding: 0 20px 16px 20px;
    margin: 0;
    box-sizing: border-box;
}


/* --------------------------------------------------------------------
   5. COLONNES — image + contenu (empilées en colonne sur ce template)
   -------------------------------------------------------------------- */
.wf_product_view .column-50-wf {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    float: none;
}

.wf_product_view .column-50-wf.image-column {
    text-align: center;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* Les wrappers internes du formulaire WC : on neutralise leurs marges
   pour que le bouton sticky soit centré et la qty visible. */
.wf_product_view form.cart,
.wf_product_view .modal__content form.cart,
.wf_product_view form.variations_form {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.wf_product_view .column-50-wf.image-column img,
.wf_product_view .column-50-wf img,
.wf_product_view .wp-post-image,
.wf_product_view img.attachment-woofood-quickview {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 10px;
    object-fit: cover;
    vertical-align: top;
}

/* On masque les <script> nus injectés en AJAX dans .modal__content qui
   pouvaient parfois créer un blanc visible. */
.wf_product_view script,
.wf_product_view .modal__content > script,
.wf_product_view .modal__container > script,
.wf_product_view .modal__container > br,
.wf_product_view .modal__content > br {
    display: none !important;
}

/* Filet de sécurité : aucun margin-top sur le premier enfant du conteneur. */
.wf_product_view .modal__container > *:first-child,
.wf_product_view .modal__content > *:first-child,
.wf_product_view .modal__content > .column-50-wf:first-of-type,
.wf_product_view .modal__content > .column-50-wf.image-column {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* --------------------------------------------------------------------
   5b. QUANTITÉ (boutons +/-) — visibilité garantie
   -------------------------------------------------------------------- */
.wf_product_view .quantity,
.wf_product_view form.cart .quantity,
.wf_product_view .qty-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wf_product_view .qty-change-button,
.wf_product_view button.qty-change-button,
.wf_product_view .qty-minus,
.wf_product_view .qty-plus {
    width: 40px !important;
    height: 40px !important;
    background: #1A1A1A !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.wf_product_view .qty-change-button:hover {
    background: #2D2D2D !important;
}

.wf_product_view input.qty,
.wf_product_view .input-text.qty,
.wf_product_view .input-text.qty.text,
.wf_product_view input[name="quantity"] {
    width: 56px !important;
    height: 40px !important;
    border: 1.5px solid #E5E1D8 !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    font-size: 15px !important;
    background: #FFFFFF !important;
    padding: 0 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    line-height: 38px !important;
}
.wf_product_view input.qty::-webkit-inner-spin-button,
.wf_product_view input.qty::-webkit-outer-spin-button,
.wf_product_view .input-text.qty::-webkit-inner-spin-button,
.wf_product_view .input-text.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* --------------------------------------------------------------------
   6. FOOTER — anchor pour le bouton sticky (vide structurellement)
   -------------------------------------------------------------------- */
.wf_product_view .modal__footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: 0;
}


/* --------------------------------------------------------------------
   7. BOUTON "AJOUTER AU PANIER" — sticky en bas de la zone scrollable
   --------------------------------------------------------------------
   Le bouton est à l'intérieur de form.cart dans .column-50-wf, donc
   à l'intérieur de la zone scrollable .modal__container. On le rend
   sticky bottom 0 pour qu'il colle TOUJOURS au bas du card, peu importe
   le scroll. Le padding-bottom: 90px de .modal__content garantit que
   les éléments au-dessus (qty, comments) ne sont jamais cachés.
   -------------------------------------------------------------------- */
.wf_product_view .single_add_to_cart_button,
html body .wf_product_view .single_add_to_cart_button {
    /* Layout : ABSOLUTE relatif à .content (toujours visible en bas, peu
       importe le scroll). Le padding-bottom: 70px de .modal__container
       réserve l'espace pour qu'on ne masque jamais la quantité. */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 100 !important;
    display: block !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;

    /* Look : moutarde, texte charbon, coins bas arrondis matching la card */
    background: #D4A017 !important;
    background-color: #D4A017 !important;
    background-image: none !important;
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
    border: none !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 -2px 10px rgba(26, 26, 26, 0.06) !important;

    /* Typo */
    padding: 16px 22px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    vertical-align: middle !important;

    /* Interactivité */
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
}
.wf_product_view .single_add_to_cart_button:hover,
html body .wf_product_view .single_add_to_cart_button:hover {
    background: #E6B73D !important;
    background-color: #E6B73D !important;
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
}
/* Le span enfant du bouton (texte injecté par WC : "9,50€ | AJOUTER...") */
.wf_product_view .single_add_to_cart_button *,
.wf_product_view .single_add_to_cart_button span {
    color: #1A1A1A !important;
    -webkit-text-fill-color: #1A1A1A !important;
}


/* --------------------------------------------------------------------
   8. LOADER — spinner moutarde discret
   -------------------------------------------------------------------- */
.wf_quickview_product_loader {
    border: 6px solid #E5E1D8;
    border-radius: 50%;
    border-top: 6px solid #D4A017;
    width: 56px;
    height: 56px;
    margin: 48px auto;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0)} 100% {-webkit-transform: rotate(360deg)} }
@keyframes spin { 0% {transform: rotate(0)} 100% {transform: rotate(360deg)} }


/* --------------------------------------------------------------------
   9. COMPATIBILITÉ — z-index pour overlay extra-options
   -------------------------------------------------------------------- */
.tc-extra-product-options.tc-show-override.noanimated {
    z-index: 1091;
}


/* ====================================================================
   MOBILE (≤ 768px) — popup plein écran, bouton toujours visible en bas
   ==================================================================== */
@media screen and (max-width: 768px) {

    .wf_product_view .modal__overlay,
    .wf_category_view .modal__overlay {
        padding: 0;
        align-items: stretch;
    }

    .wf_product_view .content {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;   /* dynamic viewport — corrige Safari iOS */
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    .wf_product_view .modal__header {
        padding: 14px 16px;
        border-radius: 0;
    }
    .wf_product_view .modal__title {
        font-size: 1.2rem;
    }
    .wf_product_view .modal__close {
        top: 12px;
        right: 12px;
    }

    .wf_product_view .modal__container {
        padding-bottom: 76px !important;   /* place bouton mobile */
    }

    .wf_product_view .modal__content {
        padding: 0 16px 0 16px;
    }

    .wf_product_view .column-50-wf.image-column {
        margin: 0 0 10px 0;
    }

    .wf_product_view .single_add_to_cart_button,
    html body .wf_product_view .single_add_to_cart_button {
        /* Toujours absolute bottom 0 — coins droits car card plein écran */
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        padding: 20px 22px !important;
    }

    /* Catégorie view — placeholder, simple compactage */
    .wf_category_view .column-50-wf {
        width: 100%;
        float: none;
        max-height: none;
        overflow: visible;
    }
    .wf_category_view .column-50-wf:first-child {
        padding-top: 0;
    }
}