/**
 * DROPDOWN CARRITO - CSS LIMPIO Y FUNCIONAL
 * Este archivo sobrescribe todos los demás estilos del dropdown
 */

/* ===== COLORES PERSISTENTES DE TICKETS ===== */

/*
 * NOTA: CSS attr() no funciona para colores en la mayoría de navegadores.
 * Los colores se aplican vía JavaScript y se preservan con estas reglas CSS.
 */

/* Backup: Colores por data attributes específicos (generados dinámicamente) */
.cart-dropdown .cart-dropdown-item[data-background-color="#8EC448"] {
    background-color: #8EC448 !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#FF6B35"] {
    background-color: #FF6B35 !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#4ECDC4"] {
    background-color: #4ECDC4 !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#FFD23F"] {
    background-color: #FFD23F !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#9B59B6"] {
    background-color: #9B59B6 !important;
}

/* Preservar colores aplicados vía JavaScript */
.cart-dropdown .cart-dropdown-item.color-applied {
    /* El color ya está aplicado vía style attribute */
}

/* Asegurar que elementos con clase color aplicada mantengan su estilo */
.cart-dropdown .cart-dropdown-item.has-ticket-color {
    /* Preservar estilos inline */
}

/* PERMITIR CARRITO EN EL HEADER */
/* Pero respetar lógica anti-duplicación de Elementor sticky */
.header-social .reservas-cart-shortcode,
.header-cart .reservas-cart-shortcode,
.site-header .reservas-cart-shortcode {
    display: inline-flex;
    visibility: visible;
}

/* En Elementor sticky activo: forzar visibilidad del carrito en sticky */
.elementor-sticky--active .reservas-cart-shortcode {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Cuando hay sticky activo, ocultar carritos fuera del sticky */
body:has(.elementor-sticky--active) .reservas-cart-shortcode:not(.elementor-sticky--active *) {
    display: none !important;
    visibility: hidden !important;
}

/* RESET Y BASE DEL DROPDOWN */
.cart-dropdown {
    /* Resetear herencias problemáticas */
    box-sizing: border-box !important;

    /* Posicionamiento base - Desktop */
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;

    /* Dimensiones Desktop */
    width: 380px !important;
    max-width: calc(100vw - 40px) !important;
    min-width: 300px !important;
    max-height: 580px !important;

    /* Apariencia */
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;

    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    margin: 0 !important;

    /* Estados inicial (oculto) */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;

    /* Z-index alto */
    z-index: 999999 !important;
    pointer-events: none !important;

    /* Tipografía - hereda del tema activo */
    font-family: var(--calendario-font-family, var(--wp--preset--font-family--body, system-ui, sans-serif)) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--calendario-color-text-primary, #333) !important;
}

/* ESTADO VISIBLE DEL DROPDOWN - Desktop */
.cart-dropdown[aria-hidden="false"],
.cart-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* CONTENIDO DEL DROPDOWN */
.cart-dropdown .cart-dropdown-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    background: transparent !important;
    border: none !important;
}

.cart-dropdown .cart-items {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding-bottom: 0;
}

/* Solo mostrar scroll cuando sea necesario */
.cart-dropdown .cart-items:not(:has(.cart-dropdown-item:nth-child(5))) {
    overflow: auto !important;
}

/* Solo scroll en desktop si hay muchos items */
@media (min-width: 769px) {
    .cart-dropdown .cart-items {
        max-height: 450px !important;
    }
}

/* ITEMS DEL CARRITO */
.cart-dropdown .cart-dropdown-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    gap: 12px !important;
    width: 100% !important;
    position: relative !important;
    /* CRÍTICO: NO sobrescribir background-color para preservar colores inline del PHP */
}

/* PRIORIDAD MÁXIMA: Preservar TODOS los estilos inline de background-color */
.cart-dropdown .cart-dropdown-item[style*="background-color"] {
    /* FORZAR: Mantener estilos inline aplicados desde PHP sin sobrescribir */
}

/* CRÍTICO: Regla específica para forzar que los backgrounds inline NUNCA se pierdan */
div.cart-dropdown div.cart-dropdown-item[style*="background-color"] {
    /* Esta regla más específica asegura que los estilos inline del PHP se mantengan */
}

/* ÚLTIMO RECURSO: Si todo falla, aplicar color por defecto visible */
.cart-dropdown .cart-dropdown-item:not([style*="background-color"]) {
    background-color: #f8f9fa !important; /* Color gris claro para ver que falta el color original */
}

/* PRIORIDAD MÁXIMA: Colores de ticket sobrescriben todo lo demás */
.cart-dropdown .cart-dropdown-item.has-ticket-color[style*="background-color"] {
    /* Los estilos inline del ticket tienen máxima prioridad */
}

/* Asegurar que estilos de alternancia NO sobrescriban colores de ticket */
.cart-dropdown .cart-dropdown-item.has-ticket-color {
    /* Los colores de ticket siempre ganan sobre alternancia */
}

/* FORZAR: Preservar colores inline con máxima prioridad */
.cart-dropdown .cart-dropdown-item[style*="background-color"] {
    /* Mantener estilos inline aplicados por JavaScript */
}

/* Proteger contra resets de background */
.cart-dropdown .cart-dropdown-item[data-background-color] {
    /* Elementos con colores de ticket definidos no deben perder background */
}

/* CSS Backup: Si JavaScript falla, aplicar colores por atributos data */
.cart-dropdown .cart-dropdown-item[data-background-color]:not([style*="background-color"]) {
    background-color: attr(data-background-color) !important;
}

/* BACKUP MEJORADO: Usar CSS variables para aplicar colores desde data attributes */
.cart-dropdown .cart-dropdown-item[data-background-color="#8EC448"] {
    background-color: #8EC448 !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#ADD899"] {
    background-color: #ADD899 !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#00A99D"] {
    background-color: var(--calendario-color-primary, #00A99D) !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#FFA500"] {
    background-color: #FFA500 !important;
}

.cart-dropdown .cart-dropdown-item[data-background-color="#FF6B6B"] {
    background-color: #FF6B6B !important;
}

/* Regla específica para preservar colores aplicados dinámicamente */
.cart-dropdown .cart-dropdown-item.color-applied {
    /* Clase añadida por JS para marcar que ya tiene color aplicado */
}

.cart-dropdown .cart-dropdown-item:last-child {
    border-bottom: none !important;
}

.cart-dropdown .cart-item-image {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 60px !important;
    background: none !important;
}

.cart-dropdown .cart-item-image img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    display: block !important;
}

.cart-dropdown .cart-item-details {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
    padding-right: 30px !important; /* Espacio para botón eliminar */
}

.cart-dropdown .cart-item-name {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    color: #ffff !important;
}

.cart-dropdown .cart-item-date {
    font-size: 12px !important;
    color: #ffff !important;
    margin: 0 0 4px 0 !important;
}

.cart-dropdown .cart-item-price {
    display: flex !important;
    flex-direction: column !important;
    font-size: 13px !important;
    color: #ffff !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
}

/* CONTROLES DE CANTIDAD */
.cart-dropdown .cart-item-quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
}

.cart-dropdown .quantity-btn,
.cart-dropdown .cart-quantity-btn {
    width: 28px !important;
    height: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    color: white !important;
}

.cart-dropdown .quantity-btn:hover:not(:disabled),
.cart-dropdown .cart-quantity-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.cart-dropdown .quantity-btn:disabled,
.cart-dropdown .cart-quantity-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.cart-dropdown .cart-quantity-btn svg,
.cart-dropdown .quantity-btn svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
}

.cart-dropdown .cart-quantity-btn svg path,
.cart-dropdown .quantity-btn svg path {
    stroke: currentColor !important;
}

.cart-dropdown .quantity-input {
    width: 40px !important;
    height: 28px !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #000000 !important;
}

/* BOTÓN ELIMINAR */
.cart-dropdown .cart-item-remove {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: none !important; /* Sin background */
}

.cart-dropdown .cart-item-remove:hover {
    transform: scale(1.1) !important;
}

/* TOTAL DEL CARRITO */
.cart-dropdown .cart-total {
    border-top: 1px solid #eee !important;
    padding: 2px 0 !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    margin: 0 !important;
    color: var(--calendario-color-primary, #00A99D) !important;
}

/* ACCIONES DEL CARRITO */
.cart-dropdown .cart-actions {
    display: flex !important;
    gap: 10px !important;
    padding-top: 10px !important;
    margin: 0 !important;
}

.cart-dropdown .cart-actions a {
    width: auto !important;
    flex: 1 !important;
    padding: 12px 16px !important;
    text-align: center !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cart-dropdown .btn-checkout,
.cart-dropdown .btn-view-cart {
    background: var(--calendario-color-primary, #00A99D) !important;
    color: white !important;
    border-color: var(--calendario-color-primary, #00A99D) !important;
}

.cart-dropdown .btn-checkout:hover,
.cart-dropdown .btn-view-cart:hover {
    background: var(--calendario-color-primary-dark, #008a7e) !important;
    color: white !important;
    border-color: var(--calendario-color-primary-dark, #008a7e) !important;
}

/* CARRITO VACÍO */
.cart-dropdown .cart-empty {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #666 !important;
}

/* SCROLLBAR PERSONALIZADA */
.cart-dropdown .cart-items::-webkit-scrollbar {
    width: 6px !important;
}

.cart-dropdown .cart-items::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.cart-dropdown .cart-items::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
}

.cart-dropdown .cart-items::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1 !important;
}



/* DESKTOP - Posicionar relativo al viewport */
@media (min-width: 769px) {
    .cart-dropdown[aria-hidden="false"] {
        position: absolute !important;
        z-index: 999999 !important;
    }
}

/* RESPONSIVO - MÓVIL */
@media (max-width: 768px) {
    /* Posicionamiento específico para móvil */
    .reservas-cart-shortcode .cart-dropdown {
        right: -18px !important;
    }
}

/* Estilos aplicados por JavaScript con clase mobile-mode */
.cart-dropdown.mobile-mode {
    right: -18px !important;
}

    /* Solo aplicar cuando está movido al body */
    body > .cart-dropdown,
    .cart-dropdown.moved-to-body {
        /* Modal full-screen para móvil */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        z-index: 999999 !important;

        /* Resetear cualquier constrainer */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        contain: none !important;
        clip: none !important;
        overflow: visible !important;

        /* Overlay oscuro */
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(5px) !important;

        /* Layout modal */
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;

        /* Estado inicial oculto */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(100%) !important;
    }

    body > .cart-dropdown[aria-hidden="false"],
    .cart-dropdown.moved-to-body[aria-hidden="false"] {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    /* Contenido del modal móvil */
    .cart-dropdown .cart-dropdown-content {
        background: white !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 0 20px !important;
        overflow-y: auto !important;
        position: relative !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }


    /* Botón de cierre REAL - reemplaza al pseudo-elemento */
    .cart-dropdown-close-btn {
        content: "✕" !important;
        position: absolute !important;
        top: -46px !important;
        right: 6px !important;
        font-size: 20px !important;
        color: #ffff !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.7) !important;
        pointer-events: auto !important;
        border: none !important;
        outline: none !important;
        transition: all 0.3s ease !important;
    }

    .cart-dropdown-close-btn:hover {
        background: rgba(0, 0, 0, 0.9) !important;
        transform: scale(1.1) !important;
    }

    /* Mantener el pseudo-elemento como fallback visual pero sin pointer-events */
    .cart-dropdown::after {
        display: none !important; /* Ocultarlo ya que usaremos el botón real */
    }

    /* Ocultar pseudo-elemento en desktop para evitar interferencias */
    @media (min-width: 769px) {
        .cart-dropdown::after {
            display: none !important;
        }
    }

    /* Textos blancos en dropdown móvil */
    .cart-dropdown .cart-item-name,
    .cart-dropdown .cart-item-date,
    .cart-dropdown .cart-item-price {
        color: #ffff !important;
    }

    .cart-dropdown .cart-total {
        color: var(--calendario-color-primary, #00A99D) !important;
    }

    /* Elementos más grandes en móvil */
    .cart-dropdown .cart-dropdown-item {
        padding: 15px !important;
        border-bottom: 1px solid #eee !important;
    }

    .cart-dropdown .cart-item-image {
        width: 70px !important;
        height: 70px !important;
    }

    .cart-dropdown .cart-item-image img {
        width: 70px !important;
        height: 70px !important;
    }

    .cart-dropdown .cart-actions {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 0 !important;
    }

    .cart-dropdown .cart-actions a {
        padding: 15px !important;
        font-size: 16px !important;
    }

    .cart-dropdown .cart-items {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        flex: 1 !important;
        overflow-y: auto !important;
        max-height: none !important;
        padding-bottom: 0;
    }

    .cart-dropdown .cart-total {
        border-top: 2px solid #eee !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        background: white !important;
    }

    .cart-dropdown .cart-actions {
        flex-shrink: 0 !important;
        background: white !important;
        padding-top: 10px !important;
    }

}