@import url('https://fonts.googleapis.com/css2?family=Tai+Heritage+Pro:wght@400;700&display=swap');
html,body{      overscroll-behavior-x: none;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
.bg-standard-gradient{
    background:linear-gradient(301deg, #b1b8cb91, #f3fcff);

}
.iti__search-input{min-height: 45px;}
h1,h2,h3,h4{font-family: 'Tai Heritage';}
h5,h6,*{font-family:'Google Sans Flex'}
.btn-primary {
    background: linear-gradient(0deg, #323232, #1e293e) !important;
    outline:none;
    border:none;
}
.bg-purple{background-color: rgb(213, 161, 255);}
#wiz-mobile-component label.ms-5 {
    margin-left: 35px !important;
}
.marquee {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    text-align: right;
    min-height: 18px;
    max-height: 18px;
    line-height: 18px;
}
body.login-page{user-select:none;height:100vh;background:repeating-linear-gradient(339deg, #f6ae0f 0px, #f0a80a 30px);}
body.login-page .login-box{max-width: 450px;}
.datepicker{box-shadow: 1px 13px 20px 12px rgb(0 0 0 / 20%);}
.datepicker__month-day--today {
    background: white !important;
    border-bottom: 2px solid #00cd00 !important;
    color: #050505 !important;
}
    .datepicker__buttons {top:0; transform: none;}

.datepicker__month-day--selected {
    color: #050505 !important;
}
@media(min-width: 768px) {
    .datepicker {
        width: 488px;
    }
}
.datepicker__inner {
    padding: 0px;
}

.datepicker__topbar {
    margin-bottom: 0px;
    position: relative;
    padding: 12px;
}
.datepicker__month-day {
    padding: 6px 6px;
}
.datepicker__info--selected{text-align: left;}

.datepicker__month-day--hovering {
    background-color: rgb(35 0 255) !important;
}

.datepicker__month-day--first-day-selected,
.datepicker__month-day--last-day-selected {
    color: white !important;
    background:#3858e9 !important;
    transform: scale(1.2);
}

#spinner {
    position: fixed;
    -webkit-user-select: none;
    user-select: none;
    top: 0;
    left:0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #00000091;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.toast-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-100px) !important
    }
#toaster {
    box-shadow: 0 7px 8px #00000026;
    left: 0;
    z-index: 9999 !important;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    margin: 0;
}
#wiz-instructions-content{font-size: 12px;}
#toaster.alert-error,#toaster.alert-danger {
    background: #f70050e3;
    box-shadow: 0 0 50px 11px #59001d93 !important;
    color: white;
    border: none;
}

 #toaster.alert-info,
 .alert-info {
    background: #475ced;
    color: white;
    box-shadow: 0 0 50px 11px rgba(36, 46, 117, .5) !important;
    border: none;
}

 #toaster.alert-success,
 .alert-success {
    background: rgb(0 185 68);
    color: white;
    border: none;
    box-shadow: 0 0 50px 11px #037d278a !important;
}

 #toaster.alert-warning {
    background: #ffc300;
    border: none;
    box-shadow: 0 0 50px 11px #9e79038a !important;
}
.hero-section {
    /* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1571896349842-33c89424de2d?q=80&w=1920'); */
    background-size: cover;
    background-position: center;
    object-fit: cover;

    color: white;
 
    min-height: 85vh;
}

.hero-image {
    z-index: -1;
}

.hero-section::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(1deg, #000000c3, transparent);
    z-index: 0;
    top: 0;
    left: 0;
    pointer-events: none;
}

.search-band {
    background: white;
    padding: 25px;
    /* margin-top: -60px; */
    color: #333;
    z-index: 3;
    position: relative;
}

.resort-card {
    transition: 0.3s all ease;
    border: none;
    overflow: hidden;
    min-width: 350px;
    box-shadow: 0 0 10px 15px #8c8c8c14 !important;

}
.resort-gallery-scroll{position: relative;}
 

.resort-card:hover {
    box-shadow: 0 0 10px 9px #8c8c8c14 !important;
}

.resort-img {
    height: 220px;
    object-fit: cover;
}

/* Styling to match Bootstrap 5 control height */
.litepicker {
    font-family: inherit !important;
}

.search-input-group {
    position: relative;
}

.search-input-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: #6c757d;
}

#dateRange {

    cursor: pointer;
    background-color: #fff;
}

.holiday-dot {
    width: 5px;
    height: 5px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 3px;
}

.air-datepicker-cell.holiday {
    color: #d32f2f;
    font-weight: 600;
}

.top-helper-band {
    height: 60px;
    color: white;
    z-index: 4;
}

.top-helper-band a {
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px black;
    opacity: 0.75;
    transition: 0.3 all ease;
}
.top-helper-band a:hover{
    opacity: 1;
}

.fixed-navbar {
    transform: translateY(60px);
    max-width: var(--bs-breakpoint-xl, 1200px);
    border-radius: 0.375rem;
    padding: revert;
    transition: transform 0.35s ease, max-width 0.35s ease, border-radius 0.35s ease, padding 0.35s ease;
}
.fixed-navbar.navbar-docked {
    transform: translateY(0);
    max-width: 100%;
    border-radius: 0;
    padding: 0;
}
.fixed-navbar.navbar-docked > .navbar {
    border-radius: 0 !important;
}
@media screen and (max-width:768px)
{
    .fixed-navbar {
        transform: translateY(30px);
    }
}

 .resort-fac-icon-holder{
    width: auto;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
 }
/* ── Chevron scroll system ─────────────────────────────────────────────────── */
.chevron-host {
    position: relative;
}
.resort-fac-icons,.room-fac-icons{min-height: 50px;}
 
.show-chevrons {
    overflow-x: auto;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / old Edge */
   
}
.show-chevrons::-webkit-scrollbar {
    display: none;               /* Chrome / Safari */
}
.scroll-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 26px;
    height: 26px;
    border: 0.5px solid #e6e6e6;
    border-radius: 8px;
    background: #a5a5a53d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding: 0;
    line-height: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.scroll-chevron.visible {
    opacity: 1;
    pointer-events: auto;
}
.scroll-chevron.chevron-left  { left:  -13px; }
.scroll-chevron.chevron-right { right: -13px; }
/* ──────────────────────────────────────────────────────────────────────────── */

.app-container::before {
    background: linear-gradient(180deg, #000000c7, transparent);
    width: 100%;
    position: absolute;
    content: "";
    width: 100%;
    height: 75px;
    pointer-events: none;
    z-index: 0;
}

.fineprint {
    font-size: 0.8rem;
}
.super-fineprint {
    font-size: 0.5rem;
}

.hero-message-container {
    margin-top: auto;
    padding-bottom: 1rem;
    text-align: left;
    z-index: 3;
    padding-left: 3rem;
}

.brand-logo {
    max-width: 75px;
}

/* ── Resort result cards ──────────────────────────────────────────────────── */
.resort-card {
    min-width: 0;   /* override old 350px so col-md-6 doesn't overflow */
}

 
.portal-icon-holder {
	background: #ebebeb;
	width: 30px;
	height: 30px;
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.9s ease;
}
.portal-icon-holder i{
    color: #0a58ca;
}
 .portal-icon-holder:hover {
	background: white !important;
	box-shadow: 0px 8px 9px #00000038;
} 

/* ── Filter panel ─────────────────────────────────────────────────────────── */
#filterPanel .card {
    font-size: 0.875rem;
}

#filterFacilitiesList .form-check-label {
    cursor: pointer;
}

/* ── Active filters bar ───────────────────────────────────────────────────── */
#activeFiltersBar .badge {
    font-size: 0.78rem;
    padding: 0.35em 0.65em;
}

/* ── Kayak-style two-panel results layout ─────────────────────────────────── */
.results-split {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.results-left {
    flex: 0 0 56%;
    max-width: 56%;
    min-width: 0;
}
.card{border:none}

.results-right {
    flex: 1;
    position: sticky;
    top: 100px;
    height: calc(100vh - 120px);
    overflow: hidden;
    min-width: 0;
}

#resortMap {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 991px) {
    .results-split { flex-direction: column; }
    .results-left  { flex: none; max-width: 100%; width: 100%; }
    .results-right { width: 100%; height: 320px; position: static; border-radius: 12px; }
    .results-right.d-none { display: flex !important; }
}

/* ── Horizontal resort card ─────────────────────────────────── */
.resort-card-h {
    display: flex;
    flex-direction: row;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
    background: #fff;
    min-width: 0;
}

.resort-card-h:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    /* border-color: rgba(0,0,0,.22); */
}

.resort-result-card.map-hovered .resort-card-h {
    border-color: #0d6efd;
    /* box-shadow: 0 0 0 2px #0d6efd40; */
}

.resort-card-h-img {
    flex: 0 0 155px;
    max-width: 200px;
    min-height: 200px;
    min-width: 250px;
}

.resort-card-h-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.resort-card-h-body {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* devices that support hover: animate the Select button in */
@media (hover: hover) {
    .resort-card-h .view-resort {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .resort-card-h:hover .view-resort {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575px) {
    .resort-card-h { flex-direction: column; }
    .resort-card-h-img { flex: none; max-width: 100%; min-height: 180px; height: 180px; }
}

/* ── Leaflet map price pins ────────────────────────────────────────────────── */
.resort-map-pin {
    background: #1a1a2e;
    color: #fff;
    font-size: 0.7rem;
    width: min-content;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    transform-origin: center bottom;
    user-select: none;
    position: relative;
    
}
.leaflet-marker-icon{width:auto!important;}

.resort-map-pin::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1a1a2e;
    transition: border-top-color 0.15s;
}

.resort-map-pin.active,
.resort-map-pin:hover {
    background: #0d6efd;
    transform: scale(1.25);
    box-shadow: 0 4px 12px rgba(13,110,253,.45);
    z-index: 1000;
}
.leaflet-marker-icon:has(> .resort-map-pin:hover) {
z-index:999999!important
}

.resort-map-pin.active::after,
.resort-map-pin:hover::after {
    border-top-color: #0d6efd;
}

#__geo-modal-host__ {
    z-index: 10000 !important;
    position: relative;
}
/* Resort card description — clamp to 2 lines */
.resort-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Formio field css */
.formio-component-datagrid .datagrid-table, .formio-component-datagrid .datagrid-table td, .formio-component-datagrid .datagrid-table th{padding:0!important;border:none!important; }
.formio-form label.col-form-label{font-size: 0.8rem!important;padding:0!important}
.formio-component-htmlelement p{margin-bottom:5px;}
.formio-form .form-control{min-height: 35px;}
#wizardFormio .alert-danger{display: none!important}
.visitor-num-badge{ color: #333;
    font-size: 11px;
    background: rgb(233 233 233);
    border-radius: 10px;
    padding: 4px 12px;
    display: inline-block;
    margin: 15px 0 10px 0;}
.visitor-num-badge p{margin:0}