/* Booking CSS */

/* Booking Page Specific Styles */
.booking-page {
    font-family: var(--font-primary);
    color: var(--text-color);
    line-height: 1.6;
}

.booking-page .container {
    max-width: 800px; /* Slightly wider for better spacing */
    margin: 20px auto; /* Add some top/bottom margin */
    padding: 0 15px;
}

/* Booking Header with Help Button */
.booking-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align items vertically */
    margin-bottom: 40px; /* Increased margin */
    padding-bottom: 20px; /* Add padding for separation */
    border-bottom: 1px solid #eee; /* Subtle separator */
    gap: 20px;
}

.booking-header-content {
    flex: 1;
}

.booking-header-content h1 {
    margin: 0 0 10px 0; /* Reduced bottom margin */
    color: var(--primary-color);
    font-size: 2.2em; /* Slightly adjusted */
    font-weight: 600; /* Bolder */
}

.booking-header-content .page-intro {
    margin: 0;
    color: #555; /* Darker for better readability */
    font-size: 1.05em; /* Slightly larger */
    line-height: 1.6;
}

.booking-header-actions {
    flex-shrink: 0;
}

.btn-help {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
    border: none;
    cursor: pointer;
}

.btn-help:hover {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
    transform: translateY(-2px) scale(1.03); /* Add slight scale */
    box-shadow: 0 5px 15px rgba(23, 162, 184, 0.4);
    color: white;
}

.btn-help:active {
    transform: translateY(0) scale(1); /* Reset scale */
}

@media (max-width: 768px) {
    .booking-header-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .booking-header-content h1 {
        font-size: 1.8em; /* Adjusted for mobile */
    }
    
    .booking-header-content .page-intro {
        font-size: 0.95em; /* Adjusted for mobile */
    }
    
    .booking-header-actions {
        align-self: flex-start;
    }
    
    .btn-help {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Enhanced Form Sections - General Styling */
.booking-form-enhanced .form-section.card-style {
    background-color: #ffffff;
    padding: 30px; /* Increased padding */
    margin-bottom: 30px; /* Increased margin */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Softer, more modern shadow */
    transition: all 0.3s ease;
    border: 1px solid #e9ecef; /* Subtle border */
}

.form-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px; /* Space below header */
    padding-bottom: 15px; /* Space below text */
    border-bottom: 1px solid #eee; /* Separator for header */
}

.form-section-header .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.1em;
    margin-right: 15px;
    flex-shrink: 0;
}

.form-section-header h2 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.5em; /* Larger section titles */
    font-weight: 600;
}

/* Specific Section Styling */
#section-location-type .form-group div {
    margin-bottom: 10px; /* Space between radio options */
}

/* Filters and Calendar Layout */
.filters-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

#month-filter-group {
    flex: 1;
}

.calendar-wrapper {
    flex: 2;
    min-width: 300px; /* Ensure calendar has enough space */
}

/* Slots Accordion Container - Now more of a general instruction area or fallback */
.slots-accordion-container {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    color: #555;
}

.slots-accordion-container .instruction-text {
    font-size: 1em;
    font-style: italic;
}

/* Container for displaying slots for a specifically selected date from the calendar */
#slots-for-date-container {
    margin-top: 20px;
}

.time-slots-for-selected-date {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.no-slots-for-date {
    padding: 15px;
    text-align: center;
    color: #777;
    font-style: italic;
    background-color: #f9f9f9;
    border-radius: 8px;
}

/* Individual time slot buttons (can reuse .time-slot styling if applicable or define specifically) */
.time-slots-for-selected-date .time-slot {
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-grow: 1;
    min-width: 90px; /* Ensure buttons are a decent size */
    text-align: center;
}

.time-slots-for-selected-date .time-slot:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.time-slots-for-selected-date .time-slot.selected {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Slots Accordion Container */
.slots-accordion-container {
    margin-top: 20px;
}

.loading-text {
    text-align: center;
    padding: 15px;
    color: #777;
    font-style: italic;
}

/* Selected Slot Info Box */
.selected-slot-info {
    margin-top: 25px;
    padding: 15px 20px;
    background-color: #e6f7ff; /* Light blue background */
    border-left: 5px solid var(--primary-color); /* Accent border */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.selected-slot-info h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 1.1em;
}

.selected-slot-info p {
    margin: 0;
    font-size: 1em;
    color: #333;
}

/* User Details & Package Section */
#section-details-package .grid-halves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px;
    margin-bottom: 15px;
}

.package-selection-group {
    margin-top: 20px;
}

.package-price-display {
    font-weight: bold;
    color: var(--accent-color); /* Use accent color for price */
    font-size: 1.1em;
}

/* Submit Button */
.btn-submit-booking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Full width */
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 600;
    /* cta-button styles from main style.css will apply for colors */
}

/* Booking Message Area */
.booking-message-area {
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.booking-message-area.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.booking-message-area.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.booking-message-area.info { /* For pending/loading messages */
    background-color: #cce5ff;
    color: #004085;
    border: 1px solid #b8daff;
}

/* General Form Element Enhancements */
.booking-form-enhanced .form-group {
    margin-bottom: 20px;
}

.booking-form-enhanced label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
    font-size: 0.95em;
}

.booking-form-enhanced input[type="text"],
.booking-form-enhanced input[type="email"],
.booking-form-enhanced input[type="tel"],
.booking-form-enhanced textarea,
.booking-form-enhanced select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.booking-form-enhanced input[type="text"]:focus,
.booking-form-enhanced input[type="email"]:focus,
.booking-form-enhanced input[type="tel"]:focus,
.booking-form-enhanced textarea:focus,
.booking-form-enhanced select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2); /* Use RGB for box-shadow */
    outline: none;
}

.booking-form-enhanced input[type="radio"] {
    margin-right: 8px;
    accent-color: var(--primary-color); /* Modern way to style radio button color */
}

.booking-form-enhanced input[type="radio"] + label {
    font-weight: normal;
    display: inline; /* Keep label next to radio */
    margin-right: 20px;
}

/* Responsive adjustments for form elements */
@media (max-width: 600px) {
    .filters-container {
        flex-direction: column;
    }
    .calendar-wrapper {
        min-width: 100%;
    }
    .form-section-header h2 {
        font-size: 1.3em;
    }
    .form-section-header .step-number {
        width: 30px;
        height: 30px;
        font-size: 1em;
    }
    .booking-form-enhanced .form-section.card-style {
        padding: 20px;
    }
}

/* Styles for the accordion date headers and time slots */
.slots-by-date .date-section {
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Ensures child elements conform to border-radius */
}

.slots-by-date .date-header {
    background-color: #f8f9fa;
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #333;
    transition: background-color 0.2s ease;
}

.slots-by-date .date-header:hover {
    background-color: #e9ecef;
}

.slots-by-date .date-header .toggle-icon {
    font-size: 1.2em;
    color: var(--primary-color);
}

.slots-by-date .time-slots {
    display: flex; /* Changed from grid to flex for wrapping buttons */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    gap: 10px;
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
}

.slots-by-date .time-slot {
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-grow: 1; /* Allow buttons to grow */
    min-width: 80px; /* Minimum width for a slot button */
    text-align: center;
}

.slots-by-date .time-slot:hover {
    background-color: var(--primary-color-light); /* A lighter shade of primary */
    color: var(--primary-color);
    transform: translateY(-1px);
}

.slots-by-date .time-slot.selected {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Ensure primary-color-rgb is defined if not already in main style.css */
/* Add this to your main style.css or at the top of booking-style.css if not present */
:root {
    /* Assuming --primary-color is something like #70A0AF */
    /* You'll need to manually set the RGB values corresponding to your --primary-color */
    /* For example, if --primary-color: #70A0AF; then --primary-color-rgb: 112, 160, 175; */
    /* Replace with your actual RGB values */
    --primary-color-rgb: 112, 160, 175; 
    --primary-color-light: #e2edf2; /* Example light shade, adjust as needed */
}

/* Remove default list styling if .time-slots was a list before */
.time-slots {
    list-style-type: none;
    padding-left: 0;
}

/* Adjustments for vanilla-js-calendar if needed */
/* Example: Make calendar header match theme */
.vanilla-calendar-header {
    background-color: var(--primary-color) !important;
    color: white !important;
}
.vanilla-calendar-header__label {
    color: white !important;
}
.vanilla-calendar-arrow {
    fill: white !important;
}
.vanilla-calendar-day__btn_today {
    background-color: var(--primary-color-light) !important;
    color: var(--primary-color) !important;
}
.vanilla-calendar-day__btn_selected {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Ensure the calendar container itself has some basic styling */
#calendarContainer {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px; /* Add some padding around the calendar */
    background-color: #fff; /* Give it a background if it's transparent */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Ensure the month filter select looks consistent */
#month_filter {
    margin-bottom: 10px; /* Add some space if it's above the calendar */
}

/* Final polish on form sections */
.form-section.active::before { /* This was in your original CSS, ensure it's still relevant or remove */
    transform: translateX(0);
}

.form-section.completed { /* This was in your original CSS, ensure it's still relevant or remove */
    background-color: #f0f8f0; /* Light green for completed */
    border-left: 4px solid #28a745;
}

.form-section.completed .form-section-header .step-number {
    background-color: #28a745; /* Green for completed step */
}

.form-section.completed .form-section-header h2 {
    color: #28a745; /* Green for completed title */
}

/* Hide the old progress indicator if it's still in HTML and not replaced by section headers */
.booking-progress { 
    display: none; /* Assuming the new section headers with step numbers replace this */
}