/**
 * carousel-system.css
 * FABLE Responsive Informational Card Carousel Styling
 * Faithfully adhering to HyperFly reference architecture.
 */

/* ── Container Isolation & Fluidity ── */
.fable-carousel-active {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
  gap: 16px !important;
  padding-top: 8px !important;
  padding-bottom: 12px !important;
  padding-left: 2px !important;
  padding-right: 20px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  cursor: grab;
  user-select: none;
}

.fable-carousel-active:active {
  cursor: grabbing;
}

.fable-carousel-active::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.fable-carousel-active > * {
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  margin: 0 !important;
  max-width: none;
}

/* ── Pattern 1: Standard Slider ── */
/* 84% width on mobile so ~16% of next card peeks into view */
.fable-carousel--standard.fable-carousel-active > * {
  width: calc(85vw - 28px) !important;
  max-width: 360px !important;
  min-width: 280px !important;
}

/* ── Pattern 2: Snap Carousel (Fleet, Fares, Stats) ── */
.fable-carousel--snap.fable-carousel-active > * {
  width: calc(86vw - 24px) !important;
  max-width: 380px !important;
  min-width: 280px !important;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

/* ── Pattern 3: Peek Carousel (Trust Cards, Related Cards) ── */
.fable-carousel--peek.fable-carousel-active > * {
  width: calc(82vw - 24px) !important;
  max-width: 340px !important;
  min-width: 270px !important;
  transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1), opacity 350ms ease, box-shadow 350ms ease !important;
}

.fable-carousel--peek.fable-carousel-active > *:not(.fable-slide-active) {
  opacity: 0.85;
  transform: scale(0.975);
}

.fable-carousel--peek.fable-carousel-active > *.fable-slide-active {
  opacity: 1;
  transform: scale(1);
}

/* ── Pattern 4: Step Carousel (Numbered Booking Steps) ── */
.fable-carousel--step.fable-carousel-active > * {
  width: calc(88vw - 24px) !important;
  max-width: 360px !important;
  min-width: 280px !important;
  position: relative;
  transition: transform 300ms ease, border-color 300ms ease;
}

.fable-carousel--step.fable-carousel-active > *.fable-slide-active {
  border-color: var(--blue, #0066cc) !important;
}

/* ── Pattern 5: Testimonial Carousel (Customer Quotes) ── */
.fable-carousel--testimonial.fable-carousel-active > * {
  width: calc(88vw - 20px) !important;
  max-width: 420px !important;
  min-width: 280px !important;
  transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1), opacity 350ms ease !important;
}

.fable-carousel--testimonial.fable-carousel-active > *:not(.fable-slide-active) {
  opacity: 0.78;
  transform: scale(0.97);
}

.fable-carousel--testimonial.fable-carousel-active > *.fable-slide-active {
  opacity: 1;
  transform: scale(1);
}

/* ── Pattern 6: Feature / Pillar Carousel (Highlights, Core Pillars, Team) ── */
.fable-carousel--feature.fable-carousel-active > * {
  width: calc(84vw - 24px) !important;
  max-width: 350px !important;
  min-width: 270px !important;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease !important;
}

.fable-carousel--feature.fable-carousel-active > *.fable-slide-active {
  border-color: rgba(0, 102, 204, 0.4) !important;
}

/* ── HyperFly Reference Dots Navigation ── */
.fable-carousel-dots,
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  position: relative;
  width: 100%;
}

.fable-carousel-dot,
.carousel-dot {
  width: 6px;
  height: 6px;
  background: var(--blue, #0066cc);
  border-radius: 50%;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  outline: none;
  background-clip: padding-box;
}

.fable-carousel-dot::after,
.carousel-dot::after {
  position: absolute;
  left: -7px;
  top: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  content: "";
  border: 1.5px solid var(--blue, #0066cc);
  transform: scale(0);
  transition: transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 50%;
  pointer-events: none;
}

.fable-carousel-dot.active,
.carousel-dot.active {
  background: var(--sky, #38bdf8);
}

.fable-carousel-dot.active::after,
.carousel-dot.active::after {
  transform: scale(1);
  border-color: var(--sky, #38bdf8);
}

/* Light Theme Dot Adaptations */
.section-light .fable-carousel-dot,
.section-light-alt .fable-carousel-dot {
  background: var(--slate-light, #94a3b8);
}
.section-light .fable-carousel-dot.active,
.section-light-alt .fable-carousel-dot.active {
  background: var(--blue, #0066cc);
}
.section-light .fable-carousel-dot.active::after,
.section-light-alt .fable-carousel-dot.active::after {
  border-color: var(--blue, #0066cc);
}

/* Dark Theme Dot Adaptations */
.section-dark .fable-carousel-dot,
.trust-strip .fable-carousel-dot,
.booking-process-section .fable-carousel-dot {
  background: rgba(255, 255, 255, 0.35);
}
.section-dark .fable-carousel-dot.active,
.trust-strip .fable-carousel-dot.active,
.booking-process-section .fable-carousel-dot.active {
  background: var(--sky, #38bdf8);
}
.section-dark .fable-carousel-dot.active::after,
.trust-strip .fable-carousel-dot.active::after,
.booking-process-section .fable-carousel-dot.active::after {
  border-color: var(--sky, #38bdf8);
}

/* ── Prevent any global horizontal page overflow ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Section Container Safe Padding */
@media (max-width: 767px) {
  .trust-strip .container,
  .booking-process-section .container,
  .why-choose-one .container,
  .destinations-grid,
  .testimonials-grid,
  .fleet-grid,
  .process-grid,
  .trust-grid {
    max-width: 100%;
  }

  /* Ensure card contents don't squish inside carousels */
  .trust-card,
  .process-card,
  .fleet-card,
  .why-choose-one__box,
  .testimonial-card,
  .destination-card,
  .service-one__item,
  .fare-card,
  .vehicle-card,
  .team-card,
  .about-highlight-card,
  .feature-eight__item {
    box-sizing: border-box !important;
  }
}