/* Calendar 2026 */

.form-group { position: relative; width: 280px; margin: 10px 0px;}
label { display: block; font-weight: 400; margin-bottom: 8px; }
        
.input-wrapper { position: relative; padding-left: 0px;}
input#date_selection { 
            width: 100%; cursor: pointer; box-sizing: border-box; text-indent: 30px;
        }
#calendar-icon {
            position: absolute; left: 5px; top: 50%;
            transform: translateY(-50%); cursor: pointer; color: #5d8ee8; font-size: 20px;
        }

#calendar-container {
            position: absolute; top: 100%; left: 0; width: 300px; 
            border: 1px solid #ddd; background: #fff; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            z-index: 1000; margin-top: 3px; padding: 15px; border-radius: 4px;
        }
.hidden { display: none; }

.calendar-header {
            display: flex; justify-content: space-between; 
            align-items: center; margin-bottom: 15px;
        }
.calendar-header button { 
            background: #f3f3f3; color: #666; border: none; 
            padding: 9px 12px; cursor: pointer; border-radius: 50%;
        }
#monthDisplay { font-weight: 600; color: #666; }

.calendar-grid {
            display: grid; grid-template-columns: repeat(7, 1fr); 
            gap: 4px; text-align: center;
        }
.day { padding: 8px 0; cursor: pointer; border-radius: 3px; font-size: 13px; }
.available { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.available:hover { background-color: #c3e6cb; font-weight: 400; border-color: #155724}
.booked { background-color: #f8d7da; color: #721c24; cursor: not-allowed; opacity: 0.3; }
.header-day { font-weight: 400; color: #666; cursor: default; border-bottom: 1px solid #eee; }
.empty { cursor: default; }