/* --- General Styles --- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Updated font */
    margin: 0;
    padding: 0;
    background-image: url('img/background/booking_background.webp'); /* Added background image */
    background-size: cover; /* Cover the entire viewport */
    background-position: center center; /* Center the image */
    background-attachment: fixed; /* Keep background fixed on scroll */
    background-color: #001f3f; /* Fallback deep blue color */
    color: #f0f8ff; /* Light text color (AliceBlue) for contrast */
    display: grid; /* Use CSS Grid for page layout */
    grid-template-rows: auto 1fr auto; /* Header, Main (flexible), Footer */
    min-height: 100vh; /* Ensure body takes full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrolling/background bleed */
}

header {
    background: #FFFFFF; /* Changed to white as requested */
    color: #001f3f; /* Adjust text color for white background if needed */
    padding: 1rem 0; /* Adjusted padding */
    text-align: center;
    border-bottom: 1px solid rgba(51, 187, 255, 0.3); /* Subtle bottom border */
    grid-row: 1; /* Explicitly place header in the first row */
}

.site-logo {
    max-width: 400px; /* Default max-width for larger screens */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Helps with margin auto if needed for centering */
    margin: 0 auto; /* Center the logo if header is wider */
}

header h1 {
    margin: 0;
    font-size: 1.8rem;
}

header p {
    margin: 0.5rem 0 0;
}

main {
    width: 100%; /* Ensure main tries to fill its grid cell width */
    max-width: 800px; /* Reduced by ~10% from 800px */
    margin: 2rem auto;
    padding: 1.5rem;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    background: rgba(10, 25, 47, 0.85);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(51, 187, 255, 0.3);
    border: 1px solid rgba(51, 187, 255, 0.4);
    grid-row: 2; /* Explicitly place main content in the second row */
    align-self: start; /* Prevent main from stretching vertically */
}

.step {
    display: none;
}

.step.active {
    display: block;
}

label {
    display: block;
    margin: 0.5rem 0;
}

input, textarea, select { /* Separated button styling */
    width: 100%;
    padding: 0.75rem; /* Increased padding */
    margin-top: 0.25rem;
    border: 1px solid rgba(51, 187, 255, 0.5); /* Light blue border */
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgba(240, 248, 255, 0.1); /* Very subtle light background */
    color: #f0f8ff; /* Light text color */
}

button { /* Moved button specific styles here */
    width: 100%;
    padding: 0.75rem; /* Increased padding */
    margin-top: 0.25rem;
    border: 1px solid rgba(51, 187, 255, 0.5); /* Match input border */
    border-radius: 4px;
    box-sizing: border-box;
}

button {
    background: #33bbff; /* Lighter, vibrant blue */
    color: #001f3f; /* Dark blue text for contrast */
    border: none; /* Removed border since it's set above */
    cursor: pointer;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: bold; /* Make button text bolder */
    transition: background-color 0.3s ease; /* Smooth transition */
}

button:hover {
    background: #0088cc; /* Slightly darker blue on hover */
}

#optionsContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.option-card {
    border: 1px solid rgba(51, 187, 255, 0.4); /* Light blue border */
    border-radius: 6px;
    padding: 1rem;
    background: rgba(20, 40, 65, 0.9); /* Semi-transparent dark blue */
    /* Removed cursor: pointer; - click handled by button/link/image */
    transition: background 0.3s, border-color 0.3s;
    display: flex; /* Use flexbox */
    gap: 1rem; /* Add gap between image and details */
    align-items: flex-start; /* Align items to the top */
}

.option-card:hover {
    background: rgba(30, 60, 90, 0.95); /* Slightly lighter blue on hover */
    border-color: #33bbff; /* Vibrant blue border on hover */
}

.option-card.selected { /* Style for selected card */
    border-color: #33bbff; /* Vibrant blue border */
    background: rgba(30, 60, 90, 0.95); /* Match hover background */
    box-shadow: 0 0 8px rgba(51, 187, 255, 0.6); /* Brighter glow */
}

.option-image-container { /* Container for image and details link */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center details link below image */
    order: 2; /* Ensure this block comes second visually */
    flex-shrink: 0; /* Prevent shrinking */
}

.option-image {
    width: 200px; /* Increased image width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Optional: round corners */
    cursor: pointer; /* Add pointer cursor to image */
    display: block; /* Remove extra space below image */
}

.option-details {
    flex-grow: 1; /* Allow details to take remaining space */
    order: 1; /* Ensure details come first visually */
    display: flex; /* Use flex for internal alignment */
    flex-direction: column; /* Stack details vertically */
}

.option-details h3 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 0.5rem;
}

.option-details p {
    margin: 0.25rem 0; /* Adjust spacing between paragraphs */
}

.details-link { /* Style for the "Details" link */
    color: #66ccff; /* Lighter blue for links */
    text-decoration: underline;
    cursor: pointer;
    display: inline-block; /* Allow margin */
    margin-top: 0.5rem; /* Space between image and link */
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.details-link:hover {
    color: #99ddff; /* Even lighter blue on hover */
}

.select-option-button {
    /* Inherit general button styles but allow overrides */
    margin-top: 1rem; /* Space above button */
    padding: 0.6rem 1rem; /* Slightly larger padding */
    font-weight: bold;
    width: auto; /* Don't force full width */
    align-self: flex-start; /* Align button to the left */
}


/* --- Modal Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}

.modal-content {
    background-color: #0a192f; /* Dark slate blue (matching main) */
    color: #f0f8ff; /* Ensure text inside modal is light */
    margin: 10% auto; /* 10% from the top and centered */
    padding: 25px;
    border: 1px solid rgba(51, 187, 255, 0.5); /* Light blue border */
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 600px; /* Maximum width */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0 20px rgba(51, 187, 255, 0.4); /* Updated shadow */
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

.close-button {
    color: #99aabb; /* Light grey-blue */
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #f0f8ff; /* Light color on hover/focus */
    text-decoration: none;
    cursor: pointer;
}

#modalTitle {
    margin-top: 0;
    color: #66ccff; /* Lighter blue title */
}

#modalBody p {
    line-height: 1.6;
}

/* --- End Modal Styles --- */


/* --- Diving Step Styles --- */
#divingOptionsContainer {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.diving-choice {
    padding: 0.75rem;
    border: 1px solid rgba(51, 187, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(20, 40, 65, 0.7); /* Slightly lighter than card */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.diving-choice input[type="radio"] {
    width: auto; /* Don't force full width */
    margin: 0;
    accent-color: #33bbff; /* Style the radio button itself */
}

.diving-choice label {
    margin: 0; /* Reset label margin */
    cursor: pointer;
}

/* Apply frame styling to the wrapper for each section */
.options-section {
    padding: 1rem;
    border: 1px solid rgba(51, 187, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(20, 40, 65, 0.7);
    margin-bottom: 1.5rem; /* Add space between sections */
}

/* Style the H3 inside the actual content container */
.collapsible-content h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #66ccff; /* Lighter blue for subheadings */
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
    padding-bottom: 0.5rem;
}

/* Style for individual dive options (will be added dynamically) */
.dive-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dive-option input[type="checkbox"] { /* Changed from radio to checkbox */
    width: auto;
    margin: 0;
    accent-color: #33bbff;
}

.dive-option label {
    margin: 0;
    cursor: pointer;
    flex-grow: 1; /* Allow label to take space */
}

.dive-option .price {
    font-weight: bold;
    font-weight: bold;
    color: #99ddff; /* Lighter price color */
}

/* Styling for the "No..." toggle */
.no-option-toggle {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(51, 187, 255, 0.2); /* Separator */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.no-option-toggle input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: #33bbff;
}

.no-option-toggle label {
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    color: #f0f8ff; /* Make label stand out */
}

/* Styling for rental days input */
.rental-days-input {
    width: 60px !important; /* Override default full width, use !important if needed */
    padding: 0.3rem 0.5rem !important; /* Adjust padding */
    margin-left: 0.5rem; /* Space before input */
    text-align: center;
    /* Inherits other input styles */
}


#priceBreakdown {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 6px;
    background-color: rgba(10, 25, 47, 0.9); /* Darker background for summary */
}

#priceBreakdown h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #66ccff; /* CHANGED to light blue for dark theme */
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
    padding-bottom: 0.5rem;
}

#priceBreakdown p {
    margin: 0.5rem 0;
    display: flex;
    justify-content: space-between; /* Align price to the right */
}

#priceBreakdown p strong {
    color: #f0f8ff; /* Ensure total price is clearly visible */
}

#priceBreakdown span { /* Style the price spans */
    font-weight: bold;
    color: #99ddff;
}

/* Step Navigation Buttons Container */
.step-navigation {
    display: flex;
    justify-content: space-between; /* Pushes buttons to opposite ends */
    margin-top: 1.5rem; /* Add some space above buttons */
    gap: 1rem; /* Add space between buttons if they wrap */
}

/* Individual buttons within the container */
.step-navigation button {
    /* Inherits general button styles from lines 66-84 */
    width: 48%; /* Keep roughly half width */
    margin-top: 0; /* Remove individual top margin */
    /* Remove float, display: inline-block etc. */
}

/* Ensure link buttons in step navigation also get sized */
.step-navigation a.button {
    /* Layout & Sizing */
    width: 48%; /* Match button width */
    margin-top: 0; /* Align with buttons */
    display: inline-block; /* Needed for padding/width on 'a' */
    padding: 0.75rem; /* Match button padding */
    box-sizing: border-box; /* Include padding in width */
    text-align: center; /* Center text like a button */

    /* Visual Appearance (copied from button style) */
    background: #33bbff; /* Lighter, vibrant blue */
    color: #001f3f !important; /* Dark blue text for contrast - !important needed to override default link color */
    border: 1px solid rgba(51, 187, 255, 0.5); /* Match input border (button rule removes its own border later) */
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold; /* Make button text bolder */
    text-decoration: none; /* Remove link underline */
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* Hover state for link button */
.step-navigation a.button:hover {
    background: #0088cc; /* Slightly darker blue on hover */
    color: #001f3f !important; /* Ensure text color remains */
    text-decoration: none; /* Ensure underline doesn't reappear */
}

/* --- End Diving Step Styles --- */


/* --- Spa Step Styles --- */
#spaOptionsContainer {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Smaller gap for checkboxes */
    padding: 1rem;
    border: 1px solid rgba(51, 187, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(20, 40, 65, 0.7);
}

/* --- Spa Step Styles - Updated for Stepper --- */
/* .sub-header styles are inherited */
#spaOptionsContainer .sub-label.item-label {
    visibility: visible;
}

/* Make item label visible */

.spa-option {
    /* Reuse dive-option layout */
    display: flex;
    align-items: center; /* Vertically align items */
    padding: 0.5rem;
    gap: 0.75rem; /* Use gap for spacing */
    border-bottom: 1px solid rgba(51, 187, 255, 0.1);
}

.spa-option:last-child {
    border-bottom: none;
}

.spa-option label { /* Main item label */
    flex-grow: 1; /* Takes up remaining space */
    margin: 0; /* Reset margin */
    margin-right: 1rem; /* Space after label */
    cursor: default; /* No longer clickable like checkbox label */
    /* display: flex; */ /* Remove flex from label itself */
    /* justify-content: space-between; */ /* Remove */
}

.spa-option .price {
    /* Reuse dive-option price alignment */
    width: 85px; /* Match sub-header label width */
    text-align: right;
    flex-shrink: 0; /* Prevent shrinking */
    font-weight: bold;
    color: #99ddff;
    margin-left: 0; /* Ensure no extra margin */
    margin-right: 0;
}

/* Ensure input group with stepper aligns correctly */
.spa-option .input-group {
    /* Reuse dive-option input group alignment */
    margin-left: 0; /* Reset margin */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 75px; /* Match qty sub-header */
    margin-left: 10px; /* Add space between price and stepper */
}

/* Stepper styles are inherited from .quantity-stepper */

#spaPriceBreakdown { /* Similar to diving breakdown */
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid rgba(51, 187, 255, 0.5);
    border-radius: 6px;
    background-color: rgba(10, 25, 47, 0.9);
}

#spaPriceBreakdown h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #66ccff;
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
    padding-bottom: 0.5rem;
}

#spaPriceBreakdown p {
    margin: 0.5rem 0;
    display: flex;
    justify-content: space-between;
}

#spaPriceBreakdown p strong {
    color: #f0f8ff;
}

#spaPriceBreakdown span {
    font-weight: bold;
    color: #99ddff;
}

/* --- End Spa Step Styles --- */


/* --- Guest Details Step --- */
#guestDetailsForm label {
    font-weight: bold;
    color: #99ddff; /* Lighter label color */
}

/* Styles for required fields can be added here if needed */

#guestDetailsForm input:invalid,
#guestDetailsForm textarea:invalid {
    border-color: #ff6b6b; /* Red border for invalid fields after interaction */
}

/* --- Summary Step Styles --- */
.summary-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between summary sections */
}

.summary-section {
    padding: 1rem;
    border: 1px solid rgba(51, 187, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(20, 40, 65, 0.7);
}

.summary-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
}

.summary-section-header h3 {
    margin: 0;
    color: #66ccff;
}

.edit-section-btn {
    background: none;
    border: 1px solid #66ccff;
    color: #66ccff;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: auto; /* Override default button width */
    margin: 0; /* Override default button margin */
}

.edit-section-btn:hover {
    background-color: #66ccff;
    color: #0a192f;
}

.summary-divider {
    border: none;
    border-top: 1px solid rgba(51, 187, 255, 0.4);
    margin: 1rem 0;
}

.summary-total {
    background-color: rgba(10, 25, 47, 0.9); /* Darker background for total */
    border-top: 2px solid #33bbff;
}

.summary-total h3 {
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}

/* Confirmation Step */
#confirmationDetails {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: rgba(30, 60, 90, 0.9);
    border-radius: 4px;
    border-left: 5px solid #33bbff;
}

/* --- General Helper Styles --- */
.error-message {
    color: #ff6b6b; /* Reddish color for errors */
    font-weight: bold;
    margin-top: 0.5rem;
    display: block;
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    main {
        width: 90%; /* Make main container narrower */
        margin-top: 0.5rem; /* Keep top margin */
        margin-bottom: 0.5rem; /* Keep bottom margin */
        /* margin-left and margin-right will default to 0 or be handled by justify-self */
        justify-self: center; /* Center the main element within its grid cell */
        padding: 0.5rem;
    }

    .site-logo {
        max-width: 200px; /* Smaller max-width for logo on mobile */
        /* Or you could use a percentage like max-width: 80%; */
    }

    /* Reduce font size for form section titles on mobile */
    .step h2 {
        font-size: 1.3rem; /* Further reduced */
    }

    label {
        font-size: 0.8rem; /* Further reduced */
        margin: 0.3rem 0; /* Reduced margin */
    }

    input, textarea, select, button {
        -webkit-appearance: none; /* iOS reset */
        appearance: none; /* Standard reset */
        padding: 0.5rem; /* Further reduced padding */
        font-size: 0.8rem; /* Further reduced font size */
    }

    button {
        font-size: 0.85rem; /* Further reduced, slightly larger than inputs */
        margin-top: 0.75rem; /* Adjust top margin for button */
    }

    .option-card {
        flex-direction: column; /* Stack image and details vertically */
    }

    .option-image-container {
        order: 1; /* Image first */
        width: 100%; /* Full width container */
    }

    .option-image {
        width: 100%; /* Full width image */
        max-width: 300px; /* Limit max width */
        margin: 0 auto; /* Center image */
    }

    .option-details {
        order: 2; /* Details second */
    }

    .step-navigation {
        flex-direction: column; /* Stack buttons vertically */
    }

    .step-navigation button,
    .step-navigation a.button {
        width: 100%; /* Full width buttons */
    }

    .modal-content {
        width: 90%;
        margin: 15% auto; /* Adjust vertical margin */
    }

    .sub-header {
        font-size: 0.8em; /* Smaller font for sub-headers */
    }

    .price-label {
        width: 65px;
    }

    .days-label {
        width: 45px;
        text-align: center;
        margin-left: 0.5rem;
    }

    /* Add margin-left */
    .qty-label {
        width: 60px;
        text-align: center;
        margin-left: 0.5rem;
    }

    /* Add margin-left */
    .dive-option, .spa-option {
        flex-wrap: wrap; /* Allow wrapping within options */
        gap: 0.3rem;
    }

    .dive-option label, .spa-option label {
        flex-basis: 100%; /* Label takes full width */
        margin-bottom: 5px;
    }

    .dive-option .price, .spa-option .price {
        width: auto; /* Reset fixed width */
        margin-right: auto; /* Push price left */
    }

    .dive-option .input-group, .spa-option .input-group {
        width: auto; /* Reset fixed width */
        margin-left: auto; /* Push stepper right */
    }

    .rental-days-input {
        margin-left: 0;
    }

    .option-card .room-controls .quantity-stepper button {
        padding: 0.4rem 0.6rem; /* Reduced padding for buttons */
        font-size: 0.9rem; /* Reduced font size for buttons */
        min-width: 30px; /* Ensure tappable area */
        min-height: 30px;
        line-height: 1; /* Better vertical alignment of text */
    }

    .option-card .room-controls .quantity-stepper .quantity-display,
    .option-card .room-controls .quantity-stepper .quantity-value { /* Target both potential classes */
        padding: 0.4rem 0.5rem; /* Reduced padding for display */
        font-size: 0.9rem; /* Reduced font size for display */
        min-width: 25px; /* Adjusted min-width for display */
        line-height: 1.2; /* Ensure text is centered well */
    }
}

/* Summary Page Specific Mobile Adjustments */
.summary-section p,
.summary-section div,
.summary-section span,
.summary-section strong,
.summary-section li {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    /* Ensure flex children can shrink if they are also text containers */
    flex-shrink: 1;
    min-width: 0; /* Allows shrinking below intrinsic min-width */
}

.summary-section > div {
    display: flex; /* Assuming they might be flex rows */
    flex-direction: column; /* Stack them vertically */
    align-items: flex-start; /* Align stacked items to the left */
    margin-bottom: 0.5rem; /* Add some space between stacked items */
}

.summary-section > div > span:first-child {
    font-weight: bold; /* Optional: make label bold */
    margin-bottom: 0.25rem; /* Space between label and value */
}

/* End Summary Page Specific Mobile Adjustments */

/* Styles for new elements in Accommodation Selection */
.option-card .room-controls {
    display: grid;
    grid-template-columns: auto 1fr; /* Labels in first column (auto width), controls in second (fills remaining) */
    gap: 0.5rem 0.75rem; /* 0.5rem row-gap (between Bed Type row and Quantity row), 0.75rem column-gap (between label and control) */
    align-items: center; /* Vertically center items in each grid cell */
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(51, 187, 255, 0.2); /* Subtle separator */
}

.option-card .room-controls label {
    margin-bottom: 0; /* Reset any inherited bottom margin */
    /* Labels will naturally fall into the first column of each row */
}

.option-card .room-controls select,
.option-card .room-controls .quantity-stepper {
    /* Controls will naturally fall into the second column of each row */
    justify-self: start; /* Align the control to the start (left) of its grid cell */
}

.option-card .room-controls select.bed-selection {
    width: auto; /* Allow select to size based on its content */
    min-width: 180px; /* Ensure it's wide enough for typical bed type options */
    max-width: 100%; /* Prevent it from overflowing its container if content is very long */
}

/* The quantity-stepper's internal layout (flex) is handled by its own styles */

/* Remove styles for non-existent input[type=number] in this context if they were specific */
.option-card .room-controls input[type="number"] {
    max-width: 70px; /* Smaller width for quantity */
    text-align: center;
}

/* Next button in Select Step */
#goToDivingBtn {
    /* Uses general button styles, can add specifics if needed */
    margin-left: 10px; /* Space from back button */
}

/* Ensure step navigation buttons are aligned */
#step-select .step-navigation {
    display: flex;
    justify-content: space-between; /* Align back and next buttons */
    margin-top: 20px;
}

/* Adjustments for summary sections */
.summary-section .summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.summary-section .summary-label {
    margin-right: 10px;
    color: #ccc; /* Lighter label color */
}

.summary-section .summary-value {
    font-weight: bold;
    color: #fff; /* White value color */
}

.summary-section .item-list .summary-item {
    /* Specific styles for lists within summary if needed */
    font-size: 0.95em;
}

.summary-section .summary-price {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px dashed #4a6a8a;
    font-size: 1.05em;
}

.summary-total .summary-item {
    font-size: 1.2em;
    margin-top: 10px;
}

/* Modal close button inside body */
.close-detail-button {
    display: block; /* Make it a block element */
    margin: 15px auto 0; /* Center it with top margin */
    padding: 8px 20px;
    background-color: #6c757d; /* Grey color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
    width: auto; /* Don't force full width */
}

.close-detail-button:hover {
    background-color: #5a6268;
}

/* Amenities list styling */
.amenities-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px; /* Row gap, Column gap */
    font-size: 0.9em;
    color: #ccc;
}

.amenities-list li {
    position: relative;
    padding-left: 15px; /* Space for the icon */
}

.amenities-list li::before {
    content: '✓'; /* Checkmark icon */
    position: absolute;
    left: 0;
    color: #33bbff; /* Use accent color */
    font-weight: bold;
}

/* Sub-header styling for Diving/Spa/Summary lists */
.sub-header {
    display: flex;
    /* justify-content: space-around; */ /* Remove justify-content */
    /* gap: 0.5rem; */ /* Remove gap */
    font-weight: bold;
    color: #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #4a6a8a;
    font-size: 0.9em;
}

.sub-label {
    text-align: right;
}

.item-label {
    flex-grow: 1;
    text-align: left;
}

.price-label {
    width: 85px;
}

/* Remove margin-left */
.days-label {
    width: 60px;
    text-align: center;
    margin-left: 0.5rem;
}

/* Add margin-left */
.qty-label {
    width: 75px;
    text-align: center;
    margin-left: 0.5rem;
}

/* Add margin-left */


/* Quantity Stepper Styles */
.quantity-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #4a6a8a;
    border-radius: 4px;
    background-color: #1e3a5f;
    overflow: hidden; /* Clip button corners */
}

.quantity-stepper button {
    background-color: #1e3a5f;
    color: #99ddff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    transition: background-color 0.2s ease;
    margin: 0; /* Reset button margin */
    width: auto; /* Override default button width */
    border-radius: 0; /* Remove individual radius */
}

.quantity-stepper button:hover {
    background-color: #33bbff;
    color: #001f3f;
}

.quantity-stepper .quantity-value {
    padding: 0 10px;
    font-weight: bold;
    min-width: 20px; /* Ensure space for number */
    text-align: center;
    color: #fff;
}

/* Section Toggle Styles */
.options-section > h3 { /* Target H3 directly under options-section */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.5rem; /* Space before content */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
}

.section-toggle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #66ccff;
    border-radius: 3px;
    position: relative;
    transition: transform 0.3s ease;
    margin-left: 10px; /* Space from title */
}

.section-toggle::before,
.section-toggle::after {
    content: '';
    position: absolute;
    background-color: #66ccff;
    transition: transform 0.3s ease;
}

/* Horizontal line */
.section-toggle::before {
    width: 12px;
    height: 2px;
    left: 3px;
    top: 8px;
}

/* Vertical line (initially visible for '+') */
.section-toggle::after {
    width: 2px;
    height: 12px;
    left: 8px;
    top: 3px;
}

/* When active (expanded), hide vertical line */
.section-toggle.active::after {
    transform: rotate(90deg); /* Rotate vertical to horizontal */
    opacity: 0; /* Hide vertical line */
}

/* Collapsed content */
.collapsible-content.collapsed {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top: none;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.collapsible-content {
    overflow: hidden;
    transition: all 0.3s ease-in;
    opacity: 1;
    max-height: 1000px; /* Adjust as needed, large enough for content */
    /* padding-top: 1rem; */ /* Add padding back if needed */
}

/* Error message styling */
.error-message {
    color: #ff6b6b; /* Reddish color for errors */
    font-weight: bold;
}

/* Summary Container Styles */
.summary-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between summary sections */
}

.summary-section {
    padding: 1rem;
    border: 1px solid rgba(51, 187, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(20, 40, 65, 0.7);
}

.summary-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
}

.summary-section-header h3 {
    margin: 0;
    color: #66ccff;
}

.edit-section-btn {
    background: none;
    border: 1px solid #66ccff;
    color: #66ccff;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: auto; /* Override default button width */
    margin: 0; /* Override default button margin */
}

.edit-section-btn:hover {
    background-color: #66ccff;
    color: #0a192f;
}

.summary-divider {
    border: none;
    border-top: 1px solid rgba(51, 187, 255, 0.4);
    margin: 1rem 0;
}

.summary-total {
    background-color: rgba(10, 25, 47, 0.9); /* Darker background for total */
    border-top: 2px solid #33bbff;
}

.summary-total h3 {
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}

/* Confirmation Step */
#confirmationDetails {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: rgba(30, 60, 90, 0.9);
    border-radius: 4px;
    border-left: 5px solid #33bbff;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    main {
        margin: 1rem;
        padding: 1rem;
    }

    .option-card {
        flex-direction: column; /* Stack image and details vertically */
    }

    .option-image-container {
        order: 1; /* Image first */
        width: 100%; /* Full width container */
    }

    .option-image {
        width: 100%; /* Full width image */
        max-width: 300px; /* Limit max width */
        margin: 0 auto; /* Center image */
    }

    .option-details {
        order: 2; /* Details second */
    }

    .option-card .room-controls {
        grid-template-columns: 1fr; /* Each item takes full width on its own line */
        gap: 0.65rem; /* Adjusted vertical gap between stacked items */
    }

    .option-card .room-controls label,
    .option-card .room-controls select,
    .option-card .room-controls .quantity-stepper {
        width: 100%; /* Make controls take full width when stacked */
        justify-self: stretch; /* Make items stretch to fill their grid area */
        margin-left: 0; /* Ensure no unintended offsets */
        margin-right: 0;
    }

    .option-card .room-controls select.bed-selection {
        min-width: unset; /* Remove desktop min-width on mobile */
        /* It will take 100% width from the rule above */
    }

    /* The quantity-stepper container itself on mobile */
    .option-card .room-controls .quantity-stepper {
        max-width: 180px; /* Max width for the stepper on mobile, can be adjusted */
        width: auto; /* Override 100% from above if max-width is desired to be less than full */
        justify-self: start; /* Align to left if not taking full width (due to width:auto) */
    }

    /* Styles for stepper buttons and display (padding, font-size) are already applied */
    /* from a previous successful edit for mobile. No need to repeat them here. */
    .step-navigation {
        flex-direction: column; /* Stack buttons vertically */
    }

    .step-navigation button,
    .step-navigation a.button {
        width: 100%; /* Full width buttons */
    }

    .modal-content {
        width: 90%;
        margin: 15% auto; /* Adjust vertical margin */
    }

    .sub-header {
        font-size: 0.8em; /* Smaller font for sub-headers */
    }

    .price-label {
        width: 65px;
    }

    .days-label {
        width: 45px;
    }

    .qty-label {
        width: 60px;
    }

    .dive-option, .spa-option {
        flex-wrap: wrap; /* Allow wrapping within options */
        gap: 0.3rem;
    }

    .dive-option label, .spa-option label {
        flex-basis: 100%; /* Label takes full width */
        margin-bottom: 5px;
    }

    .dive-option .price, .spa-option .price {
        width: auto; /* Reset fixed width */
        margin-right: auto; /* Push price left */
    }

    .dive-option .input-group, .spa-option .input-group {
        width: auto; /* Reset fixed width */
        margin-left: auto; /* Push stepper right */
    }

    .rental-days-input {
        margin-left: 0;
    }

    .option-card .room-controls .quantity-stepper button {
        padding: 0.4rem 0.6rem; /* Reduced padding for buttons */
        font-size: 0.9rem; /* Reduced font size for buttons */
        min-width: 30px; /* Ensure tappable area */
        min-height: 30px;
        line-height: 1; /* Better vertical alignment of text */
    }

    .option-card .room-controls .quantity-stepper .quantity-display,
    .option-card .room-controls .quantity-stepper .quantity-value { /* Target both potential classes */
        padding: 0.4rem 0.5rem; /* Reduced padding for display */
        font-size: 0.9rem; /* Reduced font size for display */
        min-width: 25px; /* Adjusted min-width for display */
        line-height: 1.2; /* Ensure text is centered well */
    }
}

/* Summary Page Specific Mobile Adjustments */
.summary-section p,
.summary-section div,
.summary-section span,
.summary-section strong,
.summary-section li {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    /* Ensure flex children can shrink if they are also text containers */
    flex-shrink: 1;
    min-width: 0; /* Allows shrinking below intrinsic min-width */
}

.summary-section > div {
    display: flex; /* Assuming they might be flex rows */
    flex-direction: column; /* Stack them vertically */
    align-items: flex-start; /* Align stacked items to the left */
    margin-bottom: 0.5rem; /* Add some space between stacked items */
}

.summary-section > div > span:first-child {
    font-weight: bold; /* Optional: make label bold */
    margin-bottom: 0.25rem; /* Space between label and value */
}

/* End Summary Page Specific Mobile Adjustments */

/* Styles for new elements in Accommodation Selection */
.option-card .room-controls {
    display: grid;
    grid-template-columns: auto 1fr; /* Labels in first column (auto width), controls in second (fills remaining) */
    gap: 0.5rem 0.75rem; /* 0.5rem row-gap (between Bed Type row and Quantity row), 0.75rem column-gap (between label and control) */
    align-items: center; /* Vertically center items in each grid cell */
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(51, 187, 255, 0.2); /* Subtle separator */
}

.option-card .room-controls label {
    margin-bottom: 0; /* Reset any inherited bottom margin */
    /* Labels will naturally fall into the first column of each row */
}

.option-card .room-controls select,
.option-card .room-controls .quantity-stepper {
    /* Controls will naturally fall into the second column of each row */
    justify-self: start; /* Align the control to the start (left) of its grid cell */
}

.option-card .room-controls select.bed-selection {
    width: auto; /* Allow select to size based on its content */
    min-width: 180px; /* Ensure it's wide enough for typical bed type options */
    max-width: 100%; /* Prevent it from overflowing its container if content is very long */
}

/* The quantity-stepper's internal layout (flex) is handled by its own styles */

/* Remove styles for non-existent input[type=number] in this context if they were specific */
.option-card .room-controls input[type="number"] {
    max-width: 70px; /* Smaller width for quantity */
    text-align: center;
}

/* Next button in Select Step */
#goToDivingBtn {
    /* Uses general button styles, can add specifics if needed */
    margin-left: 10px; /* Space from back button */
}

/* Ensure step navigation buttons are aligned */
#step-select .step-navigation {
    display: flex;
    justify-content: space-between; /* Align back and next buttons */
    margin-top: 20px;
}

/* Adjustments for summary sections */
.summary-section .summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.summary-section .summary-label {
    margin-right: 10px;
    color: #ccc; /* Lighter label color */
}

.summary-section .summary-value {
    font-weight: bold;
    color: #fff; /* White value color */
}

.summary-section .item-list .summary-item {
    /* Specific styles for lists within summary if needed */
    font-size: 0.95em;
}

.summary-section .summary-price {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px dashed #4a6a8a;
    font-size: 1.05em;
}

.summary-total .summary-item {
    font-size: 1.2em;
    margin-top: 10px;
}

/* Modal close button inside body */
.close-detail-button {
    display: block; /* Make it a block element */
    margin: 15px auto 0; /* Center it with top margin */
    padding: 8px 20px;
    background-color: #6c757d; /* Grey color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
    width: auto; /* Don't force full width */
}

.close-detail-button:hover {
    background-color: #5a6268;
}

/* Amenities list styling */
.amenities-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px; /* Row gap, Column gap */
    font-size: 0.9em;
    color: #ccc;
}

.amenities-list li {
    position: relative;
    padding-left: 15px; /* Space for the icon */
}

.amenities-list li::before {
    content: '✓'; /* Checkmark icon */
    position: absolute;
    left: 0;
    color: #33bbff; /* Use accent color */
    font-weight: bold;
}

/* Sub-header styling for Diving/Spa/Summary lists */
.sub-header {
    display: flex;
    /* justify-content: space-around; */ /* Remove justify-content */
    /* gap: 0.5rem; */ /* Remove gap */
    font-weight: bold;
    color: #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #4a6a8a;
    font-size: 0.9em;
}

.sub-label {
    text-align: right;
}

.item-label {
    flex-grow: 1;
    text-align: left;
}

.price-label {
    width: 85px;
}

/* Remove margin-left */
.days-label {
    width: 60px;
    text-align: center;
    margin-left: 0.5rem;
}

/* Add margin-left */
.qty-label {
    width: 75px;
    text-align: center;
    margin-left: 0.5rem;
}

/* Add margin-left */


/* Quantity Stepper Styles */
.quantity-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #4a6a8a;
    border-radius: 4px;
    background-color: #1e3a5f;
    overflow: hidden; /* Clip button corners */
}

.quantity-stepper button {
    background-color: #1e3a5f;
    color: #99ddff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    transition: background-color 0.2s ease;
    margin: 0; /* Reset button margin */
    width: auto; /* Override default button width */
    border-radius: 0; /* Remove individual radius */
}

.quantity-stepper button:hover {
    background-color: #33bbff;
    color: #001f3f;
}

.quantity-stepper .quantity-value {
    padding: 0 10px;
    font-weight: bold;
    min-width: 20px; /* Ensure space for number */
    text-align: center;
    color: #fff;
}

/* Section Toggle Styles */
.options-section > h3 { /* Target H3 directly under options-section */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.5rem; /* Space before content */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
}

.section-toggle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #66ccff;
    border-radius: 3px;
    position: relative;
    transition: transform 0.3s ease;
    margin-left: 10px; /* Space from title */
}

.section-toggle::before,
.section-toggle::after {
    content: '';
    position: absolute;
    background-color: #66ccff;
    transition: transform 0.3s ease;
}

/* Horizontal line */
.section-toggle::before {
    width: 12px;
    height: 2px;
    left: 3px;
    top: 8px;
}

/* Vertical line (initially visible for '+') */
.section-toggle::after {
    width: 2px;
    height: 12px;
    left: 8px;
    top: 3px;
}

/* When active (expanded), hide vertical line */
.section-toggle.active::after {
    transform: rotate(90deg); /* Rotate vertical to horizontal */
    opacity: 0; /* Hide vertical line */
}

/* Collapsed content */
.collapsible-content.collapsed {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-top: none;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.collapsible-content {
    overflow: hidden;
    transition: all 0.3s ease-in;
    opacity: 1;
    max-height: 1000px; /* Adjust as needed, large enough for content */
    /* padding-top: 1rem; */ /* Add padding back if needed */
}

/* Error message styling */
.error-message {
    color: #ff6b6b; /* Reddish color for errors */
    font-weight: bold;
}

/* Summary Container Styles */
.summary-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between summary sections */
}

.summary-section {
    padding: 1rem;
    border: 1px solid rgba(51, 187, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(20, 40, 65, 0.7);
}

.summary-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 187, 255, 0.2);
}

.summary-section-header h3 {
    margin: 0;
    color: #66ccff;
}

.edit-section-btn {
    background: none;
    border: 1px solid #66ccff;
    color: #66ccff;
    padding: 3px 8px;
    font-size: 0.8em;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: auto; /* Override default button width */
    margin: 0; /* Override default button margin */
}

.edit-section-btn:hover {
    background-color: #66ccff;
    color: #0a192f;
}

.summary-divider {
    border: none;
    border-top: 1px solid rgba(51, 187, 255, 0.4);
    margin: 1rem 0;
}

.summary-total {
    background-color: rgba(10, 25, 47, 0.9); /* Darker background for total */
    border-top: 2px solid #33bbff;
}

.summary-total h3 {
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;
}

/* Confirmation Step */
#confirmationDetails {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: rgba(30, 60, 90, 0.9);
    border-radius: 4px;
    border-left: 5px solid #33bbff;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    main {
        margin: 1rem;
        padding: 1rem;
    }

    .option-card {
        flex-direction: column; /* Stack image and details vertically */
    }

    .option-image-container {
        order: 1; /* Image first */
        width: 100%; /* Full width container */
    }

    .option-image {
        width: 100%; /* Full width image */
        max-width: 300px; /* Limit max width */
        margin: 0 auto; /* Center image */
    }

    .option-details {
        order: 2; /* Details second */
    }

    .option-card .room-controls {
        flex-direction: column;
        align-items: stretch; /* Stretch controls full width */
    }

    .option-card .room-controls select,
    .option-card .room-controls input[type="number"] {
        max-width: none; /* Allow full width */
    }

    .option-card .room-controls .add-room-button {
        margin-left: 0; /* Reset margin */
        margin-top: 10px;
    }

    .step-navigation {
        flex-direction: column; /* Stack buttons vertically */
    }

    .step-navigation button,
    .step-navigation a.button {
        width: 100%; /* Full width buttons */
    }

    .modal-content {
        width: 90%;
        margin: 15% auto; /* Adjust vertical margin */
    }

    .sub-header {
        font-size: 0.8em; /* Smaller font for sub-headers */
    }

    .price-label {
        width: 65px;
    }

    .days-label {
        width: 45px;
    }

    .qty-label {
        width: 60px;
    }

    .dive-option, .spa-option {
        flex-wrap: wrap; /* Allow wrapping within options */
        gap: 0.3rem;
    }

    .dive-option label, .spa-option label {
        flex-basis: 100%; /* Label takes full width */
        margin-bottom: 5px;
    }

    .dive-option .price, .spa-option .price {
        width: auto; /* Reset fixed width */
        margin-right: auto; /* Push price left */
    }

    .dive-option .input-group, .spa-option .input-group {
        width: auto; /* Reset fixed width */
        margin-left: auto; /* Push stepper right */
    }

    .rental-days-input {
        margin-left: 0;
    }

}

#confirmation-message {
    /* Align icon and text */
    display: flex;
    align-items: center;
    gap: 0.5em; /* Space between icon and text */
    /* Keep existing margin/padding/border */
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    border-left-width: 5px;
    border-left-style: solid;
}

#confirmation-message.success {
    background-color: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-left-color: #2ecc71;
}

#confirmation-message.info {
    background-color: rgba(52, 152, 219, 0.15);
    color: #3498db;
    border-left-color: #3498db;
}

#confirmation-message.error {
    background-color: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border-left-color: #e74c3c;
}

/* Icon specific styles */
.confirmation-icon {
    width: 24px; /* Adjust size as needed */
    height: 24px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Price Summary Styling */
.price-line-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em; /* Add some spacing between lines */
    color: #fff; /* Ensure line item text is white/light */
}

.price-line-item span:first-child {
    /* Label - takes up space, aligns left by default */
    margin-right: 1em; /* Space between label and price */
}

.price-line-item span:last-child {
    /* Price - aligns right due to justify-content: space-between on parent */
    font-weight: bold; /* Make price bold if not already by <strong> */
    color: #cceeff; /* Light blue for price, adjust as needed */
}

/* Ensure the total price text 'Total:' is also bold if it's inside a <strong> then a <span> */
.price-line-item strong span:first-child {
    font-weight: bold;
    color: #fff; /* Ensure 'Total:' label is white/light */
}

/* Ensure all price breakdown headers have the correct light color */
#priceBreakdown h3,
#divingPriceBreakdown h3,
#spaPriceBreakdown h3,
#transportPriceBreakdown h3,
#summaryPriceBreakdown h3 {
    color: #66ccff; /* Restore original light blue title color or use #fff */
    /* Other existing h3 styles like margin, border-bottom, padding-bottom should be preserved from earlier in the file */
}

/* --- Footer Styles --- */
footer {
    background-color: #FFFFFF; /* Changed to white */
    color: #000000; /* Changed to black */
    padding: 2rem 1rem;
    grid-row: 3; /* Place footer in the third row */
}

.footer-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    max-width: 1200px; /* Max width for the content within the footer */
    margin: 0 auto; /* Center the container */
}

.footer-column {
    flex: 1;
    min-width: 200px; /* Minimum width for columns */
    margin: 1rem;
    padding: 0 1rem;
}

.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #000000; /* Changed to black */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-bottom: 0.5rem;
}

.footer-column p {
    margin-bottom: 0.25rem; /* Reduced margin */
    line-height: 1.6;
}

.footer-column a {
    color: #000000; /* Changed to black */
    text-decoration: none;
}

.footer-column a:hover {
    text-decoration: underline;
}

.footer-column img {
    max-width: 150px; /* Adjust as needed */
    height: auto;
    margin-bottom: 0.5rem;
    background-color: #FFFFFF; /* White background for logos if they are transparent */
    padding: 5px; /* Optional padding around logos */
    border-radius: 3px; /* Optional rounded corners for logos */
}

.footer-column:nth-child(2) p {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- End Footer Styles --- */

/* Desktop Styles for Summary Section */
@media (min-width: 601px) {
    /* Style for the header of each summary section (e.g., "Guest Details" + Edit button) */
    .summary-section .summary-section-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem; /* Space below the header */
    }

    .summary-section .summary-section-header h3 {
        margin: 0; /* Remove default h3 margin */
    }

    /* Style for individual label-value pair rows (e.g., Name: Marvin Hansen) */
    .summary-section .summary-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start; /* CHANGED */
        align-items: flex-start; /* Changed: Better for multi-line descriptions */
        margin-bottom: 0.4rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        width: 100%; /* ADD THIS LINE */
        box-sizing: border-box; /* ADD THIS LINE for consistent width calculation */
    }

    /* Style for the labels (e.g., "Name:", "Subtotal:", or item descriptions) */
    .summary-section .summary-item > .summary-label {
        margin-bottom: 0;
        margin-right: 2em; /* Space between label and value - INCREASED */
        white-space: normal; /* Changed: Allows long descriptions to wrap */
        min-width: auto; /* Override inherited min-width: 0 */
        /* flex-shrink: 1; /* Default, can be omitted or set to 1 */
        text-align: left;
    }

    /* Style for the values (e.g., "Marvin Hansen", "€0.00") */
    .summary-section .summary-item > .summary-value {
        text-align: right; /* Align price text to the right */
        margin-left: auto; /* Pushes the value to the far right */
        white-space: nowrap; /* Added: Prevents the price itself from wrapping */
        flex-shrink: 0; /* Added: Prevents the price from shrinking */
    }

    /* Ensure item lists (like accommodation details) have appropriate styling if needed */
    /* This rule primarily adds indentation and does not conflict with the flex layout above. */
    .summary-section .item-list .summary-item {
        /* Adjust if these nested items need different spacing or indentation */
        padding-left: 1rem; /* Further indent itemized lists */
        /* Note: The flex properties for these items are inherited from the general .summary-item rule above */
    }
}
/* --- Discount code (summary step) --- */
/* Compact single-line layout: label on the left, a confined input + Apply on the right.
   Overrides the global `input/button { width:100% }` so the field doesn't fill the panel.
   The selector must be `.summary-section > div.discount-row` (0-2-1): the generic
   `.summary-section > div` rule (0-1-1, base AND mobile media blocks) forces
   flex-direction: column, which outranked a bare `.discount-row` — turning this row into a
   column where the input's flex-basis (14rem) became its HEIGHT: the "giant discount box". */
.summary-section > div.discount-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
}
.discount-label {
    font-weight: 600;
    white-space: nowrap;
    margin: 0 auto 0 0;          /* hug left; push the input + button to the right */
}
.discount-input {
    width: auto;                 /* override global input width:100% */
    flex: 0 1 14rem;             /* confined width; shrinks gracefully on narrow screens */
    padding: 0.5rem 0.75rem;
    margin-top: 0;               /* override global input margin-top */
    text-transform: uppercase;   /* typed codes display uppercase */
}
.discount-apply-btn {
    width: auto;                 /* override global button width:100% */
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0.5rem 1.1rem;
    white-space: nowrap;
    cursor: pointer;
}

/* --- Compact room / extra-bed steppers (accommodation step) --- */
/* The `- n +` stepper is nested inside an .input-group wrapper, but the earlier rules set
   justify-self on .quantity-stepper as if it were the grid item itself — so they never
   applied, the wrapper stretched to the full card width, and the stepper rendered as a
   wide bar with - and + at opposite ends. Constrain the wrapper (the real grid item) and
   let the stepper shrink to its content. Appended last so it wins the base and the
   ≤600px media blocks at equal specificity. */
.option-card .room-controls .input-group {
    justify-self: start;   /* the grid item hugs the left instead of stretching */
    width: auto;
}
.option-card .room-controls .quantity-stepper {
    display: inline-flex;  /* shrink-to-content instead of filling the wrapper */
    width: max-content;
}
.discount-message {
    margin-top: 0.4rem;
    font-size: 0.9em;
    min-height: 1.1em;
}
.discount-message--ok {
    color: #6ee7a0;              /* lighter green for the dark booking panel */
}
.discount-message--warn {
    color: #ff9b94;             /* lighter red for the dark booking panel */
}
#summary-discount-line .summary-value {
    color: #6ee7a0;
}

/* --- Diving step: Recommended group + collapsible affordance --- */
/* "Show options / Hide options" hint paired with the +/- toggle so guests realise the
   Courses / Packages / Rental lists expand. */
.section-cta { display: inline-flex; align-items: center; gap: 8px; }
.section-hint { font-size: 12px; font-weight: 600; color: #1683b8; white-space: nowrap; user-select: none; }

/* Recommended shortcut group, lifted above the foldable lists. */
.options-section--recommended {
    background: rgba(102, 204, 255, 0.08);
    border: 1px solid rgba(102, 204, 255, 0.45);
    border-radius: 10px;
    padding: 0.5rem 1rem 1rem;
    margin-bottom: 1.25rem;
}
.options-section--recommended > h3 { border-bottom-color: rgba(102, 204, 255, 0.5); }