@charset "UTF-8";

/* SkyBook.css CSS Document */
/* Development Project*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/

:root {
    --main-backgroundcolor: white;
    --main-barcolor: #fbab50;
    --main-fontcolor: #444444; /* Should be the same across all properties */
    --main-topheadercolor: #1b4f79;
    --main-buttoncolorlight: #96c3e8;
    --main-buttoncolordark: #82b7e3; /* One Shade Darker than the buttoncolorlight */
    --main-buttonmatchingcolor: #d5e7f6; /* Three shades lighter than the buttoncolorlight*/
    --main-tabmatchingcolor: #eaf3fb; /* Four shades lighter than the buttoncolorlight*/
    --main-loadercolor: #4394d6; /* Four shaedes darker than the buttoncolorlight */
    /* Reservation bar field tokens (safe for any hotel bar color) */
    --sb-bar-field-bg: rgba(255,255,255,0.96);
    --sb-bar-field-border: rgba(15,23,42,0.22);
    --sb-bar-field-border-hover: rgba(15,23,42,0.34);
    --sb-bar-field-text: rgba(15,23,42,0.92);
    --sb-bar-placeholder: rgba(15,23,42,0.48);
    --sb-bar-focus: rgba(37,99,235,0.45);
    --sb-bar-radius: 8px;
    --sb-bar-field-h: 36px;
    --sb-bar-pad-x: 10px;
    --sb-bar-gap-x: 14px;
    --sb-bar-gap-y: 8px;
    /* Tab Row*/
    --sb-tab-radius: 10px;
    --sb-tab-h: 34px;
    --sb-tab-font: 12.5px;
    --sb-tab-border: rgba(148,163,184,0.42);
    --sb-tab-divider: rgba(148,163,184,0.35);
    --sb-tab-shadow: 0 10px 24px rgba(15,23,42,0.10);
    --sb-tab-rail: rgba(255,255,255,0.86);
    /* Selected tab surface (theme-safe) */
    --sb-tab-active1: var(--main-buttoncolorlight);
    --sb-tab-active2: var(--main-buttoncolordark);
    /* Unselected tab surface */
    --sb-tab-inactive: rgba(255,255,255,0.55);
    --sb-tab-inactive-hover: rgba(255,255,255,0.78);
    --sb-tab-focus: rgba(37,99,235,0.22);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/*
 What was this in the body statement    ?
*/

/* Used for the SkyAlert Pop-Up Box*/
.ui-widget-overlay.ui-front { 
    opacity: .50;
}


body {
    background-color: var(--main-backgroundcolor);
    color: var(--main-fontcolor);
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    font-size: 16px;
}

input, select { font-size: 100%; }

.PageTop {
    background-color: var(--main-topheadercolor);
    width: 100%;
    border: 0px;
}

.PageBottom {
    text-align:center;
}

.HelpButton {
    cursor:pointer;
    position: absolute;
    float: right;
    top: 5px;
    right: 5px;
    z-index: 10;
    *-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
.SignInButton {
    cursor: pointer;
    position: absolute;
    float: right;
    top: 5px;
    right: 58px;
    z-index: 10;
    *-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}
/* Reservations Bar */

.ResvInfo {
    background-color: var(--main-barcolor);
    width: 100%;
    padding: 10px 12px 6px 12px;
    margin: auto;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
    /*position: -webkit-sticky;
    position: sticky;*/
    top: 0;
    /*z-index: 2;*/
}


.ResvInfoRow {
    display: flex;
    flex-flow: row wrap;
    height: calc(var(--sb-bar-field-h) + 4px);
}


.ResvInfoGrid {
    width: 285px;
    max-width: 320px;
    flex: 1 1 260px;
    margin-right: var(--sb-bar-gap-x);
    margin-bottom: var(--sb-bar-gap-y);
    border: 2px solid transparent;
    box-sizing: border-box;
}

.ResvInfoRow:last-child .ResvInfoGrid {
    margin-bottom: 0;
}

.BarBox {
    width: 100%;
    height: var(--sb-bar-field-h);
    box-sizing: border-box;

    border-radius: var(--sb-bar-radius);
    border: 1px solid var(--sb-bar-field-border);
    background: var(--sb-bar-field-bg);
    color: var(--sb-bar-field-text);

    padding: 0 var(--sb-bar-pad-x);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .BarBox::placeholder {
    color: var(--sb-bar-placeholder);
    opacity: 1;
}
/* Inputs/selects should match the unified field height */
input.BarBox {
    line-height: calc(var(--sb-bar-field-h) - 2px);
}

select.BarBox {
    height: var(--sb-bar-field-h);
    padding: 0 var(--sb-bar-pad-x);
}

.BarBoxDate {
    width: 100%;
    height: var(--sb-bar-field-h);
    box-sizing: border-box;

    border-radius: var(--sb-bar-radius);
    border: 1px solid var(--sb-bar-field-border);
    background: var(--sb-bar-field-bg);
    color: var(--sb-bar-field-text);

    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 0 var(--sb-bar-pad-x);
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.TextBoxDate {
    all: unset;
    width: 260px;
    height: 100%;
    color: inherit;
    text-align: left;
}

.TextBoxDateIcon {
    color: #fff;
    fill: gray;
    width: 18px;
    height: 18px;
    padding: 10px;
}

/* Reservations Bar interactions + responsive layout */
.BarBox:hover,
.BarBoxDate:hover{
    border-color: var(--sb-bar-field-border-hover);
}

.BarBox:focus,
.BarBox:focus-visible{
    outline: none;
    border-color: rgba(37,99,235,0.65);
    box-shadow: 0 0 0 3px var(--sb-bar-focus);
}

.BarBoxDate:focus-within{
    border-color: rgba(37,99,235,0.65);
    box-shadow: 0 0 0 3px var(--sb-bar-focus);
}

/* Mobile: allow full-width fields, keep spacing consistent */
@media (max-width: 520px){
    .ResvInfoGrid{
        flex: 1 1 100%;
        max-width: none;
        margin-right: 0;
    }
}

.PromoDescription {
    display: inline-block;
    margin-top: 4px;
    margin-left: 4px;
    font-size: 9pt;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.45);
    color: inherit;
}
.RVRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    border-bottom: 2px solid var(--main-barcolor);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #f2f2f2;
}

.RVGrid {
    display: grid;
    padding: 2px;
    grid-template-areas: 'column1 column2 column3';
    width: 100%;
}

.RVColumn1 {
    grid-area: column1;
    text-align: right;
    padding-right: 5px;
    white-space:nowrap;
}

.RVColumn2 {
    grid-area: column2;
    text-align: left;
}

.RVColumn3 {
    grid-area: column3;
    text-align: right;
    white-space:nowrap;
}

#divRoomExtras {
    font-size:13px;
    text-align: center;
    padding: 3px;
}
.divExtra {
    display: flex;
    flex-flow: row wrap;
}
.divExtraCell {
    width:50%;
}

/* Modal Pop-up */
.ModalInfo {
    background-color: var(--main-barcolor);
    width: 100%;
    border: 5px solid transparent;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.GuestsGrid {
    display: grid;
    padding: 6px;
    grid-template-columns: max-content max-content;
    grid-template-areas: 'rooms1 rooms2' 'adults1 adults2' 'youths1 youths2' 'children1 children2' 'pets1 pets2';
    justify-content:center;
}
.actGrid
{
    padding-left:30px;
}
.actCheckBox {
}

.Rooms1 {
    grid-area: rooms1;
    text-align: right;
    padding: 4px;
    white-space:nowrap;
}

.Rooms2 {
    grid-area: rooms2;
    text-align: left;
    padding: 4px;
}

.Adults1 {
    grid-area: adults1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}

.Adults2 {
    grid-area: adults2;
    text-align: left;
    padding: 2px;
}

.Youths1 {
    grid-area: youths1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}

.Youths2 {
    grid-area: youths2;
    text-align: left;
    padding: 2px;
}

.Children1 {
    grid-area: children1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}

.Children2 {
    grid-area: children2;
    text-align: left;
    padding: 2px;
}
.Pets1 {
    grid-area: pets1;
    text-align: right;
    padding: 2px;
    white-space: nowrap;
}
.Pets2 {
    grid-area: pets2;
    text-align: left;
    padding: 2px;
}

.GuestsDone {
    padding: 13px;
    text-align: center;
    vertical-align: bottom;
}

.ResvBody {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-flow: row wrap;
    border: 0px;
    margin: auto;
    justify-content: center;
    z-index: 1;
    min-width: 400px;
    background-color: #f2f2f2;
}

.ResvTabs {
    min-width: 400px;
    /*max-width: 600px;$$$*/
    position: relative;
    /*flex: 1;
    -ms-flex: 1; 
    -moz-box-flex: 1;
    -webkit-flex: 1;
    align-items: baseline;*/
    border-bottom: 3px solid transparent;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}
.ErrorText {
    font-weight: bold;
    color: red !important;
}

/* =========================================================================================
   Reservation Summary (Itinerary) — modern, calm, theme-friendly (FULL REPLACEMENT)
   ========================================================================================= */
.Itinerary {
    box-sizing: border-box;
    margin-top: 6px;
    padding-left: 6px;
}

/* Card */
.ItineraryBody {
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.32);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
    overflow: hidden;
    box-sizing: border-box;
}

/* Header bar */
.ItineraryTitle {
    background: linear-gradient( to bottom, color-mix(in srgb, var(--main-barcolor,#3b82f6) 22%, white), color-mix(in srgb, var(--main-barcolor,#3b82f6) 12%, white) );
    color: rgba(15,23,42,0.85) !important;
    font-weight: 700;
    font-size: 12.8px;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(148,163,184,0.25);
}

/* Optional name row */
.ItineraryCellFullName {
    padding: 10px 14px 0;
    color: rgba(15,23,42,0.72);
    font-weight: 650;
    font-size: 13px;
}

/* Main content grid */
.ItineraryCell {
    padding: 12px 14px 12px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 12px;
    row-gap: 8px;
    align-items: baseline;
}

/* Labels */
.ItineraryCellTitleA,
.ItineraryCellTitleD,
.ItineraryCellTitleN,
.ItineraryCellTitleAdults,
.ItineraryCellTitleYouths,
.ItineraryCellTitleChildren,
.ItineraryCellTitlePets,
.ItineraryCellTitleRoom,
.ItineraryCellTitleTotal {
    color: rgba(15,23,42,0.62);
    font-weight: 700;
    font-size: 13px;
}

/* Values */
.ItineraryCellDetailA,
.ItineraryCellDetailD,
.ItineraryCellDetailN,
.ItineraryCellDetailAdults,
.ItineraryCellDetailYouths,
.ItineraryCellDetailChildren,
.ItineraryCellDetailPets,
.ItineraryCellDetailRoom {
    color: rgba(15,23,42,0.88);
    font-weight: 600;
    font-size: 13px;
}

.ItineraryCellDetailRoom {
    line-height: 1.25;
}

/* Guests section divider + heading */
.ItineraryCellDetailGuests {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(148,163,184,0.18);
    color: rgba(15,23,42,0.75);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.01em;
}

/* ---------- TOTAL SECTION ---------- */

.ItineraryCellLine {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(148,163,184,0.18);
}

/* Total label (column 1) */
.ItineraryCellTitleTotal {
    position: relative;
    margin-top: 6px;
}

/* Total value (column 2) */
.ItineraryCellDetailTotal {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: rgba(15,23,42,0.92); /* neutral readable color */
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Button row */
.ItineraryCell > div:has(.ItineraryCellDetailTotalButton) {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

/* Button */
.ItineraryCellDetailTotalButton {
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,0.18);
    background: rgba(255,255,255,0.92);
    color: rgba(15,23,42,0.84);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

    .ItineraryCellDetailTotalButton:hover {
        background: rgba(248,250,252,0.95);
        border-color: rgba(15,23,42,0.28);
        box-shadow: 0 10px 22px rgba(15,23,42,0.12);
    }

    .ItineraryCellDetailTotalButton:active {
        transform: translateY(1px);
    }

    .ItineraryCellDetailTotalButton:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.16);
    }

/* Notes / disclaimers */
.ItineraryText2 {
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(148,163,184,0.18);
    color: rgba(15,23,42,0.62);
    font-size: 12.5px;
    line-height: 1.35;
    font-style: italic;
}

/* Small screens */
@media (max-width:520px) {

    .ItineraryCell {
        grid-template-columns: 86px 1fr;
        padding: 10px 12px 10px;
        row-gap: 7px;
    }

    .ItineraryCellDetailTotal {
        font-size: 16.5px;
    }
}
/*END Reservation Summary*/

.ConfCell {
    display: inline-block;
    border: 3px solid transparent;
    text-align: center;
    width: 100%;
}

.ConfCellDetail {
    font-weight: bold;
    display: inline-block;
    border: 3px solid transparent;
    text-align: center;
    width:100%;
}
.ConfCellResv {
    font-weight: bold;
    display: inline-block;
    padding-top: 20px;
    padding-bottom:10px;
    text-align: center;
    width: 100%;
}
/* =========================================================================================
   Guest Tab (pnlGeneral) — layout + controls
   ========================================================================================= */

/* Form rows (scoped so other pages aren't affected) */
#pnlGeneral .GeneralCell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 4px 0;
    margin: 0;
    max-width: 600px; /* keeps it elegant, not too wide */
}

/* Respect your nowrap rows (First/Last, City/State, card month/year/cvv) */
#pnlGeneral .GeneralCell[style*="white-space:nowrap"],
#pnlGeneral .GeneralCell[style*="white-space: nowrap"]{
    flex-wrap: nowrap;
}

/* Section separators */
#pnlGeneral .GeneralLine{
    height: 1px;
    background-color: rgba(148,163,184,0.28);
    margin: 14px 0;
    border: 0;
}

#pnlGeneral .GeneralCellDisclaimer {
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 4px 0;
    margin: 0;
    max-width: 600px; /* keeps it elegant, not too wide */
}

/* Comments row */
#pnlGeneral .GeneralCellComments{
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}
#pnlGeneral #SkyBook_txtComments{
    font-size: 13px;
    width: 95%;
    height: 50px;
}

/* Fixed action bar (Back / Book it!) */
#pnlGeneral .GeneralCellBookIt{
    background-color: var(--main-barcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 20;

    padding: 8px 10px;
    gap: 10px;
    box-sizing: border-box;

    /* subtle separation from content */
    box-shadow: 0 -10px 22px rgba(15,23,42,0.10);
}
.ItineraryText {
    font-size: 13px;
    font-style: italic;
}

.ChevronLeft {
    position: absolute;
    top: 45%;
    left: 5%;
    cursor: pointer;
    width: 36px;
    height: 36px;
}

.ChevronRight {
    position: absolute;
    top: 45%;
    left: 90%;
    cursor: pointer;
    width: 36px;
    height: 36px;
}
.ChevronLeft,
.ChevronRight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
    cursor: pointer;
}

.ChevronLeft {
    left: 10px;
}

.ChevronRight {
    right: 10px;
}

    .ChevronLeft img,
    .ChevronRight img {
        width: 18px;
        height: 18px;
    }

.ImagePopUp {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* or object-fit: contain; */
}

.ImageDone {
    position: absolute;
    padding: 13px;
    width: 100%;
    text-align: center;
    top: 0px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 4;
}

/* Modal Content */
.modal-content {
    background-color: var(--main-backgroundcolor);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
}

/* Modal Content */
.modal-content-rooms {
    position: relative;
    margin: auto;
    max-height: 70%;
    width: 80%;
    height: 80%;
    border:solid 2px white;
}

.modal-projected {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    padding-bottom: 50px;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 4;
}

.modal-content-projected {
    background-color: var(--main-backgroundcolor);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    overflow: auto; /* Enable scroll if needed */
}

/* =========================================================================================
   Projected Balance Modal (modalProjected) — modern card (no table changes required)
   ========================================================================================= */

#modalProjected.modal-projected {
    inset: 0;
    padding-top: 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

    /* When shown via JS display='block' */
    #modalProjected.modal-projected[style*="display: block"],
    #modalProjected.modal-projected[style*="display:block"] {
        display: flex !important;
    }

/* Card */
#modalProjected .modal-content-projected {
    width: min(760px, 94vw);
    max-height: min(560px, 86vh);
    padding: 0 !important;
    margin: 0;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(148,163,184,0.35);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(15,23,42,0.32);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Header */
#modalProjected .ModalInfo {
    margin: 0;
    padding: 16px 56px 16px 22px; /* room for close button */
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    background: rgba(248,250,252,0.95);
    border-top: 4px solid var(--main-barcolor);
    border-bottom: 1px solid rgba(148,163,184,0.25);
    color: rgba(15,23,42,0.86);
}

/* Close “X” */
#modalProjected .close {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: rgba(15,23,42,0.55);
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
}

    #modalProjected .close:hover {
        background: rgba(148,163,184,0.18);
        color: rgba(15,23,42,0.75);
    }

/* Body scroll region so it doesn't become a giant sheet */
#modalProjected #divProjected.projGrid {
    padding: 12px 18px 6px !important;
    overflow-y: auto;
    overflow-x: hidden; /* key: prevents x-scroll + scrollbar artifacts */
    max-height: calc(min(560px, 86vh) - 140px); /* header + footer */
    /*    mask-image: linear-gradient(to bottom, transparent 0px, #000 14px, #000 calc(100% - 14px), transparent 100%);
*/
}
    #modalProjected #divProjected.projGrid::-webkit-scrollbar {
        width: 10px;
    }

    #modalProjected #divProjected.projGrid::-webkit-scrollbar-thumb {
        background: rgba(100,116,139,0.35);
        border-radius: 10px;
        border: 2px solid rgba(255,255,255,0.85);
    }

    #modalProjected #divProjected.projGrid::-webkit-scrollbar-track {
        background: transparent;
    }
/* TABLE styling (allowed even though markup is fixed)*/
#modalProjected #divProjected table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: rgba(15,23,42,0.82);
}

/* Cell padding + row separators */
#modalProjected #divProjected td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148,163,184,0.20);
    vertical-align: top;
}

/* Header row look (first <tr>) */
#modalProjected #divProjected tr:first-child td {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(241,245,249,0.85);
    font-weight: 800;
    border-bottom: 1px solid rgba(148,163,184,0.30);
}

/* Remove the underline look from <u> in headers while keeping emphasis */
#modalProjected #divProjected tr:first-child u {
    text-decoration: none;
}

/* Zebra striping (skips header visually because it has its own background) */
#modalProjected #divProjected tr:nth-child(even) td {
    background: rgba(248,250,252,0.65);
}

/* Make the "Folio Balance" row stand out a bit (last row) */
#modalProjected #divProjected tr:last-child td {
    background: rgba(241,245,249,0.85);
    border-bottom: 0;
}

/* Footer */
#modalProjected .GuestsDone {
    padding: 14px 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(148,163,184,0.20);
    background: rgba(255,255,255,0.98);
}

    #modalProjected .GuestsDone input.WebButton {
        min-width: 140px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 0 !important;
    }

.modal-calendar {
    display: none;
    position: fixed; /* Stay in place */
    float: left;
    left: 5px;
    top: 10px;
    z-index: 10; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

.modal-content-calendar {
    background-color: #FFFFFF;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 18px 50px rgba(15,23,42,0.22);
    margin: auto;
    position: fixed;
    z-index: 5;
    /* width logic (mobile responsive) */
    width: 96vw;
    max-width: 325px;
    /* scrolling behavior */
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* mobile smooth scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    /* footer spacing fix */
    padding-bottom: 0;
}

.modal-site {
    display: none;
    position: fixed; /* Stay in place */
    float: left;
    left: 5px;
    top: 10px;
    z-index: 10; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

.modal-content-site {
    background-color: #FFFFFF;
    margin: auto;
    border: 1px solid #888;
    /*position: fixed;*/
    overflow: auto; /* Enable scroll if needed */
    z-index: 5;
    /*width: 350px;*/

    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* =========================================================================================
   Activity Modal (modalActivity) — modern card popup (scoped, won't affect other modals)
   ========================================================================================= */

/* Center it like the newer popups (JS uses display='block') */
#modalActivity.modal {
    inset: 0;
    padding-top: 0 !important; /* kill legacy 100px top padding */
    display: none; /* default hidden */
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

    /* When shown via JS display='block' */
    #modalActivity.modal[style*="display: block"],
    #modalActivity.modal[style*="display:block"] {
        display: flex !important;
    }

/* Card shell */
#modalActivity .modal-content {
    width: min(420px, 92vw);
    padding: 0 !important; /* override legacy padding:20px */
    margin: 0 auto;
    background: rgba(255,255,255,0.98);
    border: 1px solid rgba(148,163,184,0.35);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(15,23,42,0.32);
    overflow: hidden;
    box-sizing: border-box;
}

/* Header (matches the newer modal header vibe) */
#modalActivity .ModalInfo {
    width: 100%;
    margin: 0;
    border: 0;
    padding: 18px 24px; /* more breathing room */
    font-size: 15px; /* slightly larger for time readability */
    font-weight: 700;
    line-height: 1.4; /* prevents vertical squish */
    text-align: left;
    letter-spacing: .01em;
    background: rgba(248,250,252,0.95);
    border-top: 4px solid var(--main-barcolor);
    border-bottom: 1px solid rgba(148,163,184,0.25);
    color: rgba(15,23,42,0.86);
}

/* Body / list area */
#modalActivity #divAct.actGrid {
    padding: 10px 22px 10px !important; /* override the legacy 30px-left */
    margin: 0;
}

/* Checkbox row styling (your JS builds: input + label + <br>) */
#modalActivity input.actCheckBox {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: 0 10px 10px 0;
    accent-color: #475569;
    cursor: pointer;
}

    #modalActivity input.actCheckBox:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
        border-radius: 4px;
    }

    #modalActivity input.actCheckBox + label {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        font-size: 13px;
        font-weight: 600;
        color: #334155;
        cursor: pointer;
        user-select: none;
        margin: 0 0 10px 0; /* creates row spacing even with <br> */
    }

/* Footer (Done area) */
#modalActivity .GuestsDone {
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(148,163,184,0.20);
    background: rgba(255,255,255,0.98);
}

    /* Done button (keep your .WebButton theme, but modernize shape/size here) */
    #modalActivity .GuestsDone input.WebButton {
        min-width: 140px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 0 !important;
        transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
    }

        #modalActivity .GuestsDone input.WebButton:hover {
            opacity: 0.92;
            box-shadow: 0 10px 24px rgba(0,0,0,0.20);
        }

        #modalActivity .GuestsDone input.WebButton:active {
            transform: translateY(1px);
        }

/* =========================================================================================
   Guests Modal Overlay
   ========================================================================================= */

.GuestsModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

    /* When shown via JS display='block' */
    .GuestsModal[style*="display: block"],
    .GuestsModal[style*="display:block"] {
        display: flex !important;
    }

/* =========================================================================================
   Guests Modal Card
   ========================================================================================= */

.GuestsModalCard {
    width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    font-size: 10.5pt; /* slightly refined */

    background: rgba(255,255,255,0.98);
    border-radius: 22px;
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 28px 80px rgba(15,23,42,0.32);
    overflow: hidden;
}

/* =======================
Header
======================= */

.GuestsModalCard .ModalInfo {
    padding: 14px 20px;
    font-size: 12.5pt;
    font-weight: 700;
    background: rgba(248,250,252,0.95);
    border-bottom: 1px solid rgba(148,163,184,0.25);
    /* Top accent stripe */
    border-top: 4px solid var(--main-barcolor);
}


/* =======================
Grid Layout
======================= */

.GuestsModalCard .GuestsGrid {
    display: grid;
    /* Fixed label column for visual balance */
    grid-template-columns: 110px 1fr;
    row-gap: 6px;
    column-gap: 18px;
    padding: 22px 24px;
    align-items: center;
}


/* Labels */

.GuestsModalCard label {
    font-weight: 600;
    font-size: 10.5pt;
    text-align: right;
    white-space: nowrap;
    opacity: 0.85;
}


/* Select Controls */

.GuestsModalCard select {
    width: 100%;
    max-width: 190px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.55);
    background: rgba(255,255,255,0.95);
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .GuestsModalCard select:hover {
        border-color: rgba(100,116,139,0.7);
    }

    .GuestsModalCard select:focus {
        outline: none;
        border-color: var(--main-barcolor);
        box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
    }


/* =======================
Footer
======================= */

.GuestsModalCard .GuestsDone {
    padding: 18px 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(148,163,184,0.2);
    background: rgba(255,255,255,0.98);
}


    /* Scoped Done button */

    .GuestsModalCard .GuestsDone input[type="button"] {
        min-width: 140px;
        height: 38px;
        border-radius: 12px;
        border: none;
        font-size: 13px;
        background: var(--main-buttoncolorlight);
        cursor: pointer;
        transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
    }

        .GuestsModalCard .GuestsDone input[type="button"]:hover {
            opacity: 0.92;
            box-shadow: 0 10px 24px rgba(0,0,0,0.20);
        }

        .GuestsModalCard .GuestsDone input[type="button"]:active {
            transform: translateY(1px);
        }

.SiteBook {
    padding: 5px;
    text-align: center;
    vertical-align: bottom;
}

.projGrid {
    font-size: 10pt;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.AvailBuilding {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8f9fb;
    border-bottom: 1px solid #e3e7ee;
    font-size: 15px;
}

    .AvailBuilding label {
        margin: 0;
        font-weight: 600;
        color: #2f3b52;
        white-space: nowrap;
    }

    .AvailBuilding select {
        min-width: 180px;
        height: 38px;
        padding: 0 40px 0 12px;
        border: 1px solid #cfd6e4;
        border-radius: 8px;
        background-color: #fff;
        color: #4b5563;
        font-size: 15px;
        line-height: 1.2;
        cursor: pointer;
        outline: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .AvailBuilding select:hover {
            border-color: #aeb8cb;
        }

        .AvailBuilding select:focus {
            border-color: var(--main-barcolor);
            box-shadow: 0 0 0 3px rgba(240, 165, 74, 0.18);
        }

@media (max-width: 640px) {
    .AvailBuilding {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 10px 12px;
        gap: 8px;
    }

        .AvailBuilding label {
            width: 100%;
        }

        .AvailBuilding select {
            width: 100%;
            min-width: 0;
        }
}

.AvailTable {
    border-collapse: collapse;
    background-color: #f2f2f2;
    /*    border: 5px solid transparent;
*/
}
.AvailTR {
    display: flex;
    flex-flow: row wrap;
    background-color: white;
    grid-template-columns: auto auto;
    grid-template-areas: 'td1 td2';
    font-size: 15px;
    color: var(--main-fontcolor);
    width: 100%;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden; /* ensures rounded corners clip images/content */
    transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}

.AvailTD1 {
    grid-area: td1;
    max-width: 450px;
    background-color: white;
    border-radius: 4px 0px 0px 4px;
}

.AvailTD2 {
    grid-area: td2;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    max-width: 450px;
    background-color: white;
    border-radius: 0px 4px 4px 0px;
    width: 100%;
}
.AvailTD2Scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 210px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(120,130,145,0.45) transparent;
}

    /* Chrome / Edge / Safari */
    .AvailTD2Scroll::-webkit-scrollbar {
        width: 6px;
    }

    .AvailTD2Scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .AvailTD2Scroll::-webkit-scrollbar-thumb {
        background: rgba(120,130,145,0.35);
        border-radius: 10px;
    }

        .AvailTD2Scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(120,130,145,0.7);
        }

.AvailImage {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    height:300px;
    width: auto;
    height: auto;
    border-radius: 4px 0px 0px 4px;
}
.AvailTRSelected {
    border: 2px solid var(--main-buttoncolordark);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
}
.AvailMultiButton {
    background-color: var(--main-barcolor);
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    z-index: 2;
    padding-top: 5px;
    padding-bottom: 5px;
}

.AvailTH {
    background-color: silver;
    padding: 2px;
}
.AvailCellMinNights {
    font-size: 10pt;
    font-style: italic;
    color: darkred;
    vertical-align: bottom;
    padding: 3px;
    text-align: right;
    padding-right: 10px;
}
.AvailCellRoomInfo {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 8px;
}

/* Icons meta row under room name (guests/beds) */
.AvailCellRoomMeta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 6px;
    color: rgba(15,23,42,0.62); /* neutral */
    font-size: 13px;
    font-weight: 650;
}

    .AvailCellRoomMeta .MetaItem {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 1;
    }

    .AvailCellRoomMeta .MetaIcon {
        width: 18px;
        height: 18px;
        fill: currentColor; /* inherits neutral color */
        opacity: 0.85;
    }

    .AvailCellRoomMeta .MetaValue {
        color: rgba(15,23,42,0.80);
        font-weight: 700;
    }

    /* subtle separator dot (not a hard pipe) */
    .AvailCellRoomMeta .MetaSep {
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: rgba(148,163,184,0.75);
    }

.AvailCellADR {
    font-size: 13px;
    padding-left: 10px;
    font-weight:bold;
}
.AvailCellRoomName {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px; /* increased from 2px */
    line-height: 1.2;
    letter-spacing: .01em;
}
.AvailCellRoomDescript {
    margin-top: 6px;
    margin-bottom: 14px; /* increased */
    font-size: 14px;
    line-height: 1.45;
    color: rgba(15,23,42,.72);
    max-width: 720px;
}
.AvailCellRoomFeatLoc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px; /* was 20px */
    margin-top: 10px; /* slightly increased */
}
@media (max-width: 700px) {
    .AvailCellRoomFeatLoc {
        grid-template-columns: 1fr;
    }
}
/* Feature list rows: add breathing room */
.AvailCellRoomFeatLocCol {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 2px 0; /* adds separation between rows */
}

    /* Optional: slightly reduce icon visual weight */
    .AvailCellRoomFeatLocCol .AvailFeatIcon svg {
        width: 15px;
        height: 15px;
    }

.AvailCellRateDescript {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    text-align: left;
    max-width: 100%;
}
.AvailCellTotalLine {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-top: 1px solid rgba(148,163,184,0.25);
    background: rgba(248,250,252,0.65);
    border-radius: 8px;
}

.AvailCellRateRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.AvailCellTotal {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.AvailCellTotalDescription {
    color: #5b6b82;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.15;
}

.AvailCellTotalADR {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
}

.AvailCellRoomTotal {
    font-style: italic;
    font-size: 12px;
    color: rgba(15,23,42,0.58);
    white-space: nowrap;
}

.AvailCellRoomNum {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
}

.AvailCellRoomNumRow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.AvailCellRoomNumLabel {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #5b6b82;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.RoomQtySelect {
    height: 32px;
    min-width: 92px;
    max-width: 160px;
    padding: 0 28px 0 10px;
    border: 1px solid #c7d2e0;
    border-radius: 8px;
    background-color: #ffffff;
    color: #1e2b3c;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 12px) 13px, calc(100% - 8px) 13px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

    .RoomQtySelect:hover {
        border-color: #94a3b8;
        background-color: #f8fafc;
    }

    .RoomQtySelect:focus {
        outline: none;
        border-color: #7aa7d9;
        box-shadow: 0 0 0 3px rgba(122,167,217,0.18);
    }
    
.AvailCellButton {
    flex: 0 0 auto;
}
/* container aligns it nicely under the price row */
.ShowMoreRates {
    display: flex;
    justify-content: flex-end;
    padding-right: 6px;
}

/* the link itself */
.ShowMoreRatesLink,
.ShowMoreRatesText { /* include your old span class so it still works */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(15,23,42,.65);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}

    .ShowMoreRatesLink:hover,
    .ShowMoreRatesText:hover {
        color: rgba(15,23,42,.85);
        background: rgba(15,23,42,.06); /* subtle neutral hover pill */
    }

/* arrow nudge */
.ShowMoreRatesArrow {
    display: inline-block;
    transform: translateX(0);
    transition: transform .12s ease;
    margin-left: 2px;
}

.ShowMoreRatesLink:hover .ShowMoreRatesArrow,
.ShowMoreRatesText:hover .ShowMoreRatesArrow {
    transform: translateX(2px);
}

/* focus ring for keyboard nav (important if you use <a>) */
.ShowMoreRatesLink:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15,23,42,.15);
}

    /* =========================================================================================
   Shared "panel body" look for ALL tabs (safe: does not change Rooms wrapping behavior)
   ========================================================================================= */
.TabUDFBody{
    background: #fff;
    color: var(--main-fontcolor);
    border: 1px solid rgba(148,163,184,0.30);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15,23,42,0.10);
    /* Keep neutral: Rooms relies on width; we control padding per-panel below */
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* =========================================================================================
   Panels that should have inner padding (Guest/Amenities/Activities/Confirm)
   ========================================================================================= */
#pnlGeneral .TabUDFBody,
#pnlAmenity .TabUDFBody,
#pnlActivity .TabUDFBody,
#pnlConf .TabUDFBody{
    padding: 16px 18px 18px;
}

#pnlAmenity {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

    #pnlAmenity .TabUDFBody {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

/* =========================================================================================
   Rooms panel: keep left/right padding OFF so the room text stays up to the right of the image
   ========================================================================================= */
#pnlAvail .TabUDFBody {
    padding: 0;
    overflow: visible;
}

/* Guest panel: constrain width on large screens so it doesn't look "lost" in whitespace */
#pnlGeneral .TabUDFBody {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    /* Leave room so content doesn't hide behind the fixed Book It bar */
    padding-bottom: 90px;
    padding: 22px 28px; /* slightly more horizontal presence */
}


/* Inputs/selects/textarea in Guest panel */
#pnlGeneral .TabUDFBody input[type="text"],
#pnlGeneral .TabUDFBody select,
#pnlGeneral .TabUDFBody textarea{
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.55);
    background: rgba(255,255,255,0.96);
    color: rgba(15,23,42,0.90);
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#pnlGeneral .TabUDFBody textarea{
    height: auto;
    line-height: 1.35;
    padding: 10px;
    min-height: 72px;
}

/* Hover */
#pnlGeneral .TabUDFBody input:hover,
#pnlGeneral .TabUDFBody select:hover,
#pnlGeneral .TabUDFBody textarea:hover{
    border-color: rgba(100,116,139,0.75);
}

/* Focus */
#pnlGeneral .TabUDFBody input:focus,
#pnlGeneral .TabUDFBody select:focus,
#pnlGeneral .TabUDFBody textarea:focus{
    outline: none;
    border-color: rgba(37,99,235,0.75);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

/* Placeholder tone */
#pnlGeneral .TabUDFBody input::placeholder,
#pnlGeneral .TabUDFBody textarea::placeholder{
    color: rgba(15,23,42,0.45);
}



/* =========================================================================================
   SkyBook Tabs Row Modernization
   Active  = Selected tab (your SetTab sets this)
   InActive = Not selected
   ========================================================================================= */

/* ===== TAB ROW CONTAINER ===== */
/* =========================================================================================
   SkyBook Tabs Row Modernization
   Active  = Selected tab (your SetTab sets this)
   InActive = Not selected
   ========================================================================================= */

/* ===== TAB ROW CONTAINER ===== */
.TabRow {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 10px 24px rgba(15,23,42,0.10);
    overflow: hidden;
    margin-bottom: 5px;
    margin-top: 5px;
}


    /* ===== ALL TAB CELLS ===== */
    .TabRow > div {
        position: relative;
        height: 34px;
        line-height: 34px;
        font-size: 13px;
        letter-spacing: 0.01em;
        padding: 0 12px;
        text-align: center;
        user-select: none;
        transition: background-color .15s ease, color .15s ease, transform .08s ease;
        /* Remove legacy bevel styling */
        border: 0 !important;
        box-shadow: none !important;
    }


        /* Vertical dividers between tabs */
        .TabRow > div + div {
            box-shadow: -1px 0 0 0 rgba(148,163,184,0.30);
        }


/* ===== INACTIVE (NOT SELECTED) ===== */
.TabUDFInActive {
    background: transparent;
    color: rgba(15,23,42,0.65) !important;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .TabUDFInActive:hover {
        background: rgba(0,0,0,0.04);
    }

    .TabUDFInActive:active {
        transform: translateY(1px);
    }


/* ===== ACTIVE (SELECTED TAB) ===== */
.TabUDFActive {
    background: transparent;
    color: rgba(15,23,42,0.92) !important;
    font-weight: 700;
    white-space: nowrap;
}

    /* Accent underline indicator */
    .TabUDFActive::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 5px;
        height: 3px;
        border-radius: 99px;
        background: var(--main-barcolor);
    }


/* ===== FIRST & LAST TAB CORNER ROUNDING ===== */
#AvailTabCell {
    border-radius: 10px 0 0 10px;
}

#ConfTabCell {
    border-radius: 0 10px 10px 0;
}


/* ===== KEYBOARD ACCESSIBILITY ===== */
.TabRow > div:focus,
.TabRow > div:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(37,99,235,0.35), 0 0 0 3px rgba(37,99,235,0.20) !important;
}


/* ===== MOBILE POLISH ===== */
@media (max-width: 520px) {
    .TabRow {
        padding: 6px;
    }

        .TabRow > div {
            font-size: 12px;
            padding: 0 8px;
        }
}

.TabUDF {
}

#pnlAvail {
}
    
#pnlGeneral {
}
/* =========================================================================================
   Confirmation panel (pnlConf) — modern spacing + readable hierarchy
   ========================================================================================= */

#pnlConf .TabUDFBody {
    /* keep it centered and not super wide */
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 26px;
    text-align: center;
}

/* Primary message lines */
#pnlConf .ConfCell {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(15,23,42,0.78);
}

    /* Your markup uses blank ConfCell + <br/> as spacers — this makes it behave */
    #pnlConf .ConfCell + br {
        display: none; /* remove the “double gap” feel */
    }

    #pnlConf .ConfCell:empty,
    #pnlConf .ConfCell:has(> :only-child:empty) {
        display: none; /* hides the &nbsp; spacer rows */
    }

    /* Add consistent spacing between the real message lines */
    #pnlConf .ConfCell:not(:empty) + .ConfCell:not(:empty) {
        margin-top: 14px;
    }

    /* Confirmation number emphasis */
    #pnlConf .ConfCell b {
        display: inline-block;
        margin-left: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.02em;
        color: rgba(15,23,42,0.92);
        background: rgba(148,163,184,0.18);
        border: 1px solid rgba(148,163,184,0.28);
    }

/* Address / property details block */
#pnlConf .ConfCellDetail {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(15,23,42,0.86);
    font-weight: 650;
}

    /* Group the detail lines visually as a subtle card */
    #pnlConf .ConfCellDetail:first-of-type {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid rgba(148,163,184,0.22);
    }

    #pnlConf .ConfCellDetail:last-of-type {
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(148,163,184,0.22);
    }

    #pnlConf .ConfCellDetail + .ConfCellDetail {
        margin-top: 4px;
    }

#pnlConf .ConfCell b {
    background: color-mix(in srgb, var(--main-barcolor,#2563eb) 12%, white);
    border: 1px solid color-mix(in srgb, var(--main-barcolor,#2563eb) 28%, white);
}

/* The “make another reservation” button row */
#pnlConf .ConfCellResv {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

    /* Keep your WebButton theme, just modernize sizing/shape for this context */
    #pnlConf .ConfCellResv .WebButton {
        min-width: 220px;
        height: 38px;
        border-radius: 12px;
    }

/* Small screens */
@media (max-width: 520px) {
    #pnlConf .TabUDFBody {
        padding: 22px 16px;
    }

    #pnlConf .ConfCell,
    #pnlConf .ConfCellDetail {
        font-size: 14px;
    }

    #pnlConf .ConfCellResv .WebButton {
        min-width: 200px;
    }
}
.WebButton {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    min-height: 28px;
    color: #111;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: linear-gradient( to bottom, var(--main-buttoncolordark), var(--main-buttoncolorlight) );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.08);
    transition: all .12s ease;
}
    .WebButton:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.15);
    }
    .WebButton:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
    }
    .WebButton:disabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }
.SelectRoomButton {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    min-width: 72px;
    transition: all .12s ease;
}
    .SelectRoomButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0,0,0,.15);
    }
    .SelectRoomButton:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0,0,0,.2) inset;
    }

.WebButtonLarge {
    font-size: 20px;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    border-bottom: 0 none #b3b3b3;
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 4px 13px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: black;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--main-buttoncolorlight);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    background-image: linear-gradient(to bottom, var(--main-buttoncolordark), var(--main-buttoncolorlight));
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    /*border-left-style: none;*/
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/*Loader*/
.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid var(--main-loadercolor);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.NoRoomsMessage {
    padding:5px;
}
table {
    border-collapse: collapse;
}
.divAmenity {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}
.AmenityTable {
    width:100%;
}
.AmenityTRTitle {
}

.AmenityTR {
}

/*.AmenityTRGroup {
    text-align: center;
    font-style: italic;
    cursor: pointer;
    padding: 5px;
}
*/

.AmenityTRGroup {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    text-align: center;
}
.AmenityTR:nth-child(even) {
    background-color: #f2f2f2;
}

.AmenityTDTitle {
    text-align: left;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
.AmenityTDTitleDates {
    text-align: center;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
.AmenityTDDescript {
    display:inline-block;
    padding:5px;
    min-width: 200px;
}
.AmenityTD {
    padding:5px;
    text-align: left;
    text-align:center;
    vertical-align:top;
}

.ActivityRadio {
    text-align: center;
    white-space: nowrap;
    font-family: arial;
    font-size: 9pt;
    padding-top: 2px;
    padding-left: 2px;
}
/* Let the table fill the card cleanly */
.ActivityTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

/* Header row only */
.ActivityTRTitle th {
    background: linear-gradient( to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0.42) );
    border-bottom: 1px solid color-mix(in srgb, var(--main-barcolor) 55%, white);
    vertical-align: middle;
    padding: 5px;
}

.ActivityTDTitle {
    text-align: left;
    padding: 5px;
    border-bottom: 2px solid var(--main-barcolor);
    vertical-align: bottom;
}
/* Day header cells */
.ActivityTDTitleDates {
    text-align: center;
    vertical-align: middle;
    padding: 10px 8px;
    color: rgba(15,23,42,0.88);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.05;
    border-left: 1px solid rgba(148,163,184,0.18);
    white-space: nowrap;
}

.ActivityTDTime {
    text-align: right;
    font-family: arial;
    font-size: 10pt;
    font-style: italic;
}
.ActivityTDX {
    text-align: center;
    vertical-align: middle;
    padding: 6px 6px;
    color: #f05252;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.ActivityName {
    cursor: pointer;
    padding: 5px;
    min-width: 200px;
}

.ActivityNameSelected {
    padding: 5px;
    min-width: 150px;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 2px solid var(--main-barcolor);
}
.ActivityNameSelectedNoAppt {
    padding: 5px;
    min-width: 200px;
    text-align: left;
    vertical-align: bottom;
}

/* Title cell */
.ActivityNameSelected,
.ActivityNameSelectedNoAppt,
.ActivityName {
    text-align: left;
    vertical-align: middle;
    padding: 14px 18px;
    color: rgba(15,23,42,0.92);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
}


    /* If the title text is wrapped in spans, keep them behaving nicely */
    .ActivityNameSelected span,
    .ActivityNameSelectedNoAppt span,
    .ActivityName span {
        white-space: normal;
    }

/* Optional: slightly tighten header on smaller widths */
@media (max-width: 700px) {
    .ActivityNameSelected,
    .ActivityNameSelectedNoAppt,
    .ActivityName {
        padding: 12px 14px;
        font-size: 15px;
    }

    .ActivityTDTitleDates {
        padding: 8px 8px;
        font-size: 12px;
    }
}

/* =========================================================
   Activity rows: times + X cells + qty boxes
   Keeps day columns compact for 1–14 day headers
========================================================= */

/* body row separators */
.ActivityTR td {
    border-top: 1px solid rgba(148,163,184,0.18);
    background: transparent;
    vertical-align: middle;
}

/* subtle alternating rows */
.ActivityTR:nth-child(even) td {
    background: rgba(248,250,252,0.72);
}

/* ---------------------------------------------------------
   Time column
   Covers both newer class-based markup and older inline-style markup
--------------------------------------------------------- */
.ActivityTDTime,
.ActivityTR > td:first-child {
    text-align: right !important;
    vertical-align: middle;
    padding: 4px 12px 4px 14px;
    white-space: nowrap;
    color: rgba(15,23,42,0.70);
    font-family: inherit !important;
    font-size: 13px !important;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   Qty/input cells
   Keep compact so 1–14 day columns still fit
--------------------------------------------------------- */
.ActivityRadio {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    padding: 5px 6px;
}

    /* Override old inline width:25px */
    .ActivityRadio input[type="text"] {
        width: 46px !important;
        min-width: 46px;
        max-width: 46px;
        height: 30px;
        box-sizing: border-box;
        padding: 0 4px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 28px;
        color: rgba(15,23,42,0.92);
        background: rgba(255,255,255,0.96);
        border: 1px solid rgba(148,163,184,0.50);
        border-radius: 7px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .08s ease;
        appearance: none;
        -webkit-appearance: none;
    }

        /* hover / focus / active */
        .ActivityRadio input[type="text"]:hover {
            border-color: rgba(100,116,139,0.72);
            background: #ffffff;
        }

        .ActivityRadio input[type="text"]:focus {
            outline: none;
            border-color: color-mix(in srgb, var(--main-barcolor) 55%, #94a3b8);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-barcolor) 16%, transparent);
            background: #ffffff;
        }

        .ActivityRadio input[type="text"]:active {
            transform: translateY(1px);
        }

        /* hide spinners if browser treats them as number-ish */
        .ActivityRadio input[type="text"]::-webkit-outer-spin-button,
        .ActivityRadio input[type="text"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

/* ---------------------------------------------------------
   Tighten slightly when many day columns are present / smaller widths
--------------------------------------------------------- */
@media (max-width: 900px) {
    .ActivityTDTime,
    .ActivityTR > td:first-child {
        padding: 4px 10px 4px 10px;
        font-size: 12.5px !important;
    }

    .ActivityRadio {
        padding: 4px 4px;
    }

        .ActivityRadio input[type="text"] {
            width: 42px !important;
            min-width: 42px;
            max-width: 42px;
            height: 28px;
            font-size: 13px;
        }

}

.divActivity {
    display: inline-block;
    overflow: auto;
    width: 100%;
}
/* Each activity block becomes a card */
.divActivityAll > div {
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.06);
    margin: 0 0 18px 0;
    overflow: hidden;
}

/* Check-In Stuff*/
.divFind {
    display: inline-block;
    width: 100%;
    text-align:center;
}
.divVerify {
    width: 100%;
    text-align: center;
}
.divConfirmation {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.VerifyCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.GeneralCellRight {
    border: 5px solid transparent;
    width: 100%;
    text-align: left;
    font-weight: bold;
}

.GeneralCellLeft {
    border: 5px solid transparent;
    width: 100%;
    text-align: right;
    font-style: italic;
}


/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* =================================================================================================
   Calendar Popup Modernization — Height & Sticky Footer
   - Does NOT change your .modal positioning/centering work.
   - Forces the calendar popup to fit within the viewport height and scroll internally.
   - Keeps the bottom action area sticky while the months scroll.
   ================================================================================================= */


.calendar-Day-Header {
    font-size: larger;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    background-color: silver;
}

.calendar-DOW-Header {
    width: 62px;
    text-align: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .02em;
    color: #64748b;
    padding: 2px 0 2px 0;
}

.calendar-Rate {
    font-size: 8pt;
    font-style: italic;
}

.calendar-Done-button {
    height: 22px;
    font-weight: bold;
}

.calendar-Caption {
    font-size: 8pt;
    font-style: italic;
    text-align: center;
}

.calendar-Clear-button {
    height: 22px;
}

.calendar-Today-button {
    height: 22px;
}


/*-- New Shit */

/* Sticky bottom action bar (buttons + caption/checkbox) */
.calendar-Done-table {
    position: sticky;
    bottom: 0;
    z-index: 50;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(148,163,184,0.35);
    box-shadow: 0 -8px 18px rgba(15,23,42,0.10);
    border-collapse: separate;
    border-spacing: 6px; /* tighter than before */
    padding: 6px 8px 4px; /* reduces the big bottom gap */
    margin: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

    /* Tables inside sticky footer: remove default cell padding if present */
    .calendar-Done-table td {
        padding: 0 !important;
    }

/* Make sure the months can scroll “behind” the sticky footer without being cut off */
.calendar-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    margin-bottom: 5px;
}

/* Slightly tighten vertical chrome on short viewports (keeps button sizes intact) */
@media (max-height: 700px){
    .modal-content-calendar{ max-height: 92vh; }

    .calendar-header-table{ padding: 8px; border-spacing: 5px; }
    .calendar-table{ padding: 4px; border-spacing: 3px; }

    .calendar-Day-Header{ padding-top: 6px; padding-bottom: 6px; }
    .calendar-Caption{ font-size: 10.5px; }
}

/* === Modern look (safe overrides; only touches calendar classes) === */
.calendar-header-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px;
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.30);
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.14);
    margin-bottom: 8px;
}
.calendar-header-cell {
    cursor: pointer;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    padding: 6px 8px;
    border-radius: 12px;
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.calendar-header-cell:hover{ background: rgba(15,23,42,0.06); }
.calendar-header-cell:active{ transform: translateY(1px); }
.calendar-header-cell img{
    width: 14px;
    height: 14px;
    opacity: 0.75;
    vertical-align: middle;
}
.calendar-header-cell-middle{
    text-align: center;
    font-weight: 700;
}
.calendar-header-cell-middle select{
    width: 100%;
    max-width: 180px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    padding: 7px 9px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.45);
    background: #ffffff;
    color: #0f172a;
    outline: none;
}
.calendar-header-cell-middle select:focus{
    border-color: rgba(59,130,246,0.80);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}

/* Day cells */
.calendar-DOW-Avail,
.calendar-DOW-NotAvail,
.calendar-DOW-Outside{
    width: 44px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.35);
    padding: 6px 8px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Available */
.calendar-DOW-Avail{
    background: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.calendar-DOW-Avail:hover{
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.55);
    box-shadow: 0 6px 14px rgba(15,23,42,0.10);
}
.calendar-DOW-Avail:active{ transform: translateY(1px); }

/* Selected day (server tends to apply inline background-color) */
.calendar-DOW-Avail[style*="background-color"]{
    background: rgba(37,99,235,0.18) !important;
    border-color: rgba(37,99,235,0.85) !important;
    box-shadow: 0 10px 18px rgba(37,99,235,0.16) !important;
    font-weight: 800 !important;
}

/* Not available — modern hatch */
.calendar-DOW-NotAvail{
    color: #64748b;
    background:
        repeating-linear-gradient(135deg,
            rgba(148,163,184,0.14) 0px,
            rgba(148,163,184,0.14) 7px,
            rgba(255,255,255,0.0) 7px,
            rgba(255,255,255,0.0) 14px),
        #f8fafc;
}

/* Outside month */
.calendar-DOW-Outside{
    color: #94a3b8;
    background: #f8fafc;
    border-color: rgba(148,163,184,0.20);
}

/* Rate text */
.calendar-Rate{
    display: block;
    margin-top: 1px;
    font-size: 9px;
    font-style: italic;
    color: #64748b;
}

/* Footer buttons — keep friendly sizes */
.calendar-Today-button,
.calendar-Clear-button,
.calendar-Done-button{
    height: 32px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.45);
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.calendar-Today-button:hover,
.calendar-Clear-button:hover{
    background: rgba(15,23,42,0.05);
    border-color: rgba(100,116,139,0.55);
    box-shadow: 0 8px 16px rgba(15,23,42,0.10);
}
.calendar-Today-button:active,
.calendar-Clear-button:active,
.calendar-Done-button:active{ transform: translateY(1px); }

/* Primary action */
.calendar-Done-button{
    border-color: rgba(37,99,235,0.85);
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37,99,235,0.22);
}
.calendar-Done-button:hover{
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 12px 24px rgba(29,78,216,0.26);
}

.calendar-Caption{
    font-size: 11px;
    font-style: italic;
    text-align: center;
    color: #64748b;
}

/* ================================================================================================
   Calendar Popup — Height (80vh) + Sticky Footer spacing tweaks
   - Keeps width behavior: max 350px, shrinks on smaller screens
   - Leaves .modal overlay rules untouched
   ================================================================================================ */

/* Reduce extra vertical whitespace in the caption line */
.calendar-Caption{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* =========================================================================================
   SkyConfirmDialog (jQuery UI) — modern + theme-safe + keeps WebButton colors
   - Scoped to dialogs created with: dialogClass: "SkyConfirmDialog"
   - Adds top accent splash using --main-barcolor (like Guests modal)
   - Forces your .WebButton styling to win over jQuery UI .ui-button skin
   - Does NOT touch / restyle the close "X" (per your request)
   ========================================================================================= */

/* Dialog shell */
.SkyConfirmDialog.ui-dialog {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 24px 70px rgba(0,0,0,0.28);
    background: rgba(255,255,255,0.98);
}

/* Titlebar */
.SkyConfirmDialog .ui-dialog-titlebar {
    border-top: 4px solid var(--main-barcolor);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 12px 16px;
    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    position: relative;
}

    /* Accent splash (top bar) */
    .SkyConfirmDialog .ui-dialog-titlebar::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background: var(--main-barcolor);
        opacity: 0.95;
    }

.SkyConfirmDialog .ui-dialog-title {
    font-weight: 700;
    font-size: 13pt;
    color: rgba(0,0,0,0.75);
}

/* Content */
.SkyConfirmDialog .ui-dialog-content {
    padding: 14px 18px 12px;
    font-size: 11pt;
    line-height: 1.35;
    color: rgba(0,0,0,0.72);
    background: rgba(255,255,255,0.98);
}

/* Button pane */
.SkyConfirmDialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 14px 16px 16px;
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.98);
}

/* Button alignment */
.SkyConfirmDialog .ui-dialog-buttonset {
    float: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* -----------------------------------------------------------------------------------------
   Buttons: keep YOUR WebButton look (jQuery UI creates <button> and adds .ui-button)
   This block re-applies your WebButton styling inside the dialog with higher specificity.
   ----------------------------------------------------------------------------------------- */

.SkyConfirmDialog .ui-dialog-buttonpane button.WebButton,
.SkyConfirmDialog .ui-dialog-buttonpane button.WebButton.ui-button {
    font-size: 13px;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    display: inline-block;
    padding: 4px 13px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: black;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--main-buttoncolorlight);
    background-repeat: repeat-x;
    background-image: linear-gradient(to bottom, var(--main-buttoncolordark), var(--main-buttoncolorlight));
    border: 0;
    border-radius: 10px; /* slightly more modern than your default 4px */
    margin: 0;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    min-width: 72px;
    height: 34px;
}

    /* Hover/active polish (still theme-safe) */
    .SkyConfirmDialog .ui-dialog-buttonpane button.WebButton:hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(0,0,0,0.12);
    }

    .SkyConfirmDialog .ui-dialog-buttonpane button.WebButton:active {
        transform: translateY(1px);
    }

    /* If jQuery UI theme adds its own padding/border/outline, keep keyboard usability */
    .SkyConfirmDialog .ui-dialog-buttonpane button.WebButton:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,.25);
    }

/* Overlay: match your modal dimming (no fixed brand color) */
.ui-widget-overlay {
    background: rgba(0,0,0,0.45);
    opacity: 1;
}

#size2this {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

#divzoom {
    position: relative;
    width: 100%;
    transform-origin: top left;
}

#ImageMap1 {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.map-layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
}

.map-side-box {
    flex: 0 0 300px;
    width: 300px;
    box-sizing: border-box;
    background: #f7f8fa;
    border: 1px solid #cfd6df;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    color: #334155;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    margin-top: 0px;
}

    .map-side-box > div {
        margin-bottom: 14px;
    }

        .map-side-box > div:last-child {
            margin-bottom: 0;
        }

    .map-side-box label {
        cursor: pointer;
    }

    .map-side-box select,
    .map-side-box input[type="text"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        height: 34px;
        padding: 4px 10px;
        border: 1px solid #bcc7d4;
        border-radius: 8px;
        background: #fff;
        color: #334155;
        font-size: 14px;
        outline: none;
    }

        .map-side-box select:focus,
        .map-side-box input[type="text"]:focus {
            border-color: #7aa7d9;
            box-shadow: 0 0 0 3px rgba(122,167,217,0.15);
        }

    .map-side-box input[type="checkbox"] {
        margin-right: 6px;
        vertical-align: middle;
    }

    .map-side-box .CheckBoxList {
        margin-top: 6px;
        padding: 10px;
        max-height: 220px;
        overflow: auto;
        background: #fff;
        border: 1px solid #d7dee7;
        border-radius: 10px;
    }

        .map-side-box .CheckBoxList label {
            display: inline-block;
            vertical-align: middle;
            color: #475569;
        }

        .map-side-box .CheckBoxList br {
            line-height: 8px;
        }

    .map-side-box .WebButton,
    .map-side-box input[type="button"] {
        border: 1px solid #7aa7d9;
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        padding: 6px 12px;
        cursor: pointer;
        box-sizing: border-box;
    }

        .map-side-box input[type="button"]:hover,
        .map-side-box .WebButton:hover {
            filter: brightness(0.97);
        }

        .map-side-box input[type="button"]:active,
        .map-side-box .WebButton:active {
            transform: translateY(1px);
        }

    .map-side-box .filter-apply {
        width: 100%;
        height: 38px;
        margin-top: 4px;
    }

    .map-side-box .filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #334155;
        padding-bottom: 8px;
        border-bottom: 1px solid #dde4ec;
    }

    .map-side-box .filter-tools {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

        .map-side-box .filter-tools input[type="button"] {
            min-width: 34px;
            height: 32px;
            padding: 0 10px;
        }

    .map-side-box .filter-row-title {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .map-side-box .filter-section-title {
        font-size: 15px;
        font-weight: 600;
        color: #334155;
        margin-bottom: 4px;
    }

@media (max-width: 900px) {
    .map-layout {
        flex-direction: column;
    }

    .map-side-box {
        order: 1;
        width: 100%;
        flex: 0 0 auto;
        padding: 12px;
    }

    #size2this {
        order: 2;
        width: 100%;
    }

    .map-side-box .CheckBoxList {
        max-height: 170px;
    }
}
.cb-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

    .cb-row input[type="checkbox"] {
        margin: 3px 0 0 0;
        flex: 0 0 auto;
    }

    .cb-row label {
        margin: 0;
        line-height: 1.25;
    }

/* =========================================================
   Amenities - card view foundation
   Designed for:
   - desktop and mobile
   - user-defined description content
   - easy future grid-view conversion
========================================================= */

.amenities {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.amenity-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 18px;
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(148,163,184,0.28);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15,23,42,0.06);
}

.amenity-main {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.amenity-title {
    margin: 0 0 10px 0;
    min-width: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(15,23,42,0.92);
    overflow-wrap: break-word;
    word-break: normal;
}

.amenity-description {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(15,23,42,0.78);
    overflow-wrap: break-word;
    word-break: normal;
}

.amenity-days {
    display: grid;
    gap: 12px;
    align-content: start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.amenity-day {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 14px;
    background: rgba(248,250,252,0.78);
}

.amenity-day-name {
    min-width: 0;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 700;
    color: rgba(15,23,42,0.78);
    white-space: nowrap;
}

.amenity-day-input {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.amenity-select {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 30px 0 10px;
    border: 1px solid rgba(148,163,184,0.55);
    border-radius: 9px;
    background-color: #ffffff;
    color: rgba(15,23,42,0.92);
    font-size: 14px;
    font-weight: 600;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

.amenity-day-meta {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.amenity-price,
.amenity-availability {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    color: #15803d;
    white-space: nowrap;
}

.amenity-price {
    font-style: italic;
}

.AmenityTRGroup {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 0 4px 0;
    margin: 0;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    color: rgba(15,23,42,0.92);
}

@media (max-width: 1400px) {
    .amenity-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .amenity-day {
        grid-template-columns: auto 1fr;
        gap: 10px;
        align-items: center;
    }

    .amenity-day-name {
        white-space: nowrap;
        font-weight: 600;
    }

    .amenity-day-input {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap; /* 🔥 prevents wrapping */
    }

    .amenity-select {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .amenity-price {
        white-space: nowrap;
    }
}