.elementor-764 .elementor-element.elementor-element-6cc6569{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-6cc6569 *//* --- INICIO: CHECKOUT PERFECTO (VERTICAL Y RESPONSIVO) --- */

/* 1. LA TARJETA PRINCIPAL (Diseño Melany's) */
.woocommerce-checkout {
    background-color: #fffbfc; /* Blanco hueso cálido */
    max-width: 500px;       /* Ancho controlado para PC */
    margin: 30px auto;      /* Centrado */
    padding: 40px;          /* Espacio interno */
    border-radius: 20px;    /* Bordes redondeados */
    box-shadow: 0px 10px 30px rgba(166, 113, 113, 0.15); /* Sombra suave */
    border: 2px solid #ffeaea; /* Borde rosado sutil */
}

/* 2. FORZAR TODO A UNA SOLA COLUMNA (La solución a tu problema) */
/* Esto hace que Nombres, Apellidos, Email, etc. vayan uno debajo de otro */
.woocommerce-checkout .col2-set .col-1, 
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p.form-row,
.woocommerce-checkout .form-row-first, 
.woocommerce-checkout .form-row-last {
    width: 100% !important;  /* Ocupar todo el ancho */
    float: none !important;  /* Quitar flotado a la izquierda/derecha */
    display: block !important;
    margin-right: 0 !important;
    clear: both !important;
    padding: 0 !important;
    margin-bottom: 20px !important; /* Espacio entre cada campo */
}

/* 3. ESTILO DE TEXTOS (Labels) */
.woocommerce-checkout label {
    color: #5a2a2a; /* Marrón oscuro */
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
    line-height: 1.2;
}
.woocommerce-checkout .required {
    color: #ff6b6b !important; /* Asterisco rosado */
    text-decoration: none;
}

/* 4. ESTILO DE LOS CAMPOS (INPUTS) */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 2px solid #f0eceb !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    color: #333;
    font-size: 15px !important; /* Letra legible en celular */
    height: auto !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
    width: 100% !important;
}

/* Efecto al tocar un campo */
.woocommerce-checkout input:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #ff6b6b !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15) !important; 
    outline: none;
}

/* Arreglo para .elementor-764 .elementor-element.elementor-element-6cc6569es (Lima, etc) */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0; margin-top: 2px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%; top: 0;
}

/* 5. BOTÓN WHATSAPP (VERDE Y GRANDE) */
#place_order {
    background: linear-gradient(to bottom right, #25d366, #1ebc57) !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 18px !important;
    border-radius: 50px !important; /* Forma de pastilla */
    width: 100% !important;
    text-transform: none !important;
    border: none;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    cursor: pointer;
    margin-top: 10px;
}
#place_order::before {
    content: "";
    font-family: "Font Awesome 5 Brands", "FontAwesome";
    margin-right: 10px;
    font-size: 20px;
}

/* 6. RESPONSIVE (Ajustes para Celular) */
@media (max-width: 600px) {
    .woocommerce-checkout {
        width: 90% !important; /* Que no pegue a los bordes */
        padding: 25px 20px !important; /* Menos relleno interno */
        margin: 20px auto !important;
    }
    .woocommerce-checkout h3 {
        font-size: 18px !important;
    }
}

/* 7. LIMPIEZA (Ocultar lo que no sirve) */
.woocommerce-billing-fields > h3, 
#order_review_heading, 
#order_review table.shop_table, 
.woocommerce-additional-fields, 
.woocommerce-form-coupon-toggle, 
#payment ul.payment_methods,
.woocommerce-privacy-policy-text { 
    /* Nota: Si quieres ocultar el texto legal de privacidad, mantén esta línea, si no, bórrala */
    /* display: none !important; */
}
#payment, #payment .place-order { background: transparent !important; padding: 0 !important; }
/* --- OCULTAR MÉTODOS DE PAGO VISUALMENTE --- */

/* 1. Oculta los circulitos de selección (Yape, Transferencia) */
.woocommerce-checkout #payment ul.payment_methods {
    display: none !important;
}

/* 2. Oculta la caja gris con el texto de las cuentas bancarias */
.woocommerce-checkout #payment .payment_box {
    display: none !important;
}

/* 3. Limpia el fondo del contenedor para que no se vea gris */
.woocommerce-checkout #payment {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 4. Ajustar el botón para que suba y no deje espacio vacío */
.woocommerce-checkout .place-order {
    padding: 0 !important;
    margin-top: 10px !important;
}
/* --- HACER VISIBLE EL ERROR --- */
/* Poner borde rojo al campo vacío */
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select {
    border: 2px solid #ff0000 !important; /* Borde Rojo */
    background-color: #fff0f0 !important; /* Fondo rojizo suave */
}

/* Poner el texto de la etiqueta en rojo */
.woocommerce-checkout .woocommerce-invalid label {
    color: #ff0000 !important;
    font-weight: bold;
}

/* Animación de vibración para llamar la atención */
.woocommerce-invalid {
    animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
/* --- FIN DEL CÓDIGO --- *//* End custom CSS */