/* ========================================
   BLUVIA — Global Responsive Improvements
   ======================================== */

/* ── Tablet landscape (1024-1200px) ── */
@media (max-width: 1200px) and (min-width: 769px) {
  .sidebar { width: 180px; }
  .home-main, main { margin-left: 180px !important; }
  .home-content { padding: 1.5rem !important; }
  .home-hero { height: 360px !important; }
  .hero-slide-left { max-width: 60% !important; }
  .hero-slide-left h2 { font-size: 1.75rem !important; }
  .footer-inner { max-width: 800px; gap: 2rem !important; }
}

/* ── Tablet portrait (768-1024px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar { width: 160px; }
  .home-main, main { margin-left: 160px !important; }
  .home-content { padding: 1rem !important; }
  .home-hero { height: 320px !important; }
  .hero-slide-left { max-width: 65% !important; padding: 1.5rem !important; }
  .hero-slide-left h2 { font-size: 1.5rem !important; }
  .hero-slide-left .desc { -webkit-line-clamp: 3; font-size: 0.8rem !important; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem !important; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .home-main, main { margin-left: 0 !important; padding-top: 0 !important; }
  .home-content { padding: 0.75rem !important; }
  .home-hero {
    height: 280px !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    position: relative !important;
  }
  .hero-slide {
    grid-template-columns: 1fr !important;
    position: relative !important;
  }
  }
  .hero-slide-left {
    max-width: 100% !important;
    padding: 1.25rem 1rem !important;
    justify-content: flex-end !important;
    background: none !important;
  }
  .hero-slide-left h2 {
    font-size: 1.3rem !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
  }
  .hero-slide-left .badge {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
  }
  .hero-actions { gap: 0.5rem !important; }
  .hero-actions .btn { font-size: 0.75rem !important; padding: 0.4rem 0.9rem !important; }
  .hero-nav { display: none !important; }
  .hero-slide-left h2 { font-size: 1.25rem !important; }
  .hero-slide-left .desc { display: none !important; }
  .hero-slide-left .badge { margin-bottom: 0.5rem !important; font-size: 0.65rem !important; }
  .hero-actions { gap: 0.5rem !important; }
  .hero-actions .btn { padding: 0.4rem 0.8rem !important; font-size: 0.75rem !important; }
  .hero-nav { display: none !important; }
  
  /* Card grid mobile */
  .section-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .drama-card { min-width: 110px !important; }
  .drama-card .card-title { font-size: 0.7rem !important; }
  .drama-card .card-meta { font-size: 0.65rem !important; }
  
  /* Ranking list mobile */
  .ranking-list { gap: 0.5rem !important; }
  
  /* Footer mobile */
  .site-footer { padding: 1rem 0.75rem !important; }
  .footer-inner { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 0 !important; }
  .footer-links { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
  .footer-desc { max-width: 100% !important; }
  
  /* App download banner */
  .app-download-banner { padding: 0.5rem 0.75rem !important; }
  .app-download-banner-inner { gap: 0.5rem !important; }
  .app-download-banner-title { font-size: 0.8rem !important; }
  .app-download-banner-sub { font-size: 0.65rem !important; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .home-hero { height: 220px !important; }
  .hero-slide-left { padding: 0.75rem !important; }
  .hero-slide-left h2 { font-size: 1.1rem !important; }
  .hero-slide-left .ep-label { font-size: 0.7rem !important; }
  .hero-actions .btn { padding: 0.35rem 0.7rem !important; font-size: 0.7rem !important; }
  
  .section-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 0.4rem !important;
  }
  .drama-card { min-width: 100px !important; }
  .drama-card .card-title { font-size: 0.65rem !important; -webkit-line-clamp: 2; }
  
  .home-content { padding: 0.5rem !important; }
  .home-content h2 { font-size: 1rem !important; }
  
  /* Footer simplification */
  .footer-brand { text-align: center; align-items: center; }
  .footer-social { justify-content: center; }
  .footer-links { grid-template-columns: 1fr 1fr !important; }
}

/* ── Large desktop (>1920px) ── */
@media (min-width: 1920px) {
  .home-content { max-width: 1600px; margin: 0 auto; }
  .footer-inner { max-width: 1400px; }
}


/* ========================================
   PLAYER — Responsive Improvements
   ======================================== */
@media (max-width: 768px) {
  .player-wrapper { padding: 0 !important; }
  .video-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .video-container video { max-height: 56.25vw; }
  .quality-picker {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  .quality-picker .quality-btn {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.7rem !important;
  }
  .player-info { padding: 0.75rem !important; }
  .episode-info-bar { padding: 0.5rem 0.75rem !important; }
  .episodes-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .episode-card { padding: 0.5rem !important; font-size: 0.75rem !important; }
  .player-header h1 { font-size: 1rem !important; }
  .nav-btn { padding: 0.4rem 0.8rem !important; font-size: 0.75rem !important; }
}

@media (max-width: 480px) {
  .video-container video { max-height: 50vw; }
  .episodes-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  }
  .quality-picker { justify-content: center !important; }
}

/* ========================================
   DRAMA DETAIL — Responsive Improvements
   ======================================== */
@media (max-width: 768px) {
  .drama-hero { min-height: auto !important; padding: 1rem 0 !important; }
  .drama-hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  .drama-poster-wrap { width: 140px !important; flex-shrink: 0; }
  .drama-poster-img { width: 140px !important; height: 210px !important; }
  .drama-info { width: 100% !important; }
  .drama-info h1 { font-size: 1.25rem !important; }
  .drama-meta { justify-content: center !important; flex-wrap: wrap !important; }
  .drama-actions { justify-content: center !important; flex-wrap: wrap !important; }
  
  .episode-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .episode-card { padding: 0.5rem !important; font-size: 0.7rem !important; }
  
  .tab-buttons { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .tab-btn { white-space: nowrap !important; padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; }
}

@media (max-width: 480px) {
  .drama-poster-wrap { width: 120px !important; }
  .drama-poster-img { width: 120px !important; height: 180px !important; }
  .drama-info h1 { font-size: 1.1rem !important; }
  .episode-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
  }
}

/* ========================================
   SEARCH — Responsive Improvements
   ======================================== */
@media (max-width: 768px) {
  .search-container { padding: 0.75rem !important; }
  .search-input { font-size: 0.9rem !important; padding: 0.6rem 0.9rem !important; }
  .drama-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .drama-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  }
}

/* ========================================
   LOGIN / REGISTER — Mobile
   ======================================== */
@media (max-width: 480px) {
  .login-form-side { padding: 1.25rem !important; }
  .login-form-side h2 { font-size: 1.2rem !important; }
  .login-form { gap: 0.75rem !important; }
  .form-group input { padding: 0.6rem 0.8rem !important; font-size: 0.9rem !important; }
  .login-form .btn { padding: 0.7rem !important; font-size: 0.9rem !important; }
}

/* ========================================
   KATEGORI / ONGOING / TERBARU — Mobile
   ======================================== */
@media (max-width: 768px) {
  .category-tabs { overflow-x: auto !important; gap: 0.5rem !important; padding: 0.5rem !important; }
  .category-tab { white-space: nowrap !important; padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; }
}

/* ========================================
   ADMIN — Mobile
   ======================================== */
@media (max-width: 768px) {
  .admin-container { padding: 0.5rem !important; }
  .admin-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; }
  .admin-table { font-size: 0.75rem !important; }
  .admin-table th, .admin-table td { padding: 0.4rem !important; }
}

/* ========================================
   MODAL / OVERLAY — Mobile
   ======================================== */
@media (max-width: 768px) {
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    padding: 1rem !important;
    margin: 0.5rem auto !important;
  }
  .modal-header h2 { font-size: 1.1rem !important; }
  .lock-overlay { padding: 1rem !important; }
  .lock-overlay h3 { font-size: 1rem !important; }
  .lock-actions { flex-direction: column !important; gap: 0.5rem !important; }
  .lock-btn { width: 100% !important; }
}


/* ========================================
   BUG 2: FAVORIT page — desktop layout
   ======================================== */
@media (min-width: 769px) {
  .page-header {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 2rem 0.5rem;
    position: static;
    background: transparent;
  }
  .page-back { display: none !important; }
  .page-title { font-size: 1.5rem !important; }
  
  #fav-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
  }
  .fav-count { font-size: 0.9rem !important; padding: 0.5rem 0 1rem !important; }
  .fav-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 1.25rem !important;
    padding: 0 !important;
  }
  .fav-item .fav-title { font-size: 0.85rem !important; }
  
  /* Hide mobile bottom-nav on desktop */
  /* Keep bottom-nav visible on desktop for mobile-first pages (favorit, akun) */
  /* But hide if a desktop sidebar/topnav is present */
  body:has(.sidebar) .bottom-nav { display: none !important; }
}

/* ========================================
   BUG 4: AKUN page — desktop layout
   ======================================== */
@media (min-width: 769px) {
  .akun-container, .account-container, [class*=account-page] {
    max-width: 800px !important;
    margin: 2rem auto !important;
    padding: 2rem !important;
  }
  .akun-header, .account-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  .akun-avatar, .account-avatar {
    width: 80px !important;
    height: 80px !important;
  }
  .akun-info, .account-info { flex: 1; }
  .akun-menu, .account-menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
  }
  .akun-menu-item, .account-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
  }
  .akun-menu-item:hover, .account-menu-item:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.04)) !important;
  }
  .akun-menu-item svg, .account-menu-item svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
  }
  .akun-menu-item .menu-text, .account-menu-item .menu-text {
    flex: 1;
  }
  .akun-menu-item .menu-title, .account-menu-item .menu-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
  .akun-menu-item .menu-desc, .account-menu-item .menu-desc {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
  }
}

/* ========================================
   BUG 5: Avatar icon for "Halo, Pengunjung"
   ======================================== */
.sidebar-profile .avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.sidebar-profile .avatar img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.sidebar-profile .avatar svg {
  width: 24px !important;
  height: 24px !important;
  color: #fff !important;
}

/* ======================================== 
   QUICK FIXES - MOBILE UI IMPROVEMENTS
   Date: 2026-09-23
======================================== */

/* ===========================
   FIX 1: Better Mobile Card Spacing
   =========================== */
@media (max-width: 768px) {
  .home-content {
    padding: 0 0.75rem !important;
  }
  
  .drama-card-grid, 
  .trending-carousel,
  .episode-list {
    gap: 12px !important;
  }
  
  .drama-card {
    min-width: 140px !important;
    height: auto !important;
    aspect-ratio: 2/3 !important;
  }
  
  .drama-card img {
    border-radius: 6px !important;
  }
}

/* ===========================
   FIX 2: Uniform Aspect Ratio
   =========================== */
.drama-card-poster,
.episode-thumbnail,
.card-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
  display: block !important;
}

/* ===========================
   FIX 3: Enhanced Hero Banner Overlay
   =========================== */
.hero-banner {
  position: relative;
}

.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.6) 50%,
    rgba(0,0,0,0.9) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title,
.hero-description {
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

/* ===========================
   FIX 4: Bigger Touch Targets
   =========================== */
@media (max-width: 768px) {
  button,
  a.btn,
  .card-action {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
  }
  
  .nav-item,
  .sidebar-menu a {
    padding: 12px 16px !important;
    min-height: 48px !important;
  }
  
  .episode-card:hover,
  .episode-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
}

/* ===========================
   FIX 5: Better Episode Badge Styling
   =========================== */
.ep-badge,
.episode-number.badge,
[data-badge=ep] {
  background: linear-gradient(135deg, #ff4757, #ff6b81) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4) !important;
}

.episode-badge.new {
  background: linear-gradient(135deg, #2ed573, #7bed9f) !important;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.ep-placeholder,
[data-badge=?] {
  display: none !important;
}