/* ==========================================================================
   hotels.cana.wedding — Cana brand skin for the HotelPlanner white label
   (site 9945). Paste into the HotelPlanner site admin as the custom CSS.

   Source of truth: DESIGN.md in the Cana repo. Merlot, gold, and cream;
   Made Mirage for headings, Inter for everything else.

   Load order matters: this file is served as /site/9945/custom.css and
   loads AFTER _Shared.css/_Themes.css but BEFORE page-specific sheets
   (hotelprofile/v3/profile.min.css, CheckOut/v2.css). Rules that fight
   those later sheets are scoped with `body.site9945` for extra weight.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@font-face {
    font-family: "Made Mirage";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cana.wedding/fonts/MadeMirage-Thin.otf") format("opentype");
}

@font-face {
    font-family: "Made Mirage Regular";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("https://cana.wedding/fonts/MadeMirage-Regular.otf") format("opentype");
}

:root {
    --cana-merlot: #6F2A37;
    --cana-merlot-deep: #531D27;
    --cana-merlot-tint: #F6EEF0;
    --cana-gold: #C6A17B;
    --cana-gold-deep: #796135;
    --cana-ivory: #F6F4EE;
    --cana-bone: #EEEAE2;
    --cana-white: #FFFFFF;
    --cana-ink: #0A0A0A;
    --cana-charcoal: #2B2B2B;
    --cana-stone: #6B6B6B;
    --cana-line: #DED3C4;
    --cana-forest: #263A27;

    --cana-font-display: "Made Mirage Regular", "Made Mirage", Georgia, serif;
    --cana-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --cana-radius-sm: 8px;
    --cana-radius-md: 12px;
    --cana-radius-lg: 16px;
    --cana-radius-xl: 24px;
    --cana-radius-pill: 9999px;

    --cana-hover-lift: 0 8px 32px rgba(10, 10, 10, 0.08);
    --cana-float: 0 25px 50px -12px rgba(10, 10, 10, 0.35);
    --cana-ease: 180ms ease-out;
}

/* HotelPlanner's V3 hotel page is driven by these variables. Redefining them
   on body outranks their :root declarations for everything on the page. */
body.site9945 {
    --blue-ribbon: var(--cana-ink);
    --endeavour: var(--cana-ink);
    --regal-blue: var(--cana-ink);
    --summer-sky: var(--cana-gold);
    --message: var(--cana-bone);
    --eerie-black: var(--cana-ink);
    --tundora: var(--cana-charcoal);
    --green-1: var(--cana-forest);
    --font-family-default: var(--cana-font-body);
    --font-family-medium: var(--cana-font-body);
    --gmpx-font-family-base: var(--cana-font-body);
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

BODY {
    margin: 0;
    color: var(--cana-charcoal);
    background-color: var(--cana-ivory);
    font-family: var(--cana-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

td {
    font-family: var(--cana-font-body);
    font-size: 15px;
}

a:link,
a:visited {
    color: var(--cana-ink);
    text-decoration: none;
}

a:hover {
    color: var(--cana-merlot);
    text-decoration: underline;
    text-underline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--cana-merlot);
    outline-offset: 2px;
}

img { border: 0; }
#lastactive { width: 2px; height: 3px; border: 0; }

h1,
h2,
h3,
.PageHeader {
    font-family: var(--cana-font-display);
    font-weight: 600;
    color: var(--cana-ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h1,
.PageHeader { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }

::selection {
    background: var(--cana-merlot-tint);
    color: var(--cana-ink);
}


/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

select,
input.Shadow,
textarea.Shadow,
.form-control,
body.site9945 #MainContent input[type="text"],
body.site9945 #MainContent input[type="email"],
body.site9945 #MainContent input[type="tel"],
body.site9945 #MainContent input[type="number"],
body.site9945 #MainContent input[type="password"],
body.site9945 #MainContent textarea,
body.site9945 #MainContent select {
    font-family: var(--cana-font-body);
    font-size: 16px;
    color: var(--cana-charcoal);
    background-color: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-md);
    box-shadow: none;
    transition: border-color var(--cana-ease);
}

select,
input.Shadow,
textarea.Shadow { padding: 10px 14px; }

select:hover,
.form-control:hover,
body.site9945 #MainContent input[type="text"]:hover,
body.site9945 #MainContent input[type="email"]:hover,
body.site9945 #MainContent select:hover {
    border-color: var(--cana-gold);
}

select:focus,
.form-control:focus,
body.site9945 #MainContent input:focus,
body.site9945 #MainContent textarea:focus,
body.site9945 #MainContent select:focus {
    border-color: var(--cana-ink);
    box-shadow: none;
    outline: none;
}

body.site9945 #MainContent input:focus-visible,
body.site9945 #MainContent textarea:focus-visible,
body.site9945 #MainContent select:focus-visible {
    outline: 2px solid var(--cana-merlot);
    outline-offset: 1px;
}

/* Vendor placeholder colors are more specific and fail 4.5:1; stone is the floor. */
::placeholder,
.form-control::placeholder,
body.site9945 input::placeholder,
body.site9945 textarea::placeholder {
    color: var(--cana-stone) !important;
    opacity: 1;
}

label { color: var(--cana-charcoal); }


/* --------------------------------------------------------------------------
   Buttons
   Ink is the everyday action (search, continue, book). Merlot is reserved
   for the one ceremonial decision on a page (Complete Booking, the group
   request submit) — see the Wine Rule in DESIGN.md.
   -------------------------------------------------------------------------- */

.Button,
.button,
.large {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--cana-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cana-white);
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    background-color: var(--cana-ink);
    border: 0;
    border-radius: var(--cana-radius-pill);
    cursor: pointer;
    transition: background-color var(--cana-ease), transform var(--cana-ease), box-shadow var(--cana-ease);
}

.Button:hover,
.button:hover,
#pg_RequestDetails .button:hover {
    color: var(--cana-white);
    text-decoration: none;
    background-color: var(--cana-charcoal);
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Header — mirrors the cana.wedding top bar: white, hairline, slim.
   -------------------------------------------------------------------------- */

header * {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

body.site9945 header.header-wl,
.header-wl {
    position: relative;
    overflow: hidden;
    background-color: var(--cana-white);
    border-top: 0;
    border-bottom: 1px solid var(--cana-line);
    box-shadow: none;
}

header a,
header a:link,
header a:visited { text-decoration: none; }

.container-wl {
    position: relative;
    box-sizing: border-box;
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 20px;
}

#logo { line-height: 0; }

#logo-wl img {
    position: relative;
    width: auto;
    min-height: 0;
    max-height: 52px;
    margin: 12px 0;
}

ul#navigation-wl {
    position: absolute;
    top: 50%;
    right: 20px;
    height: auto;
    margin-top: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    font-family: "Made Mirage", Georgia, serif;
    font-size: 16px;
}

ul#navigation-wl li {
    display: inline-block;
    margin-left: 0;
    color: var(--cana-charcoal);
}

header #message-wl { display: none !important; }

#flag-wl { padding: 12px 8px; }

a#signin-wl,
a#signin-wl:link,
a#signin-wl:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-family: "Made Mirage", Georgia, serif;
    font-size: 16px;
    color: var(--cana-charcoal);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

a#signin-wl:hover {
    color: var(--cana-ink);
    border: 0;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#subnav-wl {
    overflow: hidden;
    padding: 4px 0;
    background-color: var(--cana-bone);
}

#subnav-wl .container-wl { padding-top: 0; }

#subnav-wl ul {
    float: right;
    overflow: hidden;
}

#subnav-wl ul li {
    float: left;
    margin: 0 10px;
}

#subnav-wl ul li:last-of-type { margin-right: 0; }

#subnav-wl a:link,
#subnav-wl a:visited {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cana-stone);
}

#subnav-wl a:hover { color: var(--cana-ink); }

.subnav-container {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--cana-bone);
    border-bottom: 1px solid var(--cana-line);
}

nav.Navbar {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 15px;
    font-weight: 500;
    color: var(--cana-charcoal);
    background: transparent;
}

nav.Navbar a,
nav.Navbar a:link,
nav.Navbar a:visited {
    display: inline-block;
    padding: 12px;
    font-weight: 500;
    color: var(--cana-charcoal);
    text-decoration: none;
}

nav.Navbar a:hover {
    color: var(--cana-ink);
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

#MainContent {
    display: table;
    width: 100%;
    margin: 0 auto;
    border: 0;
    border-spacing: 0;
    background-color: var(--cana-ivory);
}

#pg_Home #MainContent { width: 100%; }

#Flag-Wrap { float: right; margin-top: 3px; }

#ContentInner,
body.site9945 #ContentInner {
    display: table;
    width: 100%;

    min-height: 400px;
    margin: 0 auto;
    padding-top: 24px;
    background-color: var(--cana-ivory);
}

#pg_Home #ContentInner {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
}

.content_hp,
.container-hp { padding: 0; }

#pg_GroupPost #ContentInner,
#pg_GroupSummary #ContentInner,
#pg_GroupAccount #ContentInner,
#pg_GroupArchive #ContentInner,
#pg_GroupFAQ #ContentInner { padding-bottom: 64px; }

#taxexempt { position: absolute; top: 5px; right: 35px; }


/* --------------------------------------------------------------------------
   Footer — the quiet, centered cana.wedding footer instead of the cyan band.
   -------------------------------------------------------------------------- */

body.site9945 footer,
footer {
    padding: 40px 20px 48px;
    font-family: var(--cana-font-body);
    font-size: 14px;
    text-align: center;
    color: var(--cana-charcoal);
    background-color: var(--cana-ivory);
    border-top: 1px solid var(--cana-line);
}

footer small {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--cana-stone);
}

body.site9945 footer a:link,
body.site9945 footer a:active,
body.site9945 footer a:visited {
    display: inline-block;
    padding: 8px 10px;
    font-weight: 400;
    text-transform: none;
    color: var(--cana-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body.site9945 footer a:hover { color: var(--cana-merlot); }


/* --------------------------------------------------------------------------
   Home — hero search over photography
   -------------------------------------------------------------------------- */

/* _Themes.css pins #landingpage to Helvetica 14px. */
body.site9945 #landingpage {
    font-family: var(--cana-font-body);
    font-size: 16px;
    color: var(--cana-charcoal);
}

#pg_Home #landingpage #SearchSection {
    position: relative;
    padding: 96px 0 112px;
}

#pg_Home #landingpage #SearchSection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.55) 100%);
    pointer-events: none;
}

#pg_Home #landingpage #SearchSection > .container {
    position: relative;
    z-index: 1;
    max-width: 880px;
}

/* Tabs: glass pills over the photo, the active one solid white. */
#pg_Home #landingpage .tab-links {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

#pg_Home #landingpage .tab-links li {
    margin: 0;
    list-style: none;
}

#pg_Home #landingpage .tab-links a,
#pg_Home #landingpage .tab-links a:link,
#pg_Home #landingpage .tab-links a:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    font-family: var(--cana-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--cana-white);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--cana-radius-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color var(--cana-ease);
}

#pg_Home #landingpage .tab-links a:hover {
    background: rgba(255, 255, 255, 0.24);
    text-decoration: none;
}

#pg_Home #landingpage .tab-links a.current,
#pg_Home #landingpage .tab-links a.current:link,
#pg_Home #landingpage .tab-links a.current:visited,
#pg_Home #landingpage .tab-links a.current:hover {
    color: var(--cana-ink);
    background: var(--cana-white);
    border-color: var(--cana-white);
}

#pg_Home #landingpage .tab-panel {
    position: relative;
    padding: 32px;
    background: var(--cana-white);
    border: 0;
    border-radius: var(--cana-radius-lg);
    box-shadow: var(--cana-float);
}

#pg_Home #landingpage #ViewChange {
    top: 32px;
    right: 32px;
}

#pg_Home #landingpage #ViewChange a {
    font-size: 14px;
    color: var(--cana-charcoal);
    text-decoration: underline;
    text-underline-offset: 4px;
}

#pg_Home #landingpage #ViewChange a:hover { color: var(--cana-merlot); }

#pg_Home #landingpage .tab-panel label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cana-stone);
}

#pg_Home #landingpage .tab-panel .form-control {
    height: 52px;
    padding: 0 16px;
}

#pg_Home #landingpage .submit,
#pg_Home #landingpage button.submit {
    height: 52px;
    padding: 0 36px;
    font-family: var(--cana-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--cana-white);
    background: var(--cana-ink);
    border: 0;
    border-radius: var(--cana-radius-pill);
    cursor: pointer;
    transition: background-color var(--cana-ease), transform var(--cana-ease);
}

#pg_Home #landingpage .submit:hover {
    color: var(--cana-white);
    background: var(--cana-charcoal);
    transform: translateY(-1px);
}

#landingpage #theme-image {
    background: url("//cdn.hotelplanner.com/common/images/site/9945/a5b99d56fee6213c7f165f90e6e41ffa944794f9-5464x8192.png") no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 450px;
}

body.site9945 #landingpage #AdvantagesSection #theme-image {
    border-radius: var(--cana-radius-lg);
    box-shadow: var(--cana-float);
}

#landingpage #SearchSection {
    background: url("//cdn.hotelplanner.com/common/images/site/9945/d545d0fe5c2883c079452b943c554afde9174045-6836x4560.png") center top no-repeat !important;
    background-size: cover !important;
}


/* --------------------------------------------------------------------------
   Home — intro and "Why choose us"
   -------------------------------------------------------------------------- */

body.site9945 #landingpage #IntroSection {
    padding: 80px 20px;
    text-align: center;
    background-color: var(--cana-ivory);
}

#landingpage #IntroSection .container { max-width: 760px; }

#landingpage #IntroSection h2 {
    width: auto;
    max-width: none;
    margin: 0 auto 20px;
    font-family: var(--cana-font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--cana-ink);
}

#landingpage #IntroSection h2::before {
    content: "\2014\00a0 Where to stay \00a0\2014";
    display: block;
    margin-bottom: 20px;
    font-family: var(--cana-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--cana-stone);
}

#landingpage #IntroSection p {
    max-width: 65ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--cana-charcoal);
}

/* The bone band lives on the #AdvantagesSection wrapper: _Themes.css zeroes
   #Section2's padding with a three-ID selector, which left the heading flush
   against the band's top edge. */
body.site9945 #landingpage #AdvantagesSection {
    padding: 96px 20px;
    background-color: var(--cana-bone);
}

body.site9945 #landingpage #AdvantagesSection #Section2 {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

#landingpage #Section2 h2 {
    margin: 0 0 24px;
    font-family: var(--cana-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 600;
    color: var(--cana-ink);
}

#landingpage #Section2 ul.advantages li {
    min-height: 0;
    margin: 0 0 14px;
    padding: 0 0 0 32px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cana-charcoal);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23796135' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 2px;
    background-size: 20px 20px;
}

#landingpage #Section2 .topic {
    font-weight: 600;
    color: var(--cana-ink);
}


/* --------------------------------------------------------------------------
   Search results (#pg_SearchIndv)
   -------------------------------------------------------------------------- */

body.site9945#pg_SearchIndv #ContentInner { padding-top: 0; }

body.site9945#pg_SearchIndv #Search-Box,
#pg_SearchIndv #Search-Box {
    padding: 20px 0 16px;
    background-color: var(--cana-bone);
    border-bottom: 1px solid var(--cana-line);
}

#pg_SearchIndv #Search-Box label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cana-stone);
    text-shadow: none;
}

#pg_SearchIndv #Search-Box input,
#pg_SearchIndv #Search-Box .customSelect {
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--cana-charcoal);
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-md);
    box-sizing: border-box;
}

#pg_SearchIndv #Search-Box .customSelect { line-height: 42px; }

#pg_SearchIndv #btnStartSearch,
#pg_SearchIndv #Search-Box #btnStartSearch {
    height: 44px;
    padding: 0 24px;
    font-weight: 600;
    color: var(--cana-white);
    background-color: var(--cana-ink);
    border: 0;
    border-radius: var(--cana-radius-md);
    cursor: pointer;
}

#pg_SearchIndv #btnStartSearch:hover { background-color: var(--cana-charcoal); }

/* Discount toggles become quiet outlined chips; selected reads as merlot tint.
   inline-block, not inline-flex: flex drops the space before the
   .hide-mobile span ("Senior Discounts" would render "SeniorDiscounts"). */
#pg_SearchIndv #discounts label,
#pg_SearchIndv #discounts .bounceIn label {
    display: inline-block;
    min-height: 36px;
    padding: 0 14px;
    line-height: 34px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cana-charcoal) !important;
    background-color: var(--cana-white) !important;
    border: 1px solid var(--cana-line) !important;
    border-radius: var(--cana-radius-pill);
    cursor: pointer;
}

#pg_SearchIndv #discounts label:hover {
    border-color: var(--cana-gold) !important;
}

#pg_SearchIndv #discounts .bounceIn label,
#pg_SearchIndv #discounts .bounceIn label:hover,
#discounts .bounceIn label,
#discounts .bounceIn label:hover {
    color: var(--cana-merlot) !important;
    background-color: var(--cana-merlot-tint) !important;
    border: 1px solid var(--cana-merlot) !important;
}

/* Filters */
#pg_SearchIndv .filter-section .category,
#pg_SearchIndv .filter-section > span:first-child {
    display: block;
    margin-bottom: 8px;
    font-family: var(--cana-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cana-stone);
}

#pg_SearchIndv .filter-section {
    font-family: var(--cana-font-body);
    color: var(--cana-charcoal);
}

#pg_SearchIndv .filter-section input[type="checkbox"] { accent-color: var(--cana-ink); }

/* Gold Deep, not Warmth: stars carry meaning and need 3:1 on white. */
#pg_SearchIndv .filter-section .fa-star,
#pg_SearchIndv .star-rating .fa-star,
#pg_SearchIndv .fa-star,
#pg_SearchIndv .star-icon,
#pg_SearchIndv .star-icon::before { color: var(--cana-gold-deep) !important; }

#pg_SearchIndv #moreAmenitiesLink {
    color: var(--cana-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Range sliders (price, guest reviews): jQuery UI slider + the slider-pips
   plugin. Hairline track, ink range, round handles, value pills above.
   The 24px side padding keeps a centered "$9999+" pill inside the panel
   when a handle sits at either end of the track. */
#pg_SearchIndv .filter-section .slider_container {
    height: auto;
    padding: 38px 24px 10px;
}

#pg_SearchIndv .filter-section .ui-slider.ui-slider-horizontal {
    height: 4px;
    margin: 0;
    background: var(--cana-line) !important;
    border: 0 !important;
    border-radius: var(--cana-radius-pill);
}

/* Reserves room for the 0–5 scale; .filter-section clips overflow. */
#pg_SearchIndv .filter-section .ui-slider.ui-slider-horizontal.ui-slider-pips { margin-bottom: 28px; }

#pg_SearchIndv .filter-section .ui-slider .ui-slider-range {
    top: 0;
    height: 100%;
    background: var(--cana-ink) !important;
    border: 0;
    border-radius: var(--cana-radius-pill);
}

#pg_SearchIndv .filter-section .ui-slider .ui-slider-handle {
    box-sizing: border-box;
    width: 20px !important;
    height: 20px !important;
    top: 50% !important;
    margin: -10px 0 0 -10px !important;
    background: var(--cana-white) !important;
    border: 2px solid var(--cana-ink) !important;
    border-radius: 50%;
    box-shadow: none;
    cursor: grab;
    outline: none;
    transition: box-shadow var(--cana-ease);
}

#pg_SearchIndv .filter-section .ui-slider .ui-slider-handle:hover,
#pg_SearchIndv .filter-section .ui-slider .ui-slider-handle.ui-state-active {
    z-index: 3;
    box-shadow: 0 0 0 6px rgba(10, 10, 10, 0.08);
}

#pg_SearchIndv .filter-section .ui-slider .ui-slider-handle:focus-visible,
#pg_SearchIndv .filter-section .ui-slider .ui-slider-handle.ui-state-focus {
    outline: 2px solid var(--cana-merlot);
    outline-offset: 2px;
}

#pg_SearchIndv .filter-section .ui-slider-float .ui-slider-handle .ui-slider-tip,
#pg_SearchIndv .filter-section .ui-slider-float .ui-slider-pip .ui-slider-tip-label {
    top: auto !important;
    bottom: calc(100% + 8px);
    left: 50% !important;
    right: auto;
    transform: translateX(-50%);
    width: auto !important;
    min-width: 0;
    height: 24px;
    margin: 0 !important;
    padding: 0 9px !important;
    font-family: var(--cana-font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
    color: var(--cana-ink) !important;
    background: var(--cana-white) !important;
    border: 1px solid var(--cana-line) !important;
    border-radius: var(--cana-radius-pill);
    box-shadow: none;
}

#pg_SearchIndv .filter-section .ui-slider-float .ui-slider-tip::before,
#pg_SearchIndv .filter-section .ui-slider-float .ui-slider-tip::after,
#pg_SearchIndv .filter-section .ui-slider-float .ui-slider-tip-label::before,
#pg_SearchIndv .filter-section .ui-slider-float .ui-slider-tip-label::after {
    display: none;
}

#pg_SearchIndv .filter-section .ui-slider-pips .ui-slider-pip { top: 12px; }

#pg_SearchIndv .filter-section .ui-slider-pips .ui-slider-line {
    top: 0;
    width: 1px;
    height: 4px;
    background: var(--cana-line);
}

#pg_SearchIndv .filter-section .ui-slider-pips .ui-slider-label {
    top: 8px;
    font-family: var(--cana-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--cana-stone);
}

#pg_SearchIndv .filter-section .ui-slider-pips .ui-slider-pip-inrange .ui-slider-label,
#pg_SearchIndv .filter-section .ui-slider-pips .ui-slider-pip-selected .ui-slider-label {
    font-weight: 600;
    color: var(--cana-ink);
}

/* Result cards */
#pg_SearchIndv #Rates .hotel-rates {
    padding: 24px;
    margin-bottom: 16px;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
    transition: box-shadow var(--cana-ease), transform var(--cana-ease);
}

#pg_SearchIndv #Rates .hotel-rates:hover {
    box-shadow: var(--cana-hover-lift);
    transform: translateY(-2px);
}

#pg_SearchIndv #Rates a.hotel-name,
#pg_SearchIndv #Rates a.hotel-name:link,
#pg_SearchIndv #Rates a.hotel-name:visited {
    font-family: var(--cana-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--cana-ink);
}

#pg_SearchIndv #Rates a.hotel-name:hover { color: var(--cana-merlot); }

#pg_SearchIndv #Rates .h-phone {
    color: var(--cana-charcoal);
    background: var(--cana-ivory);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-pill);
    box-shadow: none;
}

#pg_SearchIndv #Rates .hotelphone-number { color: var(--cana-ink); }

#pg_SearchIndv #Rates .address,
#pg_SearchIndv #Rates .ptTotalHint { color: var(--cana-stone); }

#pg_SearchIndv #Rates .distance {
    color: var(--cana-charcoal);
    background: var(--cana-bone);
    border-radius: var(--cana-radius-sm);
}

#pg_SearchIndv #Rates ul.features li.propsumm,
#pg_SearchIndv #Rates .savings {
    color: var(--cana-forest);
}

#pg_SearchIndv #Rates .photo-wrapper img { border-radius: var(--cana-radius-md); }

#pg_SearchIndv #Rates .price-old,
#pg_SearchIndv #Rates .price-old span { color: var(--cana-stone); }

#pg_SearchIndv #Rates .price,
#pg_SearchIndv #Rates .ptPrice { color: var(--cana-ink); }

#pg_SearchIndv #Rates .review-score { color: var(--cana-ink); }

#pg_SearchIndv #Rates a.recent-reviews {
    color: var(--cana-charcoal);
    text-decoration: underline;
    text-underline-offset: 4px;
}

#pg_SearchIndv #Rates .check-rates,
#pg_SearchIndv #Rates a.check-rates:link,
#pg_SearchIndv #Rates a.check-rates:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    font-family: var(--cana-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--cana-white);
    text-decoration: none;
    background: var(--cana-ink);
    border: 0;
    border-radius: var(--cana-radius-pill);
    transition: background-color var(--cana-ease);
}

#pg_SearchIndv #Rates .check-rates:hover {
    color: var(--cana-white);
    background: var(--cana-charcoal);
    text-decoration: none;
}

/* "Show All Hotels" (after a filter narrows results) is secondary to the
   ink Continue pills, so it is an outlined pill. version2.min.css loads
   after this file and fills it blue; body.site9945 outranks it. */
body.site9945 #showAllHotelsButton {
    margin: 8px 0 4px;
    text-align: center;
}

body.site9945 #showAllHotelsButton a,
body.site9945 #showAllHotelsButton a:link,
body.site9945 #showAllHotelsButton a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 32px;
    font-family: var(--cana-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--cana-ink);
    text-decoration: none;
    background-color: var(--cana-white);
    border: 1px solid var(--cana-ink);
    border-radius: var(--cana-radius-pill);
    transition: background-color var(--cana-ease), color var(--cana-ease);
}

body.site9945 #showAllHotelsButton a:hover {
    color: var(--cana-white);
    background-color: var(--cana-ink);
    text-decoration: none;
}

/* Pager: "Prev 1 2 … More Hotels »". The current page is a bare span, the
   others wrap an <a>; every target is at least 44×44. */
body.site9945#pg_SearchIndv #paging-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0 32px;
}

body.site9945#pg_SearchIndv #paging-bottom span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    font-family: var(--cana-font-body);
    font-size: 16px;
    color: var(--cana-stone);
}

body.site9945#pg_SearchIndv #paging-bottom a,
body.site9945#pg_SearchIndv #paging-bottom a:link,
body.site9945#pg_SearchIndv #paging-bottom a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--cana-ink);
    text-decoration: none;
    border-radius: var(--cana-radius-pill);
    transition: background-color var(--cana-ease);
}

body.site9945#pg_SearchIndv #paging-bottom a:hover {
    color: var(--cana-ink);
    background-color: var(--cana-bone);
    text-decoration: none;
}

body.site9945#pg_SearchIndv #paging-bottom .paging_page {
    min-width: 44px;
    border-radius: var(--cana-radius-pill);
}

body.site9945#pg_SearchIndv #paging-bottom .paging_page a { min-width: 44px; }

body.site9945#pg_SearchIndv #paging-bottom .paging_page:not(:has(a)) {
    font-weight: 600;
    color: var(--cana-white);
    background-color: var(--cana-ink);
}

body.site9945#pg_SearchIndv #paging-bottom .paging_previous a,
body.site9945#pg_SearchIndv #paging-bottom .paging_next a {
    padding: 0 16px;
    font-weight: 600;
}

body.site9945#pg_SearchIndv #paging-bottom .paging_previous:not(:has(a)) { padding: 0 12px; }


/* --------------------------------------------------------------------------
   Hotel profile V3 (#pg_HotelProfileV3) — beats profile.min.css by scoping
   through body.site9945.
   -------------------------------------------------------------------------- */

body.site9945 .card-brand {
    font-family: var(--cana-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cana-ink);
}

body.site9945 .hotel-detail__label,
body.site9945 .stay-filter__label,
body.site9945 .stay-filter__header,
body.site9945 .detail-section__label {
    font-family: var(--cana-font-display);
    font-weight: 600;
    color: var(--cana-ink);
}

body.site9945 .hotel-card__name .card-name {
    font-size: 1rem;
    margin-left: 1rem;
}

body.site9945 .room-variant__name {
    font-family: var(--cana-font-display);
    font-weight: 600;
    color: var(--cana-ink);
}

body.site9945 #container-rates,
body.site9945 #container-nearby {
    background-color: var(--cana-bone);
    border-radius: var(--cana-radius-lg);
}

body.site9945 .ai-qa__answer,
body.site9945 .modal__dialog,
body.site9945 .lodging-search__screen,
body.site9945 .destination,
body.site9945 .destination__input {
    background-color: var(--cana-ivory);
}

body.site9945 .action-link,
body.site9945 .action-link__label,
body.site9945 .action-link__icon,
body.site9945 .call-link,
body.site9945 .call-link__icon,
body.site9945 .call-link__phone,
body.site9945 .hotel-details__phone-info,
body.site9945 .hotel-graphics__caption,
body.site9945 .room-selector__clear,
body.site9945 .cta__select-room,
body.site9945 .guests-screen__add-room,
body.site9945 .guests-screen__group-rates {
    color: var(--cana-ink);
}

/* V3 icons are data-URI SVG backgrounds with the blue baked in; the filter
   takes them to ink. Stars get a Gold Deep replacement instead. */
body.site9945 .action-link__icon,
body.site9945 .call-link__icon,
body.site9945 .hotel-detail__icon,
body.site9945 .hotel-details .icon,
body.site9945 .amenity {
    filter: grayscale(1) brightness(0);
}

body.site9945 .icon--blue-star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23796135' d='M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z'/%3E%3C/svg%3E");
}

/* Sits over room photos; the global ink link color would make it vanish. */
body.site9945 a.room-details__button,
body.site9945 a.room-details__button:link,
body.site9945 a.room-details__button:visited {
    color: var(--cana-white);
}

body.site9945 .action-link:hover .action-link__label,
body.site9945 .call-link:hover .call-link__phone {
    color: var(--cana-merlot);
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.site9945 .guest-rating__score,
body.site9945 .guest-reviews__score {
    color: var(--cana-white);
    background-color: var(--cana-ink);
    border-radius: var(--cana-radius-sm);
}

body.site9945 .guest-reviews__bar-fill { background-color: var(--cana-gold); }

body.site9945 .guest-rating__description,
body.site9945 .guest-reviews__category-score,
body.site9945 .review__rating-number {
    color: var(--cana-ink);
}

body.site9945 .room-variant__cancel { color: var(--cana-stone); }

body.site9945 .room-selector__option {
    color: var(--cana-charcoal);
    background: var(--cana-white);
    border-color: var(--cana-line);
    transition: border-color var(--cana-ease), background-color var(--cana-ease);
}

body.site9945 .room-selector__option:hover { border-color: var(--cana-gold); }

body.site9945 .room-selector__option[class*="--active"],
body.site9945 .room-selector__option[class*="--selected"],
body.site9945 .room-selector__option.active,
body.site9945 .room-selector__option.selected {
    color: var(--cana-merlot);
    background: var(--cana-merlot-tint);
    border-color: var(--cana-merlot);
}

body.site9945 .room-variant__button,
body.site9945 .ai-qa__submit,
body.site9945 .lodging-search__done,
body.site9945 .destination-screen__done-button,
body.site9945 .calendar__btn,
body.site9945 .guests-screen__done-button,
body.site9945 .static-tooltip__close-btn {
    font-family: var(--cana-font-body);
    font-weight: 600;
    color: var(--cana-white);
    background-color: var(--cana-ink);
    border-color: var(--cana-ink);
    border-radius: var(--cana-radius-pill);
    transition: background-color var(--cana-ease);
}

body.site9945 .room-variant__button:hover,
body.site9945 .ai-qa__submit:hover,
body.site9945 .lodging-search__done:hover,
body.site9945 .destination-screen__done-button:hover,
body.site9945 .calendar__btn:hover,
body.site9945 .guests-screen__done-button:hover {
    background-color: var(--cana-charcoal);
}

body.site9945 .message {
    color: var(--cana-ink);
    background-color: var(--cana-merlot-tint);
}

body.site9945 button.scroll-to-top {
    font-family: var(--cana-font-body);
    font-weight: 600;
    color: var(--cana-white);
    background-color: var(--cana-ink);
    border-radius: var(--cana-radius-pill);
}

/* Legacy (pre-V3) hotel profile */
#pg_HotelProfile #Action-Box {
    color: var(--cana-ink);
    background-color: var(--cana-bone);
    border-radius: var(--cana-radius-lg);
}

#pg_HotelProfile #RelatedHotels {
    color: var(--cana-ink) !important;
    background-color: var(--cana-bone) !important;
}

#pg_HotelProfile .orange-flatBtn {
    color: var(--cana-white) !important;
    background-color: var(--cana-ink) !important;
    border: 0 !important;
    border-radius: var(--cana-radius-pill);
}

#Profile #RelatedHotels h3 { color: var(--cana-ink) !important; }

#pg_HotelProfile #rateSearchForm text { fill: var(--cana-white) !important; }


/* --------------------------------------------------------------------------
   Checkout (#pg_CheckOut) — the one merlot moment in the booking flow.
   -------------------------------------------------------------------------- */

body.site9945#pg_CheckOut #MainContent,
body.site9945#pg_CheckOut #ContentInner {
    background-color: var(--cana-ivory);
}

#pg_CheckOut #top-section h1 {
    font-family: var(--cana-font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 600;
    color: var(--cana-ink);
}

body.site9945#pg_CheckOut .form-control {
    height: 48px;
    padding: 0 14px;
    border-radius: var(--cana-radius-md);
}

body.site9945#pg_CheckOut .green-feature,
body.site9945#pg_CheckOut #book {
    color: var(--cana-forest);
    background-color: var(--cana-bone);
    border-radius: var(--cana-radius-md);
}

body.site9945#pg_CheckOut #priceIncreaseNote {
    color: var(--cana-ink);
    background-color: var(--cana-merlot-tint);
}

body.site9945#pg_CheckOut #staydatescheck { background-color: var(--cana-bone); }

body.site9945#pg_CheckOut .checkout-footer {
    background-color: var(--cana-ivory);
    border-color: var(--cana-line);
}

body.site9945#pg_CheckOut .checkoutSubmit,
#pg_CheckOut .checkoutSubmit {
    min-height: 56px;
    padding: 0 40px;
    font-family: var(--cana-font-body);
    font-size: 17px;
    font-weight: 600;
    color: var(--cana-white);
    background: var(--cana-merlot);
    border: 0;
    border-radius: var(--cana-radius-pill);
    box-shadow: none;
    transition: background-color var(--cana-ease), transform var(--cana-ease);
}

body.site9945#pg_CheckOut .checkoutSubmit:hover,
#pg_CheckOut .checkoutSubmit:hover {
    background: var(--cana-merlot-deep);
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Group travel request
   -------------------------------------------------------------------------- */

#pg_RequestForm #frmGroup input,
#pg_RequestForm #frmGroup select { padding: 10px 14px; }

#pg_RequestForm h1.PageHeader { margin-left: 16px; }

#pg_RequestForm .Request-How-Works b {
    display: block;
    margin-bottom: 6px;
    font-family: var(--cana-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cana-ink);
}

#pg_RequestForm .Request-How-Works .bulleted {
    display: inline-block;
    margin-top: 6px;
    margin-right: 8px;
    font-size: 15px;
}

#pg_RequestSmart .title-1,
#pg_RequestSmart #Slide-1 .subtagline {
    font-family: var(--cana-font-display);
    color: var(--cana-ink);
}

#pg_RequestSmart #frmRequestSmart .Submit {
    color: var(--cana-white);
    background-color: var(--cana-merlot);
    border: 2px solid var(--cana-merlot);
    border-radius: var(--cana-radius-pill);
}

#pg_RequestSmart #frmRequestSmart .Submit:hover {
    background-color: var(--cana-merlot-deep);
    border-color: var(--cana-merlot-deep);
}

#pg_RequestSmart #banner-smart { background-color: var(--cana-bone) !important; }

#pg_RequestSmart #frmRequestSmart .custom-select.active { border-color: var(--cana-ink) !important; }

#pg_RequestSmart #Slide-1 { background-image: url(//cdn.hotelplanner.com/common/images/site/6794/ew-hero-join.png); }


/* --------------------------------------------------------------------------
   jQuery UI datepicker and place autocomplete (shared across pages)
   -------------------------------------------------------------------------- */

#ui-datepicker-div.ui-datepicker,
.ui-datepicker {
    padding: 12px;
    font-family: var(--cana-font-body);
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
    box-shadow: var(--cana-hover-lift);
}

.ui-datepicker .ui-datepicker-header {
    color: var(--cana-ink);
    background: transparent;
    border: 0;
}

.ui-datepicker .ui-datepicker-title {
    font-family: var(--cana-font-display);
    font-weight: 600;
}

.ui-datepicker th {
    font-size: 12px;
    font-weight: 600;
    color: var(--cana-stone);
}

.ui-datepicker .ui-state-default {
    text-align: center;
    color: var(--cana-charcoal);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cana-radius-sm);
}

.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-state-default:hover {
    color: var(--cana-ink);
    background: var(--cana-bone);
    border-color: var(--cana-line);
}

.ui-datepicker .ui-state-highlight {
    color: var(--cana-ink);
    background: transparent;
    border-color: var(--cana-gold);
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active:hover {
    color: var(--cana-white);
    background: var(--cana-ink);
    border-color: var(--cana-ink);
}

#pacd-results-container {
    font-family: var(--cana-font-body);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-md);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Hotel profile V3 -- breathing room and softened corners.
   profile.min.css loads after this file, so every rule is scoped through
   body.site9945#pg_HotelProfileV3 to win on specificity without !important.
   Rhythm follows DESIGN.md spacing: 8 / 16 / 24 / 64 / 96.
   -------------------------------------------------------------------------- */

/* Page sections */
/* profile.min.css paints this block white with square corners; let it sit
   on the ivory page like the rest of the layout. */
body.site9945#pg_HotelProfileV3 #container-hotel,
body.site9945#pg_HotelProfileV3 #container-hotel .inner-ct {
    background: transparent;
    box-shadow: none;
}

body.site9945#pg_HotelProfileV3 #container-hotel { padding-bottom: 48px; }

body.site9945#pg_HotelProfileV3 #container-rates {
    margin: 0 0 64px;
    padding: 40px 32px;
}

body.site9945#pg_HotelProfileV3 #container-summary { padding: 16px 0 64px; }

/* Hotel head: name, overview, AI insight, highlights */
body.site9945#pg_HotelProfileV3 .hotel-card {
    gap: 16px;
    margin-bottom: 32px;
}

body.site9945#pg_HotelProfileV3 .hotel-card__header { line-height: 1.2; }

body.site9945#pg_HotelProfileV3 .hotel-card__stars { margin-top: 8px; }

/* No dividers: the three blocks sit side by side on desktop and stack on
   mobile, and a top rule only reads correctly in one of those layouts. */
body.site9945#pg_HotelProfileV3 .hotel-detail {
    padding: 0 0 24px;
    border-top: 0;
}

body.site9945#pg_HotelProfileV3 .hotel-detail__header { margin-bottom: 12px; }

body.site9945#pg_HotelProfileV3 .hotel-detail__label { font-size: 1.25rem; }

body.site9945#pg_HotelProfileV3 .hotel-detail__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 1.6;
}

body.site9945#pg_HotelProfileV3 .hotel-details__reviews {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

body.site9945#pg_HotelProfileV3 .hotel-detail__aiConversation {
    padding: 16px 20px;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
}

body.site9945#pg_HotelProfileV3 .hotel-detail__aiConversation p { margin: 0; }

body.site9945#pg_HotelProfileV3 .hotel-detail__amenities {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Photo grid */
body.site9945#pg_HotelProfileV3 .hotel-graphics { position: relative; }

body.site9945#pg_HotelProfileV3 .hotel-graphics .carousel-container {
    overflow: hidden;
    border-radius: var(--cana-radius-lg);
}

body.site9945#pg_HotelProfileV3 .hotel-graphics .carousel__responsive {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop: hero at 3:2 on the left, a 2×2 grid on the right. The thumbnails
   are absolutely positioned so they fill the hero's height instead of
   pushing the row taller with their 360×240 intrinsic size. */
@media (min-width: 768px) {
    body.site9945#pg_HotelProfileV3 .hotel-graphics {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
    }

    body.site9945#pg_HotelProfileV3 .hotel-graphics .carousel-container {
        width: 100%;
        min-width: 0;
        aspect-ratio: 3 / 2;
    }

    body.site9945#pg_HotelProfileV3 .hotel-graphics .main--carousel,
    body.site9945#pg_HotelProfileV3 .hotel-graphics .main--carousel .carousel__container,
    body.site9945#pg_HotelProfileV3 .hotel-graphics .main--carousel .carousel__image {
        height: 100%;
    }

    body.site9945#pg_HotelProfileV3 .hotel-graphics .static-container {
        position: relative;
        min-width: 0;
    }

    body.site9945#pg_HotelProfileV3 .hotel-graphics .static {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.site9945#pg_HotelProfileV3 .static__image {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        object-fit: cover;
        border-radius: var(--cana-radius-md);
    }
}

body.site9945#pg_HotelProfileV3 .hotel-graphics__caption {
    padding: 8px 16px;
    font-weight: 600;
    border-radius: var(--cana-radius-pill);
    box-shadow: var(--cana-hover-lift);
}

body.site9945#pg_HotelProfileV3 .carousel__button-backgroud { border-radius: 50%; }

/* Stay filter */
body.site9945#pg_HotelProfileV3 .stay-filter { gap: 24px; }

body.site9945#pg_HotelProfileV3 .stay-filter__header { margin-bottom: 16px; }

body.site9945#pg_HotelProfileV3 .stay-filter__label { font-size: 1.5rem; }

/* profile.min.css wraps both pickers in a white box; drop it and lay the
   two pickers out as equal-height tiles on the bone panel. */
body.site9945#pg_HotelProfileV3 .booking-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.site9945#pg_HotelProfileV3 .date-selector,
body.site9945#pg_HotelProfileV3 .occupancy-selector {
    display: flex;
    box-sizing: border-box;
    min-height: 72px;
    margin: 0;
    padding: 12px 20px;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-md);
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--cana-ease);
}

body.site9945#pg_HotelProfileV3 .date-selector {
    flex-direction: column;
    justify-content: center;
}

body.site9945#pg_HotelProfileV3 .occupancy-selector {
    align-items: center;
    gap: 12px;
}

body.site9945#pg_HotelProfileV3 .date-selector__stay-dates,
body.site9945#pg_HotelProfileV3 .date-selector__content {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.site9945#pg_HotelProfileV3 .occupancy-selector__content {
    display: flex;
    gap: 20px;
}

body.site9945#pg_HotelProfileV3 .occupancy-selector__content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.site9945#pg_HotelProfileV3 .date-selector__content,
body.site9945#pg_HotelProfileV3 .occupancy-selector__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--cana-ink);
}

/* The calendar, people and phone glyphs ship with the blue baked in. */
body.site9945#pg_HotelProfileV3 .icon--calendar,
body.site9945#pg_HotelProfileV3 .icon--group,
body.site9945#pg_HotelProfileV3 .icon--phone-small {
    filter: grayscale(1) brightness(0);
}

body.site9945#pg_HotelProfileV3 .date-selector:hover,
body.site9945#pg_HotelProfileV3 .occupancy-selector:hover { border-color: var(--cana-gold); }

body.site9945#pg_HotelProfileV3 .date-selector__label,
body.site9945#pg_HotelProfileV3 .occupancy-selector__label {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cana-stone);
}

body.site9945#pg_HotelProfileV3 .room-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.site9945#pg_HotelProfileV3 .room-selector .row-break {
    flex-basis: 100%;
    height: 0;
}

body.site9945#pg_HotelProfileV3 .room-selector__option {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    font-size: 14px;
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-pill);
    cursor: pointer;
}

body.site9945#pg_HotelProfileV3 .stay-filter__call .action-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    background: var(--cana-white);
    border: 1px solid var(--cana-ink);
    border-radius: var(--cana-radius-pill);
}

/* Room cards */
body.site9945#pg_HotelProfileV3 .rooms-container .room {
    margin-bottom: 24px;
    overflow: hidden;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
    transition: box-shadow var(--cana-ease);
}

body.site9945#pg_HotelProfileV3 .rooms-container .room:hover { box-shadow: var(--cana-hover-lift); }

body.site9945#pg_HotelProfileV3 .room-photos,
body.site9945#pg_HotelProfileV3 .carousel--room { border-radius: var(--cana-radius-md); overflow: hidden; }

body.site9945#pg_HotelProfileV3 .room-details__button { border-radius: var(--cana-radius-pill); }

body.site9945#pg_HotelProfileV3 .room-variant {
    padding: 24px;
    gap: 24px;
}

body.site9945#pg_HotelProfileV3 .room-variant + .room-variant { border-top: 1px solid var(--cana-line); }

body.site9945#pg_HotelProfileV3 .room-variant__name {
    margin-bottom: 8px;
    font-size: 1.25rem;
    line-height: 1.25;
}

body.site9945#pg_HotelProfileV3 .room-variant__cancel { margin-bottom: 16px; }

body.site9945#pg_HotelProfileV3 .room-variant__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
g
body.site9945#pg_HotelProfileV3 .promotional-banner__text {
    align-self: flex-start;
    margin: 0;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cana-merlot);
    background: var(--cana-merlot-tint);
    border-radius: var(--cana-radius-sm);
}

body.site9945#pg_HotelProfileV3 .room-variant__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

body.site9945#pg_HotelProfileV3 .room-variant__benefit { margin: 0; }

body.site9945#pg_HotelProfileV3 .room-variant__prices { margin-bottom: 16px; }

body.site9945#pg_HotelProfileV3 .room-variant__total-hint {
    margin-top: 4px;
    color: var(--cana-stone);
}

body.site9945#pg_HotelProfileV3 .room-variant__button {
    min-height: 48px;
    padding: 0 32px;
}

body.site9945#pg_HotelProfileV3 .room-variant__paymentType {
    margin-top: 8px;
    font-size: 14px;
    color: var(--cana-stone);
}

body.site9945#pg_HotelProfileV3 .message {
    padding: 20px 24px;
    border-radius: var(--cana-radius-md);
}

/* Details: reviews, description, policies, weather */
body.site9945#pg_HotelProfileV3 .detail-section {
    padding: 40px 0;
    border-top: 1px solid var(--cana-line);
    flex-direction: column;
}

body.site9945#pg_HotelProfileV3 .detail-section:first-child { border-top: 0; }

body.site9945#pg_HotelProfileV3 .detail-section__label {
    margin-bottom: 20px;
    font-size: 1.5rem;
    line-height: 1.2;
}

body.site9945#pg_HotelProfileV3 .detail-section__content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--cana-charcoal);
}

body.site9945#pg_HotelProfileV3 .detail-section__content p {
    max-width: 70ch;
    margin: 0 0 16px;
}

body.site9945#pg_HotelProfileV3 .detail-section__content p:last-child { margin-bottom: 0; }

body.site9945#pg_HotelProfileV3 .detail-section__content ul {
    max-width: 70ch;
    margin: 8px 0 16px;
    padding-left: 20px;
}

body.site9945#pg_HotelProfileV3 .detail-section__content li { margin-bottom: 8px; }

body.site9945#pg_HotelProfileV3 .detail-section__expand {
    display: inline-flex;
    margin-top: 16px;
    font-weight: 600;
}

body.site9945#pg_HotelProfileV3 .review-latest {
    display: grid;
    gap: 16px;
}

body.site9945#pg_HotelProfileV3 .review-list__item .review {
    height: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
}

body.site9945#pg_HotelProfileV3 .review__header { margin-bottom: 12px; }

body.site9945#pg_HotelProfileV3 .review__meta {
    gap: 8px;
    font-size: 14px;
    color: var(--cana-stone);
}

body.site9945#pg_HotelProfileV3 .review__title {
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--cana-ink);
}

body.site9945#pg_HotelProfileV3 .review__text { margin: 0; }

body.site9945#pg_HotelProfileV3 .weather {
    padding: 24px;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
    max-width: 1000px;
}

body.site9945#pg_HotelProfileV3 .weather__title {
    margin-bottom: 20px;
    font-family: var(--cana-font-display);
    font-size: 1.125rem;
    color: var(--cana-ink);
}

body.site9945#pg_HotelProfileV3 .weather__details-content { gap: 12px; }

body.site9945#pg_HotelProfileV3 .weather__stat {
    padding: 12px 14px;
    background: var(--cana-ivory);
    border-radius: var(--cana-radius-md);
}

body.site9945#pg_HotelProfileV3 .weather__units { gap: 4px; margin-top: 16px; }

body.site9945#pg_HotelProfileV3 .weather__units-link {
    padding: 6px 14px;
    border-radius: var(--cana-radius-pill);
    cursor: pointer;
}

body.site9945#pg_HotelProfileV3 .weather__units-active {
    color: var(--cana-white);
    background: var(--cana-ink);
}

body.site9945#pg_HotelProfileV3 a.cta__select-room {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 28px;
    font-weight: 600;
    border: 1px solid var(--cana-ink);
    border-radius: var(--cana-radius-pill);
}

body.site9945#pg_HotelProfileV3 a.cta__select-room:hover {
    color: var(--cana-white);
    background: var(--cana-ink);
    text-decoration: none;
}

/* Nearby hotels */
body.site9945#pg_HotelProfileV3 #container-nearby { padding: 40px 32px; }

body.site9945#pg_HotelProfileV3 .more-hotels-nearby {
    margin-bottom: 24px;
    font-family: var(--cana-font-display);
    font-size: 1.5rem;
    color: var(--cana-ink);
}

body.site9945#pg_HotelProfileV3 .nearby-card {
    overflow: hidden;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
}

/* Modals, gallery, AI chat, tooltips */
body.site9945#pg_HotelProfileV3 .modal__header { padding: 20px 24px; }

body.site9945#pg_HotelProfileV3 .modal__body { padding: 24px; }

body.site9945#pg_HotelProfileV3 .modal__category + .modal__category { margin-top: 40px; }

body.site9945#pg_HotelProfileV3 .modal__category-header {
    margin-bottom: 16px;
    font-family: var(--cana-font-display);
    font-size: 1.25rem;
    color: var(--cana-ink);
}

body.site9945#pg_HotelProfileV3 .modal__amenity,
body.site9945#pg_HotelProfileV3 .attractions-list__item {
    padding: 8px 0;
    line-height: 1.5;
}

body.site9945#pg_HotelProfileV3 div.hotel-card__logo > img {
    border-radius: 9999px;
}

body.site9945#pg_HotelProfileV3 .gallery { gap: 16px; }

body.site9945#pg_HotelProfileV3 .gallery__image img { border-radius: var(--cana-radius-md); }

body.site9945#pg_HotelProfileV3 .gallery__caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--cana-stone);
}

body.site9945#pg_HotelProfileV3 .ai-qa {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.site9945#pg_HotelProfileV3 .ai-qa__answer,
body.site9945#pg_HotelProfileV3 .ai-qa__question {
    padding: 14px 18px;
    line-height: 1.6;
    border-radius: var(--cana-radius-lg);
}

body.site9945#pg_HotelProfileV3 .ai-qa__question {
    background: var(--cana-merlot-tint);
}

body.site9945#pg_HotelProfileV3 .ai-qa__text,
body.site9945#pg_HotelProfileV3 .ai-qa__example { margin: 0 0 6px; }

body.site9945#pg_HotelProfileV3 .ai-qa__text:last-child,
body.site9945#pg_HotelProfileV3 .ai-qa__example:last-child { margin-bottom: 0; }

body.site9945#pg_HotelProfileV3 .modal__footer { padding: 16px 24px 24px; }

body.site9945#pg_HotelProfileV3 .ai-qa__form-fields { gap: 8px; }

body.site9945#pg_HotelProfileV3 .ai-qa__textarea {
    padding: 12px 16px;
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-md);
}

body.site9945#pg_HotelProfileV3 .ai-qa__submit { border-radius: 50%; }

body.site9945#pg_HotelProfileV3 .lodging-search__button,
body.site9945#pg_HotelProfileV3 .destination {
    border-radius: var(--cana-radius-md);
}

body.site9945#pg_HotelProfileV3 .static-tooltip {
    padding: 16px 20px;
    line-height: 1.6;
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-md);
    box-shadow: var(--cana-hover-lift);
}

@media (min-width: 768px) {
    body.site9945#pg_HotelProfileV3 .modal__dialog {
        overflow: hidden;
        border-radius: var(--cana-radius-xl);
    }

    body.site9945#pg_HotelProfileV3 .modal__body { padding: 32px; }
}

@media (max-width: 767px) {
    body.site9945#pg_HotelProfileV3 #container-rates,
    body.site9945#pg_HotelProfileV3 #container-nearby {
        margin-bottom: 40px;
        padding: 24px 16px;
    }

    body.site9945#pg_HotelProfileV3 .room-variant { padding: 20px 16px; }

    body.site9945#pg_HotelProfileV3 .detail-section { padding: 32px 0; }

    body.site9945#pg_HotelProfileV3 .detail-section__label { font-size: 1.25rem; }
}


/* Room cards
   profile.min.css tiles rooms three across and then splits each rate into
   name | price columns, leaving ~170px for long room names. Below 1024px the
   rate stacks (details, then a price + Book row); at 1024px and up each room
   becomes a full-width row with the photo on the left, which leaves room for
   the vendor's side-by-side rate layout. */
body.site9945#pg_HotelProfileV3 .rooms-container .room {
    margin-bottom: 24px;
    overflow: hidden;
    background: var(--cana-white);
    border: 1px solid var(--cana-line);
    border-radius: var(--cana-radius-lg);
    transition: box-shadow var(--cana-ease);
}

body.site9945#pg_HotelProfileV3 .rooms-container .room:hover { box-shadow: var(--cana-hover-lift); }

/* The card already clips to its radius; a second radius on the photo leaves
   white slivers in the corners. */
body.site9945#pg_HotelProfileV3 .rooms-container .room-photos,
body.site9945#pg_HotelProfileV3 .rooms-container .carousel--room {
    overflow: hidden;
    border-radius: 0;
}

body.site9945#pg_HotelProfileV3 .room-details__button { border-radius: var(--cana-radius-pill); }

body.site9945#pg_HotelProfileV3 .room-variant {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border: 0;
}

body.site9945#pg_HotelProfileV3 .room-variant + .room-variant { border-top: 1px solid var(--cana-line); }

body.site9945#pg_HotelProfileV3 .room-variant__content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

body.site9945#pg_HotelProfileV3 .room-variant__name {
    margin-bottom: 6px;
    font-size: 1.25rem;
    line-height: 1.25;
}

body.site9945#pg_HotelProfileV3 .room-variant__cancel {
    margin-bottom: 14px;
    font-size: 14px;
}

body.site9945#pg_HotelProfileV3 .room-variant__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.site9945#pg_HotelProfileV3 .promotional-banner__text {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--cana-merlot);
    background: var(--cana-merlot-tint);
    border-radius: var(--cana-radius-sm);
}

body.site9945#pg_HotelProfileV3 .room-variant__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

body.site9945#pg_HotelProfileV3 .room-variant__benefit { margin: 0; }

/* Stacked rate: prices on the left, Book Now on the right. */
body.site9945#pg_HotelProfileV3 .room-variant__rate-details {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    width: auto;
    max-width: none;
    padding-top: 20px;
    border-top: 1px solid var(--cana-bone);
}

body.site9945#pg_HotelProfileV3 .room-variant__prices {
    margin: 0;
    text-align: left;
}

body.site9945#pg_HotelProfileV3 .room-variant__price,
body.site9945#pg_HotelProfileV3 .room-variant__total {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

body.site9945#pg_HotelProfileV3 .room-variant__price .room-price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cana-ink);
}

body.site9945#pg_HotelProfileV3 .room-variant__total { color: var(--cana-charcoal); }

body.site9945#pg_HotelProfileV3 .room-variant__total-hint {
    margin-top: 4px;
    font-size: 13px;
    color: var(--cana-stone);
}

body.site9945#pg_HotelProfileV3 .room-variant__book {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.site9945#pg_HotelProfileV3 .room-variant__button {
    min-height: 48px;
    padding: 0 32px;
    white-space: nowrap;
}

body.site9945#pg_HotelProfileV3 .room-variant__paymentType {
    margin-top: 6px;
    font-size: 13px;
    color: var(--cana-stone);
}

@media (min-width: 1024px) {
    body.site9945#pg_HotelProfileV3 .rooms-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room {
        display: grid;
        grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
        align-items: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room > * { grid-column: 2; }

    /* Photos keep their native 3:2 and sit at the top of the column; filling
       the full card height cropped landscape shots into tall slivers
       whenever a room had two or more rates. Inset with its own radius so
       the white space beneath reads as intentional. */
    body.site9945#pg_HotelProfileV3 .rooms-container .room > .room-photos {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        position: relative;
        width: auto;
        height: auto;
        min-height: 0;
        margin: 16px 0 16px 16px;
        aspect-ratio: 3 / 2;
        border-radius: var(--cana-radius-md);
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-photos .carousel--room,
    body.site9945#pg_HotelProfileV3 .rooms-container .room-photos .carousel__container,
    body.site9945#pg_HotelProfileV3 .rooms-container .room-photos .carousel__image {
        height: 100%;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-photos .carousel--room {
        position: absolute;
        inset: 0;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-photos .carousel__responsive {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-variant {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        padding: 28px 32px;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-variant__rate-details {
        flex: 0 0 200px;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 0;
        border-top: 0;
    }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-variant__prices { text-align: right; }

    body.site9945#pg_HotelProfileV3 .rooms-container .room-variant__price,
    body.site9945#pg_HotelProfileV3 .rooms-container .room-variant__total { justify-content: flex-end; }
}

body.site9945 .guests-screen__guest-button {
    border-radius: 9999px;
}

body.site9945 .guests-screen__add-room {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive and motion
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    #subnav-wl,
    ul#navigation-wl li#message-wl { display: none; }

    .header-wl.with-subnav { padding-top: 12px; }

    .container-wl { padding: 0 16px; }

    ul#navigation-wl { right: 16px; }

    #logo-wl img {
        max-width: 160px;
        max-height: 40px;
        margin: 10px 0;
    }

    #pg_Home #landingpage #SearchSection { padding: 40px 0 56px; }

    #pg_Home #landingpage #SearchSection > .container { padding: 0 16px; }

    #pg_Home #landingpage .tab-links a,
    #pg_Home #landingpage .tab-links a:link,
    #pg_Home #landingpage .tab-links a:visited { padding: 0 16px; font-size: 14px; }

    #pg_Home #landingpage .tab-panel { padding: 20px; }

    body.site9945 #landingpage #IntroSection,
    body.site9945 #landingpage #AdvantagesSection { padding: 56px 16px; }

    #pg_SearchIndv #Rates .hotel-rates {
        padding: 16px;
        border-radius: var(--cana-radius-md);
    }

    body.site9945 footer a:link,
    body.site9945 footer a:visited { padding: 10px 8px; }
}

@media (max-width: 850px) {
    #LanguageWrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .Button:hover,
    .button:hover,
    #pg_Home #landingpage .submit:hover,
    #pg_SearchIndv #Rates .hotel-rates:hover,
    #pg_CheckOut .checkoutSubmit:hover {
        transform: none;
    }
}