/* Custom Air Datepicker Styles to match your application */

.air-datepicker-input {
    width: 100%;
    padding: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    font-size: var(--font-size-base);
    background-color: white;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.air-datepicker-input:hover {
    border-color: var(--secondary-color);
}

.air-datepicker-input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px var(--secondary-color-light);
}

/* Custom Air Datepicker container styles */
.air-datepicker {
    padding: 16px;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Core colors matching your UI */
    --adp-color: var(--text-primary);
    --adp-background-color: #fff;
    --adp-accent-color: var(--secondary-color);
    
    /* Clean, modern cell styling */
    --adp-cell-background-color-selected: var(--secondary-color);
    --adp-cell-background-color-selected-hover: var(--secondary-color);
    --adp-cell-color-selected: white;
    --adp-cell-size: 36px;
    
    /* Subtle hover effects */
    --adp-cell-background-color-hover: var(--secondary-color-light);
    --adp-cell-background-color-in-range: var(--secondary-color-light);
    
    /* Modern navigation */
    --adp-nav-height: 32px;
    --adp-nav-arrow-color: var(--text-primary);
    
    /* Subtle secondary text */
    --adp-day-name-color: var(--text-secondary);
    --adp-cell-color-disabled: var(--text-tertiary);
}

/* Cleaner day cells */
.air-datepicker-cell {
    border-radius: 8px;
    font-weight: 500;
}

/* Modern navigation buttons */
.air-datepicker-nav--action {
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .air-datepicker {
        position: fixed !important;
        left: 50% !important;
        top: 20% !important;
        transform: translate(-50%, 0) !important;
        margin: 0 !important;
        width: 90vw !important;
        max-width: 340px !important;
    }
}