/* --- Global Styles & Reset --- */
:root {
    --primary-color: #007BFF; /* Main action blue */
    --secondary-color: #FFC107; /* Accent gold/yellow */
    --text-dark: #333;
    --text-light: #f4f4f4;
    --bg-dark: #2c3e50; 
    --bg-light: #f9f9f9; 
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --selected-border: 2px solid var(--primary-color);
    --border-color: #e0e0e0; /* Consistent border color */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light); /* Lighter background for the entire page */
    min-height: 100vh;
}

.container {
    width: 90%; 
    max-width: 1280px; 
    margin: auto;
    overflow: hidden;
}

/* --- Header & Navigation (Basic Styling) --- */
/* --- Header & Navigation from style.css --- */


/* --- Buttons (Standard) --- */
.btn-primary, .btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 90, 179, 0.3);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-dark);
}

.btn-secondary:hover {
    background-color: #e6b100;
}

/* Style for the active/current page link */
.nav ul li a.active-page {
    /* 1. Highlight: Use your primary color and bold font */
    color: var(--primary-color); 
    font-weight: bold;
    
    /* 2. Disable: Make the link unclickable */
    cursor: default; /* Changes the mouse cursor */
    pointer-events: none; /* Crucial: Prevents all click events on the link */
}

/* Optional: Add a subtle underline highlight to the list item */
.nav ul li.active-page-item {
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: -2px; /* Pulls the border up to prevent layout shift */
}

/* --- Booking Search Bar --- */
/* --- Professional & Elegant Search Bar Styling (UPDATED) --- */

/* 1. Remove the large, primary-color wrapper, and apply floating card style to the form itself */
.booking-bar {
    /* Remove previous styles to allow the form to float */
    background-color: transparent; 
    padding: 20px 0 0; /* Adjust padding if needed to position the bar */
    box-shadow: none;
    margin-bottom: 20px;
}

/* 2. Container Styling: Make it the Floating, Modern Card */
.booking-form-inline {
    display: flex; 
    align-items: flex-end; /* Align inputs to the bottom line */
    gap: 15px; /* Spacing between input groups */
    
    background-color: var(--bg-light); 
    padding: 20px 25px; /* Add internal padding */
    margin: 0 auto 30px auto; /* Center the form and add bottom margin */
    
    /* Elegant Look */
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.05); /* Lighter, elegant shadow */
    border: 1px solid var(--border-color);
}

/* 3. Input Group Styling - Set Proportional Widths */
.booking-form-inline .input-group {
    display: flex;
    flex-direction: column;
    
    /* Proportional width distribution for elegant look: 
       Date fields get 2 units, Number fields get 1 unit. */
    flex: 2; 
    flex-basis: 0; /* Important for flex-grow/flex to work correctly */
}

/* Override for the smaller Adults/Children inputs */
.booking-form-inline .input-group:nth-child(3), /* Adults */
.booking-form-inline .input-group:nth-child(4) /* Children */
{
    flex: 1; /* These take half the space of the date fields */
}


/* 4. Label Styling */
.booking-form-inline label {
    display: block; 
    font-size: 0.9em;
    color: var(--text-dark); /* Use dark text color */
    margin-bottom: 5px;
    font-weight: 600; 
    opacity: 0.8;
}

/* 5. Input Field Sizing and Style Consistency */
.booking-form-inline input[type="text"],
.booking-form-inline input[type="number"] {
    width: 100%; /* Must be 100% of its parent .input-group */
    padding: 10px;
    font-size: 1rem;
	background-color: white;
    
    /* Clean & Professional Look */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-dark);
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
    outline: none; 
}

/* Elegant Focus State: Highlight the active field */
.booking-form-inline input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2); 
}

/* 6. Button Styling */
.booking-form-inline .btn-primary {
    flex-shrink: 0; /* Keep the button from stretching */
    padding: 10px 25px;
	margin-top: 25px;
    /* Ensure primary color is used, as defined in your global styles */
    background-color: var(--primary-color);
    color: var(--text-light);
    font-weight: 600;
	border-radius: 6px;
}

/* Reset button hover effect to be consistent with global styles */
.btn-primary:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 90, 179, 0.3);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .booking-form-inline {
        flex-wrap: wrap;
        padding: 15px; /* Slightly less padding on mobile */
    }

    .booking-form-inline .input-group {
        /* On small screens, date fields take half width, number fields stay small */
        flex: 1 1 45%; 
    }
    
    /* Ensure number fields don't get too large by limiting their max width */
    .booking-form-inline .input-group:nth-child(3), 
    .booking-form-inline .input-group:nth-child(4) {
        flex: 1 1 30%; /* Give them enough width, but prioritize others */
        max-width: 30%;
    }
    
    .booking-form-inline .btn-primary {
        /* Button takes full width on smaller screens */
        width: 100%;
        margin-top: 10px;
        flex: 1 1 100%;
    }
}

@media (max-width: 576px) {
    .booking-form-inline .input-group {
        /* On smallest screens, all inputs stack full width for better usability */
        flex: 1 1 100%;
        max-width: 100%;
    }
}





/* --- Room Card Layout --- */

.rooms-page-content h1 {
    font-size: 2em;
    margin-bottom: 30px;
    color: var(--text-dark);
    text-align: center;
}

.room-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
    padding: 20px; /* Internal padding */
    
    /* FIX FOR BUTTON LAYOUT ON LARGE SCREENS */
    display: flex;
    flex-direction: column; /* Stacks all children (Wrapper + Button) vertically */
    gap: 20px; /* Space between content wrapper and button */
}

.room-content-wrapper {
    /* Ensures the main content area (Image/Details + Booking Summary) takes full width */
    display: flex;
    flex-direction: column; 
    width: 100%;
    gap: 20px; /* Space between room-card-top and booking-summary-section */
}


/* --- Room Card Top Section (Image + Details) --- */
.room-card-top {
    display: flex;
    gap: 30px;
}

.image-part {
    flex: 0 0 400px; /* Fixed width for the image part on desktop */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.room-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-more-photos {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
}

.detail-part {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.room-name {
    font-size: 1.8em;
    color: var(--text-dark);
    margin-bottom: 5px;
	text-align: left;
}

.rate-plan-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
	
}

.plan-name {
    font-weight: bold;
    color: #008000; /* Green for plan status */
}

.pricing-info {
    font-size: 1.5em;
    font-weight: 500;
    margin-top: 10px;
}

.price-value {
    font-size: 1.4em;
    font-weight: 700;
    color: #cc0000; /* Red for price emphasis */
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;
}

.amenity-item {
    font-size: 0.9em;
    color: #555;
}
.amenity-item i {
    color: var(--primary-color);
    margin-right: 5px;
}

/* --- Booking Summary Section --- 
.booking-summary-section {
    width: 100%;
}*/

/* --- 2. BOOKING INPUTS GRID (The Fix) --- */

/* 1. Container for the widgets (Ensures Horizontal Layout) */
.booking-inputs {
    display: flex;
    align-items: stretch; /* Crucial: Makes all three boxes the same height */
    justify-content: space-between; 
    gap: 20px; 
    padding: 15px 0;
    flex-wrap: wrap; 
}

/* 2. Style for ALL Widget Boxes (Guaranteed Box Appearance) */
.booking-inputs > * {
    flex: 1; /* Allows boxes to share horizontal space evenly */
    min-width: 200px; /* Ensures minimum width on desktop before wrapping */
    
    /* VISUAL FIX: Creates the clean box look */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    border: 1px solid var(--border-color);
    border-radius: 8px; 
    padding: 15px;
    background-color: #fff;
    min-height: 120px; 
    
    /* CONTENT FIX: Set up the content for internal vertical distribution */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    box-sizing: border-box;
}

/* 3. Style for the Headings/Labels */
.booking-inputs label, 
.booking-inputs h4,
.booking-inputs .control-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: 0; 
}

/* FIX 1: Availability Number Color */
.availability-count-red {
    color: #cc0000; /* Red color for the number */
    font-weight: 900;
    font-size: 1.6em; /* Ensure size is maintained */
}
.rooms-available-container .availability-badge {
    /* Style the badge for availability count */
    font-size: 1.5em; 
    font-weight: 700;
    color: var(--primary-color); /* Primary color for "Only X Rooms Left!" */
    line-height: 1.2;
    margin-top: auto; 
    margin-bottom: auto; 
}

/* 5. Clean up the Rooms Required Input appearance */
.rooms-required-box .quantity-control-wrapper {
    margin-top: auto; 
    margin-bottom: auto; 
}
.rooms-required-box input[type="number"] {
    width: 60px; 
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
}

/* 6. Vertical Checkboxes for Extra Bed Options */
.extra-bed-options-box .extra-bed-list-label {
    text-align: center;
    width: 100%; /* Ensure label is centered on desktop */
}
.extra-bed-options-box .extra-bed-list-vertical { 
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px;
    margin-top: auto; 
    margin-bottom: auto;
}
/* FIX 2: Ensure individual items are horizontal and do not wrap text */
.extra-bed-options-box .extra-bed-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap; /* Prevents "Room 1" from wrapping on a tight space */
}



/* --- NEW HORIZONTAL BREAKDOWN STYLES --- */
.price-breakdown-summary {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between label row and value row */
    font-size: 1.1em;
}

/* 2. Row Container (Labels or Values) */
.breakdown-row {
    display: flex;
    justify-content: space-between; 
    width: 100%;
    margin-bottom: 5px; 
    padding: 0 25px; /* Padding for the entire row to align with the card content */
}

/* 3. Individual Item (Label or Value) */
.breakdown-item {
    /* CRITICAL: Forces ALL items (7 of them) to share space EQUALLY */
    flex: 1 1 0%;   
    
    /* CRITICAL FIX: Remove padding to prevent horizontal text misalignment */
    padding: 0; 
    
    text-align: left; /* Default to right, then override for labels */
    white-space: nowrap; 
}

/* 4. Label Row Styling */
.breakdown-labels {
    font-weight: 600;
    color: #555;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

/* CRITICAL FIX: Ensure labels align LEFT within their equal-width column */
.breakdown-labels .breakdown-item {
    text-align: left; 
}

/* 5. Value Row Styling */
.breakdown-values .breakdown-labels{
    font-weight: bold;
}

/* Values remain right-aligned within their equal-width column */
.breakdown-values .breakdown-item {
    font-weight: 600;
    color: var(--text-dark);
}

.breakdown-item small {
    display: block; 
    font-size: 0.85em; 
    color: var(--text-dark); 
    margin-top: 2px; 
    opacity: 0.75;
}

.extra-bed-note {
    margin-top: 10px;
    font-size: 0.9em;
    padding: 10px;
    background-color: #e9f5ff; /* Light blue background */
    border-left: 4px solid var(--primary-color);
    border-radius: 4px;
}


/* --- Section 5 & Toggle Button (8.2.5 & 8.2.6) --- */

.btn-choose-room {
    width: 100%;
    border-radius: 0 0 12px 12px;
    padding: 15px 20px;
    font-size: 1.1em;
}

.breakdown-item.total-value {
	font-size: 1.2em;
    color: #cc0000;
	text-align: right;
}

.breakdown-item.total-label {
	font-size: 1.2em;
    color: #cc0000;
	text-align: right;
}

.breakdown-item.discount-value {
    color: #28a745;
	
}

.final-total-value {
    color: var(--primary-color);
    font-size: 1.1em;
}

.btn-book-pay {
    width: 100%;
    margin-top: 15px;
    border-radius: 6px;
    font-size: 1.1em;
}

.hidden {
    display: none !important;
}

.no-results-message {
    padding: 40px;
    text-align: center;
    font-size: 1.4em;
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    margin: 40px auto;
}

/* In room-style.css, add this section */

/* --- Promo Code Section Styles --- */
.promo-code-section {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    border-top: 1px dashed #eee;
    border-bottom: 1px dashed #eee;
    background-color: var(--bg-light); /* Subtle background for the section */
}

.promo-code-input {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.promo-message {
    font-size: 0.9em;
    font-weight: 600;
    margin: 0;
    white-space: nowrap; /* Keep the message on one line */
}

.promo-message.error {
    color: #dc3545; /* Red for errors */
}

.promo-message.success {
    color: #28a745; /* Green for success */
}

/* --- Rate Plan Modal Styles (8.1.1 & 8.5) --- */
/* --- Rate Plan Modal Styles (8.1.1 & 8.5) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 30px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.btn-close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    color: var(--text-dark);
    font-size: 1.5em;
    padding: 5px;
    line-height: 1;
    opacity: 0.7;
}

.modal-title {
    font-size: 1.8em;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
}

/* Rate Plan Modal Specifics - ENHANCED PROFESSIONAL LOOK */
.rate-plan-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Reduced gap slightly for a tighter feel */
}

.rate-plan-option {
    border: 1px solid var(--border-color); /* Use theme border color */
    border-radius: 10px; /* Slightly more rounded corners */
    padding: 20px; /* Increased padding */
    cursor: pointer;
    transition: all 0.2s;
    /* Use flexbox for a side-by-side layout: Details on left, Price/Button on right */
    display: flex; 
    justify-content: space-between;
    align-items: flex-start; 
    background-color: #fff; /* Ensure it's white inside the modal */
	transition: all 0.2s ease-in-out;
}

.rate-plan-option:hover {
    background-color: #f0f8ff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.1);
}

/* Remove hover effect for non-selected cards */
.rate-plan-option:hover:not(.selected) {
    /* If you had a rule like 'border-color: #aaa;' or 'background-color: #eee;' here, remove it. */
    /* Set back to the default state for non-selected cards: */
    border-color: var(--border-color); /* Or whatever your default border color is */
    background-color: transparent; 
}

.rate-plan-option.selected {
    border: 2px solid var(--primary-color); /* Thicker border for selection */
    background-color: #e6f0ff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2); /* More prominent shadow */
}

.rate-plan-details {
    flex-grow: 1;
    padding-right: 20px;
}

.rate-plan-header {
    /* Remove internal flex from previous version */
    display: block; 
    margin-bottom: 5px;
}

.rate-plan-header h4 {
    font-size: 1.3em; /* Slightly larger name */
    color: var(--text-dark);
}

.rate-description {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 15px;
}

.rate-action {
    flex-shrink: 0;
    text-align: right;
    /* Stack price and button vertically */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.rate-price {
    font-weight: 700; /* Bolder price */
    font-size: 1.5em; /* Larger price */
    color: #008000; /* Green color for the main price */
    margin-bottom: 10px;
}

.rate-plan-option .old-price {
    font-size: 0.9em;
    color: #dc3545;
    text-decoration: line-through;
    margin-right: 0;
    margin-bottom: 5px; /* Add margin below old price */
    font-weight: normal;
}

/* Style the button inside the action area to look like a proper button */
.rate-action .btn-select-rate {
    float: none; /* Remove float */
    padding: 8px 15px;
    font-size: 1em;
    /* Inherits styling from .btn-primary */
    border-radius: 6px;
    font-weight: 600;
}

/* --- Rate Plan Modal Fix: Hide the actual radio button element --- */
.hidden-radio {
    /* Standard method to visually and functionally hide an input */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Ensure it doesn't interfere with clicks on the label */
    margin: 0;
}

/* --- Rate Plan Modal Success Message --- */
.modal-success-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dark);
}

.modal-success-message .success-icon {
    font-size: 3rem;
    color: green;
    margin-bottom: 15px;
}

.modal-success-message h4 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

/* --- room-style.css: Add/Ensure these styles exist --- */

/* 1. Ensure the modal is centered and sized correctly */
.modal-gallery-content {
    max-width: 900px; /* Adjust size as needed */
    width: 90%;
    /* You may need to ensure your base .modal-content has
       flex/grid properties to center its contents if needed */
}

/* 2. Carousel Container */
.gallery-carousel-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto 20px auto;
    overflow: hidden;
    border-radius: 8px;
    height: 65vh; /* Sets a fixed viewport height for the carousel */
}

/* 3. Wrapper for Slides */
#gallery-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 4. Individual Slides */
.carousel-slide {
    position: absolute; /* Allows slides to stack */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hides all slides by default */
    transition: opacity 0.5s ease-in-out; /* Smooth transition */
    display: flex; /* Centers content within the slide */
    justify-content: center;
    align-items: center;
    background-color: #000; /* Black background for gallery */
}

/* 5. Active Slide (CRITICAL) */
.carousel-slide.active {
    opacity: 1; /* Makes the active slide visible */
    z-index: 1; 
}

/* 6. Media Styling (Images/Videos) */
.carousel-slide img,
.carousel-slide iframe {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the media fits entirely */
}

/* 7. Caption */
#gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    font-size: 0.9em;
    text-align: center;
    z-index: 5;
}

/* 8. Controls (Ensure these are styled as you like) */
.gallery-control-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* ... rest of your button styles ... */
    z-index: 10;
	padding: 15px;      /* Increases the button's click area */
    font-size: 1.5em;
}

/* CURRENT STATE: Check these lines in room-style.css */
#gallery-prev {
    left: 10px;
}

#gallery-next {
    right: 10px; /* This should place it on the right */
}


/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
    /* For medium to large screens, reduce the fixed image size and stack */
    .room-card-top {
        flex-direction: column;
        gap: 20px;
    }
    .image-part {
        flex: 1 1 100%; /* Image takes full width now */
        min-height: 250px;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    /* Stack components on smaller screens */
    
    .booking-form-inline {
        flex-wrap: wrap;
    }
    .booking-form-inline .input-group {
        width: 48%; 
    }
    .booking-form-inline .btn-search {
        width: 100%;
        margin-top: 10px;
    }

    /* Booking Inputs Grid Stack */
    .booking-inputs {
        flex-direction: column; 
        gap: 15px;
    }
    .booking-inputs > * {
        /* Revert to horizontal layout inside the mobile boxes */
        flex: none; 
        width: 100%;
        padding: 15px 20px;
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        min-height: 60px;
        text-align: left;
    }
    
    /* FIX 2: Mobile Extra Bed Heading Alignment */
    .extra-bed-options-box {
        justify-content: space-between; /* Space out the label and the list */
    }
    .extra-bed-options-box .extra-bed-list-label {
        text-align: left; /* Force left align on mobile */
        width: auto;
        flex-shrink: 0;
    }
    /* Reset auto margins on mobile row layout */
    .rooms-available-container .availability-badge,
    .rooms-required-box .quantity-control-wrapper,
    .extra-bed-options-box .extra-bed-list-vertical {
        margin: 0; 
    }
    
    /* FIX 3: Ensure extra bed checkboxes flow correctly horizontally on mobile */
    .extra-bed-options-box .extra-bed-list-vertical {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end; /* Push items to the right side of the box */
        gap: 10px;
        
    }
    .extra-bed-options-box .extra-bed-item {
        /* Reset any conflicting width rules for mobile */
        width: auto; 
    }


    /* Price Breakdown on small screens - stack labels for readability */
    .breakdown-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .breakdown-item {
        width: 100%;
        text-align: left !important;
    }
    .breakdown-values .breakdown-item:last-child {
        text-align: right !important; /* Keep total aligned right */
    }
}

@media (max-width: 576px) {
    .amenities-grid {
        grid-template-columns: 1fr; /* Single column on smallest screens */
    }
    .booking-form-inline .input-group {
        width: 100%;
    }
	.breakdown-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15px; /* Use smaller padding on mobile */
        margin-bottom: 10px;
    }
    .breakdown-item {
        width: 100%;
        text-align: left !important;
    }
    .breakdown-labels .breakdown-item {
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 2px;
    }
    .breakdown-values .breakdown-item {
        font-weight: 500;
        margin-left: 15px;
        color: #555;
    }
}