/* The Weddings Dot - site-wide glass design system.
   Loaded last on every public page. Tokens first, then components. Brand palette: navy #1D2742, ivory #F8F5EF,
   champagne #C8A66A / #E2CCA1. Glass = translucent tint + backdrop blur + 1px light edge + inner highlight + soft shadow.
   Primary calls to action stay solid. Every glass rule has a solid fallback (see @supports not ...). */
:root{
 /* surfaces */
 --glass-navy-top:rgba(29,39,66,.10);        /* header over the hero */
 --glass-navy-scrolled:rgba(29,39,66,.40);   /* header once scrolled */
 --glass-navy-float:rgba(29,39,66,.12);      /* floating panels over photography */
 --glass-light:rgba(248,245,239,.38);        /* light glass on light backgrounds */
 --glass-control:rgba(255,255,255,.10);      /* secondary buttons / compact controls */
 --glass-control-hover:rgba(255,255,255,.26);
 --glass-solid:#1D2742;                      /* solid fallback */
 /* material */
 --glass-blur:8px;--glass-blur-sm:6px;--glass-sat:130%;
 --glass-border:rgba(255,255,255,.34);--glass-border-strong:rgba(255,255,255,.5);
 --glass-edge:#E2CCA1;
 --glass-highlight:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06);
 --glass-shadow-sm:0 6px 18px rgba(10,14,28,.18);
 --glass-shadow-md:0 14px 34px rgba(10,14,28,.26);
 --glass-radius:2px;
 --glass-ease:300ms ease;
}
@media(max-width:620px){:root{--glass-blur:8px}}

/* ---- Reusable glass variants (use as classes on new components) ---- */
.glass-navy,.glass-float,.glass-light,.glass-control{border:1px solid var(--glass-border);border-radius:var(--glass-radius);box-shadow:var(--glass-highlight),var(--glass-shadow-sm);transition:background-color var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease)}
.glass-navy{background:var(--glass-navy-scrolled);color:#fff}
.glass-float{background:linear-gradient(160deg,rgba(255,255,255,.08),var(--glass-navy-float) 60%);color:#fff;box-shadow:var(--glass-highlight),var(--glass-shadow-md)}
.glass-light{background:var(--glass-light);color:#292720}
.glass-control{background:var(--glass-control);color:#fff}
.glass-control:hover{background:var(--glass-control-hover);border-color:var(--glass-border-strong)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .glass-navy,.glass-float,.glass-light,.glass-control{-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .glass-navy,.glass-float,.glass-control{background:var(--glass-solid)}
 .glass-light{background:#F8F5EF}
}

/* ---- Header (geometry lives in site-header.css) ---- */
/* Header: soft glass that melts into the page. A dark-to-clear wash (strongest behind the nav, gone at the bottom edge), a blur layer that fades out
   with a mask, and no border, edge or shadow, so there is no hard rectangle against the hero. Only background layers are translucent. */
.site-header,.site-header.is-scrolled,.site-header.menu-open{
 background:linear-gradient(180deg,rgba(14,20,38,.42) 0%,rgba(14,20,38,.24) 55%,rgba(14,20,38,0) 100%)!important;
 border-bottom:0!important;box-shadow:none!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.site-header::before{
 content:"";position:absolute;left:0;right:0;top:0;bottom:-26px;z-index:-1;pointer-events:none;
 -webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);
 -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
 opacity:1!important;
}
.site-header .sh-brand img{filter:drop-shadow(0 1px 5px rgba(10,14,28,.6))}   /* keeps the white logo visible over light sections */
.site-header .sh-links>a,.site-header .sh-brand{text-shadow:0 1px 10px rgba(10,14,28,.45)}   /* keeps nav legible over bright photos */
.site-header .sh-links>a.sh-book{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
}

/* ---- Footer: one premium navy treatment for both footer templates ---- */
/* Liquid-glass footer. Nothing sits behind a footer at the end of the page, so the footer carries its own backdrop
   (a darkened room photograph); a ::before pane then frosts it (navy ~22% + blur + saturation). Text stays on top, fully opaque. */
footer,.ftco-footer{
 position:relative;isolation:isolate;
 background:linear-gradient(180deg,rgba(14,20,38,.36),rgba(14,20,38,.52)),url(../images/roomcomman.webp) center/cover no-repeat,#1D2742!important;
 border-top:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 -14px 36px rgba(10,14,28,.14);color:#eee4d6;
}
footer::before,.ftco-footer::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(29,39,66,.06) 40%,rgba(29,39,66,.12));
 -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
}
.ftco-footer>.overlay{background:transparent!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 footer,.ftco-footer{background:linear-gradient(180deg,#242f50 0%,#1D2742 38%,#171f38 100%)!important}
}
@media(min-width:861px){.footer-grid>div+div{border-left:1px solid rgba(255,255,255,.12);padding-left:24px}}
footer a,.ftco-footer a{transition:color var(--glass-ease)}
footer a:focus-visible,.ftco-footer a:focus-visible{outline:2px solid #E2CCA1;outline-offset:3px}
footer a:hover,.ftco-footer a:hover{color:#E2CCA1}
.footer-grid h4,.ftco-footer .ftco-heading-2,.ftco-footer .ftco-footer-widget h2{color:#E2CCA1!important}
.footer-bottom{border-top-color:rgba(226,204,161,.2)}
.ftco-footer p,.footer-bottom{color:rgba(238,228,214,.68)}
.ftco-footer-social li a{border:1px solid var(--glass-border);background:var(--glass-control);box-shadow:var(--glass-highlight);transition:background-color var(--glass-ease),border-color var(--glass-ease)}
.ftco-footer-social li a:hover{background:var(--glass-control-hover);border-color:var(--glass-edge)}

/* ---- Buttons ---- */
/* primary (stays solid): edge definition + highlight, calm hover */
.button-dark,.btn-primary,.btn-checkout-next,.btn-book{box-shadow:var(--glass-highlight),0 4px 12px rgba(10,14,28,.16);transition:background-color var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease),transform 200ms ease}
.button-dark:hover,.btn-primary:hover{box-shadow:var(--glass-highlight),var(--glass-shadow-sm)}
/* secondary: visibly translucent */
.button,.btn-outline-gold,.btn-outline-primary{transition:background-color var(--glass-ease),border-color var(--glass-ease),box-shadow var(--glass-ease),transform 200ms ease}
.button:not(.button-dark):not(.button-light){background:var(--glass-light);box-shadow:var(--glass-highlight)}
.button:not(.button-dark):not(.button-light):hover{background:rgba(29,39,66,.9);color:#fff}
.button-light,.btn-white{background:var(--glass-control);border-color:var(--glass-border-strong);color:#fff;box-shadow:var(--glass-highlight),var(--glass-shadow-sm)}
.button-light:hover{background:var(--glass-control-hover)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .button:not(.button-dark),.btn-outline-gold,.btn-white{-webkit-backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur-sm)) saturate(var(--glass-sat))}
}
/* pressed + keyboard focus */
.button:active,.btn:active,.btn-outline-gold:active,.sh-book:active{transform:translateY(1px)}
.button:focus-visible,.btn:focus-visible,.btn-outline-gold:focus-visible{outline:2px solid #E2CCA1;outline-offset:3px}

/* ---- Floating panels over photography (homepage-style pages) ---- */
.hospitality-copy,.wedding-content{background:linear-gradient(160deg,rgba(255,255,255,.07),var(--glass-navy-float) 62%);border:1px solid var(--glass-border);box-shadow:var(--glass-highlight),var(--glass-shadow-md);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(130%);backdrop-filter:blur(var(--glass-blur)) saturate(130%)}
.hero-arrow{background:var(--glass-control);border-color:var(--glass-border-strong);box-shadow:var(--glass-highlight),var(--glass-shadow-sm)}
.experience-card{transition:transform var(--glass-ease)}
.experience-card:hover{transform:translateY(-3px)}

/* ---- Form controls: lightly tinted, still readable ---- */
.form-control,.form-grid input,.form-grid select,.form-grid textarea{transition:border-color var(--glass-ease),background-color var(--glass-ease),box-shadow var(--glass-ease)}
.form-control:focus{border-color:#C8A66A;box-shadow:0 0 0 3px rgba(200,166,106,.28)}
.form-grid input,.form-grid select,.form-grid textarea{background:rgba(255,255,255,.09);border-color:rgba(226,204,161,.4)}
input[type=checkbox],input[type=radio]{accent-color:#C8A66A}

/* Let the photography show through: lighten the dark overlays that sit under the glass panels */
.hospitality-card:after{background:linear-gradient(0deg,rgba(18,22,38,.45),transparent 70%)}
.wedding-feature:after{background:linear-gradient(90deg,rgba(18,22,38,.30),rgba(18,22,38,0))}
.hospitality-copy,.wedding-content{text-shadow:0 1px 12px rgba(10,14,28,.7)}
.hospitality-copy p,.wedding-content p{text-shadow:0 1px 12px rgba(10,14,28,.75)}
.site-header .sh-links>a,.site-header .sh-brand{text-shadow:0 1px 12px rgba(10,14,28,.7)}

@media(prefers-reduced-motion:reduce){
 .button,.btn,.btn-outline-gold,.experience-card,.site-header,.site-header .sh-book,footer a,.ftco-footer a{transition:none}
 .experience-card:hover{transform:none}.button:active,.btn:active{transform:none}
}

/* ===== Ultra-transparent glass + floating cards (v3) =====
   Decorative surfaces use ~99% transparent backgrounds (alpha .01-.06): the material is read from blur, a fine edge,
   an inner highlight and a soft shadow. Surfaces that carry reading text keep a slightly stronger tint (documented per rule). */
:root{
 --glass-ultra-navy:rgba(29,39,66,.01);
 --glass-ultra-light:rgba(255,255,255,.01);
 --glass-edge-soft:rgba(255,255,255,.22);
 --glass-edge-ink:rgba(29,39,66,.14);          /* edge for glass sitting on light (ivory/white) sections */
 --glass-blur:18px;--glass-sat:150%;
 --glass-lift:-6px;
 --glass-shadow-float:0 18px 40px rgba(20,28,52,.16),0 4px 10px rgba(20,28,52,.08);
 --glass-shadow-float-hover:0 28px 56px rgba(20,28,52,.24),0 8px 16px rgba(20,28,52,.1);
 --glass-navy-top:rgba(29,39,66,.01);
 --glass-navy-scrolled:rgba(29,39,66,.50);     /* stronger once scrolled: white nav text must stay legible over light sections */
 --glass-navy-float:rgba(29,39,66,.06);        /* text panels over photos: a touch of tint for reading */
 --glass-control:rgba(255,255,255,.02);
 --glass-control-hover:rgba(255,255,255,.14);
 --glass-border:rgba(255,255,255,.22);
}
@media(max-width:620px){:root{--glass-blur:12px}}

/* header: nearly clear at the top, edge + highlight define the glass */
.site-header .sh-links>a,.site-header .sh-brand{text-shadow:0 1px 14px rgba(10,14,28,.8),0 0 2px rgba(10,14,28,.35)}

/* secondary buttons / hero controls: ultra-transparent, readable labels */
.button-light,.hero-actions .button-light,.btn-white,.hero-arrow{background:var(--glass-control);text-shadow:0 1px 10px rgba(10,14,28,.7)}
.button-light:hover,.hero-actions .button-light:hover,.hero-arrow:hover{background:var(--glass-control-hover);border-color:rgba(255,255,255,.7)}
.hero-actions .button-light:hover{transform:translateY(-2px)}

/* floating cards (homepage-style pages): experience cards become glass objects */
.experience-card{
 position:relative;background:var(--glass-ultra-light);border:1px solid var(--glass-edge-ink);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--glass-shadow-float);padding-bottom:20px;
 -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
 transition:transform 300ms ease,box-shadow 300ms ease,border-color 300ms ease;
}
.experience-card h3,.experience-card p,.experience-card>.text-link{margin-left:20px;margin-right:20px}
.experience-card>.text-link{display:inline-block}
@media(hover:hover) and (pointer:fine){
 .experience-card:hover{transform:translateY(var(--glass-lift)) scale(1.01);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--glass-shadow-float-hover);border-color:rgba(200,166,106,.55)}
}
@media(hover:none){.experience-card:hover{transform:none}}

/* floating text panels over photography: ~94% transparent (reading text), same edge + lift */
.hospitality-copy,.wedding-content{
 background:linear-gradient(160deg,rgba(255,255,255,.04),var(--glass-navy-float) 70%);border-color:var(--glass-edge-soft);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--glass-shadow-float);
 transition:transform 300ms ease,box-shadow 300ms ease,border-color 300ms ease;
}
@media(hover:hover) and (pointer:fine){
 .hospitality-card:hover .hospitality-copy{transform:translateY(var(--glass-lift));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--glass-shadow-float-hover);border-color:rgba(255,255,255,.4)}
}
.hospitality-card:after{background:linear-gradient(0deg,rgba(18,22,38,.32),transparent 65%)}
.wedding-feature:after{background:linear-gradient(90deg,rgba(18,22,38,.22),rgba(18,22,38,0))}

/* venue-list strip (Our Venues / home): light glass with edge */
.venue-list{background:var(--glass-ultra-light);border:1px solid var(--glass-edge-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--glass-shadow-float)}

/* footer social/icon controls: compact floating glass */
.ftco-footer-social li a{background:var(--glass-control);border-color:var(--glass-edge-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px rgba(10,14,28,.25)}
.ftco-footer-social li a:hover{transform:translateY(-3px);background:var(--glass-control-hover)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .experience-card{background:#fffdf9}
 .hospitality-copy,.wedding-content{background:rgba(29,39,66,.6)}
}
@media(prefers-reduced-motion:reduce){
 .experience-card,.hospitality-copy,.wedding-content,.ftco-footer-social li a,.hero-actions .button-light{transition:none}
 .experience-card:hover,.hospitality-card:hover .hospitality-copy,.ftco-footer-social li a:hover,.hero-actions .button-light:hover{transform:none}
}
.experience-card .image{width:100%}   /* aspect-ratio card image must fill the card (it was shrinking inside the inline <a>) */

/* ===== v4: image-first glass. Lower blur (blur hides the photo), lower tint; edge + shadow carry the material ===== */
:root{
 --glass-blur:5px;--glass-blur-sm:4px;--glass-sat:125%;
 --glass-navy-top:rgba(29,39,66,0);
 --glass-navy-scrolled:rgba(29,39,66,.24);
 --glass-navy-float:rgba(29,39,66,.01);
 --glass-control:rgba(255,255,255,.01);
}
@media(max-width:620px){:root{--glass-blur:4px}}
.hospitality-copy,.wedding-content{background:rgba(255,255,255,.01);border-color:rgba(255,255,255,.35)}
.hospitality-card:after{background:linear-gradient(0deg,rgba(18,22,38,.2),transparent 55%)}
.wedding-feature:after{background:linear-gradient(90deg,rgba(18,22,38,.14),rgba(18,22,38,0))}
.hospitality-copy,.wedding-content,.hospitality-copy p,.wedding-content p,.hospitality-copy h2,.hospitality-copy h3,.wedding-content h2{text-shadow:0 1px 3px rgba(10,14,28,.65),0 2px 18px rgba(10,14,28,.75)}
.site-header .sh-links>a,.site-header .sh-brand{text-shadow:0 1px 3px rgba(10,14,28,.7),0 2px 16px rgba(10,14,28,.8)}

/* ===== v5: cards 100% transparent background (alpha 0). The edge, shadow, highlight and blur define them. ===== */
.experience-card,.hospitality-copy,.wedding-content,.venue-list,.glass-float,.glass-light{background:transparent}

/* ===== Experience cards: frosted liquid glass =====
   A card only reads as frosted if something sits behind it, so the section carries soft champagne / navy / blush glows
   (decorative, behind the cards only) and each card frosts them: white ~34% tint, 18px blur, 160% saturation, bright top edge. Text stays solid and dark. */
.section:has(.experience-card){
 background:
  radial-gradient(520px 340px at 12% 18%,rgba(200,166,106,.38),transparent 70%),
  radial-gradient(560px 380px at 88% 30%,rgba(29,39,66,.22),transparent 70%),
  radial-gradient(520px 360px at 45% 92%,rgba(226,170,150,.30),transparent 70%),
  var(--ivory,#f7f4ee);
}
.experience-card{
 background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 60%,rgba(255,255,255,.34));
 border:1px solid rgba(255,255,255,.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.25),0 18px 40px rgba(20,28,52,.14),0 4px 10px rgba(20,28,52,.06);
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
@media(hover:hover) and (pointer:fine){
 .experience-card:hover{border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 28px 56px rgba(20,28,52,.2),0 8px 16px rgba(20,28,52,.08)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.experience-card{background:rgba(255,253,249,.92)}}

/* ===== Homepage experience cards: photo card with a frosted glass text panel (same treatment as "For the Moments That Become Memories") =====
   The photo fills the card; the text sits in a pane that blurs the photo behind it. Scoped to cards that contain .xc-glass. */
.experience-card:has(.xc-glass){
 position:relative;overflow:hidden;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;padding:0;
 background:transparent;border:1px solid rgba(255,255,255,.35);
 -webkit-backdrop-filter:none;backdrop-filter:none;
 box-shadow:0 18px 40px rgba(20,28,52,.18),0 4px 10px rgba(20,28,52,.08);
}
.experience-card:has(.xc-glass) .image{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.experience-card:has(.xc-glass):after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,22,38,.55),rgba(18,22,38,0) 66%);pointer-events:none}
.experience-card .xc-glass{
 position:relative;z-index:2;margin:14px;padding:22px 22px 20px;
 background:rgba(255,255,255,.04);
 border:1px solid rgba(255,255,255,.18);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
 -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
 color:#fff;
}
.experience-card .xc-glass h3,.experience-card .xc-glass p{margin-left:0;margin-right:0;color:#fff;text-shadow:0 1px 3px rgba(10,14,28,.6),0 2px 16px rgba(10,14,28,.6)}
.experience-card .xc-glass h3{margin-top:0}
.experience-card .xc-glass .text-link{margin:0;color:#fff;border-bottom-color:#fdcf90;text-shadow:0 1px 8px rgba(10,14,28,.7)}
@media(hover:hover) and (pointer:fine){.experience-card:has(.xc-glass):hover{border-color:rgba(255,255,255,.6)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.experience-card .xc-glass{background:rgba(29,39,66,.62)}}
@media(max-width:620px){.experience-card:has(.xc-glass){min-height:420px}}

/* ===== One card transparency everywhere: 4% white tint, 2px blur, faint edge (matches the homepage photo cards) ===== */
:root{--card-tint:rgba(255,255,255,.04);--card-edge:rgba(255,255,255,.18);--card-blur:2px}
.experience-card:not(:has(.xc-glass)),.hospitality-copy,.wedding-content,.venue-list,.glass-float,.glass-light{
 background:var(--card-tint);border-color:var(--card-edge);
 -webkit-backdrop-filter:blur(var(--card-blur));backdrop-filter:blur(var(--card-blur));
}
.experience-card .xc-glass{background:var(--card-tint);border-color:var(--card-edge);-webkit-backdrop-filter:blur(var(--card-blur));backdrop-filter:blur(var(--card-blur))}

/* Our Venues: photo sits inside a link, and the cards are wider, so give them the same photo + glass-panel treatment at a taller size */
.experience-card:has(.xc-glass)>a:has(.image){position:absolute;inset:0;display:block}
.venue-cards .experience-card:has(.xc-glass){min-height:520px}
.venue-cards .experience-card .xc-glass h3{font-size:1.85rem}
@media(max-width:620px){.venue-cards .experience-card:has(.xc-glass){min-height:440px}}

/* ===== Liquid glass on the older (Bootstrap) pages: room amenities tabs, policy accordions, booking card, forms, cards =====
   Same recipe as the homepage experience section: soft champagne / navy / blush glows behind, frosted white panes in front
   (white ~34% tint, 18px blur, 160% saturation, bright top edge, floating shadow). Text stays solid and dark. */
.ftco-section:has(.accordion1,.nav-pills,.slideshow-container,form,.card,.blog-entry,.room-wrap){
 background:
  radial-gradient(620px 460px at 6% 10%,rgba(200,166,106,.34),transparent 70%),
  radial-gradient(640px 520px at 94% 38%,rgba(29,39,66,.16),transparent 70%),
  radial-gradient(600px 460px at 18% 88%,rgba(226,170,150,.28),transparent 70%),
  #f7f4ee;
}
/* accordion buttons + panels */
.accordion1,.accordion1.active,.accordion1:hover{
 background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 60%,rgba(255,255,255,.34));
 border:1px solid rgba(255,255,255,.7);color:#2a2823;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 28px rgba(20,28,52,.1);
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 margin-top:10px;transition:background-color 300ms ease,box-shadow 300ms ease,transform 300ms ease;
}
.accordion1:hover,.accordion1.active{background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.36))}
.accordion1:after{color:#a58a5e}
.panel{
 background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.6);border-top:0;
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 box-shadow:0 12px 28px rgba(20,28,52,.08);
}
/* amenities tabs */
.ftco-menu .nav-pills .nav-link{
 background:rgba(255,255,255,.26)!important;color:#8a6d3b!important;border:1px solid rgba(255,255,255,.6)!important;border-radius:0;
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:background-color 300ms ease,color 300ms ease;
}
.ftco-menu .nav-pills .nav-link:hover{background:rgba(255,255,255,.5)!important}
.ftco-menu .nav-pills .nav-link.active,.ftco-menu .nav-pills .show>.nav-link{
 background:linear-gradient(160deg,rgba(214,176,112,.78),rgba(190,150,86,.62))!important;color:#1d2742!important;border-color:rgba(255,255,255,.7)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 24px rgba(160,120,50,.25);
}
/* "Book Directly & Save" card (inline-styled) */
div[style*="padding: 25px"][style*="border-radius: 8px"]{
 background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.26) 60%,rgba(255,255,255,.4))!important;
 border:1px solid rgba(255,255,255,.75)!important;
 box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(20,28,52,.14),0 4px 10px rgba(20,28,52,.06)!important;
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
div[style*="padding: 25px"][style*="border-radius: 8px"] input[type=date],
div[style*="padding: 25px"][style*="border-radius: 8px"] input[type=text],
div[style*="padding: 25px"][style*="border-radius: 8px"] select{
 background:rgba(255,255,255,.45)!important;border:1px solid rgba(255,255,255,.8)!important;
 box-shadow:inset 0 1px 2px rgba(20,28,52,.06);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .accordion1,.panel,div[style*="padding: 25px"][style*="border-radius: 8px"]{background:rgba(255,253,249,.92)!important}
}
/* amenity list pane (was solid white) */
.ftco-menu .tab-content .col-md-12.text-left,.ftco-menu .tab-pane .text-left{
 background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22) 60%,rgba(255,255,255,.34))!important;
 border:1px solid rgba(255,255,255,.7);padding:22px 26px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 32px rgba(20,28,52,.1);
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
/* the slideshow's ".active{background:#717171}" rule leaked onto the amenity tab pane */
.tab-pane.active,.tab-pane.show{background:transparent!important}

/* footer text sits directly on the lighter glass, so give it the same legibility shadow as the nav */
footer,.ftco-footer{text-shadow:0 1px 3px rgba(10,14,28,.55),0 2px 14px rgba(10,14,28,.45)}
footer .footer-bottom,.ftco-footer p,.footer-bottom{color:rgba(250,244,234,.88)}
footer a,.ftco-footer a,.footer-grid h4,.ftco-footer .ftco-heading-2{text-shadow:0 1px 3px rgba(10,14,28,.7),0 2px 12px rgba(10,14,28,.55)}

/* ===== Enquiry band: liquid glass over a photograph =====
   The solid navy band becomes a venue photo (navy-washed so text stays readable) with a frosted pane holding the content. */
.section.enquiry{
 background:linear-gradient(180deg,rgba(14,20,38,.12),rgba(14,20,38,.22)),url("../../images/Crystal-Hall-Photos/Crystal/DSC03197-optimized.webp") center/cover no-repeat,#1D2742!important;
}
.section.enquiry .enquiry-center,.section.enquiry .enquiry-grid{
 padding:clamp(28px,5vw,64px);
 background:rgba(255,255,255,.02);
 border:1px solid rgba(255,255,255,.28);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 60px rgba(10,14,28,.22);
 -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.section.enquiry h2,.section.enquiry p,.section.enquiry .eyebrow{text-shadow:0 1px 3px rgba(10,14,28,.6),0 2px 16px rgba(10,14,28,.5)}
.section.enquiry p{color:rgba(250,244,234,.92)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.section.enquiry .enquiry-center,.section.enquiry .enquiry-grid{background:rgba(29,39,66,.7)}}

/* ===== Booking page (booking.html): same liquid glass as the rest of the site =====
   Visual layer only. The search form, results, rate plans, checkout drawer and all booking logic are untouched.
   A navy-washed room photo sits behind the header; soft glows sit behind the panels so the glass has something to frost. */
html body:has(.search-panel-wrapper){
 background:
  linear-gradient(180deg,rgba(247,244,238,0) calc(100% - 70px),#f7f4ee) top center/100% 200px no-repeat,
  linear-gradient(180deg,rgba(14,20,38,.5),rgba(14,20,38,.62)) top center/100% 200px no-repeat,
  url("../images/roomcomman.webp") top center/100% 200px no-repeat,
  radial-gradient(640px 480px at 6% 30%,rgba(200,166,106,.5),transparent 70%),
  radial-gradient(700px 540px at 94% 55%,rgba(60,80,140,.3),transparent 70%),
  radial-gradient(620px 480px at 20% 92%,rgba(226,150,130,.42),transparent 70%),
  radial-gradient(560px 420px at 62% 22%,rgba(200,166,106,.4),transparent 70%),
  radial-gradient(560px 420px at 40% 62%,rgba(226,150,130,.3),transparent 70%),
  #f3eee6;
}
body:has(.search-panel-wrapper) .search-panel-wrapper{
 background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(29,39,66,.62) 30%,rgba(29,39,66,.72));
 border:1px solid rgba(255,255,255,.3);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 24px 56px rgba(10,14,28,.28);
 -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
}
body:has(.search-panel-wrapper) .results-header,
body:has(.search-panel-wrapper) .room-card{
 background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.14) 55%,rgba(255,255,255,.28));
 border:1px solid rgba(255,255,255,.85);
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.35),0 22px 48px rgba(20,28,52,.18),0 4px 12px rgba(20,28,52,.08);
 -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
}
body:has(.search-panel-wrapper) .rate-plan-row{
 background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.3));border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(20,28,52,.1);
 -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
}
body:has(.search-panel-wrapper) .room-gallery{background:transparent}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body:has(.search-panel-wrapper) .results-header,body:has(.search-panel-wrapper) .room-card{background:rgba(255,253,249,.94)}
 body:has(.search-panel-wrapper) .search-panel-wrapper{background:rgba(29,39,66,.92)}
}
/* booking search panel: clearer labels on the glass */
body:has(.search-panel-wrapper) .search-panel-wrapper label{color:#fff;font-weight:600;letter-spacing:.06em;text-shadow:0 1px 6px rgba(10,14,28,.6)}
body:has(.search-panel-wrapper) .search-panel-wrapper .checkbox-item{color:rgba(255,255,255,.92);font-weight:500}
body:has(.search-panel-wrapper) .search-panel-wrapper .search-title{color:#f3e2bd;font-weight:500;text-shadow:0 1px 8px rgba(10,14,28,.7)}

/* booking locale bar (language / currency): clear glass over the photo, no solid strip */
.booking-locale-bar{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff;text-shadow:0 1px 8px rgba(10,14,28,.7)}
.booking-locale-bar *{color:#fff}

/* ===== Gallery page: glass cards ===== */
.ftco-section:has(.gallery.image-popup){
 background:
  radial-gradient(620px 460px at 6% 14%,rgba(200,166,106,.42),transparent 70%),
  radial-gradient(660px 520px at 94% 42%,rgba(60,80,140,.22),transparent 70%),
  radial-gradient(620px 480px at 24% 88%,rgba(226,150,130,.36),transparent 70%),
  #f5f0e8;
}
/* intro heading becomes a frosted card */
.ftco-section:has(.gallery.image-popup) .heading-section{
 padding:34px 28px;
 background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 60%,rgba(255,255,255,.34));
 border:1px solid rgba(255,255,255,.8);
 box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(20,28,52,.12);
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
/* photo tiles: glass-framed floating cards */
.gallery.image-popup{
 border:1px solid rgba(255,255,255,.85);
 box-shadow:0 0 0 7px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.7),0 18px 40px rgba(20,28,52,.18),0 4px 10px rgba(20,28,52,.08);
 transition:transform 300ms ease,box-shadow 300ms ease;margin:8px;
}
@media(hover:hover) and (pointer:fine){
 .gallery.image-popup:hover{transform:translateY(-6px);box-shadow:0 0 0 7px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.9),0 28px 56px rgba(20,28,52,.26),0 8px 16px rgba(20,28,52,.1)}
}
/* hover icon: frosted round glass instead of the gold square */
.gallery.image-popup .icon{
 width:64px;height:64px;margin:0 auto!important;border-radius:50%;
 background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px rgba(10,14,28,.3);
 -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
}
.gallery.image-popup .icon:after{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ftco-section:has(.gallery.image-popup) .heading-section{background:rgba(255,253,249,.92)}.gallery.image-popup .icon{background:rgba(29,39,66,.6)}}
@media(prefers-reduced-motion:reduce){.gallery.image-popup{transition:none}.gallery.image-popup:hover{transform:none}}

/* ===== Homepage-style text sections: frosted panes over soft glows =====
   Intro block (text + photo), section headings and venue copy get the same recipe as the experience cards. */
.section:has(.intro-grid,.venue-feature),.section.experiences{
 background:
  radial-gradient(560px 360px at 6% 40%,rgba(200,166,106,.4),transparent 70%),
  radial-gradient(520px 340px at 94% 45%,rgba(60,80,140,.2),transparent 70%),
  radial-gradient(560px 340px at 70% 60%,rgba(226,150,130,.32),transparent 70%),
  #f6f1e9;
}
.intro-grid>div:first-child,.section.experiences .section-head,.venue-copy{
 padding:clamp(26px,4vw,52px);
 background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 60%,rgba(255,255,255,.34));
 border:1px solid rgba(255,255,255,.8);
 box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(20,28,52,.12),0 4px 10px rgba(20,28,52,.05);
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
.section.experiences .section-head{margin-bottom:34px}
.intro-grid img,.venue-feature>img{
 border:1px solid rgba(255,255,255,.85);
 box-shadow:0 0 0 7px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.7),0 18px 40px rgba(20,28,52,.18);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .intro-grid>div:first-child,.section.experiences .section-head,.venue-copy{background:rgba(255,253,249,.92)}
}

/* ===== Floating: text panes, photos and icons lift on hover (fine pointers only; off for touch and reduced motion) ===== */
.intro-grid>div:first-child,.section.experiences .section-head,.venue-copy,.hospitality-copy,.wedding-content,
.experience-card .xc-glass,.heading-section,.intro-grid img,.venue-feature>img,
.ftco-footer-social li a,.hero-arrow,.site-header .sh-brand img,.room-card,.results-header{
 transition:transform 300ms ease,box-shadow 300ms ease,border-color 300ms ease,background-color 300ms ease;
 will-change:transform;
}
@media(hover:hover) and (pointer:fine){
 .intro-grid>div:first-child:hover,.section.experiences .section-head:hover,.venue-copy:hover,
 .ftco-section:has(.gallery.image-popup) .heading-section:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 1px 0 #fff,0 28px 56px rgba(20,28,52,.2),0 8px 16px rgba(20,28,52,.08);
 }
 .hospitality-card:hover .hospitality-copy,.wedding-feature:hover .wedding-content,.experience-card:hover .xc-glass{
  transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 28px 56px rgba(10,14,28,.32);
 }
 .intro-grid img:hover,.venue-feature>img:hover{
  transform:translateY(-6px);
  box-shadow:0 0 0 7px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.9),0 28px 56px rgba(20,28,52,.26);
 }
 .ftco-footer-social li a:hover,.hero-arrow:hover{transform:translateY(-4px)}
 .site-header .sh-brand:hover img{transform:translateY(-3px)}
 body:has(.search-panel-wrapper) .room-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 #fff,0 28px 56px rgba(20,28,52,.22)}
}
@media(hover:none),(prefers-reduced-motion:reduce){
 .intro-grid>div:first-child,.section.experiences .section-head,.venue-copy,.hospitality-copy,.wedding-content,
 .experience-card .xc-glass,.heading-section,.intro-grid img,.venue-feature>img,.ftco-footer-social li a,.hero-arrow,.site-header .sh-brand img,.room-card{transition:none;transform:none!important}
}

/* ===== Floating dock: the text panels over photographs become rounded glass docks that hover slightly above the image ===== */
.wedding-content,.hospitality-copy{
 border-radius:26px;
 border:1px solid rgba(255,255,255,.45);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 28px 60px rgba(10,14,28,.34),0 8px 18px rgba(10,14,28,.18);
 -webkit-backdrop-filter:blur(var(--card-blur,2px)) saturate(140%);backdrop-filter:blur(var(--card-blur,2px)) saturate(140%);
}
.hospitality-copy{margin:16px;border-radius:22px}
@keyframes dock-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(prefers-reduced-motion:no-preference){
 .wedding-content,.hospitality-copy{animation:dock-float 7s ease-in-out infinite}
 .hospitality-card:nth-child(2) .hospitality-copy{animation-delay:-3.5s}
}

/* ===== Photo backdrop floats too: the wedding photograph becomes a rounded floating card with the glass dock on top ===== */
.wedding-feature{
 margin:34px clamp(14px,3vw,44px);
 border-radius:32px;
 border:1px solid rgba(255,255,255,.7);
 box-shadow:0 0 0 7px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.6),0 30px 64px rgba(20,28,52,.28),0 8px 18px rgba(20,28,52,.12);
 transition:transform 300ms ease,box-shadow 300ms ease;
}
@media(hover:hover) and (pointer:fine){
 .wedding-feature:hover{transform:translateY(-6px);box-shadow:0 0 0 7px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.8),0 40px 80px rgba(20,28,52,.34),0 10px 22px rgba(20,28,52,.14)}
}
@keyframes photo-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(prefers-reduced-motion:no-preference){.wedding-feature{animation:photo-float 9s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.wedding-feature{transition:none}.wedding-feature:hover{transform:none}}

/* ===== Enquiry section: hover effect (mouse pointer) =====
   The glass pane lifts and brightens when the pointer is over it; fields and buttons react individually. */
.section.enquiry .enquiry-grid,.section.enquiry .enquiry-center{transition:transform 300ms ease,box-shadow 300ms ease,border-color 300ms ease,background-color 300ms ease}
.section.enquiry input,.section.enquiry select,.section.enquiry textarea{transition:transform 250ms ease,background-color 250ms ease,border-color 250ms ease,box-shadow 250ms ease}
@media(hover:hover) and (pointer:fine){
 .section.enquiry .enquiry-grid:hover,.section.enquiry .enquiry-center:hover{
  transform:translateY(-8px);border-color:rgba(255,255,255,.55);
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 60%,rgba(29,39,66,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 40px 80px rgba(10,14,28,.42),0 10px 22px rgba(10,14,28,.2);
 }
 .section.enquiry input:hover,.section.enquiry select:hover,.section.enquiry textarea:hover{
  transform:translateY(-2px);background-color:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);
  box-shadow:0 10px 24px rgba(10,14,28,.28);
 }
 .section.enquiry .button:hover,.section.enquiry .button-light:hover,.section.enquiry button:hover{
  transform:translateY(-3px);background:rgba(253,207,144,.22);border-color:rgba(253,207,144,.9);box-shadow:0 12px 28px rgba(10,14,28,.35);
 }
 .section.enquiry .eyebrow:hover,.section.enquiry h2:hover{text-shadow:0 2px 20px rgba(253,207,144,.55)}
}
.section.enquiry input:focus,.section.enquiry select:focus,.section.enquiry textarea:focus{border-color:#fdcf90;box-shadow:0 0 0 3px rgba(253,207,144,.3);outline:none}
@media(prefers-reduced-motion:reduce){.section.enquiry .enquiry-grid,.section.enquiry .enquiry-center,.section.enquiry input,.section.enquiry select,.section.enquiry textarea{transition:none}.section.enquiry .enquiry-grid:hover,.section.enquiry .enquiry-center:hover,.section.enquiry input:hover,.section.enquiry select:hover,.section.enquiry textarea:hover,.section.enquiry .button:hover{transform:none}}

/* enquiry: clearer photo — fields become light glass so the image reads through the whole section */
.section.enquiry input,.section.enquiry select,.section.enquiry textarea{background-color:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.4)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.section.enquiry h2,.section.enquiry p,.section.enquiry .eyebrow,.section.enquiry strong{text-shadow:0 1px 4px rgba(10,14,28,.8),0 2px 20px rgba(10,14,28,.7)}

/* ===== Footer links: glass pill hover (all pages, both footer layouts) =====
   Each link has a little invisible padding (offset by a negative margin so nothing moves), which becomes a frosted pill on hover. */
.footer-grid a:not(.brand),.footer-bottom a,.ftco-footer .ftco-footer-widget ul li a,.ftco-footer a:not(.ftco-footer-logo){
 border-radius:999px;border:1px solid transparent;
 transition:transform 250ms ease,background-color 250ms ease,border-color 250ms ease,box-shadow 250ms ease,color 250ms ease;
}
.footer-grid a:not(.brand){padding:3px 14px;margin-left:-14px;width:fit-content}
.footer-bottom a{padding:3px 12px;margin-right:-12px}
@media(hover:hover) and (pointer:fine){
 .footer-grid a:not(.brand):hover,.footer-bottom a:hover,.ftco-footer .ftco-footer-widget ul li a:hover,.ftco-footer a:not(.ftco-footer-logo):hover{
  transform:translateY(-3px);color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px rgba(10,14,28,.3);
  -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
 }
 .footer-grid .brand:hover img,.ftco-footer .ftco-footer-logo:hover{transform:translateY(-4px)}
}
.footer-grid .brand img{transition:transform 250ms ease}
.footer-grid a:not(.brand):focus-visible,.footer-bottom a:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.18);border-color:#E2CCA1}
@media(prefers-reduced-motion:reduce){.footer-grid a,.footer-bottom a,.footer-grid .brand img{transition:none}.footer-grid a:hover,.footer-bottom a:hover{transform:none}}

/* ===== Contact page: liquid glass + floating ===== */
.contact-section-new{
 background:
  radial-gradient(620px 460px at 4% 18%,rgba(200,166,106,.42),transparent 70%),
  radial-gradient(660px 520px at 96% 40%,rgba(60,80,140,.22),transparent 70%),
  radial-gradient(620px 480px at 26% 90%,rgba(226,150,130,.36),transparent 70%),
  #f5f0e8!important;
}
.contact-section-new .form-card,.contact-section-new .map-container{
 background:linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,255,255,.2) 60%,rgba(255,255,255,.36))!important;
 border:1px solid rgba(255,255,255,.85)!important;border-radius:26px;
 box-shadow:inset 0 1px 0 #fff,0 0 0 7px rgba(255,255,255,.22),0 24px 56px rgba(20,28,52,.16),0 6px 14px rgba(20,28,52,.07)!important;
 -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
 transition:transform 300ms ease,box-shadow 300ms ease;
}
.contact-section-new .map-container{overflow:hidden;padding:0}
.contact-section-new .info-icon{
 background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.28))!important;
 border:1px solid rgba(255,255,255,.9);
 box-shadow:inset 0 1px 0 #fff,0 12px 26px rgba(20,28,52,.16);
 -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
 transition:transform 250ms ease,box-shadow 250ms ease;
}
.contact-section-new .form-card .form-control{
 background:rgba(255,255,255,.4)!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:14px!important;
 box-shadow:inset 0 1px 2px rgba(20,28,52,.06);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 transition:transform 250ms ease,background-color 250ms ease,box-shadow 250ms ease,border-color 250ms ease;
}
.contact-section-new .form-card .form-control:focus{background:rgba(255,255,255,.7)!important;border-color:#cb963a!important;box-shadow:0 0 0 3px rgba(203,150,58,.25)}
@keyframes contact-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(prefers-reduced-motion:no-preference){
 .contact-section-new .form-card{animation:contact-float 9s ease-in-out infinite}
 .contact-section-new .map-container{animation:contact-float 9s ease-in-out -4s infinite}
 .contact-section-new .info-icon{animation:contact-float 6s ease-in-out infinite}
 .contact-section-new .info-icon:nth-of-type(2){animation-delay:-2s}
}
@media(hover:hover) and (pointer:fine){
 .contact-section-new .form-card:hover,.contact-section-new .map-container:hover{
  transform:translateY(-8px);box-shadow:inset 0 1px 0 #fff,0 0 0 7px rgba(255,255,255,.36),0 36px 72px rgba(20,28,52,.24),0 10px 22px rgba(20,28,52,.1)!important;
 }
 .contact-section-new .info-icon:hover{transform:translateY(-5px) scale(1.06);box-shadow:inset 0 1px 0 #fff,0 18px 34px rgba(20,28,52,.24)}
 .contact-section-new .form-card .form-control:hover{transform:translateY(-2px);background:rgba(255,255,255,.62)!important;box-shadow:0 10px 22px rgba(20,28,52,.12)}
 .contact-section-new .form-card .btn:hover,.contact-section-new .form-card button:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(160,120,50,.4)}
}
@media(prefers-reduced-motion:reduce){.contact-section-new .form-card,.contact-section-new .map-container,.contact-section-new .info-icon,.contact-section-new .form-card .form-control{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.contact-section-new .form-card,.contact-section-new .map-container{background:rgba(255,253,249,.94)!important}}

/* contact info rows: each row (icon + text) is a floating glass card that lifts as one */
.contact-section-new .info-item{
 padding:16px 22px;border-radius:22px;margin-bottom:14px;
 background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.16) 60%,rgba(255,255,255,.3));
 border:1px solid rgba(255,255,255,.8);
 box-shadow:inset 0 1px 0 #fff,0 14px 32px rgba(20,28,52,.1);
 -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
 transition:transform 300ms ease,box-shadow 300ms ease,border-color 300ms ease;
}
.contact-section-new .info-text h4,.contact-section-new .info-text p,.contact-section-new .info-text a{transition:color 250ms ease,text-shadow 250ms ease,transform 250ms ease}
.contact-section-new h2{transition:text-shadow 300ms ease,transform 300ms ease}
@keyframes info-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(prefers-reduced-motion:no-preference){
 .contact-section-new .info-item{animation:info-float 8s ease-in-out infinite}
 .contact-section-new .info-item:nth-child(2){animation-delay:-2.6s}
 .contact-section-new .info-item:nth-child(3){animation-delay:-5.2s}
}
@media(hover:hover) and (pointer:fine){
 .contact-section-new .info-item:hover{
  transform:translateY(-7px);border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,0 0 0 6px rgba(255,255,255,.3),0 28px 56px rgba(20,28,52,.2);
 }
 .contact-section-new .info-item:hover .info-icon{transform:translateY(-3px) scale(1.08)}
 .contact-section-new .info-item:hover .info-text h4{color:#a07a30;text-shadow:0 2px 14px rgba(203,150,58,.4)}
 .contact-section-new .info-text a:hover{color:#a07a30;transform:translateX(4px);display:inline-block}
 .contact-section-new .col-md-6>h2:hover{text-shadow:0 4px 22px rgba(203,150,58,.45);transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){.contact-section-new .info-item{transition:none}.contact-section-new .info-item:hover{transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.contact-section-new .info-item{background:rgba(255,253,249,.92)}}

/* Gallery heading card hover. The template's fadeInUp animation keeps control of "transform" (fill-mode: both),
   so the lift uses the separate "translate" property, which the animation doesn't touch. */
.ftco-section:has(.gallery.image-popup) .heading-section{
 transition:translate 300ms ease,box-shadow 300ms ease,border-color 300ms ease,background-color 300ms ease;
}
.ftco-section:has(.gallery.image-popup) .heading-section h2{transition:color 300ms ease,text-shadow 300ms ease}
@keyframes gallery-heading-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(prefers-reduced-motion:no-preference){.ftco-section:has(.gallery.image-popup) .heading-section{animation:fadeInUp 1s both,gallery-heading-float 8s ease-in-out 1s infinite}}
@media(hover:hover) and (pointer:fine){
 .ftco-section:has(.gallery.image-popup) .heading-section:hover{
  animation:fadeInUp 1s both;translate:0 -10px;transform:none;border-color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.28) 60%,rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 #fff,0 0 0 7px rgba(255,255,255,.32),0 36px 72px rgba(20,28,52,.24),0 10px 22px rgba(20,28,52,.1);
 }
 .ftco-section:has(.gallery.image-popup) .heading-section:hover h2{color:#a07a30;text-shadow:0 4px 22px rgba(203,150,58,.45)}
}

/* ===== Floating footer: the glass footer becomes a rounded card that hovers above the page bottom ===== */
footer,.ftco-footer{
 margin:30px clamp(12px,2.6vw,40px) 26px;
 border-radius:34px;overflow:hidden;
 border:1px solid rgba(255,255,255,.55);
 box-shadow:0 0 0 7px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.6),0 30px 64px rgba(20,28,52,.3),0 8px 18px rgba(20,28,52,.14);
 transition:transform 300ms ease,box-shadow 300ms ease;
}
footer::before,.ftco-footer::before{border-radius:inherit}
@keyframes footer-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(prefers-reduced-motion:no-preference){footer,.ftco-footer{animation:footer-float 10s ease-in-out infinite}}
@media(hover:hover) and (pointer:fine){
 footer:hover,.ftco-footer:hover{transform:translateY(-5px);box-shadow:0 0 0 7px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.8),0 40px 80px rgba(20,28,52,.38),0 10px 22px rgba(20,28,52,.16)}
}
@media(max-width:620px){footer,.ftco-footer{border-radius:26px}}
@media(prefers-reduced-motion:reduce){footer,.ftco-footer{transition:none}footer:hover,.ftco-footer:hover{transform:none}}

/* Footer: full width, edge to edge (no side or bottom gaps). Rounded top edge and the hover lift stay; the idle drift is off so no gap opens at the bottom. */
footer,.ftco-footer{
 margin:30px 0 0;border-radius:34px 34px 0 0;
 border:0;border-top:1px solid rgba(255,255,255,.55);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 -16px 44px rgba(20,28,52,.2);
 animation:none;
}
@media(hover:hover) and (pointer:fine){
 footer:hover,.ftco-footer:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 -26px 64px rgba(20,28,52,.3)}
}
@media(max-width:620px){footer,.ftco-footer{border-radius:24px 24px 0 0}}

/* ===== Booking page: hover lift on the Book a Stay panel and the availability header (mouse pointers) ===== */
body:has(.search-panel-wrapper) .search-panel-wrapper,
body:has(.search-panel-wrapper) .results-header,
body:has(.search-panel-wrapper) .filter-pill{
 transition:transform 300ms ease,box-shadow 300ms ease,border-color 300ms ease,background-color 300ms ease,color 250ms ease;
}
@media(hover:hover) and (pointer:fine){
 body:has(.search-panel-wrapper) .search-panel-wrapper:hover{
  transform:translateY(-8px);border-color:rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 6px rgba(255,255,255,.22),0 36px 72px rgba(10,14,28,.38),0 10px 22px rgba(10,14,28,.18);
 }
 body:has(.search-panel-wrapper) .results-header:hover{
  transform:translateY(-8px);border-color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.34) 60%,rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 #fff,0 0 0 6px rgba(255,255,255,.34),0 32px 64px rgba(20,28,52,.24),0 8px 18px rgba(20,28,52,.1);
 }
 body:has(.search-panel-wrapper) .results-header:hover h2,body:has(.search-panel-wrapper) .results-header:hover h1{color:#a07a30;text-shadow:0 4px 20px rgba(203,150,58,.4)}
 body:has(.search-panel-wrapper) .filter-pill:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,28,52,.18);border-color:#a58a5e}
 body:has(.search-panel-wrapper) .search-panel-wrapper .search-title:hover{text-shadow:0 2px 18px rgba(226,204,161,.7)}
}
@media(prefers-reduced-motion:reduce){body:has(.search-panel-wrapper) .search-panel-wrapper,body:has(.search-panel-wrapper) .results-header,body:has(.search-panel-wrapper) .filter-pill{transition:none}}

/* ===== Mobile scroll stability =====
   1) Legacy pages paint a fixed-attachment body background (style.css). Fixed backgrounds force a repaint of the whole viewport on every
      scroll frame on touch browsers; use a normal scrolling background there.
   2) The slideshow photos are width:100% with no intrinsic size until loaded; their width/height attributes reserve the box (height auto keeps the ratio).
   3) The template's spinner keeps animating (invisibly) after the page has loaded; stop it once hidden. */
@media (hover:none), (max-width:900px){
 body{background-attachment:scroll}
}
.mySlides img,img[src*="Room HD Pic"]{height:auto}
#ftco-loader:not(.show) *{animation:none!important}

/* ===== Glass + hover on the remaining cards and text blocks =====
   Hover uses the individual "translate" property so it never fights the scroll-reveal or template animations that own "transform".
   Fine pointers only; off for touch and reduced motion. */

/* ANNAPURNA: section headings become frosted panes; stat, capacity pill, gallery tiles and intro text float */
.ap-points .section-head,.ap-gallery .section-head,.ap-related .section-head,.ap-enquiry .enquiry-center{
 padding:clamp(22px,3.5vw,40px);border-radius:26px;
 background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 60%,rgba(255,255,255,.1));
 border:1px solid rgba(255,255,255,.6);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 36px rgba(20,28,52,.08),0 4px 10px rgba(20,28,52,.04);
 -webkit-backdrop-filter:blur(4px) saturate(130%);backdrop-filter:blur(4px) saturate(130%);
}
.ap-points .section-head,.ap-gallery .section-head,.ap-related .section-head{display:inline-block;max-width:760px}
.ap-enquiry .enquiry-center{max-width:760px}
.ap-gallery .ap-slot{border:1px solid rgba(255,255,255,.7);box-shadow:0 0 0 5px rgba(255,255,255,.14),0 16px 36px rgba(20,28,52,.12)}
.ap-gallery .ap-slot img{transition:scale .6s cubic-bezier(.22,1,.36,1)}
.ap-capacity,.ap-stat,.ap-intro-inner>div:first-child,.ap-points .section-head,.ap-gallery .section-head,.ap-related .section-head,
.ap-enquiry .enquiry-center,.ap-gallery .ap-slot{transition:translate .3s ease,box-shadow .3s ease}

/* venue pages (older template): the intro panel and the enquiry form become glass cards */
.overlap,.billing-form.ftco-bg-dark{
 border:1px solid rgba(255,255,255,.6);border-radius:22px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 36px rgba(20,28,52,.1);
 -webkit-backdrop-filter:blur(4px) saturate(130%);backdrop-filter:blur(4px) saturate(130%);
 transition:translate .3s ease,box-shadow .3s ease;
}

/* older pages: text columns get a glass halo and a gentle lift on hover (nothing changes at rest, so layout is untouched) */
.ftco-section .col-md-6.ftco-animate,.ftco-section .col-lg-6.ftco-animate,.ftco-section .col-md-12.ftco-animate>p{
 border-radius:20px;transition:translate .3s ease,box-shadow .3s ease,background-color .3s ease;
}

@media(hover:hover) and (pointer:fine){
 .ap-capacity:hover,.ap-stat:hover,.ap-intro-inner>div:first-child:hover{translate:0 -6px}
 .ap-points .section-head:hover,.ap-gallery .section-head:hover,.ap-related .section-head:hover,.ap-enquiry .enquiry-center:hover{
  translate:0 -6px;box-shadow:inset 0 1px 0 #fff,0 26px 52px rgba(20,28,52,.18),0 8px 16px rgba(20,28,52,.07);
 }
 .ap-gallery .ap-slot:hover{translate:0 -6px;box-shadow:0 0 0 5px rgba(255,255,255,.4),0 26px 52px rgba(20,28,52,.24)}
 .ap-gallery .ap-slot:hover img{scale:1.05}
 .overlap:hover,.billing-form.ftco-bg-dark:hover{translate:0 -6px;box-shadow:inset 0 1px 0 #fff,0 26px 52px rgba(20,28,52,.22)}
 .ftco-section .col-md-6.ftco-animate:hover,.ftco-section .col-lg-6.ftco-animate:hover,.ftco-section .col-md-12.ftco-animate>p:hover{
  translate:0 -4px;background-color:rgba(255,255,255,.06);
  box-shadow:0 0 0 14px rgba(255,255,255,.1),0 18px 40px rgba(20,28,52,.1);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 }
}
@media(hover:none),(prefers-reduced-motion:reduce){
 .ap-capacity,.ap-stat,.ap-intro-inner>div:first-child,.ap-points .section-head,.ap-gallery .section-head,.ap-related .section-head,
 .ap-enquiry .enquiry-center,.ap-gallery .ap-slot,.overlap,.billing-form.ftco-bg-dark,
 .ftco-section .col-md-6.ftco-animate,.ftco-section .col-lg-6.ftco-animate,.ftco-section .col-md-12.ftco-animate>p,.ap-gallery .ap-slot img{transition:none;translate:none!important;scale:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .ap-points .section-head,.ap-gallery .section-head,.ap-related .section-head,.ap-enquiry .enquiry-center{background:rgba(248,241,228,.92)}
}

/* more see-through: the photo behind the panels stays visible; a light text halo keeps the copy legible */
.overlap{background-color:rgba(255,255,255,.28)!important}
.ap-points h2,.ap-related h2,.ap-enquiry h2,.ap-enquiry p,.ap-gallery h2{text-shadow:0 1px 14px rgba(248,241,228,.9)}
.ap-points .ap-card p,.ap-related .ap-card p{color:#4a4236}

/* Images carry width/height attributes so the browser can reserve their box before they load (no layout shift).
   :where() keeps specificity at zero, so every component's own sizing rule still wins and the attributes only supply the aspect ratio. */
:where(img[width][height]){height:auto}

/* visually hidden but available to screen readers (used for the page's single <h1> where the design shows its title another way) */
.twd-sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}