/* ========================================
   MEETING ROOM BOOKING 
   ======================================== */

:root {
    --primary-color: #053333;
    --secondary-color: #1E3F35;
    --dark-gray: #1E1E1E;
    --light-gray: #F5F5F5;
    --border-gray: #E0E0E0;
    --text-gray: #666666;
    --text-dark: #333333;
}

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

body {
      font-family: 'RecklessNeue', serif;
    font-weight: normal;
    overflow-x: hidden;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: rgb(247 245 240 / var(--tw-bg-opacity, 1));
}

.booking-container {
    max-width: 100%;
    margin: 0;
    padding-top: 8%;
}

header.global-header.standalone {
    position: initial;
}

/* ========================================
   PROGRESS STEPS - TOP BAR
   ======================================== */
.booking-steps {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    background:transparent;
    border-bottom: 1px solid var(--border-gray);
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    color: var(--text-gray);
    background: #F9F9F9;
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
}

.step.active {
    background: var(--primary-color);
    color: white;
}

.step.completed {
    background: white;
    color: var(--secondary-color);
}

.step::after {
    content: '>';
    position: absolute;
    right: -1rem;
    color: var(--text-gray);
    font-weight: bold;
}

.step:last-child::after {
    display: none;
}

.step-number {
    font-weight: bold;
}

/* ========================================
   SEARCH FORM - STYLE COMPACT
   ======================================== */
.search-section {
    background: #F7F7F7;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-gray);
}

.search-form {
    display: grid;
    grid-template-columns: repeat(6, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.search-form .form-group.establishment { 
    grid-column: span 2;
}


.search-form .form-group {
    display: flex;
    flex-direction: column;
}


.search-form .form-group label {
    font-size: 0.86rem;
    color: var(--text-gray);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.form-control {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-gray);
    border-radius: 2px;
    font-size: 0.875rem;
    background: white;
    height: 36px;
    outline: none;
}

.booking-container span.sBtn-text,
.booking-container span.sBtn-text.placeholder {
    font-size: 0.9em;
    line-height: 15px;
}


.form-control:focus {
    border-color: var(--secondary-color);
}

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 2rem;
}



form#booking-search-form input#search-people {
    border: 0;
    font-size: 18px;
    outline: 0;
    margin: 0 auto;
    font-weight: 500;
    pointer-events: none;
}

form#booking-search-form .people-picker-container.people-custom .people-picker-wrapper {
gap: 20px !important;
}

.location-input-wrapper {
    position: relative;
}

.location-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 1rem;
}

.location-input {
    padding-left: 2rem !important;
}

.btn-location-current {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--secondary-color);
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
}


button.btn-update:after {
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjIuMDMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMi4wMyAyMiI+PGRlZnMgZmlsbD0iIzAwMDAwMCI+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgIGZpbGw6ICMxZTNmMzU7ICAgICAgZmlsbC1ydWxlOiBldmVub2RkOyAgICAgIGZpbHRlcjogdXJsKCNmaWx0ZXIpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGZpbHRlciBpZD0iZmlsdGVyIiB4PSIzODM4IiB5PSIxNTA1IiB3aWR0aD0iMjIuMDMiIGhlaWdodD0iMjIiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZmlsbD0iIzAwMDAwMCI+ICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiMxZTNmMzUiIGZpbGw9IiMwMDAwMDAiLz4gICAgICA8ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiIG9wZXJhdG9yPSJpbiIgaW4yPSJTb3VyY2VHcmFwaGljIiBmaWxsPSIjMDAwMDAwIi8+ICAgICAgPGZlQmxlbmQgcmVzdWx0PSJibGVuZCIgaW4yPSJTb3VyY2VHcmFwaGljIiBmaWxsPSIjMDAwMDAwIi8+ICAgIDwvZmlsdGVyPiAgPC9kZWZzPiAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzg0Mi45OSwxNTIxLjY3YTguMzU4LDguMzU4LDAsMCwxLC4xNy0xMS41Niw4LjE2Myw4LjE2MywwLDAsMSw0LjU4LTIuMzJsLTAuMDktMi43OWExMC45MywxMC45MywwLDAsMC02LjQ0LDMuMTUsMTEuMTM5LDExLjEzOSwwLDAsMC0uMTYsMTUuNDdsLTIuMzQsMi4zNSw3LjM5LDAuNDEtMC4wMi03LjgzWm04LjkyLTE2LjA1LDAuMDIsNy44MywzLjA5LTMuMTJhOC4zNTgsOC4zNTgsMCwwLDEtLjE3LDExLjU2LDguMTc5LDguMTc5LDAsMCwxLTQuNTgsMi4zM2wwLjA5LDIuNzhhMTAuOTU4LDEwLjk1OCwwLDAsMCw2LjQ0LTMuMTUsMTEuMTM5LDExLjEzOSwwLDAsMCwuMTYtMTUuNDdsMi4zNC0yLjM1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM4MzggLTE1MDUpIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: -2px 0 0;
}


button.btn-update:hover:after {
   content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjIuMDMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMi4wMyAyMiI+PGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgIGZpbGw6ICNmZmY7ICAgICAgZmlsbC1ydWxlOiBldmVub2RkOyAgICAgIGZpbHRlcjogdXJsKCNmaWx0ZXIpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGZpbHRlciBpZD0iZmlsdGVyIiB4PSIzODM4IiB5PSIxNTA1IiB3aWR0aD0iMjIuMDMiIGhlaWdodD0iMjIiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiNmZmYiLz4gICAgICA8ZmVDb21wb3NpdGUgcmVzdWx0PSJjb21wb3NpdGUiIG9wZXJhdG9yPSJpbiIgaW4yPSJTb3VyY2VHcmFwaGljIi8+ICAgICAgPGZlQmxlbmQgcmVzdWx0PSJibGVuZCIgaW4yPSJTb3VyY2VHcmFwaGljIi8+ICAgIDwvZmlsdGVyPiAgPC9kZWZzPiAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzg0Mi45OSwxNTIxLjY3YTguMzU4LDguMzU4LDAsMCwxLC4xNy0xMS41Niw4LjE2Myw4LjE2MywwLDAsMSw0LjU4LTIuMzJsLTAuMDktMi43OWExMC45MywxMC45MywwLDAsMC02LjQ0LDMuMTUsMTEuMTM5LDExLjEzOSwwLDAsMC0uMTYsMTUuNDdsLTIuMzQsMi4zNSw3LjM5LDAuNDEtMC4wMi03LjgzWm04LjkyLTE2LjA1LDAuMDIsNy44MywzLjA5LTMuMTJhOC4zNTgsOC4zNTgsMCwwLDEtLjE3LDExLjU2LDguMTc5LDguMTc5LDAsMCwxLTQuNTgsMi4zM2wwLjA5LDIuNzhhMTAuOTU4LDEwLjk1OCwwLDAsMCw2LjQ0LTMuMTUsMTEuMTM5LDExLjEzOSwwLDAsMCwuMTYtMTUuNDdsMi4zNC0yLjM1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM4MzggLTE1MDUpIi8+PC9zdmc+);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: -2px 0 0;
} 
 

.btn-update {
    border:1px solid var(--secondary-color);
    color: #1e3f35;
    padding: 0.5rem 1.5rem;
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;
    height: 36px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s ease;
    justify-content: center;
}

.btn-update:hover {
    background: var(--secondary-color);
     color: #FFF;
}

/* ========================================
   LAYOUT PRINCIPAL - SPLIT VIEW
   ======================================== */
.main-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100vh - 160px);
    position: relative;
}

/* ========================================
   RESULTS SECTION - LEFT SIDE
   ======================================== */
.results-section {
    overflow-y: auto;
    background: white;
    padding: 1.5rem;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gray);
}

.results-count {
    font-size: 0.875rem;
    color: var(--text-dark);
}

.results-count strong {
    color: var(--secondary-color);
    font-weight: bold;
}

.results-subtext {
    display: block;
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

.top-results {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 0.875rem;
}

.show-all-link {
    color: var(--secondary-color);
    text-decoration: underline;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: 1rem;
}

.results-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.results-sort label {
    font-size: 0.75rem;
    color: var(--text-gray);
    width: 100%;
}

#sort-by {
    min-width: 150px;
    font-size: 0.75rem;
}

/* ========================================
   ROOM CARDS - STYLE LISTE
   ======================================== */
.results-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.room-card {
    display: grid;
    grid-template-columns: 230px 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid var(--border-gray);
    transition: background 0.2s ease;
}

.room-card:hover {
    background: #FAFAFA;
}

.room-image {
    position: relative;
    width: 230px;
    height: 170px;
    overflow: hidden;
}

.room-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

span.amenity-badge:first-child {
    margin-left: 0;
}

span.amenity-badge {
    margin-left: 2%;
}

.room-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
}

.room-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.room-info h3 {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.room-location {
    font-size: 0.875rem;
    color: var(--secondary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.room-address {
    font-size: 0.75rem;
    color: var(--text-gray);
    line-height: 1.4;
}

.room-capacity {
    font-size: 0.75rem;
    color: var(--text-gray);
    margin-top: 0.25rem;
}

.about-link {
    color: var(--secondary-color);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 0.5rem;
}

.room-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.75rem;
}

.room-price {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    white-space: nowrap;
    text-align: center;
}

span.time-slot-badge {
    font-size: 14px;
    align-items: center;
    display: flex;
}


.btn-select {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 2px;
    font-weight: bold;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-select:hover {
    background: #053333 ;
}

/* ========================================
   MAP SECTION - RIGHT SIDE
   ======================================== */
.map-section {
    position: relative;
    background: #E5E7EB;
}

#map {
    width: 100%;
    height: 100%;
}

.map-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.map-zoom-btn {
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid var(--border-gray);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-dark);
    transition: background 0.2s ease;
}

.map-zoom-btn:hover {
    background: var(--light-gray);
}

/* ========================================
   FOOTER ACTIONS
   ======================================== */
.bottom-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 50%;
    background: white;
    border-top: 1px solid var(--border-gray);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-show-next,
.btn-show-all {
    background: white;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    padding: 0.5rem 1.5rem;
    border-radius: 2px;
    font-weight: bold;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-show-next:hover,
.btn-show-all:hover {
    background: var(--secondary-color);
    color: white;
}

.vat-notice {
    font-size: 0.7rem;
    color: var(--text-gray);
}

input.search-input.form-control.input.active {
    width: 100%;
}

/* ========================================
   LOADING SPINNER
   ======================================== */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--light-gray);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
    .main-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .map-section {
        display: none;
    }
    
    .bottom-actions {
        right: 0;
    }
}

@media (max-width: 991px) {

    input.search-input.form-control.input,
    .search-input {
        width:100%;
        max-width:100%
    }

}

@media (max-width: 768px) {

    .booking-container {
        padding-top: 21%;
    }

    .search-form {
        display: inline;
        grid-template-columns: 1fr;
    }
    
    .room-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .room-image {
        width: 100%;
        height: 180px;
    }
    
    .room-actions {
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .step {
        font-size:0.58rem;
        padding:0.7rem 1rem;
    } 

}



/* ========================================
   BTN BACK - Style Regus
   ======================================== */
.btn-back {
    background: transparent;
    color: #1e3f35;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-back:hover {
    color: #053333 ;
    text-decoration: underline;
}

.btn-back::before {
    content: '‹';
    font-size: 1.5rem;
    font-weight: bold;
}