/* =====================================================================
   Haven property detail skin (hh-property-v1)
   Visual layer only. No markup, text, links or schema are changed.
   ===================================================================== */

/* 1. Re-map the page's colour tokens to the Haven palette.
      Every component on the page already uses these variables. */
:root:root:root {
  --haven-gold: #C9A45C;
  --haven-gold-dark: #9A7B3F;
  --haven-blue: #1F3A2E;
  --haven-blue-dark: #16291F;
  --haven-dark: #1E2B24;
  --haven-text: #3F4B44;
  --haven-muted: #5E6B63;
  --haven-border: rgba(30, 43, 36, .12);
  --haven-surface: #FBF8F3;
  --hp-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --hp-cream: #F5F0E8;
}

.property_detail { background: #FBF8F3; }

/* Breadcrumb */
.property_detail .breadcrumb a,
.property_detail nav[aria-label*="readcrumb"] a { color: #9A7B3F !important; text-decoration: none !important; }

/* 2. Gallery */
.property_detail ._ad_button_see,
.property_detail ._more_ad {
  background: #fff !important; color: #1E2B24 !important; border: 0 !important;
  border-radius: 999px !important; font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}
.property_detail .m-view-all { border-radius: 999px !important; font-weight: 600; }
.property_detail .m-photo-count { background: rgba(22, 41, 31, .85) !important; color: #F5F0E8 !important; }

/* 3. Title and badges */
.property-header-wrap { padding-bottom: 20px !important; }
.property-title {
  font-family: var(--hp-serif) !important; font-weight: 700 !important;
  color: #1E2B24 !important; letter-spacing: -.01em; line-height: 1.15 !important;
}
.property-subtitle { color: #5E6B63 !important; }
.property-meta-bar { gap: 8px !important; }
.property-meta-bar .meta-badge {
  background: #fff !important; border: 1px solid rgba(30, 43, 36, .12) !important;
  color: #1E2B24 !important; border-radius: 999px !important; font-weight: 500 !important;
}
.property-meta-bar .meta-badge i { color: #9A7B3F !important; }
.property-meta-bar .meta-badge.rating { background: #F5F0E8 !important; border-color: rgba(201, 164, 92, .55) !important; font-weight: 700 !important; }
.property-meta-bar .meta-badge.rating i { color: #C9A45C !important; }
.property-meta-bar .meta-badge.rating span { color: #9A7B3F !important; }
.property-meta-bar .meta-badge.verified { background: #E8F3EC !important; border-color: #9CCBAE !important; color: #1F3A2E !important; }
.property-meta-bar .meta-badge.verified i { color: #1F3A2E !important; }
.property-meta-bar span.meta-badge[style] { background: #F5F0E8 !important; border-color: rgba(201, 164, 92, .55) !important; color: #1E2B24 !important; }
.property-meta-bar span.meta-badge[style] i { color: #9A7B3F !important; }

/* 4. Dark bands (trust bar, price header, help box): Haven green, not navy */
.trust-bar,
.booking-card-header,
.cta-contact-box { background: #1F3A2E !important; }
.trust-bar { border-radius: 16px !important; border-bottom: 2px solid rgba(201, 164, 92, .5); }
.trust-icon { color: #C9A45C !important; }

/* 5. Section cards and headings */
.calendar-section-wrap,
.booking-card { border-radius: 18px !important; border-color: rgba(30, 43, 36, .10) !important; }
.section-heading,
.section-title-h2 { font-family: var(--hp-serif) !important; font-weight: 700 !important; color: #1E2B24 !important; }
.section-heading i,
.section-title-h2 i { color: #C9A45C !important; }

/* 6. Booking card buttons */
#checkAvailability {
  background: #1F3A2E !important; color: #F5F0E8 !important;
  border-radius: 999px !important; font-weight: 600 !important;
}
#checkAvailability:hover { background: #16291F !important; opacity: 1 !important; }
#checkAvailability i { color: #C9A45C !important; }
#proceedToCheckout {
  background: #C9A45C !important; color: #16291F !important;
  border-radius: 999px !important; font-weight: 700 !important;
}
#proceedToCheckout:hover { background: #D7B572 !important; color: #16291F !important; }
.booking-whatsapp-btn,
.cta-contact-box .cta-whatsapp-btn {
  background: #25D366 !important; border-color: #25D366 !important; color: #0B2414 !important;
  border-radius: 999px !important; font-weight: 700 !important;
}
.booking-whatsapp-btn:hover,
.cta-contact-box .cta-whatsapp-btn:hover { background: #22c35e !important; }
.booking-date-input:focus,
.guest-selector-btn:hover { border-color: #C9A45C !important; box-shadow: 0 0 0 3px rgba(201, 164, 92, .18) !important; }
.booking-label i { color: #9A7B3F !important; }
.booking-card-footer .fa-shield-alt { color: #1F3A2E !important; }
.cta-contact-box h3 { font-family: var(--hp-serif) !important; }

/* 7. Mobile sticky bar */
.mobile-sticky-bar { background: #fff !important; border-top: 2px solid #C9A45C !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, .08) !important; }
.sticky-price .amount { font-family: var(--hp-serif); color: #1E2B24 !important; }
.sticky-btn {
  background: #1F3A2E !important; color: #F5F0E8 !important;
  border-radius: 999px !important; font-weight: 600 !important;
}
.sticky-btn i { color: #C9A45C !important; }

/* 8. Video tour: stop tall (portrait) videos spilling over the next section */
.about-mainn.full-width .calendar-section-wrap { height: auto !important; max-height: none !important; overflow: hidden !important; }
.myVideoSwiper { overflow: hidden !important; padding-bottom: 4px; }
.myVideoSwiper .swiper-slide { height: auto !important; }
.video-embed-wrap { border-radius: 14px !important; }
.video-embed-wrap.portrait { width: 100%; max-width: 300px !important; aspect-ratio: 9 / 16 !important; margin: 0 auto !important; }
.video-embed-wrap .yt-facade-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.yt-facade-play { background: rgba(22, 41, 31, .75) !important; border-color: #C9A45C !important; }
.yt-facade-play:hover { background: #C9A45C !important; color: #16291F !important; }
.myVideoSwiper .swiper-button-next,
.myVideoSwiper .swiper-button-prev { color: #1F3A2E !important; }

/* 9. Intro, description and terms */
.property-intro-wrap { border-left-color: #C9A45C !important; background: #F5F0E8 !important; border-radius: 14px !important; }
.property-intro { color: #1E2B24 !important; }
#full-description a,
.terms-content a { color: #1F3A2E !important; font-weight: 600; text-decoration: underline !important; text-decoration-color: #C9A45C !important; text-underline-offset: 3px; }
#full-description h2, #full-description h3,
.terms-content h2, .terms-content h3 { font-family: var(--hp-serif) !important; color: #1E2B24 !important; }
#full-description li::marker,
.terms-content li::marker { color: #9A7B3F; }
.see-more-btn { color: #1F3A2E !important; border-color: rgba(201, 164, 92, .6) !important; border-radius: 999px !important; font-weight: 600 !important; }
.see-more-btn i { color: #C9A45C !important; }
.property-detail-list a { color: #1F3A2E !important; }
.property-detail-list i { color: #9A7B3F !important; }

/* 10. FAQ */
.property-faq-section .pfaq-item { border: 0 !important; border-bottom: 1px solid rgba(30, 43, 36, .12) !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; }
.property-faq-section .pfaq-item:first-of-type { border-top: 1px solid rgba(30, 43, 36, .12) !important; }
.property-faq-section summary { padding: 18px 40px 18px 0 !important; font-family: var(--hp-serif); font-weight: 700 !important; font-size: 17px; color: #1E2B24; }
.property-faq-section summary::after { right: 4px !important; color: #B4533A; font-family: Arial, sans-serif; }
.property-faq-section .pfaq-answer { padding: 0 0 18px !important; color: #3F4B44 !important; font-size: 15.5px; line-height: 1.7 !important; }

/* 11. Amenities */
.amenity-card { background: #fff !important; border: 1px solid rgba(30, 43, 36, .10) !important; border-radius: 14px !important; }
.amenity-card:hover { border-color: rgba(201, 164, 92, .6) !important; box-shadow: 0 8px 20px rgba(30, 43, 36, .06) !important; }
.amenity-card p { color: #1E2B24 !important; }

/* 12. Terms box */
.terms-section { background: #fff !important; border-radius: 18px !important; }

/* 13. Phones */
@media (max-width: 767px) {
  .property-title { font-size: 26px !important; }
  .property-subtitle { font-size: 15.5px !important; }
  .property-meta-bar .meta-badge { font-size: 13px !important; padding: 6px 12px !important; }
  .video-embed-wrap.portrait { max-width: 260px !important; }
  .section-heading, .section-title-h2 { font-size: 20px !important; }
}

/* =====================================================================
   v2 fixes after phone review
   ===================================================================== */

/* A. Remove the outer grey box around each card (card-inside-a-card look) */
.property_detail .about-content-sect > .about-mainn,
.property_detail .about-content-sect > .about-sides {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.property_detail .calendar-section-wrap,
.property_detail .booking-card,
.property_detail .description-section,
.property_detail .amenities-section,
.property_detail .property-faq-section {
  box-shadow: 0 10px 30px rgba(30, 43, 36, .06) !important;
  border: 1px solid rgba(30, 43, 36, .10) !important;
}

/* B. Video: let the card grow to the video's full height */
.property_detail .about-mainn.full-width,
.property_detail .about-mainn.full-width .calendar-section-wrap,
.myVideoSwiper, .myVideoSwiper .swiper-wrapper, .myVideoSwiper .swiper-slide {
  height: auto !important; max-height: none !important; min-height: 0 !important;
}
.property_detail .about-mainn.full-width .calendar-section-wrap { overflow: visible !important; }
.myVideoSwiper { overflow: hidden !important; }
.video-embed-wrap.portrait { max-width: 280px !important; }
.myVideoSwiper .swiper-button-next,
.myVideoSwiper .swiper-button-prev {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .92) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.myVideoSwiper .swiper-button-next::after,
.myVideoSwiper .swiper-button-prev::after { font-size: 15px !important; font-weight: 700; color: #1F3A2E !important; }

/* C. Calendar: softer Haven colours instead of bright green and red */
.calendar h2 { font-family: var(--hp-serif) !important; font-weight: 700 !important; color: #1E2B24 !important; font-size: 24px !important; }
.calendar .day-header { color: #9A7B3F !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .08em; background: transparent !important; }
.calendar .day { border-radius: 10px !important; }
.calendar .day.available {
  background: #E8F3EC !important; color: #1F3A2E !important; border: 1px solid #B9DCC6 !important;
}
.calendar .day.available .day-number { color: #1F3A2E !important; font-weight: 700 !important; }
.calendar .day.available .price { color: #2F6B4E !important; font-weight: 600 !important; }
.calendar .day.available:hover { background: #1F3A2E !important; border-color: #1F3A2E !important; }
.calendar .day.available:hover .day-number,
.calendar .day.available:hover .price { color: #F5F0E8 !important; }
.calendar .day.booked {
  background: #F6E7E2 !important; color: #B4533A !important; border: 1px solid #EBCFC6 !important;
}
.calendar .day.booked .day-number { color: #B4533A !important; text-decoration: line-through; opacity: .85; }
.calendar .day.blocked { background: #EEF0EE !important; color: #8C968F !important; border: 1px solid #E1E4E1 !important; }
.calendar .day.past { background: #F7F5F0 !important; color: #B8BDB9 !important; border: 1px solid transparent !important; }
.calendar .day.empty { background: transparent !important; border: 0 !important; }
.legend-dot.available { background: #B9DCC6 !important; border: 2px solid #2F6B4E; }
.legend-dot.booked { background: #EBCFC6 !important; border: 2px solid #B4533A; }
.legend-dot.blocked { background: #E1E4E1 !important; border: 2px solid #8C968F; }

/* D. Prev / Next month buttons */
.calendar-nav-buttons { gap: 10px !important; }
.calendar-nav-buttons button {
  width: auto !important; height: auto !important; min-width: 0 !important;
  padding: 9px 18px !important; border-radius: 999px !important;
  background: #fff !important; border: 1px solid rgba(201, 164, 92, .6) !important;
  color: #1F3A2E !important; font-weight: 600 !important; font-size: 14px !important;
  display: inline-flex !important; align-items: center; gap: 6px; line-height: 1.2 !important;
}
.calendar-nav-buttons button:hover { background: #F5F0E8 !important; }
.calendar-nav-buttons button i { color: #9A7B3F !important; }

@media (max-width: 767px) {
  .video-embed-wrap.portrait { max-width: 240px !important; }
  .calendar h2 { font-size: 21px !important; }
  .calendar .day .price { font-size: 11px !important; }
}
/* HH-FIX8E: calendar month name as plain text (was <h2>), same look */
.calendar .cal-month { display: block; margin: 0.83em 0; line-height: 1.2; font-family: var(--hp-serif) !important; font-weight: 700 !important; color: #1E2B24 !important; font-size: 24px !important; }
@media (max-width: 767px) { .calendar .cal-month { font-size: 21px !important; } }