/* ==========================================================================
   FORMULAIRES GLOBAUX - COHÉRENCE TOTALE
   ========================================================================== */

/* === INPUTS : Alignement cohérent partout === */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="search"],
textarea,
select:not([size]):not([multiple]) {
    width: 100%;
    padding: 12px 20px;
    font-family: "CreatoDisplay", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1A1A1A !important;
    background-color: #fff !important;
    border: none;
    border-bottom: 1px solid #ededed;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Height standard pour inputs et selects */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
    /*input[type="search"],*/
select:not([size]):not([multiple]) {
    height: 50px;
    line-height: 1.5 !important;
}

/* Textarea : hauteur auto */
textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Focus : bordure noire */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:not([size]):not([multiple]):focus {
    border-bottom-color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: #999 !important;
    font-weight: 300 !important;
}

/* Disabled */
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f5f5f5 !important;
    border-bottom-color: #ddd !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* === CHECKBOX & RADIO : Style cohérent partout === */
input[type="checkbox"]:not(.btn-check),
input[type="radio"]:not(.btn-check) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 1.5px solid #1A1A1A !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Checkbox = carré */
input[type="checkbox"] {
    border-radius: 2px !important;
}

/* Radio = cercle */
input[type="radio"] {
    border-radius: 50% !important;
}

/* Hover : bordure noire */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #000000 !important; /* Noir pur au hover */
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1) !important;
}

/* Focus : outline subtil */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.15) !important;
    outline: none !important;
}

/* Checked : fond noir */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: #FFFFFF !important; /* Fond blanc */
    border-color: #1A1A1A !important; /* Bordure noire */
    background-image: none !important; /* Supprime l'image native */
}

/* Checkbox checked : coche blanche */
input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4.5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 8px !important;
    border: solid #1A1A1A !important; /* Coche noire */
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    background: transparent !important;
}

/* Radio checked : point blanc au centre */
input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #1A1A1A !important; /* Point noir */
}

/* Disabled */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background: #F5F5F5 !important;
    border-color: #CCCCCC !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* === Alignement checkbox/radio === */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    cursor: pointer !important;
    font-family: "CreatoDisplay", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1A1A1A !important;
    margin-bottom: 0 !important;
}

/* === FORM-CHECK : Espacement cohérent === */


/* === SELECT : Flèche personnalisée === */
select:not([size]):not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231A1A1A' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* Support pour les labels avec attribut for */
/*input[type="checkbox"] + label,
input[type="radio"] + label,
.form-check-input + .form-check-label {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin-left: 0 !important;
}*/

/* === FORM-ITEM : Compatibilité avec le template existant === */
.form-item input,
.form-item textarea,
.form-item select {
    padding: 12px 20px !important;
    border-bottom: 1px solid #ededed;
}

.form-item input:focus,
.form-item textarea:focus,
.form-item select:focus {
    border-bottom-color: #000000 !important;
}

/* === SPÉCIFIQUE CHECKOUT/ADDRESS : Overrider les styles Bootstrap === */

/* === SPÉCIFIQUE LOGIN : Cohérence === */
.oe_login_form input[type="text"],
.oe_login_form input[type="password"],
.oe_reset_password_form input[type="text"],
.oe_reset_password_form input[type="password"] {
    height: 40px !important;
    padding: 8px 16px !important;
}

/* === SPÉCIFIQUE SEARCH BAR BLOG & SHOP === */
.o_searchbar_form .oe_search_box {
    padding: 12px 20px !important;
    font-family: "CreatoDisplay", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1A1A1A !important;
    background-color: #fff !important;
    border: none !important;
    border-bottom: 1px solid #ededed !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /*height: 50px !important;*/
}

.o_searchbar_form .oe_search_box:focus {
    border-bottom-color: #000000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.o_searchbar_form .oe_search_button {
    background-color: #1A1A1A;
    color: #FAFAFA;
    border: none !important;
    border-radius: 0 !important;
    /*height: 50px !important;*/
    transition: all 0.3s ease-in-out !important;
}

.o_searchbar_form .oe_search_button:hover {
    background-color: #0C0C0C;
}

.o_searchbar_form .oe_search_button:before {
    background: #0C0C0C;
    transition: none;
}

/* === RESPONSIVE : Mobile === */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    input[type="search"],
    textarea,
    select:not([size]):not([multiple]) {
        font-size: 16px !important; /* Empêche le zoom iOS */
    }

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        font-size: 14px !important;
    }
}