/*
 * sportR.si Rentals – Frontend CSS Stylesheet
 * Styles for the client-side date selection calendar, modal overlay, and range selection.
 */

.sportr-rental-datepicker-container {
    margin-bottom: 25px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sportr-months-grid-responsive {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    .sportr-months-grid-responsive {
        grid-template-columns: 1fr 1fr !important;
    }
}

.sportr-month-card {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sportr-month-title { 
    font-weight: 800 !important; 
    font-size: 15px !important; 
    text-align: center !important; 
    color: #0f172a !important; 
    margin-bottom: 15px !important; 
    border-bottom: 1px solid #f1f5f9 !important; 
    padding-bottom: 8px !important; 
}

.sportr-weekdays { 
    display: grid !important; 
    grid-template-columns: repeat(7, 1fr) !important; 
    text-align: center !important; 
    font-weight: bold !important; 
    font-size: 11px !important; 
    color: #475569 !important; 
    margin-bottom: 8px !important; 
    text-transform: uppercase !important; 
}

.sportr-days-grid { 
    display: grid !important; 
    grid-template-columns: repeat(7, 1fr) !important; 
    gap: 5px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

.sportr-day-btn { 
    background: #fff !important; 
    border: 1px solid #e2e8f0 !important; 
    font-size: 12px !important; 
    font-weight: 700 !important; 
    height: 38px !important; 
    min-height: 38px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important; 
    cursor: pointer !important; 
    position: relative !important; 
    transition: all 0.15s !important; 
    color: #0f172a !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.sportr-day-btn:hover:not(.disabled) { 
    background: #f1f5f9 !important; 
    border-color: #cbd5e1 !important; 
    color: #0f172a !important;
}

.sportr-day-btn.disabled { 
    background: #f8fafc !important; 
    color: #cbd5e1 !important; 
    cursor: not-allowed !important; 
    border-color: #f1f5f9 !important; 
}

.sportr-day-btn.disabled::after { 
    content: '' !important; 
    position: absolute !important; 
    left: 15% !important; 
    top: 50% !important; 
    width: 70% !important; 
    height: 1px !important; 
    background: #cbd5e1 !important; 
    transform: rotate(-45deg) !important; 
    opacity: 0.7 !important; 
}

.sportr-day-btn.selected-boundary { 
    background: #e31a1a !important; 
    color: #fff !important; 
    font-weight: 800 !important; 
    border-color: #e31a1a !important; 
}

.sportr-day-btn.selected-range { 
    background: #fee2e2 !important; 
    color: #e31a1a !important; 
    font-weight: 700 !important; 
    border-color: #fca5a5 !important; 
}

.sportr-day-btn.selected-auto {
    background: #faf5f5 !important; /* very faint reddish gray, looks greyed-out */
    color: #cbd5e1 !important; /* disabled gray text */
    border-color: #fee2e2 !important; /* very soft pale reddish border */
    font-weight: 600 !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
}

.sportr-day-btn.selected-auto::after {
    content: '' !important;
    position: absolute !important;
    left: 15% !important;
    top: 50% !important;
    width: 70% !important;
    height: 1px !important;
    background: #fee2e2 !important; /* very soft diagonal line */
    transform: rotate(-45deg) !important;
    opacity: 0.8 !important;
}