/* ===========================================================
   Brand palette
   These three colors come from the Aeraki Palms logo and are
   the single source of truth for all accents on the site.
     --brand-olive : primary accent (buttons, links, icons, prices)
     --brand-deep  : hover/active variant of the primary
     --brand-gold  : secondary highlight (chips, badge stars)
   The template ships with --accent-color: #2c7a7b (teal); we
   overwrite the template's own root variables so every selector
   that reads var(--accent-color) automatically picks up the olive.
   --brand-primary is an alias so component rules can target the
   primary color without knowing which logo color is in that role.
   =========================================================== */
:root {
  --brand-olive: #878d36;
  --brand-deep: #8b641d;
  --brand-gold: #ebae37;
  --brand-ink: #1f1f1f;

  --brand-primary: var(--brand-olive);

  --accent-color: var(--brand-primary) !important;
  --nav-hover-color: var(--brand-deep) !important;
  --nav-dropdown-hover-color: var(--brand-deep) !important;
}

/* Shared brand styles */
.sitename {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.header .logo img {
  height: 90px;
  width: auto;
  max-height: 70px;
}

.header .logo h1 {
  font-size: 22px;
  margin: 0 0 0 12px;
  color: var(--brand-ink);
}

.footer .logo img {
  height: 64px;
  width: auto;
}

/* Home page accents */
.hero-badge i { color: var(--brand-primary) !important; }
.badge-set .flag.featured { background: var(--brand-primary); color: #fff; }
.badge-set .flag.premium { background: var(--brand-ink); color: var(--brand-primary); }
.price,
.stack-price,
.mini-price { color: var(--brand-primary) !important; }

/* "Up to X Guests" capacity badge — sits on an olive-green filled background,
   so the text must be white to be legible */
.featured-properties .highlight-card .content .top .price {
  color: #fff !important;
}

/* About page accents */
.achievement-icon i { color: var(--brand-primary); }
.timeline-year {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

/* Villa details accents */
.property-features-list i,
.property-amenities i { color: var(--brand-primary) !important; }
.property-price { color: var(--brand-primary) !important; }

/* ===========================================================
   "Other Stays" section on villa-details
   Cards are clickable as a whole (anchor wraps everything).
   Media on top with a subtle gradient scrim and a tag chip;
   body has icon-tagged meta and a full-width filled CTA.
   =========================================================== */
.other-stays-heading .eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.other-stays-heading h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--brand-ink);
}
.other-stays-heading p {
  color: #6b6b6b;
  font-size: 14px;
}

.villa-card-pick {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ecead9;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.villa-card-pick:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31, 31, 31, 0.10);
  border-color: #e0d9b8;
}

.villa-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.villa-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

.villa-card-pick:hover .villa-card-media img {
  transform: scale(1.06);
}

.villa-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 31, 31, 0.35) 0%, rgba(31, 31, 31, 0) 45%);
  pointer-events: none;
}

.villa-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(139, 100, 29, 0.92);
  padding: 5px 10px;
  border-radius: 30px;
  font-weight: 600;
}

.villa-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.villa-card-body h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0 0 8px;
  font-size: 18px;
}

.villa-card-body .meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #6b6b6b;
  line-height: 1.5;
  margin-bottom: 14px;
}

.villa-card-body .meta i {
  color: var(--brand-primary);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.villa-card-body .btn-pick {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: transparent;
  border: 1px solid var(--brand-primary);
  padding: 10px 14px;
  border-radius: 30px;
  font-weight: 600;
  transition: background .25s ease, color .25s ease, border-color .25s ease, gap .25s ease;
}

.villa-card-body .btn-pick i {
  font-size: 14px;
  transition: transform .25s ease;
}

.villa-card-pick:hover .btn-pick {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.villa-card-pick:hover .btn-pick i {
  transform: translateX(3px);
}

/* ===========================================================
   Global accent overrides
   The template colors a wide variety of UI affordances with
   --accent-color via color-mix and direct references. These
   blanket rules push the gold/olive/deep palette to the rest
   of the site: buttons, links, icons, badges, focus rings.
   =========================================================== */

/* Primary CTAs in the template */
.btn-getstarted,
.btn-main,
.btn-soft:hover,
.btn-all-services,
.book-now-btn,
.discover-btn,
.stay-card .stay-action a.btn,
.cta-button {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

.btn-getstarted:hover,
.btn-main:hover,
.btn-all-services:hover,
.book-now-btn:hover,
.discover-btn:hover,
.cta-button:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* Outline / soft buttons */
.btn-soft,
.btn-outline,
.stack-link,
.mini-btn {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  background: transparent;
}

.btn-soft:hover,
.btn-outline:hover,
.stack-link:hover,
.mini-btn:hover {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* Mini-cards keep the original solid pill for the small action */
.featured-properties .mini-list .mini-card .mini-body .mini-foot .mini-btn {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

.featured-properties .mini-list .mini-card .mini-body .mini-foot .mini-btn:hover {
  background: var(--brand-deep) !important;
}

/* Generic icon coloring — Bootstrap Icons used inline for bullets,
   stats, contact details, amenities, footer columns and feature lists */
.section-badge i,
.stats-section i,
.hero-stats i,
.service-card i,
.amenity-item i,
.feature-item i,
.feature-icon i,
.about-feature i,
.icon-box i,
.info-item i,
.contact-info i,
.footer-contact i,
.footer .social-links a i,
.scroll-top i,
.hero .swiper-button-prev,
.hero .swiper-button-next,
.stack-loc i,
.mini-loc i,
.mini-specs i,
.stack-specs i,
.quick-specs i,
.loc i,
.section-title h2::after,
.bi.text-accent { color: var(--brand-primary) !important; }

/* Chips and category badges — alternate gold/olive/deep for variety */
.featured-properties .stack-card .stack-media figcaption .chip.exclusive,
.chip.exclusive { background: var(--brand-deep) !important; color: #fff !important; }

.featured-properties .stack-card .stack-media figcaption .chip.hot,
.chip.hot { background: var(--brand-primary) !important; color: #fff !important; }

.featured-properties .stack-card .stack-media figcaption .chip.new,
.chip.new { background: var(--brand-gold) !important; color: #fff !important; }

.featured-properties .mini-list .mini-card .thumb .label.hot { background: var(--brand-primary) !important; }
.featured-properties .mini-list .mini-card .thumb .label.new { background: var(--brand-gold) !important; }
.featured-properties .mini-list .mini-card .thumb .label.featured { background: var(--brand-deep) !important; }

/* Links inside body copy and nav hover */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-deep); }

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover > a { color: var(--brand-deep) !important; }

/* Section title underline */
.section-title h2 { position: relative; }
.section-title h2::after {
  background: var(--brand-primary) !important;
}

/* Form focus rings (booking form, contact form) */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(135, 141, 54, .2) !important;
}

/* Scroll-to-top button */
.scroll-top {
  background: var(--brand-primary) !important;
}
.scroll-top:hover {
  background: var(--brand-deep) !important;
}
.scroll-top i {
  color: #fff !important;
  font-size: 24px;
}

/* ===========================================================
   Image fit overrides
   The new photo set is mostly portrait orientation (2000x3000).
   The template's cards assume landscape webp. Force each image
   slot to a fixed aspect ratio with object-fit:cover so portrait
   shots get a centered crop instead of a thin horizontal strip.
   =========================================================== */

/* Generic: ensure any photo in a card-like wrapper fills it */
.hero .image-stack .main-image img,
.hero .image-stack .secondary-image img,
.home-about .main-image-wrapper > img.main-image,
.home-about .secondary-images .small-image img,
.featured-properties .highlight-card .media img,
.featured-properties .mini-card .thumb img,
.featured-properties .stack-card .stack-media img,
.why-us .image-showcase .main-image-wrapper img.main-image,
.call-to-action .cta-visual .main-image > img,
.recent-blog-posts .post-img img,
.about .visual-section .main-image > img,
.about .visual-section .overlay-image img,
.about .team-member .member-image img,
.property-details .main-image-container img.main-property-image,
.property-details .thumbnail-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Card image wrappers: give each a consistent landscape crop window */
.featured-properties .highlight-card .media,
.featured-properties .mini-card .thumb,
.featured-properties .stack-card .stack-media,
.recent-blog-posts .post-img,
.about .team-member .member-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Hero / large feature slots: a slightly squarer crop reads better */
.hero .image-stack .main-image,
.home-about .main-image-wrapper,
.why-us .image-showcase .main-image-wrapper,
.call-to-action .cta-visual .main-image,
.about .visual-section .main-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero .image-stack .secondary-image,
.home-about .secondary-images .small-image,
.about .visual-section .overlay-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Villa-details: bigger primary photo, square thumbnails */
.property-details .main-image-container {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.property-details .thumbnail-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* ===========================================================
   Mini-card (Areca / Bonsai / Cycas) layout fix
   Template selector: .featured-properties .mini-list .mini-card
   uses display:grid; grid-template-columns: 120px 1fr.
   Widen the thumb column for a richer photo and force the body
   text to wrap inside its column instead of overflowing.
   =========================================================== */
.featured-properties .mini-list .mini-card {
  grid-template-columns: 200px minmax(0, 1fr) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.featured-properties .mini-list .mini-card .thumb {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}

.featured-properties .mini-list .mini-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.featured-properties .mini-list .mini-card .mini-body {
  min-width: 0 !important;
  padding: 14px 16px 14px 0 !important;
  overflow: hidden;
}

.featured-properties .mini-list .mini-card .mini-body h4 {
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 6px 0;
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: normal;
}

.featured-properties .mini-list .mini-card .mini-body h4 a {
  display: inline;
  white-space: normal;
}

.featured-properties .mini-list .mini-card .mini-body .mini-loc,
.featured-properties .mini-list .mini-card .mini-body .mini-specs {
  overflow-wrap: anywhere;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .featured-properties .mini-list .mini-card {
    grid-template-columns: 160px minmax(0, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .featured-properties .mini-list .mini-card {
    grid-template-columns: 1fr !important;
  }
  .featured-properties .mini-list .mini-card .thumb {
    aspect-ratio: 16 / 10;
    height: auto !important;
  }
  .featured-properties .mini-list .mini-card .mini-body {
    padding: 14px 16px 16px !important;
  }
}

/* ===========================================================
   Cottage stack-card — side-by-side layout
   The wide variant fills the full row width but splits the card
   into a left photo and a right body so the image no longer takes
   the entire row. Image gets ~45% of the row, content gets ~55%.
   On tablet/mobile the layout collapses to a stacked column.
   =========================================================== */
.featured-properties .stack-card.stack-card--wide {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.featured-properties .stack-card.stack-card--wide .stack-media {
  position: relative;
  display: block;
  flex: 0 0 45% !important;
  width: 45% !important;
  max-width: 45% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  overflow: hidden;
}

.featured-properties .stack-card.stack-card--wide .stack-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.featured-properties .stack-card.stack-card--wide .stack-media figcaption {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  margin: 0;
}

.featured-properties .stack-card.stack-card--wide .stack-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 32px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .featured-properties .stack-card.stack-card--wide {
    flex-direction: column;
  }
  .featured-properties .stack-card.stack-card--wide .stack-media {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
  .featured-properties .stack-card.stack-card--wide .stack-body {
    padding: 20px !important;
  }
}

/* ===========================================================
   Highlight-card content layout fix
   The .content div is stretched to match the .mini-list height
   (3 stacked cards). Use flex-column so content fills naturally
   and the CTA anchors to the bottom.
   =========================================================== */
.featured-properties .highlight-card .content {
  display: flex;
  flex-direction: column;
}

.featured-properties .highlight-card .content .cta {
  margin-top: auto;
}

/* Villa highlights list — fills the gap between excerpt and CTA */
.highlight-features {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.highlight-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.4;
}

.highlight-features li i {
  color: var(--brand-primary) !important;
  font-size: 15px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .highlight-features {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   Legal content pages (Terms & Conditions, Privacy Policy, etc.)
   Plain prose block styled to match the site's serif/sans body
   copy, with generous spacing so long clause lists stay readable.
   =========================================================== */
.legal-content {
  color: #4a4a4a;
  line-height: 1.8;
}

.legal-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--brand-ink);
  margin: 36px 0 14px;
  font-size: 20px;
}

.legal-content h3:first-of-type {
  margin-top: 10px;
}

.legal-content p {
  margin-bottom: 16px;
}

.legal-content ul {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
}

.legal-content ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
}

.legal-content ul li::before {
  content: "\f273";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--brand-primary);
  font-size: 14px;
}

.legal-content .legal-updated {
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 24px;
}

.legal-content .legal-contact {
  background: #f8f7f2;
  border-left: 3px solid var(--brand-primary);
  padding: 18px 22px;
  border-radius: 6px;
  margin-top: 10px;
}

/* Footer "Terms & Conditions" link — the footer-bottom bar is olive-green,
   so the site-wide brand-olive link color is nearly invisible here. */
.footer-bottom .copyright a {
  color: #fff !important;
  text-decoration: underline;
}

.footer-bottom .copyright a:hover {
  color: var(--brand-gold) !important;
}

/* ===========================================================
   Villa-details sidebar v2
   Rebuilt booking/concierge/enquiry cards. Scoped under
   .villa-sidebar-v2 to bypass the template's teal-blue defaults.
   =========================================================== */
.villa-sidebar-v2 { display: flex; flex-direction: column; gap: 18px; }

.villa-sidebar-v2 .v2-card {
  background: #fff;
  border: 1px solid #ecead9;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 20px rgba(31, 31, 31, 0.04);
}

.villa-sidebar-v2 .v2-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-deep);
  font-weight: 600;
}

/* --- Booking card --- */
.villa-sidebar-v2 .v2-booking-card { padding: 0; overflow: hidden; }

.villa-sidebar-v2 .v2-booking-header {
  padding: 22px 22px 18px;
  background: linear-gradient(135deg, #f5f2e6 0%, #fbf9f0 100%);
  border-bottom: 1px solid #ecead9;
  position: relative;
}
.villa-sidebar-v2 .v2-booking-header::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-gold), var(--brand-primary));
}

.villa-sidebar-v2 .v2-price-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 6px;
}
.villa-sidebar-v2 .v2-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.2;
}
.villa-sidebar-v2 .v2-price-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #6b6b6b;
  line-height: 1.5;
}

.villa-sidebar-v2 .v2-info-list {
  list-style: none;
  margin: 0;
  padding: 18px 22px 4px;
}
.villa-sidebar-v2 .v2-info-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #ecead9;
  font-size: 13.5px;
}
.villa-sidebar-v2 .v2-info-item:last-child { border-bottom: none; }
.villa-sidebar-v2 .v2-info-icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(135, 141, 54, 0.08);
  color: var(--brand-primary);
  font-size: 16px;
}
.villa-sidebar-v2 .v2-info-label { color: #6b6b6b; }
.villa-sidebar-v2 .v2-info-value {
  color: var(--brand-ink);
  font-weight: 600;
  text-align: right;
}

.villa-sidebar-v2 .v2-cta-stack {
  padding: 8px 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

.villa-sidebar-v2 .v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  width: 100%;
}
.villa-sidebar-v2 .v2-btn i { font-size: 16px; }
.villa-sidebar-v2 .v2-btn:hover { transform: translateY(-1px); }

.villa-sidebar-v2 .v2-btn-primary {
  background: var(--brand-primary);
  color: #fff !important;
  border-color: var(--brand-primary);
  box-shadow: 0 6px 16px rgba(135, 141, 54, 0.22);
}
.villa-sidebar-v2 .v2-btn-primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  box-shadow: 0 10px 22px rgba(139, 100, 29, 0.28);
}

.villa-sidebar-v2 .v2-btn-wa {
  background: #25d366;
  color: #fff !important;
  border-color: #25d366;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.22);
}
.villa-sidebar-v2 .v2-btn-wa:hover {
  background: #1ebe57;
  border-color: #1ebe57;
}

.villa-sidebar-v2 .v2-btn-block { width: 100%; }

.villa-sidebar-v2 .v2-trust-row {
  padding: 12px 22px 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: #6b6b6b;
  border-top: 1px solid #f4f1e4;
}
.villa-sidebar-v2 .v2-trust-row i {
  color: var(--brand-primary);
  margin-right: 5px;
}

/* --- Concierge card --- */
.villa-sidebar-v2 .v2-concierge-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.villa-sidebar-v2 .v2-avatar {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #0d0d0d;
  padding: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(235, 174, 55, 0.35);
  flex-shrink: 0;
}
.villa-sidebar-v2 .v2-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.villa-sidebar-v2 .v2-concierge-meta h5 {
  margin: 0 0 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--brand-ink);
}
.villa-sidebar-v2 .v2-role {
  font-size: 12.5px;
  color: #6b6b6b;
  display: block;
  margin-bottom: 5px;
}
.villa-sidebar-v2 .v2-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: #6b6b6b;
}
.villa-sidebar-v2 .v2-rating i {
  color: var(--brand-gold);
  font-size: 12px;
}
.villa-sidebar-v2 .v2-rating span { margin-left: 6px; }

.villa-sidebar-v2 .v2-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.villa-sidebar-v2 .v2-contact-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #ecead9;
  border-radius: 10px;
  text-decoration: none;
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 13px;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.villa-sidebar-v2 .v2-contact-chip i {
  color: var(--brand-primary);
  font-size: 15px;
}
.villa-sidebar-v2 .v2-contact-chip:hover {
  background: rgba(135, 141, 54, 0.06);
  border-color: var(--brand-primary);
  color: var(--brand-deep);
}
.villa-sidebar-v2 .v2-phone-line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #ecead9;
  font-size: 13px;
  color: #6b6b6b;
  text-align: center;
  letter-spacing: .04em;
}

/* --- Enquiry form --- */
.villa-sidebar-v2 .v2-enquiry-head { margin-bottom: 14px; }
.villa-sidebar-v2 .v2-enquiry-head h4 {
  margin: 6px 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--brand-ink);
  font-size: 18px;
}
.villa-sidebar-v2 .v2-enquiry-head p {
  margin: 0;
  font-size: 12.5px;
  color: #6b6b6b;
  line-height: 1.5;
}

.villa-sidebar-v2 .v2-form { display: flex; flex-direction: column; gap: 12px; }
.villa-sidebar-v2 .v2-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.villa-sidebar-v2 .v2-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.villa-sidebar-v2 .v2-field label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b6b6b;
  font-weight: 600;
}
.villa-sidebar-v2 .v2-field input,
.villa-sidebar-v2 .v2-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ecead9;
  border-radius: 10px;
  background: #fbfaf5;
  font-size: 13.5px;
  color: var(--brand-ink);
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
}
.villa-sidebar-v2 .v2-field textarea { resize: vertical; min-height: 80px; }
.villa-sidebar-v2 .v2-field input::placeholder,
.villa-sidebar-v2 .v2-field textarea::placeholder {
  color: #b3ad95;
}
.villa-sidebar-v2 .v2-field input:focus,
.villa-sidebar-v2 .v2-field textarea:focus {
  border-color: var(--brand-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(135, 141, 54, 0.14);
}

.villa-sidebar-v2 .v2-form .v2-btn { margin-top: 4px; }

/* --- Small screens --- */
@media (max-width: 575px) {
  .villa-sidebar-v2 .v2-field-row { grid-template-columns: 1fr; }
  .villa-sidebar-v2 .v2-contact-row { grid-template-columns: 1fr; }
  .villa-sidebar-v2 .v2-trust-row { flex-direction: column; gap: 4px; }
}