/* ============================================
   SOLO ESTILOS VISUALES - CERO CONTENIDO
   ============================================ */

/* CAMPOS DE FORMULARIO - Bordes y colores */
#checkout input[type="text"],
#checkout input[type="email"],
#checkout input[type="tel"],
#checkout input[type="number"],
#checkout input[type="password"],
#checkout select,
#checkout textarea {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    background-color: #f9fafb !important;
    transition: all 0.2s ease !important;
}

/* EFECTO AL HACER CLIC */
#checkout input:focus,
#checkout select:focus,
#checkout textarea:focus {
    border-color: #EC5985 !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(236, 89, 133, 0.1) !important;
}

/* RADIO BUTTONS GRANDES */
#checkout input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-right: 12px !important;
    cursor: pointer !important;
    accent-color: #EC5985 !important;
}

/* CHECKBOXES GRANDES */
#checkout input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-right: 12px !important;
    cursor: pointer !important;
    accent-color: #EC5985 !important;
}

/* OPCIONES DE PAGO Y ENVÍO */
#checkout .payment-option,
#checkout .delivery-option {
    padding: 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#checkout .payment-option:hover,
#checkout .delivery-option:hover {
    border-color: #EC5985 !important;
    background-color: #fff5f8 !important;
}

#checkout .payment-option.selected,
#checkout .delivery-option.selected {
    border-color: #EC5985 !important;
    background-color: #fff5f8 !important;
}

/* MÓVIL */
@media (max-width: 768px) {
    #checkout input,
    #checkout select,
    #checkout textarea {
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
    
    #checkout input[type="radio"],
    #checkout input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Evitar zoom automático en iOS al hacer focus en inputs */
@media screen and (max-width: 768px) {
    #checkout input,
    #checkout select,
    #checkout textarea {
        font-size: 16px !important; /* iOS no hace zoom si es 16px o más */
    }
}

/* Teclado numérico para código postal y teléfono */
#checkout input[name*="postcode"],
#checkout input[name*="phone"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* Botones más grandes en móvil */
@media (max-width: 768px) {
    #checkout button[type="submit"],
    #checkout .btn-primary {
        padding: 16px 24px !important;
        font-size: 17px !important;
        min-height: 50px !important;
    }
}

/* ============================================
   TEXTO DEL CLIENTE - BOLD Y BAJADO
   ============================================ */

/* Cuando el cliente escribe, el texto se ve en BOLD y baja 2px */
#checkout input[type="text"]:not(:placeholder-shown),
#checkout input[type="email"]:not(:placeholder-shown),
#checkout input[type="tel"]:not(:placeholder-shown),
#checkout input[type="number"]:not(:placeholder-shown),
#checkout input[type="password"]:not(:placeholder-shown),
#checkout select:not([value=""]),
#checkout textarea:not(:placeholder-shown) {
    font-weight: 700 !important; /* BOLD */
    padding-top: 14px !important; /* Baja 2px */
    padding-bottom: 10px !important;
    color: #1f2937 !important; /* Gris oscuro para que se vea mejor en bold */
}

/* Para los select (desplegables) */
#checkout select {
    font-weight: 600 !important;
}

#checkout select option {
    font-weight: normal !important; /* Las opciones del desplegable en normal */
}

@media (min-width: 992px) {
    #onepagecheckoutps #right_column {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
    }
}

/* ============================================
   FORZAR ESTILO DE BOTONES PRESTEAMSHOP
   ============================================ */

/* Seleccionamos todos los posibles botones de navegación del módulo */
#onepagecheckoutps button.btn-primary,
#onepagecheckoutps .btn-primary,
#onepagecheckoutps #btn_save_address,
#onepagecheckoutps #btn_continue_shipping,
#onepagecheckoutps #btn_continue_payment,
#onepagecheckoutps .btn-continue,
#onepagecheckoutps .btn-next,
#onepagecheckoutps button[name="submitAddress"] {
    background-color: #EC5985 !important; /* Rosa Mayka */
    background-image: none !important; /* Quita degradados si los hay */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 15px 25px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    width: 100% !important;
    display: block !important;
    min-height: 55px !important;
    box-shadow: 0 4px 6px rgba(236, 89, 133, 0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Efecto Hover */
#onepagecheckoutps button.btn-primary:hover,
#onepagecheckoutps #btn_save_address:hover,
#onepagecheckoutps #btn_continue_shipping:hover {
    background-color: #d94573 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(236, 89, 133, 0.3) !important;
}

/* Asegurar que el texto dentro del botón sea blanco */
#onepagecheckoutps button.btn-primary span,
#onepagecheckoutps #btn_save_address span {
    color: #FFFFFF !important;
}

/* FORZAR DISEÑO ROSA, GRANDE Y REDONDEADO PARA "IR A DIRECCIONES" */
#onepagecheckoutps .continue.btn.btn-outline-primary,
#opc_step_my_account_footer .continue.btn.btn-outline-primary,
span.continue.btn.btn-outline-primary {
    background-color: #EC5985 !important; /* Rosa Mayka */
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;      /* Bordes redondeados */
    padding: 16px 30px !important;       /* Más grande */
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: block !important;           /* Ocupa todo el ancho */
    width: 100% !important;
    min-height: 55px !important;         /* Altura igual al de login */
    line-height: 24px !important;
    opacity: 1 !important;               /* Forzar visibilidad */
    box-shadow: 0 4px 6px rgba(236, 89, 133, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Asegurar que el texto sea blanco siempre */
#onepagecheckoutps .continue.btn.btn-outline-primary a,
#onepagecheckoutps .continue.btn.btn-outline-primary span {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Efecto Hover */
#onepagecheckoutps .continue.btn.btn-outline-primary:hover {
    background-color: #d94573 !important;
    transform: translateY(-1px) !important;
}

/* Hacer el botón del carrito más llamativo */
.cart-content-btn .btn-primary {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(236, 89, 133, 0.4) !important;
    animation: pulse-pink 2s infinite; /* Un ligero pulso para atraer la mirada */
}

@keyframes pulse-pink {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* OCULTAR EL BOTÓN "IR A DIRECCIONES" */
#opc_step_my_account_footer span.continue.btn.btn-outline-primary {
    display: none !important;
}

/* Aumentar tamaño y peso de "Ya soy cliente" y "Compra SIN registro" */
#opc_step_my_account_content .tabs-view .nav-tabs .nav-link {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

#opc_step_my_account_content .tabs-view {
    margin-bottom: 12px;
}

/* ========================================
   ELIMINAR TEXTOS DE VALIDACIÓN
   ======================================== */

/* Ocultar todos los textos pequeños bajo los campos */
#opc_step_my_account_content small,
#opc_step_my_account_content .form-text,
#opc_step_my_account_content .help-block,
#opc_step_my_account_content .invalid-feedback,
#opc_step_my_account_content .valid-feedback,
#opc_step_my_account_content p.small,
#opc_step_my_account_content span.small {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Si el texto está en cursiva (como en tu captura), también lo ocultamos */
#opc_step_my_account_content em,
#opc_step_my_account_content i {
    display: none !important;
}

/* Hacer el bloque de código más visible y atractivo */
.cart-summary-line:has(input[name="discount_name"]),
.promo-code,
#promo-code,
.discount-code {
    background: #fff9e6 !important;
    border: 2px dashed #EC5985 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

/* Texto del título más grande y visible */
.cart-summary-line:has(input[name="discount_name"]) label,
.promo-code label,
#promo-code label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #EC5985 !important;
    margin-bottom: 10px !important;
}

/* Input del código más grande */
input[name="discount_name"],
.promo-code input,
#promo-code input {
    font-size: 15px !important;
    padding: 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
}

/* Botón "Agregar" más visible */
button[name="submitDiscount"],
.promo-code button,
#promo-code button {
    background: #EC5985 !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    border: none !important;
}

/* === RESALTAR OPCIÓN 24 HORAS (delivery_option_368) === */

/* Contenedor principal de la opción 24h */
#checkout .delivery-option.delivery_option_368 {
    position: relative;
    border: 2px solid #2fabce !important; /* Azul Mayka */
    background: #f0faff !important; /* Fondo azul muy suave */
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(47, 171, 206, 0.18) !important;
}

/* Badge "MÁS RÁPIDO" arriba a la derecha */
#checkout .delivery-option.delivery_option_368::before {
    content: "⚡ MÁS RÁPIDO";
    position: absolute;
    top: -12px;
    right: 16px;
    background: #2fabce; /* Azul Mayka */
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* En móvil, que se vea bien centrado */
@media (max-width: 768px) {
    #checkout .delivery-option.delivery_option_368 {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }
}

/* Forzar el diseño de los contenedores */
.pago-recomendado-mayka, .pago-rapido-mayka {
    position: relative !important;
    border: 2px solid #EC5985 !important;
    background: #fff9f5 !important;
    border-radius: 10px !important;
    margin: 15px 0 !important;
    padding: 15px !important;
    display: flex !important;
    align-items: center !important;
}

/* Color Azul para Bizum */
.pago-rapido-mayka {
    border-color: #2fabce !important;
    background: #f0faff !important;
}

/* Estilo de los Badges - Z-INDEX BAJO para no tapar el menú flotante */
.badge-pago-mayka {
    position: absolute !important;
    top: -10px !important;
    right: 10px !important;
    background: #EC5985 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    z-index: 5 !important; /* BAJO para no tapar el WhatsApp (que suele ser z-index 999+) */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.badge-bizum {
    background: #2fabce !important;
}

/* Asegurar que el radio button y el texto se vean bien */
.payment-option label {
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

/* Mensaje de confianza en el carrito */
#confianza-carrito-mayka {
    text-align: center !important;
    padding: 12px 10px !important;
    font-size: 11px !important;
    color: #666 !important;
    border-top: 1px solid #eee !important;
    margin-top: 12px !important;
    background: #fafafa !important;
    border-radius: 6px !important;
    line-height: 1.5 !important;
}

/* En móvil */
@media (max-width: 768px) {
    #confianza-carrito-mayka {
        font-size: 10px !important;
        padding: 10px 8px !important;
    }
}