/* ════════════════════════════════════════
   KOCOON — Règles globales formulaires
   Charte : beige #F5F2EC, noir #1A1A1A, ocre #C9A96E, gris #7A7468

   Portée :
   - WooCommerce (toutes pages)
   - WC Checkout
   - WC Mon Compte / Edit Account / Adresses
   - WC Formulaires de connexion/inscription
   - Ultimate Member
   - Contact Form 7
   ════════════════════════════════════════ */


/* ══════════════════════════════════════
   1) LABELS
   ══════════════════════════════════════ */

.woocommerce form label,
.woocommerce-page form label,
.woocommerce-form label,
.woocommerce-MyAccount-content form label,
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label,
.um-form label,
.wpcf7 label {
    display: block !important;
    font-size: 12px !important;
    color: var(--k-gris) !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}


/* ══════════════════════════════════════
   2) CHAMPS TEXTE, EMAIL, PASSWORD, TÉL, NUMBER
   ══════════════════════════════════════ */

.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form input[type="search"],
.woocommerce-page form input[type="text"],
.woocommerce-page form input[type="email"],
.woocommerce-page form input[type="password"],
.woocommerce-page form input[type="tel"],
.woocommerce-page form input[type="number"],
.woocommerce-page form input[type="search"],
.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="password"],
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.um-form input[type="text"],
.um-form input[type="email"],
.um-form input[type="password"],
.um-form input[type="tel"],
.um-form input[type="number"],
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"] {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 42px !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
    font-family: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}


/* ══════════════════════════════════════
   3) SELECT (natif)
   ══════════════════════════════════════ */

.woocommerce form select,
.woocommerce-page form select,
.woocommerce-MyAccount-content form select,
.woocommerce-address-fields select,
.um-form select,
.wpcf7 select {
    background-color: var(--k-beige-2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%237A7468' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 36px 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 42px !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
    font-family: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}


/* ══════════════════════════════════════
   4) TEXTAREA
   ══════════════════════════════════════ */

.woocommerce form textarea,
.woocommerce-page form textarea,
.woocommerce-MyAccount-content form textarea,
.um-form textarea,
.wpcf7 textarea {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    min-height: 100px !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
    font-family: inherit !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}


/* ══════════════════════════════════════
   5) FOCUS
   ══════════════════════════════════════ */

.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus,
.woocommerce-page form input:focus,
.woocommerce-page form select:focus,
.woocommerce-page form textarea:focus,
.woocommerce-form input:focus,
.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus,
.woocommerce-EditAccountForm input:focus,
.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus,
.um-form input:focus,
.um-form select:focus,
.um-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: var(--k-ocre) !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════
   6) PLACEHOLDER
   ══════════════════════════════════════ */

.woocommerce form input::placeholder,
.woocommerce-page form input::placeholder,
.woocommerce-form input::placeholder,
.woocommerce-MyAccount-content form input::placeholder,
.woocommerce-EditAccountForm input::placeholder,
.woocommerce-address-fields input::placeholder,
.um-form input::placeholder,
.wpcf7 input::placeholder,
.woocommerce form textarea::placeholder,
.woocommerce-page form textarea::placeholder,
.um-form textarea::placeholder,
.wpcf7 textarea::placeholder {
    color: var(--k-gris-clair) !important;
    font-size: 13px !important;
    opacity: 1 !important;
}


/* ══════════════════════════════════════
   7) CHECKBOX & RADIO — accent-color
   ══════════════════════════════════════ */

.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"],
.woocommerce-page form input[type="checkbox"],
.woocommerce-page form input[type="radio"],
.um-form input[type="checkbox"],
.um-form input[type="radio"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    width: auto !important;
    min-height: auto !important;
    height: auto !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: var(--k-ocre) !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}


/* ══════════════════════════════════════
   8) SELECT2 (widget WooCommerce pays/région)
   ══════════════════════════════════════ */

.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-page .select2-container--default .select2-selection--single {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    height: 42px !important;
    box-shadow: none !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--k-noir) !important;
    font-size: 13px !important;
    line-height: 42px !important;
    padding-left: 14px !important;
    padding-right: 36px !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-page .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--k-ocre) !important;
    outline: none !important;
}


/* ══════════════════════════════════════
   9) ÉTAT INVALIDE (validation WooCommerce)
   ══════════════════════════════════════ */

.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce-page form .form-row.woocommerce-invalid input,
.woocommerce-page form .form-row.woocommerce-invalid select {
    border-color: #E24B4A !important;
}

.woocommerce form .form-row .woocommerce-error,
.woocommerce-page form .form-row .woocommerce-error {
    font-size: 11px !important;
    color: #E24B4A !important;
    margin-top: 4px !important;
    display: block !important;
}


/* ══════════════════════════════════════
   10) BOUTON PRINCIPAL (submit)
   ══════════════════════════════════════ */

.woocommerce form button[type="submit"],
.woocommerce form input[type="submit"],
.woocommerce-page form button[type="submit"],
.woocommerce-page form input[type="submit"],
.woocommerce-form button[type="submit"],
.woocommerce-MyAccount-content form button[type="submit"],
.woocommerce-MyAccount-content form input[type="submit"],
.woocommerce-EditAccountForm button[type="submit"],
.um-form button[type="submit"],
.um .um-button,
.wpcf7 input[type="submit"] {
    background: var(--k-noir) !important;
    color: var(--k-beige-2) !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    font-family: inherit !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
    text-decoration: none !important;
    line-height: 1 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.woocommerce form button[type="submit"]:hover,
.woocommerce form input[type="submit"]:hover,
.woocommerce-page form button[type="submit"]:hover,
.woocommerce-page form input[type="submit"]:hover,
.woocommerce-form button[type="submit"]:hover,
.woocommerce-MyAccount-content form button[type="submit"]:hover,
.woocommerce-MyAccount-content form input[type="submit"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.um-form button[type="submit"]:hover,
.um .um-button:hover,
.wpcf7 input[type="submit"]:hover {
    background: var(--k-ocre) !important;
    color: #fff !important;
}


/* ══════════════════════════════════════
   11) MOBILE (<768px)
   ══════════════════════════════════════ */

@media (max-width: 767px) {

    .woocommerce form input[type="text"],
    .woocommerce form input[type="email"],
    .woocommerce form input[type="password"],
    .woocommerce form input[type="tel"],
    .woocommerce form select,
    .woocommerce form textarea,
    .woocommerce-page form input[type="text"],
    .woocommerce-page form input[type="email"],
    .woocommerce-page form input[type="tel"],
    .woocommerce-page form select,
    .woocommerce-page form textarea,
    .um-form input,
    .um-form select,
    .um-form textarea,
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea {
        font-size: 16px !important; /* évite le zoom auto iOS */
    }
}

/* ── Ultimate Member : inputs natifs ── */
.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um input[type="tel"],
.um input[type="number"],
.um-form-field,
.um input.um-form-field {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    min-height: 42px !important;
    box-shadow: none !important;
}

.um input:focus,
.um-form-field:focus {
    border-color: var(--k-ocre) !important;
    outline: none !important;
    box-shadow: none !important;
}

.um .um-field-label label,
.um label {
    font-size: 12px !important;
    color: var(--k-gris) !important;
    font-weight: 400 !important;
}

.um .um-button,
.um input[type="submit"] {
    background: var(--k-noir) !important;
    color: var(--k-beige-2) !important;
    border-radius: 20px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
}

.um .um-button:hover,
.um input[type="submit"]:hover {
    background: var(--k-ocre) !important;
    color: #fff !important;
}

/* ── Contact Form 7 : classe wpcf7-form-control ── */
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    min-height: 42px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.wpcf7-form .wpcf7-form-control:focus {
    border-color: var(--k-ocre) !important;
    outline: none !important;
    box-shadow: none !important;
}

.wpcf7-form .wpcf7-submit {
    background: var(--k-noir) !important;
    color: var(--k-beige-2) !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
}

.wpcf7-form .wpcf7-submit:hover {
    background: var(--k-ocre) !important;
    color: #fff !important;
}
/* ══════════════════════════════════════
   12) PAID MEMBER SUBSCRIPTIONS (PMS)
   ══════════════════════════════════════ */

   .pms-form input[type="text"],
   .pms-form input[type="email"],
   .pms-form input[type="password"],
   .pms-form input[type="tel"],
   .pms-field input[type="text"],
   .pms-field input[type="email"],
   .pms-field input[type="password"] {
       background: var(--k-beige-2) !important;
       border: 1px solid var(--k-border) !important;
       border-radius: 8px !important;
       color: var(--k-noir) !important;
       font-size: 13px !important;
       padding: 10px 14px !important;
       width: 100% !important;
       min-height: 42px !important;
       box-sizing: border-box !important;
       box-shadow: none !important;
       transition: border-color 0.2s ease !important;
       outline: none !important;
       font-family: inherit !important;
       height: auto !important;
   }
   
   .pms-form input:focus,
   .pms-field input:focus {
       border-color: var(--k-ocre) !important;
       outline: none !important;
       box-shadow: none !important;
   }
   
   .pms-form label,
   .pms-field label {
       display: block !important;
       font-size: 12px !important;
       color: var(--k-gris) !important;
       font-weight: 400 !important;
       margin-bottom: 5px !important;
   }
   
   input.pms-form-submit {
       background: var(--k-noir) !important;
       color: var(--k-beige-2) !important;
       border: none !important;
       border-radius: 20px !important;
       font-size: 13px !important;
       font-weight: 500 !important;
       padding: 12px 28px !important;
       cursor: pointer !important;
       transition: background 0.2s ease !important;
       font-family: inherit !important;
       width: auto !important;
   }
   
   input.pms-form-submit:hover {
       background: var(--k-ocre) !important;
       color: #fff !important;
   }

   /* ══════════════════════════════════════
   13) ELEMENTOR LOGIN WIDGET
   ══════════════════════════════════════ */

form.elementor-login input.elementor-field-textual,
form.elementor-form input.elementor-field-textual {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
    font-family: inherit !important;
}

form.elementor-login input.elementor-field-textual:focus,
form.elementor-form input.elementor-field-textual:focus {
    border-color: var(--k-ocre) !important;
    outline: none !important;
    box-shadow: none !important;
}

.elementor-login .elementor-field-label {
    display: block !important;
    font-size: 12px !important;
    color: var(--k-gris) !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}

form.elementor-login .elementor-button,
form.elementor-form button[type="submit"].elementor-button {
    background: var(--k-noir) !important;
    color: var(--k-beige-2) !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    font-family: inherit !important;
    width: auto !important;
}

form.elementor-login .elementor-button:hover,
form.elementor-form button[type="submit"].elementor-button:hover {
    background: var(--k-ocre) !important;
    color: #fff !important;
}


/* ══════════════════════════════════════
   14) PMS — SÉLECTEURS ID (spécificité maximale)
   Écrase les !important du plugin PMS grâce à l'ID
   ══════════════════════════════════════ */

#pms_register-form input[type="text"],
#pms_register-form input[type="email"],
#pms_register-form input[type="password"],
#pms_register-form input[type="tel"],
#pms_register-form input[type="number"] {
    background: var(--k-beige-2) !important;
    border: 1px solid var(--k-border) !important;
    border-radius: 8px !important;
    color: var(--k-noir) !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
    font-family: inherit !important;
}

#pms_register-form input:focus {
    border-color: var(--k-ocre) !important;
    outline: none !important;
    box-shadow: none !important;
}

#pms_register-form label {
    display: block !important;
    font-size: 12px !important;
    color: var(--k-gris) !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}

#pms_register-form input.pms-form-submit {
    background: var(--k-noir) !important;
    color: var(--k-beige-2) !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    font-family: inherit !important;
    width: auto !important;
    min-height: auto !important;
    height: auto !important;
}

#pms_register-form input.pms-form-submit:hover {
    background: var(--k-ocre) !important;
    color: #fff !important;
}