/* ===================================================
   STYLE3.CSS (Estilos para la página de Checkout)
   =================================================== */

body {
    background-color: #f7f7f7; /* Fondo suave */
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* --- Estilos del Encabezado (Brand) --- */
header {
    background-color: #ffffff;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
}
.logo {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}
.name {
    font-size: 1.8rem;
    font-weight: bold;
    color: #e91e63; /* Color corporativo rosa */
    font-family: cursive;
}

/* --- Contenedor Principal y Diseño de Columnas (Flexbox) --- */
.checkout-main {
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}
.checkout-container {
    display: flex;
    gap: 30px;
    padding: 20px;
}

/* Columna de Pasos (Principal) */
.checkout-steps {
    flex-grow: 1;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Columna de Resumen (Aside) */
.checkout-summary {
    flex-shrink: 0;
    width: 350px;
    background-color: #fffbfb; 
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    align-self: flex-start; /* Se mantiene arriba */
    position: sticky;
    top: 20px;
}

/* --- Estilos de las Secciones y Títulos --- */
.checkout-step {
    display: none; /* Oculta todos los pasos por defecto */
}
.checkout-step.active {
    display: block; /* Muestra solo el paso activo */
}
h2 {
    font-size: 1.5rem;
    color: #e91e63;
    margin-bottom: 25px;
    border-bottom: 2px solid #f8bbd0;
    padding-bottom: 10px;
}

/* --- Estilos del Formulario --- */
.form-group {
    margin-bottom: 15px;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #e91e63;
}
input[type="email"],
input[type="text"],
input[type="tel"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; 
    font-size: 1rem;
}
input::placeholder {
    color: #e91e63;
}

/* Distribución de campos en filas */
.form-row {
    display: flex;
    gap: 20px;
}
.half-width {
    flex: 1; 
}

/* --- Botones de Navegación --- */
.next-step-btn,
.prev-step-btn,
.final-checkout-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1rem;
}

/* Botón Continuar (Rosa principal) */
.next-step-btn {
    background-color: #e91e63;
    color: white;
    margin-top: 15px;
}
.next-step-btn:hover {
    background-color: #c2185b;
}

/* Botones Volver */
.prev-step-btn {
    background-color: #ccc;
    color: #333;
    margin-right: 15px;
}
.prev-step-btn:hover {
    background-color: #bbb;
}

.step-buttons {
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    margin-top: 25px;
}

/* Botón Finalizar Compra */
.final-checkout-btn {
    background-color: #e91e63; /* Verde para acción final */
    color: white;
}
.final-checkout-btn:hover {
    background-color: #e91e63;
}

/* --- Estilos del Resumen de la Compra (Aside) --- */
.checkout-summary h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 20px;
    text-align: center;
}
#checkout-items-list p {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin-bottom: 8px;
    border-bottom: 1px dashed #f8bbd0;
    padding-bottom: 5px;
}

.checkout-total {
    border-top: 2px solid #e91e63;
    padding-top: 15px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.checkout-total h4 {
    font-size: 1.5rem;
    margin: 0;
    color: #333;
}
#checkout-total-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #e91e63;
}

/* --- Media Queries (Adaptación a Móviles) --- */
@media (max-width: 900px) {
    .checkout-container {
        flex-direction: column;
        padding: 10px;
    }
    .checkout-summary {
        width: 100%;
        position: static;
        margin-top: 20px;
    }
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}
/* Para PSE, si usas texto en lugar de imagen, asígnale un estilo */
.pse-text-logo {
    font-weight: bold;
    color: #444;
    font-size: 1.2rem;
}

/* Estilos para los logos en el grid principal (tarjetas, addi) */
.card-logos {
    max-width: 80px;
    height: auto;
}
.addi-logo {
    max-width: 60px; /* Ajusta este valor si es necesario */
    height: auto;
}

/* Estilos para las imágenes de tarjetas dentro del formulario de tarjeta */
.card-logos-select img.card-type-icon {
    width: 40px; /* Tamaño de los logos individuales */
    height: auto;
    vertical-align: middle;
}
/* Ajuste en el label para el selector de tarjetas */
.card-logos-select label {
    display: flex; /* Asegura que la imagen y el padding se centren */
    align-items: center;
    justify-content: center;
    padding: 8px 15px; 
}
/* --- Estilos para Métodos de Pago (Asegurando Alineación) --- */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 15px;
    margin-bottom: 25px;
}

/* Base de la Opción de Pago (IMPORTANTE para centrar) */
.payment-option label {
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: space-between; /* Mueve el nombre a la izquierda y el logo a la derecha */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: normal;
    margin-bottom: 0;
    position: relative;
    background-color: #fff;
    /* Eliminar el margen extra que podría estar causando desalineación */
}

/* Estilo cuando está seleccionado */
.payment-option input[type="radio"]:checked + label {
    border-color: #e91e63; /* Borde rosa al seleccionar */
    box-shadow: 0 0 5px rgba(233, 30, 99, 0.3);
}


/* --- Estilos Específicos de Logos (Usando tus archivos .webp) --- */

/* Contenedor general de logos para Tarjeta de débito/crédito */
.payment-option .card-logos {
    max-width: 100px; /* Tamaño adecuado para Visa/Mastercard juntas */
    height: auto;
    /* Ajusta si necesitas separarlo más del texto */
}

/* Logo de Addi */
.payment-option .addi-logo {
    max-width: 60px; /* Tamaño para el logo de Addi */
    height: auto;
}

/* Logo o Texto de PSE */
.payment-option .pse-logo, .payment-option .pse-text-logo {
    font-weight: bold;
    color: #e91e63; /* Color típico de PSE, puedes ajustarlo */
    font-size: 1.2rem;
    margin-left: auto; /* Empuja el PSE/Logo a la derecha si es necesario */
}


/* --- Si usas los logos individuales (en el formulario de tarjeta) --- */
.card-logos-select {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.card-logos-select label {
    /* Aquí la imagen está dentro del label, ajustamos el tamaño de la imagen */
    padding: 5px; /* Menos padding para solo mostrar el logo */
}
.card-logos-select img.card-type-icon {
    width: 50px; /* Tamaño de los logos individuales (Visa/Mastercard) */
    height: auto;
}
/* ==============================================
   AJUSTES CLAVE PARA EL PASO 3 PAGO (style3.css)
   ============================================== */

/* --- 1. Contenedor de Métodos de Pago (Grid) --- */
.payment-methods-grid {
    display: grid;
    /* Fuerza dos columnas de igual ancho */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px 30px; /* Espacio vertical y horizontal */
    margin-bottom: 25px;
}

/* --- 2. Base de la Opción de Pago (IMPORTANTE: Controla el radio button) --- */
.payment-option input[type="radio"] {
    display: none; /* Oculta el radio button nativo */
}

.payment-option label {
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: space-between; /* Alinea texto a izquierda y logo/punto a derecha */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
    position: relative;
    background-color: #fff;
    height: 60px; /* Fija una altura para uniformidad visual */
    box-sizing: border-box;
}

/* Estilo para el punto de radio button personalizado */
.payment-option label::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #ccc;
    margin-right: 10px;
    order: 2; /* Mueve el punto a la derecha, después del nombre */
}

/* Estilo cuando está seleccionado (Mueve el punto a la posición inicial antes del nombre) */
.payment-option input[type="radio"]:checked + label::before {
    background-color: #e91e63;
    border-color: #e91e63;
    order: 0; /* Lo devuelve a la izquierda si quieres el punto al inicio */
}

.payment-name {
    font-weight: bold;
    flex-grow: 1; 
    margin-left: 10px; /* Separación si el punto está a la izquierda */
    order: 1; /* Mantiene el nombre en el medio */
}

/* --- 3. Control de Tamaño de Logos (CLAVE PARA LA IMAGEN GRANDE) --- */

/* PSE, Addi, Sistecredito y Tarjetas */
.payment-option img, 
.payment-option span {
    max-width: 80px; /* Restringe el ancho máximo de las imágenes */
    max-height: 40px; /* Restringe la altura máxima */
    width: auto;
    height: auto;
    object-fit: contain; /* Asegura que la imagen se vea completa dentro de su caja */
    margin-left: 10px;
    order: 3; /* Asegura que el logo esté al final (derecha) */
}

/* Si la opción Addi es muy grande, ajústala más */
#pago-addi + label img {
    max-width: 80px; 
    max-height: 25px; /* Ajuste más estricto para el logo Addi */
}

/* Para la opción "Exclusivo compras por WhatsApp" que no tiene imagen */
.payment-option.whatsapp-option label {
    justify-content: flex-start; /* Alinea todo a la izquierda si no hay logo */
}

/* --- 4. Formulario de Tarjeta (Alineación de logos) --- */
.card-logos-select {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center; /* Centra los logos de Visa/Mastercard */
}

.card-logos-select label {
    /* Desactivamos el estilo de 'payment-option' para este radio button de tarjeta */
    display: flex;
    align-items: center;
    border: none; 
    padding: 0;
    margin: 0;
    height: auto;
}

.card-logos-select img.card-type-icon {
    width: 50px; 
    height: auto;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.card-logos-select input[type="radio"]:checked + label img {
    border-color: #e91e63;
    box-shadow: 0 0 3px rgba(233, 30, 99, 0.5);
}
/* ======================================= */
/* Estilos para reset_password.php */
/* ======================================= */

/* Contenedor Principal del Formulario */
.reset-container {
    max-width: 400px;
    /* Ajuste de margin para compensar el header fixed y centrar */
    margin: 70px auto 30px; 
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.15); /* Sombra suave con tinte rosa */
    text-align: center;
    /* Animación de entrada sutil */
    animation: fadeIn 0.6s ease-out; 
}
/* Título */
.reset-container h2 {
    color: #b03060; /* Rosa oscuro/magenta de la marca */
    margin-bottom: 25px;
    font-size: 1.8rem;
    font-weight: 700;
}

/* Mensaje de Error (Clase .error del PHP) */
.reset-container .error {
    color: #e53935 !important; /* Rojo para el texto */
    background-color: #ffebee; /* Fondo rosa muy claro */
    border: 1px solid #e53935;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.95rem;
    text-align: left;
}

/* Contenido del formulario */
.reset-container form {
    display: flex;
    flex-direction: column;
    gap: 15px; 
    text-align: left;
}

/* Etiquetas */
.reset-container label {
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 5px;
    font-size: 1rem;
    display: block; 
}

/* Campos de Contraseña */
.reset-container input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #ffc0cb; /* Borde rosa pastel */
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
    box-sizing: border-box;
}

.reset-container input[type="password"]:focus {
    border-color: #e91e63; /* Rosa brillante al enfocar */
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.4);
}

/* Botón de Actualizar - Estilo principal de acción (similar a btn-border-pink/final-checkout-btn) */
.reset-container button[type="submit"] {
    background-color: #e91e63; /* Rosa principal de Korá */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s, box-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reset-container button[type="submit"]:hover {
    background-color: #e91e63; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 105, 180, 0.5);
}

/* Enlace de retorno */
.reset-container .back-link {
    display: block;
    margin-top: 25px;
    color: #b03060; 
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
}

.reset-container .back-link:hover {
    color: #e91e63;
    text-decoration: underline;
}

/* Animación (asumiendo que se usa en el CSS general) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ======================================= */
/* Estilos para forgot_password.php (usando .login-container) */
/* ======================================= */

/* Contenedor Principal del Formulario */
.login-container {
    max-width: 400px;
    /* Ajusta el margen para centrar y dejar espacio bajo el header */
    margin: 60px auto 30px; 
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    /* Sombra suave con tinte rosa para el efecto "Korá" */
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.15); 
    text-align: center;
    /* Animación de entrada sutil (si está definida en otro lugar) */
    animation: fadeIn 0.6s ease-out; 
}

/* Título */
.login-container h2 {
    color: #b03060; /* Rosa oscuro/magenta de la marca */
    margin-bottom: 25px;
    font-size: 1.8rem;
    font-weight: 700;
}

/* Contenido del formulario */
.login-container form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los elementos del formulario */
    text-align: left;
}

/* Etiquetas */
.login-container label {
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 5px;
    font-size: 1rem;
    display: block;
}

/* Campo de Entrada (Email o Usuario) */
.login-container input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #ffc0cb; /* Borde rosa pastel */
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
    box-sizing: border-box;
}

.login-container input[type="text"]:focus {
    border-color: #ff69b4; /* Rosa brillante al enfocar */
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.4);
}

/* Botón de Enviar Enlace de Recuperación */
.login-container button[type="submit"] {
    background-color: #ff69b4; /* Rosa principal de Korá */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s, box-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%;
}

.login-container button[type="submit"]:hover {
    background-color: #e35a9f; 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 105, 180, 0.5);
}

/* Nota: Si no tienes definida la animación 'fadeIn' en style2.css o style3.css, puedes añadirla: */
/*
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
*/
/* ========================================================================= */
/* ESTILOS ESPECÍFICOS PARA REGISTRO.PHP (Formulario de Creación de Cuenta) */
/* ========================================================================= */

/* 1. RESET BÁSICO (Crucial para eliminar cualquier cuadro blanco no deseado) */
html, body {
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box; 
}

/* 2. ESTILOS DEL CUERPO (Fondo y fuente) */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Fondo con degradado pastel suave */
    background: linear-gradient(135deg, #fcf6f9 0%, #ffe4e9 100%); 
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* 3. CONTENEDOR DE REGISTRO (La tarjeta principal del formulario) */
.register-container {
    width: 90%;
    max-width: 420px; 
    background-color: #ffffff; 
    padding: 35px 30px;
    border-radius: 20px; /* Bordes suaves */
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.15); /* Sombra con tinte rosa */
    border: 1px solid #fce4ec; /* Borde muy sutil */
    text-align: center;
    margin: 100px auto 30px auto; /* Margen superior para separarlo del header fijo */
    animation: fadeIn 0.8s ease-out;
}

/* Título */
.register-container h2 {
    color: #b03060; /* Rosa oscuro que contrasta */
    margin-bottom: 30px;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* 4. FORMULARIO Y CAMPOS */
.register-container form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los campos */
    text-align: left;
}

.register-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #4a4a4a;
    font-size: 1em;
}

.register-container input[type="text"],
.register-container input[type="email"],
.register-container input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #ffc0cb; /* Borde rosa pastel visible */
    border-radius: 10px;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fffafc; 
}

/* Estilo al enfocar (clic) */
.register-container input:focus {
    border-color: #ff69b4; /* Rosa fuerte/Hot Pink */
    outline: none;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.6); 
}

/* 5. BOTÓN DE REGISTRO */
.register-container button[type="submit"] {
    background-color: #ff69b4; /* Rosa principal */
    color: white;
    border: none;
    padding: 15px;
    margin-top: 25px;
    border-radius: 10px;
    font-size: 1.15em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    letter-spacing: 1px;
}

.register-container button[type="submit"]:hover {
    background-color: #e55a9b; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(255, 105, 180, 0.4); 
}

/* 6. ENLACE EXTRA (Para ir a Iniciar sesión) */
.extra-link {
    margin-top: 25px;
    font-size: 0.95em;
    color: #6a6a6a;
}

.extra-link p {
    margin: 0;
}

.extra-link a {
    color: #b03060; /* Rosa oscuro */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s, text-decoration 0.3s;
}

.extra-link a:hover {
    color: #ff69b4;
    text-decoration: underline;
}

/* 7. ANIMACIÓN DE ENTRADA */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 8. AJUSTES PARA DISPOSITIVOS MÓVILES */
@media (max-width: 600px) {
    .register-container {
        margin-top: 80px; /* Reducir el margen superior en móvil */
        padding: 25px 20px;
        border-radius: 15px;
    }

    .register-container h2 {
        font-size: 1.6em;
    }

    .register-container button[type="submit"] {
        padding: 12px;
        font-size: 1.1em;
    }
}
/* ======================================= */
/* 💖 Estilos Específicos para bienvenido.php */
/* ======================================= */

/* --- Contenedor Principal de Bienvenida --- */
.welcome-container {
    /* Centrado en la página */
    max-width: 600px;
    margin: 100px auto 40px; /* Separación del header */
    padding: 40px;
    
    /* Estilo estético */
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(255, 105, 180, 0.2); /* Sombra suave rosa */
    text-align: center;
    animation: fadeInScale 0.8s ease-out; /* Animación al cargar */
}

/* --- Título H2 de Bienvenida --- */
.welcome-container h2 {
    font-size: 2.2rem;
    color: #b03060; /* Color principal (rosa oscuro) */
    margin-bottom: 15px;
    font-weight: 700;
}

/* --- Párrafo de Descripción --- */
.welcome-container p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- Botón de Cerrar Sesión --- */
.btn-logout {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid #ff69b4; /* Borde rosa vibrante */
    background: #ff69b4; /* Fondo rosa vibrante */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px; /* Bordes redondeados para un look suave */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-logout:hover {
    background: #b03060; /* Cambio de color al pasar el mouse */
    border-color: #b03060;
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
    transform: translateY(-2px); /* Pequeño efecto 3D */
}

/* --- Pie de Página (Footer) --- */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffe4e1; /* Rosa muy pálido */
    color: #b03060;
    text-align: center;
    padding: 15px 0;
    font-size: 0.9rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* --- Animación de Entrada --- */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Ajuste para móviles si el diseño base no es totalmente responsivo --- */
@media (max-width: 768px) {
    .welcome-container {
        margin: 80px 20px 20px;
        padding: 30px 20px;
    }

    .welcome-container h2 {
        font-size: 1.8rem;
    }
}