
/*
 * Faguobaoche Glow Slider V3
 * Production styling: bottom control, warm frosted glass, burgundy/gold/pink gradient.
 * Safe-by-default: styles only [data-fbc-glow-slider].
 */

[data-fbc-glow-slider] {
  --fbc-burgundy: #7f1026;
  --fbc-burgundy-2: #a5223f;
  --fbc-rose: #d66c7c;
  --fbc-gold: #c8a96b;
  --fbc-gold-2: #f0d49a;
  --fbc-ink: #2d2422;
  --fbc-cream: rgba(255, 252, 247, .82);
  --fbc-glow: rgba(205, 89, 104, .28);
  --fbc-glow-gold: rgba(224, 180, 99, .26);
  position: relative;
}

[data-fbc-glow-slider] [data-fbc-glow-viewport] {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-y pan-x;
  cursor: grab;
}

[data-fbc-glow-slider] [data-fbc-glow-viewport]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

[data-fbc-glow-slider].fbc-is-dragging [data-fbc-glow-viewport] {
  cursor: grabbing;
  user-select: none;
}

.fbc-glow-slider-v3-controls {
  width: min(100%, 1180px);
  margin: 20px auto 0;
  padding: 10px 12px 8px;
  border: 1px solid rgba(188, 136, 78, .24);
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(255, 248, 241, .78) 0%,
      rgba(255, 243, 239, .88) 30%,
      rgba(255, 249, 242, .90) 52%,
      rgba(253, 238, 239, .86) 74%,
      rgba(255, 248, 240, .80) 100%);
  box-shadow:
    0 8px 28px rgba(98, 42, 35, .08),
    0 0 24px var(--fbc-glow),
    0 0 20px var(--fbc-glow-gold) inset;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.fbc-glow-slider-v3-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
}

.fbc-glow-slider-v3-arrow {
  appearance: none;
  border: 1px solid rgba(130, 17, 38, .24);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--fbc-burgundy);
  font-size: 24px;
  line-height: 1;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.96) 0 16%, transparent 17%),
    linear-gradient(145deg, rgba(255,251,246,.96), rgba(255,232,222,.92));
  box-shadow:
    0 2px 8px rgba(83, 23, 25, .08),
    0 0 16px rgba(208, 94, 108, .18);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.fbc-glow-slider-v3-arrow:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 4px 12px rgba(83, 23, 25, .10),
    0 0 20px rgba(208, 94, 108, .28);
}

.fbc-glow-slider-v3-arrow:active:not(:disabled) {
  transform: scale(.98);
}

.fbc-glow-slider-v3-arrow:disabled {
  opacity: .34;
  cursor: default;
}

.fbc-glow-slider-v3-track {
  position: relative;
  height: 24px;
  cursor: pointer;
  outline: none;
  border-radius: 999px;
}

.fbc-glow-slider-v3-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(127, 16, 38, .26) 0%,
      rgba(165, 34, 63, .62) 27%,
      rgba(240, 212, 154, .88) 52%,
      rgba(214, 108, 124, .58) 74%,
      rgba(200, 169, 107, .36) 100%);
  box-shadow:
    0 0 10px rgba(181, 46, 74, .24),
    0 0 12px rgba(224, 180, 99, .22);
}

.fbc-glow-slider-v3-track::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, rgba(255,246,220,.98) 0 2px, transparent 2.6px) 0 50% / 14.285% 100% repeat-x;
  opacity: .72;
  pointer-events: none;
}

.fbc-glow-slider-v3-thumb {
  --fbc-progress: 0;
  position: absolute;
  top: 50%;
  left: calc(var(--fbc-progress) * 100%);
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 246, 222, .94);
  background:
    radial-gradient(circle at 34% 30%, #fffaf0 0 10%, #f3d58f 18%, #d95f73 52%, #8b1230 100%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.38),
    0 0 16px rgba(157, 21, 53, .42),
    0 0 24px rgba(222, 167, 91, .40);
  cursor: grab;
  z-index: 3;
}

.fbc-glow-slider-v3-thumb:active {
  cursor: grabbing;
}

.fbc-glow-slider-v3-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 4px;
  min-height: 24px;
  color: var(--fbc-burgundy);
  font-size: 14px;
  letter-spacing: .06em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.fbc-glow-slider-v3-hint::before,
.fbc-glow-slider-v3-hint::after {
  content: "";
  width: clamp(28px, 8vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(165, 34, 63, .72), rgba(200, 169, 107, .80));
}

.fbc-glow-slider-v3-hint::after {
  transform: scaleX(-1);
}

.fbc-glow-slider-v3-hint-diamond {
  color: var(--fbc-gold);
  font-size: 10px;
  text-shadow: 0 0 8px rgba(200, 169, 107, .35);
}

@media (max-width: 767px) {
  .fbc-glow-slider-v3-controls {
    margin-top: 14px;
    padding: 8px 9px 7px;
    border-radius: 22px;
  }

  .fbc-glow-slider-v3-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
  }

  .fbc-glow-slider-v3-arrow {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .fbc-glow-slider-v3-track {
    height: 22px;
  }

  .fbc-glow-slider-v3-thumb {
    width: 18px;
    height: 18px;
  }

  .fbc-glow-slider-v3-hint {
    font-size: 12px;
    gap: 8px;
    letter-spacing: .04em;
  }

  .fbc-glow-slider-v3-hint::before,
  .fbc-glow-slider-v3-hint::after {
    width: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fbc-glow-slider] [data-fbc-glow-viewport] {
    scroll-behavior: auto;
  }

  .fbc-glow-slider-v3-arrow {
    transition: none;
  }
}

/* Keep old DOM hooks for the existing filter and autoplay owners; replace only their controls. */
[data-fbc-glow-ready="1"] :is(.fbc-hotspots__scroll-controls,.fbc-hotspots-mobile-cue,.fbc-a-carousel-nav,.fbc-a-carousel-hint,.fbc-c-carousel-nav,.fbc-c-carousel-hint,.fbc-desktop-route-controls,.fbc-desktop-route-cue,.eu-scroll-controls) { display: none !important; }
[data-fbc-glow-slider] [data-fbc-glow-viewport] { scroll-snap-type: none !important; scrollbar-width: none !important; }
[data-fbc-glow-slider] > .fbc-glow-slider-v3-controls { box-sizing: border-box; min-width: 0; grid-column: 1 / -1; }
.fbc-glow-slider-v3-controls[hidden] { display: none !important; }
.fbc-glow-slider-v3-track { touch-action: none; }
.fbc-glow-slider-v3-track:focus-visible { outline: 2px solid var(--fbc-burgundy); outline-offset: 3px; }
.fbc-glow-slider-v3-arrow { padding: 0; min-width: 0; min-height: 0; }
