/* =========================================================
   BidmyTrip — Minimal Custom CSS (Tailwind handles the rest)
   ========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Scrollbar (no Tailwind equivalent) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f0eded;
}
::-webkit-scrollbar-thumb {
  background: #727784;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #004e9f;
}

::selection {
  background: #0066cc;
  color: #fff;
}

/* ---------- Hero Slider ---------- */
.slider-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  overflow: hidden;
}
.slider-slide.active {
  opacity: 1;
  z-index: 10;
}
.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 6s linear;
}
.slider-slide.active .slider-image {
  transform: scale(1.01);
}

/* Mobile: show full banner image without cropping */
@media (max-width: 640px) {
  .slider-slide {
    background-color: #ffffff;
  }
  .slider-image {
    object-fit: contain;
  }
}

/* ---------- Scroll Reveal (JS toggles .active) ---------- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-clip {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal {
  transform: translateY(30px);
}
.reveal-left {
  transform: translateX(-40px);
}
.reveal-right {
  transform: translateX(40px);
}
.reveal-scale {
  transform: scale(0.92);
}
.reveal-clip {
  clip-path: inset(0 0 100% 0);
}
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active {
  opacity: 1;
  transform: translate(0) scale(1);
}
.reveal-clip.active {
  opacity: 1;
  clip-path: inset(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.active > *:nth-child(6) { transition-delay: 0.3s; }

/* ---------- Toast Notifications ---------- */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: all;
  padding: 14px 20px;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: toastIn 0.4s ease forwards, toastOut 0.4s ease 3s forwards;
  max-width: 360px;
}
.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }
.toast-info { background: #004e9f; }
.toast-warning { background: #f59e0b; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(100%) scale(0.9); }
}

/* ---------- Button Ripple ---------- */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rippleEffect 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- OTP Input ---------- */
.otp-input:focus {
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(0, 78, 159, 0.15);
}

/* ---------- Navigation Underline ---------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #004e9f;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Image Reveal (pseudo-element wipe) ---------- */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #004e9f;
  transform: translateX(-101%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-reveal.revealed::after {
  transform: translateX(101%);
}

/* ---------- Image Zoom (parent-child pattern) ---------- */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.img-zoom:hover img,
.group:hover .img-zoom img {
  transform: scale(1.1);
}

/* ---------- FAQ Marker Hide ---------- */
.faq-accordion summary::-webkit-details-marker {
  display: none;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-clip,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}