/* Start custom CSS *//* ============================================================
   DESIGN MOBILE & CENTRAGE - OPTIONS DE NOËL
   ============================================================ */

/* 2. TITRE DE SECTION */
.thwepo_noel .section-title h3 {
    font-size: 2.2em !important;
    color: #111 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    text-transform: none !important;
    border-bottom: none !important;
}

/* 3. CHAMP TEXTE (NOM) */
.thwepo_noel .nom_offrir {
    width: 100% !important;
    margin-bottom: 15px !important;
    padding: 0 10px !important; /* Petite marge de sécurité bords écran */
    box-sizing: border-box !important;
}

/* Labels */
.thwepo_noel .label.above {
    margin-bottom: 8px !important;
    display: block !important;
    text-align: center !important;
}
.thwepo_noel .label-tag {
    font-weight: 600 !important;
    color: #333 !important;
    font-size: 1.2rem !important;
}
.thwepo_noel .sublabel-tag {
    color: #888 !important;
    font-style: italic !important;
}

/* La boite de saisie (Input) */
.thwepo_noel input[type="text"] {
    width: 100% !important;
    max-width: 500px !important; /* Pas trop large sur PC */
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fcfcfc !important;
    font-size: 1rem !important;
    color: #333 !important;
    transition: border-color 0.3s ease;
}

.thwepo_noel input[type="text"]:focus {
    border-color: #dcb13c !important; /* Bordure Or au clic */
    background-color: #fff !important;
    outline: none !important;
}

/* 4. LA CASE À COCHER (LIVRAISON) - DESIGN PREMIUM */
.thwepo_noel .livraison {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

/* Conteneur de la case */
.thwepo_noel .livraison .value {
    width: 100% !important;
    max-width: 500px !important;
}

/* Le Label qui entoure tout (zone cliquable) */
.thwepo_noel .label-wrapper-checkbox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centre le contenu */
    gap: 15px !important; /* Espace entre case et texte */
    padding: 15px 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
}

/* Effet au survol */
.thwepo_noel .label-wrapper-checkbox:hover {
    border-color: #dcb13c !important;
    background-color: #fffdf5 !important;
}

/* TEXTE DU LABEL */
.thwepo_noel .label-wrapper-checkbox label {

    font-weight: 500 !important;
    color: #333 !important;
    text-align: left !important; /* Pour que ça reste lisible */
    line-height: 1.3 !important;
}

/* PRIX EN GRAS */
.thwepo_noel .woocommerce-Price-amount {
    font-weight: 700 !important;
    color: #dcb13c !important; /* Prix en Or */
}

/* --- CUSTOMISATION DE LA CASE (INPUT) --- */
/* On cache la case moche par défaut et on en dessine une belle */
.thwepo_noel input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #fff !important;
    margin: 0 !important;
    font: inherit !important;
    color: currentColor !important;
    width: 24px !important;
    min-width: 24px !important; /* Fixe la taille */
    height: 24px !important;
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
    display: grid !important;
    place-content: center !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
}

/* Quand c'est coché */
.thwepo_noel input[type="checkbox"]:checked {
    background-color: #dcb13c !important; /* Fond Or */
    border-color: #dcb13c !important;
}

/* Le petit V (Checkmark) */
.thwepo_noel input[type="checkbox"]::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    box-shadow: inset 1em 1em white !important; /* Couleur du V en blanc */
    transform-origin: center !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

.thwepo_noel input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
}/* End custom CSS */