/**
 * SenangWebs Roll (SWR) - Core Styles
 */

/* Reset and base styles */
.swr,
.swr *,
.swr *::before,
.swr *::after {
  box-sizing: border-box;
}

.swr {
  position: relative;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  cursor: grab;
}

.swr:active {
  cursor: grabbing;
}

/* Focus state for keyboard navigation */
.swr:focus {
  outline: 2px solid rgba(102, 126, 234, 0.6);
  outline-offset: 2px;
}

/* Remove focus outline when using mouse */
.swr:focus:not(:focus-visible) {
  outline: none;
}

/* Viewport - Instagram Reels style touch handling */
.swr-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  /* Prevent all native touch scrolling - critical for Instagram Reels behavior */
  touch-action: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Prevent text selection during touch */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Drag cursor for desktop */
  cursor: inherit;
  /* Aspect ratio is set via JavaScript to allow dynamic configuration */
}

/* Container */
.swr-container {
  display: flex;
  transition: transform 350ms ease-in-out;
  will-change: transform;
  /* Position and dimensions are set via JavaScript */
}

/* Items - Instagram Reels style: prevent all internal scrolling */
[data-swr-item] {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Critical: Prevent touch events from being handled by children */
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.swr-html-item >  * {
  width: 100%;
  /* Prevent child elements from capturing touch events */
  pointer-events: none;
  touch-action: none;
}

/* HTML Item - Instagram Reels style: no internal scrolling */
.swr-html-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  touch-action: none;
}

/* Video Item */
.swr-video-item {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  touch-action: none;
}

.swr-video-item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Allow video controls but prevent touch scrolling */
  pointer-events: auto;
  touch-action: none;
}

/* Image Item */
.swr-image-item {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  touch-action: none;
}

.swr-image-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Prevent image dragging interference */
  pointer-events: none;
  touch-action: none;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .swr-viewport {
    aspect-ratio: 9 / 16;
  }

  .swr-container {
    transition-duration: 300ms;
  }
}

/* Responsive - Desktop */
@media (min-width: 769px) {
  .swr-viewport {
    aspect-ratio: 16 / 9;
  }

  .swr-container {
    transition-duration: 400ms;
  }
}

/* Touch-friendly styles */
.swr {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent scrolling while swiping */
.swr-viewport {
  overscroll-behavior: contain;
}

/* Animation classes */
.swr-viewport.swr-animating .swr-container {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading state */
.swr.swr-loading {
  opacity: 0.6;
}

/* Disabled state */
.swr.swr-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .swr-viewport {
    background-color: #000;
  }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
  .swr-viewport {
    background-color: #f5f5f5;
  }
}

/* Print styles */
@media print {
  .swr {
    display: none;
  }
}

/* High contrast support */
@media (prefers-contrast: more) {
  .swr-viewport {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .swr-container {
    transition: none !important;
  }
}

/* Focus styles for accessibility */
.swr:focus-within {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}


/*# sourceMappingURL=swr.min.css.map*/