/* =========================================================
   CLEANED AVAILABILITY / ENQUIRY CSS (minimal + maintainable)
   - Removed: massive element resets, duplicate blocks, tippy CSS
   - Kept: availability grid/table, headings, enquiry/quote forms,
           mobile mode, minimal flatpickr range styling
   ========================================================= */

/* ---------- Base ---------- */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");

:root {
    --text: #333;
    --muted-text: #666;
    --border: #e0e0e0;
    --bg: #f4f4f4;
    --card: #fff;
    --weekend: #eee;
    --supplier-brown: rgb(107,63,35);
    --country-orange: rgba(233,141,13,0.8);
    --region-gold: rgba(188,153,66,0.8);
    --range-accent: #68c8c7;
    --danger: #b71c1c;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}

/* Utility */
.hiddenDiv {
    display: none !important;
}

/* ---------- Main containers ---------- */
.availNow {
    width: 100%;
    max-width: 1500px;
    margin: 10px auto;
    background: var(--card);
}

.availabilityComponent {
    display: flex;
    flex-direction: column;
}

/* Search / range header area */
.availabilitySearch {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}


.searchBar {
    display: flex;
    gap: 10px;
    flex: 1;
    justify-content: flex-start;
}

.searchBarItem {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.availabilityRange {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.availabilityRangeItem {
    display: flex;
    align-items: center;
}

    .availabilityRangeItem button {
        border: none;
        background: transparent;
        width: 48px;
        height: 48px;
        padding: 0;
        cursor: pointer;
    }

.availabilitySearchProgress {
    text-align: center;
    margin: 25px 0;
}

#lblDateRange {
    color: #000;
    margin: 0 12px 4px 12px;
    text-align: center;
    white-space: nowrap;
    line-height: 48px;
}

/* ---------- Headings (country/region/supplier) ---------- */
.country-heading,
.region-heading,
.supplier-heading {
    display: flex;
    align-items: center;
    padding: 0 24px;
    color: #fff;
    position: relative;
    z-index: 1100;
    box-shadow: 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12);
}

.availabilityCountryHeading.country-heading {
    background: var(--country-orange) !important;
}

.availabilityRegionHeading.region-heading {
    background: var(--region-gold) !important;
}

.availabilityHeading.supplier-heading {
    background: var(--supplier-brown) !important;
}

.country-heading .headingText,
.region-heading .headingText,
.supplier-heading .headingText {
    font-size: 24px;
    font-weight: 400;
    line-height: 64px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Availability table/grid ---------- */
.availabilityGrid table,
.availNow table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.availNow th,
.availNow td {
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

th.week,
th.weekend {
    font-weight: 700;
    padding: 6px 0;
    text-align: center;
    color: #757575;
}

th.weekend {
    background: var(--weekend);
}

td.rateGrid {
    font-weight: 400;
    font-size: 12px;
    height: 50px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    position: relative;
}

    td.rateGrid.weekend {
        background: var(--weekend);
        color: #595959;
    }

    td.rateGrid p {
        color: #595959;
        margin: 0;
    }

td.rateGridSoldOut {
    text-align: center;
    padding: 0 5px;
}

    td.rateGridSoldOut p {
        color: #f4f4f4;
        margin: 0;
    }

/* Room type column */
td.roomType, th.roomType {
    min-width: 150px;
    width: 200px;
}

td.roomType {
    height: 60px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 0 5px;
    overflow: hidden;
}

th.roomType {
    font-weight: 700;
    color: #9e9e9e;
}

    th.roomType div.bottom {
        padding-left: 5px;
        text-align: left;
    }

/* Room type cell content (name + rate line) */
.roomTypeContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

    .roomTypeContainer .roomTypeName {
        width: 100%;
        font-weight: 700;
        font-size: 13px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .roomTypeContainer .roomTypeRate {
        font-size: 11px;
        color: var(--muted-text);
        font-weight: 400;
        line-height: 1.3;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Book header column */
th.book {
    padding: 0;
    border-left: 1px solid var(--border);
}

    th.book div.bottom {
        font-weight: 700;
        color: #9e9e9e;
    }

/* Optional helper alignment classes */
.max {
    min-width: 50px;
    padding-right: 25px;
    text-align: right;
}

/* Footer + links */
.availabilityFooter {
    font-size: 11px;
    text-align: center;
    color: #9e9e9e;
    height: 32px;
    line-height: 32px;
}

.availNow a {
    color: #9e9e9e;
    text-decoration: underline;
}

/* Errors */
div.error {
    background: #d32f2f;
    color: #fff;
    margin: 15px;
    padding: 10px 15px;
}

    div.error p {
        margin: 0;
        color: #fff;
    }

/* ---------- Enquiry / quote cards ---------- */
#enquirySection,
#quoteFormContainer .quoteCard {
    background: var(--card);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 35px;
}

#enquirySection {
    width: 100%;
    margin: 0 auto 35px auto;
    text-align: center;
}

    #enquirySection h3 {
        margin: 0 0 28px 0;
        font-size: 2rem;
        font-weight: 700;
        color: #222;
    }

/* Generic form groups */
.form-group {
    margin-bottom: 22px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #444;
    }

/* Inputs */
#enquirySection input,
#enquirySection select,
#quoteFormContainer input,
#quoteFormContainer select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
}

    #enquirySection input:focus,
    #enquirySection select:focus,
    #quoteFormContainer input:focus,
    #quoteFormContainer select:focus {
        border-color: var(--range-accent);
        box-shadow: 0 0 0 3px rgba(104,200,199,0.18);
    }

/* Selection blocks */
.selection-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 14px;
    font-weight: 600;
    font-size: 1.2rem;
    color: #222;
}

.selectionBlock {
    border-left: 1px solid #ddd;
    padding: 20px;
    margin: 0 auto 18px auto;
    text-align: center;
    width: 200px;
    max-width: 500px;
}

    .selectionBlock .selectionRow {
        display: block;
        margin: 12px 0;
    }

        .selectionBlock .selectionRow label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
        }

        .selectionBlock .selectionRow input,
        .selectionBlock .selectionRow select {
            width: 100%;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

/* Child ages */
.childAgesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

    .childAgesContainer .childAgesLabel {
        width: 100%;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .childAgesContainer input {
        width: 80px;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #ccc;
        text-align: center;
    }

/* Warnings */
.warning-message,
.villasWarning,
.adultsWarning,
.childrenWarning {
    color: var(--danger);
    font-size: 0.85rem;
}

.villasWarning,
.adultsWarning,
.childrenWarning {
    display: none;
}

/* Quote container */
#quoteFormContainer {
    display: none;
    margin: 35px auto 0 auto;
    max-width: 900px;
}

    #resetQuoteForm,
    #backToFirstForm,
    #quoteFormContainer #backToEnquiryX {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.6rem;
        color: #666;
    }

        #resetQuoteForm:hover,
        #backToFirstForm:hover,
        #quoteFormContainer #backToEnquiryX:hover {
            color: #000;
        }

/* Phone input */
.phoneInputWrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .phoneInputWrapper select {
        width: 90px;
    }

    .phoneInputWrapper input {
        flex: 1;
    }

#phoneNumber {
    width: 100px;
    padding: 4px 6px;
    font-size: 0.9rem;
}

#countryCode {
    width: 70px;
    padding: 4px 6px;
    font-size: 0.9rem;
}

/* ---------- Popup modal (simple) ---------- */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-box {
    background: #fff;
    padding: 20px 25px;
    max-width: 500px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.popup-link {
    color: #007BFF;
    text-decoration: underline;
}

.popup-close-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .popup-close-btn:hover {
        background: #0056b3;
    }

/* ---------- Flatpickr (minimal overrides) ---------- */
/* Range hover + selected styling */
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--range-accent) !important;
    color: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: var(--range-accent) !important;
    color: #fff !important;
    border-color: var(--range-accent) !important;
    box-shadow: none !important;
}

.flatpickr-day.startRange {
    border-radius: 50% 0 0 50% !important;
}

.flatpickr-day.endRange {
    border-radius: 0 50% 50% 0 !important;
}

/* Remove “today” special highlight */
.flatpickr-day.today,
.flatpickr-day.prevMonthDay.today,
.flatpickr-day.nextMonthDay.today {
    border-color: transparent !important;
    background: none !important;
    color: inherit !important;
}

/* Optional: remove calendar shadow if your design wants it flat */
.flatpickr-calendar {
    box-shadow: none !important;
}

    /* Hide year input spinner arrows */
    .flatpickr-calendar .numInputWrapper .arrowUp,
    .flatpickr-calendar .numInputWrapper .arrowDown {
        display: none !important;
    }

/* ---------- Mobile mode ---------- */
body.mobile-mode .availNow {
    max-width: 100%;
    padding: 12px;
}

body.mobile-mode .availabilitySearch {
    max-width: 100%;
    margin-bottom: 20px;
    width: 100%;
    flex-wrap: wrap;
}

body.mobile-mode .searchBarItem {
    flex: 1 1 auto;
    margin: 0 8px;
}

    body.mobile-mode .searchBarItem label {
        display: block;
        font-size: 22px;
        margin-bottom: 10px;
        color: #000;
    }

body.mobile-mode #startDate,
body.mobile-mode #priceRange,
body.mobile-mode #countryFilter {
    padding: 14px;
    height: 54px;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font-size: 20px;
}

body.mobile-mode .availabilityRange {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
}

body.mobile-mode #btnPrevious,
body.mobile-mode #btnNext {
    border: 2px solid #ccc;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #fff;
}

body.mobile-mode #lblDateRange {
    font-size: 24px;
    line-height: 52px;
}

body.mobile-mode .availabilityScrollWrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding-bottom: 12px;
}

body.mobile-mode .availabilityTable {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

    body.mobile-mode .availabilityTable td,
    body.mobile-mode .availabilityTable th {
        font-size: 20px;
        padding: 12px;
        min-width: 100px;
        white-space: nowrap;
        text-align: center;
    }

        body.mobile-mode .availabilityTable th.room-type,
        body.mobile-mode .availabilityTable td.room-type {
            min-width: 160px;
            width: 160px;
            white-space: normal;
        }

        body.mobile-mode .availabilityTable th.room-total,
        body.mobile-mode .availabilityTable td.room-total {
            min-width: 80px;
            width: 80px;
            text-align: center;
        }

body.mobile-mode .max {
    padding-right: 10px;
    text-align: right;
}

/* =========================
       Availability Header (match sample)
       ========================= */

/* Header layout: true left / true center / true right */
/* =========================
   Availability Header layout
   true left / true center / true right
   ========================= */

.availabilityHeaderBar {
    width: 100%; /* KEY: give it real width to center inside */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 18px auto;
    padding: 10px 0;
}

.availabilityHeaderLeft {
    justify-self: start;
    display: flex;
    align-items: center;
}

.availabilityHeaderCenter {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 14px;
}

.availabilityHeaderRight {
    justify-self: end;
    display: flex;
    align-items: center;
}


.availabilityDateWrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.availabilityDateLabel {
    margin: 0;
    font-size: 13px;
    line-height: 1;
    color: #6b6b6b;
}

.availabilityDateInput {
    width: 130px;
    height: 32px;
    border: 1px solid #c9c3bc;
    border-radius: 18px;
    padding: 0 30px 0 12px;
    font-size: 13px;
    outline: none;
    background: #fff;
}

.availabilityDateIcon {
    position: absolute;
    right: 8px;
    font-size: 16px;
    color: #6b6b6b;
    pointer-events: none;
}


.availabilityCircleBtn {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: none;
    background-color: darkslategray; /* close to your brown */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .availabilityCircleBtn .material-icons {
        font-size: 22px;
    }

.availabilityRangeText {
    font-size: 16px;
    color: #6b6b6b;
    white-space: nowrap;
}

.availabilityLegend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #6b6b6b;
}

.availabilityLegendItem {
    display: flex;
    align-items: center;
    gap: 8px;
}

.availabilityLegendSwatch {
    width: 14px;
    height: 14px;
    border-radius: 9px;
    border: 1px solid #c9c3bc;
    display: inline-block;
}


.availabilityLegendSwatchAvailable {
    background: #ffffff;
}

.availabilityLegendSwatchReserved {
    background: #c9c9c9;
}

.availabilityLegendSwatchUnavailable {
    background: #707070;
}

.availabilityDateInputWrap {
    position: relative; /* KEY: anchors the icon inside this wrapper */
    display: inline-flex;
    align-items: center;
}

.availabilityDateIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); /* centers vertically */
    font-size: 16px;
    color: #6b6b6b;
    pointer-events: none;
}

.availabilityDateInput {
    padding-right: 34px; /* must be >= icon width */
}

/* (Country)  */
.availabilityCountryHeading {
    background-color: #E7A640 !important; /* tweak if you want more/less orange */
    color: #ffffff !important;
}

/* (Region) */
.availabilityRegionHeading {
    background-color: #C9B06A !important; /* tweak if you want more/less yellow */
    color: #ffffff !important;
}

/* (Camp) */
.availabilityHeading {
    background-color: darkslategrey !important;
    color: #ffffff !important;
}

/* Optional: make the blocks feel closer to the sample */
.availabilityCountryHeading,
.availabilityRegionHeading,
.availabilityHeading {
    box-shadow: none !important; /* sample is flatter */
    border-radius: 0 !important;
}

/* =========================
   Mobile mode: fix header overflow + stack layout
   (uses body.mobile-mode, no screen widths)
   ========================= */

body.mobile-mode .availabilityHeaderBar {
    max-width: 100%;
    margin: 0 0 18px 0;
    padding: 10px 12px;
    /* override desktop 3-column grid */
    grid-template-columns: 1fr;
    gap: 12px;
    /* hard stop for horizontal bleed */
    overflow-x: hidden;
}

body.mobile-mode .availabilityHeaderLeft,
body.mobile-mode .availabilityHeaderCenter,
body.mobile-mode .availabilityHeaderRight {
    justify-self: start;
    width: 100%;
}

/* keep prev + range + next on one line but allow shrinking */
body.mobile-mode .availabilityHeaderCenter {
    justify-content: space-between;
}

body.mobile-mode .availabilityRangeText {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 0 10px;
}

/* legend must be allowed to wrap (this is the usual overflow cause) */
body.mobile-mode .availabilityLegend {
    flex-wrap: wrap;
    gap: 10px;
}

/* date label above input so it never forces width */
body.mobile-mode .availabilityDateWrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

body.mobile-mode .availabilityDateInputWrap {
    width: 100%;
}

body.mobile-mode .availabilityDateInput {
    width: 100%;
    max-width: 100%;
}

/* Center legend in mobile mode */
body.mobile-mode .availabilityHeaderRight {
    justify-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

body.mobile-mode .availabilityLegend {
    justify-content: center;
}