/* Custom scrollbar for webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Page transition effect */
.page-transition {
  animation: fadeOut 0.15s ease-out;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

/* CSS Custom Properties for responsive heights */
:root {
  --header-height: 56px;
  --category-height: 54px;
  --total-top-height: calc(var(--header-height) + var(--category-height));
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 320px) {
  :root {
    --header-height: 52px;
    --category-height: 50px;
  }
}

@media (min-width: 768px) {
  :root {
    --header-height: 60px;
    --category-height: 58px;
  }
}

/* TikTok/Instagram Reels Style News Feed - Create physical space */
.swipe-container {
  position: fixed;
  top: 110px; /* Start after header + category tabs */
  left: 0;
  right: 0;
  bottom: 56px; /* End before footer navigation */
  z-index: 5; /* Below header and category tabs */
  overflow: hidden;
  background-color: #f5f5f5;
  touch-action: none;
  box-sizing: border-box;
}

/* Exclude trending page from these styles - adjust for physical space */
body:not(.trending-page) .swipe-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; /* Use full container height */
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  touch-action: none;
  background-color: #fff;
}

.swipe-card.swiping {
  transition: none;
}

.swipe-card.swipe-left {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}

.swipe-card.swipe-right {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.swipe-card.swipe-up {
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.swipe-card.swipe-down {
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Image section - optimized for better visibility */
body:not(.trending-page) .image-section {
  position: relative;
  height: 45%; /* Use percentage of card height */
  min-height: 200px; /* Ensure minimum visibility */
  max-height: 50%; /* Don't dominate the card */
  width: 100%;
  overflow: hidden;
}

.swipe-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Content section - responsive padding and spacing */
body:not(.trending-page) .content-section {
  position: relative;
  flex: 1;
  width: 100%;
  background-color: white;
  padding: clamp(6px, 2vw, 12px) clamp(8px, 3vw, 16px); /* Reduced padding for more space */
  padding-bottom: clamp(60px, 15vw, 75px); /* Dynamic space for action buttons */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* No scrolling */
  min-height: 0; /* Enable flex shrinking */
  justify-content: flex-start; /* Pack content to top */
  box-sizing: border-box; /* Include padding in height calculations */
}

/* Remove dark overlay */
.gradient-overlay {
  display: none;
}

/* Category tabs - in dedicated space right after header */
.category-container-wrapper,
.fixed.top-14.z-40.bg-white.border-b.border-gray-100.w-full.left-0.right-0 {
  position: fixed !important;
  top: 56px !important; /* Right after header */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 54px !important; /* Fixed height */
  background-color: white !important;
  border-bottom: 1px solid rgba(238, 238, 238, 0.8) !important;
  z-index: 45 !important; /* Above swipe content and in dedicated space */
  margin: 0 !important;
  transform: none !important;
}

/* Source badge and metadata - compact size */
.news-source-badge {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: clamp(4px, 1vw, 6px); /* More compact margin */
  color: #333;
  flex-wrap: wrap;
  font-size: clamp(0.65rem, 1.8vw, 0.75rem); /* Smaller text */
  flex-shrink: 0; /* Don't shrink this element */
}

/* News content styling */
.swipe-card-content {
  position: relative;
  color: #333;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* Optimized headline size with proper responsive scaling */
.swipe-card h2 {
  font-size: clamp(0.75rem, 3.5vw, 1.4rem); /* More conservative scaling */
  line-height: clamp(1.1, 1.3, 1.4); /* Tighter line-height for space efficiency */
  margin-bottom: clamp(8px, 2.5vw, 14px); /* Increased spacing for better visual separation */
  font-weight: 700;
  color: #111;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Max 2 lines for headline to save space */
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0; /* Don't shrink headlines */
}

/* Bullet points text */
.swipe-card p {
  font-size: clamp(0.8rem, 2.2vw, 1rem); /* Slightly reduced */
  line-height: clamp(1.1rem, 2.8vw, 1.4rem); /* Slightly reduced */
  margin-bottom: 4px; /* Reduced from clamp(4px, 1vh, 8px) */
  color: #333;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Action buttons - positioned within card */
.swipe-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* Position at bottom of card */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px); /* Responsive padding */
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(238, 238, 238, 0.8);
  z-index: 10; /* Above card content */
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: clamp(50px, 12vw, 60px); /* Consistent button area height */
}

@media (min-width: 1024px) {
  .swipe-actions {
    max-width: 100%;
    left: 0;
    transform: none;
  }
}

.swipe-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px; /* Reduced from 4px */
}

.swipe-action-button {
  width: clamp(28px, 7vw, 36px); /* Reduced from clamp(32px, 8vw, 40px) */
  height: clamp(28px, 7vw, 36px); /* Reduced from clamp(32px, 8vw, 40px) */
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Added shadow for better visibility */
  transition: all 0.2s ease;
}

/* Primary action button styling - Read More button */
.swipe-action-button.primary-action {
  background-color: #2A5C99; /* Primary blue background */
  color: white;
  width: clamp(32px, 8vw, 40px); /* Slightly larger than other buttons */
  height: clamp(32px, 8vw, 40px);
  box-shadow: 0 2px 8px rgba(42, 92, 153, 0.3); /* Blue shadow for prominence */
  transform: scale(1.05); /* Slightly larger scale */
}

.swipe-action-button.primary-action:hover {
  background-color: #1e4a7a; /* Darker blue on hover */
  transform: scale(1.1);
  box-shadow: 0 3px 12px rgba(42, 92, 153, 0.4);
}

.swipe-action-label {
  font-size: clamp(9px, 1.8vw, 11px); /* Reduced from clamp(10px, 2vw, 12px) */
  color: #666;
  transition: all 0.2s ease;
}

/* Primary action label styling - Read More label */
.primary-action + .swipe-action-label {
  color: #2A5C99; /* Primary blue color */
  font-weight: 600; /* Bolder text */
  font-size: clamp(10px, 2vw, 12px); /* Slightly larger text */
}

.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(40px, 10vw, 60px);
  height: clamp(40px, 10vw, 60px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(18px, 5vw, 24px);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.swipe-indicator-left {
  left: 20px;
  background-color: rgba(255, 0, 0, 0.2);
  color: red;
}

.swipe-indicator-right {
  right: 20px;
  background-color: rgba(0, 255, 0, 0.2);
  color: green;
}

.swipe-indicator.visible {
  opacity: 1;
}

.social-share-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  margin: 0 auto;
  color: #333;
}

@media (min-width: 769px) {
  .social-share-overlay {
    max-width: 375px;
  }
}

.social-share-overlay.visible {
  transform: translateY(0);
}

.no-scroll {
  overflow: hidden;
  touch-action: none;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Stats display - reduced size */
.news-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* Reduced from 8px */
  margin-bottom: 6px; /* Reduced from clamp(8px, 2vh, 12px) */
  font-size: clamp(0.6rem, 1.8vw, 0.7rem); /* Reduced from clamp(0.7rem, 2vw, 0.8rem) */
  color: #666;
}

/* Bullet points container - adaptive to content amount */
.news-bullet-points {
  margin: clamp(6px, 2vw, 12px) 0; /* Increased top margin for better separation from headline */
  overflow: hidden; /* No scrolling */
  flex: 1; /* Take remaining space */
  display: flex; /* Use flex for better distribution */
  flex-direction: column;
  justify-content: space-evenly; /* Better distribution */
  padding-left: 0; /* Remove default padding */
  min-height: 0; /* Allow shrinking */
  max-height: 100%; /* Ensure content fits */
}

/* Convert to proper list when it's a ul/ol */
.news-bullet-points ul, .news-bullet-points ol {
  list-style-position: outside;
  padding-left: clamp(16px, 4vw, 20px); /* Responsive indentation */
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

.news-bullet-points li {
  margin-bottom: clamp(4px, 1.5vw, 8px); /* Responsive spacing */
  line-height: clamp(1.3, 1.4, 1.5); /* Consistent line height */
  padding-left: clamp(4px, 1vw, 8px); /* Extra padding for text */
  flex: 1; /* Equal distribution */
  display: flex;
  align-items: flex-start;
}

/* Bullet point item - adaptive spacing */
.bullet-point-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1.5vw, 10px); /* Responsive gap */
  margin-bottom: 0; /* Let parent container handle spacing */
  flex: 1; /* Equal height distribution */
  min-height: 0; /* Allow shrinking */
  padding-left: clamp(4px, 1vw, 8px); /* Proper indentation */
  padding-bottom: clamp(2px, 1vw, 6px); /* Dynamic bottom spacing */
}

.bullet-point-marker {
  color: #2563eb; /* Primary color for bullet */
  flex-shrink: 0;
  font-size: clamp(0.8em, 1.2em, 1.4em); /* Responsive bullet size */
  line-height: 1;
  width: clamp(12px, 3vw, 16px); /* Fixed width for alignment */
  text-align: center;
  margin-top: clamp(2px, 0.5vw, 4px); /* Align with text */
}

.bullet-point-text {
  flex: 1;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Rich text support */
.bullet-point-text b, 
.bullet-point-text strong {
  font-weight: 700;
}

.bullet-point-text i,
.bullet-point-text em {
  font-style: italic;
}

/* Advanced dynamic sizing based on bullet point count for optimal space utilization */
.points-1 .bullet-point-text {
  font-size: clamp(0.9rem, 4.2vw, 1.4rem); /* Maximum size for single point */
  line-height: clamp(1.4, 1.6, 1.8); /* Generous breathing room */
  margin-bottom: clamp(8px, 2.5vw, 12px); /* Extra spacing */
}

.points-2 .bullet-point-text {
  font-size: clamp(0.85rem, 3.8vw, 1.25rem); /* Large size for two points */
  line-height: clamp(1.35, 1.55, 1.7);
  margin-bottom: clamp(6px, 2vw, 10px);
}

.points-3 .bullet-point-text {
  font-size: clamp(0.8rem, 3.4vw, 1.1rem); /* Balanced medium size */
  line-height: clamp(1.3, 1.5, 1.6);
  margin-bottom: clamp(5px, 1.5vw, 8px);
}

.points-4 .bullet-point-text {
  font-size: clamp(0.75rem, 3vw, 1rem); /* Compact for 4 points */
  line-height: clamp(1.25, 1.4, 1.5);
  margin-bottom: clamp(4px, 1.2vw, 6px);
}

.points-5 .bullet-point-text {
  font-size: clamp(0.7rem, 2.6vw, 0.95rem); /* Tight for 5 points */
  line-height: clamp(1.2, 1.35, 1.45);
  margin-bottom: clamp(3px, 0.8vw, 5px);
}

.points-6 .bullet-point-text {
  font-size: clamp(0.65rem, 2.3vw, 0.9rem); /* Very compact for 6 points */
  line-height: clamp(1.15, 1.3, 1.4);
  margin-bottom: clamp(2px, 0.6vw, 4px);
}

.points-7 .bullet-point-text, .points-8 .bullet-point-text {
  font-size: clamp(0.6rem, 2vw, 0.85rem); /* Minimal for many points */
  line-height: clamp(1.1, 1.25, 1.35);
  margin-bottom: clamp(1px, 0.4vw, 3px);
}

.points-9 .bullet-point-text, .points-10 .bullet-point-text {
  font-size: clamp(0.55rem, 1.8vw, 0.8rem); /* Ultra-compact for maximum points */
  line-height: clamp(1.05, 1.2, 1.3);
  margin-bottom: clamp(1px, 0.2vw, 2px);
}

/* Media queries for different screen sizes */
/* iPhone SE and smaller screens - ultra-compact layout */
@media (max-width: 375px) {
  body:not(.trending-page) .image-section {
    height: 35%; /* Even more compact image for small screens */
    min-height: 120px;
    max-height: 40%;
  }
  
  body:not(.trending-page) .content-section {
    padding: clamp(4px, 1.5vw, 8px) clamp(6px, 2vw, 12px); /* Tighter padding */
    padding-bottom: clamp(50px, 12vw, 65px); /* Reduced space for buttons */
  }
  
  .swipe-card h2 {
    font-size: clamp(0.75rem, 3.2vw, 1.1rem) !important; /* Smaller headlines */
    margin-bottom: clamp(6px, 1.8vw, 10px) !important; /* Better spacing even on small screens */
    -webkit-line-clamp: 2; /* Ensure 2-line limit */
  }
  
  .swipe-actions {
    padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 14px); /* Tighter spacing */
    min-height: clamp(45px, 10vw, 55px); /* Smaller button area */
  }
  
  .bullet-point-item {
    gap: clamp(3px, 1vw, 6px); /* Tighter bullet spacing */
    padding-left: clamp(2px, 0.5vw, 4px); /* Minimal indentation */
    padding-bottom: clamp(1px, 0.5vw, 3px); /* Reduced bottom spacing */
  }
  
  .bullet-point-marker {
    width: clamp(8px, 2vw, 12px); /* Smaller bullet area */
    font-size: clamp(0.8em, 1em, 1.1em);
    margin-top: clamp(1px, 0.3vw, 2px);
  }
  
  .news-bullet-points {
    margin: clamp(5px, 1.5vw, 8px) 0; /* Improved margin for better separation */
  }
  
  .news-bullet-points ul, .news-bullet-points ol {
    padding-left: clamp(8px, 2vw, 14px); /* Tighter indentation */
  }
  
  .news-source-badge {
    font-size: clamp(0.6rem, 1.5vw, 0.7rem) !important; /* Smaller source badge */
    margin-bottom: clamp(2px, 0.5vw, 4px) !important;
  }
  
  /* Optimized text sizes for small screens */
  .points-1 .bullet-point-text {
    font-size: clamp(0.75rem, 3.2vw, 1rem) !important;
    line-height: 1.4 !important;
  }
  
  .points-2 .bullet-point-text {
    font-size: clamp(0.7rem, 3vw, 0.95rem) !important;
    line-height: 1.35 !important;
  }
  
  .points-3 .bullet-point-text {
    font-size: clamp(0.65rem, 2.8vw, 0.9rem) !important;
    line-height: 1.3 !important;
  }
  
  .points-4 .bullet-point-text, .points-5 .bullet-point-text {
    font-size: clamp(0.6rem, 2.5vw, 0.85rem) !important;
    line-height: 1.25 !important;
  }
  
  .points-6 .bullet-point-text, .points-7 .bullet-point-text, .points-8 .bullet-point-text {
    font-size: clamp(0.55rem, 2.2vw, 0.8rem) !important;
    line-height: 1.2 !important;
  }
}

/* iPad Mini and larger screens - enhanced layout */
@media (min-width: 768px) {  
  body:not(.trending-page) .image-section {
    height: 42%; /* Optimized image size */
    min-height: 220px;
    max-height: 48%;
  }
  
  body:not(.trending-page) .content-section {
    padding: clamp(10px, 2.5vw, 16px) clamp(14px, 3.5vw, 20px); /* More generous padding */
    padding-bottom: clamp(70px, 16vw, 85px); /* Adequate space for buttons */
  }
  
  .swipe-card h2 {
    font-size: clamp(1.1rem, 2.8vw, 1.8rem) !important; /* Optimized for tablets */
    margin-bottom: clamp(10px, 2.5vw, 16px) !important; /* Enhanced spacing for tablets */
    -webkit-line-clamp: 2; /* Maintain line limit */
  }
  
  .news-bullet-points {
    margin: clamp(14px, 3.5vw, 20px) 0; /* Even more generous breathing room for tablets */
  }
  
  .news-bullet-points ul, .news-bullet-points ol {
    padding-left: clamp(20px, 5vw, 28px); /* Proportional indentation */
  }
  
  .bullet-point-item {
    gap: clamp(8px, 2vw, 12px); /* Spacious bullet layout */
    padding-left: clamp(6px, 1.5vw, 10px);
    padding-bottom: clamp(4px, 1vw, 8px);
  }
  
  .bullet-point-marker {
    width: clamp(14px, 3.5vw, 18px); /* Proportional bullet area */
    font-size: clamp(1.1em, 1.3em, 1.5em);
    margin-top: clamp(2px, 0.5vw, 4px);
  }
  
  .swipe-actions {
    padding: clamp(10px, 2.5vw, 16px) clamp(16px, 4vw, 24px); /* Generous spacing */
    min-height: clamp(55px, 13vw, 70px);
  }
  
  .news-source-badge {
    font-size: clamp(0.7rem, 1.8vw, 0.85rem) !important;
    margin-bottom: clamp(5px, 1.2vw, 8px) !important;
  }
  
  /* Optimized text sizes for tablet readability */
  .points-1 .bullet-point-text {
    font-size: clamp(1.1rem, 2.8vw, 1.5rem) !important;
    line-height: 1.6 !important;
  }
  
  .points-2 .bullet-point-text {
    font-size: clamp(1rem, 2.6vw, 1.4rem) !important;
    line-height: 1.55 !important;
  }
  
  .points-3 .bullet-point-text {
    font-size: clamp(0.95rem, 2.4vw, 1.3rem) !important;
    line-height: 1.5 !important;
  }
  
  .points-4 .bullet-point-text {
    font-size: clamp(0.9rem, 2.2vw, 1.2rem) !important;
    line-height: 1.45 !important;
  }
  
  .points-5 .bullet-point-text, .points-6 .bullet-point-text {
    font-size: clamp(0.85rem, 2vw, 1.1rem) !important;
    line-height: 1.4 !important;
  }
  
  .points-7 .bullet-point-text, .points-8 .bullet-point-text {
    font-size: clamp(0.8rem, 1.8vw, 1.05rem) !important;
    line-height: 1.35 !important;
  }
}

/* Desktop and large screens - premium layout */
@media (min-width: 1024px) {
  .swipe-card {
    max-width: 450px; /* Slightly more compact for better proportions */
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .swipe-card.swipe-left {
    transform: translateX(calc(-50% - 100%));
  }
  
  .swipe-card.swipe-right {
    transform: translateX(calc(-50% + 100%));
  }
  
  body:not(.trending-page) .image-section {
    height: 40%; /* Balanced image size for desktop */
    min-height: 200px;
    max-height: 45%;
  }
  
  body:not(.trending-page) .content-section {
    padding: clamp(14px, 3vw, 20px) clamp(18px, 4vw, 24px);
    padding-bottom: clamp(75px, 18vw, 90px);
  }
  
  .swipe-card h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important; /* Professional headline size */
    margin-bottom: clamp(12px, 2.8vw, 18px) !important; /* Premium spacing for desktop */
  }
  
  .swipe-actions {
    padding: clamp(12px, 3vw, 18px) clamp(20px, 5vw, 28px);
    min-height: clamp(60px, 14vw, 75px);
  }
  
  .swipe-action-button {
    width: clamp(36px, 8vw, 44px); /* Larger buttons for desktop */
    height: clamp(36px, 8vw, 44px);
  }
  
  .swipe-action-button.primary-action {
    width: clamp(40px, 9vw, 48px);
    height: clamp(40px, 9vw, 48px);
  }
  
  /* Desktop-optimized text sizes */
  .points-1 .bullet-point-text {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem) !important;
    line-height: 1.6 !important;
  }
  
  .points-2 .bullet-point-text {
    font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
    line-height: 1.55 !important;
  }
  
  .points-3 .bullet-point-text {
    font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
    line-height: 1.5 !important;
  }
  
  .points-4 .bullet-point-text, .points-5 .bullet-point-text {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
    line-height: 1.45 !important;
  }
  
  .points-6 .bullet-point-text, .points-7 .bullet-point-text, .points-8 .bullet-point-text {
    font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important;
    line-height: 1.4 !important;
  }
}

/* Improve category container styling - stable across all pages */
#categoryContainer, .category-container-wrapper > #categoryContainer {
  position: relative;
  z-index: 51; /* Higher than the wrapper */
}

/* Ensure category tabs container structure remains stable */
.fixed.top-14.z-40.bg-white.border-b.border-gray-100.w-full.left-0.right-0 #categoryContainer {
  position: relative !important;
  width: 100% !important;
  max-width: 375px !important;
  margin: 0 auto !important;
  z-index: 51 !important;
}

/* Fix gradient overlays on sides of category container */
#categoryContainer > div.absolute, 
.category-container-wrapper > #categoryContainer > div.absolute {
  background: none; /* Remove the white gradient backgrounds */
  z-index: 52; /* Ensure they're above the buttons */
}

/* Improve active category button visibility */
.category-btn.active, .category-btn.bg-primary {
  position: relative;
  z-index: 5; /* Ensure active button is above others */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow for depth */
}

/* Category button adjustments */
.category-btn {
  font-size: 0.8rem; /* Reduced from text-sm (0.875rem) by ~20% */
  padding: 6px 12px; /* Reduced from px-4 py-2 (16px 8px) */
}

/* Header positioning - only target top header, not footer */
nav.fixed.top-0 {
  position: sticky !important;
  top: 0;
  z-index: 50;
}

/* YouTube Shorts-style preview cards */
.preview-card {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  pointer-events: none; /* Prevent interaction with preview cards */
  z-index: 1; /* Below current card */
}

.preview-next {
  transform: translateY(100%); /* Start below viewport */
}

.preview-prev {
  transform: translateY(-100%); /* Start above viewport */
}

/* Smooth transitions for preview cards */
.preview-card * {
  transition: none !important; /* Disable transitions during preview to prevent lag */
}

/* Enhanced swipe card transitions */
.swipe-card.swiping {
  transition: none !important; /* Disable transitions during active swipe */
}

.swipe-card:not(.swiping) {
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease !important;
}

/* Category sliding animation styles */
.category-slide-container {
  position: relative;
  width: 200%;
  height: 100%;
  display: flex;
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.category-content {
  width: 50%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}

/* Smooth category button transitions during swipe */
.category-btn {
  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced category container for smooth scrolling */
#categoryContainer {
  scroll-behavior: smooth;
  transition: scroll-left 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Prevent text selection during category swipe */
.category-container-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Category swipe feedback */
.category-btn.swipe-active {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(42, 92, 153, 0.3);
}


/* ===== RESPONSIVE CATEGORY CHIPS ===== */

/* Responsive Category Container */
.responsive-category-container {
  /* Mobile first - 375px max width */
  max-width: 375px;
}

/* Responsive category inner container */
.responsive-category-inner {
  /* Mobile first spacing */
  gap: clamp(6px, 1.5vw, 12px);
  padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 20px);
}

/* Responsive Category Chips */
.responsive-chip {
  /* Dynamic sizing based on screen width */
  font-size: clamp(0.75rem, 2.2vw, 1rem);
  padding: clamp(6px, 1.5vw, 12px) clamp(12px, 3vw, 20px);
  gap: clamp(4px, 1vw, 8px);
  
  /* Ensure good touch targets */
  min-height: clamp(32px, 8vw, 44px);
  
  /* Better visual feedback */
  border: 1px solid transparent;
}

/* Active state enhancement */
.responsive-chip.bg-primary {
  border-color: rgba(42, 92, 153, 0.3);
  box-shadow: 0 2px 8px rgba(42, 92, 153, 0.2);
}

/* Notification badges responsive sizing */
.responsive-chip .w-4 {
  width: clamp(14px, 3.5vw, 18px) !important;
  height: clamp(14px, 3.5vw, 18px) !important;
  font-size: clamp(8px, 2vw, 11px) !important;
}

/* Tablet breakpoint - 768px and up */
@media (min-width: 768px) {
  .responsive-category-container {
    max-width: 768px; /* Allow wider on tablets */
  }
  
  .responsive-category-inner {
    gap: clamp(8px, 2vw, 16px);
    padding: clamp(12px, 2.5vw, 20px) clamp(16px, 4vw, 28px);
    justify-content: center; /* Center chips on tablets */
  }
  
  .responsive-chip {
    font-size: clamp(0.85rem, 1.8vw, 1.1rem) !important;
    padding: clamp(8px, 1.8vw, 14px) clamp(16px, 3.5vw, 24px) !important;
    min-height: clamp(36px, 7vw, 48px);
  }
  
  .responsive-chip .w-4 {
    width: clamp(16px, 3vw, 20px) !important;
    height: clamp(16px, 3vw, 20px) !important;
    font-size: clamp(9px, 1.8vw, 12px) !important;
  }
}

/* Desktop breakpoint - 1024px and up */
@media (min-width: 1024px) {
  .responsive-category-container {
    max-width: 1200px; /* Full width on desktop */
  }
  
  .responsive-category-inner {
    gap: clamp(12px, 2.5vw, 20px);
    padding: clamp(16px, 3vw, 24px) clamp(20px, 5vw, 40px);
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on very wide screens */
  }
  
  .responsive-chip {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
    padding: clamp(10px, 2vw, 16px) clamp(18px, 4vw, 28px) !important;
    min-height: clamp(40px, 6vw, 52px);
    
    /* Hover effects for desktop */
    cursor: pointer;
  }
  
  .responsive-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .responsive-chip.bg-primary:hover {
    box-shadow: 0 4px 16px rgba(42, 92, 153, 0.3);
  }
  
  .responsive-chip .w-4 {
    width: clamp(18px, 2.5vw, 22px) !important;
    height: clamp(18px, 2.5vw, 22px) !important;
    font-size: clamp(10px, 1.5vw, 13px) !important;
  }
}

/* Large desktop - 1440px and up */
@media (min-width: 1440px) {
  .responsive-category-container {
    max-width: 1400px;
  }
  
  .responsive-category-inner {
    gap: 16px;
    padding: 20px 32px;
  }
  
  .responsive-chip {
    font-size: 1rem !important;
    padding: 12px 24px !important;
    min-height: 44px;
  }
  
  .responsive-chip .w-4 {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }
}


/* ===== RESPONSIVE CONTENT AREA ===== */

/* Responsive content area */
.responsive-content-area {
  max-width: 375px;
  padding-left: clamp(12px, 3vw, 20px);
  padding-right: clamp(12px, 3vw, 20px);
}

/* Tablet breakpoint */
@media (min-width: 768px) {
  .responsive-content-area {
    max-width: 768px;
    padding-left: clamp(16px, 4vw, 28px);
    padding-right: clamp(16px, 4vw, 28px);
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .responsive-content-area {
    max-width: 1200px;
    padding-left: clamp(20px, 5vw, 40px);
    padding-right: clamp(20px, 5vw, 40px);
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .responsive-content-area {
    max-width: 1400px;
    padding-left: 32px;
    padding-right: 32px;
  }
}


/* ===== iPhone XR AND LARGE MOBILE FIXES ===== */

/* iPhone XR, iPhone 11, iPhone XS Max - 414px width */
@media (min-width: 390px) and (max-width: 430px) {
  .responsive-category-container {
    max-width: 100%; /* Use full screen width */
  }
  
  .responsive-category-inner {
    gap: clamp(8px, 2vw, 12px);
    padding: clamp(10px, 2.5vw, 14px) clamp(8px, 2vw, 12px); /* Reduced side padding */
    justify-content: flex-start; /* Left-align for better space usage */
  }
  
  .responsive-chip {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
    padding: clamp(8px, 2vw, 12px) clamp(14px, 3.5vw, 18px) !important;
    min-height: clamp(34px, 8.5vw, 40px);
    flex-shrink: 0; /* Prevent chips from shrinking */
  }
  
  .responsive-chip .w-4 {
    width: clamp(15px, 3.8vw, 17px) !important;
    height: clamp(15px, 3.8vw, 17px) !important;
    font-size: clamp(9px, 2.2vw, 10px) !important;
  }
}

/* iPhone 14 Pro Max and similar - 430px width */
@media (min-width: 430px) and (max-width: 450px) {
  .responsive-category-container {
    max-width: 100%;
  }
  
  .responsive-category-inner {
    gap: clamp(10px, 2.2vw, 14px);
    padding: clamp(12px, 2.8vw, 16px) clamp(10px, 2.5vw, 14px);
    justify-content: flex-start;
  }
  
  .responsive-chip {
    font-size: clamp(0.85rem, 2.3vw, 1rem) !important;
    padding: clamp(9px, 2.2vw, 13px) clamp(15px, 3.7vw, 20px) !important;
    min-height: clamp(36px, 8.2vw, 42px);
  }
  
  .responsive-chip .w-4 {
    width: clamp(16px, 3.5vw, 18px) !important;
    height: clamp(16px, 3.5vw, 18px) !important;
    font-size: clamp(9px, 2vw, 11px) !important;
  }
}

/* Better edge utilization for all mobile devices */
@media (max-width: 767px) {
  .responsive-category-container {
    margin-left: 0;
    margin-right: 0;
  }
  
  .responsive-category-inner {
    padding-left: clamp(8px, 2vw, 16px) !important;
    padding-right: clamp(8px, 2vw, 16px) !important;
  }
  
  /* Remove excessive whitespace from gradient overlays */
  .responsive-category-inner .absolute {
    width: clamp(4px, 1vw, 8px) !important; /* Smaller gradient overlays */
  }
}