/* ==========================================================================
   Lakeview RV Resort — site styles
   Hand-built static rebuild of lakeviewrvr.com (originally WordPress/Elementor).
   Breakpoints mirror the original: 1366 (laptop), 1200, 1024 (tablet), 880, 767 (mobile).
   ========================================================================== */

/* ---------- Fonts (self-hosted variable fonts) ---------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --primary: #0F2E90;
  --primary-dark: #071952;
  --primary-hover: #08184B;
  --yellow: #FFF176;
  --green: #0F9029;
  --text: #000000;
  --white: #ffffff;
  --light: #F8F8F8;
  --navy: #1b2647;
  --border: #69727d;
  --font-head: "Outfit", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --container: 1290px;
  --gap: 20px;
  --shape-h: 15px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { border: 0; height: auto; max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; padding: 0; line-height: 1; font-family: var(--font-head); font-weight: 600; color: var(--text); }
button { font: inherit; }
svg { display: block; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: #fff; padding: 10px 16px; z-index: 1000; font-family: var(--font-head); }
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.section { position: relative; padding: 50px 10px; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.split { display: flex; align-items: center; }
.split > * { width: 50%; min-width: 0; }
.kicker { font-family: var(--font-head); font-size: 18px; font-weight: 500; text-transform: uppercase; color: var(--primary); line-height: 1; }
.kicker--yellow { color: var(--yellow); font-weight: 600; }
.lead { font-family: var(--font-head); font-size: 18px; font-weight: 400; }
.lead p + p { margin-top: 0.9rem; }
.lead a { color: var(--primary); }
.text-center { text-align: center; }
.rich p + p { margin-top: 0.9rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--primary); color: #fff; fill: #fff;
  font-family: var(--font-head); font-size: 18px; font-weight: 500; line-height: 1;
  padding: 15px 35px; border: 0; border-radius: 3px; cursor: pointer; text-align: center;
  transition: background .3s, color .3s;
  width: auto; max-width: 100%; align-self: flex-start;
}
.btn:hover, .btn:focus { background: var(--primary-dark); color: #fff; }
.btn--upper { text-transform: uppercase; padding: 15px 25px; }
.btn--upper:hover, .btn--upper:focus { background: #071A53; }
.btn--block { width: 100%; padding: 14px; align-self: stretch; }
.btn--form { padding: 14px; }
.btn--form:hover, .btn--form:focus { background: var(--primary-hover); }
.btn--text { background: #fff; color: var(--primary); fill: var(--primary); padding: 15px 0; }
.btn--text:hover, .btn--text:focus { background: #fff; color: var(--text); fill: var(--text); }
.btn--text svg { width: 1em; height: 1em; }
.btn--outline { background: transparent; color: var(--text); border: 2px solid var(--text); padding: 12px 50px; }
.btn--outline:hover, .btn--outline:focus { background: transparent; color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }

/* ---------- Shape dividers (waves) ---------- */
.shape { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; direction: ltr; pointer-events: none; }
.shape--top { top: -1px; }
.shape--bottom { bottom: -1px; transform: rotate(180deg); }
.shape svg { display: block; position: relative; left: 50%; transform: translateX(-50%); width: calc(100% + 1.3px); height: var(--shape-h); }
.shape path { fill: #fff; }
.shape--flip svg { width: calc(139% + 1.3px); transform: translateX(-50%) rotateY(180deg); }

/* ---------- Icon helpers ---------- */
.icon { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; }
.topbar { background: var(--primary); padding: 10px; }
.topbar .container { display: flex; flex-wrap: wrap; gap: 0 16px; }
.topbar__item { display: flex; align-items: center; color: #fff; font-family: var(--font-head); font-weight: 400; font-size: 16px; line-height: 1.5; }
.topbar__item .icon { font-size: 14px; margin-right: calc(14px * .25); fill: #fff; }
.topbar__item span { padding-left: 5px; }
.topbar__item a { color: #fff; display: flex; align-items: center; }
.topbar__item a:hover { color: #fff; }

.mainbar { background: #fff; padding: 20px 10px; }
.mainbar .container { display: flex; align-items: center; justify-content: space-between; }
.logo img { width: 285px; }
.nav { display: flex; flex-wrap: wrap; font-family: var(--font-head); font-size: 18px; font-weight: 600; position: relative; z-index: 2; }
.nav > li { display: flex; position: relative; }
.nav > li > a { display: flex; align-items: center; padding: 13px 20px; color: var(--text); fill: var(--text); white-space: nowrap; transition: .4s; }
.nav > li > a:hover, .nav > li > a:focus, .nav > li.is-active > a { color: var(--primary); fill: var(--primary); }
.nav > li > a:hover { transform: scale(1.08); }
.nav .sub-arrow { display: inline-flex; padding-left: 8px; }
.nav .sub-arrow .icon { width: 1em; height: 1em; }
.nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 12em; width: max-content;
  background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.1); padding: 0; margin: 0; z-index: 10;
  font-size: 18px; font-weight: 500;
}
.nav > li:hover > .sub-menu, .nav > li:focus-within > .sub-menu, .nav > li.is-open > .sub-menu { display: block; }
.nav .sub-menu li { border-bottom: 1px solid rgba(0,0,0,.15); }
.nav .sub-menu li:last-child { border-bottom: 0; }
.nav .sub-menu a { display: block; padding: 13px 20px; color: var(--text); white-space: nowrap; transition: .3s; }
.nav .sub-menu a:hover, .nav .sub-menu a:focus, .nav .sub-menu li.is-active > a { background: var(--primary); color: #fff; }
.nav--vertical { flex-direction: column; }
.nav--vertical > li > a { padding: 13px 0; }

/* Mobile header (shown at ≤1024px) */
.mobile-header { display: none; }
.mobile-cta { background: var(--primary); padding: 10px; text-align: center; }
.mobile-cta a { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 17px; text-transform: uppercase; line-height: 1; display: block; }
.mobile-bar { background: #fff; padding: 10px; }
.mobile-bar .container { display: flex; align-items: center; }
.mobile-bar__spacer { width: 25%; }
.mobile-bar__logo { width: 50%; display: flex; justify-content: center; }
.mobile-bar__logo img { width: 328px; }
.mobile-bar__toggle { width: 25%; display: flex; justify-content: center; align-items: center; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 0; border-radius: 3px;
  color: #33373d; cursor: pointer; font-size: 34px; padding: .25em; line-height: 1;
}
.menu-toggle .icon { width: 1em; height: 1em; fill: #33373d; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }
.mobile-menu {
  display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 30px; background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,.1); max-height: calc(100vh - 160px); overflow-y: auto; z-index: 50;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.mobile-menu li { border-bottom: 1px solid rgba(0,0,0,.15); }
.mobile-menu li:last-child { border-bottom: 0; }
.mobile-menu a { display: block; padding: 13px 20px; color: var(--text); transition: .3s; }
.mobile-menu a:hover, .mobile-menu a:focus, .mobile-menu li.is-active > a { background: var(--primary); color: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; color: #fff; padding: 50px 10px; background: url("../img/bg-camper-van-starlit-sky.webp") center center / cover no-repeat; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.site-footer .container { position: relative; display: flex; }
.footer-col { width: 25%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.footer-col__logo img { width: 251px; }
.footer-col__text { font-family: var(--font-head); font-size: 18px; font-weight: 400; color: #fff; line-height: 1.5; }
.footer-col__title { font-family: var(--font-head); font-size: 32px; font-weight: 600; color: #fff; line-height: 1; }
.footer-menu { font-family: var(--font-head); font-size: 20px; font-weight: 400; }
.footer-menu a { display: block; padding: 13px 0; color: #fff; line-height: normal; }
.footer-menu a:hover { color: #fff; opacity: .85; }
.footer-contact li { display: flex; align-items: center; font-family: var(--font-head); font-size: 20px; font-weight: 400; color: #fff; padding: 3px 0; }
.footer-contact li a { display: flex; align-items: center; color: #fff; }
.footer-contact .icon { font-size: 20px; fill: #fff; margin-right: 5px; }
.footer-contact li span { padding-left: 5px; }
.footer-bottom { background: #fff; padding: 15px 10px; text-align: center; font-family: var(--font-head); font-size: 12px; font-weight: 400; color: var(--text); }
.footer-bottom a { color: #000; }

/* ==========================================================================
   Shared page pieces
   ========================================================================== */
.page-banner {
  position: relative; padding: 50px 10px; text-align: center;
  background: url("../img/bg-camper-van-starlit-sky.webp") center top / cover no-repeat;
}
.page-banner h1 { font-size: 69px; font-weight: 600; color: #fff; line-height: 1; }
.page-banner .shape { --shape-h: 15px; }

/* Forms */
.form { width: 100%; }
.form__fields { display: flex; flex-wrap: wrap; margin: 0 -5px -17px; }
.field { padding: 0 5px; margin-bottom: 17px; width: 100%; display: flex; flex-direction: column; }
.field--33 { width: 33.3333%; }
.field--66 { width: 66.6666%; }
.field--50 { width: 50%; }
.field label { font-family: var(--font-head); font-size: 18px; font-weight: 400; padding-bottom: 9px; line-height: 1.5; color: var(--text); }
.field__input {
  width: 100%; min-height: 40px; padding: 5px 12px; background: #fff; color: #000;
  font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 4px; transition: box-shadow .3s;
}
.field__input:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); border-color: #333; }
.field__input::placeholder { color: #757575; opacity: 1; }
textarea.field__input { min-height: 120px; resize: vertical; }
.field--accept { flex-direction: row; align-items: center; gap: 8px; }
.field--accept label { padding: 0; font-size: 18px; }
.field--accept label a { color: var(--primary); }
.field--accept input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.field--submit { justify-content: flex-end; }
.field--honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__message { margin-top: 15px; font-family: var(--font-head); font-size: 16px; padding: 12px 16px; border-radius: 4px; display: none; }
.form__message.is-success { display: block; background: #e8f5e9; color: #1b5e20; }
.form__message.is-error { display: block; background: #fdecea; color: #b71c1c; }
.form__message a { text-decoration: underline; }

/* Cards (listings) */
.card { padding: 5px; border-radius: 5px; display: flex; }
.card__body { width: 100%; background: #fff; border-radius: 5px; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.card__img { width: 100%; height: 200px; object-fit: cover; }
.card__title { font-size: 28px; font-weight: 600; color: var(--text); margin-left: -3px; line-height: 1.1; }
.card__distance { font-family: var(--font-head); font-size: 16px; font-weight: 400; color: var(--primary); margin-top: -10px; line-height: 1; }
.card__excerpt { font-family: var(--font-head); font-size: 18px; font-weight: 400; margin-top: -13px; line-height: 1.5; flex-grow: 1; }
.card .btn { align-self: flex-start; }

/* Accordion */
.accordion { width: 100%; --acc-color: #1f2124; --acc-hover: var(--primary); --acc-active: var(--primary); }
.accordion__item { display: flex; flex-direction: column; }
.accordion__item summary {
  display: flex; align-items: center; gap: 0 10px; padding: 10px; cursor: pointer; list-style: none;
  border: 1px solid #d5d8dc; color: var(--acc-color); font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1.5;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item + .accordion__item summary { border-top: 0; }
.accordion__icon { display: flex; align-items: center; order: -1; }
.accordion__icon .icon { height: 15px; width: auto; fill: currentColor; }
.accordion__icon .icon--minus { display: none; }
.accordion__item[open] > summary .icon--minus { display: block; }
.accordion__item[open] > summary .icon--plus { display: none; }
.accordion__item[open] > summary, .accordion__item:not([open]) > summary:hover { color: var(--acc-hover); }
.accordion__item[open] > summary { color: var(--acc-active); }
.accordion__panel { border: 1px solid #d5d8dc; border-top: 0; padding: 20px; font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 1.5; }
.accordion__panel p + p { margin-top: 0.9rem; }
.accordion__panel a { color: var(--primary); }

/* Image strip carousel (thumbnails) */
.strip { position: relative; overflow: hidden; width: 100%; --per-view: 4; --strip-gap: 20px; }
.strip__track { display: flex; gap: var(--strip-gap); transition: transform .5s ease; will-change: transform; }
.strip__slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--strip-gap)) / var(--per-view)); min-width: 0; }
.strip__slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; }
.strip__slide a { display: block; cursor: zoom-in; }

/* Generic slide carousel (cards / reviews) */
.carousel { position: relative; width: 100%; --per-view: 3; --carousel-gap: 31px; }
.carousel__viewport { overflow: hidden; width: 100%; }
.carousel__track { display: flex; gap: var(--carousel-gap); transition: transform .5s ease; align-items: stretch; }
.carousel__slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view)); min-width: 0; display: flex; }
.carousel__slide > * { width: 100%; }
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;
  background: transparent; border: 0; padding: 4px; color: var(--text); font-size: 20px; line-height: 1;
}
.carousel__btn .icon { width: 1em; height: 1em; fill: currentColor; }
.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }
.carousel__btn[disabled] { opacity: .3; cursor: default; }
.carousel--arrows-outside .carousel__viewport { width: calc(100% - 80px); margin: 0 auto; }
.carousel--arrows-outside .carousel__btn { font-size: 20px; }
.carousel--explore .carousel__viewport { width: calc(100% - 60px); margin: 0 auto; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,.5); }
.lightbox__close, .lightbox__nav { position: absolute; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 10px; }
.lightbox__close { top: 10px; right: 10px; font-size: 32px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 40px; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__nav .icon, .lightbox__close .icon { width: 1em; height: 1em; fill: #fff; }
.lightbox__caption { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--font-head); font-size: 14px; }

/* Google map embed */
.map-embed { line-height: 0; overflow: hidden; width: 100%; }
.map-embed iframe { width: 100%; height: 300px; border: 0; display: block; }

/* ==========================================================================
   Home
   ========================================================================== */
.hero {
  position: relative; display: flex; align-items: center; min-height: 551px; padding: 50px 10px;
  background: url("../img/hero-starry-night-rv.webp") center 80% / cover no-repeat; color: #fff;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.hero .container { position: relative; display: flex; align-items: center; }
.hero__content { width: 50%; display: flex; flex-direction: column; gap: var(--gap); }
.hero__title { font-size: 69px; font-weight: 700; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.3); line-height: 1; }
.hero__text { font-family: var(--font-head); font-size: 22px; font-weight: 400; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.3); line-height: 1.5; }
.hero .shape { --shape-h: 28px; }

.booking { position: relative; z-index: 2; padding: 0 10px; margin-top: -50px; margin-bottom: 50px; }
.booking__card { background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.5); padding: 37px; display: flex; flex-direction: column; gap: var(--gap); }
.booking__title { font-size: 30px; font-weight: 600; line-height: 1; }

.rates { padding: 50px 10px; }
.rates .container { display: flex; align-items: center; }
.rates__col { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.rates__title { font-size: 56px; font-weight: 600; line-height: 1; }
.rates__text { font-family: var(--font-head); font-size: 20px; font-weight: 400; }
.rate { display: flex; flex-direction: column; gap: 0; }
.rate__title { font-size: 24px; font-weight: 600; color: var(--primary); line-height: 1.1; }
.rate__text { font-family: var(--font-head); font-size: 20px; font-weight: 400; color: #333; }

.dark-section {
  position: relative; padding: 90px 10px; color: #fff;
  background: url("../img/bg-camper-van-starlit-sky.webp") center center / cover no-repeat;
}
.dark-section::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.dark-section .container { position: relative; display: flex; flex-direction: column; gap: var(--gap); }
.dark-section .shape { --shape-h: 23px; }
.section-head { display: flex; flex-direction: column; gap: var(--gap); align-items: center; text-align: center; }
.section-head__title { font-size: 56px; font-weight: 600; color: #fff; line-height: 1; }
.section-head__text { font-family: var(--font-head); font-size: 20px; font-weight: 400; color: #fff; }

.features { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gap) 0; }
.feature { width: 32%; background: #fff; border-radius: 5px; padding: 15px; color: var(--text); }
.feature__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.feature__icon { font-size: 40px; line-height: 0; color: var(--primary); }
.feature__icon svg { width: 1em; height: 1em; fill: var(--primary); }
.feature__title { font-size: 28px; font-weight: 600; margin: 0 0 5px; line-height: 1.2; }
.feature__text { font-family: var(--font-head); font-size: 18px; font-weight: 400; color: var(--text); }

.promo { padding: 90px 10px; }
.promo .container { display: flex; align-items: center; gap: 50px; }
.promo__col { width: 50%; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.promo__title { font-size: 56px; font-weight: 600; line-height: 1; }
.promo__text { font-family: var(--font-head); font-size: 20px; font-weight: 400; }
.promo__img { border-radius: 5px; width: 100%; }

.guide-title { font-size: 62px; }
.guide-cards { display: flex; flex-wrap: wrap; gap: var(--gap) 2%; width: 100%; }
.cta-card { width: 32%; border: 1px solid #000; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: var(--text); }
.cta-card__bg-wrap { position: relative; min-height: 300px; overflow: hidden; }
.cta-card__bg { position: absolute; inset: 0; background-size: cover; background-position: 50%; transition: transform 1.5s; }
.cta-card:hover .cta-card__bg { transform: scale(1.2); }
.cta-card__content { background: #fff; padding: 25px; text-align: center; display: flex; flex-direction: column; align-items: center; flex-grow: 1; }
.cta-card__content > * + * { margin-top: 15px; }
.cta-card__title { font-size: 48px; font-weight: 600; line-height: 1.2; }
.cta-card__text { font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 1.5; }
.cta-card__btn { margin-top: auto; padding-top: 15px; }

.home-map { padding: 10px; }
.home-map .container { max-width: none; }

/* ==========================================================================
   The Resort
   ========================================================================== */
.resort-intro { padding: 50px 10px 120px; }
.resort-intro .container { display: flex; align-items: center; }
.resort-intro__col { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.resort-intro__title { font-size: 69px; font-weight: 600; line-height: 1; }
.resort-intro__col--media { border-radius: 15px; background: url("../img/family-vacation-travel-rv-holiday-trip-in-motorhome.webp") 749px 46px / auto no-repeat; }
.photo-card { margin: 0 -11px -11px -10px; }
.photo-card img { width: 100%; border-radius: 0 0 15px 15px; }

.resort-band { position: relative; background: var(--navy); color: #fff; padding: 50px 10px; }
.resort-band .shape--top { --shape-h: 13px; }
.resort-band .shape--bottom { --shape-h: 15px; }
.resort-band .container { display: flex; align-items: center; }
.resort-band__img { width: 50%; min-width: 0; padding: 10px; }
.resort-band__img img { margin: -173px 0 -150px; position: relative; z-index: 2; width: 100%; }
.resort-band__text { width: 50%; min-width: 0; padding: 10px; }
.resort-band__text p { font-family: var(--font-head); font-size: 21px; font-weight: 400; color: #fff; max-width: 75%; }

.resort-feature { position: relative; padding: 90px 10px 40px; }
.resort-feature .container { display: flex; }
.resort-feature--reverse .container { flex-direction: row-reverse; }
.resort-feature--light { background: var(--light); padding: 90px 10px; }
.resort-feature__media { width: 50%; min-width: 0; padding: 10px; }
.resort-feature__media img { width: 100%; border-radius: 5px; }
.resort-feature__media--bg { background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 5px; min-height: 625px; }
.resort-feature__content { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.resort-feature__title { font-size: 49px; font-weight: 600; line-height: 1; }

.faq { padding: 40px 10px 90px; }
.faq .container { display: flex; flex-direction: row-reverse; align-items: center; gap: 50px; }
.faq__content { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.faq__media { width: 45%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.faq__media img { width: 100%; border-radius: 5px; }
.faq__title { font-size: 49px; font-weight: 600; line-height: 1; }

/* ==========================================================================
   Explore the area
   ========================================================================== */
.explore-intro { padding: 0 10px; }
.explore-intro .container { display: flex; align-items: center; }
.explore-intro__col { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.explore-intro__title { font-size: 69px; font-weight: 600; line-height: 1; }
.texas-img {
  width: 100%; height: 600px; object-fit: cover; object-position: center left;
  -webkit-mask: url("../img/texas-svg.svg") center / contain no-repeat; mask: url("../img/texas-svg.svg") center / contain no-repeat;
}
.explore-section { padding: 0 10px; }
.explore-section .container { display: flex; flex-direction: column; gap: var(--gap); padding: 10px; }
.divider { padding: 15px 0; width: 100%; }
.divider span { display: block; border-top: 1px solid rgba(15,46,144,.44); }
.explore-section__title { font-size: 58px; font-weight: 600; text-transform: capitalize; padding-left: 11px; line-height: 1; }
.explore-section__text { font-family: var(--font-head); font-size: 18px; font-weight: 400; width: 98%; align-self: center; }

/* ==========================================================================
   Listing pages
   ========================================================================== */
.listing { padding: 10px; }
.listing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; padding: 10px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { padding: 50px 10px; }
.contact .container { display: flex; gap: 50px; }
.contact__info { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: space-around; gap: var(--gap); }
.contact__form { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.info-grid { display: flex; flex-wrap: wrap; gap: var(--gap) 0; justify-content: space-between; }
.info-box { width: 45%; display: flex; align-items: center; gap: 15px; text-align: left; }
.info-box__icon { font-size: 22px; line-height: 0; color: var(--primary); flex: 0 0 auto; }
.info-box__icon svg { width: 1em; height: 1em; fill: var(--primary); }
.info-box__title { font-size: 28px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.2; }
.info-box__text { font-family: var(--font-head); font-size: 20px; font-weight: 400; color: var(--primary); line-height: 1.5; }
.info-box__text a { color: var(--primary); }
.contact__map { background: url("../img/map.webp") center / cover no-repeat; }
.contact__title { font-size: 49px; font-weight: 600; line-height: 1; }

/* ==========================================================================
   Book now
   ========================================================================== */
.book { padding: 50px 10px; }
.book .container { display: flex; }
.book__form { width: 60%; min-width: 0; padding: 25px; display: flex; flex-direction: column; gap: var(--gap); }
.book__title { font-size: 32px; font-weight: 600; text-transform: capitalize; line-height: 1.1; }
.book__text { font-family: var(--font-head); font-size: 18px; font-weight: 300; }
.book__info {
  width: 40%; min-width: 0; position: relative; border-radius: 15px; padding: 40px; color: #fff; display: flex; flex-direction: column; gap: var(--gap);
  background: url("../img/lower-res-background-for-mobile-of-rv-at-night.webp") center / cover no-repeat; overflow: hidden;
}
.book__info::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.26); }
.book__info > * { position: relative; }
.book__info-title { font-size: 32px; font-weight: 600; text-transform: capitalize; color: #fff; line-height: 1.1; }
.book__info-text { font-family: var(--font-head); font-size: 18px; font-weight: 300; color: #fff; }
.book__info-text a { color: #fff; text-decoration: underline; }
.accordion--book { --acc-color: var(--text); --acc-active: var(--text); }
.accordion--book summary { background: #fff; }
.accordion--book .accordion__panel { background: #fff; font-weight: 300; color: var(--text); }
.accordion--book .accordion__panel strong { font-weight: 600; }

/* ==========================================================================
   Monthly rentals
   ========================================================================== */
.rentals { padding: 40px 10px 90px; }
.rentals .container { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.rental { display: flex; width: 100%; padding: 0 10px; }
.rental + .rental { padding-top: 50px; }
.rental--reverse { flex-direction: row-reverse; }
.rental__media { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.rental__media > img { width: 100%; }
.rental__content { width: 50%; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: var(--gap); }
.rental__title { font-size: 56px; font-weight: 600; line-height: 1; }
.rental__cost, .rental__text { font-family: var(--font-head); font-size: 20px; font-weight: 400; }
.rental__text { margin-top: -5px; }
.rental__cost strong { font-weight: 700; }
.check-list { margin-top: -5px; }
.check-list li { display: flex; align-items: center; font-family: var(--font-head); font-size: 18px; font-weight: 400; padding: 2.5px 0; position: relative; }
.check-list li:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.21); }
.check-list .icon { font-size: 20px; fill: var(--green); margin-right: 5px; }
.check-list li span { padding-left: 5px; }

/* ==========================================================================
   Listing detail (single)
   ========================================================================== */
.single-hero { position: relative; padding: 90px 10px; color: #fff; background-position: center; background-size: cover; background-repeat: no-repeat; }
.single-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.single-hero .shape { --shape-h: 23px; }
.single-hero .container { position: relative; display: flex; align-items: center; gap: 50px; }
.single-hero__media { width: 50%; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.single-hero__photo { height: 375px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.single-hero__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); padding: 10px; }
.single-hero__thumbs a { display: block; cursor: zoom-in; }
.single-hero__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.single-hero__content { width: 50%; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.single-hero__title { font-size: 52px; font-weight: 600; color: #fff; line-height: 1; }
.single-hero__text { font-family: var(--font-head); font-size: 18px; font-weight: 400; color: #fff; }
.info-list li { display: flex; align-items: center; font-family: var(--font-head); font-size: 18px; font-weight: 400; color: #fff; padding: 8px 0; }
.info-list li:not(:last-child) { border-bottom: 1px solid rgba(221,221,221,.42); }
.info-list li:first-child { padding-top: 0; }
.info-list .icon { font-size: 17px; fill: #fff; margin-right: 4px; }
.info-list li span { padding-left: 5px; }
.info-list li a { color: #fff; display: flex; align-items: center; }

.reviews { padding: 50px 10px; }
.reviews .container { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.reviews .btn, .section-head .btn { align-self: center; }
.rating { display: flex; justify-content: center; }
.rating__star { position: relative; font-size: 18px; }
.rating__star svg { width: auto; height: 1em; fill: #ccd6df; }
.rating__star .rating__marked { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.rating__star .rating__marked svg { fill: #f0ad4e; }
.rating__text { font-family: var(--font-head); font-size: 18px; font-weight: 300; text-align: center; }
.reviews__title { font-size: 43px; font-weight: 600; text-align: center; line-height: 1.2; }
.reviews__carousel { padding: 20px 0; width: 100%; }
.review { background: #fff; border: 1px solid #e1e8ed; border-radius: 5px; display: flex; flex-direction: column; height: 100%; }
.review__header { display: flex; align-items: flex-start; padding: 20px 20px 10px; border-bottom: 1px solid #e1e8ed; }
.review__cite { display: flex; flex-direction: column; font-style: normal; }
.review__name { font-weight: 700; color: #1c2022; font-size: 15px; line-height: 1.4; }
.review__stars { color: #ccd6df; font-size: 16px; line-height: 1; letter-spacing: 1px; }
.review__stars i { font-style: normal; position: relative; display: inline-block; }
.review__stars i::before { content: "★"; color: #f0ad4e; position: absolute; left: 0; top: 0; overflow: hidden; width: 0; }
.review__stars i.is-full::before { width: 100%; }
.review__stars i.is-half::before { width: 50%; }
.review__icon { margin-left: auto; font-size: 17px; line-height: 0; }
.review__icon svg { width: 1em; height: 1em; }
.review__text { padding: 10px 20px 20px; font-size: 14px; line-height: 20px; color: #333; }

/* ==========================================================================
   404
   ========================================================================== */
.not-found { padding: 80px 10px; text-align: center; }
.not-found .container { display: flex; flex-direction: column; align-items: center; gap: var(--gap); max-width: 800px; }
.not-found h1 { font-size: 56px; }
.not-found p { font-family: var(--font-head); font-size: 20px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1366px) {
  .topbar { padding: 5px 10px 5px 10px; }
  .mainbar { padding: 10px; }
  .logo img { width: 250px; }
  .hero { min-height: 455px; padding: 0 10px; }
  .hero__title { font-size: 62px; }
  .hero__text { font-size: 20px; }
  .rates__title, .promo__title, .section-head__title { font-size: 55px; }
  .rates__text, .promo__text, .section-head__text { font-size: 18px; }
  .feature { padding: 24px; }
  .feature__icon { font-size: 48px; }
  .promo { padding: 20px 10px; }
  .promo .container { gap: 20px; }
  .cta-card__content { padding: 17px; }
  .cta-card__title { font-size: 46px; }
  .cta-card__text { font-size: 17px; }
  .resort-intro { padding: 40px 10px 120px; }
  .resort-intro__title { font-size: 52px; }
  .resort-feature__title, .faq__title, .contact__title { font-size: 52px; }
  .faq { padding: 80px 10px 50px; }
  .rental__title { font-size: 55px; }
  .rental__cost, .rental__text { font-size: 18px; }
  .single-hero .container { gap: 20px; }
}

@media (max-width: 1200px) {
  .logo img { width: 210px; }
  .nav { font-size: 16px; }
  .btn--upper { font-size: 16px; }
  .footer-col__logo img { width: 223px; }
  .hero__content { width: 60%; }
  .hero__title { font-size: 55px; }
  .section-head__title { max-width: 73%; }
  .section-head__text { max-width: 77%; }
  .features { justify-content: space-evenly; }
  .feature { width: 48%; }
  .guide-title { max-width: 89%; }
  .guide-cards { flex-direction: column; align-items: center; }
  .cta-card { width: 95%; }
  .cta-card__title { font-size: 34px; }
  .resort-feature .container, .resort-feature--reverse .container { flex-direction: column; align-items: center; justify-content: center; }
  .resort-feature { padding: 50px 10px 0; }
  .resort-feature--light { padding: 50px 10px 0; }
  .resort-feature__media { order: 2; width: 100%; display: flex; justify-content: center; }
  .resort-feature__media img { width: 61%; }
  .resort-feature__media--bg { width: 100%; }
  .resort-feature__content { width: 95%; padding: 0 10px 20px; }
  .faq .container { flex-direction: column; }
  .faq__content { width: 95%; }
  .faq__media { width: 100%; order: -1; }
  .faq__media .strip { --per-view: 6; }
  .contact .container { flex-direction: column; padding: 30px 0 0; }
  .contact { padding: 30px 10px 0; }
  .contact__info, .contact__form { width: 100%; }
  .contact__form { order: -1; align-items: center; text-align: center; }
  .contact__form .btn { align-self: flex-start; }
  .contact__form .lead { max-width: 73%; }
  .contact__form .form { text-align: left; }
  .info-box { width: 23%; }
  .rentals { padding: 20px 10px 0 20px; }
  .rental, .rental--reverse { flex-direction: column; }
  .rental__media, .rental__content { width: 100%; }
  .rental--reverse .rental__media { order: 2; }
  .rental__media .strip { --per-view: 6; }
  .single-hero__media, .single-hero__content { width: 100%; }
}

@media (min-width: 1025px) {
  .mobile-header { display: none !important; }
}

@media (max-width: 1024px) {
  .desktop-header { display: none; }
  .mobile-header { display: block; position: relative; }
  .page-banner h1 { font-size: 50px; }
  .hero { min-height: 529px; padding: 0 10px 50px; background-position: 70% 80%; }
  .hero::before { background: rgba(0,0,0,.37); }
  .hero__title { font-size: 54px; }
  .booking__title { text-align: center; }
  .rates .container { flex-direction: column; }
  .rates__col { width: 100%; align-items: center; text-align: center; }
  .rates__title { max-width: 74%; }
  .rates__text { max-width: 72%; }
  .rate { width: 79%; text-align: center; }
  .features { justify-content: center; }
  .feature { width: 45%; }
  .feature__inner { flex-direction: row; align-items: flex-start; text-align: left; gap: 15px; }
  .feature__icon { font-size: 40px; }
  .feature__title { margin-bottom: 4px; }
  .cta-card { width: 100%; }
  .home-map { background: url("../img/map.webp") center / cover no-repeat; }
  .resort-intro { padding: 20px 10px; }
  .resort-intro__title { font-size: 46px; }
  .resort-intro__col--media { background-position: 0 0; }
  .resort-feature { padding: 10px 10px 0; }
  .resort-feature--light { padding: 10px 10px 0; }
  .resort-feature__media img { width: 95%; }
  .resort-feature__title, .faq__title, .contact__title { font-size: 46px; }
  .faq { padding: 20px 10px 0; }
  .faq__media .strip { --per-view: 4; }
  .explore-intro__title { font-size: 50px; }
  .texas-img { margin: -100px 0; }
  .explore-section__title { font-size: 36px; padding-left: 13px; }
  .explore-section__text { width: 97%; }
  .explore-section .carousel { --per-view: 2; }
  .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book .container { flex-direction: column; align-items: center; }
  .book__form, .book__info { width: 95%; }
  .book__form { align-items: center; }
  .book__text { text-align: center; }
  .rental__media .strip { --per-view: 5; }
  .single-hero { padding: 50px 10px; }
  .single-hero .container { flex-direction: column; }
  .single-hero__media { width: 100%; order: -1; }
  .single-hero__content { width: 100%; }
}

@media (max-width: 880px) {
  .promo__col .btn, .rates__col .btn { align-self: center; }
  .hero__title { font-size: 53px; }
  .promo .container { flex-direction: column; }
  .promo__col { width: 100%; text-align: center; align-items: center; }
  .rates__title { text-align: center; }
  .resort-intro__title, .resort-feature__title, .faq__title, .contact__title { font-size: 38px; }
  .resort-intro .btn-row { flex-direction: column; align-items: flex-start; }
  .resort-band__text p { font-size: 18px; }
  .contact__form .lead { max-width: 100%; }
  .explore-section .carousel { --per-view: 2; }
}

@media (max-width: 767px) {
  .hero__content .btn, .resort-intro__col .btn, .resort-feature__content .btn, .faq__content .btn, .explore-intro__col .btn, .contact__form .btn, .not-found .btn { align-self: center; }
  .mobile-bar { padding: 15px 10px; }
  .mobile-bar__spacer, .mobile-bar__toggle { width: 20%; }
  .mobile-bar__logo { width: 60%; }
  .mobile-bar__logo img { width: 100%; }
  .menu-toggle { font-size: 25px; }
  .mobile-menu { margin-top: 25px; }
  .mobile-menu ul { font-size: 18px; }
  .mobile-menu a { padding: 15px 20px; }
  .site-footer .container { flex-wrap: wrap; }
  .footer-col { width: 100%; }
  .footer-bottom { padding: 5px 20px; }
  .page-banner h1 { font-size: 45px; }
  .hero { min-height: 0; padding: 0 10px 50px; background-image: url("../img/lower-res-background-for-mobile-of-rv-at-night.webp"); background-position: 0 0; background-size: cover; }
  .hero .container { justify-content: center; }
  .hero__content { width: 100%; text-align: center; align-items: center; }
  .hero .kicker { padding-top: 20px; }
  .hero__title { font-size: 38px; }
  .hero__text { font-size: 20px; padding: 0 10px; }
  .booking { margin: 0; padding: 10px; }
  .booking__card { padding: 37px 20px; }
  .booking__title { font-size: 30px; }
  .field--33, .field--66, .field--50 { width: 100%; }
  .rates { padding: 0 10px 10px; }
  .rates__title { font-size: 36px; max-width: 100%; }
  .rates__text { max-width: 100%; }
  .rates__col--rates { padding-bottom: 30px; }
  .dark-section { padding: 55px 20px; background-image: url("../img/lower-res-background-for-mobile-of-rv-at-night.webp"); }
  .section-head__title { font-size: 36px; max-width: 100%; }
  .section-head__text { max-width: 100%; }
  .guide-title { max-width: 100%; }
  .feature { width: 100%; }
  .feature__inner { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .promo__title { font-size: 36px; }
  .cta-card__title { font-size: 38px; }
  .cta-card__text { font-size: 17px; }
  .resort-intro { padding: 20px 10px; }
  .resort-intro .container { flex-direction: column; }
  .resort-intro__col { width: 100%; text-align: center; align-items: center; }
  .resort-intro__col--media { order: -1; }
  .resort-intro__title { font-size: 34px; }
  .resort-intro .kicker { padding-top: 20px; }
  .resort-intro .btn-row { justify-content: center; align-items: center; }
  .resort-band { padding: 30px 10px 0; }
  .resort-band .container { flex-direction: column; }
  .resort-band__img { width: 100%; order: 2; display: flex; justify-content: center; }
  .resort-band__img img { margin: -21px 0 0; width: 87%; }
  .resort-band__text { width: 100%; text-align: center; }
  .resort-band__text p { max-width: 100%; padding: 0 10px; }
  .resort-feature { padding: 20px 10px 0; }
  .resort-feature--light { padding: 20px 10px 0; }
  .resort-feature__content { width: 100%; text-align: center; align-items: center; }
  .resort-feature__title, .faq__title, .contact__title { font-size: 34px; }
  .resort-feature__media--bg { min-height: 297px; }
  .faq { padding: 20px 10px 0; }
  .faq__content { width: 100%; text-align: center; align-items: center; }
  .faq__content .accordion { text-align: left; }
  .faq__content .kicker { padding-top: 20px; }
  .faq__media .strip { --per-view: 3; }
  .explore-intro .container { flex-direction: column; }
  .explore-intro__col { width: 100%; text-align: center; align-items: center; }
  .explore-intro__col--media { order: -1; }
  .explore-intro .kicker { padding-top: 20px; }
  .explore-intro__title { font-size: 45px; }
  .texas-img { margin: 0; height: 325px; }
  .explore-section__title { font-size: 45px; text-align: center; padding-left: 0; }
  .explore-section__text { text-align: center; }
  .explore-section .carousel { --per-view: 1; padding: 0 10px; }
  .listing__grid { grid-template-columns: 1fr; }
  .card__body { padding: 5px; }
  .card__title, .card__distance, .card__excerpt { text-align: center; }
  .card .btn { align-self: center; }
  .contact__title { text-align: center; }
  .book { padding: 20px 10px 5px; }
  .book__info { padding: 15px; align-items: center; }
  .book__info-title { text-align: center; }
  .rental__media .strip { --per-view: 3; }
  .rental__title { font-size: 36px; }
  .rental__content { text-align: left; }
  .rentals .container { align-items: stretch; }
  .single-hero__photo { height: 250px; width: 90%; margin: 0 auto; }
  .reviews__carousel.carousel { --per-view: 1; --carousel-gap: 10px; }
  .reviews__carousel .carousel__viewport { width: calc(90% - 40px); }
  .not-found h1 { font-size: 36px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer .container { flex-wrap: wrap; justify-content: space-around; }
  .footer-col { width: 30%; }
  .footer-col--brand { width: 100%; align-items: center; text-align: center; }
  .feature { width: 45%; }
  .explore-section .carousel { --per-view: 2; }
}

@media (min-width: 1367px) {
  .resort-intro__col--media { background-attachment: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip__track, .carousel__track, .cta-card__bg, .nav > li > a { transition: none; }
}

/* ---------- Booking quote + confirmation ---------- */
select.field__input { appearance: auto; }
.form__quote { font-family: var(--font-head); font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.form__quote:empty { display: none; }
.form__quote.is-ok { background: #eef3ff; border-left: 4px solid var(--primary); padding: 10px 14px; border-radius: 4px; }
.form__quote.is-error { background: #fdecea; border-left: 4px solid #b71c1c; padding: 10px 14px; border-radius: 4px; color: #b71c1c; }
.form__quote.is-error a { color: #b71c1c; text-decoration: underline; }
.form__quote.is-loading { color: #666; }
.form__quote-detail { font-size: 15px; color: #333; }
.booking-summary { width: 100%; max-width: 560px; background: var(--light); border-radius: 8px; padding: 20px 24px; text-align: left; }
.booking-summary dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.booking-summary dl > div { display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-head); font-size: 17px; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 6px; }
.booking-summary dt { color: #555; }
.booking-summary dd { margin: 0; font-weight: 600; }
.thank-you .container { max-width: 800px; }

/* ---------- Guest portal ---------- */
.text-link { color: var(--primary); text-decoration: underline; }
.portal { padding: 50px 10px; }
.portal .container { max-width: 860px; display: flex; flex-direction: column; gap: 30px; }
.portal__lookup { display: flex; flex-direction: column; gap: var(--gap); }
.portal__title { font-size: 40px; font-weight: 600; line-height: 1; }
.portal__help { font-size: 16px; color: #444; }
.portal__help a { color: var(--primary); }
.portal__card { background: #fff; border: 1px solid #dde1ea; border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: var(--gap); box-shadow: 0 0 10px rgba(0,0,0,.08); }
.portal__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.portal__head h2 { font-size: 32px; font-weight: 600; line-height: 1; }
.portal__status { display: inline-block; padding: 5px 12px; border-radius: 999px; font-family: var(--font-head); font-size: 14px; font-weight: 600; background: #e9ecf3; color: #333; }
.portal__status--confirmed, .portal__status--checked_in { background: #dbe7ff; color: var(--primary); }
.portal__status--pending, .portal__status--expired { background: #fff3cd; color: #7a5a00; }
.portal__status--cancelled { background: #fde2e1; color: #8e1313; }
.portal__status--completed { background: #d8f5df; color: #1b5e20; }
.portal__card .booking-summary { max-width: none; }
.portal__notice { font-family: var(--font-head); font-size: 16px; padding: 12px 16px; border-radius: 6px; background: #eef3ff; border-left: 4px solid var(--primary); }
.portal__notice--warn { background: #fff8e1; border-color: #f0ad4e; }
.portal__notice--error { background: #fdecea; border-color: #b71c1c; color: #b71c1c; }
.portal__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.portal__cancel { display: none; flex-direction: column; gap: 10px; }
.portal__cancel.is-open { display: flex; }
.portal__policy { font-family: var(--font-head); font-size: 15px; color: #444; }
@media (max-width: 767px) { .portal__title { font-size: 32px; } .portal__card { padding: 20px; } }