/* Google Font import for script typography */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

body {
    margin: 0;
    padding: 0;
}

/* Custom cursive signature font style */
.font-signature {
    font-family: 'Dancing Script', cursive;
}

/* Striped background pattern for search filter bar */
.bg-striped {
    background: repeating-linear-gradient(
        90deg,
        #e0e8f5,
        #e0e8f5 20px,
        #ffffff 20px,
        #ffffff 40px
    );
}

/* Skeleton Loading Animation */
.skeleton-box {
    background-color: #e2e5e7;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0)
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Full-width frame background for hero section */
.hero-border {
    background-color: #e0e8f5;
}

/* Hero Carousel Rigorous Alignment Fixes */
#hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    will-change: transform;
}

.carousel-slide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
}

.carousel-slide img,
.carousel-slide video,
.carousel-slide iframe {
    max-width: 100%;
    box-sizing: border-box;
}

/* Active style for active carousel indicator dot */
.carousel-dot.active {
    background-color: #ffffff;
    transform: scale(1.25);
}

/* Styling for dropdown select options to match main button color scheme */
select option {
    background-color: #4a63a3;
    color: #ffffff;
}

select option:disabled {
    color: #ffffff !important;
}

#search-when {
    width: 231px;
}

/* =========================================================
   FLATPICKR DUAL MONTH FIX (ESTRUCTURA DE 2 COLUMNAS REALES)
   ========================================================= */

/* 1. Ancho global del popup (Contenedor principal de 620px) */
.flatpickr-calendar.multiMonth {
    width: 630px !important;
    min-width: 630px !important;
    max-width: 630px !important;
    box-sizing: border-box !important;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 8px !important;
}

/* 2. Cabecera superior de títulos de los meses (October / November) */
.flatpickr-calendar .flatpickr-months {
    display: flex !important;
    width: 100% !important;
    position: relative !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    flex: 1 !important;
    width: 50% !important;
    height: 35px !important;
}

/* 3. Contenedor que junta ambos meses horizontalmente */
.flatpickr-calendar .flatpickr-innerContainer {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: space-between !important;
}

/* 4. CADA MES INDIVIDUAL (Esta es la clave: 300px exactos para cada uno) */
.flatpickr-calendar .flatpickr-rContainer {
    display: inline-block !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    box-sizing: border-box !important;
}

/* 5. Días de la semana (Sun, Mon, Tue...) de CADA mes */
.flatpickr-calendar .flatpickr-weekdays {
    display: flex !important;
    width: 300px !important;
    max-width: 300px !important;
}

.flatpickr-calendar .flatpickr-weekday {
    flex: 1 !important;
    width: 42px !important;
    max-width: 42px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* 6. Cuadrícula de días de CADA mes */
.flatpickr-calendar .dayContainer {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
}

/* 7. Celda de cada día individual (7 columnas perfectas de 42.8px) */
.flatpickr-calendar .flatpickr-day {
    width: 42.8px !important;
    max-width: 42.8px !important;
    height: 38px !important;
    line-height: 38px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}

.flatpickr-calendar .flatpickr-day.startRange {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.flatpickr-calendar .flatpickr-day.endRange {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* 8. Colores de rangos y selección */
.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange {
    background: #4a63a3 !important;
    border-color: #4a63a3 !important;
    color: #ffffff !important;
}

.flatpickr-day.inRange {
    background: #e0e8f5 !important;
    border-color: #e0e8f5 !important;
    color: #4a63a3 !important;
}

/* Slim Scrollbar for Filter Popover & Custom Containers */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db; 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af; 
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-card {
    will-change: transform, opacity;
}

/* Floating call button subtle pulse animation */
#floating-call-btn {
    box-shadow: 0 10px 25px -5px rgba(59, 82, 142, 0.5), 0 8px 10px -6px rgba(59, 82, 142, 0.3);
}