.main-container{
            display:flex; height:100%; width:100%; flex-direction:column; align-items: center;
        }

        .title{
            font-size: 2rem;
            font-weight: bold;
            padding-bottom: 2rem;
            padding-left: 0.5rem;
        }

        .content-container{
            display: flex;
            position: sticky;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding:1rem 0rem;
            background-color: var(--theme-primary);
            z-index: 20;
        }

        .search-div{
            display: flex;
            flex-direction: row;
            width: 100%;
        }

        .search-div-container{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        .content-div{
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            padding-top: 4rem;
        }

        .search-btn{
            display:flex; padding:0.5rem 1.2rem; border-radius:0.5rem; background-color:var(--theme-secondary-strong);
            align-items: center;
            justify-content: center;
        }
        .search-txt{
            font-size: 1.3rem;
            font-weight: 900;
            color: var(--theme-surface);
        }

        .date-container{
            display: flex; width: 100%; padding:0.5rem 0.5rem; border:solid var(--theme-input-border) 2px; border-radius:0.5rem; background-color: rgb(250, 250, 250, 0.5);
        }

        .date-input{
            display:flex; width:100%; padding:0.5rem 1rem; border:solid var(--theme-input-border) 2px; border-radius:0.5rem; background-color: rgb(250, 250, 250, 0.5); margin: 0 0.125rem;
        }

        .suggestions-container{
            max-height: 200px; /* Limit height */
            overflow-y: auto; /* Enable scrolling if needed */
            background-color: var(--theme-surface);
            border: 1px solid var(--theme-primary);
            border-radius: 5px;
        }

        .suggestion{
            padding: 0.5rem;
            border-bottom: 1px solid var(--theme-border-muted);
            background-color: var(--theme-surface);
            font-size: 14px;
            cursor: pointer;
        }

        .suggestion:hover{
            background-color: var(--theme-accent-darker);
            color: var(--theme-surface);
            cursor: pointer;
        }

        .search-bar{
            display: flex;
            align-items: flex-end;
            gap: 10px;
            position: relative;
            padding: 0rem 1rem;
            z-index: 30;
        }
        
        .search-btn{
            width: auto;
        }

        .calendar-btn{
            display:flex;
            align-items:center;
            justify-content:center;
            min-width:3.25rem;
            border:0;
            cursor:pointer;
        }

        .calendar-btn:focus{
            outline:none;
            box-shadow:0 0 0 3px rgba(255, 255, 255, 0.35);
        }

        .landing-date-picker{
            display:none;
            position:absolute;
            top:calc(100% + 0.65rem);
            right:0;
            width:min(24rem, 100%);
            padding:1rem;
            border:1px solid var(--theme-border-muted);
            border-radius:0.5rem;
            background-color:var(--theme-surface);
            color:var(--theme-text);
            box-shadow:0 1.25rem 2.5rem rgba(0, 0, 0, 0.22);
            z-index:1000;
        }

        .landing-date-picker.is-open{
            display:block;
        }

        .landing-date-picker-header{
            display:grid;
            grid-template-columns:2.25rem 1fr 2.25rem;
            align-items:center;
            gap:0.5rem;
            margin-bottom:0.75rem;
        }

        .landing-calendar-month{
            text-align:center;
            font-size:1rem;
            font-weight:800;
            color:var(--theme-text);
        }

        .landing-calendar-nav{
            display:flex;
            align-items:center;
            justify-content:center;
            width:2.25rem;
            height:2.25rem;
            border:1px solid var(--theme-border-muted);
            border-radius:0.45rem;
            background-color:var(--theme-surface);
            color:var(--theme-primary);
            cursor:pointer;
        }

        .landing-calendar-nav:hover,
        .landing-calendar-nav:focus{
            background-color:var(--theme-primary);
            color:var(--theme-surface);
            outline:none;
        }

        .landing-date-summary{
            min-height:2.5rem;
            margin-bottom:0.75rem;
            padding:0.6rem 0.75rem;
            border-radius:0.45rem;
            background-color:rgba(0, 0, 0, 0.05);
            color:var(--theme-text);
            font-size:0.9rem;
            font-weight:700;
            line-height:1.25;
        }

        .landing-calendar-weekdays,
        .landing-calendar-grid{
            display:grid;
            grid-template-columns:repeat(7, minmax(0, 1fr));
            gap:0.25rem;
        }

        .landing-calendar-weekdays{
            margin-bottom:0.35rem;
            color:var(--theme-text-muted);
            font-size:0.72rem;
            font-weight:800;
            text-align:center;
            text-transform:uppercase;
        }

        .landing-calendar-spacer{
            min-height:2.25rem;
        }

        .landing-calendar-day{
            min-width:0;
            min-height:2.25rem;
            border:0;
            border-radius:0.45rem;
            background-color:transparent;
            color:var(--theme-text);
            font-size:0.9rem;
            font-weight:800;
            cursor:pointer;
        }

        .landing-calendar-day:hover,
        .landing-calendar-day:focus{
            background-color:var(--theme-accent-darker);
            color:var(--theme-surface);
            outline:none;
        }

        .landing-calendar-day.is-in-range{
            background-color:rgba(0, 0, 0, 0.08);
            color:var(--theme-primary);
        }

        .landing-calendar-day.is-selected{
            background-color:var(--theme-tertiary);
            color:var(--theme-surface);
        }

        .landing-calendar-day.is-disabled{
            color:var(--theme-text-muted);
            cursor:not-allowed;
            opacity:0.42;
        }

        .landing-calendar-day.is-disabled:hover,
        .landing-calendar-day.is-disabled:focus{
            background-color:transparent;
            color:var(--theme-text-muted);
        }

        .landing-date-picker-actions{
            display:flex;
            justify-content:flex-end;
            gap:0.5rem;
            margin-top:0.85rem;
        }

        .landing-calendar-clear,
        .landing-calendar-apply{
            min-height:2.4rem;
            padding:0.55rem 0.85rem;
            border-radius:0.45rem;
            font-size:0.85rem;
            font-weight:800;
            cursor:pointer;
        }

        .landing-calendar-clear{
            border:1px solid var(--theme-border-muted);
            background-color:var(--theme-surface);
            color:var(--theme-text);
        }

        .landing-calendar-apply{
            border:1px solid var(--theme-secondary-strong);
            background-color:var(--theme-secondary-strong);
            color:var(--theme-surface);
        }

        .landing-date-field{
            display:flex;
            flex-direction:column;
            flex:1 1 150px;
            min-width:150px;
            overflow:hidden;
            border-radius:0.5rem;
        }

        .landing-date-label{
            display:block;
            margin-bottom:0.35rem;
            color:var(--theme-surface);
            font-size:1rem;
            font-weight:700;
            line-height:1.2;
        }

        .landing-date-input{
            width:100%;
            min-height:3.5rem;
            padding:0.75rem 1rem;
            border:0;
            border-radius:0.5rem;
            background-color:var(--theme-surface);
            color:var(--theme-text);
            font-size:1rem;
            font-weight:700;
            outline:none;
        }

        .landing-date-input:focus{
            box-shadow:0 0 0 3px rgba(255, 255, 255, 0.35);
        }

        .landing-date-input::-webkit-calendar-picker-indicator{
            cursor:pointer;
            opacity:0.75;
        }

        .landing-date-field.landing-date-hidden-field{
            display:none;
        }
        
        .search-action-btn-container{
            width:80%;
        }

        .room-content{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content:center;
            width: 100%;
            padding:2rem 0rem;
            position: relative; /* Ensure proper stacking context */
            overflow: hidden; /* Prevent overflow */
        }
        
        /* Responsive adjustments */
    @media (max-width: 768px) {
        .search-btn{
            width: 100%;
        }   

        .search-action-btn-container{
            width:90%;
        }
    }

    @media (max-width: 480px) {
        .search-btn{
            width: 100%;
        }
        
        .search-action-btn-container{
            width:90%;
        }

        .landing-date-picker{
            left:0;
            right:auto;
            width:100%;
        }
    }
    
    @media (max-width: 360px) {
        .search-btn{
            width: 100%;
        }
        
        .search-action-btn-container{
            width:90%;
        }
    }