/**
 * SMIO Product Slider — Stylesheet
 *
 * Arrow buttons, fade/opacity transitions, touch indicators,
 * smooth scroll behaviour on .new-scroll and .related-products-grid.
 *
 * @author SMIO
 * @version 1.0.0
 * @date 2026-07-16
 */

/* ───────────────────────────────────────────────────────────────
   Scroll container — ensure overflow-x is handled by JS overlay
   (theme supplies overflow-x:auto on .new-scroll; this reinforces)
   ─────────────────────────────────────────────────────────────── */
.new-scroll,
.related-products-grid {
  scroll-behavior: smooth;
  /* prevent layout shift when arrows appear */
  scrollbar-width: none;
}

.new-scroll::-webkit-scrollbar,
.related-products-grid::-webkit-scrollbar {
  display: none;
}

/* ───────────────────────────────────────────────────────────────
   Wrapper — injected by JS around each scroll container
   ─────────────────────────────────────────────────────────────── */
.smio-slider-wrap {
  position: relative;
  overflow: hidden;   /* clips arrows at container edges */
}

/* ───────────────────────────────────────────────────────────────
   Arrow buttons — absolute, vertically centred
   ─────────────────────────────────────────────────────────────── */
.smio-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;

  /* Size */
  width: 40px;
  height: 40px;
  border-radius: 50%;

  /* Appearance */
  background: #C9A96E;
  color: #ffffff;
  border: none;
  cursor: pointer;

  /* Typography / icon */
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  /* Font Awesome / theme icon fallback — prevent text selection */
  font-family: inherit;
  letter-spacing: 0;

  /* Transition */
  opacity: 0;
  transition: opacity 250ms ease, background 150ms ease;

  /* Interaction guards */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Left arrow — faces left */
.smio-arrow--left {
  left: 8px;
}

/* Right arrow — rotated 180° to face right */
.smio-arrow--right {
  right: 8px;
  transform: translateY(-50%) rotate(180deg);
}

/* Show arrows when wrapper is hovered (desktop) */
.smio-slider-wrap:hover .smio-arrow {
  opacity: 1;
  pointer-events: auto;
}

/* Explicit visibility classes (updated by JS) */
.smio-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.smio-arrow.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ───────────────────────────────────────────────────────────────
   Arrow active / pressed state
   ─────────────────────────────────────────────────────────────── */
.smio-arrow:active {
  background: #b8945a;   /* darker gold on press */
}

/* ───────────────────────────────────────────────────────────────
   Arrow focus — accessible focus ring
   ─────────────────────────────────────────────────────────────── */
.smio-arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────
   Touch indicator — pulsing dot at bottom on touch-capable devices
   ─────────────────────────────────────────────────────────────── */
.smio-slider-wrap.is-draggable::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A96E;
  opacity: 0;
  pointer-events: none;
  animation: smio-touch-pulse 2s ease-in-out infinite;
}

@keyframes smio-touch-pulse {
  0%, 100% { opacity: 0.2; transform: translateX(-50%) scale(1);   }
  50%       { opacity: 0.5; transform: translateX(-50%) scale(1.3); }
}

/* ───────────────────────────────────────────────────────────────
   Responsive — slightly smaller arrows on narrow viewports
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .smio-arrow {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
  }
  .smio-arrow--left  { left: 4px;  }
  .smio-arrow--right { right: 4px; }
}