/* 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"] {
  background: #D6EF66 !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 { background: #c1e041 !important; transform: translateY(-1px); }