/* ================================================================
   WooCommerce - Options Inter Plaque | Feuille de style v1.6.0
   Auteur : Julien · Nissa Connect

   ARCHITECTURE LAYOUT — FIX HELLO ELEMENTOR + ELEMENTOR
   -------------------------------------------------------
   Hook PHP utilisé : woocommerce_before_add_to_cart_button
   → Les champs restent DANS le <form class="cart"> (données POST OK)

   Problème spécifique Hello Elementor / Elementor :
   Le widget Elementor "Ajouter au panier" contraint la largeur de
   form.cart et de son .elementor-widget-container, rendant le bloc
   plugin plus étroit que la colonne parente.

   Solution v1.6 :
   1) Forcer .elementor-widget-container du widget à width:100%
   2) Forcer form.cart à width:100%
   3) .wio-container utilise margin négatif pour s'aligner
      sur la colonne Elementor parente
   4) order:-1 et flex:0 0 100% maintenus pour le positionnement
   ================================================================ */

/* ================================================================
   0. FORCE PLEINE LARGEUR sur le widget Elementor
      Le widget "Ajouter au panier" d'Elementor peut restreindre
      sa propre largeur — on force 100% pour aligner sur la colonne
   ================================================================ */
.elementor-widget-woocommerce-product-add-to-cart {
    width: 100% !important;
}

.elementor-widget-woocommerce-product-add-to-cart > .elementor-widget-container {
    width: 100% !important;
    padding: 0 !important;   /* supprime tout padding interne du widget */
}

/* ================================================================
   1. RESET FLEX sur form.cart — Hello Elementor + générique
   ================================================================ */
.elementor-widget-woocommerce-product-add-to-cart form.cart,
.elementor-widget-container form.cart,
.woocommerce div.product form.cart,
body.single-product form.cart,
form.cart {
    display:        flex !important;
    flex-wrap:      wrap !important;
    align-items:    flex-start !important;
    width:          100% !important;
    gap:            0 8px;
}

/* ================================================================
   2. CONTENEUR GLOBAL — placé AVANT quantité + bouton
   ================================================================ */
.elementor-widget-woocommerce-product-add-to-cart form.cart .wio-container,
.elementor-widget-container form.cart .wio-container,
.woocommerce div.product form.cart .wio-container,
form.cart .wio-container,
.wio-container {
    order:          -1 !important;   /* remonte avant quantité + bouton */
    flex:           0 0 100% !important;
    width:          100% !important;
    max-width:      100% !important;
    box-sizing:     border-box;
    margin:         0 0 20px 0;
    font-family:    inherit;
}

/* ================================================================
   3. QUANTITE + BOUTON — garantit qu'ils restent APRES le bloc
   ================================================================ */
.elementor-widget-woocommerce-product-add-to-cart form.cart .quantity,
.elementor-widget-container form.cart .quantity,
form.cart .quantity {
    order: 0;
    flex-shrink: 0;
}

.elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button,
.elementor-widget-container form.cart .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
    order: 1;
}

/* ================================================================
   4. BLOC ETAPE (cadre numéroté)
   ================================================================ */
.wio-step {
    background:     #fff;
    border:         1px solid #e0e0e0;
    border-radius:  6px;
    padding:        16px 18px;
    margin-bottom:  12px;
    box-sizing:     border-box;
    width:          100%;
}

/* Titre d'étape */
.wio-step-title {
    display:        flex;
    align-items:    center;
    gap:            9px;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          #222;
    margin-bottom:  6px;
}

.wio-step-num {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      #222;
    color:           #fff;
    font-size:       12px;
    font-weight:     700;
    flex-shrink:     0;
}

.wio-step-desc {
    font-size:   12px;
    color:       #555;
    margin:      0 0 12px;
    line-height: 1.5;
}

/* ================================================================
   5. LAYOUT PAYSAGE : 3 boutons en rangée horizontale
   ================================================================ */
.wio-inter-buttons {
    display:        flex;
    flex-direction: row;
    flex-wrap:      nowrap;
    gap:            10px;
    width:          100%;
}

/* Bouton d'option (label radio) */
.wio-btn {
    flex:            1 1 0;
    min-width:       0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         14px 8px 10px;
    border:          2px solid #ddd;
    border-radius:   8px;
    cursor:          pointer;
    transition:      border-color .2s, box-shadow .2s;
    text-align:      center;
    background:      #fafafa;
    user-select:     none;
    box-sizing:      border-box;
}

/* Masquer le radio natif */
.wio-btn input[type="radio"] {
    position:       absolute;
    opacity:        0;
    width:          0;
    height:         0;
    pointer-events: none;
}

.wio-btn:hover {
    border-color: #999;
}

/* État actif — classe .active ajoutée par JS */
.wio-btn.active {
    border-color: #111;
    box-shadow:   0 0 0 1px #111;
    background:   #fff;
}

/* Fallback CSS pur pour navigateurs récents */
.wio-btn:has(input:checked) {
    border-color: #111;
    box-shadow:   0 0 0 1px #111;
    background:   #fff;
}

.wio-btn-label {
    font-size:   11px;
    color:       #333;
    line-height: 1.4;
}

/* ================================================================
   6. ICÔNES BOUTONS
   ================================================================ */

/* Icône interdiction (Ne pas ajouter) */
.wio-btn-icon svg {
    display: block;
    width:   34px;
    height:  34px;
}

/* Bronze */
.wio-btn-bronze-img {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          5px 12px;
    border:           2px solid #8B6914;
    border-radius:    4px;
    background:       linear-gradient(135deg, #c8a951 0%, #a07820 50%, #c8a951 100%);
    box-shadow:       inset 0 1px 2px rgba(255,255,255,.4);
    max-width:        100%;
}

.wio-bronze-text {
    font-family: 'Times New Roman', Georgia, serif;
    font-style:  italic;
    font-size:   14px;
    color:       #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
    white-space: nowrap;
}

/* Inter personnalisable (doré arrondi) */
.wio-btn-gold-img {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         6px 14px;
    border-radius:   20px;
    background:      linear-gradient(135deg, #e8c84a 0%, #c8a020 50%, #e8c84a 100%);
    box-shadow:      0 2px 6px rgba(0,0,0,.25);
    max-width:       100%;
}

.wio-gold-text {
    font-family: 'Times New Roman', Georgia, serif;
    font-style:  italic;
    font-size:   12px;
    color:       #5a3800;
    font-weight: 700;
    white-space: nowrap;
}

/* ================================================================
   7. GROUPES DE CHAMPS
   ================================================================ */
.wio-field-group {
    position:      relative;
    margin-bottom: 12px;
}

.wio-field-group:last-child {
    margin-bottom: 0;
}

/* Select (menus déroulants bronze) */
.wio-select {
    width:       100%;
    padding:     9px 12px;
    border:      2px solid #ddd;
    border-radius: 6px;
    font-size:   13px;
    color:       #444;
    background:  #fff;
    cursor:      pointer;
    transition:  border-color .2s;
    box-sizing:  border-box;
}

.wio-select:focus {
    outline:      none;
    border-color: #888;
}

/* Input texte (inter personnalisable) */
.wio-input {
    width:        100%;
    padding:      9px 12px;
    border:       2px solid #ddd;
    border-radius: 6px;
    font-size:    13px;
    color:        #444;
    box-sizing:   border-box;
    transition:   border-color .2s;
}

.wio-input:focus {
    outline:      none;
    border-color: #888;
}

/* Textarea (message de condoléance) */
.wio-textarea {
    width:        100%;
    padding:      9px 12px;
    border:       2px solid #ddd;
    border-radius: 6px;
    font-size:    13px;
    color:        #444;
    min-height:   80px;
    resize:       vertical;
    box-sizing:   border-box;
    transition:   border-color .2s;
}

.wio-textarea:focus {
    outline:      none;
    border-color: #888;
}

/* ================================================================
   8. ÉTATS D'ERREUR + COMPTEURS
   ================================================================ */
.wio-select.wio-error,
.wio-input.wio-error {
    border-color: #e53935;
}

.wio-char-counter {
    display:    block;
    text-align: right;
    font-size:  11px;
    color:      #888;
    margin-top: 3px;
}

.wio-field-error {
    display:    none;
    font-size:  11px;
    color:      #e53935;
    margin-top: 3px;
}

.wio-field-error.visible {
    display: block;
}

/* ================================================================
   9. ANIMATION D'APPARITION
   ================================================================ */
.wio-section {
    animation: wioFadeIn .2s ease;
}

@keyframes wioFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   10. RESPONSIVE
   ================================================================ */

/* Tablette (< 600 px) : 2 boutons + 1 centré en dessous */
@media (max-width: 599px) {
    .wio-inter-buttons {
        flex-wrap: wrap;
    }
    .wio-btn {
        flex:      1 1 calc(50% - 5px);
        min-width: calc(50% - 5px);
    }
    .wio-btn:last-child {
        flex: 1 1 100%;
    }
}

/* Petit mobile (< 380 px) : 1 bouton par ligne */
@media (max-width: 379px) {
    .wio-btn {
        flex: 1 1 100%;
    }
}