/* Plus Jakarta Sans (headings, loaded in functions.php) and Jost (body) are loaded via <link> tags in
   header.php - which pairs with the preconnect hints already there - rather
   than @import here, which is render-blocking and was pulling in 16 whole
   font families when only these two were ever actually used. */

body
{
  font-family: 'Jost', sans-serif;
  font-weight: 400; /* regular weight */
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sticky footer: on short pages (e.g. 404) .site-content grows to fill
   whatever space is left in the viewport, pushing the footer down to the
   bottom instead of leaving blank page background beneath it. */
.site-content {
  flex: 1 0 auto;
}


h1, h2, h3, h4, h5, h6 {

  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.5px;
}

/* ========== Color Variables ========== */
/* Neutral, timeless base (backgrounds, text, structure) with the logo's own
   red/blue/gold reserved for highlights - buttons, links, icons, CTAs -
   rather than large colored surfaces. --primary/--dark/--gradient-blue keep
   their old names for backward compatibility with the ~120 places that
   reference them, but are now neutral charcoal, not navy. */
:root {
  --primary: #334155;
  --primary-two: #14213D;
  /*--secondary: #d01113;*/
  --secondary: #D61A21;
  --primary-light: #4A4E54;
  --secondary-light: #CC4A45;
  --dark: #334155;
  --white: #FFFFFF;
  /*--light-bg: #F6F5F3;*/
  --light-bg: hsl(34.29deg 46.67% 97.06%);
  --border: #E3E0DB;
  --gray-bg: #EDEAE5;
  --accent-gold: #ffc542;
  /* Warm bronze/copper accent used for small text labels (hero highlight
     word, room type label, section eyebrows) - passes contrast as text,
     while --accent-gold stays for icons, borders and tinted pill backgrounds. */
  --accent-bronze: #7A5230;
  --accent-bronze-tint: rgba(122, 82, 48, 0.14);
  /* Tint of the same navy used for headings - used for eyebrow pills that
     sit on a light/white background, where the bronze tint read as muddy. */
  --primary-tint: rgba(51, 65, 85, 0.08);
  /* Semantic confirmation color (e.g. "Free 24h Cancellation") - a standard
     UI convention, not a brand color, so it's kept separate from the palette above. */
  --success-green: #1F7A4D;
  --cream-bg: #F6F3EE;
  --accent-blue: #1F4E8C;
  --gradient-blue: linear-gradient(135deg, var(--dark) 0%, var(--primary-light) 100%);
  --gradient-blue-two: linear-gradient(135deg, #0f1930 0%, #14213D 50%, #243a66 100%);
}


a
{
    text-decoration: none;
    /*color: var(--primary);*/
}
p
{
    margin-bottom: 0;
    font-size: 1rem;
    opacity: 0.8;
}
/* Site-wide layout: .container fills the viewport like Bootstrap
   .container-fluid, but stops growing at 1800px and stays centered, so the
   page does not keep stretching on wider screens or when zoomed out.
   (Keep in sync with --mr-site-max in home.css.) */
.container,
.container-fluid
{
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 64px;
    padding-right: 64px;
}

@media (max-width: 1200px) {
    .container,
    .container-fluid { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 767px) {
    .container,
    .container-fluid { padding-left: 20px; padding-right: 20px; }
}

/* Header uses .container-fluid instead of .container (no CSS rule existed
   for it at all - it was just a plain block, so it stretched edge-to-edge
   at any viewport width). Past 1450px-wide viewports (a wide monitor, or
   zooming out), .container caps and centers the page content below the
   header, but the header itself kept spreading full-bleed - it visibly
   grew wider than the page content it sits above. Matching .container's
   max-width/centering here keeps the header's content width in sync with
   the rest of the page at every viewport size. */
.container-fluid
{
    max-width: none;
    margin: 0 auto;
}

/* The home page hero (.home-banner-fullbleed in index.php) is deliberately
   edge-to-edge with no .container wrapper at all, unlike every other
   page's hero/content - so the header needs to stay edge-to-edge there too
   in order to still match what's directly beneath it. Everywhere else the
   1450px cap above is what keeps the header in sync with the page. */
body.home .container-fluid
{
    max-width: none;
    margin: 0;
}





#lightboxOverlay {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
}

#lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}


.pre-init {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}
.slick-slider {
    transition: opacity 0.5s ease !important;
}
.slider-container, 
.home-gallery-slider,
.room-listing-slider {
    min-height: 300px; /* Adjust based on your content */
}


.home-promo-section {
    padding: 20px 0;    
}

.home-promo-banner {
    position: relative;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(36, 39, 44, 0.16);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.home-promo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 50px;
}

/* Same "Read our reviews on" badges as the hero, reused here on the promo
   photo's dark scrim instead of floating in the empty bottom-right corner. */
.home-promo-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    flex-shrink: 0;
}

.home-promo-card {
    max-width: 560px;
}

.home-promo-card h3 {
    color: var(--white);
    font-size: 2rem;
    margin-bottom: 14px;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.home-promo-card p {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    margin-bottom: 24px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.home-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--secondary);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 11px 25px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.home-promo-btn:hover {
    background: var(--secondary-light);
}

@media (max-width: 992px) {
    .home-promo-banner {
        height: 420px;
    }

    .home-promo-card h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 767px) {
    .home-promo-banner {
        height: auto;
        min-height: 380px;
        /* Fixed backgrounds are unreliable on mobile browsers (notably
           iOS Safari treats it as scroll anyway) - fall back to normal
           scroll behavior below desktop. */
        background-attachment: scroll;
    }

    .home-promo-overlay {
        padding: 28px;
        align-items: flex-end;
        /* Stacks on top of the banner's own baked-in gradient for extra
           contrast at this narrower, shorter layout. */
        background: linear-gradient(to top, rgba(15, 17, 22, 0.7) 0%, rgba(15, 17, 22, 0.5) 45%, rgba(15, 17, 22, 0.2) 75%, transparent 100%);
    }

    .home-promo-card h3 {
        font-size: 1.3rem;
    }

    .home-promo-card p {
        font-size: 0.92rem;
        margin-bottom: 18px;
    }
}

/* Site Loader Styles */
/* Loader Styles */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loader-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: pulse 2s infinite ease-in-out;
}

.logo-icon {
    color: var(--primary);
    font-size: 50px;
    font-weight: bold;
}

.logo-icon img
{
    height: 80px;
}

.loader-text {
    color: var(--secondary);
    margin-top: 30px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

.loader-progress {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    margin-top: 20px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--secondary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Pulsing Animation */
@keyframes pulse {
    0% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.95);
    }
}

.section-title
{
    font-weight: 600;
    /*color: var(--primary);*/
    color: #14213D;
}
/*Header CSS Start*/

/* ========== Header Styles ========== */
.top-header {
    background: var(--gradient-blue-two);
    padding: 7px 0;
    color: var(--white);
    position: relative;
    z-index: 1000;
    font-size: 14px;
}
.header-phone-link
{
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}
.top-header-detail a:not(:last-child)
{
    padding-right: 22px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.header-phone-link span
{
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.2px;
}
.header-phone-icon {
    animation: phone-ring 2.5s ease-in-out infinite;
}

.header-call-icon
{
    width: 26px;
    height: 26px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.main-header.transparent-front-page {
    position: relative;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);    
    z-index: 999;
    background: #ffffff2b;
    padding: 10px 0;
    /*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
}

.main-header.transparent-inner-page {
    background-color: var(--white);
    position: relative;
    width: 100%;
    left: 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.main-header.scrolled {
    position: fixed;
    top: 0;
    background-color: var(--white);
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
    /*padding: 10px 0;*/
}

.container {
    margin: 0 auto;
}

/* ========== Header Content Styles ========== */
.top-header-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    padding: 0 15px;
}

.top-header-ribbon {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.top-header-ribbon-highlight {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #4CAF50;
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

/* Diagonal light sweep looping across the pill to draw the eye to it. */
.top-header-ribbon-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: ribbon-shine 3s ease-in-out infinite;
}

@keyframes ribbon-shine {
    0% {
        left: -75%;
    }
    45%,
    100% {
        left: 130%;
    }
}

.top-header-ribbon-divider {
    color: rgba(255, 255, 255, 0.25);
}

.top-header-ribbon-note {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* The ribbon is purely decorative - drop it before the top bar is forced to
   wrap to two lines (which would inflate the header's height and push the
   hero down) */
@media (max-width: 1400px) {
    .top-header-ribbon {
        display: none;
    }
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 15px;
}

.top-social-icon {
    color: var(--primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.top-social-icon:hover {
    transform: translateY(-3px) scale(1.1);
}

/* Secondary Menu */
.secondary-menu {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.secondary-menu a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    position: relative;
    padding: 5px 0;
    font-size: 16px;
}


/* Main Header Content */
.main-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

/* Centered-logo desktop header: .header-nav-left and .header-nav-right both
   grow equally (flex: 1) so the logo between them - which doesn't grow -
   lands close to the middle of the row, regardless of how much nav content
   sits on either side. Only applies at desktop widths; below 993px
   .primary-navigation is hidden entirely (see existing rule further down)
   in favor of the separate .mobile-navigation drawer, so these groups
   simply collapse to just whatever's left visible in them (i.e. nothing on
   the left, the Book button on the right) with no layout changes needed. */
@media (min-width: 993px) {
    .header-nav-group {
        display: flex;
        align-items: center;
        flex: 1 1 0;
    }

    .header-nav-left {
        justify-content: flex-start;
    }

    .header-nav-right {
        justify-content: flex-end;
        gap: 24px;
    }

    .site-logo {
        flex: 0 0 auto;
    }
}

/* Above 1300px there's always enough room on both sides (verified down to
   1300px - .header-nav-right stays clear of the logo even with its extra
   "Book Your Room" button), so switch to absolute-centering the logo
   against .main-header-wrapper instead: flex: 1 1 0 above only balances the
   logo when .header-nav-left and .header-nav-right carry equal-width
   content, and .header-nav-right is always heavier (it also carries the
   button), which visibly pushed the logo off true-center at wide/zoomed-out
   viewports. Below 1300px that imbalance is small enough not to be worth
   the risk of the absolute logo overlapping nav text as things get tight
   near the 993px breakpoint. */
@media (min-width: 1300px) {
    .main-header-wrapper {
        position: relative;
    }

/*    .site-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }*/
}

/* "More" dropdown toggle - styled to match the other top-level nav links
   exactly (same class, same hover/underline treatment); the chevron is the
   only visual addition, and .sub-menu below it is the theme's existing
   dropdown component (already used for WP-registered sub-menu items), so
   the dropdown look/feel is identical to what's already on the site. */
.menu-item-has-children > a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.menu-item-has-children > a i {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.menu-item-has-children:hover > a i {
    transform: rotate(180deg);
}

/* Logo */
.site-logo
{
    background: #fff;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}
.site-logo .logo-image {
    height: 70px;
    width: auto;
    transition: all 0.3s;
}

.site-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Wordmark next to the crest, shown only in the mobile/tablet header (see
   below) - otherwise that space between the logo and the hamburger just
   sat empty. Nested inside .site-logo-link (one flex child of the header
   row) rather than a separate sibling element, so toggling it never
   changes how many items sit in .main-header-wrapper's flex row and can't
   shift the logo's position the way the old standalone .mobile-site-title
   element used to. */
.site-logo-text {
    display: none;
    flex-direction: column;
    line-height: 1.2;
}

.site-logo-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-two);
}

.site-logo-location {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary);
}

@media (max-width: 992px) {
    .site-logo-text {
        display: flex;
    }
}

/* A small credibility cue under the logo - the motel's own distinctive,
   verifiable identity (the landmark sign/name) rather than an unverified
   star rating or review count */
.header-tagline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
}

.header-tagline i {
    color: var(--accent-gold);
    font-size: 0.65rem;
}

@media (max-width: 1200px) {
    .header-tagline {
        display: none;
    }
}

.main-header.scrolled .site-logo .logo-image {
    height: 55px;
}

/* Navigation */
.primary-navigation {
    display: flex;
    align-items: center;
}

.mobile-navigation {
    display: flex;
    align-items: center;
}

.primary-menu {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-menu > li {
    position: relative;
}

.primary-menu > li > a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 10px 0;
    display: block;
    position: relative;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* Between the full desktop nav and the ~992px mobile menu breakpoint, the
   logo + 7 nav links + button no longer fit on one line at the original
   size - without this, each link's text wraps mid-label instead of the row
   wrapping, which reads as broken rather than responsive. */
@media (max-width: 1400px) {
    .primary-menu {
        gap: 16px;
    }

    .primary-menu > li > a {
        font-size: 15px;
    }

    .header-button {
        padding: 8px 18px;
        font-size: 0.8rem;
    }
}

/* Right before the mobile menu takes over, it's tighter still - shrink
   further rather than let the button wrap to three lines */
@media (max-width: 1150px) {
    .primary-menu {
        gap: 8px;
    }

    .primary-menu > li > a {
        font-size: 12px;
    }

    .header-button {
        gap: 4px;
        padding: 7px 10px;
        font-size: 0.68rem;
    }

    .header-button span {
        white-space: nowrap;
    }
}

/* Underline that fills in on hover and stays filled on whichever page is
   currently open, so visitors can tell where they are in the site */
.primary-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width 0.3s ease;
}

.primary-menu > li > a:hover {
    color: var(--secondary);
}

.primary-menu > li > a:hover::after {
    width: 100%;
}

.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a,
.primary-menu > li.current-menu-parent > a,
.primary-menu > li.current_page_parent > a,
.primary-menu > li.current-menu-ancestor > a {
    color: var(--secondary);
}

.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current_page_item > a::after,
.primary-menu > li.current-menu-parent > a::after,
.primary-menu > li.current_page_parent > a::after,
.primary-menu > li.current-menu-ancestor > a::after {
    width: 100%;
}



/* Dropdown Menu */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    background-color: var(--white);
    min-width: 240px;
    padding: 15px 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    transform: translateY(15px);
    z-index: 100;
}

.primary-menu > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.sub-menu li a {
    color: var(--dark);
    padding: 10px 25px;
    display: block;
    transition: all 0.2s;
    font-size: 15px;
}

.sub-menu li.current-menu-item > a,
.sub-menu li.current_page_item > a {
    color: var(--secondary);
    font-weight: 600;
    background-color: rgba(224, 43, 32, 0.05);
}

.sub-menu li a:hover {
    color: var(--secondary);
    background-color: rgba(224, 43, 32, 0.05);
    transform: translateX(5px);
}

/* Header Button */
.top-header-detail {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 25px;
}
.header-mobile-button-wrapper
{
    display: none;
}

.header-mobile-button-wrapper span
{
    color: var(--white);
    font-weight: 600;
}


.header-button {
    color: var(--white) !important;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    font-size: 0.85rem;
    background: var(--secondary);
    padding: 10px 25px;
    border-radius: 8px;
}

.header-button:hover {
    background: var(--secondary-light);
}


.header-mobile-button
{
    background-color: var(--white);
    color: var(--primary) !important;
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    font-size: 14px;
}


/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
    position: relative;
}

.mobile-menu-toggle .bar {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--primary);
    margin: 6px 0;
    transition: all 0.4s;
}

@media(min-width: 992px)
{
    .mobile-navigation
    {
        display: none;
    }
}

@media (max-width: 992px) {

    .top-header
    {
        display: none;
    }
    .primary-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        padding: 100px 30px 30px;
        transition: right 0.4s cubic-bezier(0.65, 0, 0.35, 1);
        z-index: 1000;
        display: none;
    }
    .mobile-navigation {
        position: fixed;
        top: 0;
        right: -120%;
        width: 290px;
        height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        padding: 15px 15px 15px;
        transition: right 0.4s cubic-bezier(0.65, 0, 0.35, 1);
        z-index: 1000;
        display: block;
    }
    .mobile-logo-image
    {
        height: 50px;
    }


    .primary-navigation.active {
        right: 0;
    }
    .mobile-navigation.active
    {
        right: 0;
    }
    .primary-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .primary-menu > li > a {
        color: var(--dark);
        padding: 15px 0 15px 14px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        border-left: 3px solid transparent;
    }

    /* The underline doesn't read well against the full-width row divider
       already used here - a left accent border fits the stacked list better */
    .primary-menu > li > a::after {
        display: none;
    }

    .primary-menu > li.current-menu-item > a,
    .primary-menu > li.current_page_item > a,
    .primary-menu > li.current-menu-parent > a,
    .primary-menu > li.current_page_parent > a,
    .primary-menu > li.current-menu-ancestor > a {
        border-left-color: var(--secondary);
        background: rgba(179, 39, 45, 0.05);
    }

    .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding: 0;
        background: none;
        transform: none;
    }

    .sub-menu li a {
        padding-left: 30px;
        font-size: 14px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .top-header-detail {
        display: none;
    }
    .header-mobile-button-wrapper
    {
        display: block;
    }

    /* Its only child (.primary-navigation) is already hidden below this
       width in favor of the separate mobile drawer, so this wrapper would
       otherwise sit in the header row as an empty flex item. */
    .header-nav-left {
        display: none;
    }

}

@media (max-width: 768px) {

    .top-header-wrapper {
        flex-direction: column;
        gap: 15px;
        padding: 10px 0;
    }

}

@media (max-width: 576px) {

    .site-logo .logo-image {
        height: 45px;
    }

    .site-logo-name {
        font-size: 0.95rem;
    }

    .site-logo-location {
        font-size: 0.62rem;
    }
}

@media (max-width: 360px) {

    .site-logo .logo-image {
        height: 38px;
    }

    .site-logo-link {
        gap: 6px;
    }

    .site-logo-name {
        font-size: 0.82rem;
    }

    .site-logo-location {
        font-size: 0.56rem;
    }
}

/*Header CSS End*/


/*Banner CSS Start*/

.slick-dotted.slick-slider
{
    margin-bottom: 0;
}

.home-banner-section
{
    width: 100%;
    padding: 0 25px;
    background: var(--white);
}

/* Full-bleed hero: the photo panel runs edge-to-edge across the entire
   viewport width (no container gutters, no rounded card), sized to exactly
   the space remaining below the header (--hero-offset, measured live in
   main.js) so the whole hero + header always fits on one screen with no
   scrolling. The booking bar (see .hero-booking-bar-section below) is
   absolutely positioned inside this box near its bottom edge, so it's
   already accounted for within this same height - it doesn't need any
   extra room carved out below the hero for it. The hero photos are shot/
   cropped at 2:1 (1800x960) to match that space closely, so object-fit:
   cover only has to trim a sliver, not perform a real crop. */
.hero-visual {
    position: relative;
    width: 100%;
    height: calc(90vh - var(--hero-offset, 150px));
    min-height: 420px;
    overflow: hidden;
    border-radius: 10px;
}

.hero-slides-bg {
    position: absolute;
    inset: 0;
}

/* Stacked on top of each other so main.js can crossfade between them by
   toggling .is-active - only the active one is at opacity:1 at any time.
   object-fit: cover is harmless here since the box's aspect-ratio already
   equals the photo's own ratio - there's nothing to crop or letterbox. */
.slide-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-position: center center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.slide-image.is-active {
    opacity: 1;
}

/* Top-down gradient for extra contrast near the top/bottom edges (where the
   rating badges, dots and booking bar sit), layered over a flat baseline
   tint so the middle of the photo - now a valid text position too, since
   Text Position offers Middle Left/Center/Right - isn't left almost
   un-tinted the way the gradient alone left it (it dropped to ~0 opacity
   between 45%-65%). The flat layer keeps every position legible regardless
   of how bright that spot in the photo is. */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 24, 34, 0.42) 0%, rgba(20, 24, 34, 0.08) 45%, rgba(20, 24, 34, 0) 65%, rgba(20, 24, 34, 0.5) 100%),
        rgba(20, 24, 34, 0.3);
    pointer-events: none;
}

/* Swaps in sync with the background photo (see main.js) - fades the
   outgoing slide's text out, then the incoming one in, rather than an
   abrupt cut, matching the photo's own crossfade. Each slide carries its
   own position (all 9 combinations of top/middle/bottom x left/center/right),
   set per photo in the admin (Home Page Content > Slider Content >
   Text Position) to match wherever that image's open sky actually is. */
.hero-text-slides {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-text-slide {
    display: none;
    opacity: 0;
    position: absolute;
    top: 36px;
    max-width: 480px;
    padding: 0 24px;
    transition: opacity 0.4s ease;
    pointer-events: auto;
}

.hero-text-slide.is-active {
    display: block;
}

.hero-text-slide.is-active.is-visible {
    opacity: 1;
}

/* Vertical anchor */
.hero-text-pos-top-left,
.hero-text-pos-top-center,
.hero-text-pos-top-right {
    top: 36px;
}

.hero-text-pos-middle-left,
.hero-text-pos-middle-center,
.hero-text-pos-middle-right {
    top: 50%;
}

.hero-text-pos-bottom-left,
.hero-text-pos-bottom-center,
.hero-text-pos-bottom-right {
    top: auto;
    bottom: 36px;
}

/* Horizontal anchor */
.hero-text-pos-top-left,
.hero-text-pos-middle-left,
.hero-text-pos-bottom-left {
    left: 24px;
    text-align: left;
}

.hero-text-pos-top-center,
.hero-text-pos-middle-center,
.hero-text-pos-bottom-center {
    left: 50%;
    text-align: center;
}

.hero-text-pos-top-right,
.hero-text-pos-middle-right,
.hero-text-pos-bottom-right {
    right: 24px;
    text-align: right;
}

/* Centering transforms - middle rows need a Y offset, center columns need
   an X offset, so the middle-center corner needs both at once */
.hero-text-pos-top-center {
    transform: translateX(-50%);
}

.hero-text-pos-middle-left,
.hero-text-pos-middle-right {
    transform: translateY(-50%);
}

.hero-text-pos-middle-center {
    transform: translate(-50%, -50%);
}

.hero-text-pos-bottom-center {
    transform: translateX(-50%);
}

.hero-text-pos-top-center .hero-cta-group,
.hero-text-pos-middle-center .hero-cta-group,
.hero-text-pos-bottom-center .hero-cta-group {
    justify-content: center;
}

.hero-text-pos-top-right .hero-cta-group,
.hero-text-pos-middle-right .hero-cta-group,
.hero-text-pos-bottom-right .hero-cta-group {
    justify-content: flex-end;
}

/* Small dot indicators over the photo so visitors can tell (and control)
   that it's cycling through multiple images, without bringing back a full
   slider UI (arrows/captions). Bottom offset clears the search bar below it
   (which now sits entirely on the photo, 28px up from the hero's own bottom
   edge - see .hero-booking-bar-section - at its own live-measured height,
   --booking-bar-height) with a 20px gap on top of that. */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: calc(var(--booking-bar-height, 90px) + 48px);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.hero-dot.is-active {
    width: 20px;
    border-radius: 5px;
    background: var(--white);
}

.hero-eyebrow {
    display: block;
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    animation: fadeInLeft 0.8s ease both;
}

.hero-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.1rem, 1.2rem + 1.6vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--white);
    font-weight: 700;
    margin: 0 0 16px;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
    animation: fadeInLeft 0.8s ease 0.15s both;
}

.hero-heading em {
    font-style: italic;
    color: var(--accent-gold);
}

.hero-description {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 440px;
    margin: 0 0 24px;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
    animation: fadeInLeft 0.8s ease 0.3s both;
}

.hero-text-pos-top-center .hero-description,
.hero-text-pos-middle-center .hero-description,
.hero-text-pos-bottom-center .hero-description {
    margin-left: auto;
    margin-right: auto;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    animation: fadeInLeft 0.8s ease 0.6s both;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hero-cta-primary {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    color: var(--white);
}

.hero-cta-primary:hover {
    background: var(--secondary-light);
    border-color: var(--secondary-light);
    color: var(--white);
}

.hero-cta-secondary {
    background: var(--white);
    color: var(--primary);
    backdrop-filter: blur(2px);
}

.hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--white);
    color: var(--primary);
}

/* Bottom-left overlay strip, independent of the swapping text block above -
   the rating badges stay put across every slide. Bottom offset clears the
   search bar below it (which now sits entirely on the photo, 28px up from
   the hero's own bottom edge - see .hero-booking-bar-section - at its own
   live-measured height, --booking-bar-height) so the two never collide
   regardless of how tall that bar renders. */
.hero-rating {
    position: absolute;
    left: 24px;
    bottom: calc(var(--booking-bar-height, 90px) + 48px);
    z-index: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(20, 24, 34, 0.45);
    border-radius: 30px;
    backdrop-filter: blur(3px);
}

.hero-rating-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 500;
}

.hero-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hero-rating-badge:hover {
    color: var(--accent-gold);
}

.hero-rating-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Below this width there isn't room for a wide text box positioned anywhere
   over the photo, so every slide's text drops to a common bottom-anchored,
   full-width band (regardless of its configured position) with a stronger
   scrim behind it for guaranteed legibility */
@media (max-width: 992px) {
    .hero-text-slide {
        max-width: 60%;
    }

    .hero-scrim {
        background: linear-gradient(180deg, rgba(20, 24, 34, 0.35) 0%, rgba(20, 24, 34, 0.1) 30%, rgba(20, 24, 34, 0.75) 78%, rgba(20, 24, 34, 0.85) 100%);
    }

    .hero-text-slide,
    .hero-text-pos-top-left,
    .hero-text-pos-top-center,
    .hero-text-pos-top-right,
    .hero-text-pos-middle-left,
    .hero-text-pos-middle-center,
    .hero-text-pos-middle-right,
    .hero-text-pos-bottom-left,
    .hero-text-pos-bottom-center,
    .hero-text-pos-bottom-right {
        top: auto;
        bottom: calc(var(--booking-bar-height, 90px) + 48px);
        left: 20px;
        right: 20px;
        transform: none;
        max-width: none;
        text-align: left;
    }

    .hero-text-pos-top-center .hero-cta-group,
    .hero-text-pos-top-right .hero-cta-group,
    .hero-text-pos-middle-center .hero-cta-group,
    .hero-text-pos-middle-right .hero-cta-group,
    .hero-text-pos-bottom-center .hero-cta-group,
    .hero-text-pos-bottom-right .hero-cta-group {
        justify-content: flex-start;
    }

    .hero-text-pos-top-center .hero-description,
    .hero-text-pos-middle-center .hero-description,
    .hero-text-pos-bottom-center .hero-description {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-rating {
        display: none;
    }
}

/* On phones the desktop "photo fills the screen, text floats on top of it"
   pattern breaks down two ways at once: (1) height: 100vh - header forces
   the photo into a tall narrow box, and object-fit: cover has to crop away
   most of a 2:1 photo's width to fill it - usually leaving empty sky
   instead of the actual subject; (2) that same tall box doesn't leave
   reliable room for the full text block + reviews row + dots to be
   absolutely positioned on top of it without clipping or overlapping each
   other (overflow: hidden was cutting them off). Below this width the photo
   becomes a normal, shorter strip (so cropping only trims a sliver, not
   most of the frame) and the text/reviews/dots flow in normal document flow
   underneath it on a solid dark panel that continues the photo's own
   gradient - still reads as one hero band, but nothing is stacked on top of
   anything else so nothing can clip or overlap. */
@media (max-width: 767px) {
    .hero-visual {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
        background: rgb(20, 24, 34);
    }

    .hero-slides-bg {
        position: relative;
        height: 220px;
        flex-shrink: 0;
    }

    .hero-scrim {
        background: linear-gradient(180deg, rgba(20, 24, 34, 0.15) 0%, rgba(20, 24, 34, 0.05) 45%, rgba(20, 24, 34, 1) 100%);
    }

    /* Each slide's title/description is a different length, so once they're
       flowing normally (see above) swapping the active one resizes
       .hero-text-slides to match its own content height, which shifts the
       reviews row/dots/search bar below it up or down every time the slide
       rotates. Stacking every slide in the same CSS grid cell fixes that:
       the (invisible) inactive slides still occupy that cell for sizing
       purposes, so the grid area is always as tall as the tallest slide and
       stays constant no matter which one is currently shown. */
    .hero-text-slides {
        position: static;
        display: grid;
        padding: 20px 20px 4px;
    }

    .hero-text-slide {
        display: block;
        grid-area: 1 / 1;
        position: static;
        visibility: hidden;
        pointer-events: none;
    }

    .hero-text-slide.is-active {
        visibility: visible;
        pointer-events: auto;
    }

    .hero-rating {
        position: static;
        align-self: flex-start;
        margin: 0 20px 16px;
        background: rgba(255, 255, 255, 0.08);
    }
    .home-banner-section, .main-header-wrapper
    {
        padding: 0;
    }

    .hero-dots {
        position: static;
        transform: none;
        justify-content: center;
        padding: 0 0 18px;
    }
    .hero-booking-bar-section
    {
        display: none;
    }
}



/* Booking Bar - sits in normal flow below the photo/content row, so it never
   covers any part of the photo */
.banner-booking-bar {
    position: relative;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--white);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    animation: heroBarFadeIn 0.8s ease 0.4s both;
}

@keyframes heroBarFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.booking-bar-form {
    display: flex;
    align-items: stretch;
}

.booking-bar-field {
    flex: 1;
    min-width: 0;
    padding: 18px 28px;
    border-right: 1px solid #EAEDF1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.booking-bar-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8993A4;
}

.booking-bar-field label i {
    color: var(--secondary);
}

.booking-bar-field input,
.booking-bar-field select {
    border: none;
    padding: 0;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--dark);
    width: 100%;
}

.booking-bar-field input:focus,
.booking-bar-field select:focus {
    outline: none;
}

.booking-bar-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-top: 1px solid #EAEDF1;
    font-size: 0.8rem;
    color: #6B7686;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.trust-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2E9E5B;
    flex-shrink: 0;
}

.trust-sep {
    color: #D5DAE1;
}

@media (max-width: 767px) {
    .booking-bar-trust-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .trust-sep {
        display: none;
    }
}

.booking-bar-search-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 40px;
    border: none;
    background: var(--secondary);
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.booking-bar-search-btn:hover {
    background: var(--primary);
}

@media (max-width: 992px) {
    .booking-bar-form {
        flex-wrap: wrap;
    }

    .booking-bar-field {
        flex: 1 1 50%;
        border-bottom: 1px solid #EAEDF1;
    }

    .booking-bar-search-btn {
        flex: 1 1 100%;
        padding: 16px;
    }
}

/* Why Choose Us */
.why-choose-us {
    padding: 70px 0 50px;
    background: var(--light-bg);
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.why-choose-card {
    background: var(--white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(10, 22, 38, 0.06);
}

.why-choose-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 18px;
}

.why-choose-icon-blue {
    background: #E4EEFB;
    color: var(--primary-light);
}

.why-choose-icon-orange {
    background: #FBEADF;
    color: var(--secondary);
}

.why-choose-icon-green {
    background: #E4F5EA;
    color: #2E9E5B;
}

.why-choose-card h3 {
    font-size: 1.15rem;
    color: var(--primary);
    margin: 0 0 10px;
}

.why-choose-card p {
    font-size: 0.95rem;
    color: #6B7686;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
    }
}

/* Slick Slider Customization */
.slick-dots {
    position: absolute;
    bottom: 60px;
    right: 100px;
    width: auto;
    display: flex !important;
    gap: 12px;
}

.slick-dots li {
    width: 50px;
    height: 4px;
    margin: 0;
}

.slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
}

.slick-dots li button:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    opacity: 1;
    transition: all 0.3s ease;
}

.slick-dots li.slick-active button:before {
    background: var(--white);
}

.slick-prev, .slick-next {
    display: none !important;
}



/*Banner CSS End*/




/*Fitness & Sports Section CSS START*/



/*Fitness & Sports Section CSS END*/

/* ========== Footer Styles Start ========== */

.footer {
    color: var(--white);
    padding: 30px 0 30px;
    /*border-top: 3px solid var(--accent-gold);*/
    position: relative;
    width: 100%;
    /* Real motel exterior photo (set via the Footer Background field) sits
       under a dark tint so the white text/links stay legible - falls back
       to the old flat gradient if no image is set in the backend. */
    background-image: linear-gradient(160deg, rgba(20, 23, 30, 0.93) 0%, rgba(20, 23, 30, 0.88) 55%, rgba(20, 23, 30, 0.95) 100%), var(--footer-bg-image, var(--gradient-blue));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 993px) {
    .footer {
        background-attachment: fixed;
    }
}

.footer-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
    gap: 36px;
    position: relative;
}

.footer-map-frame {
    border-radius: 10px;
    overflow: hidden;
    height: 190px;
    filter: grayscale(0.15) contrast(1.05);
}

.footer-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.footer-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #298dff;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-directions-link:hover {
    color: var(--white);
}

.footer-logo {
    margin-bottom: 16px;
}

.footer-logo img
{
    height: 90px;
    background: var(--white);
    padding: 10px;
    border-radius: 8px;
}


.footer-about {
    margin-bottom: 25px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--secondary);
    color: var(--white);
    transform: translateY(-3px);
}

/* Official per-platform brand colors instead of one flat gray circle.
   Compound class selectors (.social-icon.social-icon-x) so these reliably
   beat the more specific ".contact-social .social-icon" rule used on the
   Contact page's copy of this same markup, regardless of source order. */
.social-icon.social-icon-facebook {
    background: #1877F2;
}

.social-icon.social-icon-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-icon.social-icon-x {
    background: #000000;
}

.social-icon.social-icon-youtube {
    background: #FF0000;
}

.social-icon.social-icon-linkedin {
    background: #0A66C2;
}

.social-icon.social-icon-facebook:hover,
.social-icon.social-icon-instagram:hover,
.social-icon.social-icon-x:hover,
.social-icon.social-icon-youtube:hover,
.social-icon.social-icon-linkedin:hover {
    filter: brightness(1.15);
    color: var(--white);
    transform: translateY(-3px);
}

.footer-heading {
    font-size: 1.05rem;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 14px;
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--white);
}


.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}

.footer-links a:hover {
    padding-left: 5px;
    color: var(--accent-gold);
}

.footer-links i {
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    transition: color 0.3s ease;
}

.footer-links a:hover i {
    color: var(--accent-gold);
}

.footer-contact-info {
    list-style: none;
    padding: 0;
}

.footer-contact-info li {
    display: flex;
    margin-bottom: 20px;
}

.footer-contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    color: var(--white);
}

.footer-contact-details {
    flex: 1;
}

.footer-contact-details h4 {
    margin-bottom: 5px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.footer-contact-details p,
.footer-contact-details a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-details a:hover {
    color: var(--accent-gold);
}


.footer-bottom {
    margin: 0 auto;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
}


.copyright
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}
.copyright a
{
    color: rgba(255, 255, 255, 0.9);
}

.copyright p {
    margin: 0;
}

.footer-legal-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-legal-link:hover {
    color: var(--white);
}

.footer-payment {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-payment-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    white-space: nowrap;
}

.footer-payment-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-payment-icons i {
    color: var(--white);
    width: 34px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Each card's own official brand color, same treatment as the footer
   social icons' brand-colored backgrounds. */
.footer-payment-icon-amex {
    background: #006FCF;
}

.footer-payment-icon-visa {
    background: #1A1F71;
}

.footer-payment-icon-mastercard {
    background: linear-gradient(90deg, #EB001B 50%, #F79E1B 50%);
}

.footer-payment-icon-jcb {
    background: #0E4C96;
}

.footer-payment-icon-discover {
    background: #FF6000;
}

.footer-payment-unionpay {
    background: linear-gradient(90deg, #E21836 33%, #00447C 33% 66%, #007B84 66%);
    color: var(--white);
    height: 24px;
    padding: 0 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}


@media (max-width: 1200px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-logo-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-logo-col {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-payment {
        flex-direction: column;
        gap: 10px;
    }
}

/* ========== Footer Styles End ========== */



/* ===== ADA Accessibility Callout Start ===== */
/* Nested inside .hero-visual and absolutely positioned against it (its
   nearest positioned ancestor), 28px up from the hero's own bottom edge -
   so the bar sits entirely on top of the hero photo, with clear space below
   it, instead of straddling the hero/page boundary. .hero-quick-check
   itself is centered via width: fit-content + margin: 0 auto (see below),
   so this wrapper just needs to span the full width for that to center
   against. */
.hero-booking-bar-section {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 5;
}

/* On phones the hero is no longer that tall absolutely-positioned photo (see
   .hero-visual above) - it's a flex column, and this section is one of its
   flex items. Dropping back to position: static lets it flow normally right
   after the dots instead of floating over them, and it picks up a light
   background of its own since .hero-visual's background is dark there. */
@media (max-width: 767px) {
    .hero-booking-bar-section {
        position: static;
        background: var(--light-bg);
        padding: 16px 0 20px;
    }
}

/* Same search bar, used on pages with no hero image behind it (e.g. the
   standalone Rooms page) - sits inline after the section title instead of
   overlapping something above it. */
.page-booking-bar-wrapper {
    margin: 20px 0;
}

.hero-booking-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(36, 39, 44, 0.14);
    padding: 22px 28px;
}

.hero-booking-field {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}

.hero-booking-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
}

.hero-booking-field label i {
    color: var(--primary);
    font-size: 0.85rem;
}

.hero-booking-field input,
.hero-booking-field select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    color: var(--primary);
    background: var(--white);
}

.hero-booking-field input:focus,
.hero-booking-field select:focus {
    outline: none;
    border-color: var(--secondary);
}

.hero-booking-bar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary-two);
    color: var(--white);
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 25px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s ease;
    height: 42px;
}

.hero-booking-bar-btn:hover {
    background: var(--secondary-light);
}

/* Compact "check dates" teaser bar - replaces the full filter form on the
   homepage hero (the real date/guests/room-type search lives on the Rooms
   page, which still has its own full copy of that widget); this just needs
   to get visitors there. Sized/shaped after a reference the client liked,
   but colored with the site's own palette rather than that reference's. */
.hero-quick-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(36, 39, 44, 0.14);
    padding: 18px 24px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-quick-check:hover {    
    box-shadow: 0 18px 40px rgba(36, 39, 44, 0.18);
}

.hero-quick-check-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-quick-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
}

.hero-quick-check-label i {
    color: var(--secondary);
}

.hero-quick-check-value {
    font-size: 0.95rem;
    color: #8993A4;
}

.hero-quick-check-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-two);
    color: var(--white);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 12px 26px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.hero-quick-check:hover .hero-quick-check-btn {
    background: var(--secondary-light);
}

@media (max-width: 575px) {
    .hero-quick-check {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 14px;
    }

    .hero-quick-check-info {
        align-items: center;
    }

    .hero-quick-check-btn {
        justify-content: center;
    }
}

.room-listing-filter-note {
    display: none;
    text-align: center;
    color: #5A6472;
    font-size: 0.9rem;
    margin: -10px 0 20px;
}

.room-listing-filter-note a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
}

.room-listing-no-results {
    display: none;
    text-align: center;
    color: #5A6472;
    padding: 30px 0;
}

@media (max-width: 991px) {
    .hero-booking-bar {
        flex-wrap: wrap;
    }

    .hero-booking-field {
        flex: 1 1 45%;
    }

    .hero-booking-bar-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 767px) {
    .hero-booking-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    .hero-booking-field {
        flex: 1 1 auto;
    }
}

.ada-callout-section {
    padding: 0 0 30px;
    background: var(--light-bg);
}

.ada-callout {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-radius: 14px;
    background: var(--primary-two);
}

.ada-callout-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.ada-callout-text {
    flex: 1 1 auto;
    min-width: 200px;
}

.ada-callout-text h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.15rem;
    color: var(--white);
    margin: 0 0 4px;
    font-weight: 700;
}

.ada-callout-text p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.ada-callout-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 25px;
    border-radius: 8px;
    background: var(--secondary);
    color: var(--white);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.ada-callout-btn i {
    color: var(--white);
    display: inline-block;
    transform-origin: center;
    animation: phone-ring 2.5s ease-in-out infinite;
}

/* Quick ring wiggle, then a pause before repeating - mimics a ringing phone. */
@keyframes phone-ring {
    0%, 100% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(-18deg);
    }
    8% {
        transform: rotate(14deg);
    }
    12% {
        transform: rotate(-10deg);
    }
    16% {
        transform: rotate(8deg);
    }
    20% {
        transform: rotate(-4deg);
    }
    24%,
    60% {
        transform: rotate(0deg);
    }
}

.ada-callout-btn:hover {
    background: var(--secondary-light);
    color: var(--white);
}

.ada-callout-btn:hover i {
    color: var(--white);
}

@media (max-width: 767px) {
    .ada-callout {
        flex-wrap: wrap;
    }

    .ada-callout-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}
/* ===== ADA Accessibility Callout End ===== */

/* ===== Rooms Section Styles Start ===== */
.room-listing-section {
    padding: 20px 0;
    background: var(--light-bg);
}

.room-listing-title {
    text-align: center;
    margin-bottom: 30px;
}



.room-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.room-listing-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.room-listing-card:hover {    
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.room-listing-image {
    height: 260px;
    position: relative;
    overflow: hidden;
}

.room-listing-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(23, 24, 26, 0.55), transparent);
    pointer-events: none;
}

.room-listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.room-listing-gallery-btn {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(23, 24, 26, 0.55);
    backdrop-filter: blur(2px);
    color: var(--white);
    border: none;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s;
}

.room-listing-gallery-btn:hover {
    background: rgba(23, 24, 26, 0.8);
}

/* Icon-only on the Rooms page row layout (the photo count text is dropped
   there - see page-rooms.php); the homepage's card also uses the
   .room-listing-image-slider class now (for its own prev/next arrows) but
   keeps its "X Photos" text and pill shape untouched, so this is scoped to
   .room-listing-row specifically rather than every slider. */
.room-listing-row .room-listing-image-slider .room-listing-gallery-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

/* Room Details, overlaid on the photo (Rooms page row layout only) instead
   of sitting in the price column - mirrors .room-listing-gallery-btn's
   corner-pill treatment, just on the opposite corner. */
.room-listing-image-details-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-two);
    border: none;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s;
}

.room-listing-image-details-btn:hover {
    background: var(--white);
    color: var(--primary-two);
}

/* Positioning badge over the photo - derived from the room's own real
   capacity/bed data (get_room_badge()), not a fabricated claim. Two
   treatments: a small corner pill for most rooms, and a full-width banner
   reserved for the one room we editorially flag as "most popular". */
.room-listing-badge {
    position: absolute;
    z-index: 2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.room-listing-badge.is-pill {
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.68rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.room-listing-badge.is-banner {
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.room-badge-dark {
    background: rgba(23, 24, 26, 0.82);
    color: var(--white);
}

.room-badge-featured {
    background: #4CAF50;
    color: var(--white);
    overflow: hidden;
}

/* Same looping light sweep used on the header's "Direct Booking" pill. */
.room-badge-featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: ribbon-shine 3s ease-in-out infinite;
}

.room-listing-details {
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Pill badge with a circular icon - shared by the homepage grid cards and
   the Rooms page row cards, so the room type reads identically everywhere. */
.room-listing-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: rgba(4, 48, 110, 0.08);
    color: var(--primary-two);
    text-transform: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0;
    padding: 5px 14px 5px 5px;
    border-radius: 30px;
    margin: 0 0 6px;
}

.room-listing-type i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-two);
    color: var(--white);
    font-size: 0.7rem;
}

/* Homepage cards only: type label and bed/guest badges share one row above
   the title, instead of crowding onto the same line as the (often long)
   room name, which forced the badges onto their own wrapped line. */
.room-listing-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 6px;
}

.room-listing-type-row .room-listing-type {
    margin-bottom: 0;
}

.room-listing-type-row .room-listing-fact-badges {
    margin-left: auto;
}

.room-listing-heading-row {
    margin-bottom: 10px;
}

.room-listing-name {    
    font-size: 1.8rem;
    color: var(--primary-two);
    font-weight: 600;
    letter-spacing: 0;
    margin: 0;
}

.room-listing-price {
    flex-shrink: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-style: normal;
    font-size: 1.25rem;
    color: var(--primary-two);
    font-weight: 700;
    white-space: nowrap;
}

.room-listing-price span {
    
    font-style: normal;
    font-size: 0.8rem;
    color: #7f8c8d;
    font-weight: normal;
}

.room-listing-description {
    color: #5A6472;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 16px;
}

.room-listing-amenities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-bottom: 16px;
}

/* Price + actions travel together as one footer unit pinned to the card's
   bottom, so a shorter amenities list leaves one clean gap above the
   divider instead of stranding the buttons away from the price. */
.room-listing-footer {
    margin-top: auto;
}

.room-listing-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    margin-bottom: 16px;
    border-top: 1px solid var(--border);
}

.room-listing-policy-tag {
    color: var(--success-green);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.room-listing-note
{
    padding: 10px;
    background: #EFF3F7;
    border-radius: 8px;
    margin-bottom: 20px;
}

.room-listing-amenity {
    font-size: 0.82rem;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 7px;
}

.room-listing-amenity i {
    color: var(--primary);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Homepage cards only: each icon cycles through the site's real accent
   palette instead of one flat color, and amenities past the 5th are
   collapsed behind the "+N additional amenities" toggle below, so a room
   with a long feature list doesn't blow out the card's height. */
.room-listing-amenity.accent-1 i { color: var(--secondary); }
.room-listing-amenity.accent-2 i { color: var(--accent-blue); }
.room-listing-amenity.accent-3 i { color: var(--success-green); }
.room-listing-amenity.accent-4 i { color: var(--accent-bronze); }
.room-listing-amenity.accent-5 i { color: var(--primary-two); }

.room-listing-amenity-extra {
    display: none;
}

.room-listing-amenities.is-expanded .room-listing-amenity-extra {
    display: flex;
}

.room-listing-amenities-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-two);
    cursor: pointer;
}

.room-listing-amenities-toggle:hover {
    color: var(--secondary);
}

.room-listing-amenities-toggle i {
    font-size: 0.68rem;
    transition: transform 0.3s ease;
}

.room-listing-amenities.is-expanded .room-listing-amenities-toggle i {
    transform: rotate(90deg);
}

.room-listing-amenities-toggle-less {
    display: none;
}

.room-listing-amenities.is-expanded .room-listing-amenities-toggle-more {
    display: none;
}

.room-listing-amenities.is-expanded .room-listing-amenities-toggle-less {
    display: inline;
}

.room-listing-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.room-listing-details-link, .room-listing-book-btn {
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.room-listing-more-note {
    text-align: center;
    padding: 24px 0 4px;
}

.room-listing-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.room-listing-more-link:hover {
    color: var(--secondary);
}

.room-listing-more-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.room-listing-more-link:hover i {
    transform: translateX(3px);
}

.more-rooms-link
{
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
    background: var(--primary-two);
    color: var(--white);
}

.room-listing-details-link {
    flex: 0 0 auto;
    color: var(--primary);
    border: 1px solid var(--border);
    background: var(--white);
}

.room-listing-details-link:hover {
    background: var(--light-bg);
    border-color: #C9C4BB;
}

.room-listing-book-btn {
    flex: 1 1 auto;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
}

.room-listing-book-btn:hover {
    background: var(--secondary-light);
    color: var(--white);
}

/* Horizontal list-row layout - Rooms page only. page-rooms.php has its own
   copy of the .room-listing-* markup (separate from the vertical grid cards
   on the homepage in index.php), and adds the .room-listing-row modifier
   class plus two new wrapper columns (.room-listing-info-col,
   .room-listing-price-col) that only exist in that file, so none of this
   touches the homepage's card design. */
.room-listing-grid-rows {
    grid-template-columns: 1fr;
    gap: 24px;
}

.room-listing-card.room-listing-row {
    flex-direction: row;
    align-items: stretch;
}

/* Fixed height (not stretched to match each row's own details column,
   which varies with amenity count/description length) so every room's
   photo is the same size across all cards. */
.room-listing-row .room-listing-image {
    flex: 0 0 380px;
    height: 240px;
    align-self: flex-start;
    border-radius: 12px;
    margin: 20px 0 20px 20px;
}

/* Every gallery photo stacked in the same box and crossfaded via .is-active
   (see main.js) so visitors can flip through them right on the card, not
   just in the full-screen modal (.room-listing-gallery-btn, unchanged).
   Clicking anywhere on the photo also opens that same modal (see main.js).
   Used on both the homepage grid cards and the Rooms page row cards. */
.room-listing-image-slider {
    cursor: pointer;
}

.room-listing-image-slider .room-slider-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.room-listing-image-slider .room-slider-img.is-active {
    opacity: 1;
}

.room-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(23, 24, 26, 0.55);
    backdrop-filter: blur(2px);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.3s ease;
}

.room-slider-arrow:hover {
    background: rgba(23, 24, 26, 0.85);
}

.room-slider-prev {
    left: 10px;
}

.room-slider-next {
    right: 10px;
}

.room-listing-row .room-listing-details {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
    padding: 20px 24px;
}

.room-listing-info-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.room-listing-info-col .room-listing-amenities {
    margin-bottom: 0;
}

/* Compact bed/guest badges, moved into the heading row next to the room
   name - replaces the bordered Guests/Bed box used on the homepage's
   vertical cards (.room-listing-facts, left untouched there) with a simpler
   icon + number pair for this page. */
.room-listing-row .room-listing-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* One bordered pill holding both facts, with a divider between them,
   instead of two loose icon+number pairs floating side by side. */
.room-listing-fact-badges {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 6px 14px;
    gap: 12px;
}

/* Room type as a pill badge with a circular icon, below the heading row -
   overrides the homepage's small caps label look (.room-listing-type,
   left untouched there) for this page only. */
.room-listing-fact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
}

.room-listing-fact-badge + .room-listing-fact-badge {
    border-left: 1px solid var(--border);
    padding-left: 12px;
}

.room-listing-fact-badge i {
    color: var(--primary-two);
    font-size: 0.9rem;
}

.room-listing-price-col {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding-left: 24px;
    border-left: 1px solid var(--border);
    text-align: center;
}

.room-listing-price-col .room-listing-price {
    font-size: 1.4rem;
}

.room-listing-price-col .room-listing-actions {
    flex-direction: column;
    margin-top: 0;
}

.room-listing-price-col .room-listing-description {
    text-align: left;
    font-size: 0.8rem;
    margin: 4px 0 0;
}

.room-listing-price-col .room-listing-policy-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: normal;
}

@media (max-width: 900px) {
    .room-listing-card.room-listing-row {
        flex-direction: column;
    }

    .room-listing-row .room-listing-image {
        flex: 0 0 auto;
        height: 220px;
        margin: 20px 20px 0;
        /* Card is column-direction here, so the cross-axis is now width, not
           height - the desktop row layout's align-self: flex-start (which
           stops the image being stretched taller by its sibling column)
           would otherwise collapse this to 0 width, since its slider images
           are all position: absolute and add no intrinsic width. */
        align-self: stretch;
    }

    .room-listing-row .room-listing-details {
        flex-direction: column;
    }

    .room-listing-price-col {
        flex: 0 0 auto;
        border-left: none;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 16px;
        text-align: left;
    }

    .room-listing-price-col .room-listing-policy-tag {
        justify-content: flex-start;
    }
}


/* Modal Styles */
.room-listing-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    overflow: auto;
}

.room-listing-modal-content {
    background: transparent;
    margin: 2% auto;
    width: 95%;
    max-width: 1200px;
    position: relative;
}

.room-listing-close-modal {
    position: absolute;
    top: 10px;
    right: 40px;
    font-size: 1.5rem;
    color: var(--white);
    cursor: pointer;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.room-listing-close-modal:hover {
    background: rgba(0, 0, 0, 0.7);
}

.room-listing-gallery-container {
    position: relative;
}

.room-listing-gallery-main {
    height: 80vh;
    overflow: hidden;
    border-radius: 8px;
}

.room-listing-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.room-listing-gallery-thumbs {
    display: flex;
    padding: 15px 0;
    gap: 10px;
    overflow-x: auto;
    justify-content: center;
}

.room-listing-thumb {
    width: 120px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    flex-shrink: 0;
    border: 2px solid transparent;
}

.room-listing-thumb.active, .room-listing-thumb:hover {
    opacity: 1;
    border-color: var(--secondary);
}

.room-listing-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-listing-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
    z-index: 5;
}

.room-listing-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.room-listing-gallery-prev {
    left: 38px;
}

.room-listing-gallery-next {
    right: 38px;
}

@media (max-width: 768px) {
    .room-listing-grid {
        grid-template-columns: 1fr;
    }

    .room-listing-actions {
        flex-direction: column;
        gap: 10px;
    }

    .room-listing-gallery-main {
        height: 60vh;
    }

    .room-listing-gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .room-listing-close-modal {
        top: 10px;
        right: 15px;
        font-size: 2rem;
        width: 40px;
        height: 40px;
    }
    .room-listing-details
    {
        padding: 10px;
    }
    .room-listing-name
    {
        font-size: 1.1rem;
    }
    .room-listing-details-link, .room-listing-book-btn
    {
        font-size: 1rem;
    }

    /* Keep the bed-count/guest-count numbers + icons, drop the "Queens"/
       "Up to" wording so the fact badges stay compact on mobile. */
    .room-listing-fact-text {
        display: none;
    }
}
/* ===== Rooms Section Styles End ===== */


/* HOME Amenities section CSS START*/
.home-amenities-section {    
    background: var(--light-bg);
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.home-amenities-section .section-intro {
    max-width: 900px;
    margin: 0 auto;
    color: #5A6472;
}

/* Full-width two-column layout, truly edge-to-edge (not capped at the
   site's usual 1450px .container, and no side padding on the layout itself)
   - a self-cycling photo slider on the left touching the browser's left
   edge, title/description/list on the right - deliberately different from
   the Rooms section's repeating photo-card grid. */
.amenities-layout {
    display: flex;
    align-items: stretch;
    gap: 50px;
    width: 100%;
}

.amenities-media {
    flex: 0 1 42%;
    min-width: 320px;
    position: relative;
    min-height: 480px;    
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(36, 39, 44, 0.16);
    border-radius: 10px;
}

.amenities-slides {
    position: absolute;
    inset: 0;
}

/* Stacked on top of each other and crossfaded by main.js - plays
   independently of the list/filters beside it, cycling through every
   amenity's real photo regardless of which category is active. */
.amenities-slide-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.amenities-slide-image.is-active {
    opacity: 1;
}

.amenities-content {
    flex: 1 1 58%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Vertically centered against the photo - the list is short enough now
       that top-aligning it left a dead gap below; centering distributes
       the leftover space evenly instead. */
    justify-content: center;
    /* The layout itself has no side padding (so the photo can sit flush
       against the browser's left edge) - this keeps the text/cards off the
       right edge without adding space back on the photo's side. */
    padding: 20px 60px 20px 0;
    box-sizing: border-box;
}

.amenities-section-header {
    text-align: left;
    margin-bottom: 24px;
}

.amenities-section-header .section-intro {
    max-width: none;
    margin: 0;
}

.amenities-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.amenities-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}


/* Icon list, not a photo grid - the photos already live in the slider on
   the left, so each item here is just icon + name + one-line description,
   deliberately lighter/more compact than a Rooms-style photo card. Now that
   the section is full-width, the right column is wide enough to lay these
   out in 2-3 columns instead of one long single-file list; auto-fit sizes
   that itself based on how much room is actually available. */
.home-amenities-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: 14px;
    margin-top: 4px;
}

/* Highlighted pill/chip tags - same "badge" idea used for the Room cards'
   colored tags, applied here so each amenity reads as its own highlighted
   item instead of blending into plain text. */
.home-amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border-radius: 30px;
    padding: 8px 18px 8px 8px;
    box-shadow: 0 4px 12px rgba(36, 39, 44, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.home-amenity-item:hover {
    box-shadow: 0 8px 20px rgba(36, 39, 44, 0.14);
    transform: translateY(-2px);
}

.home-amenity-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #4CAF50;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

.home-amenity-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary);
    margin: 0;
    white-space: nowrap;
}


/* Responsive Design */
/* Below this width there's no room for the media/content columns to sit
   side by side - the slider stacks on top, full width, at a shorter fixed
   height instead of stretching to match the list's height. */
@media (max-width: 992px) {
    .amenities-layout {
        flex-direction: column;
        gap: 24px;
        padding: 0;
    }

    .amenities-media {
        flex: none;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 320px;
    }

    .amenities-content {
        padding-right: 0;
    }

    .amenities-section-header {
        text-align: center;
    }

    .amenities-section-header .section-intro {
        max-width: 900px;
        margin: 0 auto;
    }

}

@media (max-width: 768px) {    
    .home-amenity-title
    {
        font-size: 0.88rem;
    }
    .home-amenity-icon
    {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .amenities-media {
        height: 220px;
    }

    .home-amenities-grid {
        row-gap: 16px;
        column-gap: 24px;
    }

    .home-amenity-title {
        white-space: normal;
    }
}

/* HOME Amenities section CSS END*/



/*CTA section CSS Start*/
.luxury-cta {
    padding: 20px 0;
}
.cta-content {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    display: flex;
    align-items: stretch;
}

.luxury-cta .cta-button-primary
{
    background: var(--secondary);
}

/* Photo lives on its own side now, with no text over it, so it stays fully
   vivid - everything that needs to be read sits on the solid panel instead. */
.cta-photo-side {
    flex: 0 1 42%;
    min-width: 280px;
    position: relative;
}

.cta-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cta-content .section-title
{
    color: var(--white);
    margin: 0;
}

.cta-panel {
    flex: 1 1 58%;
    min-width: 0;
    background: var(--gradient-blue-two);
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.cta-description {
    font-size: 1.05rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.8);
    max-width: 560px;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    justify-content: flex-start;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 25px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-button-primary {
    background: var(--primary-two);
    color: var(--white);
}

.cta-button-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

/* Warm gold fill (Amenities page CTA band), instead of the site's usual
   navy/outline pair - matches the reference's "Book Now" button. */
.cta-button-gold {
    background: var(--white);
    color: var(--dark);
}

.cta-button:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cta-button-primary:hover {
    color: var(--white);
}

.cta-button-secondary:hover {
    background: var(--white);
    color: var(--primary);
}

.cta-button-gold:hover {
    color: var(--dark);
}

.cta-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0;
}

.cta-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-size: 0.95rem;
    padding: 8px 0;
}

.cta-feature-icon {
    width: 32px;
    height: 32px;
    background: var(--light-bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.guarantee-section {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 600px;
    margin: 20px 0 0;
}

.guarantee-icon {
    width: 40px;
    height: 40px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.guarantee-text {
    color: var(--white);
    font-size: 0.95rem;
    line-height: 1.4;
}


/* Responsive Design */
@media (max-width: 992px) {
    .cta-content {
        flex-direction: column;
    }

    .cta-photo-side {
        flex: none;
        width: 100%;
        min-width: 0;
        height: 220px;
    }

    .cta-panel {
        padding: 35px 40px 40px;
    }
}

@media (max-width: 768px) {
    .cta-panel {
        padding: 30px 30px 35px;
    }

    .cta-description {
        font-size: 1.05rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
    }


}

@media (max-width: 480px) {
    .cta-photo-side {
        height: 180px;
    }

    .cta-panel {
        padding: 24px 20px 30px;
    }

    .cta-features-grid, .guarantee-section
    {
        display: none;
    }
}
/*CTA section CSS End*/

/*Subscribe CSS Start*/

.subscribe-form {
    margin-top: 1rem;
}

.subscribe-form-input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.input-group input {
    width: 100%;
    padding: 10px 30px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 8px !important;
    font-size: 1rem;
    transition: all 0.3s;
    background-color: var(--light-bg);
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,0,128,0.1);
}

.input-icon {
    color: var(--primary);
    font-size: 20px;
}

.subscribe-form-form-icon
{
    padding: 13px;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    max-height: 50px;
}
.subscribe-form-form-field
{
    width: 100%;
}
.subscribe-form-form-field input {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    max-height: 50px;
    width: 100%;
}

.subscribe-form-form-field input:focus {
    border-color: var(--secondary);
    outline: none;
    box-shadow: none;
}
.subscribe-form .input-group input
{
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.subscribe-btn {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    color: var(--white);
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
}

.subscribe-btn:hover {
    transform: translateY(-2px);
}


/*Subscribe CSS End*/

/*Back To Top CSS Start*/

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 99;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

.back-to-top.active {
    display: flex;
}

/*Back To Top CSS End*/


/* Sticky Best Rate Guarantee badge - bottom-LEFT deliberately, since
   back-to-top (above) and the accessibility widget plugin both already
   occupy bottom-right on every page. */
.sticky-rate-badge {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--secondary);
    color: var(--white);
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

/* Added by main.js once the footer scrolls into view, so the badge doesn't
   sit on top of the footer's own text/links underneath it. */
.sticky-rate-badge.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sticky-rate-badge i {
    color: var(--accent-gold);
    font-size: 0.85rem;
}

.sticky-rate-badge:hover {
    background: var(--secondary-light);
    color: var(--white);
    transform: translateY(-2px);
}

/* Collapses to an icon-only circle on phones so it doesn't eat into the
   limited width next to page content, while staying tappable and linking to
   the same booking URL. */
@media (max-width: 575px) {
    .sticky-rate-badge {
        left: 16px;
        bottom: 16px;
        padding: 0;
        width: 48px;
        height: 48px;
        justify-content: center;
        border-radius: 50%;
    }

    .sticky-rate-badge span {
        display: none;
    }

    .sticky-rate-badge i {
        font-size: 1.1rem;
    }
}

/* Cookie Consent Bar - hidden by default (only main.js's .is-visible toggle
   shows it, and only on a first visit with no stored choice yet), sits
   above the sticky rate badge/back-to-top button (z-index) while shown so
   it doesn't overlap them, and slides away for good once a choice is made. */
.cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background: rgb(20, 24, 34);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.cookie-consent-bar.is-visible {
    transform: translateY(0);
}

.cookie-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.cookie-consent-text {
    flex: 1 1 320px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    line-height: 1.6;
}

.cookie-consent-text a {
    color: var(--accent-gold);
    text-decoration: underline;
}

.cookie-consent-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-consent-btn {
    border: none;
    cursor: pointer;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.cookie-consent-reject {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-consent-reject:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.cookie-consent-accept {
    background: var(--secondary);
    color: var(--white);
}

.cookie-consent-accept:hover {
    background: var(--secondary-light);
}

@media (max-width: 575px) {
    .cookie-consent-inner {
        padding: 18px 20px;
    }

    .cookie-consent-actions {
        width: 100%;
    }

    .cookie-consent-btn {
        flex: 1 1 0;
    }
}

/*Page Amenities CSS Start*/
.page-amenities-section {
    padding: 20px 0;
}

/* Small hero band above the amenities grid - a real interior photo (Hero
   Image field) with a dark scrim, replacing the plain centered heading that
   used to sit directly on the page's white background. */
/* Full-bleed (edge to edge, no rounded card look) - this section sits
   outside .container in the markup, and only its inner .container
   constrains/aligns the text, matching the reference exactly. */
.amenities-page-hero {
    background-color: var(--primary);
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    padding: 60px 0;
    display: flex;
    align-items: center;
    min-height: 480px;
    box-sizing: border-box;
    text-align: left;
}

.amenities-page-hero-content {
    max-width: 700px;
}

.amenities-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.amenities-hero-eyebrow-dot {
    display: inline-block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    flex-shrink: 0;
}

.amenities-page-hero .section-title {
    color: var(--white);
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
    margin-bottom: 14px;
    font-size: 2.3rem;
}

.amenities-page-hero-content p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    font-size: 1.05rem;
    margin: 0 0 26px;
}

.amenities-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.amenities-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 30px;
}

.amenities-hero-badge i {
    color: var(--white);
}

/* Bento/magazine layout: three equal photo cards feeding straight into
   full-width feature-chip tiles and a distinct Accessibility tile, all in
   one connected grid instead of separate stacked sections. */
.amenities-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(160px, auto);
    gap: 20px;
    margin-bottom: 0;
}

.bento-tile {
    border-radius: 20px;
    overflow: hidden;
}

.bento-span-full {
    grid-column: 1 / -1;
}

/* Photo mosaic: three equal-sized real property photo cards in a single
   row, each with its own icon + title + description below the photo. */
.bento-photo-equal {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(15, 17, 22, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-photo-equal:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 17, 22, 0.12);
}

.bento-photo-equal-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.bento-photo-equal-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.bento-photo-equal:hover .bento-photo-equal-img img {
    transform: scale(1.06);
}

.page-amenities-details {
    padding: 16px 22px 22px;
    flex: 1;
}

/* Icon + title sit side by side on one row, which is pulled up with a
   negative top margin so the icon overlaps the photo/body seam (the row
   is a flex sibling of the photo, not a descendant of it, so the icon
   isn't clipped by the photo's overflow:hidden). The white ring is what
   makes it read as "sitting on" the seam rather than just touching it. */
.bento-photo-equal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
}

.bento-photo-equal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.2rem;
    background: rgba(255, 197, 66, 0.22);
    color: var(--primary-two);
    box-shadow: 0 4px 10px rgba(15, 17, 22, 0.12);
    z-index: 2;
    flex-shrink: 0;
}

.bento-photo-equal-head h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-two);
    margin: 0;
}

.page-amenities-details p {
    font-size: 0.88rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.55;
}

.bento-chips {
    background: var(--light-bg);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 3px 15px rgba(26, 78, 138, 0.06);
}

.page-amenities-box-title {
    color: var(--primary-two);
    font-size: 1.4rem;
    margin-bottom: 18px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.page-amenities-box-title-dash {
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: var(--primary-two);
    flex-shrink: 0;
}

.page-amenities-box-subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: -10px 0 18px;
    max-width: 640px;
}

/* Flat table-style list (icon + label rows with a divider between rows),
   sitting in one bordered white panel - not individually carded/shadowed
   tiles - matching the reference exactly. */
.page-amenities-tile-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 28px;
}

.page-amenities-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
}

.page-amenities-mini-tile {
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    box-shadow: none;
}

/* Exact multiples of 4 in the real data (8 hotel features, 16 room
   features) - the last 4 items are always the final row, so this always
   lands on the right ones without needing to know the row count. */
.page-amenities-tile-grid > .page-amenities-mini-tile:nth-last-child(-n+4) {
    border-bottom: none;
}

/* Warm tinted circle instead of a plain white one - one calm color for
   every icon (previously cycled through 5 accent colors, which read as too
   busy across a long list). A stronger gold tint than --accent-bronze-tint
   so it reads as warm cream rather than gray against the panel's white
   background, matching the reference. */
.page-amenities-tile-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    background: rgba(255, 197, 66, 0.22);
    border: none;
    color: var(--primary-two);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.page-amenities-tile-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
}

@media (max-width: 992px) {
    .amenities-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-photo-equal:first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 768px) {

    .amenities-page-hero {
        padding: 40px 20px;
        min-height: 220px;
    }

    .amenities-page-hero .section-title {
        font-size: 1.6rem;
    }

    .amenities-hero-badge {
        font-size: 0.78rem;
        padding: 7px 14px;
    }

    .amenities-bento {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bento-photo-equal:first-child {
        grid-column: 1 / -1;
    }

    .bento-photo-equal-img {
        height: 180px;
    }

    .bento-photo-equal-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .bento-chips {
        padding: 25px;
    }

    .page-amenities-box-title {
        font-size: 1.2em;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    /* The 4-column grid had no narrower-viewport override at all, so on
       phones it kept trying to fit 4 columns, forcing the panel wider than
       the screen (horizontal overflow/clipping) instead of reflowing. Drop
       to 2 columns here, and move the "last row" divider-removal rule from
       -n+4 to -n+2 to match - 8 real items over 2 columns means the last
       row is the last 2 items, not the last 4. */
    .page-amenities-tile-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-amenities-tile-grid > .page-amenities-mini-tile:nth-last-child(-n+4) {
        border-bottom: 1px solid var(--border);
    }

    .page-amenities-tile-grid > .page-amenities-mini-tile:nth-last-child(-n+2) {
        border-bottom: none;
    }
}
@media (max-width: 480px) {
    .bento-chips
    {
        padding: 16px;
    }
    .page-amenities-tile-panel
    {
        padding: 4px 16px;
    }
    .page-amenities-tile-grid
    {
        gap: 0;
        grid-template-columns: repeat(1, 1fr);
    }

    .page-amenities-mini-tile
    {
        padding: 14px 10px;
        font-size: 0.85rem;
    }
}
/*Page Amenities CSS End*/


/*Attraction Page CSS Start*/
/* The whole page is built as stacked full-width bands (each its own
   <section>, background on the section itself) instead of rounded,
   drop-shadowed cards floating on one page background - the "boxes"
   look is what made every block read as a disconnected dashboard widget
   rather than a real page. */
.attractions-band {
    padding: 20px 0;
}

.attractions-band-white {
    background: var(--white);
}

.attractions-band-tint {
    background: var(--light-bg);
}

.attractions-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.attractions-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

/* Compact single-line "you are here" locator bar, centered under the
   section intro - real address, real directions link, no big header box. */
.nearby-widget-locator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
    font-size: 0.92rem;
    color: rgba(51, 65, 85, 0.75);
    background: var(--light-bg);
    border-radius: 30px;
    padding: 10px 22px;
    max-width: fit-content;
    margin: 0 auto 30px;
}

.nearby-widget-locator strong {
    color: var(--dark);
}

.nearby-widget-locator a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nearby-widget-locator a:hover {
    color: var(--secondary);
}

.nearby-widget-locator a i {
    font-size: 0.75rem;
}

.nearby-widget-locator-sep {
    color: var(--border);
}

/* Band 2: location - a header row (eyebrow/heading/subtitle plus a
   directions pill) followed by a row of real nearby-highlight cards, in
   place of the old two-column info/overview panel. */
.attractions-location-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.attractions-location-heading {
    max-width: 640px;
}

.attractions-location-heading .section-title {
    text-align: left;
    margin-bottom: 10px;
}

.attractions-location-heading .section-intro {
    text-align: left;
    margin: 0;
    max-width: none;
}

.attractions-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--primary-two);
    color: var(--primary-two);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    padding: 11px 25px;
    border-radius: 8px;    
    transition: all 0.2s ease;
}

.attractions-nav-button:hover {
    background: var(--primary-two);
    color: var(--white);
}

.attractions-location-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.attractions-location-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.attractions-location-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.5rem;
    margin-bottom: 14px;
    color: var(--primary-two);
}

.attractions-location-card-name {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 6px;
}

.attractions-location-card-distance {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.attractions-location-card-description {
    font-size: 0.82rem;
    color: rgba(51, 65, 85, 0.55);
    line-height: 1.4;
}

.text-accent-1 { color: var(--secondary); }
.text-accent-2 { color: var(--accent-blue); }
.text-accent-3 { color: var(--accent-bronze); }
.text-accent-4 { color: var(--success-green); }
.text-accent-5 { color: var(--primary); }

/* Band 3: closing "book direct" banner - a dark, true full-bleed photo
   band (the real property photo, heavily darkened) with a centered icon,
   heading, subtitle, and the two calls to action a guest actually needs
   at the bottom of the page: book, or call the desk. */
.attractions-photo-band {
    /* This section already sits directly in the unconstrained page flow
       (no ancestor .container), so it's edge-to-edge without needing a
       100vw break-out - which would overflow by the scrollbar's width
       and cause a horizontal scrollbar. */
    position: relative;
    background-color: rgb(15, 17, 22);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 90px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
}

.attractions-photo-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    text-align: center;
    color: var(--white);
}

/* Left-aligned variant (Amenities page CTA) - text sits in the darker left
   portion of the photo instead of centered, matching that reference's
   layout without changing the Attractions page's own centered version of
   this same component. */
.attractions-photo-band-left {
    justify-content: flex-start;
}

.attractions-photo-band-left .attractions-photo-caption {
    align-items: flex-start;
    text-align: left;
}

.attractions-photo-band-left .attractions-photo-buttons {
    justify-content: flex-start;
}

.attractions-photo-band-left .amenities-hero-eyebrow {
    margin-bottom: 10px;
}

.attractions-photo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    border: 1px solid rgb(255 255 255 / 45%);
    color: var(--white);
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.attractions-photo-caption h2 {
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--white);
    letter-spacing: 0.3px;
    text-shadow: 2px 2px 0 rgba(214, 26, 33, 0.3);
}

.attractions-photo-caption p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

.attractions-photo-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

/* "What's Nearby" widget: one tabbed, OTA-style component - pill category
   tabs, a card list, and a live directions map with an info overlay for
   whatever place is selected. */
.nearby-widget {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.nearby-widget-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 22px 24px;
    background: var(--light-bg);
    border-bottom: 1px solid var(--border);
}

.nearby-tab {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 30px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    padding: 9px 20px;
    transition: all 0.2s ease;
}

.nearby-tab:hover {
    border-color: var(--primary-two);
    color: var(--primary-two);
}

.nearby-tab.active {
    background: var(--primary-two);
    border-color: var(--primary-two);
    color: var(--white);
}

.nearby-widget-body {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: stretch;
}

.nearby-widget-list {
    background: var(--light-bg);
    padding: 16px;
}


.nearby-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.nearby-panel.active {
    display: flex;
}

.nearby-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.nearby-item:hover {
    box-shadow: 0 6px 16px rgba(26, 78, 138, 0.08);
}

.nearby-item.active {
    border-color: var(--secondary);
    border-left-color: var(--secondary);
    box-shadow: 0 6px 16px rgba(214, 26, 33, 0.1);
}

.nearby-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--primary-two);
}

.room-detail-meta .nearby-accent-1, .bento-tile .nearby-accent-1 { background: var(--white); }
.room-detail-meta .nearby-accent-2, .bento-tile .nearby-accent-2 { background: var(--white); color: var(--accent-blue); }
.room-detail-meta .nearby-accent-3, .bento-tile .nearby-accent-3 { background: var(--white); color: var(--accent-bronze); }
.room-detail-meta .nearby-accent-4, .bento-tile .nearby-accent-4 { background: var(--white); color: var(--success-green); }
.room-detail-meta .nearby-accent-5, .bento-tile .nearby-accent-5 { background: var(--white); color: var(--primary); }

.nearby-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.nearby-item-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.nearby-item-name {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
}

.nearby-item-tag {
    background: rgba(31, 122, 77, 0.12);
    color: var(--success-green);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 9px;
    border-radius: 10px;
}

.nearby-item-description {
    font-size: 0.85rem;
    color: rgba(51, 65, 85, 0.65);
    line-height: 1.4;
}

.nearby-item-distance {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Map + a floating info card for the currently selected place, echoing a
   real map-app place card - no invented ratings or hours, just what we
   actually know (name and our own distance estimate). */
.nearby-widget-map {
    position: relative;
    min-height: 460px;
}

.nearby-widget-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.nearby-map-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    max-width: 240px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(15, 17, 22, 0.18);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nearby-map-overlay-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary);
    margin-bottom: 2px;
}

.nearby-map-overlay strong {
    color: var(--dark);
    font-size: 0.95rem;
    line-height: 1.3;
}

.nearby-map-overlay-distance {
    font-size: 0.8rem;
    color: rgba(51, 65, 85, 0.6);
    margin-bottom: 6px;
}

.nearby-map-overlay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--secondary);
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 20px;
}

.nearby-map-overlay-btn:hover {
    background: var(--secondary-light);
}

@media (max-width: 768px) {
    .attractions-band {
        padding: 20px 0;
    }

    .attractions-photo-band {
        padding: 60px 20px;
    }

    .attractions-photo-caption h2 {
        font-size: 1.6rem;
    }

    .attractions-photo-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .attractions-location-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .attractions-location-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .nearby-widget-locator {
        font-size: 0.85rem;
        padding: 10px 16px;
    }

    .nearby-widget-tabs {
        padding: 14px 16px;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .nearby-tab {
        white-space: nowrap;
    }

    .nearby-widget-body {
        grid-template-columns: 1fr;
    }

    .nearby-widget-list {
        order: 2;
    }

    .nearby-widget-map {
        min-height: 240px;
        order: 1;
    }

    .nearby-map-overlay {
        max-width: none;
        right: 16px;
    }
}

@media (max-width: 600px) {
    .nearby-item
    {
        display: block;
    }
}
@media (max-width: 480px) {
    .attractions-location-cards {
        grid-template-columns: 1fr;
    }
}
/*Attraction Page CSS End*/




/*Contact Us Page CSS Start*/

/* Contact Page Layout */
.contact-page-layout {
    color: var(--dark);
    padding: 20px 0;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.contact-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

.contact-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.contact-highlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 30px;
}

.contact-highlight-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* The shared nearby-accent-* classes use a light tint meant for icon
   badges - far too faint at 9px, so give the dot solid versions of the
   same palette instead. */
.contact-highlight-dot.nearby-accent-1 { background: var(--secondary); }
.contact-highlight-dot.nearby-accent-2 { background: var(--accent-blue); }
.contact-highlight-dot.nearby-accent-3 { background: var(--accent-bronze); }
.contact-highlight-dot.nearby-accent-4 { background: var(--success-green); }

.contact-page-layout .contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px 0;
    align-items: start;
    gap: 40px;
    margin-top: 40px;
}

/* Left Column Styles */
.contact-info-wrapper {
    position: relative;
}

.contact-photo {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    margin-top: 28px;
    box-shadow: 0 10px 26px rgba(26, 78, 138, 0.12);
}

.contact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-details {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 6px 28px;
    box-shadow: 0 10px 26px rgba(26, 78, 138, 0.08);
}

.contact-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 22px 0;
}

.contact-card + .contact-card {
    border-top: 1px solid var(--border);
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

/* The shared nearby-accent-* classes use a plain white badge background,
   which is invisible against this panel's own white background - give
   the icon badges a tinted version of their own color instead so they
   read as a distinct shape, not just a floating glyph. */
.contact-icon.nearby-accent-1 { background: rgba(214, 26, 33, 0.12); }
.contact-icon.nearby-accent-2 { background: rgba(31, 78, 140, 0.12); }
.contact-icon.nearby-accent-3 { background: var(--accent-bronze-tint); }

.contact-card h3 {
    color: var(--primary-two);
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.contact-card address,
.contact-card p {
    margin: 0;
    line-height: 1.6;
    font-style: normal;
    font-size: 1.1rem;
    color: #555;
}

.contact-link {    
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    color: #555;
}

.contact-link:hover {
    color: var(--secondary);
}

/* Social Media */
.contact-social {
    margin-top: 20px;
    margin-bottom: 20px;
}

.contact-social h3 {
    color: var(--primary);
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
}

.contact-social .social-icons {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}

.contact-social .social-icon {
    width: 40px;
    height: 40px;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icon:hover {    
    transform: translateY(-3px);
}

.contact-card-image img
{
    height: 400px;
    border-radius: 30px;
}

/* Right Column - Contact Form */
.contact-form-wrapper {
    background: var(--white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.jobs-col-intro .contact-form-wrapper
{
    padding: 0;
    box-shadow: none;
}

.contact-form-wrapper h2 {
    color: var(--dark);
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: 600;
}

.form-intro {
    color: var(--dark);
    margin-bottom: 25px;
    line-height: 1.7;
}

/* Contact Form 7 Styles */
.wpcf7-form label {
    display: block;    
    font-weight: 500;
    color: var(--dark);
}

.contact-form-wrapper .wpcf7-form input:not([type="submit"]),
.contact-form-wrapper .wpcf7-form textarea,
.contact-form-wrapper .wpcf7-form select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--dark);
    background: var(--white);
    transition: all 0.3s ease;
}

.contact-form-wrapper .wpcf7-form input:focus,
.contact-form-wrapper .wpcf7-form textarea:focus,
.contact-form-wrapper .wpcf7-form select:focus {
    border-color: var(--secondary);
    outline: none;
    box-shadow: none;
}

/* Native selects render with the browser's own plain arrow/height, out of
   step with the polished text inputs around them - appearance: none plus a
   custom chevron brings them to the same level of finish. */
.contact-form-wrapper .wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235A6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.contact-form-wrapper .wpcf7-form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23D61A21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
}

.wpcf7-form textarea {
    height: 150px;
    resize: vertical;
}

.wpcf7-submit {
    background: var(--primary-two);
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    width: 100%;
    letter-spacing: 1px;
}

.wpcf7-submit:hover {
    background: var(--secondary);
    transform: translateY(-2px);
}

/* Full Width Map */
.fullwidth-map-wrapper {
    margin-top: 50px;
}

.fullwidth-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.fullwidth-map-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.fullwidth-map-header h3 i {
    color: var(--secondary);
}

.fullwidth-map {
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.fullwidth-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(20%);
}
.wpcf7-not-valid-tip
{
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-page-layout .contact-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .contact-info-wrapper {
        padding-left: 0;
    }
    
}

@media (max-width: 768px) {

    .contact-form-wrapper {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .contact-form-wrapper h2
    {
        font-size: 1.3rem;
    }
    
    .contact-card {
        gap: 10px;
    }
    
    .fullwidth-map {
        height: 300px;
        margin-top: 40px;
    }
}

/*Contact Us Page CSS End*/

/* our-Services Section START*/
.services-section {
    padding: 20px 0;
    background: var(--white);
}

.services-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
}

.services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.services-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

.section-intro {
    max-width: 900px;
    margin: 0 auto;
    color: var(--dark);
}

.services-list {
    display: flex;
    align-items: flex-start;
}

.services-item {
    flex: 1;
    text-align: center;
    padding: 0 36px;
}

.services-item + .services-item {
    border-left: 1px solid var(--border);
}

.services-item-media {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.services-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    box-shadow: 0 8px 20px rgba(36, 39, 44, 0.14);
}

.services-item-number {
    position: absolute;
    bottom: 8px;
    right: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    color: var(--white);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 50%;
    border: 3px solid var(--white);
}

.service-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--primary);
}

.service-description {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #5A6472;
    margin-bottom: 18px;
}

.services-features-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: fit-content;
}

.services-feature-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
}

.services-feature-item i {
    color: var(--primary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.feature-text {
    color: var(--primary);
    font-weight: 500;
    font-size: 0.85rem;
}

.services-item .more-rooms-link {
    display: inline-block;
}

/* Responsive Design */
@media (max-width: 992px) {
    .services-list {
        flex-direction: column;
        gap: 40px;
    }

    .services-item {
        padding: 0;
    }

    .services-item + .services-item {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-top: 40px;
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 20px 0;
    }
}

@media (max-width: 576px) {
    .services-section-header {
        margin-bottom: 24px;
    }
}
/* our-Services Section END*/


/*Rooms Page CSS Start*/



/*Rooms Page CSS End*/

/*Rooms Detail Page CSS Start*/

.room-detail-section
{
    padding: 20px 0;
}


.room-detail-container {
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.room-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.room-detail-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.room-detail-subtitle {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 15px;
}

.room-detail-eyebrow-row {
    margin-bottom: 16px;
}

.room-detail-price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: rgba(214, 26, 33, 0.08);
    color: var(--secondary);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 30px;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.room-detail-price-period {
    font-size: 0.85rem;
    color: var(--secondary);
    font-weight: 500;
    opacity: 0.8;
}

/* Full Width Slider */
.room-detail-slider-container {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 15px;
}

.room-detail-slider {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.room-detail-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.room-detail-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-detail-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 20px;
}

.room-detail-slide-counter {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.room-detail-slider-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.room-detail-slider-btn {
    background: rgba(255,255,255,0.8);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.room-detail-slider-btn:hover {
    background: var(--white);
    transform: scale(1.1);
}

.room-detail-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.room-detail-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.room-detail-dot.active {
    background: var(--secondary);
}

.room-detail-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 30px;
    padding-bottom: 4px;
}

.room-detail-thumb {
    width: 84px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.room-detail-thumb:hover {
    opacity: 0.85;
}

.room-detail-thumb.active {
    opacity: 1;
    border-color: var(--secondary);
}

/* Content Layout */
.room-detail-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 0;
}

.room-detail-main-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Without this, a grid item's automatic minimum width is its content's
       min-content size - and the "More Ways to Enjoy Your Stay" horizontal
       scroll carousel further down (.rd-staycation-grid, overflow-x: auto)
       has a large min-content width since its cards don't wrap. That forced
       this whole column (and the grid/page around it) wider than the
       viewport on mobile instead of just letting the carousel scroll inside
       its own box, which is what overflow-x: auto is there for. */
    min-width: 0;
}

.room-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Room Info */
.room-detail-info-section {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.room-detail-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    /*margin-top: 10px;*/
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 10px;
}

.room-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}


.room-detail-meta-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.room-detail-meta-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-detail-meta-label {
    font-size: 0.95rem;
    color: var(--text-light);
}

.room-detail-meta-value {
    font-weight: 500;
    color: var(--dark);
    font-size: 0.95rem;
}

/* Description */
.room-detail-description {
    margin-bottom: 10px;
    line-height: 1.6;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.room-detail-description p {    
    font-size: 0.95rem;
}

/* Amenities */
.room-detail-amenities-section {
    margin-bottom: 0;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.room-detail-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));    
}

.room-detail-amenity-item {
    display: flex;
    align-items: center;    
    font-size: 0.9rem;
    color: var(--dark);
    padding: 0;
}

.room-detail-amenity-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* "More Ways to Enjoy Your Stay" - the property's real facility categories
   (Hotel/Room/Accessible Features, same data as the Amenities page), not
   this specific room's own amenities (that's the grid above). Each category
   only shows its first few real items, linking to the Amenities page for
   the rest rather than duplicating the whole list here. */
.rd-staycation-section {
    margin-top: 10px;
}

/* Fixed-width cards in a horizontally scrollable row (rather than stretched
   grid columns), so a 4th+ category peeks in at the edge and scrolls into
   view instead of wrapping or squeezing to fit - same idea as the OTA-style
   reference. Only 3 real categories exist today, so on wide screens this
   just reads as a normal row with room to spare. */
.rd-staycation-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}

.rd-staycation-card {
    flex: 1 1 240px;
    min-width: 240px;
    scroll-snap-align: start;
    background: var(--light-bg);
    border-radius: 12px;
    padding: 18px;
}

.rd-staycation-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* Real multi-color SVG artwork (self-hosted Twemoji, CC-BY 4.0) rather than
   a single-color Font Awesome glyph - the site's Font Awesome is the Free
   tier, which has no duotone/multi-color style, so this is the only way to
   get genuinely colorful category icons without fabricating an icon that
   doesn't exist in the loaded set. */
.rd-staycation-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.rd-staycation-card-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
}

.rd-staycation-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-staycation-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--dark);
}

.rd-staycation-list li i {
    color: var(--success-green);
    margin-top: 3px;
    flex-shrink: 0;
}

.rd-staycation-seeall {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
}

.rd-staycation-seeall:hover {
    text-decoration: underline;
}

/* "Facilities" - flat checklist of the property's real hotel-level features,
   with a "Free" tag on whichever ones are actually described as free. */
.rd-facilities-section {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.rd-facilities-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rd-facilities-header .room-detail-section-title {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.rd-facilities-seeall {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary);
    text-decoration: none;
    white-space: nowrap;
}

.rd-facilities-seeall:hover {
    text-decoration: underline;
}

.rd-facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 20px;
    margin-top: 16px;
}

.rd-facility-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--dark);
}

.rd-facility-item i {
    color: var(--success-green);
    flex-shrink: 0;
}

.rd-facility-free-badge {
    background: rgba(31, 122, 77, 0.12);
    color: var(--success-green);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
}

.room-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(214, 26, 33, 0.06);
    border: 1px solid rgba(214, 26, 33, 0.15);
    border-radius: 10px;
    padding: 10px;
    color: var(--dark);
    font-size: 0.9rem;
}

.room-detail-note i {
    color: var(--secondary);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.room-detail-note p {
    margin: 0;
    line-height: 1.6;
}

/* Booking */
.room-detail-booking-section {
    background: var(--light-bg);
    padding: 25px;
    border-radius: 14px;
    margin-bottom: 0;
    text-align: center;
}

.room-detail-booking-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark);
}

.room-detail-booking-text {
    color: var(--text-light);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.room-detail-booking-btn {
    width: 100%;
    justify-content: center;
}

/* Reviews */
.room-detail-reviews-section {
    margin-bottom: 0;
}

.room-detail-review-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

/* Rating badge - a solid rounded-rectangle tile with just the score number,
   like an OTA score chip, rather than crowding a "/5" inside it. */
.room-detail-rating {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--primary-two);
}

.room-detail-rating-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}

.rd-score-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rd-score-label {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.95rem;
}

.rd-score-outof {
    font-weight: 400;
    color: var(--text-light);
    font-size: 0.8rem;
}

.room-detail-stars {
    color: #F5A623;
    font-size: 0.9rem;
}

.room-detail-review-count {
    color: var(--text-light);
    font-size: 0.9rem;
}

.room-detail-recommendation {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: var(--light-bg);
    border-radius: 10px;
    font-size: 0.9rem;
}

.room-detail-recommend-text {
    font-weight: 500;
    color: var(--success-green);
}

/* Contact - a warm CTA card (not just a plain info list) prompting a
   direct call, since that converts better than a static phone number. */
.room-detail-contact-section {
    margin-bottom: 0;
    background: var(--primary-two);
    padding: 22px;
    border-radius: 14px;
    text-align: center;
}

.room-detail-contact-title {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.room-detail-contact-text-lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.room-detail-contact-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background: var(--white);
    color: var(--primary-two);
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.room-detail-contact-call-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    color: var(--primary-two);
}

.room-detail-contact-email-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    text-decoration: none;
}

.room-detail-contact-email-link:hover {
    color: var(--white);
}

/* Policies */
.room-detail-policies-section {
    margin-bottom: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.room-detail-policy-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-detail-policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.room-detail-policy-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--dark);
    line-height: 1.5;
}

.room-detail-policy-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.room-detail-policy-item i {
    color: var(--secondary);
    width: 16px;
    font-size: 0.85rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Good to Know - full-width detailed policies below the main content grid */
.room-detail-good-to-know {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}


.room-detail-good-to-know-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.room-detail-good-to-know-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.room-detail-good-to-know-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 600;
    color: var(--dark);
    font-size: 0.95rem;
}

.room-detail-good-to-know-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(214, 26, 33, 0.08);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.room-detail-good-to-know-detail {
    color: var(--dark);
    font-size: 0.92rem;
    line-height: 1.7;
}

.room-detail-good-to-know-detail p {
    margin: 0 0 12px;
}

.room-detail-good-to-know-detail p:last-child {
    margin-bottom: 0;
}

.room-detail-good-to-know-detail a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .room-detail-good-to-know-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .room-detail-content-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
}

@media (max-width: 768px) {
    .room-detail-title {
        font-size: 1.7rem;
    }
    
    .room-detail-slider-container {
        height: 350px;
    }
    
    .room-detail-meta, .room-detail-amenities-grid {
        grid-template-columns: 1fr;
    }
    
    .room-detail-review-summary {
        flex-direction: column;
        gap: 15px;
    }
    
    .room-detail-content-grid {
        gap: 20px;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .room-detail-container {
        padding: 0;
    }
    
    .room-detail-section {
        padding: 20px 0;
    }
    
    .room-detail-slider-container {
        height: 250px;
    }
    
    .room-detail-booking-section {
        padding: 20px;
    }
    
    .room-detail-slider-btn {
        width: 38px;
        height: 38px;
    }
    
    .room-detail-title {
        font-size: 1.5rem;
    }
    .room-detail-price-tag
    {
        font-size: 1.1rem;
    }
}

/* ===== Room Detail v2: photo collage gallery + sticky tabs ===== */

/* One large photo + a 2x2 grid of smaller ones, mirroring the classic OTA
   listing-page gallery. "See all N photos" reuses the same gallery modal/JS
   as the Rooms page (room-listing-gallery-*), just scoped to this one room. */
.rd-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Without an explicit row track, this single implicit row sizes to its
       content (auto) rather than stretching to fill the 420px container
       height - which then made height:100% on the children below resolve
       against nothing, so each photo fell back to its own natural aspect
       ratio instead of a shared, even grid cell. */
    grid-template-rows: 1fr;
    gap: 8px;
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
}

.rd-gallery-main {
    height: 420px;
}

.rd-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rd-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 420px;
}

.rd-gallery-tile {
    overflow: hidden;
}

.rd-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rd-gallery-seeall {
    left: auto;
    right: 16px;
    bottom: 16px;
    padding: 8px 18px;
    font-size: 0.85rem;
}

/* Sticky in-page section nav with a persistent price/Book Now bar - stuck
   just below the fixed site header (--hero-offset, the header's own live-
   measured height, set in main.js) so it never sits underneath it.
   Active-tab highlighting + smooth scroll handled in main.js, guarded to
   only run when .rd-tabs exists so it's a no-op on every other page. */
.rd-tabs-bar {
    position: sticky;
    top: var(--hero-offset, 90px);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 4px 24px;
    margin-bottom: 30px;
}

.rd-tabs {
    display: flex;
    flex-wrap: wrap;
}

.rd-tab {
    padding: 5px 0;
    margin-right: 26px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.rd-tab:hover {
    color: var(--secondary);
}

.rd-tab.is-active {
    color: var(--secondary);
    border-bottom-color: var(--secondary);
}

.rd-tabs-price {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 10px 0;
}

.rd-tabs-price-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--primary-two);
    font-size: 1.15rem;
    white-space: nowrap;
}

.rd-tabs-price-value small {
    font-weight: 400;
    color: #7f8c8d;
    font-size: 0.75rem;
}

/* Keeps a jumped-to (or scrolled-to) section from landing underneath the
   sticky tabs bar. */
.rd-tab-section {
    scroll-margin-top: calc(var(--hero-offset, 90px) + 90px);
}

.rd-overview-stars {
    color: #F5A623;
    font-size: 1rem;
    margin: 4px 0 20px;
}

.rd-review-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.rd-review-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
    /*color: var(--primary);*/
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.rd-review-link:hover {
    background: var(--light-bg);
    border-color: #C9C4BB;
}

.rd-google-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rd-nearby-section
{
    margin-top: 10px;
}
.rd-map-embed {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.rd-nearby-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-landmarks-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 10px;
}

.rd-landmark-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}

.rd-landmark-row:last-child {
    border-bottom: none;
}

.rd-landmark-icon {
    color: var(--primary);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.rd-landmark-name {
    flex: 1 1 auto;
    color: var(--dark);
    font-size: 0.92rem;
}

.rd-landmark-distance {
    color: #7f8c8d;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.rd-see-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    font-size: 0.85rem;
    font-weight: 600;
    /*color: var(--primary);*/
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.rd-see-all-link:hover {
    color: var(--secondary);
}

/* Sidebar stays in view alongside the scrolling tab content, clearing the
   sticky tabs bar above it by the same --hero-offset + its own height. */
.rd-sticky-sidebar {
    position: sticky;
    top: calc(var(--hero-offset, 90px) + 86px);
    align-self: flex-start;
}

/* Sidebar Guest Reviews card - the same real rating/recommend-text/review-
   link content that used to sit in its own tab in the main column, moved
   here so it's part of the always-visible sidebar summary instead. Narrower
   than the main column, so the rating number/stars/recommendation stack
   vertically rather than the wider row layout those classes use there. */
.rd-score-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}

/*.rd-score-card .room-detail-section-title {
    margin-bottom: 12px;
}
*/

.rd-score-card .rd-review-links {
    flex-direction: column;
    align-items: stretch;
}

/* Sidebar map + condensed landmarks/parking card */
.rd-sidebar-map-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.rd-sidebar-map {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    line-height: 0;
}

.rd-sidebar-map-btn {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    background: var(--white);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 16px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.rd-sidebar-parking-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--dark);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.rd-sidebar-parking-free {
    color: var(--success-green);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.rd-sidebar-map-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}

.rd-sidebar-landmarks {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.rd-sidebar-landmark-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--dark);
}

.rd-sidebar-landmark-distance {
    color: #7f8c8d;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .rd-gallery {
        height: 340px;
    }

    .rd-sticky-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .rd-gallery {
        grid-template-columns: 1fr;
        height: auto;
    }

    .rd-gallery-main {
        height: 240px;
    }

    .rd-gallery-grid {
        display: none;
    }

    .rd-tabs-bar {
        top: 0;
        padding: 0 16px;
    }

    .rd-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .rd-tabs-price {
        display: none;
    }
}

/*Rooms Detail Page CSS End*/

/*Accessibility Page CSS Start*/
.accessibility-section {
    padding: 20px 0;
}

.accessibility-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.accessibility-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

.accessibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 20px;
}

/* Each card carries its own accent color (top ribbon bar + icon badge +
   checklist ticks) - the same tinted-circle accent language used for
   .contact-icon/.room-detail-meta elsewhere on the site, brought here so
   this section reads as designed rather than a plain bordered list. */
.accessibility-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accessibility-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--accessibility-accent, var(--secondary));
}

.accessibility-card.nearby-accent-1 { --accessibility-accent: var(--secondary); }
.accessibility-card.nearby-accent-2 { --accessibility-accent: var(--accent-blue); }
.accessibility-card.nearby-accent-3 { --accessibility-accent: var(--accent-bronze); }
.accessibility-card.nearby-accent-4 { --accessibility-accent: var(--success-green); }
.accessibility-card.nearby-accent-5 { --accessibility-accent: var(--primary-two); }

.accessibility-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.accessibility-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.accessibility-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    background: rgba(51, 65, 85, 0.08);
    color: var(--dark);
}

.accessibility-card-icon.nearby-accent-1 { background: rgba(214, 26, 33, 0.12); color: var(--secondary); }
.accessibility-card-icon.nearby-accent-2 { background: rgba(31, 78, 140, 0.12); color: var(--accent-blue); }
.accessibility-card-icon.nearby-accent-3 { background: var(--accent-bronze-tint); color: var(--accent-bronze); }
.accessibility-card-icon.nearby-accent-4 { background: rgba(31, 122, 77, 0.12); color: var(--success-green); }
.accessibility-card-icon.nearby-accent-5 { background: rgba(4, 48, 110, 0.12); color: var(--primary-two); }

.accessibility-card h3 {
    color: var(--dark);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
}

.accessibility-card p {
    color: rgba(51, 65, 85, 0.75);
    font-size: 0.95rem;
    margin: 0;
}

.accessibility-feature-list {
    list-style-type: none;
    margin: 10px 0 0;
    padding: 0;
}

.accessibility-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dark);
}

.accessibility-feature-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accessibility-accent, var(--success-green));
    color: var(--white);
    font-size: 0.6rem;
    flex-shrink: 0;
}

.accessibility-hero-band {
    background-color: var(--primary);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 17, 22, 0.15);
    display: flex;
    align-items: flex-end;
    min-height: 300px;
    padding: 28px 32px;
    box-sizing: border-box;
    margin-bottom: 0;
}

.accessibility-hero-content {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 640px;
    background: linear-gradient(
    90deg,
    rgba(15, 17, 22, 0.88) 0%,
    rgba(15, 17, 22, 0.55) 55%,
    rgba(15, 17, 22, 0.15) 100%
);
    padding: 10px 20px;
    border-radius: 10px;
}

.accessibility-hero-icon {
    font-size: 1.6rem;
    color: var(--white);
    flex-shrink: 0;
}

.accessibility-hero-divider {
    width: 1px;
    height: 46px;
    background: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.accessibility-hero-text h2 {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.25;
}

.accessibility-hero-text p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Condensed at-a-glance row above the detailed cards - one flat list of
   icon + short label pairs, divided by a thin vertical rule rather than
   individually carded, matching the calmer flat-list language used
   elsewhere on the site (e.g. the Amenities page's feature grid) rather
   than the 5-color accent-cycling card style used further down this page. */
.accessibility-highlights {
    margin: 0 0 40px;
}

.accessibility-highlights-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 15px;
    color: var(--primary-two);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}

.accessibility-highlights-line {
    height: 1px;
    width: 60px;
    background: var(--border);
    flex-shrink: 0;
}

.accessibility-highlights-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 0;
}

.accessibility-highlight-item {
    flex: 1 1 0;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 0 16px;
    border-left: 1px solid var(--border);
}

.accessibility-highlight-item:first-child {
    border-left: none;
}

.accessibility-highlight-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(4, 48, 110, 0.08);
    color: var(--primary-two);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.accessibility-highlight-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
}

.accessibility-contact {
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.accessibility-contact-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.accessibility-contact-content {
    flex: 1;
    min-width: 240px;
}

.accessibility-contact-content h3 {
    color: var(--primary-two);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.accessibility-contact-content p {
    color: rgba(51, 65, 85, 0.75);
    font-size: 0.98rem;
    margin: 0;
}

.accessibility-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.accessibility-contact-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--secondary);
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.accessibility-contact-btn-outline:hover {
    background: var(--secondary);
    color: var(--white);
}

@media (max-width: 768px) {
    .accessibility-grid {
        grid-template-columns: 1fr;
    }

    .accessibility-hero-band {
        padding: 20px;
        min-height: 220px;
    }

    .accessibility-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .accessibility-hero-divider {
        display: none;
    }

    .accessibility-hero-text h2 {
        font-size: 1.3rem;
    }

    .accessibility-highlights-title {
        font-size: 1.15rem;
        gap: 10px;
    }

    .accessibility-highlights-line {
        width: 30px;
    }

    .accessibility-highlight-item {
        flex: 1 1 40%;
        border-left: none;
        border-top: 1px solid var(--border);
        padding: 16px 8px 0;
    }

    .accessibility-highlight-item:first-child,
    .accessibility-highlight-item:nth-child(2) {
        border-top: none;
        padding-top: 0;
    }

    .accessibility-contact {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }

    .accessibility-contact-actions {
        justify-content: center;
    }
}
/*Accessibility Page CSS End*/


/*Blog Page CSS Start*/

/* Blog Header */
.blog-header {
    padding: 20px 0;
    text-align: center;
}



/* Blog Section */
.blog-section {
    padding: 10px 0 10px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.blog-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.blog-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image {
    transform: scale(1.03);
}

.blog-content {
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blog-card .blog-category {
    display: inline-block;
    background-color: var(--secondary);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
    position: absolute;
    right: 10px;
    top: 10px;
}

.blog-title {
    color: var(--dark);
    font-size: 1.5rem;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    font-weight: 600;
}

.blog-card:hover .blog-title {
    color: var(--primary);
}

.blog-excerpt {
    color: #333;
    margin-bottom: 20px;
    font-size: 1rem;
}

.blog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--dark);
    font-size: 0.9rem;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-author {
    display: flex;
    align-items: center;
}

.author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.read-more {
    display: inline-block;
    color: var(--primary);
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    margin-bottom: 10px;
}

.read-more:hover {
    color: var(--secondary);
    transform: translateY(-3px);
}

.read-more i {
    margin-left: 5px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}


/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.page-numbers {
    display: flex;
    list-style: none;
    gap: 10px;
}

.page-numbers a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--dark);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.page-numbers a:hover, 
.page-numbers .current {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 128, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .blog-header {
        padding: 10px 0;
    }


    .blog-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .blog-header h1 {
        font-size: 1.8rem;
    }

    .blog-content {
        padding: 0;
    }
    .blog-card .blog-content {
        padding: 10px;
    }
}

/*Blog Page CSS End*/


/*Gallery Page CSS START*/

.gallery-section {
    padding: 20px 0;
}

.gallery-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.gallery-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

/* Tabs */
.gallery-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 30px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--dark);
    font-size: 0.85rem;
    letter-spacing: normal;
}

.tab-btn-count {
    background: rgba(51, 65, 85, 0.08);
    color: var(--dark);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
}

.tab-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.tab-btn.active {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.tab-btn.active .tab-btn-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    aspect-ratio: 4/3;
}

.page-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover .page-gallery-image {
    transform: scale(1.05);
}

.gallery-grid .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--primary), transparent);
    padding: 15px 15px 7px 15px;
    color: var(--white);
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateY(100%);
}

.gallery-item:hover .image-overlay {
    opacity: 1;
    transform: translateY(0);
}

.label-image-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0;
}

.expand-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--dark);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 2;
}

.gallery-item:hover .expand-btn {
    opacity: 1;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    overflow: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: block;
    opacity: 1;
}

.modal-content {
    position: relative;
    margin: 60px auto;
    max-width: 900px;
    width: 90%;
    animation: zoom 0.3s ease;
}

@keyframes zoom {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.modal-image {
    width: 100%;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

.modal-caption {
    background: var(--white);
    padding: 10px;
    border-radius: 0 0 8px 8px;
    margin-top: -5px;
}

.modal-caption h3 {
    color: var(--primary);
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.close-btn {
    position: absolute;
    top: -40px;
    right: -40px;
    color: var(--white);
    font-size: 2.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: var(--secondary);
}

.modal-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
}

.nav-btn {
    background: var(--dark);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-btn:hover {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .section-title {
        font-size: 1.2rem;
    }

    .close-btn {
        top: -30px;
        right: 10px;
        font-size: 2rem;
    }

    .modal-nav {
        padding: 0 10px;
    }

    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .gallery-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .tab-btn {
        white-space: nowrap;
    }
}

/*Gallery Page CSS END*/

/*Blogs Detail Page CSS Start*/


/* Blog Header */
.blog-detail-header {
    padding: 20px 0 5px 0;
    text-align: center;
}

.blog-detail-back-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    margin-bottom: 16px;
}

.blog-detail-back-link:hover {
    text-decoration: underline;
}

.blog-detail-content-main .blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 0;
    padding-bottom: 10px;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-date {
    display: flex;
    align-items: center;
    gap: 8px;
}
.blog-date i
{
    color: var(--primary);
}

.blog-detail-header .blog-category {
    display: inline-block;
    background-color: var(--secondary);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Blog Content */
.blog-detail-content {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 10px 10px;    
}

.featured-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.blog-detail-content h2 {
    color: var(--title-color);
    font-size: 1.5rem;
    margin: 10px 0;
    position: relative;
    padding-left: 20px;
}

.blog-detail-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: var(--secondary);
    border-radius: 5px;
}

.blog-detail-content h3 {
    color: var(--title-color);
    font-size: 1.5rem;
    margin: 30px 0 15px;
}

.blog-detail-content p {
}

.blog-detail-content blockquote {
    border-left: 4px solid var(--primary);
    background-color: var(--red-bg);
    padding: 30px;
    margin: 40px 0;
    font-style: italic;
    position: relative;
}

.blog-detail-content blockquote::before {
    content: '\201C';
    font-size: 4rem;
    color: var(--primary-light);
    position: absolute;
    left: 10px;
    top: 10px;
    line-height: 1;
}

.blog-detail-content ul, 
.blog-detail-content ol {
    margin: 20px 0 20px 30px;
}

.blog-detail-content li {
    margin-bottom: 10px;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.gallery-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.02);
}



/* Responsive */
@media (max-width: 992px) {
    .blog-detail-content {
        padding: 40px;
    }

    .featured-image {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .blog-detail-header {
        padding: 20px 0 0 0;
    }


    .blog-meta {
        gap: 15px;
    }

    .blog-detail-content {
        padding: 10px;
    }

    .featured-image {
        height: 300px;
    }

    .image-gallery {
        grid-template-columns: 1fr;
    }

    .blog-tags-share {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {


    .blog-detail-content {
        padding: 10px;
    }

    .featured-image {
        height: 250px;
    }

    .blog-detail-content h2 {
        font-size: 1.3rem;
    }            

}

/*Blogs Detail Page CSS End*/

/*Home map section css START*/

.hotel-location-container {
   padding: 20px 0;
   background: var(--white);
}

.hotel-location-header {
    padding: 0 0 30px;
    text-align: center;
}


.hotel-location-subtitle {
    color: #5A6472;
}

.hotel-map-feature {
    position: relative;
}

.hotel-map-frame {
    position: relative;
    height: 500px;
    background: var(--light-bg);
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(36, 39, 44, 0.1);
}

.hotel-google-map {
    width: 100%;
    height: 100%;
    border: none;
}

.hotel-map-card {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 380px;
    max-width: calc(100% - 60px);
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(36, 39, 44, 0.2);
    padding: 26px;
}

.hotel-address-container {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.hotel-address-icon {
    width: 46px;
    height: 46px;
    background: rgba(179, 39, 45, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.hotel-address-text h4 {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 6px;
    font-weight: 700;
}

.hotel-address-text p {
    color: #5A6472;
    line-height: 1.5;
    font-size: 0.9rem;
}

.hotel-contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.hotel-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5A6472;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hotel-contact-item i {
    width: 20px;
    color: var(--secondary);
    text-align: center;
    flex-shrink: 0;
}

.hotel-contact-item:hover {
    color: var(--secondary);
}

.hotel-map-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hotel-action-btn {
    padding: 13px 22px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.hotel-btn-primary {
    background: var(--primary-two);
    color: var(--white);
}

.hotel-btn-primary:hover {
    background: var(--secondary-light);
}

.hotel-btn-secondary {
    background: var(--light-bg);
    color: var(--primary);
}

.hotel-btn-secondary:hover {
    background: var(--border);
}

.hotel-action-btn:hover {
    transform: translateY(-2px);
}

.hotel-nearby-attractions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.hotel-nearby-attraction-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(36, 39, 44, 0.06);
}

.hotel-nearby-attraction-icon {
    width: 42px;
    height: 42px;
    background: var(--primary-two);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1rem;
    flex-shrink: 0;
}

.hotel-nearby-attraction-text h5 {
    font-size: 0.95rem;
    color: var(--primary);
    margin-bottom: 0;
    font-weight: 700;
}

.hotel-nearby-attraction-text span {
    color: #5A6472;
    font-size: 0.82rem;
}

@media (max-width: 992px) {
    .hotel-nearby-attractions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .hotel-nearby-attractions {
        grid-template-columns: 1fr;
    }
}

.hotel-location-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 30px;
    padding: 22px 26px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(36, 39, 44, 0.06);
}

.hotel-location-note i {
    color: var(--accent-gold);
    font-size: 1.2rem;
    margin-top: 2px;
}

.hotel-location-note p {
    color: #5A6472;
    line-height: 1.65;
    font-size: 0.95rem;
    margin: 0;
}


@media (max-width: 768px) {
    .hotel-location-header {
        padding: 0 0 24px;
    }

    .hotel-map-frame {
        height: 320px;
    }

    .hotel-map-card {
        position: static;
        width: auto;
        max-width: none;
        margin-top: 20px;
        box-shadow: 0 10px 30px rgba(36, 39, 44, 0.1);
    }

    .hotel-map-card-actions {
        flex-direction: row;
    }

    .hotel-map-card-actions .hotel-action-btn {
        flex: 1;
    }

    .hotel-location-note {
        flex-direction: column;
        gap: 8px;
        padding: 18px;
    }
}

@media (max-width: 480px) {
    .hotel-map-card-actions {
        flex-direction: column;
    }
}

/*Home map section css END*/


/*VIDEO SECTION CSS START*/

.video-section {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin: 2rem 0;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark);
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--white);
    text-align: center;
    padding: 2rem;
}


.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--secondary-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.play-button:hover {
    background-color: var(--secondary);
    transform: translate(-50%, -50%) scale(1.05);
}

.play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid var(--white);
    margin-left: 5px;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-section:hover .video-controls {
    opacity: 1;
}

.about-content-new .about-text
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 10px;
}

.about-content-new .about-button
{
    margin-top: 10px;
}

.control-btn {
    background-color: var(--primary-light);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.control-btn:hover {
    background-color: var(--primary);
}

.home-video-section
{
    position: relative; 
    background: linear-gradient(
        to top,          
        var(--red-bg) 50%,  
        transparent 50%  
    );
}

#video-progressBar {
  width: 100%;
  margin: 10px 0;
  cursor: pointer;
}

#unmutePrompt {
  pointer-events: auto;
}


@media (max-width: 768px) {

    .play-button {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {

    .play-button {
        width: 50px;
        height: 50px;
    }
}

/*VIDEO SECTION CSS END*/

/*All Responsive CSS*/

@media(max-width: 992px)
{
    .header-button
    {
        display: none;
    }

    .main-header.transparent-front-page
    {
        position: relative;
    }
    .copyright
    {
        text-align: center;
    }
    .legal-links .footer-menu
    {
        padding: 0;
        text-align: center;
    }
    .special-events, .testimonials-section
    {
        padding: 20px 0;
    }
    .event-card
    {
        margin-bottom: 10px;
    }
    .footer-main
    {
        margin-bottom: 20px;
        gap: 20px;
    }
    p, .amenity-desc, .property-description p, .amenity-content p, .legal-links .footer-menu li a, .facilities-right .section-subtitle, .testimonial-content, .service-content p, .card-description
    {
        font-size: 0.9rem;
    }
    .contact-info-container
    {
        flex-direction: column;
    }
    .contact-info-bar
    {
        display: none;
    }
    .banner-content
    {
        margin-bottom: 0;
    }
    .hero-banner
    {
        padding: 30px 0 0 0;
    }
    .map-link, .contact-link
    {
        justify-content: center;
    }
    .split-gallery-container
    {
        gap: 0px;
    }
    .listing-amenities-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
    .room-detail-slider, .room-detail-slider-container
    {
        height: 350px;
    }
    .reviews-summary, .price-box, .check-availability
    {
        text-align: left;
    }
    .contact-page-layout
    {
        padding: 20px 0;
    }
    .wp-loader-title
    {
        font-size: 1.5rem;
    }
    .room-description
    {
        font-size: 0.9rem;
    }
    .amenities-note-text
    {
        text-align: center;
    }
    .blog-detail-content h3, .blog-detail-content h2, .blog-detail-content h4
    {
        font-size: 1rem;
    }
    .blog-title
    {
        font-size: 1.2rem;
    }
    .about-content-new .about-text
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .home-video-section
    {
        background: var(--white);
    }
    .footer-heading
    {
        font-size: 0.95rem;
    }
    .room-name
    {
        font-size: 1.2rem;
    }
    .room-details
    {
        padding: 10px;
    }
    .slider-nav
    {
        display: none;
    }
    .premium-feature h3
    {
        font-size: 1.1rem;
    }
    .section-header
    {
        margin-bottom: 20px;
    }
    .card-title
    {
        font-size: 1.3rem;
    }
    .contact-card h3
    {
        font-size: 1.1rem;
    }
    .footer
    {
        padding: 40px 0 20px;
    }
    .amenity-overlay, .amenity-bg, .amenity-card
    {
        height: 150px;
    }
    .hotel-amenity-list-info h4
    {
        margin-bottom: 0;
        font-size: 1rem;
    }
    .room-detail-container
    {
        padding: 0;
    }
}

@media(max-width: 767px)
{

    .more-rooms-link, .hotel-action-btn, .wpcf7-submit, .room-listing-details-link, .room-listing-book-btn, .tab-btn
    {
        padding: 6px 20px;
        font-size: 0.9rem;
    }

    .service-content h3
    {
        font-size: 1.2rem;
    }
    .contact-card-image img
    {
        display: none;
    }
    .room-detail-slider, .room-detail-slider-container
    {
        height: 200px;
    }
    .room-detail-header
    {
        flex-direction: column;
        align-items: flex-start;        
    }
    .room-meta-content
    {
        flex-direction: column;
    }
    .room-meta-content .meta-content-item
    {
        margin-bottom: 15px;
    }
    .page-amenity-card h3
    {
        font-size: 17px;
    }
    .page-amenity-icon 
    {
        width: 45px;
        height: 45px;
        font-size: 17px;
    }
    .room-amenity-icon i
    {
        height: 40px;
        width: 40px;
        font-size: 18px;
    }
    .room-amenities-section .room-section-title, .event-title
    {
        font-size: 1.5rem;
        text-align: center;
    }
    .event-subtitle
    {
        font-size: 1.1rem;
    }
    .event-date-details
    {
        padding: 10px 12px;
        gap: 5px;
    }
    .event-date .day
    {
        font-size: 1rem;
    }
    .event-time i
    {
        font-size: 18px;
    }
    .page-amenities-grid
    {
        padding: 0;
        gap: 0px;
    }
    .page-amenity-card
    {
        padding: 4px;
    }
    .section-badge
    {
        margin-bottom: 10px;
        padding: 6px 13px;
        font-size: 12px;
    }
    .highlight-item
    {
        padding: 8px;
    }
    .highlight-icon-wrapper
    {
        width: 40px;
        height: 40px;
    }
    .highlight-icon
    {
        font-size: 1.2rem;
    }

    .card-icon-wrapper i {
        font-size: 1.2rem;
    }
/*    .card-icon-wrapper {
        width: 40px;
        height: 40px;
        margin: 0px auto 12px;
    }
*/
    .attractions-main .section-header
    {
        margin-bottom: 10px;
    }
    .attraction-icon
    {
        height: 40px;
        width: 40px;
        font-size: 1.2rem;
    }
    .attraction-name
    {
        font-size: 14px;
    }
    .room-header
    {
        padding: 15px 15px 0;
    }
    .room-listing-content 
    {
        padding: 0 15px 15px;
    }
    .room-info h2, .reviews-summary h3
    {
        margin-bottom: 10px !important;
    }
    .room-detail-section .row
    {
        gap: 10px;
    }
    .room-info, .booking-card
    {
        padding: 12px !important;
    }
    .filter-controls
    {
        margin-bottom: 10px;
    }
    .price-filter, .smoking-filter
    {
        padding: 6px 12px;
    }
    .room-title
    {
        margin-bottom: 5px;
        font-size: 1.2rem;
    }
    .amenity-item
    {
        padding: 4px 0;
        font-size: 0.9rem;
    }
    .amenity-title
    {
        margin-bottom: 8px;
        font-size: 1.2rem;
    }
    .testimonial-text
    {
        margin-bottom: 1.1rem;
        padding-left: 1.1rem;
    }
    .video-header
    {
        gap: 20px;
    }
    .gallery-content .description
    {
        margin-bottom: 10px;
    }
    .hero-highlights
    {
        margin-top: 10px;
    }
    .highlight-text
    {
        font-size: 1rem;
    }
    .room-info h1
    {
        font-size: 1.2rem;
    }
    .room-meta-content .meta-content-item span
    {
        font-size: 0.9rem;
    }
    .card-header h3
    {
        font-size: 1.2rem;
    }
    .footer-main {
        grid-template-columns: none;
    }
    .book-button
    {
        padding: 10px 22px;
        font-size: 14px;
    }
    .book-btn
    {
        font-size: 13px;
        padding: 12px 22px;
    }
    .image-content h3
    {
        font-size: 1.2rem;
    }
    .footer-links a
    {
        font-size: 15px;
    }
    .contact-info li span, .contact-info li a
    {
        font-size: 15px;
    }
    .reviews-summary h3, .contact-box h3, .policy-box h3
    {
        font-size: 1.2rem;
    }
    .room-button, .check-availability-btn
    {
        font-size: 13px;
        padding: 12px 22px;
    }
    .cta-content p
    {
        font-size: 0.9rem;
        max-width: 100%;
    }
    .social-title
    {
        font-size: 1rem;
    }
    .contact-card address, .contact-card p
    {
        font-size: 0.9rem;
    }
    .feature
    {
        font-size: 0.9rem;
    }
    .slider-nav button
    {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    .primary-menu > li > a
    {
        font-size: 16px;
    }
    .room-content .room-number, .room-header .room-number
    {
        font-size: 14px;
        padding: 8px;
    }
    .section-description
    {
        font-size: 0.9rem;
    }
    .section-intro
    {
        margin-bottom: 10px;
    }
}
@media(max-width: 1199px)
{
    .contact-photo
    {
        height: 180px;
    }
}
@media(max-width: 1399px)
{
    .footer-logo
    {
        /*height: 40px;*/
    }
}
@media(max-width: 474px)
{
    .header-mobile-button
    {
        padding: 6px 10px;
        gap: 5px;
        font-size: 12px;
    }
    .main-header.scrolled .site-logo .logo-image
    {
        height: 40px;
    }
    .modal-caption h3
    {
        font-size: 1.1rem;
    }
    .hotel-address-text h4
    {
        font-size: 1.1rem;
    }
}
@media(min-width: 992px) and (max-width: 1199px)
{
    .contact-info-bar
    {
        margin: unset;
    }
    .contact-info-container
    {
        gap: 10px;
    }
    .contact-info-bar .contact-item
    {
        gap: 5px;
    }
}
@media(min-width: 992px) and (max-width: 1065px)
{
    .primary-menu > li > a
    {
        font-size: 16px;
    }
    .header-button
    {
        padding: 8px 18px;
    }
}

@media(max-width: 610px)
{
    .banner-floating-badge {
        bottom: 220px;
        right: 20px;
        padding: 10px 13px;
    }
    .banner-hotel-slider .slick-prev 
    {
        left: 1%;
    }
    .banner-hotel-slider .slick-next 
    {
        right: 1%;
    }
}

.lb-data .lb-close
{
    display: none;
}

@media(max-width: 430px)
{
    .contact-photo
    {
        display: none;
    }
}

/*About Us Page CSS Start*/
.about-section {
    padding: 20px 0;
}

.about-band-tint {
    background: var(--light-bg);
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.about-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

.about-story-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 44px;
    align-items: flex-start;
    margin-top: 40px;
}

.about-story-text p {
    color: var(--dark);
    line-height: 1.75;
    margin: 0 0 18px;
}

.about-story-text p:last-child {
    margin-bottom: 0;
}

.about-story-lead {
    font-size: 1.15rem;
    font-weight: 500;
    border-left: 3px solid var(--secondary);
    padding-left: 18px;
    margin-bottom: 32px;
}

.about-story-highlights {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-story-cta {
    display: inline-flex;
    margin-top: 32px;
}

.about-story-highlight {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.about-story-highlight-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    background: rgba(255, 197, 66, 0.22);
    border: none;
    color: var(--primary-two);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.about-story-highlight-body h3 {
    color: var(--dark);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
}

.about-story-highlight-body p {
    color: var(--dark);
    opacity: 0.8;
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

.about-story-photo {
    position: sticky;
    top: 100px;
    border-radius: 20px;
    overflow: hidden;
    height: 420px;
    box-shadow: 0 14px 32px rgba(26, 78, 138, 0.12);
}

.about-story-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-amenities-title {
    text-align: center;
    color: var(--dark);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.about-faq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.about-faq-heading .section-title {
    text-align: left;
    margin-bottom: 0;
}

.about-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.85fr;
    gap: 40px;
    align-items: start;
}

.about-faq-column {
    display: flex;
    flex-direction: column;
}

.about-faq-row {
    border-bottom: 1px solid var(--border);
}

.about-faq-row:last-child {
    border-bottom: none;
}

.about-faq-row-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
}

.about-faq-row-summary::-webkit-details-marker {
    display: none;
}

.about-faq-row-icon {
    color: var(--secondary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.about-faq-row-question {
    flex: 1;
    font-weight: 600;
    color: var(--dark);
}

.about-faq-row-chevron {
    color: var(--secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.about-faq-row[open] .about-faq-row-chevron {
    transform: rotate(90deg);
}

.about-faq-row-answer {
    padding: 0 0 18px 34px;
    color: var(--dark);
    line-height: 1.7;
}

.about-faq-row-answer a {
    color: var(--secondary);
    font-weight: 600;
    text-decoration: underline;
}

.about-faq-aside {
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 34px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.about-faq-aside h3 {
    color: var(--dark);
    font-size: 1.15rem;
    margin: 0;
}

.about-faq-aside p {
    color: var(--dark);
    opacity: 0.75;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 900px) {
    .about-story-row {
        grid-template-columns: 1fr;
        margin-top: 10px;
    }

    .about-story-photo {
        position: static;
        height: 280px;
        order: -1;
    }

    .about-faq-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-faq-aside {
        margin-top: 16px;
    }
}
/*About Us Page CSS End*/

/*404 Page CSS Start*/
.error-wall {
    text-align: center;
    padding: 60px 20px;
}

.error-wall h1 {
    font-size: 5rem;
    color: var(--secondary);
    margin-bottom: 0;
}

.error-wall h3 {
    color: var(--dark);
    margin-bottom: 10px;
}

.error-wall p {
    color: var(--text-light);
    margin-bottom: 28px;
}

.error-wall-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* Privacy Policy page - previously totally unstyled: .contact-section and
   .contact-header (used only here, page-privacy-policy.php) had no matching
   rules anywhere in the theme. */
.contact-section {
    padding: 20px 0;
}

.contact-header {
    margin-bottom: 30px;
}

.privacy-policy-details {
    max-width: 820px;
    color: var(--dark);
    font-size: 1rem;
    line-height: 1.75;
}

.privacy-policy-details p {
    margin: 0 0 20px;
}

.privacy-policy-details h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem;
    color: var(--primary);
    margin: 32px 0 12px;
}

/* Jobs / Careers Page */
.jobs-section {
    padding: 20px 0;
}

.jobs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(214, 26, 33, 0.1);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(214, 26, 33, 0.08);
}

.jobs-eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}

/* Two-column layout: apply (intro + form) on the left, open positions on
   the right, so both are visible together instead of one being buried
   below a long scroll of the other. */
.jobs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.jobs-col-intro .section-header {
    text-align: left;
}

.jobs-col-intro .section-intro {
    margin-left: 0;
    max-width: none;
}

/* Application form - reuses .contact-form-wrapper's card styling (white,
   shadow, rounded) and CF7's own global .wpcf7-form input styling, so it
   looks and behaves exactly like the Contact page's form. */
.jobs-form-wrapper {
    margin-top: 30px;
}

.jobs-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.jobs-listings-title {
    text-align: left;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .jobs-two-col {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.jobs-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.jobs-listing-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.jobs-listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(26, 78, 138, 0.12);
}

.jobs-listing-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--secondary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.jobs-listing-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: rgba(51, 65, 85, 0.75);
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 20px;
}

.jobs-listing-meta strong {
    font-style: normal;
    color: var(--dark);
}

.jobs-listing-label {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary);
    margin: 0 0 8px;
}

.jobs-listing-description,
.jobs-listing-responsibilities {
    text-align: left;
    margin-top: 20px;
}

.jobs-listing-description p,
.jobs-listing-responsibilities p {
    color: rgba(51, 65, 85, 0.85);
    line-height: 1.7;
}

.jobs-listing-responsibilities ul {
    margin: 0;
    padding-left: 20px;
    color: rgba(51, 65, 85, 0.85);
    line-height: 1.7;
}

.jobs-listing-responsibilities li {
    margin-bottom: 8px;
}

/* Fixed height (not max-height) so every card clamps to the exact same
   size regardless of how much description/responsibilities content it
   has - a short listing like Front Desk just has blank space below its
   content instead of the card itself being visibly shorter than the
   others. main.js measures overflow and adds .is-clamped only when a
   card's real content is actually taller than this box. */
.jobs-listing-body {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.jobs-listing-body.is-clamped {
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.jobs-read-more-btn {
    align-self: flex-start;
    margin-top: 16px;
    background: none;
    border: none;
    padding: 0;
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jobs-read-more-btn:hover {
    color: var(--secondary-light);
}

/* Job Description Modal - shared by every "Read More" button; main.js swaps
   its title/body per click rather than one modal instance per card. */
.job-description-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.job-description-modal.is-open {
    display: block;
}

.job-description-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 22, 0.75);
}

.job-description-modal-content {
    position: relative;
    background: var(--white);
    max-width: 640px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    margin: 8vh auto 0;
    padding: 36px;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: zoom 0.3s ease;
}

.job-description-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #8993A4;
    cursor: pointer;
    transition: color 0.3s ease;
}

.job-description-modal-close:hover {
    color: var(--secondary);
}

.job-description-modal-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--primary);
    font-size: 1.4rem;
    margin: 0 0 16px;
    padding-right: 30px;
}

.job-description-modal-body p {
    color: rgba(51, 65, 85, 0.85);
    line-height: 1.75;
    margin: 0 0 16px;
}

.job-description-modal-body .jobs-listing-label {
    margin-top: 24px;
}

.job-description-modal-body .jobs-listing-label:first-child {
    margin-top: 0;
}

.job-description-modal-body ul {
    margin: 0;
    padding-left: 20px;
    color: rgba(51, 65, 85, 0.85);
    line-height: 1.75;
}

.job-description-modal-body li {
    margin-bottom: 8px;
}

@media (max-width: 576px) {
    .jobs-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .job-description-modal-content {
        padding: 26px 20px;
        margin-top: 5vh;
    }
    .fullwidth-map-wrapper
    {
        margin-top: 20px;
    }
    .jobs-listing-body
    {
        height: 130px;
    }
    .hero-text-slide
    {
        padding: 0 5px;
    }
    .home-promo-rating
    {
        display: none;
    }
}

/*404 Page CSS End*/