/* ========================================
   ESTILOS WIDGET LATERAL DE RESERVA
   ======================================== */

/* Widget principal */
.sticky-booking-widget {
    position: relative;
    /* Fondo sólido con degradado suave */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%) !important;
    border: 2px solid #e0e7ff !important;
    /* Evitar que los elementos internos empujen hacia arriba */
    contain: layout style paint;
}

/* Modo Desktop - Mantener posición normal */
@media (min-width: 641px) {
    .sticky-booking-widget {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .lateral-grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.625rem !important;
    }
}

/* Patrón de puntos sutil solo en el widget */
.sticky-booking-widget::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 30% 40%, rgba(34, 197, 94, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
    background-size: 24px 24px, 100% 100%, 100% 100%;
    border-radius: 0.75rem;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

/* Asegurar que el contenido esté por encima del patrón */
.sticky-booking-widget > * {
    position: relative;
    z-index: 1;
}

.sticky-booking-widget { 
    max-width: 320px; 
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.sticky-booking-widget .animate-shimmer {
    animation: shimmer 3s infinite;
}

/* Botón Reservar - Verde sólido con degradado */
.lateral-btn-reserve {
    width: 100%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 
        0 4px 12px rgba(34, 197, 94, 0.4), 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Evitar que el transform afecte el layout */
    will-change: transform;
    transform: translateZ(0);
}

.lateral-btn-reserve::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.lateral-btn-reserve:hover::before {
    left: 100%;
}

.lateral-btn-reserve:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    box-shadow: 
        0 8px 20px rgba(34, 197, 94, 0.6), 
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

.lateral-btn-reserve:active {
    transform: scale(0.99);
    box-shadow: 
        0 4px 12px rgba(34, 197, 94, 0.4), 
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Botón Ver más precios - Azul sólido con degradado */
.lateral-btn-view-more {
    width: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.4), 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Evitar que el transform afecte el layout */
    will-change: transform;
    transform: translateZ(0);
}

.lateral-btn-view-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.lateral-btn-view-more:hover::before {
    left: 100%;
}

.lateral-btn-view-more:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 
        0 8px 20px rgba(59, 130, 246, 0.6), 
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
    color: #ffffff !important;
}

.lateral-btn-view-more:active {
    transform: scale(0.99);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.4), 
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Indicadores de confianza */
.lateral-trust-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: 0.25rem;
}

.lateral-trust-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Modo Móvil - 2 Columnas: Precio | Botones */
@media (max-width: 640px) {
    /* Widget principal */
    .sticky-booking-widget {
        padding: 0.5rem !important;
        max-width: 100% !important;
        margin: 0.5rem auto !important;
    }
    
    /* Ocultar iconos de transporte en móvil */
    .lateral-icons {
        display: none !important;
    }
    
    /* Grid Container - 2 columnas */
    .lateral-grid-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        align-items: start !important;
    }
    
    /* Caja de precio - columna izquierda */
    .lateral-price-box {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .lateral-price-box .text-3xl {
        font-size: 1rem !important;
        margin: 0.25rem 0 !important;
        line-height: 1.2 !important;
    }
    
    .lateral-price-box span {
        font-size: 0.5rem !important;
    }
    
    .lateral-price-box .mt-2 {
        margin-top: 0.25rem !important;
        font-size: 0.5rem !important;
        padding: 0.125rem 0.375rem !important;
    }
    
    .lateral-price-box .py-3 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .lateral-price-box .px-3 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .lateral-price-box svg {
        width: 0.625rem !important;
        height: 0.625rem !important;
    }
    
    /* Contenedor de botones - columna derecha */
    .lateral-buttons-box {
        grid-column: 2 !important;
        grid-row: 1 !important;
        gap: 0.375rem !important;
    }
    
    /* Botones más pequeños */
    .lateral-btn-reserve,
    .lateral-btn-view-more {
        padding: 0.375rem 0.25rem !important;
        font-size: 0.5rem !important;
        gap: 0.2rem !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        border-radius: 0.375rem !important;
        width: 100% !important;
    }
    
    .lateral-btn-reserve svg,
    .lateral-btn-view-more svg {
        width: 0.625rem !important;
        height: 0.625rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Indicadores de confianza - abajo de todo */
    .lateral-trust-indicators {
        font-size: 0.5rem !important;
        gap: 0.375rem !important;
        margin-top: 0.5rem !important;
        padding-top: 0.375rem !important;
        border-top: 1px solid #e5e7eb !important;
    }
    
    .lateral-trust-item svg {
        width: 0.625rem !important;
        height: 0.625rem !important;
    }
    
    /* Badge de oferta */
    .lateral-badge {
        top: -0.375rem !important;
        right: -0.375rem !important;
        font-size: 0.5rem !important;
        padding: 0.125rem 0.375rem !important;
    }
}