/* Peru Locations - Estilos para WooCommerce */

/* Campos de ubicación */
.woocommerce-billing-fields select,
.woocommerce-shipping-fields select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

.woocommerce-billing-fields select:focus,
.woocommerce-shipping-fields select:focus {
    border-color: #333;
    outline: none;
}

/* Select deshabilitado */
.woocommerce-billing-fields select:disabled,
.woocommerce-shipping-fields select:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Compatibilidad con WoodMart */
.woodmart-checkout-fields select[name="billing_provincia"],
.woodmart-checkout-fields select[name="billing_distrito"],
.woodmart-checkout-fields select[name="shipping_provincia"],
.woodmart-checkout-fields select[name="shipping_distrito"] {
    height: auto;
    min-height: 45px;
}

/* Labels */
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Requerido */
.woocommerce-billing-fields .required,
.woocommerce-shipping-fields .required {
    color: #ff0000;
    font-weight: bold;
    text-decoration: none;
}

/* Filas de formulario */
.form-row-first,
.form-row-last {
    width: 48%;
    float: left;
}

.form-row-last {
    float: right;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row-first,
    .form-row-last {
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }
}

/* Loading state */
.woocommerce-billing-fields select.loading,
.woocommerce-shipping-fields select.loading {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23333" stroke-width="4" stroke-dasharray="31.4 31.4" transform="rotate(0 25 25)"><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    padding-right: 40px;
}

/* Error state */
.woocommerce-billing-fields select.error,
.woocommerce-shipping-fields select.error {
    border-color: #e74c3c;
}

/* WooCommerce validation */
.woocommerce-invalid select {
    border-color: #e74c3c;
}

.woocommerce-validated select {
    border-color: #27ae60;
}

/* =================================================================
   FORZAR VISIBILIDAD DEL CAMPO DEPARTAMENTO/ESTADO
   Estos estilos aseguran que el campo SIEMPRE sea visible
   ================================================================= */

/* Forzar que el campo de departamento sea visible */
#billing_state_field,
#shipping_state_field,
.woocommerce-billing-fields #billing_state_field,
.woocommerce-shipping-fields #shipping_state_field,
p[id*="billing_state"],
p[id*="shipping_state"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    clear: both !important;
}

/* Asegurar que el select de departamento se vea */
#billing_state,
#shipping_state,
select[name="billing_state"],
select[name="shipping_state"] {
    display: block !important;
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    background: white !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 45px !important;
}

/* Fix para temas que ocultan campos */
.woocommerce form .form-row {
    display: block !important;
}

.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
    margin-bottom: 15px !important;
}

/* Asegurar que form-row-wide ocupe todo el ancho */
.form-row-wide {
    width: 100% !important;
    clear: both !important;
}

/* Fix específico para el campo state/departamento */
.address-field.form-row-wide {
    display: block !important;
}