/*
Theme Name: SunVillaFlorida V256
Theme URI: https://sunvillaflorida.com/
Author: SunVilla Florida
Description: Custom vacation rental landing page theme for SunVilla Florida.
Version: 2.56.0
Requires at least: 6.0
Text Domain: sunvilla-florida
*/

:root {
  --ink: #1e2a32;
  --muted: #64727d;
  --line: #dbe5e8;
  --blue: #1f6f8b;
  --aqua: #27a6a6;
  --sun: #f5a623;
  --sand: #f7f2ea;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px clamp(18px, 5vw, 72px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
}

.brand img {
  display: block;
  width: 210px;
  max-width: 42vw;
  height: auto;
}

.main-nav,
.header-contact {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

/* Active-page highlight for Home/Rooms/Explore the Area/Contact/Reviews
   (added 2026-07-13) -- .active is toggled by the scroll-spy script in
   footer.php as the guest scrolls past each section, so whichever nav
   link matches where they currently are turns dark blue instead of the
   default grey. Deliberately excludes .nav-book-direct/.nav-direct-rate
   (the promo banner + CTA button), which keep their own always-on colors
   regardless of scroll position. */
.main-nav a.active {
  color: var(--blue);
}

.main-nav .nav-book-direct {
  border-radius: 6px;
  padding: 7px 11px;
  background: var(--sun);
  color: #16384a;
}

.main-nav .nav-book-direct:hover {
  background: #f8bd4d;
}

.main-nav .nav-direct-rate {
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--blue);
  color: #fff;
  white-space: nowrap;
  line-height: 1.2;
}

/* WordPress admin bar offset (added 2026-07-13) -- .topbar is
   position: sticky; top: 0, so for logged-in users WordPress's fixed
   #wpadminbar (32px desktop, 46px on screens <= 782px) sits on top of it
   and covers part of the header. body.admin-bar is added by WP core
   automatically whenever the admin bar is showing, so this only affects
   logged-in visitors -- the public site is unaffected. */
body.admin-bar .topbar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .topbar {
    top: 46px;
  }
}

.payment-response-page {
  min-height: 72vh;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 6vw, 80px);
  background: linear-gradient(180deg, #ffffff 0%, #f7f2ea 100%);
}

.payment-response-panel {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(30, 42, 50, .12);
}

.payment-response-kicker {
  margin: 0 0 10px;
  color: var(--aqua);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-response-panel h1 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.payment-response-panel p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 17px;
}

.payment-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.payment-response-actions a,
.payment-response-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 6px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

.payment-response-primary {
  background: var(--blue);
  color: #ffffff;
}

.payment-response-secondary {
  border: 1px solid var(--line);
  color: var(--ink);
}

.main-nav .nav-direct-rate:hover {
  background: #2b819f;
}

.header-right {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.button.secondary {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--line);
}

.hero {
  min-height: 82vh;
  display: grid;
  align-items: end;
  padding: clamp(40px, 7vw, 96px) clamp(18px, 5vw, 72px);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(7, 32, 43, .78), rgba(7, 32, 43, .34)),
    var(--home-hero-image, url("assets/lanai/20260430_192627.jpg")) center/cover;
}

.hero-inner { max-width: 760px; }

.eyebrow {
  margin: 0 0 12px;
  color: #ffe1a6;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 78px);
  line-height: 1.02;
  letter-spacing: 0;
}

.hero p {
  max-width: 650px;
  margin: 20px 0 0;
  color: #f3fbfc;
  font-size: 20px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.section {
  padding: 58px clamp(18px, 5vw, 72px);
  background: #fff;
}

.section.alt { background: var(--sand); }

.section-head {
  max-width: 780px;
  margin-bottom: 28px;
}

h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
}

.section-head p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.feature {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}

.feature img,
.room img,
.area-card img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

.card-image {
  display: block;
}

.feature img { min-height: 380px; }

.room-grid,
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.room,
.area-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.room img,
.area-card img { height: 190px; }

.area-card img {
  height: 235px;
  object-position: center center;
}

.card-content {
  padding: 18px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card-content h3 {
  margin: 0;
  font-size: 21px;
}

.card-content p {
  margin: 10px 0 0;
  color: var(--muted);
}

.card-link {
  display: inline-flex;
  margin-top: auto;
  padding-top: 14px;
  color: var(--blue);
  font-weight: 900;
}

.quick-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.quick-strip a {
  border-left: 4px solid var(--sun);
  background: #fff;
  padding: 16px;
  font-weight: 900;
  color: var(--blue);
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.seo-grid a {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.seo-grid strong {
  color: var(--blue);
  font-size: 18px;
  line-height: 1.2;
}

.seo-grid span {
  color: var(--muted);
}

.contact-band {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 34px;
  border-radius: 8px;
  background: #16384a;
  color: #fff;
}

.contact-band p { color: #dbecef; margin: 10px 0 0; }

.booking-band {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  gap: 28px;
  align-items: start;
  padding: 34px;
  border-radius: 8px;
  background: #16384a;
  color: #fff;
}

.booking-band p {
  color: #dbecef;
  margin: 10px 0 0;
}

.booking-savings {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.08;
}

.booking-savings strong {
  color: #ffe1a6;
  font-weight: 900;
}

.booking-direct {
  font-size: 1.08rem;
  font-weight: 800;
}

.booking-trust {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  font-size: .92rem;
  line-height: 1.35;
}

.booking-trust h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
}

.booking-trust ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-trust li {
  position: relative;
  padding-left: 18px;
  color: #f4fbfc;
  font-weight: 700;
}

.booking-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sun);
}

.booking-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.booking-form label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.guest-details label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.booking-form input,
.booking-form select,
.booking-form textarea,
.guest-details input,
.guest-details select,
.guest-details textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 6px;
  padding: 11px 12px;
  color: #16384a;
  font: inherit;
}

.booking-form .field-help,
.guest-details .field-help {
  color: #dbecef;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
}

.booking-form textarea {
  min-height: 92px;
  resize: vertical;
}

.booking-form .wide,
.guest-details .wide,
.booking-form .booking-status {
  grid-column: 1 / -1;
}

.date-request {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
}

.date-request h3 {
  margin: 0;
  color: #ffe1a6;
  font-size: 22px;
  line-height: 1.2;
}

.date-request p {
  margin: 8px 0 14px;
  color: #e7f2f4;
}

.booking-calendar-layout {
  display: block;
}

.booking-calendar-column {
  min-width: 0;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.date-price-calendar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.calendar-nav {
  position: absolute;
  inset: 12px 12px auto 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.calendar-nav-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.calendar-nav-button:disabled {
  color: #a9b7bd;
  cursor: not-allowed;
  opacity: .45;
}

.calendar-nav-bottom {
  display: none;
}

.calendar-month h4 {
  margin: 0 0 13px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekdays {
  margin-bottom: 7px;
  color: #111;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.calendar-day {
  min-height: 46px;
  border: 0;
  border-radius: 3px;
  padding: 5px 3px 4px;
  background: #f7f7f7;
  color: #53606a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-day.is-empty {
  background: transparent;
  cursor: default;
}

.calendar-day.is-past {
  background: #eef2f3;
  color: #a8b2b8;
  cursor: not-allowed;
  opacity: .72;
}

.calendar-day.is-in-range {
  background: #0f487a;
  color: #fff;
}

.calendar-day.is-selected {
  background: #0f487a;
  color: #fff;
}

.calendar-date,
.calendar-price {
  display: block;
}

.calendar-date {
  font-size: 13px;
  line-height: 1.1;
}

.calendar-price {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 800;
}

.selected-date-summary {
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.25;
  color: #ffe1a6;
  font-weight: 900;
}

.guest-details {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
}

.guest-details h3 {
  margin: 0 0 10px;
  color: #ffe1a6;
  font-size: 20px;
  line-height: 1.2;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.detail-name {
  grid-column: span 3;
}

.guest-count {
  grid-column: span 4;
}

.detail-country {
  grid-column: span 3;
}

.detail-phone {
  grid-column: span 5;
}

.detail-email {
  grid-column: span 4;
  max-width: 320px;
}

.country-phone-help {
  grid-column: 1 / -1;
  margin: -2px 0 0 !important;
  color: #dbecef;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}

.booking-verification-modal[hidden] {
  display: none;
}

.booking-verification-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 35, 50, .52);
  backdrop-filter: blur(3px);
}

.booking-verification-card {
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  text-align: center;
}

.booking-verification-card h3 {
  margin: 0;
  color: var(--blue);
  font-size: 1.45rem;
  line-height: 1.15;
}

.booking-verification-card p {
  margin: 10px 0 16px;
  color: #b91c1c;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.35;
}

.verification-code-label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.verification-code-label input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 14px;
  color: var(--ink);
  font: 800 1.35rem/1.1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-align: center;
}

.verification-code-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 14px 0 16px;
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 900;
}

.verification-code-display span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fbfc;
}

.verification-code-display span.filled {
  border-color: var(--aqua);
  background: #edf8f6;
}

.verification-code-display.complete span {
  border-color: #1c7c54;
  background: #eefaf2;
}

.verification-code-display b {
  color: var(--muted);
}

.verification-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.booking-options {
  grid-column: 1 / -1;
  margin-top: -2px;
}

.booking-options .field-help {
  grid-column: 1 / -1;
  margin: 0;
}

.guest-count,
.booking-options {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 0;
  padding: 0;
}

.guest-count {
  grid-template-columns: repeat(2, auto);
  align-items: start;
  justify-content: start;
  align-self: start;
  column-gap: 10px;
  row-gap: 4px;
}

.guest-count legend,
.booking-options legend {
  grid-column: 1 / -1;
  color: #ffe1a6;
  font-weight: 900;
  font-size: .92rem;
}

.guest-count legend {
  margin: 0;
  line-height: 1.2;
}

.guest-count label {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: .8rem;
  font-weight: 800;
}

.guest-count input {
  width: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  padding: 5px 3px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.guest-count input::-webkit-inner-spin-button,
.guest-count input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.guest-details label {
  gap: 5px;
  font-size: .9rem;
}

.guest-details input,
.guest-details select {
  height: 34px;
  min-height: 34px;
  padding: 6px 9px;
}

.detail-country select {
  max-width: 150px;
}

.detail-phone input {
  max-width: 200px;
}

.guest-details textarea {
  min-height: 58px;
  padding: 7px 9px;
  resize: vertical;
}

.guest-details .is-invalid {
  border-color: #ff4d4f;
  background: #fff2f2;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, .25);
}

.guest-details .has-invalid-field {
  color: #ffd1d1;
}

.guest-details fieldset.has-invalid-field {
  border: 1px solid #ff4d4f;
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255, 77, 79, .12);
}

.guest-validation-overlay[hidden] {
  display: none;
}

.guest-validation-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 28, 36, .68);
}

.guest-validation-popup {
  width: min(460px, 100%);
  border: 3px solid #d92d20;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}

.guest-validation-popup h2 {
  margin: 0;
  color: #b42318;
  font-size: 1.3rem;
  line-height: 1.2;
}

.guest-validation-popup p {
  margin: 8px 0;
  color: var(--ink);
}

.guest-validation-popup ul {
  margin: 0 0 16px;
  padding-left: 22px;
  color: #b42318;
  font-weight: 800;
}

.guest-validation-popup .button {
  min-width: 110px;
}

body.validation-popup-open {
  overflow: hidden;
}

.booking-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-options label {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: .86rem;
  font-weight: 700;
}

.booking-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.booking-side-panel[hidden],
.guest-details[hidden] {
  display: none;
}

#continueBookingButton[hidden],
#contactBookingButton[hidden],
#changeDatesButton[hidden],
#changeSubmittedDatesButton[hidden] {
  display: none !important;
}

.booking-side-panel {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.booking-side-panel h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.12;
}

.booking-side-panel p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

.booking-estimate-total {
  margin-top: 4px;
  border-top: 2px solid var(--line);
  padding-top: 7px;
  color: #123f52;
  font-size: .96rem;
  font-weight: 900;
}

.booking-estimate-heading {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.booking-estimate-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.25;
}

.booking-estimate-row strong {
  white-space: nowrap;
}

.booking-estimate-subtotal {
  margin-top: 3px;
  border-top: 1px solid var(--line);
  padding-top: 5px;
}

.guest-booking-estimate {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 9px 11px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.guest-booking-estimate[hidden] {
  display: none;
}

.guest-booking-estimate h4 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: .9rem;
  line-height: 1.2;
}

.guest-booking-estimate.is-updated {
  border-color: var(--sun);
  background: #fff9ea;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .22);
}

.guest-booking-estimate.is-updated .booking-estimate-heat {
  color: #9a4c00;
  font-weight: 900;
}

.booking-estimate-note {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
}

.booking-side-panel.is-warning {
  border-left: 6px solid #d85a32;
  background: #fff8f1;
}

.booking-side-panel.is-warning h2 {
  color: #8f2d16;
}

.booking-side-panel.is-warning #continueBookingButton {
  display: none !important;
}

.booking-side-panel.is-checking {
  justify-items: center;
  text-align: center;
}

.booking-side-panel.is-checking h2,
.booking-side-panel.is-checking p {
  color: var(--ink);
}

.availability-spinner {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin: 2px auto 0;
}

.booking-form .hidden-field {
  position: absolute;
  left: -9999px;
}

.booking-form button {
  width: fit-content;
  border: 0;
  min-height: 46px;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(245, 166, 35, .28);
}

.booking-status {
  min-height: 22px;
  color: #ffe1a6;
  font-weight: 800;
}

.subhero {
  min-height: 56vh;
  display: grid;
  align-items: end;
  padding: clamp(48px, 8vw, 104px) clamp(18px, 5vw, 72px);
  color: #fff;
  background: linear-gradient(90deg, rgba(7, 32, 43, .78), rgba(7, 32, 43, .28)), var(--hero-image) center/cover;
}

.subhero-inner { max-width: 820px; }

.subhero p {
  max-width: 680px;
  margin: 18px 0 0;
  color: #f3fbfc;
  font-size: 20px;
}

.content-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}

.copy p,
.info-list li {
  color: var(--muted);
  font-size: 18px;
}

.copy p { margin: 0 0 18px; }

.info-box {
  border-left: 4px solid var(--sun);
  background: var(--sand);
  padding: 22px;
}

.info-box h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.info-list {
  margin: 0;
  padding-left: 20px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.gallery-beaches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gallery figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: 340px;
  object-fit: cover;
  object-position: center center;
}

.gallery figcaption {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.gallery-beaches img {
  height: 190px;
}

.gallery-beaches figcaption {
  padding: 10px 12px;
}

.gallery-beaches figure:nth-child(5) img {
  object-fit: contain;
  background: #eef6f4;
}

.gallery-parks-nature figure:nth-child(2) img,
.gallery-parks-nature figure:nth-child(4) img {
  object-fit: contain;
  background: #eef6f4;
}

.editable-content {
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.editable-content > :not(.wp-block-image) {
  grid-column: 1 / -1;
}

.editable-content > *:first-child {
  margin-top: 0;
}

.editable-content > *:last-child {
  margin-bottom: 0;
}

.editable-content p {
  max-width: 780px;
  color: var(--muted);
  font-size: 18px;
}

.editable-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.editable-content .wp-block-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.editable-content .wp-block-image figcaption {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.home-editable h3 {
  margin-top: 42px;
}

.home-editable .wp-block-image img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.home-editable .wp-block-button__link {
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.sunvilla-anchor {
  display: block;
  scroll-margin-top: 110px;
}

.booking-section-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 118px;
}

.booking-section {
  scroll-margin-top: 118px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(18px, 5vw, 72px);
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.footer-brand,
.footer-seo-links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-seo-links {
  justify-content: flex-end;
}

.footer-seo-links a {
  color: var(--blue);
  font-weight: 800;
}

@media (max-width: 880px) {
  .booking-section-anchor,
  .booking-section {
    scroll-margin-top: 220px;
  }

  .topbar,
  .site-footer,
  .contact-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .main-nav,
  .header-contact {
    flex-wrap: wrap;
  }

  .header-right {
    justify-items: start;
  }

  .feature,
  .room-grid,
  .area-grid,
  .quick-strip,
  .seo-grid,
  .content-wrap,
  .gallery,
  .editable-content,
  .booking-band,
  .booking-form {
    grid-template-columns: 1fr;
  }

  .booking-band {
    gap: 18px;
    padding: 24px 18px;
  }

  .booking-savings {
    font-size: 1.08rem;
    line-height: 1.12;
  }

  .booking-direct,
  .booking-band p {
    font-size: .95rem;
    line-height: 1.35;
  }

  .booking-trust {
    gap: 4px;
    margin-top: 6px;
    padding: 10px;
    font-size: .78rem;
    line-height: 1.24;
  }

  .booking-trust h3 {
    font-size: .92rem;
  }

  .booking-trust ul {
    gap: 3px;
  }

  .booking-side-panel {
    gap: 4px;
    margin-top: 7px;
    padding: 9px 10px;
  }

  .booking-side-panel h2 {
    font-size: 1rem;
    line-height: 1.15;
  }

  .booking-side-panel p {
    font-size: .76rem;
    line-height: 1.24;
  }

  .booking-estimate-total {
    font-size: .84rem;
  }

  .booking-estimate-note {
    font-size: .67rem;
    line-height: 1.18;
  }

  .gallery img {
    height: 285px;
  }

  .gallery-beaches {
    grid-template-columns: 1fr;
  }

  .date-grid {
    grid-template-columns: 1fr;
  }

  .date-price-calendar {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 12px;
  }

  .calendar-nav-top {
    position: static;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: -4px 0 -2px;
    pointer-events: none;
  }

  .calendar-nav-top .calendar-nav-button {
    background: #eef7f8;
  }

  .calendar-nav-bottom {
    position: static;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin-top: 0;
    pointer-events: none;
  }

  .calendar-nav-bottom .calendar-nav-button {
    background: #eef7f8;
  }

  .calendar-month h4 {
    font-size: 20px;
  }

  .calendar-weekdays,
  .calendar-days {
    gap: 5px;
  }

  .calendar-day {
    min-height: 44px;
    padding: 5px 2px;
  }

  .detail-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .detail-name {
    grid-column: span 6;
  }

  .detail-email {
    grid-column: span 8;
    max-width: 320px;
  }

  .booking-options {
    grid-column: 1 / -1;
  }

  .guest-count {
    grid-column: span 5;
  }

  .detail-country {
    grid-column: span 3;
  }

  .detail-phone {
    grid-column: span 4;
  }

  .detail-country select {
    max-width: 100%;
    padding-left: 5px;
    padding-right: 3px;
    font-size: .78rem;
  }

  .detail-phone input {
    max-width: 100%;
    padding-left: 5px;
    padding-right: 3px;
    font-size: .78rem;
  }

  .guest-count {
    column-gap: 5px;
  }

  .guest-count label {
    gap: 2px;
    font-size: .72rem;
  }

  .guest-count input {
    width: 30px;
    min-width: 30px;
    flex-basis: 30px;
  }

  .country-phone-help {
    grid-column: 1 / -1;
  }

  .booking-verification-card {
    padding: 20px 16px;
  }

  .verification-code-display span {
    width: 32px;
    height: 38px;
  }

  .guest-count {
    justify-content: start;
  }

  .booking-options {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  #bookingSubmitButton {
    width: 100%;
    justify-content: center;
  }
}


/* ── v253: mobile & tablet responsive improvements ─────────────────────── */

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 22px;
  cursor: pointer;
  min-height: 44px;
  color: var(--ink);
}

/* Tablet (iPad) — 768px – 1024px */
@media (max-width: 1024px) {
  .nav-direct-rate        { display: none; }
  .quick-strip            { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-grid               { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-grid, .area-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile — show hamburger, collapse nav into dropdown */
@media (max-width: 880px) {
  /* Keep logo + hamburger on ONE row — override existing column stacking */
  .topbar {
    flex-direction: row !important;
    align-items: center !important;
    position: relative;
    flex-wrap: nowrap;
  }

  /* header-right: just show the hamburger button inline */
  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  /* Hide the contact links from the topbar — they're in the dropdown */
  .header-contact {
    display: none;
  }

  /* Show the hamburger */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav hidden by default; becomes a dropdown when .nav-open is added */
  .main-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 4px);
    right: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    z-index: 100;
    gap: 4px;
    min-width: 230px;
  }

  .main-nav.nav-open {
    display: flex;
  }

  /* 44px touch targets */
  .main-nav a,
  .header-contact a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Promo banner visible inside dropdown */
  .main-nav .nav-direct-rate {
    display: block;
    white-space: normal;
    font-size: .82rem;
    width: 100%;
  }
}

/* Small phones — 480px and below */
@media (max-width: 480px) {
  .hero p                 { font-size: 17px; }
  .section                { padding: 36px 14px; }
  .gallery img            { height: 210px; }
  .booking-band           { padding: 16px 12px; }
  .calendar-day           { min-height: 38px; padding: 3px 2px; }
  .calendar-price         { display: none; }
  .brand img              { width: 160px; }
  .site-footer            { padding: 28px 14px; }
}