/* Custom Swiper styles will go here. */ 

/* Swiper Navigation Button Styling - Desktop Only */
@media screen and (min-width: 769px) {
.swiper-button-next,
.swiper-button-prev {
  width: 50px !important;
  height: 50px !important;
  margin-top: -25px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.7) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: white !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  transform: scale(1.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  }
}

/* Mobile: Hide buttons completely to prevent hover issues */
@media screen and (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}

/* Disabled state styling */
.swiper-button-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

.swiper-button-disabled:hover {
  transform: none !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.swiper-button-disabled:after {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Hide buttons completely if needed */
.swiper-button-hidden {
  display: none !important;
}

/* Featured notes swiper specific styles - match lightbox styling */
.featured-notes-swiper .swiper-button-next,
.featured-notes-swiper .swiper-button-prev {
  position: absolute !important;
  top: 50% !important;
  z-index: 20 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  opacity: 0.6 !important;
}

.featured-notes-swiper .swiper-button-next:hover,
.featured-notes-swiper .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  opacity: 0.8 !important;
  transform: none !important;
}

.featured-notes-swiper .swiper-button-prev {
  left: 10px !important;
}

.featured-notes-swiper .swiper-button-next {
  right: 10px !important;
} 

/* Instagram-style Progress Bars */
.swiper-pagination {
    position: fixed !important;
    pointer-events: none;
    top: calc(env(safe-area-inset-top, 0) + 1rem) !important;
    left: 1rem !important;
    right: 5rem !important;
    width: auto !important;
    display: flex !important;
    gap: 4px;
    z-index: 10004;
    justify-content: space-between;
    align-items: center;
}

.swiper-pagination-bullet {
    position: relative !important;
    flex: 1 !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
    margin: 0 !important;
    border-radius: 1px !important;
    overflow: hidden;
    transform: none !important;
    width: auto !important;
}

.swiper-pagination-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: white;
    transform-origin: left;
    transition: width 0.1s ease;
}

.swiper-pagination-bullet.completed .swiper-pagination-progress {
    width: 100% !important;
    animation: none !important;
}

.swiper-pagination-bullet-active .swiper-pagination-progress {
    animation: progress-fill 5s linear forwards;
}

@keyframes progress-fill {
    from { width: 0%; }
    to { width: 100%; }
}