/* ============================================================
 * FILE: assets/css/style.css
 * ============================================================
 * Purpose   : Complete frontend stylesheet for DJSongs website.
 *             Covers layout, card UI, dark/light mode, badges,
 *             audio player, category grid, search, pagination,
 *             animations, loading states, and responsive design.
 *
 * Framework : Bootstrap 5.3 (CSS vars + utility-first base)
 * Fonts     : Inter (Google Fonts)
 * Icons     : Bootstrap Icons 1.11
 *
 * TABLE OF CONTENTS:
 *   1.  CSS Custom Properties (Design Tokens)
 *   2.  CSS Reset & Base
 *   3.  Typography
 *   4.  Layout Helpers
 *   5.  Navbar & Navigation
 *   6.  Search Bar & Suggestions
 *   7.  Section Headers
 *   8.  Song Card (Core Component)
 *   9.  Song Card Grid (Responsive Layout)
 *   10. Duration & Download Badges
 *   11. Category Grid
 *   12. Trending Page Styles
 *   13. Song Page (Audio Player)
 *   14. Artist Profile Page
 *   15. Search Results Page
 *   16. Pagination
 *   17. Footer
 *   18. Ad Slots & AdSense Containers
 *   19. Cookie Consent Banner
 *   20. Toast Notifications
 *   21. Loading States & Spinners
 *   22. Animations & Keyframes
 *   23. Light Mode Overrides
 *   24. Accessibility
 *   25. Utility Classes
 *   26. Mobile-First Responsive Breakpoints
 * ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   All colours, spacing, and sizes in one place.
   Override these to retheme the entire site instantly.
   ============================================================ */

:root {
  /* Brand colours */
  --djs-pink:          #e91e8c;
  --djs-pink-dark:     #c41878;
  --djs-pink-light:    #f06ab3;
  --djs-pink-alpha-10: rgba(233, 30, 140, 0.10);
  --djs-pink-alpha-20: rgba(233, 30, 140, 0.20);
  --djs-pink-alpha-30: rgba(233, 30, 140, 0.30);

  --djs-green:         #22c55e;
  --djs-green-dark:    #16a34a;
  --djs-green-light:   #4ade80;
  --djs-green-alpha-15:rgba(34, 197, 94, 0.15);

  /* Dark mode backgrounds (default) */
  --djs-bg-body:       #0f0f0f;
  --djs-bg-surface:    #1a1a1a;
  --djs-bg-elevated:   #242424;
  --djs-bg-overlay:    #2e2e2e;

  /* Dark mode borders */
  --djs-border:        #2a2a2a;
  --djs-border-light:  #3a3a3a;

  /* Dark mode text */
  --djs-text-primary:  #f0f0f0;
  --djs-text-secondary:#a0a0a0;
  --djs-text-muted:    #6b6b6b;

  /* Card specific */
  --djs-card-bg:       #1a1a1a;
  --djs-card-border:   #2a2a2a;
  --djs-card-hover-bg: #222222;
  --djs-card-radius:   12px;
  --djs-card-shadow:   0 2px 12px rgba(0,0,0,0.4);
  --djs-card-shadow-hover: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--djs-pink-alpha-20);

  /* Navbar */
  --djs-navbar-bg:     #111111;
  --djs-navbar-border: #1e1e1e;
  --djs-navbar-height: 64px;

  /* Footer */
  --djs-footer-bg:     #0a0a0a;

  /* Spacing scale */
  --djs-space-xs:   4px;
  --djs-space-sm:   8px;
  --djs-space-md:   16px;
  --djs-space-lg:   24px;
  --djs-space-xl:   32px;
  --djs-space-2xl:  48px;
  --djs-space-3xl:  64px;

  /* Typography */
  --djs-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --djs-font-size-xs:   0.75rem;
  --djs-font-size-sm:   0.8125rem;
  --djs-font-size-base: 0.9375rem;
  --djs-font-size-lg:   1.0625rem;
  --djs-font-size-xl:   1.25rem;
  --djs-font-size-2xl:  1.5rem;
  --djs-font-size-3xl:  2rem;

  /* Transitions */
  --djs-transition-fast:   0.15s ease;
  --djs-transition-base:   0.25s ease;
  --djs-transition-slow:   0.4s ease;

  /* Border radius */
  --djs-radius-sm:   6px;
  --djs-radius-md:   10px;
  --djs-radius-lg:   14px;
  --djs-radius-xl:   20px;
  --djs-radius-pill: 9999px;

  /* Z-index scale */
  --z-dropdown:   1000;
  --z-sticky:     1020;
  --z-fixed:      1030;
  --z-modal:      1050;
  --z-toast:      9999;
  --z-loader:     10000;

  /* Audio player */
  --player-bg:     #1e1e1e;
  --player-accent: var(--djs-pink);
  --player-track:  #3a3a3a;
  --player-height: 6px;
}

/* ============================================================
   2. CSS RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family:      var(--djs-font-family);
  font-size:        var(--djs-font-size-base);
  line-height:      1.6;
  color:            var(--djs-text-primary);
  background-color: var(--djs-bg-body);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--djs-pink);
  text-decoration: none;
  transition: color var(--djs-transition-fast);
}

a:hover {
  color: var(--djs-pink-light);
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--djs-pink);
  outline-offset: 3px;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--djs-font-family);
  font-weight:  700;
  line-height:  1.3;
  color:        var(--djs-text-primary);
  margin-bottom: var(--djs-space-sm);
}

h1 { font-size: var(--djs-font-size-3xl); }
h2 { font-size: var(--djs-font-size-2xl); }
h3 { font-size: var(--djs-font-size-xl); }
h4 { font-size: var(--djs-font-size-lg); }

p {
  margin-bottom: var(--djs-space-md);
  color: var(--djs-text-secondary);
}

.text-pink  { color: var(--djs-pink) !important; }
.text-green { color: var(--djs-green) !important; }
.fw-800     { font-weight: 800 !important; }
.lh-loose   { line-height: 1.7; }

/* ============================================================
   4. LAYOUT HELPERS
   ============================================================ */

.homepage-wrapper,
.page-wrapper {
  min-height: 60vh;
  padding-top: var(--djs-space-lg);
  padding-bottom: var(--djs-space-3xl);
}

.container-xl {
  max-width: 1280px;
}

/* Skip navigation link (accessibility) */
.skip-nav {
  position: absolute;
  top: -100px;
  left: var(--djs-space-md);
  background: var(--djs-pink);
  color: #fff;
  padding: var(--djs-space-sm) var(--djs-space-md);
  border-radius: var(--djs-radius-md);
  z-index: var(--z-fixed);
  transition: top var(--djs-transition-fast);
}

.skip-nav:focus {
  top: var(--djs-space-sm);
}

/* SEO content block (search-engine-visible but visually subtle) */
.seo-content-block {
  margin-top: var(--djs-space-2xl);
}

.seo-text-area {
  background: var(--djs-bg-surface);
}

/* ============================================================
   5. NAVBAR & NAVIGATION
   ============================================================ */

#mainNavbar {
  background-color: var(--djs-navbar-bg);
  border-bottom: 1px solid var(--djs-navbar-border);
  height: var(--djs-navbar-height);
  padding-top: 0;
  padding-bottom: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Gradient bottom border on navbar */
#mainNavbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--djs-pink), #7c3aed, var(--djs-pink));
  background-size: 200% auto;
  animation: gradientShift 4s linear infinite;
}

.navbar-brand-logo {
  max-height: 42px;
  width: auto;
}

.navbar-logo-text .fw-800 {
  font-size: 1.3rem;
  letter-spacing: -0.5px;
}

/* Nav link styling */
.navbar .nav-link {
  font-size: var(--djs-font-size-sm);
  font-weight: 500;
  color: var(--djs-text-secondary) !important;
  padding: var(--djs-space-xs) var(--djs-space-sm) !important;
  border-radius: var(--djs-radius-sm);
  transition: color var(--djs-transition-fast), background var(--djs-transition-fast);
  position: relative;
}

.navbar .nav-link:hover {
  color: var(--djs-text-primary) !important;
  background: var(--djs-pink-alpha-10);
}

.navbar .nav-link.active {
  color: var(--djs-pink) !important;
  font-weight: 600;
}

/* Active underline indicator */
.navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: var(--djs-pink);
  border-radius: 2px;
}

/* Dropdown menu */
.dropdown-menu.dropdown-menu-dark {
  background: var(--djs-bg-elevated);
  border: 1px solid var(--djs-border-light);
  border-radius: var(--djs-radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: var(--djs-space-xs);
  min-width: 220px;
}

.dropdown-item {
  border-radius: var(--djs-radius-sm);
  font-size: var(--djs-font-size-sm);
  padding: var(--djs-space-xs) var(--djs-space-md);
  color: var(--djs-text-secondary);
  transition: all var(--djs-transition-fast);
}

.dropdown-item:hover {
  background: var(--djs-pink-alpha-10);
  color: var(--djs-text-primary);
}

/* Mobile nav */
@media (max-width: 991px) {
  #mainNavbar {
    height: auto;
    min-height: var(--djs-navbar-height);
  }

  .navbar-collapse {
    background: var(--djs-navbar-bg);
    border-top: 1px solid var(--djs-border);
    padding: var(--djs-space-md);
    margin-top: var(--djs-space-xs);
  }

  .navbar-search-wrapper {
    max-width: 100% !important;
    margin-top: var(--djs-space-sm);
    margin-bottom: var(--djs-space-sm);
  }
}

/* Announcement bar */
.announcement-bar {
  background: linear-gradient(90deg, #7c3aed, var(--djs-pink), #7c3aed);
  background-size: 200% auto;
  animation: gradientShift 6s linear infinite;
  font-size: var(--djs-font-size-xs);
  position: relative;
  z-index: var(--z-sticky);
}

/* Mobile search bar */
.mobile-search-bar {
  border-top: 1px solid var(--djs-border) !important;
}

/* Breadcrumb nav */
.breadcrumb-nav {
  font-size: var(--djs-font-size-xs);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--djs-text-muted);
  --bs-breadcrumb-item-active-color: var(--djs-text-secondary);
}

.breadcrumb-item a {
  color: var(--djs-text-muted);
}

.breadcrumb-item a:hover {
  color: var(--djs-pink);
}

/* ============================================================
   6. SEARCH BAR & LIVE SUGGESTIONS
   ============================================================ */

.search-form .form-control {
  font-size: var(--djs-font-size-sm);
  height: 40px;
  border-radius: var(--djs-radius-pill) 0 0 var(--djs-radius-pill) !important;
}

.search-form .btn {
  border-radius: 0 var(--djs-radius-pill) var(--djs-radius-pill) 0 !important;
  height: 40px;
  padding: 0 var(--djs-space-md);
}

/* Live suggestions dropdown */
#searchSuggestions {
  border-top: none !important;
  border-radius: 0 0 var(--djs-radius-md) var(--djs-radius-md) !important;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--djs-space-sm);
  padding: var(--djs-space-sm) var(--djs-space-md);
  cursor: pointer;
  border-bottom: 1px solid var(--djs-border);
  transition: background var(--djs-transition-fast);
  color: var(--djs-text-primary);
  font-size: var(--djs-font-size-sm);
  text-decoration: none;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.highlighted {
  background: var(--djs-pink-alpha-10);
}

.suggestion-item__cover {
  width: 40px;
  height: 40px;
  border-radius: var(--djs-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.suggestion-item__title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-item__sub {
  font-size: var(--djs-font-size-xs);
  color: var(--djs-text-muted);
}

.suggestion-item__type {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: var(--djs-radius-pill);
  flex-shrink: 0;
}

.suggestion-item__type--song     { background: var(--djs-pink-alpha-20);  color: var(--djs-pink); }
.suggestion-item__type--artist   { background: rgba(124,58,237,0.2);       color: #a78bfa; }
.suggestion-item__type--category { background: rgba(14,165,233,0.15);      color: #38bdf8; }

/* Search highlight keyword match */
.search-highlight {
  color: var(--djs-pink);
  font-weight: 600;
  background: var(--djs-pink-alpha-10);
  border-radius: 2px;
  padding: 0 2px;
}

/* ============================================================
   7. SECTION HEADERS
   ============================================================ */

.homepage-section {
  position: relative;
}

.section-header {
  margin-bottom: var(--djs-space-lg);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--djs-text-primary);
  letter-spacing: -0.3px;
}

/* Coloured left accent bar */
.section-accent {
  display: inline-block;
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--djs-pink);
  flex-shrink: 0;
}

.section-accent--fire   { background: #f97316; }
.section-accent--purple { background: #7c3aed; }
.section-accent--green  { background: var(--djs-green); }

/* ============================================================
   8. SONG CARD — CORE COMPONENT
   This is the most important component — used everywhere.
   ============================================================ */

.song-card {
  background:    var(--djs-card-bg);
  border:        1px solid var(--djs-card-border);
  border-radius: var(--djs-card-radius);
  overflow:      hidden;
  transition:    transform var(--djs-transition-base),
                 box-shadow var(--djs-transition-base),
                 border-color var(--djs-transition-base);
  position:      relative;
  display:       flex;
  flex-direction: column;
  height:        100%;
  will-change:   transform;
}

.song-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--djs-card-shadow-hover);
  border-color: var(--djs-pink-alpha-30);
}

.song-card:active {
  transform: translateY(-2px);
}

/* ── Cover image wrapper ────────────────────────────────── */
.song-card__link {
  display:        flex;
  flex-direction: column;
  flex-grow:      1;
  color:          inherit;
  text-decoration: none;
}

.song-card__link:hover {
  color: inherit;
}

.song-card__cover-wrap {
  position:    relative;
  width:       100%;
  aspect-ratio: 1 / 1; /* Perfect square */
  overflow:    hidden;
  background:  var(--djs-bg-overlay);
  flex-shrink: 0;
}

.song-card__cover {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  transition:  transform var(--djs-transition-slow),
               filter var(--djs-transition-base);
}

.song-card:hover .song-card__cover {
  transform: scale(1.06);
  filter:    brightness(0.7);
}

/* ── Hover overlay with play button ────────────────────── */
.song-card__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.4);
  display:    flex;
  align-items: center;
  justify-content: center;
  opacity:    0;
  transition: opacity var(--djs-transition-base);
}

.song-card:hover .song-card__overlay {
  opacity: 1;
}

.song-card__play-btn {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--djs-pink);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.5rem;
  color:           #fff;
  transform:       scale(0.85);
  transition:      transform var(--djs-transition-base),
                   box-shadow var(--djs-transition-base);
  box-shadow:      0 4px 20px rgba(233,30,140,0.5);
}

.song-card:hover .song-card__play-btn {
  transform: scale(1);
  box-shadow: 0 6px 30px rgba(233,30,140,0.7);
}

/* ── Card badges (trending / featured overlay) ──────────── */
.song-card__badge {
  position:      absolute;
  top:           var(--djs-space-sm);
  left:          var(--djs-space-sm);
  font-size:     0.65rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding:       3px 8px;
  border-radius: var(--djs-radius-pill);
  z-index:       2;
}

.song-card__badge--trending {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(249,115,22,0.4);
}

.song-card__badge--featured {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}

/* ── Card body (text content) ───────────────────────────── */
.song-card__body {
  padding:   var(--djs-space-sm) var(--djs-space-sm) var(--djs-space-xs);
  flex-grow: 1;
  display:   flex;
  flex-direction: column;
  gap:       4px;
}

.song-card__title {
  font-size:     var(--djs-font-size-sm);
  font-weight:   600;
  color:         var(--djs-text-primary);
  line-height:   1.35;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:      hidden;
  margin-bottom: 0;
  transition:    color var(--djs-transition-fast);
}

.song-card:hover .song-card__title {
  color: var(--djs-pink);
}

.song-card__artist {
  font-size:  var(--djs-font-size-xs);
  color:      var(--djs-text-muted);
  margin:     0;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

/* ── Stat badges: duration (pink) + downloads (green) ───── */
.song-card__meta {
  margin-top: auto;
  padding-top: var(--djs-space-xs);
}

/* ── STAT BADGE BASE ─────────────────────────────────────── */
.song-card__badge-stat {
  display:       inline-flex;
  align-items:   center;
  font-size:     0.68rem;
  font-weight:   600;
  padding:       3px 7px;
  border-radius: var(--djs-radius-pill);
  line-height:   1.2;
  white-space:   nowrap;
}

/* 🎵 PINK BADGE — Audio Duration */
.song-card__badge-stat--duration {
  background:  rgba(233, 30, 140, 0.15);
  color:       var(--djs-pink);
  border:      1px solid rgba(233, 30, 140, 0.25);
}

/* 📥 GREEN BADGE — Download Count */
.song-card__badge-stat--downloads {
  background:  var(--djs-green-alpha-15);
  color:       var(--djs-green);
  border:      1px solid rgba(34, 197, 94, 0.25);
}

/* Category link under stats */
.song-card__category {
  margin-top: 2px;
}

.song-card__category-link {
  font-size:   0.65rem;
  color:       var(--djs-text-muted);
  background:  var(--djs-bg-overlay);
  padding:     2px 6px;
  border-radius: var(--djs-radius-pill);
  transition:  all var(--djs-transition-fast);
  display:     inline-block;
}

.song-card__category-link:hover {
  background: var(--djs-pink-alpha-10);
  color:      var(--djs-pink);
}

/* ── Card actions (download button) ─────────────────────── */
.song-card__actions {
  padding:     var(--djs-space-xs) var(--djs-space-sm) var(--djs-space-sm);
  display:     flex;
  gap:         var(--djs-space-xs);
  border-top:  1px solid var(--djs-border);
  margin-top:  auto;
}

.btn-download {
  flex:          1;
  text-align:    center;
  background:    transparent;
  border:        1px solid var(--djs-green);
  color:         var(--djs-green);
  font-size:     0.7rem;
  font-weight:   600;
  padding:       5px 8px;
  border-radius: var(--djs-radius-sm);
  transition:    all var(--djs-transition-fast);
}

.btn-download:hover {
  background: var(--djs-green);
  color:      #000;
}

/* ============================================================
   9. SONG CARD GRID — RESPONSIVE LAYOUT
   4 columns desktop → 2 tablet → 1 mobile
   ============================================================ */

.song-card-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr); /* 4 cols on desktop */
  gap:                   var(--djs-space-md);
  align-items:           start;
}

/* In-feed ad slot fills full grid row */
.song-card-grid__ad-slot {
  grid-column: 1 / -1;
  padding: var(--djs-space-md) 0;
}

/* ── Responsive breakpoints for song grid ─────────────────── */
@media (max-width: 1200px) {
  .song-card-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 992px) {
  .song-card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--djs-space-sm); }
}

@media (max-width: 768px) {
  .song-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 480px) {
  .song-card-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================================
   10. DURATION & DOWNLOAD BADGES (standalone, used on song page)
   ============================================================ */

.badge-duration {
  background:   rgba(233, 30, 140, 0.15);
  color:        var(--djs-pink);
  border:       1px solid rgba(233, 30, 140, 0.3);
  font-size:    var(--djs-font-size-sm);
  font-weight:  600;
  padding:      6px 14px;
  border-radius: var(--djs-radius-pill);
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
}

.badge-downloads {
  background:  var(--djs-green-alpha-15);
  color:       var(--djs-green);
  border:      1px solid rgba(34, 197, 94, 0.3);
  font-size:   var(--djs-font-size-sm);
  font-weight: 600;
  padding:     6px 14px;
  border-radius: var(--djs-radius-pill);
  display:     inline-flex;
  align-items: center;
  gap:         6px;
}

/* ============================================================
   11. CATEGORY GRID
   ============================================================ */

.category-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--djs-space-md);
}

@media (max-width: 992px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.category-card {
  background:    var(--djs-card-bg);
  border:        1px solid var(--djs-card-border);
  border-radius: var(--djs-card-radius);
  padding:       var(--djs-space-lg);
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--djs-space-sm);
  transition:    all var(--djs-transition-base);
  position:      relative;
  overflow:      hidden;
  cursor:        pointer;
}

/* Animated gradient border on hover */
.category-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  border-radius: var(--djs-card-radius);
  padding:    1px;
  background: linear-gradient(135deg, var(--djs-pink), #7c3aed, var(--djs-pink));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:    0;
  transition: opacity var(--djs-transition-base);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--djs-card-shadow-hover);
  background:   var(--djs-card-hover-bg);
}

.category-card__icon {
  width:           56px;
  height:          56px;
  background:      linear-gradient(135deg, var(--djs-pink-alpha-20), rgba(124,58,237,0.2));
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.5rem;
  color:           var(--djs-pink);
  transition:      transform var(--djs-transition-base), background var(--djs-transition-base);
}

.category-card:hover .category-card__icon {
  transform:  scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, var(--djs-pink-alpha-30), rgba(124,58,237,0.3));
}

.category-card__name {
  font-size:   var(--djs-font-size-sm);
  font-weight: 600;
  color:       var(--djs-text-primary);
  margin:      0;
  transition:  color var(--djs-transition-fast);
}

.category-card:hover .category-card__name {
  color: var(--djs-pink);
}

.category-card__count {
  font-size:   var(--djs-font-size-xs);
  color:       var(--djs-text-muted);
  margin:      0;
}

.category-card__arrow {
  font-size:   1.2rem;
  color:       var(--djs-text-muted);
  margin-top:  auto;
  transition:  color var(--djs-transition-fast), transform var(--djs-transition-base);
}

.category-card:hover .category-card__arrow {
  color:     var(--djs-pink);
  transform: translateX(4px);
}

/* ============================================================
   12. TRENDING PAGE STYLES
   ============================================================ */

.trending-header {
  background:    linear-gradient(135deg, rgba(249,115,22,0.1), rgba(239,68,68,0.1));
  border:        1px solid rgba(249,115,22,0.2);
  border-radius: var(--djs-radius-lg);
  padding:       var(--djs-space-lg) var(--djs-space-xl);
  margin-bottom: var(--djs-space-xl);
}

/* Sort/filter controls bar */
.sort-controls {
  display:     flex;
  gap:         var(--djs-space-sm);
  flex-wrap:   wrap;
  align-items: center;
  margin-bottom: var(--djs-space-lg);
}

.sort-btn {
  font-size:     var(--djs-font-size-xs);
  font-weight:   600;
  padding:       6px 14px;
  border-radius: var(--djs-radius-pill);
  border:        1px solid var(--djs-border-light);
  color:         var(--djs-text-secondary);
  background:    transparent;
  cursor:        pointer;
  transition:    all var(--djs-transition-fast);
}

.sort-btn:hover,
.sort-btn.active {
  background:    var(--djs-pink);
  border-color:  var(--djs-pink);
  color:         #fff;
}

/* ============================================================
   13. SONG PAGE — AUDIO PLAYER
   ============================================================ */

.song-page-wrapper {
  display:   grid;
  grid-template-columns: 1fr 320px;
  gap:       var(--djs-space-xl);
  align-items: start;
}

@media (max-width: 992px) {
  .song-page-wrapper { grid-template-columns: 1fr; }
}

/* Cover + player block */
.song-player-block {
  background:    var(--djs-bg-surface);
  border:        1px solid var(--djs-border);
  border-radius: var(--djs-radius-xl);
  overflow:      hidden;
}

.song-cover-large {
  width:        100%;
  aspect-ratio: 1 / 1;
  object-fit:   cover;
  display:      block;
}

/* Meta info below cover */
.song-meta-block {
  padding: var(--djs-space-lg);
}

.song-page-title {
  font-size:   1.4rem;
  font-weight: 800;
  line-height: 1.3;
  color:       var(--djs-text-primary);
  margin-bottom: var(--djs-space-xs);
}

.song-page-artist {
  font-size:   var(--djs-font-size-base);
  color:       var(--djs-text-secondary);
  margin-bottom: var(--djs-space-md);
}

.song-page-artist a {
  color: var(--djs-pink);
  font-weight: 500;
}

.song-stats-row {
  display:   flex;
  gap:       var(--djs-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--djs-space-lg);
}

/* Custom HTML5 Audio Player */
.audio-player {
  background:    var(--player-bg);
  border-radius: var(--djs-radius-lg);
  padding:       var(--djs-space-lg);
  margin:        0 var(--djs-space-lg) var(--djs-space-lg);
  border:        1px solid var(--djs-border);
}

/* Hide default HTML5 audio controls */
.audio-player audio {
  display: none;
}

/* Progress / seek bar */
.player-progress {
  position:   relative;
  height:     var(--player-height);
  background: var(--player-track);
  border-radius: 3px;
  cursor:     pointer;
  margin:     var(--djs-space-sm) 0;
  overflow:   visible;
}

.player-progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--djs-pink), #7c3aed);
  border-radius: 3px;
  width:         0%;
  transition:    width 0.1s linear;
  position:      relative;
}

/* Draggable thumb on seek bar */
.player-progress-fill::after {
  content:    '';
  position:   absolute;
  right:      -6px;
  top:        50%;
  transform:  translateY(-50%);
  width:      12px;
  height:     12px;
  border-radius: 50%;
  background: var(--djs-pink);
  box-shadow: 0 0 6px var(--djs-pink-alpha-30);
  transition: transform var(--djs-transition-fast);
}

.player-progress:hover .player-progress-fill::after {
  transform: translateY(-50%) scale(1.3);
}

/* Player controls row */
.player-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--djs-space-md);
  margin-top:      var(--djs-space-sm);
}

.player-btn {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  border:          1px solid var(--djs-border-light);
  background:      transparent;
  color:           var(--djs-text-secondary);
  font-size:       1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--djs-transition-fast);
  cursor:          pointer;
}

.player-btn:hover {
  border-color: var(--djs-pink);
  color:        var(--djs-pink);
  background:   var(--djs-pink-alpha-10);
}

/* Main play/pause button — larger */
.player-btn--play {
  width:      60px;
  height:     60px;
  font-size:  1.5rem;
  background: var(--djs-pink);
  border-color: var(--djs-pink);
  color:      #fff;
  box-shadow: 0 4px 20px rgba(233,30,140,0.4);
}

.player-btn--play:hover {
  background:   var(--djs-pink-dark);
  border-color: var(--djs-pink-dark);
  color:        #fff;
  transform:    scale(1.05);
  box-shadow:   0 6px 30px rgba(233,30,140,0.6);
}

/* Volume control */
.player-volume {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}

.player-volume-slider {
  width:       80px;
  accent-color: var(--djs-pink);
  cursor:      pointer;
  height:      4px;
}

/* Time display */
.player-time {
  font-size:   var(--djs-font-size-xs);
  color:       var(--djs-text-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Download CTA button on song page */
.btn-download-large {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--djs-space-sm);
  background:      linear-gradient(135deg, var(--djs-green-dark), var(--djs-green));
  color:           #fff;
  font-weight:     700;
  font-size:       1rem;
  padding:         14px var(--djs-space-xl);
  border-radius:   var(--djs-radius-pill);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      all var(--djs-transition-base);
  box-shadow:      0 4px 20px rgba(34,197,94,0.3);
  width:           100%;
  margin:          0 var(--djs-space-lg) var(--djs-space-lg);
  max-width:       calc(100% - 2 * var(--djs-space-lg));
}

.btn-download-large:hover {
  background:  linear-gradient(135deg, var(--djs-green), #16a34a);
  transform:   translateY(-2px);
  box-shadow:  0 8px 32px rgba(34,197,94,0.4);
  color:       #fff;
}

/* Social share buttons */
.share-buttons {
  display:   flex;
  gap:       var(--djs-space-sm);
  flex-wrap: wrap;
  padding:   0 var(--djs-space-lg) var(--djs-space-lg);
}

.btn-share {
  flex:          1;
  min-width:     80px;
  font-size:     0.75rem;
  font-weight:   600;
  padding:       8px var(--djs-space-sm);
  border-radius: var(--djs-radius-sm);
  border:        1px solid;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           4px;
  transition:    all var(--djs-transition-fast);
}

.btn-share--whatsapp { border-color: #25d366; color: #25d366; }
.btn-share--whatsapp:hover { background: #25d366; color: #fff; }

.btn-share--facebook { border-color: #1877f2; color: #1877f2; }
.btn-share--facebook:hover { background: #1877f2; color: #fff; }

.btn-share--twitter { border-color: #1da1f2; color: #1da1f2; }
.btn-share--twitter:hover { background: #1da1f2; color: #fff; }

.btn-share--telegram { border-color: #0088cc; color: #0088cc; }
.btn-share--telegram:hover { background: #0088cc; color: #fff; }

/* Song sidebar (AdSense + Related songs on right) */
.song-sidebar {
  position:  sticky;
  top:       calc(var(--djs-navbar-height) + var(--djs-space-md));
}

/* ============================================================
   14. ARTIST PROFILE PAGE
   ============================================================ */

.artist-hero {
  background:    linear-gradient(180deg, var(--djs-bg-elevated), var(--djs-bg-body));
  border-radius: var(--djs-radius-xl);
  padding:       var(--djs-space-2xl);
  margin-bottom: var(--djs-space-xl);
  display:       flex;
  gap:           var(--djs-space-xl);
  align-items:   center;
}

.artist-avatar {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--djs-pink);
  flex-shrink:   0;
}

.artist-avatar-placeholder {
  width:           120px;
  height:          120px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--djs-pink-alpha-20), rgba(124,58,237,0.2));
  border:          3px solid var(--djs-pink-alpha-30);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3rem;
  color:           var(--djs-pink);
  flex-shrink:     0;
}

@media (max-width: 576px) {
  .artist-hero { flex-direction: column; text-align: center; padding: var(--djs-space-lg); }
}

/* ============================================================
   15. SEARCH RESULTS PAGE
   ============================================================ */

.search-results-header {
  margin-bottom: var(--djs-space-xl);
}

.search-query-display {
  font-size:   var(--djs-font-size-2xl);
  font-weight: 800;
}

.search-query-display span {
  color: var(--djs-pink);
}

.search-section-label {
  font-size:     var(--djs-font-size-xs);
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:         var(--djs-text-muted);
  margin-bottom: var(--djs-space-md);
  padding-bottom: var(--djs-space-xs);
  border-bottom:  1px solid var(--djs-border);
}

.no-results {
  text-align:  center;
  padding:     var(--djs-space-3xl) 0;
}

.no-results__icon {
  font-size: 4rem;
  color:     var(--djs-text-muted);
  display:   block;
  margin-bottom: var(--djs-space-md);
}

/* ============================================================
   16. PAGINATION
   ============================================================ */

.pagination-wrapper {
  margin-top: var(--djs-space-2xl);
}

.pagination .page-link {
  background:    var(--djs-bg-surface);
  border-color:  var(--djs-border);
  color:         var(--djs-text-secondary);
  border-radius: var(--djs-radius-sm) !important;
  font-size:     var(--djs-font-size-sm);
  padding:       6px 12px;
  transition:    all var(--djs-transition-fast);
}

.pagination .page-link:hover {
  background:   var(--djs-pink-alpha-10);
  border-color: var(--djs-pink-alpha-30);
  color:        var(--djs-pink);
}

.pagination .page-item.active .page-link {
  background:   var(--djs-pink);
  border-color: var(--djs-pink);
  color:        #fff;
  box-shadow:   0 2px 12px var(--djs-pink-alpha-30);
}

.pagination .page-item.disabled .page-link {
  background:  var(--djs-bg-surface);
  border-color: var(--djs-border);
  color:        var(--djs-text-muted);
}

.pagination-info {
  font-size:   var(--djs-font-size-xs);
  color:       var(--djs-text-muted);
}

/* ============================================================
   17. FOOTER
   ============================================================ */

.site-footer {
  background: var(--djs-footer-bg);
  border-top: 1px solid var(--djs-border);
  margin-top: auto;
}

.footer-top {
  padding-top:    var(--djs-space-2xl) !important;
  padding-bottom: var(--djs-space-2xl) !important;
}

.footer-brand {
  font-size: 1.2rem;
}

.footer-heading {
  font-size:     var(--djs-font-size-xs);
  letter-spacing: 1px;
  color:         var(--djs-text-muted) !important;
}

.footer-links li {
  margin-bottom: var(--djs-space-xs);
}

.footer-links a {
  font-size:  var(--djs-font-size-sm);
  color:      var(--djs-text-muted);
  transition: all var(--djs-transition-fast);
  display:    flex;
  align-items: center;
  gap:        4px;
}

.footer-links a:hover {
  color:       var(--djs-pink);
  padding-left: 4px;
}

.footer-disclaimer {
  background: rgba(255,255,255,0.03) !important;
}

.footer-bottom {
  background: rgba(0,0,0,0.3);
}

.footer-social .btn {
  width:  32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--djs-transition-fast);
}

.footer-social .btn:hover {
  border-color: var(--djs-pink);
  color:        var(--djs-pink);
  transform:    translateY(-2px);
}

/* ============================================================
   18. AD SLOTS & ADSENSE CONTAINERS
   Policy-compliant: no fake borders, no "click here" labels
   ============================================================ */

.ad-container {
  overflow: hidden;
}

.ad-container--header {
  background:    var(--djs-bg-surface);
  border-bottom: 1px solid var(--djs-border);
  padding:       var(--djs-space-sm) 0;
}

.ad-container--footer {
  border-top: 1px solid var(--djs-border);
  padding:    var(--djs-space-md) 0;
}

.ad-slot {
  display:         flex;
  justify-content: center;
  align-items:     center;
  min-height:      60px; /* Prevent layout shift */
}

.song-card-grid__ad-slot .ad-slot {
  min-height: 250px;
  border-radius: var(--djs-card-radius);
  background:    var(--djs-bg-surface);
  border:        1px dashed var(--djs-border);
}

/* ============================================================
   19. COOKIE CONSENT BANNER
   ============================================================ */

.cookie-consent-banner {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  background: var(--djs-bg-elevated);
  border-top: 2px solid var(--djs-pink);
  padding:    var(--djs-space-md) 0;
  z-index:    var(--z-toast);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
  animation:  slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent-banner.cookie-banner--hiding {
  animation: slideDown 0.4s ease forwards;
}

/* ============================================================
   20. TOAST NOTIFICATIONS
   ============================================================ */

.toast {
  background:    var(--djs-bg-elevated) !important;
  border:        1px solid var(--djs-border-light) !important;
  border-radius: var(--djs-radius-md) !important;
  color:         var(--djs-text-primary) !important;
  font-size:     var(--djs-font-size-sm);
  min-width:     280px;
  box-shadow:    0 8px 32px rgba(0,0,0,0.4) !important;
}

.toast.toast--success { border-left: 3px solid var(--djs-green) !important; }
.toast.toast--error   { border-left: 3px solid #ef4444 !important; }
.toast.toast--info    { border-left: 3px solid #3b82f6 !important; }
.toast.toast--warning { border-left: 3px solid #f59e0b !important; }

/* ============================================================
   21. LOADING STATES & SPINNERS
   ============================================================ */

/* Full page loader overlay */
.page-loader {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.8);
  z-index:         var(--z-loader);
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.page-loader-inner {
  text-align: center;
}

/* Skeleton loading animation for song cards */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--djs-bg-surface) 25%,
    var(--djs-bg-elevated) 50%,
    var(--djs-bg-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--djs-radius-sm);
}

.skeleton-card {
  background:    var(--djs-card-bg);
  border:        1px solid var(--djs-card-border);
  border-radius: var(--djs-card-radius);
  overflow:      hidden;
}

.skeleton-cover {
  width:       100%;
  aspect-ratio: 1 / 1;
}

.skeleton-text {
  height: 12px;
  margin: var(--djs-space-sm) var(--djs-space-sm) 4px;
  border-radius: var(--djs-radius-pill);
}

.skeleton-text--short { width: 60%; }
.skeleton-text--medium { width: 80%; }

/* Upload progress bar */
.upload-progress-bar {
  height:        8px;
  border-radius: var(--djs-radius-pill);
  background:    linear-gradient(90deg, var(--djs-pink), #7c3aed);
  transition:    width 0.3s ease;
}

/* ============================================================
   22. ANIMATIONS & KEYFRAMES
   ============================================================ */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Staggered entrance animation for song cards */
.song-card-grid > * {
  animation: fadeIn 0.3s ease both;
}

.song-card-grid > *:nth-child(1)  { animation-delay: 0.03s; }
.song-card-grid > *:nth-child(2)  { animation-delay: 0.06s; }
.song-card-grid > *:nth-child(3)  { animation-delay: 0.09s; }
.song-card-grid > *:nth-child(4)  { animation-delay: 0.12s; }
.song-card-grid > *:nth-child(5)  { animation-delay: 0.15s; }
.song-card-grid > *:nth-child(6)  { animation-delay: 0.18s; }
.song-card-grid > *:nth-child(7)  { animation-delay: 0.21s; }
.song-card-grid > *:nth-child(8)  { animation-delay: 0.24s; }

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}

/* ============================================================
   23. LIGHT MODE OVERRIDES
   Applied when data-bs-theme="light" is on <html>
   ============================================================ */

[data-bs-theme="light"] {
  --djs-bg-body:       #f5f5f5;
  --djs-bg-surface:    #ffffff;
  --djs-bg-elevated:   #f0f0f0;
  --djs-bg-overlay:    #e8e8e8;
  --djs-border:        #e0e0e0;
  --djs-border-light:  #d0d0d0;
  --djs-text-primary:  #111111;
  --djs-text-secondary:#444444;
  --djs-text-muted:    #888888;
  --djs-card-bg:       #ffffff;
  --djs-card-border:   #e5e5e5;
  --djs-card-hover-bg: #fafafa;
  --djs-card-shadow:   0 2px 12px rgba(0,0,0,0.08);
  --djs-card-shadow-hover: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px var(--djs-pink-alpha-20);
  --djs-navbar-bg:     #ffffff;
  --djs-navbar-border: #e5e5e5;
  --djs-footer-bg:     #f0f0f0;
  --player-bg:         #f5f5f5;
  --player-track:      #e0e0e0;
}

[data-bs-theme="light"] body {
  background-color: var(--djs-bg-body);
  color:            var(--djs-text-primary);
}

[data-bs-theme="light"] .dropdown-menu {
  background: #fff;
  border-color: #e5e5e5;
}

[data-bs-theme="light"] .dropdown-item {
  color: #444;
}

[data-bs-theme="light"] .dropdown-item:hover {
  background: var(--djs-pink-alpha-10);
  color: var(--djs-pink);
}

[data-bs-theme="light"] #mainNavbar {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

[data-bs-theme="light"] .site-footer {
  background: var(--djs-footer-bg);
  border-color: var(--djs-border);
}

[data-bs-theme="light"] .cookie-consent-banner {
  background: #fff;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
}

/* ============================================================
   24. ACCESSIBILITY
   ============================================================ */

/* High-contrast focus ring */
:focus-visible {
  outline: 2px solid var(--djs-pink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Screen-reader only (sr-only equivalent) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure interactive elements are reachable via keyboard */
.song-card__link:focus-visible,
.category-card:focus-visible,
.btn-download:focus-visible {
  outline: 2px solid var(--djs-pink);
  outline-offset: 2px;
}

/* ============================================================
   25. UTILITY CLASSES
   ============================================================ */

/* Buttons */
.btn-pink {
  background:   var(--djs-pink);
  border-color: var(--djs-pink);
  color:        #fff;
  font-weight:  600;
  transition:   all var(--djs-transition-fast);
}

.btn-pink:hover {
  background:   var(--djs-pink-dark);
  border-color: var(--djs-pink-dark);
  color:        #fff;
  transform:    translateY(-1px);
  box-shadow:   0 4px 16px var(--djs-pink-alpha-30);
}

.btn-outline-pink {
  border-color: var(--djs-pink);
  color:        var(--djs-pink);
  font-weight:  600;
  transition:   all var(--djs-transition-fast);
}

.btn-outline-pink:hover {
  background:   var(--djs-pink);
  color:        #fff;
  transform:    translateY(-1px);
}

/* Empty state */
.empty-state {
  padding: var(--djs-space-3xl) var(--djs-space-md);
}

.empty-state__icon i {
  opacity: 0.3;
}

/* Alert styling override */
.alert--success { border-color: var(--djs-green); }
.alert--danger  { border-color: #ef4444; }

/* Divider with text */
.divider-text {
  display:     flex;
  align-items: center;
  gap:         var(--djs-space-md);
  color:       var(--djs-text-muted);
  font-size:   var(--djs-font-size-xs);
  margin:      var(--djs-space-lg) 0;
}

.divider-text::before,
.divider-text::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--djs-border);
}

/* ============================================================
   26. MOBILE-FIRST RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large tablets and small desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .song-card__title  { font-size: 0.8rem; }
  .section-title     { font-size: 1.1rem; }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
  .homepage-wrapper, .page-wrapper { padding-top: var(--djs-space-md); }
  .category-grid                  { grid-template-columns: repeat(3, 1fr); }
  .song-page-wrapper              { grid-template-columns: 1fr; }
  .song-sidebar                   { position: static; }
}

/* Mobile landscape (576px - 767px) */
@media (max-width: 767px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }

  .section-title  { font-size: 1rem; }
  .category-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .footer-top     { padding-top: var(--djs-space-xl) !important; }

  .song-page-title { font-size: 1.1rem; }
  .audio-player    { padding: var(--djs-space-md); margin: 0 var(--djs-space-md) var(--djs-space-md); }
  .player-volume-slider { width: 60px; }

  .share-buttons   { padding: 0 var(--djs-space-md) var(--djs-space-md); }
  .btn-share       { font-size: 0.7rem; padding: 6px 8px; }

  .artist-hero     { padding: var(--djs-space-md); }
}

/* Small mobile (max 575px) */
@media (max-width: 575px) {
  .song-card__body   { padding: 6px 6px 4px; }
  .song-card__actions{ padding: 4px 6px 6px; }
  .song-card__title  { font-size: 0.72rem; }
  .song-card__artist { font-size: 0.65rem; }
  .song-card__badge-stat { font-size: 0.6rem; padding: 2px 5px; }

  .category-card     { padding: var(--djs-space-md) var(--djs-space-sm); }
  .category-card__icon { width: 44px; height: 44px; font-size: 1.2rem; }
  .category-card__name { font-size: 0.75rem; }

  .player-controls   { gap: var(--djs-space-sm); }
  .player-btn        { width: 36px; height: 36px; font-size: 0.85rem; }
  .player-btn--play  { width: 50px; height: 50px; font-size: 1.2rem; }

  .footer-top .row > div { text-align: center; }
  .footer-social     { justify-content: center; }
  .footer-links a    { justify-content: center; }
}

/* Very small screens (< 360px) */
@media (max-width: 360px) {
  .song-card-grid    { gap: 6px; }
  .song-card__title  { font-size: 0.68rem; }
  .song-card-grid > *:nth-child(n) { animation-delay: 0s; }
}

/* ── Print styles ──────────────────────────────────────────── */
@media print {
  .site-footer,
  #mainNavbar,
  .ad-container,
  .cookie-consent-banner,
  .song-card__overlay,
  .song-card__actions,
  .player-controls { display: none !important; }

  body { background: #fff; color: #000; }
}
/* ============================================================
   END OF assets/css/style.css
   ============================================================ */