html {
    scroll-behavior: smooth;
    /* Se usa meta tag para el color-scheme para mayor compatibilidad */
}
body {
    font-family: 'Cormorant Garamond', serif;
    background-color: #2c4a40; /* Verde Bosque Profundo */
    color: #e8d7b8; /* Oro Claro */
    transition: background-color 0.5s ease-in-out;
    overflow-x: hidden; /* Evitar desbordamiento horizontal */
}
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(212, 167, 98, 0.5); /* Efecto de resplandor */
}
.playfair-font {
    font-family: 'Playfair Display', serif;
}

/* --- Colores COESSENS --- */
:root {
    --main-gold: #d4a762; /* Dorado principal */
    --subtle-gold: #e8d7b8; /* Dorado sutil para texto */
    --main-green: #3b5a4e; /* Verde oscuro principal */
    --secondary-green: #2c4a40; /* Verde más oscuro/profundo para fondos */
    --text-light: #f5f5dc; /* Blanco crema */
}

.text-main-gold {
    color: var(--main-gold); /* Oro Elegante */
}
.text-subtle-gold {
    color: var(--subtle-gold); /* Oro Claro */
}
.bg-main-green {
    background-color: var(--main-green); /* Verde Bosque Profundo */
}
.bg-secondary-green {
    background-color: var(--secondary-green); /* Verde Musgo */
}
.border-main-gold { border-color: var(--main-gold); }

.btn-gold {
    background-color: var(--main-gold);
    color: var(--secondary-green);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-gold:hover {
    background-color: #e8d7b8;
    box-shadow: 6px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.btn-gold:disabled {
    background-color: #9f8a65;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Este estilo ahora NO se usa, pero lo dejamos por si acaso */
.cormorant-font-gold {
    font-family: 'Cormorant Garamond', serif;
    color: var(--main-gold); 
    font-weight: 600; 
}


.divider {
    height: 1px;
    background: linear-gradient(to right, #2c4a40 0%, #d4a762 50%, #2c4a40 100%);
    width: 80%;
    margin: 0 auto;
}
.cs-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cs-letter-container {
    position: relative;
    width: 100px; /* Ajustado para móviles */
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (min-width: 768px) {
    .cs-letter-container {
        width: 150px;
        height: 150px;
    }
}
.cs-letter {
    font-family: 'Cormorant Garamond', serif;
    font-size: 7rem; /* Aumentado para móviles */
    color: #9f8a65; /* Tono más oscuro para la C-S */
    opacity: 0.9;
    text-shadow: 0 0 10px rgba(212, 167, 98, 0.7);
}
@media (min-width: 768px) {
    .cs-letter {
        font-size: 10rem;
    }
}

.curved-text-c, .curved-text-s {
    position: absolute;
    font-family: 'Cormorant Garamond', serif;
    color: #d4a762; /* CAMBIADO: Vuelve al oro brillante (var(--main-gold)) */
    font-size: 0.7rem; /* Reducido para móviles */
    transition: text-shadow 0.3s ease;
    text-shadow: 0 0 5px rgba(212, 167, 98, 0.5); /* CAMBIADO: Vuelve al resplandor estándar */
}

 @media (min-width: 768px) {
    .curved-text-c, .curved-text-s {
        font-size: 0.8rem;
    }
}
.curved-text-c span, .curved-text-s span {
    position: absolute;
    transform-origin: 0 100%;
}

.center-la {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #9f8a65; /* CORRECTO: Tono de oro más oscuro para coincidir con C y S */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 1;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(212, 167, 98, 0.7); /* CORRECTO: Sombra idéntica a C y S */
}

a {
    text-decoration: none;
}
/* Estilos del menú de hamburguesas */
.hamburger-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%; /* Ancho ajustado para móviles */
    max-width: 350px; /* Ancho máximo */
    height: 100%;
    background-color: #3b5a4e; /* Verde Musgo */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding-top: 5rem; /* Espacio para el header */
    overflow-y: auto;
}
.hamburger-menu.open {
    transform: translateX(0);
}
.menu-link, .menu-dropdown-toggle {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #e8d7b8;
    transition: color 0.3s ease;
    border-bottom: 1px solid rgba(212, 167, 98, 0.3);
    text-align: left;
    width: 100%;
    background-color: transparent;
    border-radius: 0;
}
.menu-link:hover, .menu-dropdown-toggle:hover {
    color: #d4a762;
}
.menu-link.active, .menu-dropdown-toggle.active {
    color: #d4a762;
}
.menu-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.menu-dropdown.open {
    max-height: 200px; /* Suficiente para el despliegue */
}
.menu-dropdown a {
    padding: 0.5rem 1.5rem;
    font-size: 1.25rem;
    border-left: 2px solid #e8d7b8;
    margin-left: 1.5rem;
}
/* Animación de flotar para el enlace CS */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}
/* Estilos del carrusel */
.carousel-container {
    position: relative;
    overflow: hidden;
}
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel-item {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}
.carousel-item > div {
    width: 100%;
}
/* Estilos del carrito de compras */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: #3b5a4e;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 100;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.cart-sidebar.open {
    transform: translateX(0);
}
.cart-close-btn {
    background: none;
    border: none;
    color: #d4a762;
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
}
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.cart-item-controls {
    display: flex;
    align-items: center;
}
.cart-item-controls button {
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: 1px solid #d4a762;
    color: #d4a762;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.3s ease;
}
.cart-item-controls button:hover {
    background-color: #d4a762;
    color: #2c4a40;
}
.cart-item-quantity {
    margin: 0 0.5rem;
    font-size: 1rem;
    min-width: 2rem;
    text-align: center;
}
/* Estilos para el fondo del Hero */
.hero-background {
    background-image: url('img/fondofondo.png');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; 
    background-repeat: no-repeat;
}
@media (min-width: 1024px) {
    .hero-background {
        background-attachment: fixed;
    }
}

/* Estilos para el logo SVG */
.coessens-logo-svg {
    fill: #d4a762;
    transition: fill 0.3s ease;
}
.coessens-logo-svg:hover {
    fill: #e8d7b8;
}
/* Loading indicator */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #d4a762;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}
.loader-small {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #d4a762;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* CORREGIDO */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.open {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background-color: #3b5a4e;
    padding: 2rem;
    border-radius: 1rem;
    position: relative;
    max-width: 90%; /* Responsivo: se encoge en pantallas pequeñas */
    width: 500px; /* Ancho máximo para desktop */
    max-height: 90vh; /* Aumentado para dar espacio al formulario de envío */
    overflow-y: auto;
    border: 2px solid #d4a762;
}

/* NUEVO: Estilo para modal de login/registro más ancho */
.modal-content-wide {
    width: 500px; /* Ancho base (móvil) */
    max-width: 90%;
}
@media (min-width: 768px) { /* md breakpoint */
    .modal-content-wide {
        width: 800px; /* Ancho para desktop */
        max-width: 800px;
    }
}

.close-modal-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #d4a762;
    font-size: 2rem;
    cursor: pointer;
}
/* Notificación Toast */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100; /* CORREGIDO */
}
.toast {
    background-color: rgba(60, 90, 78, 0.9);
    color: #e8d7b8;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(-20px);
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
/* Animación de transición para la página */
.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.page-transition.active {
    opacity: 1;
    transform: translateY(0);
}
/* Estilo de la tarjeta de producto */
.fragrance-card {
    background-color: #3b5a4e;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
}
.fragrance-card:hover {
    border-color: #d4a762;
    transform: translateY(-5px);
}
/* Clases para ocultar/mostrar secciones */
.page-section {
    display: none;
}
.page-section.active {
    display: block;
}
/* Estilo para los nombres de fragancias */
.fragrance-name-highlight {
    text-shadow: 0 0 5px rgba(212, 167, 98, 0.5);
}
.fragrance-card img {
    object-fit: contain; /* Ajusta la imagen completa */
    height: 12rem; /* Altura fija para mantener la consistencia */
    width: auto;
}
#product-detail-image {
    object-fit: contain;
    height: auto;
    max-height: 60vh; /* Límite de altura para móviles */
    max-width: 100%;
}
@media(min-width: 1024px) { /* lg breakpoint */
    #product-detail-image {
        max-height: 36rem; /* Restaura el tamaño original para escritorio */
    }
}
/* CSS para que el fondo Hero sea adaptable */
/* .hero-background ya está definido arriba con los cambios */

/* --- ESTILOS PARA LA TARJETA DE REFERIDOS --- */
.referral-sidebar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-100%);
    width: 90%; /* Ancho adaptable para móviles */
    max-width: 350px; /* Ancho máximo en pantallas grandes */
    background-color: #3b5a4e;
    border: 2px solid #d4a762;
    border-left: none;
    border-radius: 0 1rem 1rem 0;
    z-index: 101; /* CORREGIDO */
    transition: transform 0.4s ease-in-out;
    box-shadow: 4px 0 15px rgba(0,0,0,0.3);
}

.referral-sidebar.open {
    transform: translateY(-50%) translateX(0);
}

/* --- INICIO: CAMBIO BOTÓN DE REFERIDOS (MÁS PEQUEÑO EN MÓVIL) --- */
.referral-toggle-btn {
    position: absolute;
    top: 50%;
    right: -32px; /* CAMBIO: Reducido de -40px */
    transform: translateY(-50%);
    width: 32px; /* CAMBIO: Reducido de 40px */
    height: 160px; /* CAMBIO: Reducido de 180px */
    background-color: #d4a762;
    color: #2c4a40;
    border: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0; /* CAMBIO: Reducido de 1rem */
    box-sizing: border-box;
}

/* Estilos para el texto vertical */
.referral-toggle-btn span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 0.8rem; /* CAMBIO: Reducido de 0.9rem (12.8px) */
    letter-spacing: 1px; /* CAMBIO: Reducido de 1.5px */
    text-transform: uppercase;
    white-space: nowrap;
}

/* NUEVO: Media query para restaurar el tamaño en pantallas más grandes */
@media (min-width: 640px) { /* sm breakpoint */
    .referral-toggle-btn {
        right: -40px;
        width: 40px;
        height: 180px;
        padding: 1rem 0;
    }
    .referral-toggle-btn span {
        font-size: 0.9rem; /* 14px */
        letter-spacing: 1.5px;
    }
}
/* --- FIN: CAMBIO BOTÓN DE REFERIDOS --- */


/* INICIO: CAMBIO VISUAL (Slots más pequeños en móvil) */
.referral-slot {
    width: 40px; /* CAMBIO: Reducido a 40px para móviles */
    height: 40px; /* CAMBIO: Reducido a 40px para móviles */
    border: 2px dashed #d4a762;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
/* FIN: CAMBIO VISUAL */

.referral-slot.filled {
    background-color: #d4a762;
    border-style: solid;
    transform: scale(1.1);
}
.referral-slot.filled svg {
    color: #2c4a40;
}
.referral-slot svg {
     color: #d4a762;
}

/* INICIO: CAMBIO VISUAL (Media query para restaurar tamaño de slots) */
@media (min-width: 640px) { /* sm breakpoint de Tailwind */
    .referral-slot {
        width: 45px; /* Tamaño original en pantallas más grandes */
        height: 45px; /* Tamaño original en pantallas más grandes */
    }
}
/* FIN: CAMBIO VISUAL */


/* ===== CAMBIO: Botón para volver arriba ===== */
#back-to-top {
    position: fixed;
    /* Se posiciona más arriba para no chocar con el botón de WhatsApp */
    bottom: 90px;
    right: 20px;
    background-color: #d4a762;
    color: #2c4a40;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99; /* CORREGIDO */
    opacity: 0.8;
    transition: opacity 0.3s, visibility 0.3s;
}
@media (min-width: 768px) {
    #back-to-top {
        bottom: 100px;
    }
}
#back-to-top:hover {
    opacity: 1;
}
.search-input {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem;
    border-radius: 9999px;
    background-color: #3b5a4e;
    border: 1px solid #d4a762;
    color: #e8d7b8;
}
/* CORRECCIÓN: Se usa el pseudo-elemento estándar para el color del placeholder */
.search-input::placeholder {
    color: #9f8a65;
    opacity: 1; /* Asegura la opacidad correcta en todos los navegadores */
}

/* --- NUEVO: Estilos para validación de formularios --- */
.input-error {
    border-color: #ef4444 !important; /* Tailwind red-500 */
}
.form-error-message {
    color: #f87171; /* Tailwind red-400 */
    font-size: 0.75rem;
    margin-top: -0.75rem; /* Ajuste para que no ocupe tanto espacio */
    padding-bottom: 0.75rem;
    min-height: 1rem; /* Para evitar saltos de layout */
    text-align: left;
    padding-left: 0.25rem;
}
/* Estilos para los campos de envío */
.shipping-input {
     width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: #2c4a40;
    border: 1px solid #d4a762;
    color: #e8d7b8;
}
/* NUEVO: Estilos para los enlaces del footer */
.footer-link {
    font-family: 'Playfair Display', serif;
    color: #d4a762;
    text-decoration: underline;
    transition: color 0.3s ease;
}
.footer-link:hover {
    color: #e8d7b8;
}
/* ===== NUEVO: Estilo para las páginas de políticas ===== */
.legal-section-content h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.5rem; /* 24px */
    color: #d4a762; /* Oro Elegante */
}
.legal-section-content p {
    font-family: 'Cormorant Garamond', serif; /* Tipografía más sutil */
    color: #e8d7b8; /* Oro Claro */
    font-size: 1.1rem; /* Ligeramente más grande para legibilidad */
    line-height: 1.75;
}
/* ===== NUEVO: Estilo para banner difuminado ===== */
.header-banner {
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

/* ===== INICIO: ESTILOS PARA EL CHATBOT (REFINADOS) ===== */
#chatbot-container {
    position: fixed;
    bottom: 10px; /* Más abajo */
    left: 10px;   /* Más a la izquierda */
    z-index: 102; /* CORREGIDO */
}
#chatbot-toggle-btn {
    background-color: #d4a762;
    color: #2c4a40;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
#chatbot-toggle-btn:hover {
    transform: scale(1.1);
    background-color: #e8d7b8;
}
#chatbot-window {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 300px; /* Ancho fijo, se ajusta bien a 320px de pantalla */
    height: 420px; 
    background-color: #2c4a40;
    border: 2px solid #d4a762;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom left;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 102; /* CORREGIDO */
}
#chatbot-window.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}
.chatbot-header {
    background-color: #3b5a4e;
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid #d4a762;
}
.chatbot-header h3 {
    color: #d4a762;
    font-size: 1.1rem;
    margin: 0;
}
#chatbot-messages {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.message {
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    line-height: 1.4;
    font-size: 0.9rem;
    word-wrap: break-word;
}
.message.user {
    background-color: #d4a762;
    color: #2c4a40;
    align-self: flex-end;
    border-bottom-right-radius: 0.25rem;
}
.message.bot {
    background-color: #3b5a4e;
    color: #e8d7b8;
    align-self: flex-start;
    border-bottom-left-radius: 0.25rem;
}
.message.bot .fragrance-link {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    color: #d4a762;
}
.chatbot-input-container {
    display: flex;
    padding: 0.75rem;
    border-top: 1px solid #d4a762;
    background-color: #3b5a4e;
}
#chatbot-input {
    flex-grow: 1;
    border: 1px solid #d4a762;
    background-color: #2c4a40;
    color: #e8d7b8;
    padding: 0.6rem 1rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    outline: none;
    font-size: 0.9rem;
}
#chatbot-input::placeholder {
    color: #9f8a65;
}
#chatbot-send-btn {
    background-color: #d4a762;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
 #chatbot-send-btn:hover {
    background-color: #e8d7b8;
}
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.6rem 0.9rem;
}
.typing-indicator span {
    width: 8px;
    height: 8px;
    background-color: #9f8a65;
    border-radius: 50%;
    animation: typing 1s infinite;
}
.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes typing {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}
/* ===== FIN: ESTILOS PARA EL CHATBOT (REFINADOS) ===== */

/* ===== INICIO: NUEVOS ESTILOS PARA LA PÁGINA DE RECIBO ===== */
.receipt-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Para que se apile en móviles */
    gap: 0.5rem;
    border-bottom: 2px dashed #d4a762;
    padding-bottom: 1rem;
}
.receipt-items .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #d4a762;
}
.receipt-items .item-details {
    color: #e8d7b8;
}
.receipt-items .item-price {
    color: #e8d7b8;
    font-weight: bold;
    white-space: nowrap; /* Evita que el precio se parta */
    margin-left: 1rem;
}
.receipt-totals {
    border-top: 2px dashed #d4a762;
    padding-top: 1rem;
    margin-top: 1rem;
}
.receipt-totals div {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    color: #e8d7b8;
    margin-bottom: 0.5rem;
}
.receipt-totals .total {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d4a762; /* Oro principal para el total */
}

/* ===== INICIO: CORRECCIÓN PARA .receipt-item ===== */
/* Estos estilos faltaban y son necesarios para la factura */
.receipt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(212, 167, 98, 0.3); /* Borde más sutil */
}
.receipt-item-details {
    color: #e8d7b8;
}
.receipt-item-price {
    color: #e8d7b8;
    font-weight: bold;
    white-space: nowrap; /* Evita que el precio se parta */
    margin-left: 1rem;
}
/* ===== FIN: CORRECCIÓN PARA .receipt-item ===== */

/* ===== FIN: NUEVOS ESTILOS PARA LA PÁGINA DE RECIBO ===== */


/* ===== INICIO: NUEVOS ESTILOS PARA BOTONES DE PAGO (AÑADIDOS) ===== */
/* ===== CAMBIO 30/10: Estilos de .btn-green-checkout actualizados a .btn-gold ===== */

/* Estilo para el botón de pago deshabilitado (Gris/Opaco) */
.btn-disabled-checkout {
    background-color: #9f8a65; /* Un tono de oro opaco */
    color: #2c4a40;
    opacity: 0.7;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Espacio entre icono y texto */
    /* La fuente .playfair-font se aplica desde el HTML */
}
/* Texto de error dentro del botón deshabilitado */
.btn-disabled-checkout span {
    font-size: 0.9rem; /* Hacemos el texto de error un poco más pequeño */
    font-family: 'Cormorant Garamond', serif; /* Usamos la fuente normal para el error */
    font-weight: 600;
}

/* Estilo para el botón de pago habilitado (AHORA DORADO) */
.btn-green-checkout {
    background-color: #25D366; /* CAMBIADO de verde a dorado */
    color: #2c4a40; /* CAMBIA8DO de blanco a verde oscuro */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Espacio entre icono y texto */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* La fuente .playfair-font se aplica desde el HTML */
}
.btn-green-checkout:hover {
    background-color: #e8d7b8; /* CAMBIADO a dorado claro */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.btn-green-checkout svg {
    stroke: #2c4a40; /* CAMBIADO de blanco a verde oscuro */
}

/* --- NUEVO: Estilos para botón de Google (login/registro) --- */
.btn-google {
    background-color: #ffffff; /* CAMBIO: Fondo blanco */
    color: #333333; /* CAMBIO: Texto oscuro */
    border: 1px solid #d1d5db; /* CAMBIO: Borde gris claro */
    transition: all 0.3s ease;
}
.btn-google:hover {
    background-color: #f3f4f6; /* CAMBIO: Gris claro al pasar el mouse */
    border-color: #9ca3af; 
}
.btn-google img { /* CAMBIO: Estilo para la <img> en lugar del <svg> */
    width: 20px;
    height: 20px;
}

/* --- NUEVO: Estilos para icono de ojo (contraseña) --- */
.password-toggle-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-left: 0.75rem; /* 12px */
    padding-right: 0.75rem; /* 12px */
    display: flex;
    align-items: center;
    color: #9f8a65; /* Oro opaco */
    transition: color 0.2s ease;
}
.password-toggle-btn:hover {
    color: #d4a762; /* Oro principal */
}

/* ===== FIN: NUEVOS ESTILOS PARA BOTONES DE PAGO ===== */

/* ===== INICIO: CORRECCIÓN DE Z-INDEX (CAPAS) ===== */
/* Para asegurar que los elementos flotantes no se tapen */

header {
    z-index: 50; /* Header principal */
}
#back-to-top {
    z-index: 99; /* Botón de subir */
}
.hamburger-menu {
    z-index: 100; /* Menú móvil */
}
.cart-sidebar {
    z-index: 100; /* Carrito */
}
.referral-sidebar {
    z-index: 101; /* Sidebar de referidos */
}
#chatbot-container {
    z-index: 102; /* Contenedor del Chatbot (botón) */
}
#chatbot-window {
    z-index: 102; /* Ventana del Chatbot */
}
/* #welcome-notification tiene z-[103] en el HTML, lo cual es correcto */

.modal {
    z-index: 1050; /* Modales (login, registro, checkout) */
}
.toast-container {
    z-index: 1100; /* Notificaciones Toast (ej: "copiado") */
}
/* #in-app-browser-warning tiene z-[1000] en el HTML, lo cual es correcto */
/* ===== FIN: CORRECCIÓN DE Z-INDEX (CAPAS) ===== */