/* web/css/trip-calendar.css */

/* ======================
   Calendar Styling
   ====================== */

/* Forces all days to respond to mouse events and occupy their space */
.vanilla-calendar-day__btn {
    pointer-events: auto !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    border-radius: 50% !important;
}

/* Available day style */
.calendar-day-available {
    background-color: #005b9f !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Unavailable day style */
.calendar-day-blocked {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Selected day style (Dark Blue Circle) */
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_selected {
    background-color: #f0f7ff !important;
    border: 1px solid #005b9f !important;
    font-weight: bold !important;
    color: #005b9f !important;
}

/* Today */
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_today {
    border: 2px dashed #ffffff !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background-color: transparent !important;
}

/* If today is also selected */
.vanilla-calendar-day__btn.vanilla-calendar-day__btn_today.vanilla-calendar-day__btn_selected {
    background-color: #f0f7ff !important;
    color: #005b9f !important;
    border: 1px solid #ffffff !important;
    font-weight: bold !important;
}

/* ========================
   Calendar Range Selection
   ======================== */

/* Blue background with 50% opacity for the entire range, including hover states */
.vanilla-calendar-day_selected-first,
.vanilla-calendar-day_hover-first,
.vanilla-calendar-day_selected-last,
.vanilla-calendar-day_hover-last,
.vanilla-calendar-day_selected-intermediate,
.vanilla-calendar-day_hover-intermediate {
    background-color: rgba(0, 91, 159, 0.5) !important;
}

/* Rounding for the first day */
.vanilla-calendar-day_selected-first,
.vanilla-calendar-day_hover-first {
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Rounding for the last day */
.vanilla-calendar-day_selected-last,
.vanilla-calendar-day_hover-last {
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Intermediate days: no rounded borders */
.vanilla-calendar-day_selected-intermediate,
.vanilla-calendar-day_hover-intermediate {
    border-radius: 0 !important;
}

/* For intermediate days */
.vanilla-calendar-day__btn_selected-intermediate,
.vanilla-calendar-day__btn_hover-intermediate {
    background-color: transparent !important;
    color: #005b9f !important;
    border: none !important;
    font-weight: 500 !important;
}


/* =========================================
   StartDate field Styling
   ========================================= */

.selected-dates-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;  /* Separation between startDate and selector */
}

.selected-dates-element.start .selected-date-value {
    margin-bottom: 0 !important;
}



/* =========================================
   Duration / EndDate Dropdown Styling
   ========================================= */

/* Dropkick container */
#duration-select-wrapper .dk-select,
#duration-select-wrapper select {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    cursor: pointer;
    width: auto !important;
    min-width: 150px;
    margin-top: 19px !important;
}

/* Dropkick inside text */
#duration-select-wrapper .dk-selected {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 4px 30px 4px 10px !important;
    font-weight: inherit !important;
}

/* Dropkick arrow */
#duration-select-wrapper .dk-selected::before,
#duration-select-wrapper .dk-selected::after {
    border-top-color: #ffffff !important;
}

/* DDL in dropkick */
#duration-select-wrapper .dk-select-options {
    background-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Individual options */
#duration-select-wrapper .dk-option {
    color: #333333 !important;
    padding: 8px 10px !important;
}

/* Selected option inside DDL */
#duration-select-wrapper .dk-option-selected,
#duration-select-wrapper .dk-option:hover {
    background-color: #f0f7ff !important;
    color: #005b9f !important;
}

#duration-select-wrapper > .dk-select:first-child {
    margin-top: -5px !important;
    margin-bottom: 0 !important;
}



/* ==========================
   EndDate for Hotels Styling
   ========================== */

.nights-count {
    font-size: 0.85em;
    font-style: italic;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.9;
    display: inline-block;
    margin-left: 5px;
    margin-top: 2px;
}

.selected-dates-element {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.selected-date-label {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 5px;
}