/* 
 * Premium Horizontal Scrollbar for Articles
 * WorthZen - Articles Section
 */

:root {
  /* Customizable scrollbar colors - matches WorthZen theme */
  --article-scrollbar-track: rgba(240, 242, 245, 0.8);
  --article-scrollbar-thumb: #667eea;
  --article-scrollbar-thumb-hover: #764ba2;
  --article-scrollbar-height: 8px;
  --article-scrollbar-border-radius: 4px;
  --article-scrollbar-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
}

/* Hide vertical scrollbar */
html, body {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Hide vertical scrollbar for Webkit browsers */
html::-webkit-scrollbar, 
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Force visible scrollbars on elements that need them */
.comparison-table-wrapper, .product-specs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: block !important;
  max-width: 100% !important;
}

/* Article content containers with horizontal scroll */
.article-content-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.5rem 0;
  padding-bottom: 10px; /* Space for scrollbar */
  position: relative;
}

/* Product comparison table with horizontal scroll */
.comparison-table-wrapper,
.product-comparison-table {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin: 2rem 0;
  padding-bottom: 12px; /* Space for scrollbar */
  position: relative;
}

/* Product specs container */
.product-specs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 10px; /* Space for scrollbar */
  position: relative;
}

/* Code blocks and technical specs with horizontal scroll */
pre, .tech-specs-container, .image-gallery {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1rem 0;
  padding-bottom: 10px; /* Space for scrollbar */
}

/* Custom horizontal scrollbar styling - Webkit Browsers */
.article-content-scroll::-webkit-scrollbar,
.product-comparison-table::-webkit-scrollbar,
.comparison-table-wrapper::-webkit-scrollbar,
.product-specs::-webkit-scrollbar,
pre::-webkit-scrollbar,
.tech-specs-container::-webkit-scrollbar,
.image-gallery::-webkit-scrollbar {
  height: var(--article-scrollbar-height);
  width: 0; /* No vertical scrollbar */
}

.article-content-scroll::-webkit-scrollbar-track,
.product-comparison-table::-webkit-scrollbar-track,
.comparison-table-wrapper::-webkit-scrollbar-track,
.product-specs::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track,
.tech-specs-container::-webkit-scrollbar-track,
.image-gallery::-webkit-scrollbar-track {
  background: var(--article-scrollbar-track);
  border-radius: var(--article-scrollbar-border-radius);
  margin: 0 15px;
}

.article-content-scroll::-webkit-scrollbar-thumb,
.product-comparison-table::-webkit-scrollbar-thumb,
.comparison-table-wrapper::-webkit-scrollbar-thumb,
.product-specs::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.tech-specs-container::-webkit-scrollbar-thumb,
.image-gallery::-webkit-scrollbar-thumb {
  background: var(--article-scrollbar-thumb);
  border-radius: var(--article-scrollbar-border-radius);
  box-shadow: var(--article-scrollbar-shadow);
  background-image: linear-gradient(90deg, var(--article-scrollbar-thumb) 0%, var(--article-scrollbar-thumb-hover) 100%);
}

.article-content-scroll::-webkit-scrollbar-thumb:hover,
.product-comparison-table::-webkit-scrollbar-thumb:hover,
.comparison-table-wrapper::-webkit-scrollbar-thumb:hover,
.product-specs::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover,
.tech-specs-container::-webkit-scrollbar-thumb:hover,
.image-gallery::-webkit-scrollbar-thumb:hover {
  background: var(--article-scrollbar-thumb-hover);
  background-image: linear-gradient(90deg, var(--article-scrollbar-thumb-hover) 0%, var(--article-scrollbar-thumb) 100%);
}

/* Firefox specific */
.article-content-scroll,
.product-comparison-table,
.comparison-table-wrapper,
.product-specs,
pre,
.tech-specs-container,
.image-gallery {
  scrollbar-width: thin;
  scrollbar-color: var(--article-scrollbar-thumb) var(--article-scrollbar-track);
}

/* Dark theme support */
body.dark-mode {
  --article-scrollbar-track: rgba(30, 32, 35, 0.8);
  --article-scrollbar-thumb: #4e67d1;
  --article-scrollbar-thumb-hover: #5d3b87;
}

/* Scroll indicators for mobile devices (where scrollbars might be hidden) */
.has-scroll-indicator {
  position: relative;
}

.has-scroll-indicator::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 10px;
  width: 30px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

body.dark-mode .has-scroll-indicator::after {
  background: linear-gradient(90deg, rgba(26,26,26,0) 0%, rgba(26,26,26,0.8) 100%);
}

.has-scroll-indicator.scrolled-end::after {
  opacity: 0;
}

/* Hide horizontal scrollbar on mobile devices */
@media (max-width: 768px) {
  .article-content-scroll::-webkit-scrollbar,
  .product-comparison-table::-webkit-scrollbar,
  pre::-webkit-scrollbar,
  .tech-specs-container::-webkit-scrollbar,
  .image-gallery::-webkit-scrollbar {
    height: 4px;
  }
  
  /* Scroll hint for mobile */
  .scroll-hint {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: rgba(102, 126, 234, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  
  .scroll-hint span {
    display: flex;
    align-items: center;
  }
  
  body.dark-mode .scroll-hint {
    background: rgba(78, 103, 209, 0.9);
  }
}