/* SAPA DAY TOUR - HOMEPAGE COMPANION ENHANCEMENTS */

/* Font Fallbacks */
:root {
  --font-clashDisplay: 'Clash Display', 'Quicksand', sans-serif;
  --font-svn: 'Marck Script', 'Caveat', cursive;
  --font-dmSans: 'DM Sans', sans-serif;
  --font-trip-sans: 'DM Sans', -apple-system, sans-serif;
  --Text-Title-Gradient: linear-gradient(90deg, #5bc537 0%, #007f19 100%);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Ensure font classes take effect */
.font-clashDisplay { font-family: var(--font-clashDisplay) !important; }
.font-svn { font-family: var(--font-svn) !important; }
.font-dmSans { font-family: var(--font-dmSans) !important; }
.font-tripSans { font-family: var(--font-trip-sans) !important; }

/* Title Gradient */
.title-gradient {
  background: var(--Text-Title-Gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ensure background image loads nicely on desktop */
@media (min-width: 768px) {
  img[src*="bg-sapa.webp"] {
    min-height: 2500px;
    max-width: none !important;
    width: 100% !important;
  }
}

/* Review Marquee Vertical Scroll Animations */
@keyframes marqueeScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.marqueeSlide {
  animation: marqueeScroll 40s linear infinite !important;
}

.marqueeSlide-reverse {
  animation: marqueeScroll 40s linear infinite reverse !important;
}

.marqueeSlide:hover,
.marqueeSlide-reverse:hover {
  animation-play-state: paused !important;
}

/* Destination Tooltip display */
.map-pin-group:hover .pin-tooltip-card,
.map-pin-group.active .pin-tooltip-card {
  display: flex !important;
}

/* Swiper pagination bullet styling */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #043424 !important;
  opacity: 0.3 !important;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 24px !important;
  opacity: 1 !important;
  background: #c1e041 !important;
}

/* Handwritten cursive font for scrapbook note */
.font-svn, [class*="font-svn"] {
  font-family: 'Marck Script', 'Caveat', cursive !important;
}

/* Smoke mask for regional delicacies hero dish */
.mask-smoke-delicacy {
  -webkit-mask-image: url('../images/delicacy-mask.png');
  mask-image: url('../images/delicacy-mask.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 639px) {
  .mask-smoke-delicacy {
    -webkit-mask-image: url('../images/delicacy-mask.png') !important;
    mask-image: url('../images/delicacy-mask.png') !important;
  }
}

/* ---------------------------------------------------------------------------
   Regional delicacies ribbon: explicit dish sizes.
   The arbitrary Tailwind classes (w-[16.85669rem] …) are not in the compiled
   vendor CSS, so the cards collapsed to 0×0. Sizes mirror the original design.
--------------------------------------------------------------------------- */
.swiper-delicacies .swiper-slide { display: flex !important; justify-content: center; align-items: flex-start; }
.swiper-delicacies .delicacy-card { flex-shrink: 0; }
.swiper-delicacies .delicacy-card > img:first-child { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.swiper-delicacies .delicacy-card > img + img { width: 100%; height: auto; left: -20%; bottom: 0; filter: blur(22px); }
.swiper-delicacies .swiper-slide:nth-child(1) .delicacy-card { width: 16.85669rem; height: 11.23781rem; }
.swiper-delicacies .swiper-slide:nth-child(2) .delicacy-card { width: 27.18363rem; height: 15.74638rem; rotate: 7.485deg; translate: -2rem 0; }
.swiper-delicacies .swiper-slide:nth-child(3) .delicacy-card { width: 28.40706rem; height: 18.39263rem; }
@media (max-width: 639px) {
  .swiper-delicacies .swiper-slide:nth-child(1) .delicacy-card { width: 5.38rem; height: 3.95238rem; }
  .swiper-delicacies .swiper-slide:nth-child(2) .delicacy-card { width: 6.38rem; height: 4.2785rem; translate: -0.5rem 1rem; }
  .swiper-delicacies .swiper-slide:nth-child(3) .delicacy-card { width: 7.97956rem; height: 6.06588rem; translate: 0 1.5rem; }
}
/* Hero dish (masked) + badge sizes, same reason */
#delicacies .food-image { width: 100%; height: 100%; }
#delicacyMaskContainer { width: 40.875rem; height: 35.035rem; }
#delicacyMaskContainer img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) { #delicacyMaskContainer { width: 18.82rem; height: 16.22rem; } }

/* Don't clip rotated / tall dishes at the top of the ribbon */
.swiper-delicacies, .swiper-delicacies .swiper-wrapper { overflow: visible !important; }
.swiper-delicacies .swiper-slide { overflow: visible; }

/* --- fix 2026-09-27: tour-card badges overlapping ---
   The vendor Tailwind build has .absolute + .top-3 but the .left-3 / .right-3
   offset utilities were purged, so both badges collapsed onto the top-left
   corner. Restoring the standard Tailwind values fixes the overlap. */
.left-3{left:.75rem}
.right-3{right:.75rem}


/* ===== v12 (2026-09-28) homepage tour-card polish + mobile helpers ===== */
/* Make the "Our Sapa Day Tours" cards feel more premium & tappable */
.slide_tours .fade-in-tour-item { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.slide_tours .fade-in-tour-item:hover { transform: translateY(-5px); box-shadow: 0 20px 42px -18px rgba(4,52,36,.38) !important; }
/* vehicle label (top-right) never overflows / collides — one line + ellipsis */
.slide_tours .fade-in-tour-item .absolute.right-3 { max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide_tours .fade-in-tour-item .absolute.left-3,
.slide_tours .fade-in-tour-item .absolute.right-3 { box-shadow: 0 2px 8px rgba(0,0,0,.20); }
/* price stands out a touch more */
.slide_tours .fade-in-tour-item .border-t p { font-size: 1.22rem; }
@media (max-width:760px){ .slide_tours .fade-in-tour-item .border-t p { font-size: 1rem; } }
/* Book Now button: clearer affordance */
.slide_tours .fade-in-tour-item a[href*="wa.me"] { box-shadow: 0 6px 16px -6px rgba(4,52,36,.4); }

/* v12 task 1: trim the tall "7+ years" intro band on mobile so the tour
   Swiper is reached sooner (desktop keeps its fixed height). */
@media (max-width:760px){
  #our-tours { height: auto !important; min-height: 0 !important; padding: 2.5rem 0 1rem !important; }
  #our-tours > div[class*="top-"] { top: auto !important; }
}


/* ===== v13 (2026-09-28) "Our Sapa Day Tours" card beautify ===== */
.slide_tours .fade-in-tour-item { border-radius: 1.25rem; transition: transform .28s ease, box-shadow .28s ease; }
.slide_tours .fade-in-tour-item:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -20px rgba(4,52,36,.42) !important; }

/* soft top scrim over the photo so both badges are legible on any image */
.slide_tours .fade-in-tour-item .relative.overflow-hidden::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44%;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)); pointer-events: none; z-index: 1;
}
.slide_tours .fade-in-tour-item .relative.overflow-hidden img { transition: transform .5s ease; }

/* badges above the scrim */
.slide_tours .fade-in-tour-item .absolute.left-3,
.slide_tours .fade-in-tour-item .absolute.right-3 { z-index: 2; top: .8rem; }

/* left = category tag: solid brand-green pill, lime text */
.slide_tours .fade-in-tour-item .absolute.left-3 {
  background: #043424 !important; color: #D6EF66 !important; font-weight: 800 !important;
  padding: .34rem .8rem !important; letter-spacing: .01em; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
/* right = vehicle label: frosted white pill, dark green text, never clips */
.slide_tours .fade-in-tour-item .absolute.right-3 {
  background: rgba(255,255,255,.94) !important; color: #043424 !important; font-weight: 700 !important;
  padding: .34rem .7rem !important; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 4px 12px rgba(0,0,0,.16);
}

/* price row emphasis + tidy discount */
.slide_tours .fade-in-tour-item .border-t { padding-top: .9rem !important; }
.slide_tours .fade-in-tour-item .border-t p:first-child { font-size: 1.3rem !important; }
@media (max-width:760px){ .slide_tours .fade-in-tour-item .border-t p:first-child { font-size: 1.05rem !important; } }

/* Book Now: clearer, springy */
.slide_tours .fade-in-tour-item a[href*="wa.me"],
.slide_tours .fade-in-tour-item .sd-lime-cta {
  background: #D6EF66 !important; color: #043424 !important; box-shadow: 0 10px 20px -8px rgba(4,52,36,.5);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.slide_tours .fade-in-tour-item a[href*="wa.me"]:hover,
.slide_tours .fade-in-tour-item .sd-lime-cta:hover { background: #c1e041 !important; transform: translateY(-1px); }

/* ===== v14: Complete Compiled Utilities & Inline Element Restoration =====
   sapa-vendor.css sets `a, b, span { display: block }` and `button { background: transparent }`,
   and lacks several arbitrary Tailwind classes. Restoring all of them here ensures 1:1 visual parity. */
p a, p b, p strong, p span, p code, p em, p small,
li a, li b, li strong, li span, li code,
h1 span.sd-sr-only, h2 strong, h2 b, h2 a, h3 a, h3 span {
  display: inline !important;
}
.sd-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Explicit Hero Banner Dimensions & Typography */
#hero-banner {
  height: 30rem !important;
  overflow: hidden;
}
@media (min-width: 640px) {
  #hero-banner {
    height: 47.5rem !important;
  }
}

/* Explore Ninh Binh Headline & CTA Button */
.sd-explore-title {
  font-size: 5.5rem !important;
  line-height: 1.08 !important;
}
@media (max-width: 639px) {
  .sd-explore-title {
    font-size: 3.25rem !important;
  }
}
.sd-lime-cta,
.bg-\[\#c1e041\],
.bg-\[\#D6EF66\],
.bg-Brand-Hightlight {
  background-color: #D6EF66 !important;
  color: #043424 !important;
}
.sd-lime-cta:hover,
.hover\:bg-\[\#aed12b\]:hover,
.hover\:bg-\[\#c1e041\]:hover {
  background-color: #c1e041 !important;
  color: #043424 !important;
}

/* Missing Arbitrary Utilities from index.php */
.bg-\[\#033210\] { background-color: #033210; }
.text-\[\#c1e041\] { color: #c1e041; }
.bg-\[\#f8faf7\] { background-color: #f8faf7; }
.text-\[1\.15rem\] { font-size: 1.15rem; }
.min-h-\[3rem\] { min-height: 3rem; }
.size-\[1\.15rem\] { width: 1.15rem; height: 1.15rem; }
.max-w-\[17rem\] { max-width: 17rem; }
.mb-\[0\.15rem\] { margin-bottom: 0.15rem; }
.px-\[0\.4rem\] { padding-left: 0.4rem; padding-right: 0.4rem; }
.py-\[0\.1rem\] { padding-top: 0.1rem; padding-bottom: 0.1rem; }
.leading-\[1\.15\] { line-height: 1.15; }
.leading-\[125\%\] { line-height: 125%; }
.tracking-\[-0\.04rem\] { letter-spacing: -0.04rem; }
.tracking-\[0\.2rem\] { letter-spacing: 0.2rem; }
.grid-cols-\[repeat\(4\,min-content\)\] { grid-template-columns: repeat(4, min-content); }
@media (min-width: 640px) {
  .sm\:text-\[2\.35rem\] { font-size: 2.35rem; }
  .sm\:bg-\[linear-gradient\(176deg\,\#FFF_21\.11\%\,rgba\(255\,255\,255\,0\.00\)_46\.73\%\)\] {
    background-image: linear-gradient(176deg, #FFF 21.11%, rgba(255, 255, 255, 0.00) 46.73%);
  }
}