.pepta-address-message {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: #646970;
}
.pepta-address-message.is-success {
    color: #176b52;
}
.pepta-address-message.is-error {
    color: #b42318;
}
.pepta-address-message.is-loading {
    color: #475467;
}

.pepta-mx-colony-select {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    border-radius: 8px;
}

.woocommerce form .form-row,
.wfacp_main_form .form-row {
    position: relative;
}

.pepta-us-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 999999;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.pepta-us-suggestions.is-open {
    display: block;
}
.pepta-us-suggestion {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eef0f2;
    background: #fff;
    color: #202223;
    padding: 11px 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    line-height: 1.35;
}
.pepta-us-suggestion:last-child {
    border-bottom: 0;
}
.pepta-us-suggestion:hover,
.pepta-us-suggestion:focus {
    background: #f6f8fb;
    outline: none;
}
.pepta-us-empty {
    padding: 11px 12px;
    color: #667085;
    font-size: 12px;
}

@media (max-width: 600px) {
    .pepta-us-suggestions {
        max-height: 220px;
    }
    .pepta-us-suggestion {
        padding: 12px;
        font-size: 14px;
    }
}


.pepta-email-message {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.4;
}
.pepta-email-message.is-loading { color: #667085; }
.pepta-email-message.is-success { color: #176b52; }
.pepta-email-message.is-warning { color: #8a6116; }
.pepta-email-message.is-error { color: #b42318; }


/* =========================================================
 * PEPTA CHECKOUT ADDRESS V2
 * ========================================================= */
.pepta-autofill-locked{
    pointer-events: none !important;
    background-color: #f7f8fa !important;
    color: #344054 !important;
    opacity: 1 !important;
}

/* HERE: neutralizar estilos globales de botones de FunnelKit */
.wfacp_main_form .pepta-us-suggestions,
form.checkout .pepta-us-suggestions{
    background: #ffffff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(16,24,40,.16) !important;
    overflow: hidden !important;
}

.wfacp_main_form button.pepta-us-suggestion,
form.checkout button.pepta-us-suggestion,
.pepta-us-suggestion{
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #eaecf0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #101828 !important;
    text-align: left !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

.wfacp_main_form button.pepta-us-suggestion:hover,
.wfacp_main_form button.pepta-us-suggestion:focus,
form.checkout button.pepta-us-suggestion:hover,
form.checkout button.pepta-us-suggestion:focus,
.pepta-us-suggestion:hover,
.pepta-us-suggestion:focus{
    background: #f8fafc !important;
    color: #101828 !important;
    outline: none !important;
}

.pepta-us-suggestion-main{
    display: block !important;
    color: #101828 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.pepta-us-suggestion-sub{
    display: block !important;
    margin-top: 3px !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.pepta-mx-colony-select{
    background:#fff !important;
    color:#101828 !important;
}

@media (max-width: 600px){
    .wfacp_main_form button.pepta-us-suggestion,
    form.checkout button.pepta-us-suggestion,
    .pepta-us-suggestion{
        padding: 11px 12px !important;
    }
}


/* =========================================================
 * 2.0.3 — Estado y País como select nativo, igual que Colonia
 * ========================================================= */
.pepta-native-select,
.pepta-mx-colony-select {
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    height: auto !important;
    padding: 23px 44px 8px 16px !important;
    border: 1px solid #cfd4dc !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #202124 !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

/* Oculta restos visuales de Select2/SelectWoo en estos dos campos. */
#shipping_state_field > .select2-container,
#shipping_country_field > .select2-container,
.wfacp-form-control-wrapper[data-key="shipping_state"] > .select2-container,
.wfacp-form-control-wrapper[data-key="shipping_country"] > .select2-container {
    display: none !important;
}

/*
 * En iOS queremos que el control siga siendo un SELECT real:
 * al tocar Estado o País abre el selector nativo del sistema,
 * igual que Colonia / Fraccionamiento.
 */
@supports (-webkit-touch-callout: none) {
    .pepta-native-select {
        font-size: 17px !important;
    }
}


/* =========================================================
 * 2.0.4 — autocompletado MX válido y ligero
 * ========================================================= */
body[data-pepta-country="MX"] #shipping_city_field.woocommerce-validated,
body[data-pepta-country="MX"] #shipping_state_field.woocommerce-validated {
    border-color: inherit !important;
}

body[data-pepta-country="MX"] [name="shipping_city"][data-pepta-autofill="1"],
body[data-pepta-country="MX"] [name="shipping_state"][data-pepta-autofill="1"] {
    background-color: #f7f8fa !important;
    color: #344054 !important;
    opacity: 1 !important;
}


/* 2.1 — no existe ya ningún contenedor artificial de reordenamiento. */
.wfacp_main_form [data-pepta-colony-source="1"] {
    /* El input original conserva el valor para Woo/Make, el select es visual. */
}


/* =========================================================
 * 2.1.1 — interacción estable MX
 * ========================================================= */

/* Colonia SIEMPRE es interactiva. Nunca hereda el bloqueo del Estado. */
body[data-pepta-country="MX"] .pepta-mx-colony-select {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Solo Municipio/Estado autocompletados se ven como datos derivados. */
body[data-pepta-country="MX"] [name="shipping_city"][data-pepta-autofill="1"],
body[data-pepta-country="MX"] [name="shipping_state"][data-pepta-autofill="1"] {
    background-color: #f7f8fa !important;
}

/* Durante cambio de país no pintamos vacíos intencionales como error. */
body.pepta-country-transition .woocommerce-invalid,
body.pepta-country-transition .woocommerce-invalid-required-field,
body.pepta-country-transition .wfacp-error-field,
body.pepta-country-transition .field-error {
    border-color: inherit !important;
    box-shadow: none !important;
}


/* =========================================================
 * 2.1.2 — COLONIA MX = EL CAMPO REAL DE WOOCOMMERCE
 * ========================================================= */
body[data-pepta-country="MX"] select[name="billing_address_1"].pepta-mx-colony-select {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 20 !important;
    opacity: 1 !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    height: auto !important;
    background: #fff !important;
    color: #101828 !important;
    -webkit-appearance: menulist !important;
    appearance: auto !important;
}

/* No permitir que una capa decorativa del wrapper tape el SELECT real. */
body[data-pepta-country="MX"] #billing_address_1_field,
body[data-pepta-country="MX"] #billing_address_1_field .woocommerce-input-wrapper,
body[data-pepta-country="MX"] #billing_address_1_field .wfacp-form-control-wrapper {
    pointer-events: auto !important;
}


/* =========================================================
 * 2.1.3 — AUTOFILL = CAMPO VÁLIDO
 * ========================================================= */
.wfacp_main_form .woocommerce-validated:not(.woocommerce-invalid) input,
.wfacp_main_form .woocommerce-validated:not(.woocommerce-invalid) select,
form.checkout .woocommerce-validated:not(.woocommerce-invalid) input,
form.checkout .woocommerce-validated:not(.woocommerce-invalid) select {
    box-shadow: none;
}

/*
 * No ocultamos errores reales globalmente. El JS solo elimina el mensaje
 * del campo cuando ese mismo campo ya contiene un valor real.
 */