/**
 * Custom CSS for Villa Paraiso Vacation Rentals
 * 
 * This file is loaded by style.css
 * Add all custom styles here
 * 
 * Priority order:
 * 1. YOOtheme parent theme styles (lowest)
 * 2. YOOtheme customizer styles (database)
 * 3. This file (highest - overrides everything)
 * 
 * @package YOOtheme Child
 * @version 1.0.0
 */

/* ==========================================================================
   Site-wide Custom Styles
   ========================================================================== */

/* Add your custom CSS below this line */

/* --------------------------------------------------------------------------
   VPVR Announcement Bar
   -------------------------------------------------------------------------- */

/* Styled in /css/vpvr-announcebar.css (versioned enqueue for cache busting). */

/* --------------------------------------------------------------------------
   HOTFIX: Homerunner homepage calendar/search modal positioning
   --------------------------------------------------------------------------
   Symptom: Clicking the homepage calendar/search opens the date modal, but it
   renders inline (page scrolls / looks full-screen broken).

   Cause: Homerunner modal CSS is scoped under `.uk-scope ...` selectors.
   On the homepage search form, the modal isn't inside a `.uk-scope` wrapper,
   so the fixed overlay rules don't apply.

   Fix: When the Homerunner search modal is open (`hk-open`), force it into a
   fixed overlay.
*/

.hfse-form-modal.hk-modal {
  display: none;
}

.hfse-form-modal.hk-modal.hk-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1010;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
}

.hfse-form-modal.hk-modal.hk-open .hk-modal-dialog {
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
}

@media (max-width: 639px) {
  .hfse-form-modal.hk-modal.hk-open {
    padding: 12px;
  }

  .hfse-form-modal.hk-modal.hk-open .hk-modal-dialog {
    max-height: calc(100vh - 24px);
  }
}

/* --------------------------------------------------------------------------
   Media: Stable Video Embed (CLS)
   -------------------------------------------------------------------------- */

/* Property pages include a YouTube iframe with a fixed ID; keep it responsive
   while preserving its aspect ratio to avoid layout shifts on load. */
#youtube-iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

/* --------------------------------------------------------------------------
   VPVR UI Refresh (YOOtheme + UIkit + Homerunner-safe)
   --------------------------------------------------------------------------
   Notes:
   - This layer refreshes UIkit styling from the child theme only.
   - Homerunner plugin remains read-only; selectors are scoped and defensive.
*/

:root {
  --vpvr-ui-ink: #1f3138;
  --vpvr-ui-ink-soft: #5a6f76;
  --vpvr-ui-brand: #2e7e87;
  --vpvr-ui-brand-strong: #2e6e7a;
  --vpvr-ui-brand-deep: #1d4f59;
  --vpvr-ui-accent: #eee5c7;
  --vpvr-ui-panel: #ffffff;
  --vpvr-ui-surface: #f8f6f2;
  --vpvr-ui-border: rgba(29, 79, 89, 0.16);
  --vpvr-ui-shadow-sm: 0 8px 24px rgba(17, 47, 56, 0.05);
  --vpvr-ui-shadow-lg: 0 18px 42px rgba(16, 42, 50, 0.07);
  --vpvr-ui-radius-sm: 10px;
  --vpvr-ui-radius-md: 12px;
  --vpvr-ui-radius-lg: 16px;
  --vpvr-ui-warm: #D7B38D;
  --vpvr-ui-warm-light: #F5ECD7;
  --vpvr-ui-warm-glow: 0 10px 22px rgba(215, 179, 141, 0.14);
  --vpvr-ui-focus: 0 0 0 3px rgba(46, 110, 122, 0.28);
  --vpvr-ui-pill-shadow: 0 8px 20px rgba(29, 79, 89, 0.10);
  --vpvr-ui-space-section-tablet: 48px;
  --vpvr-ui-space-section-mobile: 34px;
  --vpvr-type-h1-mobile-min: 1.9rem;
  --vpvr-type-h1-mobile-fluid: 8vw;
  --vpvr-type-h1-mobile-max: 2.15rem;
  --vpvr-type-h2-mobile-min: 1.28rem;
  --vpvr-type-h2-mobile-fluid: 5.7vw;
  --vpvr-type-h2-mobile-max: 1.52rem;
  --vpvr-type-h3-mobile-min: 1.08rem;
  --vpvr-type-h3-mobile-fluid: 4.5vw;
  --vpvr-type-h3-mobile-max: 1.22rem;
}

body {
  color: var(--vpvr-ui-ink);
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  background:
    radial-gradient(circle at 10% -12%, rgba(72, 161, 170, 0.11), rgba(72, 161, 170, 0) 36%),
    radial-gradient(circle at 96% 4%, rgba(238, 229, 199, 0.28), rgba(238, 229, 199, 0) 34%),
    var(--vpvr-ui-surface);
}

h1,
h2,
h3,
h4,
h5,
h6,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6 {
  color: #0f2f38;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Breathing room below headings in main content */
#tm-main h1, #tm-main h2, #tm-main h3,
#tm-main .uk-h1, #tm-main .uk-h2, #tm-main .uk-h3 {
  margin-bottom: max(0.3em, 8px);
}

#tm-main p,
#tm-main li,
#tm-main .uk-text-meta {
  color: var(--vpvr-ui-ink-soft);
}

#tm-main a:not(.uk-button):not([class*="uk-button-"]):not(.vpvr-direct-modal__cta) {
  color: var(--vpvr-ui-brand-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

#tm-main a:not(.uk-button):not([class*="uk-button-"]):not(.vpvr-direct-modal__cta):hover {
  color: var(--vpvr-ui-brand);
}

#tm-main a.uk-link:not(.uk-button):not([class*="uk-button-"]):not(.vpvr-direct-modal__cta) {
  color: var(--vpvr-ui-brand-strong);
}

#tm-main a.uk-link:not(.uk-button):not([class*="uk-button-"]):not(.vpvr-direct-modal__cta):hover,
#tm-main a.uk-link:not(.uk-button):not([class*="uk-button-"]):not(.vpvr-direct-modal__cta):focus-visible {
  color: var(--vpvr-ui-brand-deep);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-radius: 8px;
  box-shadow: var(--vpvr-ui-focus);
  outline: none;
}

/* Footer-on-brand context: keep copy legible on dark/teal surfaces. */
[id^="footer#"] {
  color: #eff5f4;
  font-weight: 400;
}

[id^="footer#"] h1,
[id^="footer#"] h2,
[id^="footer#"] h3,
[id^="footer#"] h4,
[id^="footer#"] h5,
[id^="footer#"] h6,
[id^="footer#"] .uk-h1,
[id^="footer#"] .uk-h2,
[id^="footer#"] .uk-h3,
[id^="footer#"] .uk-h4,
[id^="footer#"] .uk-h5,
[id^="footer#"] .uk-h6 {
  color: var(--vpvr-ui-accent);
}

[id^="footer#"] p,
[id^="footer#"] li,
[id^="footer#"] .uk-text-meta,
[id^="footer#"] .uk-panel,
[id^="footer#"] .uk-panel > p {
  color: rgba(239, 245, 244, 0.84);
}

[id^="footer#"] a {
  color: #eff5f4;
}

[id^="footer#"] a:hover {
  color: var(--vpvr-ui-accent);
}

[id^="footer#"] .uk-input,
[id^="footer#"] .uk-select,
[id^="footer#"] .uk-textarea,
[id^="footer#"] input[type="text"],
[id^="footer#"] input[type="email"],
[id^="footer#"] input[type="tel"],
[id^="footer#"] input[type="search"],
[id^="footer#"] textarea,
[id^="footer#"] select {
  background: transparent;
  border-color: rgba(239, 245, 244, 0.72);
  color: #eff5f4;
}

[id^="footer#"] .uk-input::placeholder,
[id^="footer#"] .uk-textarea::placeholder,
[id^="footer#"] input::placeholder,
[id^="footer#"] textarea::placeholder {
  color: rgba(239, 245, 244, 0.62);
}

/* UIkit + Homerunner card surfaces */
.uk-card,
.hk-card,
.uk-tile-default,
.uk-panel-box {
  border: 1px solid rgba(29, 79, 89, 0.08);
  border-radius: var(--vpvr-ui-radius-md);
  box-shadow: var(--vpvr-ui-shadow-sm);
}

.uk-card-default,
.hk-card-default {
  background: var(--vpvr-ui-panel);
}

/* Restore visible borders inside modals — ghost borders cause white-on-white */
.uk-modal .uk-card,
.uk-modal .hk-card {
  border: 1px solid var(--vpvr-ui-border);
}

/* Reviews modal: the reviews widget has id="footer#2" from Builder, which
   inherits light-on-dark footer colors. Reset to dark text inside modals. */
.uk-modal [id^="footer#"] {
  color: var(--vpvr-ui-ink);
}

.uk-modal [id^="footer#"] h1,
.uk-modal [id^="footer#"] h2,
.uk-modal [id^="footer#"] h3,
.uk-modal [id^="footer#"] h4,
.uk-modal [id^="footer#"] h5,
.uk-modal [id^="footer#"] h6,
.uk-modal [id^="footer#"] .uk-h1,
.uk-modal [id^="footer#"] .uk-h2,
.uk-modal [id^="footer#"] .uk-h3 {
  color: #0f2f38;
}

.uk-modal [id^="footer#"] p,
.uk-modal [id^="footer#"] li,
.uk-modal [id^="footer#"] .uk-text-meta,
.uk-modal [id^="footer#"] .uk-panel,
.uk-modal [id^="footer#"] .uk-panel > p {
  color: var(--vpvr-ui-ink-soft);
}

.uk-modal [id^="footer#"] a {
  color: var(--vpvr-ui-brand);
}

.uk-modal [id^="footer#"] a:hover {
  color: var(--vpvr-ui-brand-strong);
}

.uk-card-hover:hover,
.uk-card.uk-transition-toggle:hover,
.hk-card-hover:hover {
  box-shadow: var(--vpvr-ui-shadow-lg);
  transform: translateY(-2px);
}

/* Image zoom on card hover */
.uk-card-hover,
.uk-card.uk-transition-toggle,
.hk-card-hover {
  overflow: hidden;
}

.uk-card-hover .uk-card-media-top,
.uk-card.uk-transition-toggle .uk-card-media-top,
.hk-card-hover .hk-card-media-top {
  overflow: hidden;
}

.uk-card-hover .uk-card-media-top img,
.uk-card.uk-transition-toggle .uk-card-media-top img,
.hk-card-hover .hk-card-media-top img {
  transition: transform 320ms ease;
}

.uk-card-hover:hover .uk-card-media-top img,
.uk-card.uk-transition-toggle:hover .uk-card-media-top img,
.hk-card-hover:hover .hk-card-media-top img {
  transform: scale(1.03);
}

.uk-card,
.hk-card,
.uk-button,
.uk-input,
.uk-select,
.uk-textarea {
  transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* UIkit buttons */
.uk-button {
  border-radius: 10px;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: none;
}

.uk-button-primary {
  background: linear-gradient(135deg, var(--vpvr-ui-brand), #11a2ae);
  border: 1px solid rgba(8, 81, 88, 0.3);
  box-shadow: 0 12px 28px rgba(13, 134, 145, 0.28);
  color: #ffffff;
}

.uk-button-primary:hover {
  background: linear-gradient(135deg, #0a7480, #0d8e99);
  box-shadow: 0 16px 34px rgba(10, 105, 113, 0.36);
  color: #ffffff;
}

.uk-button-secondary,
.uk-button-default {
  background: #ffffff;
  border: 1px solid rgba(29, 79, 89, 0.12);
  color: var(--vpvr-ui-brand-strong);
}

.uk-button-secondary:hover,
.uk-button-default:hover {
  border-color: rgba(10, 105, 113, 0.35);
  color: var(--vpvr-ui-brand);
}

/* Keep button-like anchors from inheriting generic link underlines/styles. */
#tm-main a.uk-button,
#tm-main a[class*="uk-button-"],
#tm-main a.vpvr-direct-modal__cta {
  text-decoration: none !important;
}

/* Guard against broad link rules bleeding navy text into CTA buttons. */
#tm-main a.uk-button-primary,
#tm-main a.uk-button-primary:visited,
#tm-main a[class*="uk-button-primary"],
#tm-main a[class*="uk-button-primary"]:visited,
#tm-main .vpvr-direct-modal__cta,
#tm-main .vpvr-direct-modal__cta:visited,
#tm-main .vpvr-direct-modal__cta:hover,
#tm-main .vpvr-direct-modal__cta:focus-visible {
  color: #ffffff !important;
  text-decoration: none;
}

#tm-main a.uk-button-secondary,
#tm-main a.uk-button-secondary:visited,
#tm-main a.uk-button-default,
#tm-main a.uk-button-default:visited {
  color: var(--vpvr-ui-brand-strong) !important;
}

/* Accessibility contrast corrections for mobile Lighthouse findings. */
#tm-main .uk-section-secondary .el-item > .uk-flex-middle > .uk-width-expand > .el-title,
#tm-main .uk-section-secondary .el-item > .uk-flex-middle > .uk-width-expand > .el-content,
#tm-main .uk-section-secondary .el-item > .uk-grid-column-small > .uk-width-expand > .el-title {
  color: #0b2530 !important;
}

#tm-main .uk-section-secondary .el-item a.uk-link:not(.uk-button):not([class*="uk-button-"]):not(.vpvr-direct-modal__cta):not([href*="#heres-why"]) {
  color: #0b2530 !important;
  text-decoration: underline;
}

/* Inputs and selects */
#tm-main .uk-input,
#tm-main .uk-select,
#tm-main .uk-textarea,
#tm-main input[type="text"],
#tm-main input[type="email"],
#tm-main input[type="tel"],
#tm-main input[type="search"],
#tm-main input[type="number"],
#tm-main input[type="date"],
#tm-main textarea,
#tm-main select {
  background: #ffffff;
  border: 1px solid var(--vpvr-ui-border);
  border-radius: var(--vpvr-ui-radius-sm);
  color: var(--vpvr-ui-ink);
}

#tm-main .uk-input:focus,
#tm-main .uk-select:focus,
#tm-main .uk-textarea:focus,
#tm-main input:focus,
#tm-main textarea:focus,
#tm-main select:focus {
  border-color: rgba(46, 110, 122, 0.55);
}

/* Header/nav polish */
.tm-header .uk-navbar-container,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(16, 56, 67, 0.1);
  box-shadow: 0 8px 24px rgba(12, 48, 56, 0.06);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.uk-navbar-nav > li > a {
  color: #173a43;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a {
  color: var(--vpvr-ui-brand);
}

/* Keep search modal fix, but give it elevated styling */
.hfse-form-modal.hk-modal.hk-open {
  background: rgba(8, 89, 99, 0.46);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  backdrop-filter: blur(4px) saturate(115%);
}

.hfse-form-modal.hk-modal.hk-open .hk-modal-dialog {
  background: #ffffff;
  border: 1px solid rgba(10, 72, 80, 0.2);
  border-radius: var(--vpvr-ui-radius-lg);
  box-shadow: var(--vpvr-ui-shadow-lg);
}

/* Homerunner form and listing polish (read-only plugin, CSS-only enhancements) */
[class*="hfse"] .uk-input,
[class*="hfse"] .uk-select,
[class*="hfse"] input,
[class*="hfse"] select,
[class*="hfse"] textarea {
  border-radius: var(--vpvr-ui-radius-sm);
}

[class*="hfse"] .uk-button-primary,
[class*="hfse"] button[type="submit"],
[class*="homerunner"] .uk-button-primary,
[class*="homerunner"] button[type="submit"] {
  border-radius: 999px;
  font-weight: 700;
}

[class*="homerunner"] .uk-card,
[class*="hfse"] .uk-card,
#vpvr-recommended-properties .uk-card {
  border: 1px solid rgba(29, 79, 89, 0.08);
  border-radius: var(--vpvr-ui-radius-md);
  box-shadow: var(--vpvr-ui-shadow-sm);
  overflow: hidden;
}

[class*="homerunner"] .uk-card .el-title,
[class*="hfse"] .uk-card .el-title,
#vpvr-recommended-properties .el-title {
  color: #0f3038;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.2;
}

[class*="homerunner"] .fs-grid-text,
[class*="hfse"] .fs-grid-text,
#vpvr-recommended-properties .fs-grid-text {
  color: var(--vpvr-ui-ink-soft);
  font-size: 0.92rem;
}

[class*="homerunner"] .fs-grid-divider,
[class*="hfse"] .fs-grid-divider,
#vpvr-recommended-properties .fs-grid-divider {
  border-color: rgba(16, 56, 67, 0.12);
}

/* Property description panels: ensure body-text sizing on raw text nodes
   (Builder outputs long descriptions as plain text in .el-content.uk-panel
   with white-space:pre-wrap — no <p> wrapper, so #tm-main p won't catch them) */
#tm-main .el-content.uk-panel {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: max(1rem, 16px);
  font-weight: 400;
  line-height: 1.65;
}

/* Recommended properties fallback section from custom.js */
#vpvr-recommended-properties {
  margin-top: 18px;
}

#vpvr-recommended-properties .fs-load-more-container > div {
  display: flex;
}

#vpvr-recommended-properties .fs-grid-item-holder {
  width: 100%;
}

#vpvr-recommended-properties .uk-inline-clip {
  border-radius: calc(var(--vpvr-ui-radius-md) - 3px) calc(var(--vpvr-ui-radius-md) - 3px) 0 0;
}

#vpvr-recommended-properties .uk-icon svg path,
#vpvr-recommended-properties .uk-icon svg circle {
  stroke: var(--vpvr-ui-brand);
}

#vpvr-recommended-properties .fs-grid-image {
  border-radius: 999px;
  background: rgba(13, 134, 145, 0.1);
  padding: 2px;
}

/* No-results / empty-state emphasis when Homerunner returns empty search */
.hfse-no-results,
.hfse-no-result,
[class*="homerunner"] .hk-alert,
[class*="hfse"] .hk-alert {
  background: linear-gradient(180deg, rgba(13, 134, 145, 0.08), rgba(13, 134, 145, 0.02));
  border: 1px solid rgba(13, 134, 145, 0.22);
  border-radius: var(--vpvr-ui-radius-md);
  color: #0b5560;
}

/* --------------------------------------------------------------------------
   Cohesion pass: spacing rhythm + Homerunner explorer/no-results UX
   -------------------------------------------------------------------------- */

#hr-explorer-1 .hfse-form-submit-btn,
#hr-explorer-1 .hfse-form-additional-filters-btn,
#hr-explorer-1 .hfse-form-reset-btn,
#hr-explorer-1 .hfse-form-map-toggle-btn {
  border: 1px solid rgba(10, 105, 113, 0.22);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 40px;
}

#hr-explorer-1 .hfse-form-submit-btn {
  background: linear-gradient(135deg, var(--vpvr-ui-brand), #11a2ae);
  box-shadow: var(--vpvr-ui-pill-shadow);
  color: #fff;
}

#hr-explorer-1 .hfse-form-additional-filters-btn,
#hr-explorer-1 .hfse-form-map-toggle-btn {
  background: #fff;
  color: var(--vpvr-ui-brand-strong);
}

#hr-explorer-1 .hfse-form-reset-btn {
  background: rgba(13, 134, 145, 0.08);
  color: #0b616a;
}

#hr-explorer-1 .hfse-properties-no-items {
  background: linear-gradient(180deg, rgba(13, 134, 145, 0.1), rgba(13, 134, 145, 0.03));
  border: 1px solid rgba(13, 134, 145, 0.25);
  border-radius: var(--vpvr-ui-radius-md);
  padding: clamp(16px, 2.8vw, 26px);
}

#hr-explorer-1 .hfse-properties-no-items .uk-margin.uk-grid {
  margin-top: 14px;
  row-gap: 10px;
}

#hr-explorer-1 .hfse-properties-no-items + .hfse-properties {
  margin-top: 14px;
}

#hr-explorer-1 .hfse-properties-no-items + .hfse-properties .hfse-property-card {
  border-radius: var(--vpvr-ui-radius-md);
  overflow: hidden;
}

#hr-explorer-1 .hfse-properties-no-items + .hfse-properties .hfse-property-card .hk-card-body {
  padding: 14px 14px 12px;
}

#hr-explorer-1 .hfse-properties-no-items + .hfse-properties h3 {
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Homepage: "Save 15%+" strip + #heres-why modal redesign
   -------------------------------------------------------------------------- */
#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p {
  align-items: center;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.95) 0%, rgba(239, 250, 251, 0.96) 55%, rgba(227, 245, 247, 0.97) 100%);
  border: 1px solid rgba(13, 134, 145, 0.32);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(8, 66, 76, 0.13);
  color: #143a43;
  display: flex;
  flex-wrap: wrap;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  letter-spacing: 0.012em;
  line-height: 1.4;
  margin: 0 auto;
  max-width: fit-content;
  padding: 0.72rem 1.2rem;
  position: relative;
  z-index: 2;
}

#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p .el-image.uk-icon {
  align-items: center;
  background: linear-gradient(145deg, var(--vpvr-ui-brand), var(--vpvr-ui-brand-strong));
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(8, 69, 78, 0.28);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  min-width: 28px;
  width: 28px;
}

#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p .el-image.uk-icon svg {
  height: 15px;
  width: 15px;
}

#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p .el-image.uk-icon svg path {
  stroke: #ffffff;
  stroke-width: 1.8px;
}

#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"],
#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"]:visited {
  background: linear-gradient(135deg, var(--vpvr-ui-brand), var(--vpvr-ui-brand-strong));
  border: 1px solid rgba(7, 62, 70, 0.5);
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(9, 72, 80, 0.24);
  color: #ffffff !important;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-left: 0.15rem;
  padding: 0.58rem 0.92rem;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: transform 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
}

#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"]:hover,
#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"]:focus-visible,
#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"]:visited:hover,
#tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"]:visited:focus-visible {
  background: linear-gradient(135deg, var(--vpvr-ui-brand-strong), var(--vpvr-ui-brand-deep));
  box-shadow: 0 13px 28px rgba(6, 58, 66, 0.3);
  color: #ffffff !important;
  transform: translateY(-1px);
}

#heres-why.uk-open {
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  background: rgba(7, 80, 89, 0.58) !important;
}

#heres-why .el-modal-dialog {
  background:
    radial-gradient(circle at 8% 0%, rgba(13, 134, 145, 0.12), rgba(13, 134, 145, 0) 42%),
    radial-gradient(circle at 95% 7%, rgba(214, 160, 82, 0.14), rgba(214, 160, 82, 0) 40%),
    #ffffff;
  border: 1px solid rgba(9, 72, 80, 0.22);
  border-radius: 24px;
  box-shadow: 0 34px 66px rgba(5, 39, 45, 0.36);
  overflow: hidden;
  width: min(980px, calc(100% - 1.6rem));
}

#heres-why .el-modal-body {
  padding: clamp(1.1rem, 2.2vw, 2rem);
}

#heres-why .uk-modal-close-default {
  align-items: center;
  background: rgba(246, 251, 252, 0.96);
  border: 1px solid rgba(10, 94, 103, 0.25);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(12, 62, 72, 0.16);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  right: 14px;
  top: 14px;
  width: 38px;
}

#heres-why .uk-modal-close-default:hover {
  background: #ffffff;
  box-shadow: 0 12px 22px rgba(10, 61, 71, 0.22);
}

#heres-why .uk-modal-close-default svg line {
  stroke: #0b6670;
}

#heres-why .vpvr-direct-modal {
  color: #14373f;
  display: grid;
  gap: clamp(0.88rem, 1.7vw, 1.2rem);
}

#heres-why .vpvr-direct-modal__header {
  align-items: center;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  text-align: center;
}

#heres-why .vpvr-direct-modal__eyebrow {
  background: rgba(13, 134, 145, 0.11);
  border: 1px solid rgba(13, 134, 145, 0.24);
  border-radius: 999px;
  color: #0b6670;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  padding: 0.43rem 0.74rem;
  text-transform: uppercase;
}

#heres-why .vpvr-direct-modal__title {
  color: #102f36;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.72rem, 3.35vw, 2.55rem);
  font-weight: 500;
  letter-spacing: 0.008em;
  line-height: 1.1;
  margin: 0;
}

#heres-why .vpvr-direct-modal__intro {
  color: #284e57;
  font-size: clamp(0.96rem, 1.45vw, 1.06rem);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}

#heres-why .vpvr-direct-modal__intro strong {
  color: #123d46;
}

#heres-why .vpvr-direct-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

#heres-why .vpvr-direct-modal__chips span {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(13, 134, 145, 0.2);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(10, 87, 96, 0.1);
  color: #0d5f69;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1;
  padding: 0.44rem 0.62rem;
  text-transform: uppercase;
}

#heres-why .vpvr-direct-modal__compare {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#heres-why .vpvr-direct-modal__card {
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(9, 60, 68, 0.16);
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1rem 1.04rem;
}

#heres-why .vpvr-direct-modal__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

#heres-why .vpvr-direct-modal__value {
  font-size: clamp(1.52rem, 3.3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.008em;
  line-height: 1.05;
  margin: 0;
}

#heres-why .vpvr-direct-modal__text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

#heres-why .vpvr-direct-modal__card--ota {
  background: linear-gradient(150deg, var(--vpvr-ui-brand), var(--vpvr-ui-brand-strong));
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

#heres-why .vpvr-direct-modal__card--ota .vpvr-direct-modal__label,
#heres-why .vpvr-direct-modal__card--ota .vpvr-direct-modal__value,
#heres-why .vpvr-direct-modal__card--ota .vpvr-direct-modal__text {
  color: #ffffff;
}

#heres-why .vpvr-direct-modal__card--direct {
  background: linear-gradient(150deg, #fef7ec, #f5e5cd);
  border: 1px solid rgba(157, 108, 35, 0.25);
  color: #5e3d10;
}

#heres-why .vpvr-direct-modal__card--direct .vpvr-direct-modal__label {
  color: #7a4f16;
}

#heres-why .vpvr-direct-modal__card--direct .vpvr-direct-modal__value {
  color: #9b6210;
}

#heres-why .vpvr-direct-modal__card--direct .vpvr-direct-modal__text {
  color: #5a3b0f;
}

#heres-why .vpvr-direct-modal__details {
  background: linear-gradient(180deg, rgba(246, 252, 252, 0.98), rgba(240, 249, 250, 0.96));
  border: 1px solid rgba(13, 134, 145, 0.17);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  padding: 0.95rem 1rem;
}

#heres-why .vpvr-direct-modal__details-title {
  color: #123b44;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.008em;
  line-height: 1.35;
  margin: 0 0 0.55rem;
}

#heres-why .vpvr-direct-modal__list {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#heres-why .vpvr-direct-modal__list li {
  color: #2b5560;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 1.35rem;
  position: relative;
}

#heres-why .vpvr-direct-modal__list li::before {
  color: var(--vpvr-ui-brand);
  content: "✓";
  font-weight: 700;
  left: 0;
  position: absolute;
  top: 0;
}

#heres-why .vpvr-direct-modal__disclaimer {
  color: #527178;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0.62rem 0 0;
}

#heres-why .vpvr-direct-modal__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  justify-content: space-between;
}

#heres-why .vpvr-direct-modal__footer-copy {
  color: #1f4851;
  flex: 1 1 270px;
  font-size: 0.94rem;
  line-height: 1.45;
  margin: 0;
}

#heres-why .vpvr-direct-modal__footer-copy strong {
  color: #0b6670;
}

#heres-why a.vpvr-direct-modal__cta,
#heres-why a.vpvr-direct-modal__cta:visited {
  align-items: center;
  background: linear-gradient(135deg, var(--vpvr-ui-brand), var(--vpvr-ui-brand-strong));
  border: 1px solid rgba(7, 62, 70, 0.5);
  border-radius: 999px;
  box-shadow: 0 11px 22px rgba(9, 72, 80, 0.24);
  color: #ffffff !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  min-height: 42px;
  padding: 0.82rem 1rem;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: transform 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
}

#heres-why a.vpvr-direct-modal__cta:hover,
#heres-why a.vpvr-direct-modal__cta:focus-visible,
#heres-why a.vpvr-direct-modal__cta:visited:hover,
#heres-why a.vpvr-direct-modal__cta:visited:focus-visible {
  background: linear-gradient(135deg, var(--vpvr-ui-brand-strong), var(--vpvr-ui-brand-deep));
  box-shadow: 0 14px 28px rgba(6, 58, 66, 0.28);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Final guard against broad link color overrides on teal surfaces. */
#tm-main .uk-button-primary,
#tm-main .uk-button-primary * {
  color: #ffffff !important;
}

#heres-why .vpvr-direct-modal__card--ota,
#heres-why .vpvr-direct-modal__card--ota a,
#heres-why .vpvr-direct-modal__card--ota a:visited {
  color: #ffffff !important;
}

@media (max-width: 959px) {
  main#tm-main .uk-section.uk-section-large {
    padding-bottom: var(--vpvr-ui-space-section-tablet);
    padding-top: var(--vpvr-ui-space-section-tablet);
  }

  main#tm-main .uk-section.uk-section-xlarge {
    padding-bottom: calc(var(--vpvr-ui-space-section-tablet) + 14px);
    padding-top: calc(var(--vpvr-ui-space-section-tablet) + 14px);
  }

  #tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p {
    border-radius: 20px;
    gap: 0.42rem;
    padding: 0.7rem 0.9rem;
  }

  #tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"] {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
  }

  #heres-why .el-modal-dialog {
    border-radius: 20px;
    width: min(900px, calc(100% - 1.25rem));
  }

  #heres-why .el-modal-body {
    padding: 1rem;
  }

  #heres-why .uk-modal-close-default {
    height: 34px;
    top: 10px;
    width: 34px;
  }

  #heres-why .vpvr-direct-modal__compare {
    grid-template-columns: 1fr;
  }

  #heres-why .vpvr-direct-modal {
    gap: 0.84rem;
  }

  #heres-why .vpvr-direct-modal__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.58rem;
  }

  #heres-why .vpvr-direct-modal__cta {
    justify-content: center;
    width: 100%;
  }

  #heres-why .vpvr-direct-modal__chips span {
    font-size: 0.66rem;
    padding: 0.4rem 0.58rem;
  }

  .uk-card,
  .hk-card,
  .uk-tile-default,
  [class*="homerunner"] .uk-card,
  [class*="homerunner"] .hk-card,
  [class*="hfse"] .uk-card,
  [class*="hfse"] .hk-card {
    border-radius: 10px;
  }

  .uk-navbar-nav > li > a {
    letter-spacing: 0.01em;
  }
}

@media (max-width: 767px) {
  main#tm-main .uk-section.vpvr-section-compact {
    padding-bottom: var(--vpvr-ui-space-section-mobile) !important;
    padding-top: var(--vpvr-ui-space-section-mobile) !important;
  }

  /* Footer mobile fix:
     YOOtheme footer grids can retain 3 equal columns on narrow screens.
     Force any footer section grid to stack into single-column rows. */
  [id^="footer#"] .uk-grid.uk-child-width-1-3 {
    margin-left: 0;
  }

  [id^="footer#"] .uk-grid.uk-child-width-1-3 > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    width: 100% !important;
  }

  [id^="footer#"] .uk-grid.tm-grid-expand.uk-grid-stack {
    row-gap: 20px;
  }

  #hr-explorer-1 .hfse-map-container {
    border: 1px solid var(--vpvr-ui-border);
    border-radius: 14px;
    max-height: 300px;
    overflow: hidden;
  }

  #hr-explorer-1 .hfse-map-container iframe {
    min-height: 300px;
  }

  #hr-explorer-1 .hfse-form-secondary-fields {
    row-gap: 10px;
  }

  #hr-explorer-1 .hfse-form .hfse-form-secondary-fields-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #hr-explorer-1 .hfse-form .hfse-form-secondary-fields-right > * {
    flex: 1 1 auto;
  }

  #hr-explorer-1 .hfse-properties-no-items + .hfse-properties .property-item.hfse-property-container {
    margin-top: 0;
  }
}

@media (max-width: 639px) {
  body {
    background:
      radial-gradient(circle at 20% -5%, rgba(13, 134, 145, 0.1), rgba(13, 134, 145, 0) 38%),
      var(--vpvr-ui-surface);
  }

  #tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p {
    border-radius: 16px;
    display: grid;
    font-size: 0.9rem;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    line-height: 1.36;
    padding: 0.68rem 0.78rem;
    row-gap: 0.34rem;
    text-align: center;
  }

  #tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p .el-image.uk-icon {
    flex: none;
    height: 28px;
    margin: 0;
    min-width: 28px;
    width: 28px;
  }

  #tm-main .uk-section-small.uk-padding-remove-bottom .uk-container-small .el-content > p a[href*="#heres-why"] {
    margin: 0.12rem 0 0;
  }

  #heres-why .el-modal-dialog {
    border-radius: 16px;
    width: calc(100% - 1.2rem);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 1.2rem);
  }

  #heres-why .el-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.7rem;
  }

  #heres-why .uk-modal-close-default {
    height: 30px;
    right: 8px;
    top: 8px;
    width: 30px;
  }

  #heres-why .vpvr-direct-modal__title {
    font-size: clamp(1.2rem, 5.9vw, 1.54rem);
    font-weight: 500;
    line-height: 1.08;
  }

  #heres-why .vpvr-direct-modal__intro {
    font-size: 0.8rem;
    line-height: 1.36;
  }

  #heres-why .vpvr-direct-modal {
    gap: 0.68rem;
  }

  #heres-why .vpvr-direct-modal__header {
    gap: 0.36rem;
  }

  #heres-why .vpvr-direct-modal__compare {
    gap: 0.56rem;
  }

  #heres-why .vpvr-direct-modal__card,
  #heres-why .vpvr-direct-modal__details {
    border-radius: 14px;
  }

  #heres-why .vpvr-direct-modal__card {
    padding: 0.66rem 0.66rem 0.68rem;
  }

  #heres-why .vpvr-direct-modal__label {
    font-size: 0.63rem;
  }

  #heres-why .vpvr-direct-modal__value {
    font-size: 1.42rem;
  }

  #heres-why .vpvr-direct-modal__text {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  #heres-why .vpvr-direct-modal__details {
    padding: 0.62rem 0.66rem;
  }

  #heres-why .vpvr-direct-modal__details-title {
    font-size: 0.84rem;
    margin-bottom: 0.34rem;
  }

  #heres-why .vpvr-direct-modal__list {
    gap: 0.28rem;
  }

  #heres-why .vpvr-direct-modal__list li {
    font-size: 0.76rem;
    line-height: 1.32;
    padding-left: 1.04rem;
  }

  #heres-why .vpvr-direct-modal__disclaimer {
    font-size: 0.66rem;
    line-height: 1.2;
    margin-top: 0.34rem;
  }

  #heres-why .vpvr-direct-modal__footer {
    align-items: center;
    gap: 0.34rem;
  }

  #heres-why .vpvr-direct-modal__footer-copy {
    display: none;
  }

  #heres-why .vpvr-direct-modal__cta {
    margin: 0 auto;
    font-size: 0.62rem;
    min-height: 34px;
    padding: 0.56rem 0.74rem;
    width: auto;
  }

  #heres-why .vpvr-direct-modal__chips {
    display: none;
  }

  #heres-why .vpvr-direct-modal__chips span {
    font-size: 0.57rem;
    letter-spacing: 0.04em;
    padding: 0.34rem 0.46rem;
  }

  .hfse-form-modal.hk-modal.hk-open .hk-modal-dialog {
    border-radius: 14px;
  }

  .uk-button,
  [class*="hfse"] button[type="submit"] {
    min-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Mobile typography/spacing guardrail
   --------------------------------------------------------------------------
   Purpose:
   - Keep mobile visual scale closer to historical VPVR proportions.
   - Prevent oversized heading rhythm and large 70px section paddings.
   - Desktop/tablet sizing remains unchanged.
*/
@media (max-width: 767px) {
  /* Rein in large/xlarge section padding on phones. */
  main#tm-main .uk-section.uk-section-large {
    padding-bottom: 40px !important;
    padding-top: 40px !important;
  }

  main#tm-main .uk-section.uk-section-xlarge {
    padding-bottom: 48px !important;
    padding-top: 48px !important;
  }

  /* Reduce headline scale so hero/content blocks don't feel oversized. */
  #tm-main h1,
  #tm-main .uk-h1 {
    font-size: clamp(var(--vpvr-type-h1-mobile-min), var(--vpvr-type-h1-mobile-fluid), var(--vpvr-type-h1-mobile-max)) !important;
    line-height: 1.15 !important;
  }

  #tm-main h2,
  #tm-main .uk-h2 {
    font-size: clamp(var(--vpvr-type-h2-mobile-min), var(--vpvr-type-h2-mobile-fluid), var(--vpvr-type-h2-mobile-max)) !important;
    line-height: 1.24 !important;
  }

  #tm-main h3,
  #tm-main .uk-h3 {
    font-size: clamp(var(--vpvr-type-h3-mobile-min), var(--vpvr-type-h3-mobile-fluid), var(--vpvr-type-h3-mobile-max)) !important;
    line-height: 1.32 !important;
  }

  /* Mobile body text floor: never below 15px */
  #tm-main p,
  #tm-main li {
    font-size: max(0.94rem, 15px);
  }
}

/* --------------------------------------------------------------------------
   VPVR UI Refresh v2 — Property Card Grid, Desktop Spacing, Typography,
   Trust Badge, Mobile Sticky CTA
   -------------------------------------------------------------------------- */

/* --- 2. Property Card Grid Layout ---
   Homerunner explorer has two modes:
   - map-visible: body ~660px → 2 cols max
   - map hidden:  body ~1200px → up to 3 cols
   We use CSS Grid for clean alignment while respecting both states. */
#hr-explorer-1 .hfse-properties {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  #hr-explorer-1 .hfse-properties {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 cols only when map is hidden and viewport is wide enough */
@media (min-width: 960px) {
  #hr-explorer-1:not(.map-visible) .hfse-properties {
    grid-template-columns: repeat(3, 1fr);
  }
}

#hr-explorer-1 .hfse-properties .hfse-property-container {
  width: 100%;
  margin: 0;
  float: none;
}

#hr-explorer-1 .hfse-properties .hfse-property-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--vpvr-ui-radius-md);
  overflow: hidden;
}

#hr-explorer-1 .hfse-properties .hfse-property-card img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* --- 4. Desktop Section Spacing --- */
@media (min-width: 960px) {
  main#tm-main .uk-section.uk-section-large {
    padding: 60px 0;
  }

  main#tm-main .uk-section.uk-section-xlarge {
    padding: 80px 0;
  }
}

/* --- 6. Typography Density --- */
#tm-main p,
#tm-main li {
  font-size: max(1rem, 16px);
  line-height: 1.65;
}

#hr-explorer-1 .hfse-property-card h3,
#hr-explorer-1 .hfse-property-card .hk-card-title {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

#hr-explorer-1 .hfse-property-card .hk-card-body {
  min-height: 80px;
}

/* --- 7. "Book Direct & Save" Trust Badge (Properties page) --- */
.vpvr-direct-badge {
  align-items: center;
  background: linear-gradient(135deg, var(--vpvr-ui-warm-light), #faf3e2);
  border: 1px solid rgba(215, 179, 141, 0.32);
  border-radius: 999px;
  box-shadow: var(--vpvr-ui-warm-glow);
  color: #5e3d10;
  display: inline-flex;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: 0.012em;
  line-height: 1;
  margin: 12px 0 16px;
  padding: 0.62rem 1.1rem;
  text-decoration: none;
  transition: transform 170ms ease, box-shadow 170ms ease;
}

a.vpvr-direct-badge:hover {
  box-shadow: 0 14px 28px rgba(196, 149, 58, 0.22);
  color: #4a3010;
  text-decoration: none;
  transform: translateY(-1px);
  cursor: pointer;
}

span.vpvr-direct-badge {
  cursor: default;
}

.vpvr-direct-badge__icon {
  display: inline-flex;
  font-size: 1rem;
}

/* --- 8. Mobile Sticky CTA Bar (/properties/ page) --- */
.vpvr-sticky-cta {
  align-items: center;
  background: linear-gradient(135deg, var(--vpvr-ui-brand), #11a2ae);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  bottom: 0;
  box-shadow: 0 -4px 20px rgba(16, 42, 50, 0.22);
  display: flex;
  height: 56px;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 0 16px;
  pointer-events: none;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 1000;
}

.vpvr-sticky-cta--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.vpvr-sticky-cta__btn {
  background: #ffffff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  color: var(--vpvr-ui-brand-deep);
  cursor: pointer;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.72rem 1.6rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.vpvr-sticky-cta__btn:hover,
.vpvr-sticky-cta__btn:active {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* --- Footer heading accents --- */
[id^="footer#"] h3,
[id^="footer#"] .uk-h3 {
  border-bottom: 2px solid var(--vpvr-ui-brand);
  display: inline-block;
  padding-bottom: 4px;
}

/* --- Warm Accent: Star ratings --- */
#hr-explorer-1 .hfse-property-card .hk-stars,
#hr-explorer-1 .hfse-property-card [class*="star"],
[uk-icon*="teenyicons-solid--star-small"] {
  color: var(--vpvr-ui-warm);
}

/* Override UIkit's hardcoded fill="#000" on resolved star SVGs */
[uk-icon*="teenyicons-solid--star-small"] path {
  fill: var(--vpvr-ui-warm);
}

/* ==========================================================================
   VPVR UI Refresh v3 — Polish & Perceived Performance
   ========================================================================== */

/* --- 1. Property Card Loading Skeletons --- */
@keyframes vpvr-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.vpvr-skeleton-card {
  background: var(--vpvr-ui-panel);
  border: 1px solid rgba(29, 79, 89, 0.08);
  border-radius: var(--vpvr-ui-radius-md);
  overflow: hidden;
}

.vpvr-skeleton-card__img {
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #e8e6e1, #d9d6cf);
  border-radius: var(--vpvr-ui-radius-md) var(--vpvr-ui-radius-md) 0 0;
  animation: vpvr-pulse 1.6s ease-in-out infinite;
}

.vpvr-skeleton-card__body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.vpvr-skeleton-card__bar {
  background: linear-gradient(135deg, #e8e6e1, #d9d6cf);
  border-radius: 6px;
  height: 14px;
  animation: vpvr-pulse 1.6s ease-in-out infinite;
}

.vpvr-skeleton-card__bar--title {
  width: 60%;
  height: 18px;
}

.vpvr-skeleton-card__bar--meta {
  width: 40%;
}

.vpvr-skeleton-card--out {
  opacity: 0;
  transition: opacity 300ms ease;
}

/* --- 2. Scroll Reveal Animations --- */
.vpvr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms ease, transform 650ms ease;
}

.vpvr-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 3. Review Card Elevation ---
   Homepage review grid: .fse.fs-grid cards with quote icons + review text.
   Clean elevation + subtle teal accent — Airbnb-inspired. */
#tm-main .fs-grid-item-holder > .el-item.uk-card.uk-card-default.uk-card-body {
  border-left: 3px solid var(--vpvr-ui-brand);
  box-shadow: var(--vpvr-ui-shadow-sm);
  position: relative;
}

#tm-main .fs-grid-item-holder > .el-item.uk-card.uk-card-default.uk-card-body::before {
  content: "\201C";
  color: rgba(46, 126, 135, 0.08);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 5rem;
  left: 12px;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: -6px;
  z-index: 0;
}

/* Reviewer name: slightly bolder */
#tm-main .fs-grid-item-holder > .el-item.uk-card .fs-grid-nested-3-container .fs-grid-text .uk-h3 {
  font-weight: 600;
}

/* Property link pill */
#tm-main .fs-grid-item-holder > .el-item.uk-card .fs-grid-nested-3-container .fs-grid-text-4 {
  background: rgba(46, 126, 135, 0.06);
  border-radius: 999px;
  display: inline-block;
  padding: 4px 10px;
}

/* --- 4. Partner Logo Bar — Grayscale to Color on Hover --- */
#tm-main img[src*="-color-"] {
  filter: grayscale(100%) opacity(0.5);
  transition: filter 350ms ease;
}

#tm-main img[src*="-color-"]:hover {
  filter: grayscale(0%) opacity(1);
}

/* --- 5. Property Detail Booking Widget Accent --- */
.homelocal-booking-widget {
  border: 1px solid rgba(29, 79, 89, 0.08);
  border-top: 3px solid var(--vpvr-ui-brand);
  border-radius: var(--vpvr-ui-radius-md);
  box-shadow: var(--vpvr-ui-shadow-sm);
  overflow: hidden;
}

.homelocal-booking-widget .rent-unit .rent-amount {
  color: var(--vpvr-ui-brand-strong);
  font-weight: 700;
}

/* --- 6. Homepage Service Icons Hover Effect ---
   "Our Curated Services" section: .el-item.uk-panel items with SVG icons. */
#tm-main .uk-section .uk-grid-match > div > .el-item.uk-panel {
  transition: transform 250ms ease, box-shadow 250ms ease;
  border-radius: var(--vpvr-ui-radius-sm);
}

#tm-main .uk-section .uk-grid-match > div > .el-item.uk-panel:hover {
  box-shadow: var(--vpvr-ui-shadow-sm);
  transform: translateY(-2px);
}

#tm-main .uk-section .uk-grid-match > div > .el-item.uk-panel:hover > .el-image {
  background: rgba(46, 126, 135, 0.06);
  border-radius: var(--vpvr-ui-radius-sm);
  transition: background 250ms ease;
}

/* --- 7. Booking Widget Review Badge (property pages) --- */
.vpvr-booking-review-badge {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px 0 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--vpvr-ui-brand-strong);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.vpvr-booking-review-badge:hover {
  color: var(--vpvr-ui-brand);
  text-decoration: underline;
}

.vpvr-booking-review-badge svg {
  color: var(--vpvr-ui-warm);
}