/* ==========================================================
   KHAIIestate — shared stylesheet
   Used across all site pages (landing, room pages, etc).
   Page-specific imagery (.hero-bg / .cta-band .bg backgrounds)
   is set inline per-page via style="background-image:url(...)"
   directly on the element — NOT via a custom property. See the
   note above .hero-bg for why.
   ========================================================== */

:root{
  --ink:#18231d;        /* deepest forest, text + dark sections */
  --pine:#33473a;       /* mid green */
  --sage:#86998b;       /* muted misty sage */
  --river:#4a6b77;      /* cool water accent */
  --river-deep:#3a5661;
  --paper:#eeeee7;      /* misty background */
  --linen:#faf9f5;      /* card surface */
  --line:#d9d7cc;       /* hairlines */
  --shadow:0 24px 60px -28px rgba(24,35,29,.45);
  --display:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--river);color:#fff}

/* Safari/WebKit mostly ignores padding/height on <select> unless native
   appearance is stripped — without this, dropdowns stay tiny regardless
   of any width/padding rule applied to them elsewhere in this file. */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2386998b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;
  padding-right:2.4rem!important;cursor:pointer}

.wrap{width:min(1200px,92vw);margin-inline:auto}

.eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--sage);display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sage);display:inline-block}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--ink)}
.lead{font-size:1.06rem;color:#4a544c;max-width:52ch}

/* meandering river divider */
.river-line{display:block;width:100%;height:40px;color:var(--river);opacity:.5}
.river-line path{stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-dasharray:1600;stroke-dashoffset:1600;transition:stroke-dashoffset 2.2s ease}
.river-line.in path{stroke-dashoffset:0}

/* ---------- NAV ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem clamp(1rem,4vw,2.4rem);
  transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
}
header.nav.solid{background:rgba(238,238,231,.9);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);padding-top:.85rem;padding-bottom:.85rem}
/* Century Gothic isn't on Google Fonts (Monotype-licensed) — this relies
   on it being pre-installed system-side (bundled with Windows/Office for
   decades), with reasonable geometric-sans fallbacks otherwise. */
.brand{font-family:"Century Gothic","Avenir Next","Futura",var(--sans);
  font-size:1.4rem;letter-spacing:.02em;color:#fff;transition:color .4s}
.brand-mark{font-weight:700}
.brand b{font-weight:400}
header.nav.solid .brand{color:var(--ink)}
nav.links{display:flex;gap:1.9rem;align-items:center}
nav.links a{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.9);transition:color .3s}
nav.links a:hover{color:#fff}
header.nav.solid nav.links a{color:var(--pine)}
header.nav.solid nav.links a:hover{color:var(--river)}
.btn{
  font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;
  border:none;border-radius:2px;padding:.7rem 1.35rem;transition:.25s;letter-spacing:.01em;
}
.btn-solid{background:var(--river);color:#fff}
.btn-solid:hover{background:var(--river-deep)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
header.nav.solid .btn-ghost{border-color:var(--river);color:var(--river)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:#fff;font-size:1.5rem}
header.nav.solid .nav-toggle{color:var(--ink)}

.check-link{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.85);transition:color .3s;
  background:none;border:none;cursor:pointer;font-family:var(--sans)}
.check-link:hover{color:#fff}
header.nav.solid .check-link{color:var(--pine)}
header.nav.solid .check-link:hover{color:var(--river)}
@media(max-width:640px){ .check-link{display:none} }

/* nav dropdown (e.g. Rooms submenu) */
.nav-item{position:relative}
.nav-item .caret{display:inline-block;font-size:.7em;margin-left:.2em;transition:transform .25s ease}
.nav-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--linen);min-width:160px;border-radius:4px;box-shadow:var(--shadow);
  padding:.5rem 0;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease;z-index:70}
nav.links .nav-dropdown a{display:block;padding:.55rem 1.2rem;font-size:.86rem;color:var(--pine)!important;white-space:nowrap}
nav.links .nav-dropdown a:hover{background:rgba(74,107,119,.08);color:var(--river)!important}
/* :hover/:focus-within reveal is desktop-only, on purpose — real mobile
   Safari can leave :hover "stuck" after a tap (a well-known WebKit
   quirk), which was re-triggering this rule on mobile. Its higher
   specificity (2 classes + a pseudo-class) than the plain .nav-dropdown
   overrides in the 640px media query below meant it won regardless of
   source order, snapping the dropdown into DESKTOP's centered
   position:absolute/translateX(-50%) math inside what's actually a
   static, full-width mobile layout — shoving it out of view. That's the
   real cause of the "still happens" reports, not a repaint bug at all;
   every fix attempted before this was chasing the wrong problem. */
@media(min-width:641px){
  .nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
  .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;padding:0 clamp(1rem,4vw,2.4rem) 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;
  background-position:center 40%;background-size:cover;background-repeat:no-repeat;}
  /* image itself is set inline per-page via style="background-image:url(...)",
     NOT via a --hero-img custom property: a relative url() inside a custom
     property resolves against THIS stylesheet's folder, not the page's, so
     it breaks for any page that isn't exactly as deep as css/style.css is */
/* optional Ken Burns-style zoom — add class="hero-bg zoom" on any page's
   hero-bg div. Relies on .hero{overflow:hidden} above to clip the scale. */
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero-bg.zoom{animation:heroZoom 8s ease-in-out infinite alternate}
/* optional: a <video class="hero-video"> can sit on top of .hero-bg for a
   video hero — .hero-bg then also doubles as its poster/fallback (paint
   target while the video loads, and the only thing shown on mobile,
   where the video is hidden to save bandwidth). */
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 40%}
@media(max-width:768px){ .hero-video{display:none} }
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(24,35,29,.45) 0%,rgba(24,35,29,.05) 32%,rgba(24,35,29,.35) 68%,rgba(24,35,29,.86) 100%)}
.hero-inner{width:min(1200px,92vw);margin-inline:auto;padding-bottom:2.2rem}
/* shorter hero for sub-pages (room details, about, etc) instead of the full-bleed home hero */
.page-hero{min-height:72svh}
.page-hero .hero-inner{padding-bottom:2.6rem}
.hero .eyebrow{color:#cdd8cf}
.hero .eyebrow::before{background:#cdd8cf}
.hero h1{font-size:clamp(2.7rem,7vw,5.4rem);max-width:16ch;margin:1.1rem 0 1rem;font-weight:400}
.hero h1 em{font-style:italic;color:#dfe7d9}
.hero p.sub{max-width:46ch;color:rgba(255,255,255,.88);font-size:1.05rem;margin-bottom:2rem}

/* booking bar */
.bookbar{background:rgba(250,249,245,.96);backdrop-filter:blur(8px);border-radius:4px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0;
  max-width:920px;margin-bottom:2.4rem;overflow:hidden}
.bookbar .field{padding:.9rem 1.2rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem}
.bookbar label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);font-weight:600}
.bookbar input,.bookbar select{border:none;background:none;font-family:var(--sans);font-size:.95rem;
  color:var(--ink);font-weight:500;padding:.15rem 0;outline:none;width:100%}
.bookbar .go{background:var(--river);color:#fff;border:none;cursor:pointer;font-family:var(--sans);
  font-weight:600;font-size:.95rem;padding:0 1.8rem;transition:.25s;display:flex;align-items:center;gap:.5rem}
.bookbar .go:hover{background:var(--river-deep)}

/* ---------- HERO SEARCH (real [mphb_availability_search] shortcode) ----------
   Real MotoPress search form — not a hand-rolled one. Its date fields use
   MPHB's own JS-enhanced datepicker (a proper calendar widget, same one
   used on the room reservation form), not the tiny native browser
   <input type="date"> UI. Styled to fit the .bookbar visual design using
   MPHB's actual markup/classes instead of our own. */
.hero-search .mphb_sc_search-form{background:rgba(250,249,245,.96);backdrop-filter:blur(8px);
  border-radius:4px;box-shadow:var(--shadow);display:grid;
  grid-template-columns:1fr 1fr 1fr auto;gap:0;max-width:920px;margin-bottom:2.4rem;overflow:hidden}
.hero-search .mphb-required-fields-tip,.hero-search .mphb_sc_search-children{display:none!important}
.hero-search .mphb_sc_search-form>p{margin:0;padding:.9rem 1.2rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:.15rem}
.hero-search .mphb_sc_search-form label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);font-weight:600;display:block}
.hero-search .mphb_sc_search-form label abbr{display:none}
.hero-search .mphb_sc_search-form input,.hero-search .mphb_sc_search-form select{
  border:none;background:none;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  font-weight:500;padding:.15rem 0;outline:none;width:100%}
.hero-search .mphb_sc_search-submit-button-wrapper{padding:0;border-right:none;
  display:flex;align-items:stretch}
.hero-search .mphb_sc_search-submit-button-wrapper input[type="submit"]{
  background:var(--river);color:#fff;border:none;cursor:pointer;font-family:var(--sans);
  font-weight:600;font-size:.95rem;padding:0 1.8rem;transition:.25s;width:auto;flex:1}
.hero-search .mphb_sc_search-submit-button-wrapper input[type="submit"]:hover{background:var(--river-deep)}
@media(max-width:960px){
  .hero-search .mphb_sc_search-form{grid-template-columns:1fr 1fr}
  .hero-search .mphb_sc_search-submit-button-wrapper{grid-column:span 2}
  .hero-search .mphb_sc_search-submit-button-wrapper input[type="submit"]{width:100%;padding:.95rem}
  .hero-search .mphb_sc_search-check-out-date{border-right:none}
}
@media(max-width:640px){
  .hero-search .mphb_sc_search-form{grid-template-columns:1fr}
  .hero-search .mphb_sc_search-form>p{border-right:none;border-bottom:1px solid var(--line)}
  .hero-search .mphb_sc_search-submit-button-wrapper{grid-column:auto;border-bottom:none}
}

/* ---------- STATS ---------- */
.stats{background:var(--ink);color:#e8ece6}
.stats .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;padding:2.4rem 0}
.stat{text-align:center;padding:.4rem;border-right:1px solid rgba(255,255,255,.09)}
.stat:last-child{border:none}
.stat b{font-family:var(--display);font-size:2rem;display:block;font-weight:500;color:#fff}
.stat span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* ---------- SECTION SHELL ---------- */
section{padding:clamp(4rem,9vw,7rem) 0}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ABOUT (reusable photo+copy block — any page can drop this in;
   add .rev to swap which side the photo sits on) */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about.rev{grid-template-columns:.95fr 1.05fr}
.about-copy h2{margin:.9rem 0 1.3rem}
.about-copy .lead+ .lead{margin-top:1rem}
.about-media{position:relative}
.about-media img{border-radius:4px;aspect-ratio:4/5;object-fit:cover;width:100%;box-shadow:var(--shadow)}
.about-media .tag{position:absolute;bottom:-22px;left:-22px;background:var(--linen);
  padding:1.1rem 1.4rem;border-radius:4px;box-shadow:var(--shadow);max-width:230px}
.about-media .tag b{font-family:var(--display);font-size:1.15rem;color:var(--pine)}
.about-media .tag span{font-size:.85rem;color:#5b655c}

/* ROOMS */
.rooms-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.6rem;flex-wrap:wrap}
.rooms-head h2{margin-top:.7rem}
.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.room{background:var(--linen);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5);transition:transform .4s ease,box-shadow .4s ease}
.room:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.room-img{aspect-ratio:3/2;overflow:hidden}
.room-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.room:hover .room-img img{transform:scale(1.06)}
.room-body{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.room-name{font-family:var(--display);font-size:1.5rem;color:var(--ink);display:flex;align-items:baseline;gap:.6rem}
.room-name .gloss{font-family:var(--sans);font-style:italic;font-size:.85rem;color:var(--sage);letter-spacing:0}
.room-excerpt{font-size:.85rem;color:#5b655c;margin:.5rem 0 0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.room-meta{font-size:.85rem;color:#5b655c;margin:.5rem 0 1.2rem;display:flex;flex-direction:column;gap:.4rem}
.room-meta span{display:flex;align-items:center;gap:.35rem}
.room-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--line)}
.room-foot .btn{padding:.55rem .9rem;white-space:nowrap}
.room-price b{font-family:var(--display);font-size:1.1rem;color:var(--pine)}
.room-price span{font-size:.78rem;color:#7a8379}
.room-price small{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}

/* VALUE GRID */
.value{background:var(--ink);color:#e8ece6}
.value h2{color:#fff}
.value .eyebrow{color:var(--sage)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09);margin-top:2.6rem;border-radius:4px;overflow:hidden}
.value-item{background:var(--ink);padding:2rem 1.6rem;transition:background .3s}
.value-item:hover{background:#20302735}
.value-item .ic{width:34px;height:34px;color:var(--sage);margin-bottom:1rem}
.value-item h3{font-size:1.15rem;color:#fff;margin-bottom:.5rem}
.value-item p{font-size:.88rem;color:#aeb8af;line-height:1.6}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px;margin-top:2.6rem}
.gallery-grid a{overflow:hidden;border-radius:3px;position:relative}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.gallery-grid a:hover img{transform:scale(1.07)}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}
/* grouped gallery sub-sections, e.g. "Inside" / "Bathroom" / "Outside" */
.gallery-subhead{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--pine);margin:3.2rem 0 0;padding-bottom:.9rem;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.8rem}
.gallery-subhead::before{content:"";width:30px;height:1px;background:var(--sage);display:inline-block}
.gallery-subhead:first-of-type{margin-top:0}
.gallery-subhead + .gallery-grid{margin-top:1.6rem}

/* SLIDER (horizontal scroll-snap strip, e.g. "Explore the grounds") */
.slider-wrap{margin-top:2.6rem}
.slider{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;scrollbar-width:none;-ms-overflow-style:none}
.slider::-webkit-scrollbar{display:none}
.slider .slide{flex:0 0 auto;width:clamp(220px,30vw,320px);aspect-ratio:4/5;
  scroll-snap-align:start;border-radius:4px;overflow:hidden;position:relative;
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.slider .slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.slider .slide:hover img{transform:scale(1.06)}
.slider .slide .cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem .9rem;
  background:linear-gradient(180deg,transparent,rgba(24,35,29,.78));color:#fff;
  font-size:.85rem;font-weight:600;letter-spacing:.01em}
.slider-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem}
.slider-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--linen);color:var(--pine);cursor:pointer;display:grid;place-items:center;
  font-size:1.1rem;transition:.25s ease;line-height:1}
.slider-nav button:hover{background:var(--river);color:#fff;border-color:var(--river)}
@media(max-width:640px){
  .slider .slide{width:clamp(190px,68vw,260px)}
}

/* TESTIMONIALS */
.quotes{background:var(--linen)}
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.q-card{background:var(--paper);border-radius:4px;padding:1.9rem;border:1px solid var(--line)}
.q-stars{color:var(--river);letter-spacing:.2em;font-size:.85rem;margin-bottom:.9rem}
.q-card p{font-size:.96rem;color:#3e473f;font-style:italic;font-family:var(--display);line-height:1.55}
.q-who{margin-top:1.3rem;display:flex;align-items:center;gap:.8rem}
.q-av{width:42px;height:42px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-size:1.1rem}
.q-who b{font-size:.92rem;display:block}
.q-who span{font-size:.78rem;color:#7a8379}

/* LOCATION / FAQ */
.locfaq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
.loc-card{background:var(--linen);border-radius:4px;padding:2rem;box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.loc-card h3{font-family:var(--display);font-size:1.5rem;margin-bottom:1rem}
.loc-row{display:flex;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.loc-row:last-child{border:none}
.loc-row b{min-width:96px;color:var(--pine);font-weight:600}
.loc-actions{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.faq h2{margin:.7rem 0 1.6rem}
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.15rem 0;
  font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.acc-q .pm{color:var(--river);font-size:1.3rem;transition:transform .3s}
.acc-item.open .pm{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc-a p{padding:0 0 1.15rem;font-size:.94rem;color:#545d54;max-width:60ch}
.acc-a .faq-a{padding:0 0 1.15rem;font-size:.94rem;color:#545d54;max-width:60ch;line-height:1.6}

/* CTA band */
.cta-band{position:relative;color:#fff;text-align:center;padding:clamp(4rem,9vw,6.5rem) 0}
.cta-band .bg{position:absolute;inset:0;z-index:-2;
  background-position:center;background-size:cover}
  /* image set inline per-page via style="background-image:url(...)" — see note on .hero-bg */
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(24,35,29,.68)}
.cta-band h2{color:#fff;max-width:20ch;margin:1rem auto 1.4rem}
.cta-band .eyebrow{color:#cdd8cf;justify-content:center}
.cta-band .eyebrow::before{background:#cdd8cf}

/* FOOTER */
footer{background:var(--ink);color:#cdd5cc;padding:4rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot-brand{font-family:"Century Gothic","Avenir Next","Futura",var(--sans);
  font-weight:400;font-size:1.7rem;color:#fff;margin-bottom:.8rem}
.foot-brand .brand-mark{font-weight:700}
.foot-grid p{font-size:.9rem;line-height:1.7;color:#a7b1a8}
.foot-col h4{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin-bottom:1rem}
.foot-col a{display:block;font-size:.9rem;padding:.28rem 0;color:#bfc8c0;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-social{display:flex;gap:.7rem;margin-top:1rem}
.foot-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#bfc8c0;transition:.25s ease;flex:0 0 auto}
.foot-social a:hover{background:var(--river);border-color:var(--river);color:#fff}
.foot-social svg{width:17px;height:17px;fill:currentColor}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:3rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;color:#8a948b}
/* !important: WooCommerce's own core CSS ships ".woocommerce-page img
   {height:auto;max-width:100%}" (higher specificity than a single class)
   and "woocommerce-page" is a body class on every WC-related page —
   checkout, cart, my-account — not just wrapped around WC's own markup,
   so it was silently blowing this footer badge up to its native size
   (way over 32px) on any of those pages. */
.foot-payment{height:32px!important;width:auto!important;border-radius:4px}

/* ---------- GALLERY LIGHTBOX ----------
   Markup is injected by js/site.js (not hand-written per page) — any page
   with one or more .gallery-grid sections gets this for free. Prev/next
   cycles within the .gallery-grid the clicked photo belongs to, so the
   grouped "Inside / Bathroom / Outside" style sections stay separate. */
.lightbox-scrim{position:fixed;inset:0;background:rgba(15,20,17,.92);z-index:110;
  opacity:0;pointer-events:none;transition:opacity .3s ease;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.lightbox-scrim.show{opacity:1;pointer-events:auto}
.lightbox-figure{position:relative;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.lightbox-img{max-width:min(1100px,90vw);max-height:78svh;width:auto;height:auto;border-radius:4px;
  box-shadow:var(--shadow);opacity:0;transform:scale(.98);transition:opacity .25s ease,transform .25s ease}
.lightbox-img.in{opacity:1;transform:none}
.lightbox-caption{color:rgba(255,255,255,.75);font-size:.85rem;text-align:center}
.lightbox-close{position:fixed;top:1.2rem;right:1.2rem;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.4rem;
  cursor:pointer;display:grid;place-items:center;transition:.2s ease}
.lightbox-close:hover{background:rgba(255,255,255,.18)}
.lightbox-nav{position:fixed;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.4rem;
  cursor:pointer;display:grid;place-items:center;transition:.2s ease}
.lightbox-nav:hover{background:rgba(255,255,255,.18)}
.lightbox-nav.prev{left:1.2rem}
.lightbox-nav.next{right:1.2rem}
@media(max-width:640px){
  .lightbox-nav{width:38px;height:38px;font-size:1.15rem}
  .lightbox-nav.prev{left:.5rem}
  .lightbox-nav.next{right:.5rem}
  .lightbox-close{top:.6rem;right:.6rem;width:36px;height:36px}
}

/* ---------- BOOKING MODAL ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(24,35,29,.55);backdrop-filter:blur(4px);
  z-index:100;opacity:0;pointer-events:none;transition:opacity .35s ease;display:grid;place-items:center;padding:1rem}
.modal-scrim.show{opacity:1;pointer-events:auto}
.modal{background:var(--linen);width:min(560px,100%);max-height:92svh;overflow-y:auto;border-radius:6px;
  box-shadow:var(--shadow);transform:translateY(20px) scale(.98);transition:transform .35s ease}
.modal-scrim.show .modal{transform:none}
.modal-head{position:sticky;top:0;background:var(--pine);color:#fff;padding:1.3rem 1.6rem;
  display:flex;justify-content:space-between;align-items:center;z-index:2}
.modal-head h3{font-family:var(--display);font-size:1.35rem;font-weight:500}
.modal-head .steps{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#c8d3c9;margin-top:.2rem}
.modal-close{background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1;opacity:.85}
.modal-close:hover{opacity:1}
.modal-body{padding:1.6rem}
.step{display:none}
.step.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fld{margin-bottom:1.1rem}
.fld label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);font-weight:600;margin-bottom:.45rem}
.fld input,.fld select{width:100%;font-family:var(--sans);font-size:.95rem;padding:.75rem .85rem;
  border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);outline:none;transition:border .25s}
.fld input:focus,.fld select:focus{border-color:var(--river)}
.fld.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.fld.row>div{display:flex;flex-direction:column}
.err{color:#b23b3b;font-size:.8rem;margin-top:.4rem;display:none}
.err.show{display:block}

.summary{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1.2rem;margin-bottom:1.3rem}
.sum-row{display:flex;justify-content:space-between;font-size:.92rem;padding:.4rem 0;color:#4a544c}
.sum-row.total{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.75rem;
  font-family:var(--display);font-size:1.25rem;color:var(--pine)}
.sum-room{font-weight:600;color:var(--ink)}

.modal-foot{display:flex;gap:.8rem;justify-content:space-between;margin-top:.6rem}
.btn-back{background:none;border:1px solid var(--line);color:#5b655c;border-radius:2px;
  padding:.7rem 1.2rem;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.9rem}
.btn-back:hover{border-color:var(--pine);color:var(--pine)}
.btn-next{flex:1}

.confirmed{text-align:center;padding:1rem 0}
.confirmed .check{width:64px;height:64px;border-radius:50%;background:var(--river);color:#fff;
  display:grid;place-items:center;margin:0 auto 1.2rem;font-size:2rem}
.confirmed h3{font-family:var(--display);font-size:1.7rem;margin-bottom:.6rem}
.ref{font-family:var(--display);font-size:1.4rem;letter-spacing:.06em;color:var(--pine);
  background:#fff;border:1px dashed var(--river);border-radius:4px;padding:.7rem 1rem;display:inline-block;margin:.8rem 0}
.mock-note{font-size:.78rem;color:#8a948b;margin-top:1rem;line-height:1.5}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .stats .wrap{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .stat:nth-child(3){border:none}
  .about,.about.rev{grid-template-columns:1fr}
  .about-media{order:-1;max-width:440px}
  .room-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .q-grid{grid-template-columns:1fr}
  .locfaq{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .bookbar{grid-template-columns:1fr 1fr}
  .bookbar .go{grid-column:span 2;padding:.95rem;justify-content:center}
  .bookbar .field:nth-child(2){border-right:none}
}
@media(max-width:640px){
  nav.links{display:none}
  /* align-items:center on the base nav.links rule (desktop's horizontal
     row) was still in effect here — in a column flex that's the CROSS
     axis, so every item was centering horizontally instead of stacking
     left. flex-start overrides it for the mobile column layout. */
  nav.links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;background:var(--paper);padding:1.2rem 1.4rem;gap:1rem;
    box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
  nav.links.open a{color:var(--pine);text-align:left}
  /* Every top-level item is a "parent" relative to a dropdown's children,
     whether or not it actually has any (Rooms/About/Extra Services do,
     Rates/Facilities/etc. don't) — bold marks that whole tier so the
     nested, lighter .nav-dropdown links read as clearly subordinate. */
  nav.links.open>a,nav.links.open>.nav-item>a{font-weight:700}
  .nav-dropdown a{font-weight:500}
  .nav-toggle{display:block}
  .nav-cta{display:none}
  header.nav.solid nav.links.open a{color:var(--pine)}
  /* Dropdown children collapsed by default — tapping the caret (not the
     label itself, so the parent link still navigates normally) reveals
     them via .nav-item.open, toggled in main.js. Hover/focus-within has
     no equivalent on touch, so this can't reuse the desktop mechanism. */
  .nav-item>a{display:flex;justify-content:space-between;align-items:center;width:100%}
  .nav-item .caret{display:inline-block;padding:.3rem .5rem;margin:-.3rem -.5rem -.3rem .2rem}
  .nav-item.open .caret{transform:rotate(180deg)}
  /* Plain, instant show/hide — no animation, no transition, no
     compositing tricks. Simplest possible collapsible. */
  .nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:none;padding:.3rem 0 .2rem 1rem;display:none;flex-direction:column;gap:.5rem}
  .nav-item.open .nav-dropdown{display:flex}
  nav.links .nav-dropdown a{padding:0;font-size:.86rem}
  .room-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px}
  .g-wide,.g-tall{grid-column:auto;grid-row:auto}
  /* Brand (long paragraph) and Reach Us (odd one out — no similarly-sized
     column to pair with, since Explore's 7 links run much taller than
     Rooms' 4) both span the full row; Explore + Rooms pair up as the
     actual 2-column part. */
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:1.4rem}
  .foot-grid>div:first-child,.foot-col:last-child{grid-column:1/-1}
  .bookbar{grid-template-columns:1fr}
  .bookbar .field{border-right:none;border-bottom:1px solid var(--line)}
  .bookbar .go{grid-column:auto}
  .about-media .tag{position:static;margin-top:1rem;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .river-line path{stroke-dashoffset:0}
}
:focus-visible{outline:2px solid var(--river);outline-offset:2px}

/* ---------- MOTOPRESS SINGLE ROOM TYPE (override at hotel-booking/single-room-type.php) ----------
   MotoPress renders its own title/gallery/description/price/attributes/calendar/reservation-form
   via do_action hooks — real booking logic untouched. Only light styling here to fit the design
   system, scoped to .mphb-room-type-wrap so it doesn't leak into other MotoPress views (checkout,
   search results, etc.) which aren't converted yet. */
.mphb-room-type-wrap .mphb-details-title{font-size:1.2rem;font-family:var(--display);color:var(--pine);margin:1.6rem 0 .8rem}
.mphb-single-room-type-attributes{list-style:none;display:grid;grid-template-columns:1fr 1fr;
  gap:.6rem 1.4rem;font-size:.94rem;color:#3e473f}
.mphb-room-type-wrap input[type="text"],.mphb-room-type-wrap input[type="date"],
.mphb-room-type-wrap input[type="number"],.mphb-room-type-wrap select{
  font-family:var(--sans);font-size:.95rem;padding:.65rem .8rem;border:1px solid var(--line);
  border-radius:3px;background:#fff;color:var(--ink);outline:none;transition:border .25s;width:100%}
.mphb-room-type-wrap input:focus,.mphb-room-type-wrap select:focus{border-color:var(--river)}
.mphb-room-type-wrap button[type="submit"],
.mphb-room-type-wrap input[type="submit"]{
  font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;border:none;
  border-radius:2px;padding:.7rem 1.35rem;background:var(--river);color:#fff;transition:.25s}
.mphb-room-type-wrap button[type="submit"]:hover,
.mphb-room-type-wrap input[type="submit"]:hover{background:var(--river-deep)}

/* ---------- BOOKING CARD (price + availability + reservation form) ---------- */
.price-card .mphb-regular-price{font-family:var(--display);font-size:1.7rem;color:var(--pine);
  padding-bottom:1.3rem;margin-bottom:1.3rem;border-bottom:1px solid var(--line)}
.price-card .mphb-regular-price strong{display:block;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.4rem}
.price-card .mphb-price{font-size:1.7rem}
.price-card .mphb-price-period{display:block;font-family:var(--sans);font-size:.78rem;
  color:#7a8379;margin-top:.2rem}

.price-card .mphb-calendar-title,
.price-card .mphb-reservation-form-title{font-family:var(--sans);font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pine);font-weight:700;margin:0 0 .9rem}
.price-card .mphb-reservation-form-title{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}

.price-card .mphb-calendar{margin-bottom:.3rem}
/* The site-wide select{} reset (custom arrow + padding-right:2.4rem for
   real dropdowns like Country/Adults) also hits the datepicker's inline
   month/year <select> — which is meant to sit compact like plain text,
   not look like a filled form field. Restore its native rendering. */
.price-card .mphb-calendar select.datepick-month-year{
  -webkit-appearance:auto;-moz-appearance:auto;appearance:auto;
  background-image:none;padding-right:0!important}
.price-card table{border-collapse:collapse;width:100%;border-radius:3px;overflow:hidden}
.price-card table th,.price-card table td{
  border:1px solid var(--line);padding:.5rem .4rem;font-size:.82rem;text-align:center}
.price-card table th{background:var(--linen);color:var(--sage);font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.04em}

.price-card .mphb-required-fields-tip{font-size:.74rem;color:#8a948b;margin-bottom:1rem}
.price-card .mphb-booking-form label{display:block;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.4rem}
/* Same stray <br> between label and field as checkout's customer-detail
   rows — label is already display:block, so the br just widens the gap. */
.price-card .mphb-booking-form label+br{display:none}
.price-card .mphb-check-in-date-wrapper,.price-card .mphb-adults-wrapper{
  display:inline-block;vertical-align:top;width:calc(50% - .9rem);margin:0 1rem 1.1rem 0}
.price-card .mphb-check-out-date-wrapper,.price-card .mphb-children-wrapper{
  display:inline-block;vertical-align:top;width:calc(50% - .9rem);margin-bottom:1.1rem}
.price-card .mphb-reserve-btn-wrapper{margin-top:.4rem}
.price-card .mphb-reserve-btn-wrapper input[type="submit"]{width:100%;padding:.85rem}
.price-card .mphb-errors-wrapper:not(.mphb-hide){background:#fbeaea;color:#b23b3b;
  border-radius:4px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.85rem}

@media(max-width:480px){
  .price-card .mphb-check-in-date-wrapper,.price-card .mphb-adults-wrapper,
  .price-card .mphb-check-out-date-wrapper,.price-card .mphb-children-wrapper{
    display:block;width:100%;margin-right:0}
}

/* ---------- MOTOPRESS SEARCH RESULTS (page id 563, "/bookings/") ----------
   Content is the real [mphb_search_results] shortcode output — real prices,
   real availability, real Book → Confirm Reservation flow. Styled via
   MPHB's actual class names (mphb-room-type, mphb-reservation-cart, etc.),
   scoped to .site-content so it doesn't leak into other pages.
   MotoPress's own "Recommended" widget — a second, differently-styled way
   to book shown above this same list, with its own "Reserve" button — is
   switched off at the setting level (mphb_enable_recommendation) rather
   than restyled, so there's exactly one way to book on this page: Book a
   room below, then Confirm Reservation. */
/* .site-content is the generic fallback used by every page with no hero
   section of its own (Cart, My Account, Bookings before a search, etc.) —
   header.nav is position:fixed at ~75px tall on these pages (always
   ".solid" server-side, see header.php), and the old clamp(3rem,7vw,5rem)
   top padding landed at 80px on wide viewports: barely 5px of clearance,
   so the <h1> read as jammed against the nav bar. Top padding now clears
   it with real breathing room, independent of the unrelated side/bottom
   padding. */
.site-content{max-width:1200px;margin:0 auto;
  padding:clamp(6rem,10vw,7.5rem) 1.5rem clamp(3rem,7vw,5rem)}
/* The global *{margin:0} reset zeroes the browser's own h1 margin too,
   and no page-level style filled it back in for these plain, hero-less
   templates — so the title sat right on top of the very first thing in
   .entry-content (e.g. the Booking Details card on Checkout) with zero
   breathing room, at whatever bare, unstyled size the browser default
   worked out to. */
.site-content h1{font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin-bottom:1.8rem}
.mphb_sc_search_results-info{font-size:.9rem;color:#5b655c;margin-bottom:1.5rem}
.mphb-price{color:var(--pine);font-weight:600}

/* Grid of compact cards — .mphb-room-type cards flex to a fixed width so they
   wrap into columns; the info/cart blocks stay full-width. */
.mphb_sc_search_results-wrapper{display:flex;flex-direction:column;gap:1rem}
/* MotoPress's own mphb.min.css sets margin-top:4em on this exact
   ".mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type)"
   combo, which beats the flex gap above on specificity and stacked an
   extra 64px on top of it between every card. */
.mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type){margin-top:0}

/* Single-column "booking.com style" row: thumbnail | details | price+actions.
   The plugin's markup is flat siblings (no wrapping "content"/"actions" div).
   The thumbnail is taken out of grid flow entirely (absolutely positioned)
   instead of using grid-row spanning — spanning caused the browser to dump
   the image's whole height onto row 1 alone rather than distributing it,
   leaving a large empty gap before the description. With the thumbnail
   removed from flow, the remaining siblings form a clean, tightly-packed
   2-column grid (details | price+actions) sized purely by their own content. */
.mphb-room-type{position:relative;display:grid;grid-template-columns:1fr auto;
  column-gap:1.4rem;background:var(--linen);border-radius:4px;
  padding:1.2rem 1.2rem 1.2rem calc(180px + 1.2rem + 1.4rem);
  min-height:calc(180px + 2.4rem);
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.mphb-loop-room-thumbnail{position:absolute;top:1.2rem;left:1.2rem;
  width:180px;height:180px;margin:0}
.mphb-loop-room-thumbnail img{width:100%!important;height:100%!important;
  object-fit:cover;border-radius:4px}
.mphb-room-type-title,h2.mphb-room-type-title a{grid-column:1;font-family:var(--display);
  font-size:1.2rem;color:var(--ink);display:block;margin:0 0 .3rem}
/* :not([class]) matters — the plugin also emits classed <p> siblings
   (price, buttons, quantity, reservation message) as direct children of
   .mphb-room-type; a bare ">p" selector has higher specificity than their
   single-class rules and was clobbering their grid-column. */
.mphb-room-type > p:not([class]){grid-column:1;color:#5b655c;font-size:.85rem;margin:0 0 .5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mphb-room-type-details-title{display:none}
.mphb-loop-room-type-attributes{grid-column:1;list-style:none;display:grid;
  grid-template-columns:1fr 1fr;gap:.2rem 1rem;font-size:.8rem;color:#3e473f;margin:0}

/* right-hand price + actions column, stacked and right-aligned.
   Same "small caps label / big price / small period" pattern as
   .price-card on the room's own page, instead of one flat sentence. */
.mphb-regular-price{grid-column:2;grid-row:1;margin:0;text-align:right;
  white-space:nowrap;align-self:start;font-family:var(--display);font-size:1.4rem;color:var(--pine)}
.mphb-regular-price strong{display:block;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:.3rem}
.mphb-regular-price .mphb-price{font-size:1.4rem;font-weight:600}
.mphb-regular-price .mphb-price-period{display:block;font-family:var(--sans);font-size:.75rem;
  color:#7a8379;margin-top:.15rem;font-weight:400}
/* View Details is hidden on the search-results list — the thumbnail and
   the room title just above are already both real links to the same
   room page, so this third link to the same place was redundant. Book
   alone in .mphb-reserve-room-section below is now the one action. */
.mphb_sc_search_results-wrapper .mphb-view-details-button-wrapper{display:none}
/* One room per "Book" click, on purpose — MotoPress shows a quantity
   dropdown here whenever a room type has more than one physical unit
   free (e.g. Senja 1 + Senja 2), letting a guest book several at once.
   Hidden rather than removed: the field stays in the DOM (still read by
   MotoPress's own JS) but, with no way to focus or change a display:none
   <select>, it's stuck at its default first option — always "1" — same
   as if the guest had picked it manually. No JS override needed. */
.mphb-rooms-quantity-wrapper{display:none}
.mphb-reserve-room-section{grid-column:2;display:flex;flex-direction:column;
  align-items:flex-end;gap:.4rem;margin-top:.5rem;text-align:right;font-size:.8rem}
.mphb-reserve-room-section select{font-family:var(--sans);font-size:.85rem;color:var(--ink);
  padding:.4rem .6rem;border:1px solid var(--line);border-radius:2px;background:#fff}
.mphb-reserve-room-section .mphb-book-button{min-width:9rem;text-align:center}
.button.mphb-view-details-button,.button.mphb-book-button,.button.mphb-button{
  font-family:var(--sans);font-size:.82rem;font-weight:600;cursor:pointer;border:none;
  border-radius:2px;padding:.55rem 1.1rem;background:var(--river);color:#fff;
  display:inline-block;transition:.25s;white-space:nowrap}
.button.mphb-book-button:hover,.button.mphb-button:hover{background:var(--river-deep)}
/* View Details is a secondary action next to Book (or, on the room's own
   page, next to the real booking form) — outlined instead of filled so
   it doesn't compete with the primary action's weight. */
.button.mphb-view-details-button{background:transparent;border:1px solid var(--river);color:var(--river)}
.button.mphb-view-details-button:hover{background:var(--river);color:#fff}
@media(max-width:760px){
  .mphb-room-type{grid-template-columns:1fr;padding:.9rem .9rem .9rem calc(110px + .9rem + .9rem);
    min-height:calc(110px + 1.8rem)}
  .mphb-loop-room-thumbnail{width:110px;height:110px;top:.9rem;left:.9rem}
  .mphb-room-type-title,h2.mphb-room-type-title a,
  .mphb-room-type>p:not([class]),.mphb-loop-room-type-attributes,
  .mphb-regular-price,.mphb-view-details-button-wrapper,.mphb-reserve-room-section{
    grid-column:1;grid-row:auto;text-align:left;align-items:flex-start}
}

/* This site has "Direct Search Results Booking" turned on (wp-admin →
   Hotel → Settings → General → mphb_direct_search_results) — clicking
   Book on any room goes straight to checkout for that room, the same
   instant a "Reserve" button would. That's the right behavior for a
   simple flow, but it means this cart never actually gets populated
   (its own JS calls confirmReservation() before ever showing "added" —
   see mphb.min.js's ".mphb-book-button click" handler): it would
   otherwise sit here forever showing nothing but its static empty-cart
   placeholder text ("Select from available accommodations."), doing
   nothing. Hidden outright rather than left as dead, non-interactive UI
   between the room list and the footer. */
.mphb-reservation-cart{display:none}

@media(max-width:760px){
  .mphb-loop-room-type-attributes{grid-template-columns:1fr}
}

/* ---------- MOTOPRESS CHECKOUT (page id 618, "/confirmation-page/") ----------
   Real [mphb_checkout] shortcode output — booking details, guest info,
   price breakdown, payment method, terms acceptance. Styled via MPHB's
   real class names, scoped to .site-content.
   Layout: the form's sections are flat siblings (booking details, price
   details, customer details, billing details, terms, submit) — laid out
   as a 2-col grid, main flow on the left and a sticky price-summary
   sidebar on the right, booking.com/Airbnb-checkout style, so the page
   reads compact instead of one long single-column stack. */
.mphb_sc_checkout-wrapper{max-width:1200px;margin:0 auto}
/* MotoPress's own mphb.min.css adds margin-top:4em to every checkout
   section after the first (".mphb_sc_checkout-form>.mphb-checkout-section
   :not(:first-of-type)"), a leftover assumption from its default
   single-column stacked layout — with our 2-col grid that pushed the
   sidebar 64px below the booking-details card instead of aligning with
   it. Row spacing is handled by the grid's own row-gap instead. */
.mphb_sc_checkout-form>.mphb-checkout-section{margin-top:0!important}
/* Every direct child of the form gets an explicit column AND row — the
   plugin's checkout markup is flat siblings (booking/price/customer/
   billing details, a stray .mphb-total-price + .mphb-errors-wrapper the
   plugin drops outside any section, terms, submit), and relying on CSS
   Grid's auto-placement or an open-ended "1/-1" span to sort them out
   silently mis-placed the total-price paragraph into the sidebar column
   (same class of bug as the earlier search-results card mispositioning —
   numbered rows avoid it entirely since nothing is left for the browser
   to infer). */
.mphb_sc_checkout-form{display:grid;grid-template-columns:1fr 320px;
  column-gap:1.6rem;row-gap:1rem;align-items:start}
#mphb-booking-details{grid-column:1;grid-row:1}
#mphb-customer-details{grid-column:1;grid-row:2}
#mphb-billing-details{grid-column:1;grid-row:3}
.mphb-total-price{grid-column:1;grid-row:4}
.mphb-errors-wrapper{grid-column:1;grid-row:5}
.mphb-checkout-terms-wrapper{grid-column:1;grid-row:6}
/* .mphb_sc_checkout-submit-wrapper is moved into #mphb-price-details by
   main.js (see "CHECKOUT: Book Now into the price-breakdown card") — it's
   no longer a direct child of the grid, so no grid-column/row needed. */
#mphb-price-details{grid-column:2;grid-row:1/8;position:sticky;top:1.5rem}
.mphb-checkout-section{background:var(--linen);border-radius:4px;padding:1.3rem 1.4rem;
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.mphb-booking-details-title,.mphb-customer-details-title,.mphb-gateway-chooser-title,
.mphb-price-breakdown-title{font-family:var(--display);font-size:1.15rem;color:var(--pine);
  margin-bottom:.8rem}
/* Check-in/check-out read as plain stacked sentences by default — turn
   them into a boarding-pass-style pair: label above the date, split by
   a hairline, sitting on one row above the accommodation card(s). */
.mphb-check-in-date,.mphb-check-out-date{display:inline-block;vertical-align:top;
  padding-right:2rem;margin-bottom:1.1rem;font-size:.95rem;color:#5b655c}
.mphb-check-out-date{padding-left:2rem;border-left:1px solid var(--line)}
.mphb-check-in-date>span:first-child,.mphb-check-out-date>span:first-child{
  display:block;margin-bottom:.3rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);font-weight:600}
.mphb-check-in-date time,.mphb-check-out-date time{font-family:var(--display);color:var(--pine);
  font-size:1.05rem}
.mphb-check-in-date time strong,.mphb-check-out-date time strong{font-weight:600}
/* Each reserved room becomes its own highlighted card with its real photo,
   instead of a plain text row under a hairline separator. */
.mphb-room-details{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:1rem 1rem 1rem calc(96px + 1.6rem);margin-top:.9rem;
  min-height:calc(96px + 2rem);display:grid;grid-template-columns:1fr 1fr;
  column-gap:1rem;align-content:start}
.mphb-room-details:first-child{margin-top:0}
.mphb-room-details-thumb{position:absolute;top:1rem;left:1rem;width:96px;height:96px}
.mphb-room-details-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}
/* Title/subtitle sit on the left; Adults sits to the right on the same
   row(s) instead of stacking full-width below (Full Guest Name used to
   fill the right column — now that it's hidden, Adults moves up to
   take that spot rather than leaving it empty). */
.mphb-room-number{grid-column:1;grid-row:1;font-family:var(--display);font-size:1.1rem;
  color:var(--ink);margin-bottom:.3rem}
.mphb-room-type-title{grid-column:1;grid-row:2;font-size:.85rem;color:#5b655c;margin-bottom:.7rem}
.mphb-room-bed-type{grid-column:1;grid-row:3;font-size:.8rem;color:#5b655c;
  display:flex;align-items:center;gap:.35rem}
.mphb-room-bed-icon{width:14px;height:14px;stroke:#5b655c;stroke-width:1.2;
  fill:none;flex-shrink:0}
.mphb-room-capacity-icon{width:12px;height:12px;stroke:#5b655c;stroke-width:1.3;
  flex-shrink:0;margin-left:.2rem}
.mphb-room-capacity-icon circle{fill:#5b655c}
.mphb-room-capacity-icon path{fill:none}
.mphb-adults-chooser{grid-column:2;grid-row:1/4;justify-self:end;align-self:center;
  text-align:right;width:100%;max-width:10rem}
.mphb-adults-chooser label{text-align:right}
/* "Full Guest Name" duplicates the First/Last Name already collected in
   Your Information below — it's a per-room occupant name meant for
   multi-room group bookings, which doesn't apply here since each
   booking is for one room. Not required by the plugin either (no
   asterisk), so dropping it is safe. */
.mphb-guest-name-wrapper{display:none}
.mphb-adults-chooser,.mphb-guest-name-wrapper,.mphb-customer-name,.mphb-customer-last-name,
.mphb-customer-email,.mphb-customer-phone,.mphb-customer-country,.mphb-customer-note{
  margin-bottom:.8rem}
.mphb-adults-chooser label,.mphb-guest-name-wrapper label,.mphb-customer-name label,
.mphb-customer-last-name label,.mphb-customer-email label,.mphb-customer-phone label,
.mphb-customer-country label,.mphb-customer-note label{
  display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sage);font-weight:600;margin-bottom:.4rem}
/* The plugin puts a <br> between label and field on customer-detail rows
   (not present on the accommodation card's Adults/Guest Name fields) —
   with the label already display:block that br just adds a redundant
   blank line, widening the label-to-input gap beyond what's used
   everywhere else on this page. */
.mphb-customer-name br,.mphb-customer-last-name br,.mphb-customer-email br,
.mphb-customer-phone br,.mphb-customer-country br,.mphb-customer-note br{display:none}
.mphb_sc_checkout-wrapper input[type="text"],.mphb_sc_checkout-wrapper input[type="email"],
.mphb_sc_checkout-wrapper input[type="tel"],.mphb_sc_checkout-wrapper input[type="number"],
.mphb_sc_checkout-wrapper select,.mphb_sc_checkout-wrapper textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);padding:.65rem .85rem;
  border:1px solid var(--line);border-radius:2px;background:#fff;box-sizing:border-box}
.mphb_sc_checkout-wrapper textarea{min-height:4.5rem;resize:vertical}
.mphb_sc_checkout-wrapper input:focus,.mphb_sc_checkout-wrapper select:focus,
.mphb_sc_checkout-wrapper textarea:focus{border-color:var(--river);outline:none}
.mphb-adults-chooser select{max-width:14rem}
/* Inline "please select" error (main.js) — shown directly under the
   Adults dropdown instead of MotoPress's own shared error box at the
   top of the form. */
.khaii-field-invalid{border-color:#b3453a!important}
.khaii-field-error{display:block;margin-top:.35rem;font-size:.8rem;color:#b3453a;text-align:right}
/* "Choose Additional Services" is moved out of its room card by main.js
   (it's nested inside .mphb-room-details by default, inheriting that
   card's thumbnail-offset padding and reading as a cramped, half-width
   afterthought) — give it the same card treatment as the room cards, at
   full width, sitting right below the room it belongs to. */
.mphb-services-details{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:1.2rem;margin-top:.9rem}
.mphb-services-details-title{font-family:var(--display);font-size:1.05rem;color:var(--ink);
  margin-bottom:1rem}
.mphb_sc_checkout-services-list{list-style:none}
.mphb_sc_checkout-services-list li{border-top:1px solid rgba(217,215,204,.6);padding:.7rem 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem}
.mphb_sc_checkout-services-list li:first-child{border-top:none;padding-top:0}
.mphb_sc_checkout-services-list li:last-child{padding-bottom:0}
.mphb-checkbox-label{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-size:.92rem;color:var(--ink)}
.mphb-checkbox-label input[type="checkbox"]{width:1.1rem;height:1.1rem;flex-shrink:0;
  accent-color:var(--river);cursor:pointer}
.mphb-checkbox-label em{font-style:normal;color:#8a948b;font-size:.85rem}
/* Adults-select ("for [N] guest(s)") is its own bare <label> sibling
   after .mphb-checkbox-label; the quantity input+"time(s)" for
   flexible-pay services are bare text/input siblings with no wrapper
   at all — style what's actually there rather than assuming wrappers. */
.mphb_sc_checkout-services-list li > label:not(.mphb-checkbox-label){display:block;
  margin:.5rem 0 0 1.6rem;font-size:.85rem;color:#5b655c}
/* The generic checkout field rule (.mphb_sc_checkout-wrapper
   input[type="number"]{width:100%}) has 2 selectors of specificity —
   still beats a single extra class here, so match its own ancestor +
   type-selector combo to actually win the override. */
.mphb_sc_checkout-wrapper select.mphb_sc_checkout-service-adults{width:auto;padding:.3rem .5rem;
  font-size:.85rem;margin:0 .3rem}
/* Quantity field is wrapped in a −/+ stepper by main.js (khaii-qty-stepper)
   instead of the bare native number input — the browser's own spin arrows
   are tiny and inconsistent (some browsers hide them entirely), especially
   on mobile where the real "add more than one" action needs to be a
   proper tap target. The underlying <input> is unchanged (same name/value,
   still a real number input) so nothing about how MotoPress reads/submits
   it changes — the buttons just drive its value via real input events. */
.khaii-qty-stepper{display:inline-flex;align-items:center;gap:0;margin:0 0 0 auto;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;vertical-align:middle}
.khaii-qty-stepper button{width:1.7rem;height:1.7rem;display:grid;place-items:center;
  border:none;background:var(--linen);color:var(--pine);font-size:1rem;line-height:1;
  cursor:pointer;flex-shrink:0}
.khaii-qty-stepper button:hover:not(:disabled){background:var(--river);color:#fff}
.khaii-qty-stepper button:disabled{color:var(--line);cursor:not-allowed}
.khaii-qty-stepper button:first-child{border-right:1px solid var(--line)}
.khaii-qty-stepper button:last-child{border-left:1px solid var(--line)}
.mphb_sc_checkout-wrapper input.mphb_sc_checkout-service-quantity{width:2.6rem;padding:.4rem 0;
  font-size:.85rem;margin:0;border:none;text-align:center;-moz-appearance:textfield}
.mphb_sc_checkout-wrapper input.mphb_sc_checkout-service-quantity::-webkit-inner-spin-button,
.mphb_sc_checkout-wrapper input.mphb_sc_checkout-service-quantity::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0}
/* Customer details fields (first/last/email/phone) pair up two-per-row
   on wide screens to keep this section from stretching too tall. */
@media(min-width:640px){
  #mphb-customer-details{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2rem}
  #mphb-customer-details>.mphb-customer-details-title,
  #mphb-customer-details>.mphb-required-fields-tip,
  #mphb-customer-details>.mphb-customer-country,
  #mphb-customer-details>.mphb-customer-note{grid-column:1/-1}
}
.mphb-price-breakdown{font-size:.9rem;color:#3e473f;width:100%;border-collapse:collapse}
.mphb-price-breakdown-title{font-size:1rem;margin-bottom:.3rem}
.mphb-price-breakdown td,.mphb-price-breakdown th{padding:.4rem 0;text-align:left;font-weight:400;
  border-bottom:1px solid var(--line)}
.mphb-price-breakdown .mphb-table-price-column{text-align:right}
.mphb-price-breakdown tfoot th{font-family:var(--display);font-size:1.15rem;color:var(--pine);
  border-bottom:none;padding-top:.7rem}
/* The +/- toggle only exists to reveal rows the plugin hides by default
   (adults, nights, per-night dates, accommodation total, subtotal) —
   force them always visible instead, and drop the now-pointless toggle
   icon so it doesn't look clickable. */
.mphb-price-breakdown tr.mphb-hide{display:table-row!important}
/* Since everything is already always-expanded, the "#1 Senja" link (still
   a real <a href="#"> under the hidden icon) no longer needs to be
   clickable at all — pointer-events:none turns it into plain text so it
   doesn't look interactive and can't jump the page via its href="#". */
.mphb-price-breakdown-expand{cursor:default;pointer-events:none}
.mphb-price-breakdown-expand .mphb-inner-icon{display:none}
/* "Rate: {Room Name}" just repeats the room name shown right next to it
   (e.g. "#1 Senja") — since the +/- toggle above still responds to
   clicks even with its icon hidden, keep this one permanently hidden
   rather than letting it pop up as redundant clutter. */
.mphb-price-breakdown-rate{display:none!important}
.mphb-gateway-title{font-weight:600;color:var(--ink)}
.mphb-terms-and-conditions-accept{font-size:.88rem;color:#3e473f}
/* display:flex on the label turned its loose text nodes ("I've read and
   accept the "), the <a>, and the <abbr> into separate anonymous flex
   items — each wrapping independently instead of flowing as one normal
   paragraph, which is what made this look like broken 2-column text.
   A hanging-indent (absolute-positioned checkbox + padding-left) keeps
   everything as one real wrapped paragraph instead. */
.mphb-terms-and-conditions-accept label{position:relative;display:block;
  padding-left:1.75rem;cursor:pointer}
.mphb-terms-and-conditions-accept input[type="checkbox"]{position:absolute;left:0;top:.15rem;
  width:1.15rem;height:1.15rem;accent-color:var(--river);cursor:pointer}
/* Already a real target="_blank" link to the real terms page — it just
   rendered as plain text before, giving no visual sign it was clickable. */
.mphb-terms-and-conditions-link{color:var(--river);text-decoration:underline;font-weight:600}
.mphb-terms-and-conditions-link:hover{color:var(--river-deep)}
.mphb-total-price{font-family:var(--display);font-size:1.2rem;color:var(--pine);margin:.8rem 0 0}
.mphb_sc_checkout-submit-wrapper button,.mphb_sc_checkout-submit-wrapper input[type="submit"]{
  font-family:var(--sans);font-size:.95rem;font-weight:600;cursor:pointer;border:none;
  border-radius:2px;padding:.85rem 2rem;background:var(--river);color:#fff;transition:.25s;width:100%}
.mphb_sc_checkout-submit-wrapper button:hover,.mphb_sc_checkout-submit-wrapper input[type="submit"]:hover{
  background:var(--river-deep)}
.mphb-errors-wrapper:not(.mphb-hide){background:#fbeaea;color:#b23b3b;border-radius:4px;
  padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:.9rem}
/* Post-submit "Reservation submitted" state — plain h4+p by default with
   no card at all. functions.php wraps it in .mphb-checkout-success via
   the plugin's ob_get_clean() filters (one per confirmation mode) since
   there's no action hook around just this message to add markup to. */
.mphb-checkout-success{max-width:520px;margin:3rem auto;text-align:center;
  background:var(--linen);border-radius:4px;padding:2.6rem 2rem;
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.mphb-checkout-success .check{width:64px;height:64px;border-radius:50%;background:var(--river);
  color:#fff;display:grid;place-items:center;margin:0 auto 1.2rem;font-size:1.8rem}
.mphb-checkout-success .mphb-reservation-submitted-title{font-family:var(--display);
  font-size:1.6rem;color:var(--pine);margin-bottom:.6rem}
.mphb-checkout-success .mphb_sc_checkout-success-reservation-message{color:#5b655c;
  max-width:38ch;margin:0 auto 1.6rem}
.mphb-checkout-success .button{display:inline-block;font-family:var(--sans);font-size:.9rem;
  font-weight:600;border-radius:2px;padding:.75rem 1.6rem;background:var(--river);color:#fff;
  transition:.25s}
.mphb-checkout-success .button:hover{background:var(--river-deep)}
/* Terms checkbox + submit button are moved into the price card by
   main.js — strip the terms wrapper's own card chrome (it's a
   .mphb-checkout-section by default) so it reads as part of the price
   card instead of a nested box, and give both a bit of separation from
   the total above them. */
#mphb-price-details .mphb-checkout-terms-wrapper{background:none;box-shadow:none;
  padding:0;margin-top:1rem}
#mphb-price-details .mphb_sc_checkout-submit-wrapper{margin-top:.8rem}
@media(max-width:900px){
  .mphb_sc_checkout-form{grid-template-columns:1fr}
  #mphb-booking-details{grid-row:1}
  #mphb-price-details{grid-column:1;grid-row:2;position:static}
  #mphb-customer-details{grid-row:3}
  #mphb-billing-details{grid-row:4}
  .mphb-total-price{grid-row:5}
  .mphb-errors-wrapper{grid-row:6}
  .mphb-checkout-terms-wrapper{grid-row:7}
  .mphb_sc_checkout-submit-wrapper{grid-row:8}
}

/* ---------- WOOCOMMERCE CHECKOUT (page id 394, "/checkout/") ----------
   Real WooCommerce checkout — payment bridge from MotoPress. WC's own CSS
   (woocommerce-general/layout) stays enqueued here (see functions.php
   khaii_dequeue_woocommerce_styles) for its layout/grid, but every field
   and surface is restyled to match the rest of the site (same input/
   label treatment as .mphb_sc_checkout-wrapper just before this page in
   the booking flow, same uppercase-label convention used everywhere else
   — .bookbar, .fld, .mphb-customer-* — instead of WC's stock look). */
.woocommerce-checkout label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage);font-weight:600;margin-bottom:.4rem;display:inline-block}
.woocommerce-checkout .required{color:#b3453a;text-decoration:none}
.woocommerce-checkout input[type="text"],.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],.woocommerce-checkout select,
.woocommerce-checkout textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);padding:.65rem .85rem;
  border:1px solid var(--line);border-radius:2px;background:#fff;box-sizing:border-box}
.woocommerce-checkout textarea{min-height:4.5rem;resize:vertical}
.woocommerce-checkout input:focus,.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus{border-color:var(--river);outline:none}
.woocommerce-checkout .form-row{margin-bottom:1rem}
.woocommerce-checkout h3{font-family:var(--display);font-size:1.15rem;color:var(--pine);
  margin:2.2rem 0 .8rem}
.woocommerce-checkout h3:first-child{margin-top:0}
/* Coupon entry: not part of the guest booking flow (no coupon codes are
   ever issued — MotoPress's own coupon feature is off site-wide too,
   see MPHB's useCoupons setting) — hide the prompt rather than theme it. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon{display:none}
/* Booking summary + payment — real two-card layout (own template,
   khaiiestate-theme/woocommerce/checkout/{form-checkout,review-order}.php)
   instead of WC's stock single bordered table. #order_review is the real
   woocommerce_checkout_order_review hook target — the review-order.php
   table (priority 10) and #payment (payment.php, priority 20 — untouched
   core template, every gateway's own payment_fields() output included)
   land as its two direct children in that order, so a plain grid splits
   them into side-by-side cards with zero JS and zero risk to gateway
   markup. Same surface/shadow language as .mphb-checkout-section /
   .mphb-booking-card.card-surface elsewhere in the booking flow.

   The table itself (not a wrapping div) carries the card's background/
   padding/shadow — deliberate, see the long comment in review-order.php:
   WooCommerce's AJAX "update order review" replaces whatever matches
   ".woocommerce-checkout-review-order-table" wholesale on every totals
   refresh, and that only stays safe if the table stays the single
   top-level element the template outputs, with nothing wrapped around
   it. border-collapse:separate (rather than collapse) is required for
   border-radius/box-shadow to actually render on a <table>. */
.khaii-checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:1.6rem;
  align-items:start;margin-top:1.6rem}
.woocommerce-checkout-review-order-table,.woocommerce-checkout #payment{
  background:var(--linen);border-radius:4px;padding:1.6rem 1.8rem;
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.woocommerce-checkout #payment{margin:0!important;position:sticky;top:1.5rem}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:separate;
  border-spacing:0;background:var(--linen)}
.khaii-card-title{caption-side:top;text-align:left;font-family:var(--display);
  font-size:1.05rem;color:var(--pine);margin-bottom:1rem;padding:0}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9rem;text-align:left;
  background:none}
.woocommerce-checkout-review-order-table thead th{color:var(--sage);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border-bottom-color:var(--pine)}
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table td:last-child{text-align:right}
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td{border-bottom:none}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table .order-total *{font-family:var(--display);
  color:var(--pine)}
/* Payment gateways + terms checkbox, inside the sticky card above */
.woocommerce-checkout ul.wc_payment_methods{list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:4px;padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.woocommerce-checkout ul.wc_payment_methods li{padding:.4rem 0}
.woocommerce-checkout .payment_box{background:var(--paper);border-radius:2px;
  padding:.9rem 1rem;margin-top:.6rem;font-size:.88rem;color:#5b655c}
.woocommerce-checkout .payment_box::before{border-bottom-color:var(--paper)!important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:0 0 1.2rem}
.woocommerce-checkout .woocommerce-privacy-policy-text{font-size:.85rem;color:#5b655c}
.woocommerce-checkout .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;
  gap:.6rem;text-transform:none;letter-spacing:normal;color:var(--ink);font-size:.92rem;
  font-weight:400;cursor:pointer}
.woocommerce-checkout input.woocommerce-form__input-checkbox{width:1.1rem;height:1.1rem;
  flex-shrink:0;accent-color:var(--river);cursor:pointer;margin-top:.15rem}
.woocommerce-checkout #payment .form-row.place-order{margin:0}
.woocommerce-checkout #payment #place_order,
.woocommerce #payment #place_order{
  width:100%;float:none!important;background:var(--river)!important;color:#fff!important;
  font-family:var(--sans)!important;border-radius:2px!important;font-weight:600!important;
  padding:.9rem 1.2rem!important}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce #payment #place_order:hover{background:var(--river-deep)!important}
@media(max-width:800px){
  .khaii-checkout-grid{grid-template-columns:1fr}
  .woocommerce-checkout #payment{position:static}
}

/* ---------- MOTOPRESS MY ACCOUNT (page id 648, "/booking-my-account/") ---------- */
.mphb_sc_account{max-width:900px;margin:0 auto}
.mphb_sc_account table{width:100%;border-collapse:collapse;margin-bottom:1.6rem}
.mphb_sc_account th,.mphb_sc_account td{
  padding:.75rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem;text-align:left}
.mphb_sc_account th{background:var(--linen);color:var(--sage);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.mphb_sc_account input[type="text"],.mphb_sc_account input[type="password"],
.mphb_sc_account input[type="email"]{
  font-family:var(--sans);font-size:.95rem;padding:.65rem .8rem;border:1px solid var(--line);
  border-radius:3px;background:#fff;color:var(--ink);outline:none;margin:.3rem 0 1rem;display:block}
.mphb_sc_account input[type="submit"]{
  font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;border:none;
  border-radius:2px;padding:.7rem 1.35rem;background:var(--river);color:#fff;transition:.25s}
.mphb_sc_account input[type="submit"]:hover{background:var(--river-deep)}
.mphb_sc_account a{color:var(--river)}

/* ---------- BOOKING CONFIRMATION / CANCELLATION (real email-link pages, no login) ---------- */
.mphb-booking-card{max-width:640px;margin:0 auto}
.mphb-booking-card.card-surface{background:var(--linen);border-radius:4px;padding:2rem;
  box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.mphb-booking-details-section{background:var(--linen);border-radius:4px;padding:1.8rem;
  margin-bottom:1.6rem;box-shadow:0 12px 40px -30px rgba(24,35,29,.5)}
.mphb-booking-details-title{font-family:var(--display);font-size:1.3rem;color:var(--pine);
  margin-bottom:1rem}
.mphb-booking-details{list-style:none}
.mphb-booking-details li{display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.mphb-booking-details li:last-child{border-bottom:none}
.mphb-booking-details .label{color:#5b655c}
.mphb-booking-details .value{background:none;color:var(--ink);font-weight:600;text-align:right}
.mphb-booking-details li.booking-price .value,
.mphb-booking-details li.payment-number:has(.mphb-price) .value{background:none;color:var(--pine);
  font-family:var(--display);font-size:1.1rem;font-weight:400}
.accommodations{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.92rem;display:flex;gap:.5rem;flex-wrap:wrap}
.accommodations-title{color:#5b655c}
.accommodations-list a{color:var(--river);font-weight:600}
.mphb-booking-details-section.cancel-booking{background:transparent;box-shadow:none;
  padding:0;text-align:center}
.mphb-booking-details-section.cancel-booking .button{
  font-family:var(--sans);font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid #b23b3b;
  border-radius:2px;padding:.7rem 1.6rem;background:transparent;color:#b23b3b;
  display:inline-block;transition:.25s}
.mphb-booking-details-section.cancel-booking .button:hover{background:#b23b3b;color:#fff}