:root {
    --primary-blue: #008cff;
    --light-grey: #e7e7e7;
    --white: #ffffff;
}

body { margin: 0; font-family: 'Lato', sans-serif; background-color: #f2f2f2; }

/* Header */
.main-header { background: var(--white); padding: 10px 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.inner-header { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo a { font-size: 28px; font-weight: 900; text-decoration: none; color: #222; }
.logo span { color: var(--primary-blue); }
.login-cta { background: linear-gradient(93deg, #53b2fe, #065af3); color: #fff; border: none; padding: 10px 20px; border-radius: 5px; font-weight: 700; cursor: pointer; }

/* Hero & Widget */
.hero { 
    background: url('https://imgak.mmtcdn.com/pwa_v3/pwa_commons_assets/desktop/bg6.jpg') no-repeat center/cover;
    height: 500px; display: flex; justify-content: center; padding-top: 60px;
}
.search-widget-container { 
    background: var(--white); width: 1100px; border-radius: 10px; position: relative; height: fit-content; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding-bottom: 40px;
}

.search-tabs { display: flex; justify-content: center; gap: 40px; padding: 20px; }
.tab-item { text-decoration: none; color: #4a4a4a; font-size: 12px; font-weight: 700; text-align: center; }
.tab-item i { display: block; font-size: 24px; margin-bottom: 5px; color: #888; }
.tab-item.active { color: var(--primary-blue); }
.tab-item.active i { color: var(--primary-blue); }

/* Grid Inputs */
.booking-inputs { 
    display: grid; grid-template-columns: 1.2fr 0.1fr 1.2fr 1fr 1fr; 
    border: 1px solid var(--light-grey); margin: 0 20px; border-radius: 10px; position: relative;
}
.input-box { padding: 15px 20px; border-right: 1px solid var(--light-grey); cursor: pointer; position: relative; }
.input-box:last-child { border-right: none; }
.input-box:hover { background: #eaf5ff; }
.input-box label { font-size: 14px; font-weight: 700; color: #000; display: block; }
.input-box input { border: none; font-size: 22px; font-weight: 900; width: 100%; outline: none; background: transparent; cursor: pointer; }

/* Selection Popups */
.selection-popup { 
    display: none; position: absolute; top: 105%; left: 0; width: 350px; background: #fff; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); border-radius: 8px; z-index: 2000; max-height: 300px; overflow-y: auto;
}
.pop-item { display: flex; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #f2f2f2; }
.pop-item:hover { background: #eaf5ff; }

/* Swap Button */
.swap-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.swap-btn i { background: #fff; color: var(--primary-blue); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Search Button */
.search-btn { 
    background: linear-gradient(93deg, #53b2fe, #065af3); color: #fff; border: none; 
    padding: 12px 60px; border-radius: 30px; font-size: 20px; font-weight: 900;
    position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); cursor: pointer;
}

/* Modal */
.results-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3000; }
.results-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 90%; max-width: 500px; z-index: 3001; padding: 20px; border-radius: 12px; }
/* Nav Bar Fix */
.nav-links { display: flex; align-items: center; gap: 35px; }
.header-offer-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.header-offer-item i { font-size: 20px; color: var(--primary-blue); }

/* Traveller Card & Chips Styling */
.traveller-card {
    width: 320px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.picker-section { margin-bottom: 25px; }
.picker-section h6 {
    font-size: 11px;
    color: #4a4a4a;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.chip-group { display: flex; gap: 10px; flex-wrap: wrap; }

.chip {
    padding: 8px 18px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    transition: 0.2s all ease;
    font-weight: 700;
}

.chip:hover { border-color: var(--primary-blue); color: var(--primary-blue); }

.chip.active {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}

.apply-btn {
    background: var(--primary-blue);
    color: #fff;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

/* Modal Results Styling */
.result-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 8px;
    align-items: center;
}
.result-info h4 { margin: 0; color: #000; }
.result-info p { margin: 5px 0; color: #666; font-size: 13px; }
/* Container Fix */
.booking-inputs {
    display: grid;
    /* This creates a flexible 5-column grid by default */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border: 1px solid var(--light-grey);
    margin: 0 20px 20px;
    border-radius: 10px;
    background: #fff;
    position: relative;
}

/* Ensure boxes stay consistent */
.input-box {
    padding: 15px 20px;
    border-right: 1px solid var(--light-grey);
    cursor: pointer;
    position: relative; /* Crucial for popup positioning */
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-box:last-child { border-right: none; }

/* Popup Positioning Fix */
.selection-popup {
    display: none;
    position: absolute;
    top: 100%; /* Directly below the box */
    left: 0;
    width: 350px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 0 0 10px 10px;
    z-index: 5000;
    max-height: 400px;
    overflow-y: auto;
}

/* Visibility Class */
.is-visible { display: block !important; }

/* Adjustments for Hotel Mode (JS will toggle these) */
.hidden { display: none !important; }