/*
Theme Name: MatchMusik
Theme URI: https://wa.me/2347069047498
Author: GBT3K
Author URI: https://wa.mme/2347069047498
Description: A lightweight and optimized WordPress theme for music streaming and downloads.
Version: 1.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matchmusik
Tags: music, streaming, downloads, lightweight, responsive, dark-mode, seo-friendly

This theme is designed and developed by GBT3K. It includes dynamic styling for both dark and light modes, a responsive mobile-first approach, and optimized layout elements for a seamless music experience.
*/


/* Define CSS Variables for Dark Mode (default) */
:root {
    --body-bg: #121212;
    --accent-color: #2187ee;
    --body-text: #fff;
    --header-bg: #181818;
    --menu-bg: #106ecc;
    --nav-link-color: #fff;
    --nav-link-underline: #fff;
    --search-btn-bg: #0d7dc6;
    --search-btn-bg-hover: #1a6fb3;
    --xsearch-form-bg: #181818;
    --xsearch-border: #b0b7bf;
    --side-menu-gradient-start: #106ecc;
    --side-menu-gradient-end: #005bb5;
    --side-menu-close-color: #fff;
    --side-nav-link-color: #fff;
    --side-nav-link-hover-color: #2187ee;
    --side-menu-footer-border: rgba(255,255,255,0.3);
    --dark-mode-toggle-color: #fff;
    --dark-mode-toggle-hover: #2187ee;
    --mobile-header-bg: #181818;
    --banner-category-bg: #2187ee;
    --banner-title-bg: rgba(108, 4, 4, 0.9);
    --music-info-bg: #000;
    --footer-bg: #181818;
    --footer-link-color: #bbb;
    --footer-link-hover-color: #2187ee;
    --border-color-d: #333;
    --rartist-name: #e1e4e6;
    --deep-blue-hover: #04568c;
    --fartist-name: #dfdfdf;
    --drop-m-menu: #fff;
  }
  
  :root[data-theme="light"] {
    --body-bg: #ebeef0;
    --accent-color: #2187ee;
    --body-text: #121212;
    --header-bg: #f9f9f9;
    --menu-bg: #2187ee;
    --nav-link-color: #fff;
    --nav-link-underline: #fff;
    --search-btn-bg: #0d7dc6;
    --search-btn-bg-hover: #1a6fb3;
    --xsearch-form-bg: #f9f9f9;
    --xsearch-border: #ccc;
    --side-menu-gradient-start: #2187ee;
    --side-menu-gradient-end: #1f618d;
    --side-menu-close-color: #fff;
    --side-nav-link-color: #fff;
    --side-nav-link-hover-color: #2187ee;
    --side-menu-footer-border: rgba(0,0,0,0.3);
    --dark-mode-toggle-color: #121212;
    --dark-mode-toggle-hover: #2187ee;
    --mobile-header-bg: #f5f9fc;
    --banner-category-bg: #2187ee;
    --banner-title-bg: rgba(150, 0, 0, 0.9);
    --music-info-bg: #000;
    --footer-bg: #181818;
    --footer-link-color: #e6e6e6;
    --footer-link-hover-color: #2187ee;
    --def-text-color: #353536;
    --border-color-d: #dbdbdb;
    --rartist-name: #545454;
    --deep-blue-hover: #04568c;
    --fartist-name: #2f2e2e;
    --drop-m-menu: #fff;
  }
  
  /* General CSS Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;  /* Hides horizontal overflow only */
    overflow-y: auto;    /* Allows vertical scrolling */
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif;
    background: var(--body-bg);
    color: var(--body-text);
  }
  
  /* Remove default list styles */
  ul, ol {
    list-style: none;
  }
  
  /* Remove default text decoration on links */
  a {
    text-decoration: none;
    color: var(--accent-color);
  }
  
  /* Header */
  .site-header {
      width: 100%;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  /* Desktop Logo */
  .logo-container {
      text-align: left;
      width: 1152px;
      margin-bottom: 15px;
  }
  
  .logo-container img {
      height: 70px;
      width: 200px;
  }
  
  /* Modify the menu container to use flexbox */
  .menu-container {
      width: 1152px;
      background: var(--menu-bg);
      padding: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 10px;
  }
  
  /* New container for search form and toggle icon */
  .header-controls {
      display: flex;
      align-items: center;
      gap: 15px; /* Adjust the spacing between search and toggle as needed */
  }
  
  /* Navigation */
  .main-nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 20px;
  }
  
  .main-nav ul li {
    display: flex;
    align-items: center;
    position: relative;
}
  
  .main-nav ul li a {
      position: relative;
      cursor: pointer; /* Ensure pointer is displayed */
      text-decoration: none;
      color: var(--nav-link-color);
      font-weight: bold;
      padding: 10px 15px;
      transition: color 0.3s ease;
  }
  
  /* Create the horizontal line using a pseudo-element */
  .main-nav ul li a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background-color: var(--nav-link-underline);
      transition: width 0.3s ease-in-out;
  }
  
  /* On hover, expand the line across the link */
  .main-nav ul li a:hover::after {
      width: 100%;
  }

  .main-nav ul li.active > a::after {
    width: 100%;
  }  

  /* Dropdown Wrapper */
.main-nav ul li.has-dropdown {
  position: relative;
}

/* Dropdown Icon */
.main-nav ul li.has-dropdown a {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-icon {
  transition: transform 0.3s ease;
}

/* Rotate on hover */
.main-nav ul li.has-dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

/* Dropdown Menu */
.main-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--menu-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 100;
  min-width: 180px;
  padding: 10px 0;
  animation: fadeDown 0.3s ease;
  font-size: 14px;
}

.main-nav .dropdown-menu li {
  display: block;
}

.main-nav .dropdown-menu li a {
  padding: 10px 20px;
  display: block;
  font-weight: normal;
  color: var(--drop-m-menu);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.main-nav .dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.main-nav ul li.has-dropdown:hover .dropdown-menu {
  display: block;
}

/* Animation */
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
  
  /* Header Search Form Styling */
  .header-search form {
      display: flex;
      align-items: center;
  }
  
  .header-search input[type="text"] {
      border: none;
      padding: 8px 10px;
      border-radius: 4px 0 0 4px;
      outline: none;
      font-size: 14px;
      width: 150px;
  }
  
  .header-search button {
      background: var(--search-btn-bg);
      border: none;
      padding: 8px 10px;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      color: var(--nav-link-underline);
      font-size: 16px;
  }
  
  .header-search button:hover {
      background: var(--search-btn-bg-hover);
  }
  
  .theme-toggle {
      cursor: pointer;
      font-size: 20px;
      color: var(--body-text);
      display: flex;
      align-items: center;
      margin-left: 15px;
      margin-right: 15px;
  }
  
  /* Hide Desktop Menu on Mobile */
  @media (max-width: 991px) {
      .menu-container {
          display: none;
      }
  }
  
  /* Mobile Header */
  .mobile-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--mobile-header-bg);
    padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  
  /* Hamburger Toggle: positioned on the left */
  .mobile-menu-toggle {
    position: absolute;
    left: 10px;
    font-size: 24px;
    color: var(--body-text);
    cursor: pointer;
  }
  
  /* Centered Mobile Logo */
  .mobile-logo img {
    height: 40px;
  }
  
  /* Mobile Side Menu Container */
  .mobile-side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: linear-gradient(135deg, var(--side-menu-gradient-start), var(--side-menu-gradient-end));
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  /* When active, slide the side menu in */
  .mobile-side-menu.active {
    transform: translateX(0);
  }
  
  /* Side Menu Header with Close Icon */
  .side-menu-header {
    display: flex;
    justify-content: flex-end;
  }
  
  .side-menu-close {
    font-size: 15px;
    color: var(--side-menu-close-color);
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .side-menu-close:hover {
    transform: scale(1.1);
  }
  
  /* Navigation Links within Side Menu */
  .side-nav ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
  }
  
  .side-nav ul li {
    margin: 15px 0;
  }
  
  .side-nav ul li a {
    color: var(--side-nav-link-color);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  
  .side-nav ul li a:hover {
    color: #000;
    transform: translateX(5px);
  }
  
  /* Footer with Dark Mode Toggle */
  .side-menu-footer {
    margin-top: auto;
    border-top: 1px solid var(--side-menu-footer-border);
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .dark-mode-toggle {
    display: flex;
    align-items: center;
    color: var(--dark-mode-toggle-color);
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .dark-mode-toggle span {
    margin-right: 8px;
    font-size: 14px;
  }
  
  /* Mobile Navbar Brand */
  .navbar-brand {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--mobile-header-bg);
      padding: 10px 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
  }
  
  /* Mobile Menu Wrapper */
  .mobile_only {
      width: 100%;
      background: var(--menu-bg);
      padding: 10px 0;
      overflow-x: auto;
      white-space: nowrap;
      top: 50px;
      left: 0;
      z-index: 999;
      border-radius: 10px;
      margin-top: 4px;
      position: fixed;
  }
  
  /* Mobile Menu */
  .mobile_menu {
      display: flex;
      gap: 5px;
      padding: 0 5px;
  }
  
  .mobile_menu a {
      text-decoration: none;
      color: var(--nav-link-underline);
      text-align: center;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 80px;
  }
  
  .mobile_menu a i {
      font-size: 18px;
      margin-bottom: 5px;
  }
  
  @media (min-width: 992px) {
    .mobile-header,
    .mobile_menu,
    .navbar-brand,
    .mobile_menu,
    .mobile_only {
      display: none;
    }
  }
  
  /* Hide Mobile Search Form from desktop */
  @media (min-width: 992px) {
    .xsearch-wrapper {
      display: none !important;
    }
  }
  
  /* Mobile Search Form Styles */
  .xsearch-wrapper {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
  
  .xsearch-form {
    display: flex;
    align-items: center;
    width: 80%;
    max-width: 600px;
    background: var(--xsearch-form-bg);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 2px solid var(--xsearch-border);
  }
  
  .xsearch-input {
    background: transparent;
    border: none;
    color: var(--body-text);
    font-size: 16px;
    padding: 10px;
    outline: none;
  }
  
  .xsearch-dropdown select {
    background: transparent;
    border: none;
    color: var(--body-text);
    font-size: 16px;
    padding: 10px;
    outline: none;
    margin-left: 10px;
  }
  
  .xsearch-btn {
    background: none;
    border: none;
    color: var(--search-btn-bg);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    margin-left: 15px;
  }
  
  /* Responsive Adjustments for Mobile Search Form */
  @media (max-width: 768px) {
    .xsearch-form {
      width: 85%;
      padding: 5px 0;
    }
    
    .xsearch-input, .xsearch-dropdown select {
      font-size: 14px;
      padding: 8px;
    }
    
    .xsearch-btn {
      font-size: 18px;
    }
  }
  
  .body-wrapper {
    justify-content: space-between;
    background: none;
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  
  /* Homepage Layout */
  .homepage-container {
      display: flex !important;
      justify-content: space-between;
      gap: 20px;
  }
  
  /* Main Content */
  .main-content {
      width: 67%;
      align-self: flex-start;
      background: var(--mobile-header-bg);
      padding: 15px;
      border-radius: 10px;
  }
  
  @media (max-width: 991px) {
    .homepage-container {
      flex-direction: column;
      max-width: 100%;
      padding: 5px;
      margin: 0;
    }
    
    .main-content {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
    }
  }

  /* Sidebar Wrapper (Desktop) */
  .sidebar {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    flex: 1.5;
    margin-left: 2px;
  }
  
  /* Trending Sidebar Container */
  .trending-sidebar {
    background: var(--mobile-header-bg);
    padding: 15px;
    border-radius: 10px;
  }
  
  .trending-sidebar h3 {
    font-size: 20px;
    color: var(--menu-bg);
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  /* Trending Song List */
  .trending-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  /* Trending Song Item */
  .trending-item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color-d);
    transition: background 0.3s ease;
  }
  
  .trending-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  /* Numbering Outside the Thumbnail */
  .trending-number {
    font-size: 16px;
    font-weight: bold;
    color: var(--def-text-color);
    margin-right: 10px;
    min-width: 20px;
    text-align: right;
    display: inline-block;
  }  
  
  /* Thumbnail Container */
  .trending-thumbnail {
    position: relative;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .trending-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  
  /* Trending Song Details */
  .trending-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .trending-sidebar .song-title a {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
}

.trending-sidebar .song-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
}

.trending-sidebar .artist-name a {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: 600;
}

.trending-sidebar .artist-name {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: bold;
}

/* Mobile Adjustments: Sidebar Moves Below Main Content */
@media (max-width: 991px) {
  .sidebar {
    width: 100%;
    margin: 20px 0 0 0;
    border-radius: 8px;
  }
  
  .trending-sidebar {
    border-radius: 8px;
  }

  .trending-number {
    font-size: 14px;
  }
}
  
  /* Scrolling Banners Container */
  .scrolling-banners {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      overflow: hidden;
      margin: 0 0 30px -5px;
  }
  
  /* Scroll Buttons */
  .scroll-btn {
      background: var(--menu-bg);
      border: none;
      padding: 8px 12px;
      font-size: 22px;
      color: var(--nav-link-color);
      cursor: pointer;
      transition: background 0.3s ease;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
  }
  
  .scroll-btn:hover {
      background: rgba(255, 255, 255, 0.5);
  }
  
  /* Disable Previous Button When at First Banner */
  .prev-btn:disabled {
      background: rgba(255, 255, 255, 0.1);
      cursor: default;
  }
  
  /* Positioning Scroll Buttons */
  .prev-btn {
      left: 10px;
  }
  .next-btn {
      right: 10px;
  }
  
  .next-btn:disabled {
      background: rgba(255, 255, 255, 0.1);
      cursor: default;
  }
  
  /* Banner Wrapper (Track) */
  .banner-wrapper {
      display: flex;
      transition: transform 0.4s ease-in-out;
      width: 100%;
      max-width: 100%;
  }
  
  /* Ensure banners take the right space */
  .banner {
      flex: 0 0 calc(50% - 5px);
      padding: 5px;
      text-align: center;
      position: relative;
      transition: transform 0.3s ease;
      height: 250px;
      box-sizing: border-box;
  }
  
  /* Banner Image */
  .banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
  }
  
  /* Banner Category */
  .banner-category {
      position: absolute;
      top: 10px;
      left: 15px;
      background: var(--menu-bg);
      padding: 5px 10px;
      color: var(--nav-link-underline);
      font-size: 13px;
      font-weight: bold;
      border-radius: 3px;
  }
  
  .banner-category a {
      text-decoration: none;
      color: var(--nav-link-underline);
  }
  
  /* Banner Title */
  .banner-title {
      position: absolute;
      bottom: 10px;
      left: 15px;
      font-size: 15px;
      font-weight: bold;
      color: var(--nav-link-underline);
      background: var(--banner-title-bg);
      padding: 5px 10px;
      border-radius: 5px;
  }
  
  /* Play Button (Hidden Initially) */
  .play-circle {
      position: absolute;
      bottom: 15px;
      right: 15px;
      font-size: 30px;
      color: var(--nav-link-underline);
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
  }
  
  /* Show Play Button on Hover */
  .banner:hover .play-circle {
      opacity: 1;
  }
  
  /* Responsive Fixes */
  @media (max-width: 767px) {
      .banner {
          flex: 0 0 100%;
          height: 200px;
      }
      .scroll-btn {
          font-size: 18px;
          padding: 6px 10px;
      }
    
      .scrolling-banners {
          margin: 0 0 20px 0;
          width: 100%;
      }
      .homepage-container .banner {
          padding: 0;
      }
  }
  
  /* Add spacing between Latest Music and New Albums */
  .latest-music {
      margin-bottom: 50px;
  }
  
  .new-albums {
      margin-bottom: 50px;
  }
  
  /* Section Headers */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 7px;
    border-bottom: 3px solid var(--menu-bg);
    
}

.section-header h2 {
    font-size: 20px;
    color: var(--menu-bg);
    font-weight: bold;
}

.section-header .see-more {
    text-decoration: none;
    color: var(--menu-bg);
    font-weight: bold;
    font-size: 12px;
}

.section-header .see-more::after {
    content: "›";
}
  
  /* Music & Album Grid */
.music-grid, .album-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.album-grid .album-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--nav-link-underline);
}

/* Music & Album Cards */
.music-card, .album-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--mobile-header-bg);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%;
}

/* Let all grid items stretch to same height per row */
.music-grid > .music-card,
.album-grid > .album-card {
    align-self: stretch;
}

/* Music & Album Thumbnail */
.music-thumbnail, .album-thumbnail {
    position: relative;
    overflow: hidden;
}

.music-thumbnail img, .album-thumbnail img {
    width: 100%;
    height: 160px;
    display: block;
    object-fit: fill;
    border-radius: 5px;
}

/* Info section stretches with flex */
.music-info, .album-info {
    padding: 10px;
    flex-grow: 1;
}

.album-info .artist-name {
      margin-top: -6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--body-text);
  }

.music-info .artist-name {
      font-size: 13px;
      font-weight: bold;
      color: var(--body-text);
  }

/* Responsive Fix for Thumbnail */
@media (max-width: 768px) {
    .music-thumbnail img, .album-thumbnail img {
        width: 100%;
        height: 160px;
        display: block;
        object-fit: fill;
    }
}
  
  /* Show Play Button on Hover */
  .music-thumbnail:hover .play-icon, .album-thumbnail:hover .play-icon {
      opacity: 1;
  }
  
  /* Music & Album Info */
  .music-info, .album-info {
    padding-bottom: 10px;
    padding-left: 0;
    text-align: left;
    background: none;
}

.song-title, .album-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--nav-link-underline);
}

.music-card .artist-name {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: 600;
}
  
.album-card .artist-name {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: 600;
  }
  
  .music-card .artist-name a {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: bold;
}

.album-card .artist-name a {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: bold;
  }

  /* Responsive: 2 Columns on Mobile */
  @media (max-width: 768px) {
      .music-grid, .album-grid {
          grid-template-columns: repeat(2, 1fr);
      }
      .section-header h2 {
          font-size: 18px;
      }
      .latest-music, .new-albums {
          margin-bottom: 40px;
      }
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
  .music-grid, .album-grid {
      grid-template-columns: repeat(4, 1fr);
  }
}
  
  /* Song Section */
  .song-section {
      margin-bottom: 50px;
  }
  
  /* Section Header for Song Section */
  .song-section .section-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 15px;
      padding: 10px 15px;
      background: var(--menu-bg);
      border-radius: 5px;
  }
  
  .song-section .section-header h2 {
      font-size: 20px;
      color: var(--nav-link-underline);
      font-weight: bold;
  }
  
  @media (max-width: 768px) {
    .song-section:last-of-type {
      margin-bottom: 0;
    }
  }
  
  /* Song List */
  .song-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .song-item {
      display: flex;
      align-items: center;
      padding: 12px 10px;
      border-bottom: 1px solid var(--border-color-d);
      transition: background 0.3s ease;
  }
  
  .song-item:hover {
      background: rgba(255, 255, 255, 0.05);
  }
  
  /* Thumbnail */
  .song-thumbnail {
      position: relative;
      width: 55px;
      height: 55px;
      overflow: hidden;
      border-radius: 8px;
      margin-right: 15px;
      flex-shrink: 0;
  }
  
  .song-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
  }
  
  /* Play Button Centered on Hover */
  .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 22px;
      color: var(--nav-link-underline);
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  .song-thumbnail:hover .play-icon {
      opacity: 1;
  }
  
  /* Song Details */
  .song-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  /* See More Button at Bottom */
  .see-more-container {
      margin-top: 15px;
      text-align: right;
  }
  
  .see-more-btn {
      display: inline-block;
      background: var(--menu-bg);
      color: var(--nav-link-underline);
      font-size: 14px;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      transition: background 0.3s ease;
  }
  
  .see-more-btn:hover {
      background: var(--deep-blue-hover);
  }

  /* Load More */
  .load-more-wrapper {
      margin-top: 15px;
      text-align: center;
  }
  
  .load-more-btn {
      display: inline-block;
      background: var(--menu-bg);
      color: var(--nav-link-underline);
      font-size: 14px;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      transition: background 0.3s ease;
  }
  
  .load-more-btn:hover {
      background: #888;
  }
  
  .song-section .song-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .song-section .artist-name {
  font-size: 12px;
  color: var(--fartist-name);
  font-weight: bold;
  }
  
  .song-section .artist-name a {
  font-size: 12px;
  color: var(--fartist-name);
  font-weight: bold;
  }
  
  /* Footer */
  .site-footer {
      width: 100%;
      background: var(--footer-bg);
      color: var(--body-text);
      padding: 40px 0;
      text-align: center;
  }
  
  /* Footer Container */
  .footer-container {
      width: 1152px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
  }
  
  /* Footer Logo */
  .footer-logo img {
    height: 70px;
    width: 200px;
  }
  
  /* Footer Quick Links */
  .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 15px;
  }
  
  .footer-links ul li {
      display: inline;
  }
  
  .footer-links ul li a {
      text-decoration: none;
      color: var(--footer-link-color);
      font-size: 12px;
      transition: color 0.3s;
  }
  
  .footer-links ul li a:hover {
      color: var(--footer-link-hover-color);
  }
  
  /* Social Media */
  .social-icons {
      display: flex;
      gap: 15px;
      justify-content: center;
  }
  
  /* Enhance social media links as circular icons with a subtle hover scale effect */
  .social-icons a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      font-size: 18px;
      color: var(--footer-link-color);
      transition: color 0.3s, transform 0.3s;
      border-radius: 50%;
  }
  
  .social-icons a:hover {
      color: var(--footer-link-hover-color);
      transform: scale(1.1);
  }
  
  /* Footer Bottom */
  .footer-bottom {
      width: 100%;
      border-top: 1px solid #666869;
      padding: 10px 0;
      margin-top: 20px;
  }
  
  .footer-bottom p {
      font-size: 12px;
      color: var(--footer-link-color);
      margin: 0;
  }
  
  /* Responsive */
  @media (max-width: 991px) {
      .footer-container {
          width: 100%;
          flex-direction: column;
          text-align: center;
          gap: 10px;
      }
  
      .footer-links ul {
          flex-direction: row;
          justify-content: center;
      }
  
      .social-icons {
          flex-direction: row;
          justify-content: center;
      }
  }
  
  .breadcrumbs {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 5px;
    padding-bottom: 7px;
  }
  
  .breadcrumbs-line {
    width: calc(100% + 20px);
    height: 1px;
    background-color: var(--border-color-d);
    margin: 0 -10px 10px;
  }

  .breadcrumbs-line-page {
    width: calc(100% + 30px);
    height: 1px;
    background-color: var(--border-color-d);
    margin: 0 -15px 15px;
  }
  
  .breadcrumbs a {
    color: var(--accent-color);
    text-decoration: none;
  }
  
  .breadcrumb-separator {
    margin: 0 8px;
  }
  
  .breadcrumb-item.current {
    font-weight: bold;
  }
  
  /* Desktop Styles */
  .sp-song-featured {
    display: flex;
    gap: 20px;
    margin: 20px 0 30px 20px;
    align-items: flex-start;
  }
  
  .sp-song-image img {
    width: 310px; /* Adjust size as needed */
    height: 320px;
    border-radius: 8px;
  }
  
  .sp-song-info {
    flex: 1;
  }
  
  .sp-song-category {
    font-size: 14px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 30px;
    letter-spacing: 1px;
    padding-top: 10px;
  }
  
  .sp-song-details {
    list-style: none;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-d);
  }
  
  .sp-song-details li {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--body-text);
    padding-bottom: 5px;
  }
  
  .sp-song-details li strong {
    color: var(--text-color);
    margin-right: 5px;
  }
  
  .sp-song-controls {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .sp-song-controls button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--menu-bg);
    transition: color 0.3s ease;
  }
  
  .sp-song-controls button .fa-circle-play, .sp-song-controls button .fa-circle-pause {
    font-size: 35px;
  }
  
  /* Modern Share Button */
  .sp-share-btn {
    background-color: var(--menu-bg) !important;
    color: var(--nav-link-color) !important;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    display: flex;
    align-items: center;
  }
  
  .sp-share-btn:hover {
    background-color: #2187ee !important;
  }
  
  .sp-share-btn span {
    margin-left: 5px;
  }
  
  /* Hover for both controls */
  .sp-song-controls button:hover {
    color: #2187ee;
  }
  
  .sp-save-audio {
    background-color: var(--menu-bg) !important;
    color: var(--nav-link-color) !important;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    display: flex;
    align-items: center;
  }
  
  .sp-save-audio svg {
    margin-right: 5px;
    fill: var(--nav-link-color);
    width: 18px;
    height: 18px;
  }
  
  .mixtape-download-link .sp-save-audio {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
}
  
  /* Mobile Styles */
  @media (max-width: 768px) {
    /* Add container padding to control the horizontal margins */
    .sp-song-featured {
      flex-direction: column;
      align-items: center;
      padding: 10px;
      margin: 20px 0 30px 0;
    }
    
    .sp-song-image {
      width: 100%;
      text-align: center;
    }
    
    .sp-song-image img {
      width: 100%;
      max-width: 400px;
      display: block;
      margin: 0 auto 10px auto; /* Centered image with equal margins */
    }
    
    .sp-song-info {
      width: 100%;
      align-self: flex-start;
      text-align: left;
      margin-left: 10px;
    }
    
    .sp-song-details li {
      font-size: 15px;
      padding-bottom: 10px;
    }
    
    .sp-song-controls {
      justify-content: flex-start;
    }
  }
  
  /* Post Title Styling */
  .sp-post-title {
    font-size: 23px;
    font-weight: bold;
    color: var(--body-text);
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.3;
    margin-left: 20px;
  }
  
  /* Responsive Styling */
  @media (max-width: 768px) {
    .sp-post-title {
      font-size: 20px;
      margin-left: 10px;
    }
  }
  
  .sp-tabs {
    margin: 20px;
    font-family: Inter;
  }
  
  /* Tab Headers */
  .sp-tab-headers {
    display: flex;
    border-bottom: 1px solid var(--border-color-d);
    margin-bottom: 15px;
  }
  
  .sp-tab-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    color: var(--body-text);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s ease;
  }
  
  .sp-tab-btn.active {
    border-bottom: 4px solid var(--menu-bg);
  }
  
  .sp-tab-panel {
    display: none;
  }
  
  .sp-tab-panel.active {
    display: block;
  }
  
 /* ============================
   Music Single Content Styling
   ============================ */

/* Container and Text settings */
.sp-tab-text {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    color: var(--body-text);
}

/* Paragraph spacing and inheritance */
.sp-tab-text p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
}
  
  /* Toggle Button */
  .sp-toggle-btn {
    background: none;
    border: 1px solid var(--border-color-d);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    color: var(--menu-bg);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .sp-toggle-btn:hover {
    background-color: #2187ee;
    color: var(--nav-link-color);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    /* Keep headers and text aligned left on mobile */
    .sp-tab-headers {
      justify-content: flex-start;
    }
    .sp-tab-btn {
      font-size: 15px;
    }
    
    .sp-tabs {
    margin: 10px;
  }
  }
  
  .sp-audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--header-bg);
    color: var(--body-text);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  
  /* Footer play/pause button */
  .sp-player-play-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--menu-bg);
    cursor: pointer;
  }
  
  .sp-player-track-info {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 15px;
  }
  
  .sp-player-cover {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .sp-player-details {
    display: flex;
    flex-direction: column;
  }
  
  .sp-player-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .sp-player-artist {
    font-size: 13px;
    color: var(--body-text);
  }
  
  .sp-player-timing {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .sp-current-time,
  .sp-total-time {
    font-size: 12px;
  }
  
  .sp-progress-bar {
    width: 150px;
    height: 4px;
    background: var(--border-color-d);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  
  .sp-progress {
    width: 0%;
    height: 100%;
    background: #2187ee;
    border-radius: 2px;
  }
  
  .sp-player-close {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--body-text);
    cursor: pointer;
    display: inline-flex;
      margin-top: -40px;
  }
  
  @media (max-width: 768px) {
    .sp-audio-player {
      align-items: stretch;
      padding: 10px;
      width: 100%;
      border-top: 2px solid var(--menu-bg);
    }
    
    .sp-player-play-btn {
    background: none;
    border: none;
    font-size: 25px;
    color: var(--menu-bg);
    cursor: pointer;
      z-index: 999;
      text-shadow: 0 0 6px #000000;
      margin-right: -3px;
  }
  
  .sp-player-cover {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    position: absolute;
    margin-left: -27px;
  }
    
   .sp-player-details {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
  }
    
    .sp-player-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .sp-player-artist {
    font-size: 11px;
    color: var(--body-text);
  }
    
    .sp-player-track-info {
      margin: 10px 0;
    }
    
    .sp-player-timing {
      justify-content: space-between;
      width: 45%;
    }
    
    .sp-player-close {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--body-text);
    cursor: pointer;
     display: inline-flex;
      margin-top: -10px;
  }
  }
  
  /* Related Songs Section */
  .related-songs {
    margin-left: 10px;
  }
  
  .related-songs .related-header {
      font-size: 17px !important;
      color: var(--body-text);
      font-weight: bold;
    display: inline-flex;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  
  /* Related Songs List */
  .related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  /* Related Song Item */
  .related-item {
    display: flex;
    align-items: center;
    width: calc(50% - 10px); /* 2 columns */
    gap: 10px;
    background: var(--mobile-header-bg);
    padding: 10px;
    transition: transform 0.3s ease;
    margin-bottom: 10px;
  }
  
  .related-list li {
    border-bottom: 1px solid var(--border-color-d);
  }
  
  /* Thumbnail */
  .related-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  
  .related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  
  /* Song Info */
  .related-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }
  
  /* Song Title */
  .related-song-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  /* Artist Name */
  .related-artist-name a {
    font-size: 12px;
    color: var(--rartist-name);
  }

  .related-artist-name {
    font-size: 12px;
    color: var(--rartist-name);
  }
  
  /* Responsive: Mobile (1 Column) */
  @media (max-width: 768px) {
    .related-item {
      width: 100%; /* Full width on mobile */
    }
  
    .related-song-title {
      font-size: 15px;
    }
  
    .related-artist-name {
      font-size: 13px;
    }
  }
  
  /* Comments Section Container */

  .logged-in-user {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .comments-section {
    background: var(--mobile-header-bg);
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
  }
  
  /* Styled Comments Header */
  .comments-header {
    font-size: 20px;
    color: var(--body-text);
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 2px solid var(--border-color-d);
    padding-bottom: 10px;
  }
  
  /* Comments List */
  .comments-list {
    margin-bottom: 20px;
  }
  
  /* Individual Comment */
  .comment {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color-d);
  }
  
  /* Remove bottom border for nested replies and add a top border instead */
  .comment.reply {
    border-bottom: none;
    border-top: 1px solid var(--border-color-d);
    padding-top: 15px;
  }
  
  /* Comment Header */
  .comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  
  /* Author Info */
  .comment-author-avatar {
    margin-right: 10px;
  }
  
  .comment-author-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .comment-author-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .comment-author-name {
    font-weight: bold;
    font-size: 14px;
  }
  
  .comment-date {
    font-size: 12px;
    color: var(--rartist-name);
  }
  
  /* Comment Body */
  .comment-body p {
    font-size: 14px;
    line-height: 1.5;
    margin: 5px 0 10px 0;
  }
  
  /* Comment Actions */
  .comment-actions {
    display: flex;
    gap: 10px;
    font-size: 14px;
  }
  
  .reply-btn,
  .love-btn {
    background: none;
    border: none;
    color: var(--search-btn-bg);
    cursor: pointer;
    transition: color 0.3s;
    font-size: 14px;
  }
  
  .reply-btn:hover,
  .love-btn:hover {
    color: var(--deep-blue-hover);
  }
  
  .love-btn i {
    margin-right: 4px;
  }
  
  /* When loved, highlight in red */
  .love-btn.loved {
    color: #e74c3c;
  }
  
  .love-count {
    font-size: 14px;
  }
  
  /* Reply Form Container */
  .reply-form-container {
    margin-top: 10px;
    margin-left: 50px;
  }
  
  /* Reply Form */
  .reply-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .reply-form input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color-d);
    border-radius: 4px;
    background: var(--body-bg);
    color: var(--body-text);
  }
  
  .reply-form button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background: var(--search-btn-bg);
    color: var(--nav-link-underline);
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .reply-form button:hover {
    background: var(--search-btn-bg-hover);
  }
  
  /* Nested Replies Container */
  .replies {
    margin-top: 10px;
    margin-left: 50px;
  }
  
  /* Top-Level Comment Form */
  .comment-form {
    background: var(--menu-bg);
    padding: 20px;
    border-radius: 8px;
  }
  
  .comment-form h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: var(--nav-link-underline);
  }
  
  .comment-form input[type="text"],
  .comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color-d);
    border-radius: 4px;
    background: var(--body-bg);
    color: var(--body-text);
    margin-bottom: 10px;
  }
  
  .comment-form button {
    background: var(--search-btn-bg);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    color: var(--nav-link-underline);
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .comment-form button:hover {
    background: var(--search-btn-bg-hover);
  }

  .comment-success {
    background-color: #e0f7e9;
    color: #256029;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 14px;
    animation: fadeSuccess 0.4s ease;
  }
  
  @keyframes fadeSuccess {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }  
  
  /* Section Header for Song Section */
  .archive-section .archive-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 15px;
      padding: 5px 0 15px 0;
      border-bottom: 3px solid var(--menu-bg);
      background: none;
  }
  
  .archive-section {
    margin-bottom: 10px;
  }
  
  .archive-section .section-header h2 {
      font-size: 20px;
      color: var(--nav-link-underline);
      font-weight: bold;
  }
  
  .archive-section .song-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .archive-section .artist-name {
    font-size: 13px;
    color: var(--def-text-color);
  }
  
  .archive-section .artist-name a {
    font-size: 13px;
    color: var(--def-text-color);
  }
  
  @media (max-width: 768px) {
    .archive-section:last-of-type {
      margin-bottom: 0;
    }
  }
  
  @media (min-width: 769px) {
    .archive-section {
      padding: 10px;
    }
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
  
  .pagination .page-numbers {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: var(--nav-link-underline);
    background-color: var(--menu-bg);
    border: 1px solid var(--border-color-d);
    border-radius: 3px;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .pagination .page-numbers:hover {
    background-color: var(--search-btn-bg-hover);
    color: #fff;
  }
  
  /* Active page styling */
  .pagination .page-numbers.current {
    background: none;
    color: var(--body-text);
    border: 1px solid var(--accent-color);
    cursor: default;
    padding: 7px 14px;
  }
  
  .pagination .page-numbers.dots {
    pointer-events: none;
    border: none;
    background: none;
    font-size: 16px;
    color: var(--body-text);
  }
  
  /* Style the Previous and Next links with SVG and text */
  .pagination .prev,
  .pagination .next {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  
  .pagination .pagination-icon {
    display: inline-block;
    vertical-align: middle;
  }
  
  /* Mobile Adjustments */
  @media (max-width: 768px) {
    .pagination {
      padding: 10px 0;
      font-size: 14px;
    }
    
    .pagination .page-numbers {
      margin: 0 3px;
      padding: 3px 8px;
    }
    
    .pagination .page-numbers.dots {
      font-size: 14px;
    }
    
    /* Active page styling */
  .pagination .page-numbers.current {
    background: none;
    color: var(--body-text);
    border: 1px solid var(--accent-color);
    cursor: default;
    padding: 4px 9px;
  }
  }
  
  .archive-description {
    background: var(--mobile-header-bg);
    padding: 20px;
    padding-bottom: 40px; /* Increased bottom padding for spacing */
    border-radius: 8px;
    margin: 20px 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .archive-description p {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--body-text);
  }
  
  /* Last Updated label styled as a badge in the bottom-right */
  .last-updated {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--rartist-name);
    background: rgba(0, 0, 0, 0.05);
    padding: 5px 10px;
    border-radius: 4px;
  }
  
  .last-updated i {
    margin-right: 5px;
    font-size: 16px;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .archive-description {
      padding: 15px;
      padding-bottom: 35px;
    }
    .archive-description p {
      font-size: 14px;
    }
    .last-updated {
      font-size: 12px;
      bottom: 8px;
      right: 8px;
      padding: 4px 8px;
    }
  }
  
  .hottest-search {
    margin: 10px 15px;
  }
  
  .gb-space {
    border: none;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .hottest-label {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 10px;
  }
  
  .hottest-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .hottest-buttons .search-btn {
    background: none;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .hottest-buttons .search-btn:hover {
    background: var(--search-btn-bg);
    color: #fff;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .hottest-label {
      font-size: 16px;
    }
    
    .hottest-buttons .search-btn {
      padding: 6px 12px;
      font-size: 13px;
    }
  }
  
  /* ----------------------------
     Album Post Container
  ----------------------------- */
  .album-post {
    margin: 5px auto;
    padding: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  .album-post {
    margin-bottom: 15px;
    line-height: 1.5 !important;
    background: var(--mobile-header-bg);
    border-radius: 8px;
    font-size: 15px !important;
  }
  
  @media (max-width: 991px) {
    .album-post {
    margin: 5px auto;
    padding: 5px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  }
  
  /* ----------------------------
     Album Header
  ----------------------------- */
  .album-header {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
  }
  
  .album-artwork img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
  }
  
  /* New wrapper to group album info and controls */
  .album-details-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  /* Album Info */
  .album-details-wrapper .album-info {
    flex: 1;
    background: var(--music-info-bg);
    padding: 10px;
  }
  .album-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--nav-link-underline);
    margin-bottom: 10px;
  }
  .album-artist {
    font-size: 14px;
    color: var(--nav-link-underline);
    margin-bottom: 8px;
  }
  .album-details {
    font-size: 12px;
    color: var(--nav-link-underline);
  }
  
  /* ----------------------------
     Album Controls
  ----------------------------- */
  .album-controls {
    display: flex;
    gap: 15px;
    margin-top: 20px; /* Place controls below album info */
    flex-wrap: nowrap;
  }
  .album-controls button {
    background: var(--menu-bg);
    color: var(--nav-link-color);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .album-controls button:hover {
    background: var(--search-btn-bg-hover);
  }
  
  /* ----------------------------
     Responsive Adjustments
  ----------------------------- */
  @media (max-width: 991px) {
    .album-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .album-details-wrapper {
      width: 100%;
    }
    .album-controls {
      justify-content: left;
      flex-direction: row;
      align-items: left;
    }
  }
  
  /* ----------------------------
     Album Overview
  ----------------------------- */
  .album-overview {
    margin-bottom: 30px;
  }
  .album-overview h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--body-text);
    border-bottom: 2px solid var(--menu-bg); /* Bottom border */
    padding-bottom: 5px;
  }
  .album-overview p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    color: var(--body-text);
    margin-bottom: 20px;
  }
  
  /* ----------------------------
     Tracklist
  ----------------------------- */
  .album-tracklist {
    margin-bottom: 10px;
  }
  .tracklist-header {
    font-size: 22px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 5px;
  }
  .track-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color-d);
    transition: background 0.3s ease;
  }
  .track:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  .track-number {
    font-size: 13px;
    width: 30px;
    text-align: center;
    color: var(--body-text);
  }
  .track-title {
    flex: 1;
    margin-left: 10px;
    font-size: 16px;
    color: var(--body-text);
    font-weight: 600;
  }

.track-title a {
    font-size: 13px;
    color: var(--accent-color);
  }
  
  .track-duration {
    font-size: 14px;
    color: var(--rartist-name);
    width: 50px;
    text-align: right;
    margin-right: 15px; /* Increased spacing for mobile */
    font-size: 13px;
  }
  .track-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--menu-bg);
    font-size: 15px;
    transition: color 0.3s ease;
    width: 20px;
    height: 20px;
    margin-top: -1px !important;;
    
  }
  .track-play-btn:hover {
    color: #2187ee;
  }
  
  /* ----------------------------
     Responsive Adjustments
  ----------------------------- */
  @media (max-width: 991px) {
    .album-header {
      flex-direction: column;
      text-align: center;
    }
    .album-artwork img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    
    .track {
      flex-wrap: wrap;
    }
    .track-duration {
      margin-right: 10px;
    }
    .track-play-btn {
      margin-top: 5px;
    }
  }
  
  /* ----------------------------
     Sticky Footer Album Player (xp-album-player)
  ----------------------------- */
  .xp-album-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 60%; /* Adjust as needed */
    background: var(--header-bg);
    color: var(--body-text);
    padding: 10px 20px;
    display: flex;
    flex-direction: column; /* Stack main controls and nav vertically */
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    height: 65px;
    border-top: 2px solid var(--menu-bg);
  }
  
  /* Main Player Controls */
  .xp-player-track-info {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 10px 0;
    margin-top: -5px;
  }
  
  .xp-player-cover {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .xp-player-details {
    display: flex;
    flex-direction: column;
  }
  
  .xp-player-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .xp-player-artist {
    font-size: 12px;
    color: var(--body-text);
  }
  
  /* Timing & Progress (unchanged from sp-player) */
  @media (min-width: 992px) {
  .xp-player-timing {
    width: 1000px;
    display: flex;
    position: absolute;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    margin-left: 300px;
  }
  .xp-current-time,
  .xp-total-time {
    font-size: 12px;
  }
  .xp-progress-bar {
    width: 40%;
    height: 4px;
    background: var(--border-color-d);
    border-radius: 2px;
    overflow: hidden;
  }
    
    .xp-progress {
    width: 0%;
    height: 100%;
    background: var(--menu-bg);
    border-radius: 2px;
  }
  
  /* Navigation: Prev/Next controls below the progress bar */
  .xp-player-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 5px;
    margin-left: 250px;
    margin-top: -20px;
  }
  .xp-player-prev,
  .xp-player-next,
  .xp-player-play {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--menu-bg);
    transition: color 0.3s ease;
  }
  
  .xp-player-play {
    font-size: 20px !important;
  }
  .xp-player-prev:hover,
  .xp-player-next:hover {
    color: #2187ee;
  }
  
  /* Close Button */
  .xp-player-close {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--body-text);
    cursor: pointer;
    align-self: flex-end;
    margin-top: -12px;
    margin-right: -15px;
    position: absolute;
    font-size: 12px;
  }
  }
  
  /* Responsive adjustments for mobile */
  @media (max-width: 991px) {
    .xp-album-player {
      width: 100%;
      padding: 10px;
      height: 60px;
    }
    
    .xp-player-title {
      font-size: 14px;
    }
    
    .xp-player-artist {
      font-size: 12px;
    }
    
    .xp-player-track-info {
      margin: 10px 0;
      margin-top: -5px;
      display: flex;
      align-items: center;
      flex: 1;
    }
    .xp-player-timing {
      justify-content: center;
      gap: 5px;
      margin-top: -45px;
      padding-left: 75px;
      margin-right: -70px;
      display: flex;
      
    }
    .xp-progress-bar {
      width: 30%; 
      height: 4px;
      background: var(--border-color-d);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 5px;
    }
    
    .xp-progress {
    width: 0%;
    height: 100%;
    background: var(--menu-bg);
    border-radius: 2px;
  }
    
    .xp-current-time,
  .xp-total-time {
    font-size: 12px;
  }
    
    .xp-player-nav {
      gap: 20px !important;
      margin-top: 2px !important;
      padding-left: 75px !important;
      margin-right: -70px !important;
      display: flex !important;
      justify-content: center;
    }
    
    .xp-player-prev,
  .xp-player-next,
    .xp-player-play {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--menu-bg);
    transition: color 0.3s ease;
    }
    
    .xp-player-play {
      font-size: 20px;
    }
    
    .xp-player-close {
      background: none;
      border: none;
      color: var(--body-text);
      cursor: pointer;
      align-self: flex-end;
      position: absolute;
      font-size: 13px;
      margin-right: -5px;
      margin-top: -10px;
    }
  }
  
  /* Post Title Styling XP */
  .xp-post-title {
    font-size: 23px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.3;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 10px;
    
  }
  
  /* Responsive Styling */
  @media (max-width: 768px) {
    .xp-post-title {
      font-size: 20px;
      
    }
  }
  
  /* ----------------------------
     PageBody Container
  ----------------------------- */
  .pagebody {
    margin: 5px auto;
    padding: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  .pagebody p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
    list-style: disc;
  }
  
  .pagebody li {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-left: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  @media (max-width: 991px) {
    .pagebody {
    margin: 5px auto;
    padding: 5px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
    .pagebody p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  .pagebody li {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-left: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  }
  
  .page-heading {
    margin-bottom: 30px;
  }
  .page-heading h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--body-text);
    border-bottom: 2px solid var(--menu-bg); /* Bottom border */
    padding-bottom: 5px;
  }
  .page-heading p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--body-text);
  }
  
  /* ----------------------------
     404 Error Container
  ----------------------------- */
  .error {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 50px auto;
    padding: 30px;
    background: var(--mobile-header-bg);
    border-radius: 10px;
  }
  
  .error-content {
    max-width: 500px;
    padding: 20px;
  }
  
  .error-code {
    font-size: 6rem;
    font-weight: 700;
    color: var(--body-text);
    margin: 0;
  }
  
  .error-text {
    font-size: 1.2rem;
    color: var(--body-text);
    margin: 10px 0;
  }
  
  .error-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--menu-bg);
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
  }
  
  .error-btn:hover {
    background: var(--deep-blue-hover);
  }
  
  /* Responsive Design */
  @media (max-width: 991px) {
    .error {
      margin: 20px auto;
      padding: 20px;
    }
    
    .error-code {
      font-size: 4rem;
    }
  
    .error-text {
      font-size: 1rem;
    }
  
    .error-btn {
      font-size: 0.9rem;
      padding: 10px 16px;
    }
  }
  
  /* ----------------------------
     No Search Results UI
  ----------------------------- */
  .no-results {
      text-align: center;
      padding: 30px;
      margin: 40px auto;
      background: var(--mobile-header-bg);
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 500px;
  }
  
  .no-results-icon {
      font-size: 3rem;
      color: var(--accent-color);
      margin-bottom: 10px;
  }
  
  .no-results h3 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 5px;
      color: var(--body-text);
  }
  
  .no-results p {
      font-size: 1rem;
      color: var(--rartist-name);
      margin-bottom: 15px;
  }
  
  /* No Results Search Bar */
  .no-results-search {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--xsearch-form-bg);
      border: 2px solid var(--xsearch-border);
      border-radius: 8px;
      padding: 5px;
      max-width: 400px;
      margin: 0 auto;
  }
  
  .no-results-search input {
      flex: 1;
      padding: 10px;
      border: none;
      outline: none;
      font-size: 1rem;
      background: transparent;
      color: var(--body-text);
  }
  
  .no-results-search button {
      padding: 10px 15px;
      background: var(--menu-bg);
      border: none;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.3s ease;
  }
  
  .no-results-search button:hover {
      background: var(--search-btn-bg-hover);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
      .no-results {
          padding: 20px;
          margin: 20px auto;
      }
  
      .no-results h3 {
          font-size: 1.5rem;
      }
  
      .no-results p {
          font-size: 0.9rem;
      }
  
      .no-results-search {
          max-width: 100%;
      }
  }

  @media (min-width: 992px) {
    .no-results-search.mobile {
      display: none !important;
    }
    }
    
    @media (max-width: 991px) {
      .no-results-search.mobile {
        max-width: 85%;
        margin-bottom: 10px;
      }
    }    
  
  /* ----------------------------
     Artists Page Styling
  ----------------------------- */
  .artists-page {
     margin-bottom: 10px;
    padding: 10px;
  }
  
  /* Section Titles */
  .section-subtitle {
      font-size: 18px;
      font-weight: bold;
      color: var(--body-text);
      margin-bottom: 12px;
      border-bottom: 2px solid var(--menu-bg);
      padding-bottom: 12px;
  }
  
  /* Top Artists Section */
  .top-artists-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 10px;
  }
  
  /* Top Artist Card */
  .top-artist-card {
      background: var(--header-bg);
      padding: 10px;
      border-radius: 6px;
      text-align: center;
      transition: transform 0.3s ease;
  }
  
  .top-artist-card:hover {
      transform: translateY(-5px);
  }
  
  /* Top Artist Image */
  .top-artist-card img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 50%;
  }
  
  .artist-letter {
    font-size: 22px;
    font-weight: bold;
    color: var(--body-text);
    border-bottom: 2px solid var(--menu-bg);
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  
  /* Artist Name */
  .artist-name, .top-artist-name {
      margin-top: 6px;
      font-size: 13px;
      font-weight: bold;
      color: var(--body-text);
  }
  
  /* Alphabet Navigation */
  .artist-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 25px;
      padding-top: 25px;
      border-top: 2px solid var(--menu-bg);
  }
  
  .artist-nav a {
      text-decoration: none;
      font-size: 12px;
      font-weight: bold;
      color: var(--nav-link-underline);
      background: var(--menu-bg);
      border-radius: 50%;
      height: 35px;
      width: 35px;
      display: flex;  /* Use flexbox */
      align-items: center;  /* Vertical center */
      justify-content: center;  /* Horizontal center */
      text-align: center;
  }
  
  .artist-nav a:hover {
      background: var(--search-btn-bg-hover);
  }
  
  /* Artists Grid */
  .artists-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      margin-top: 10px;
      margin-bottom: 25px;
  }
  
  /* Artist Card */
  .artist-card {
      text-align: center;
      margin-bottom: 15px;
  }
  
  .artist-card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      transition: transform 0.2s ease-in-out;
  }
  
  .artist-card img:hover {
      transform: scale(1.05);
  }
  
  /* Mobile Responsiveness */
  @media (max-width: 768px) {
      .top-artists-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  
      .artists-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  
      .artist-card img {
          width: 80px;
          height: 80px;
      }
    
    .artists-page {
     margin-bottom: 10px;
    padding: 5px;
  }
  }
/* style.css - Add to bottom */

/* Articles Grid Layout */
.articles-section {
    margin-bottom: 50px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns for articles look better */
    gap: 20px;
}

/* Article Card Design */
.article-card {
    background: var(--mobile-header-bg);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color-d);
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Thumbnail Area */
.article-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-thumbnail img {
    transform: scale(1.05);
}

/* Category Badge */
.article-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Content Area */
.article-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-meta {
    font-size: 12px;
    color: var(--rartist-name);
    margin-bottom: 10px;
}

.article-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.article-title a {
    color: var(--body-text);
    transition: color 0.2s;
}

.article-title a:hover {
    color: var(--accent-color);
}

.article-excerpt {
    font-size: 14px;
    color: var(--rartist-name);
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.read-more-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-more-link:hover {
    text-decoration: underline;
}

/* Responsive: Mobile 1 column, Tablet 2 columns */
@media (max-width: 991px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
    .article-thumbnail {
        height: 180px;
    }
}

/* =========================================
   New Article Header Styles
   ========================================= */

/* Category Label */
.article-cat-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cat-dot {
    width: 8px;
    height: 8px;
    background-color:
#2187ee;
    border-radius: 50%;
    display: inline-block;
}

.article-cat-text {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--body-text);
    letter-spacing: 0.5px;
    text-decoration: none;
}

/* Main Title */
.article-main-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--body-text);
}

/* Detailed Meta Container */
.article-meta-detailed {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color-d);
    margin-bottom: 25px;
}

/* Author Avatar */
.meta-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

/* Meta Info Text */
.meta-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    font-family: 'Inter', sans-serif;
}

.meta-row-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--body-text);
    font-weight: 500;
    margin-bottom: 4px;
}

.meta-author-name a {
    color: var(--body-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--rartist-name);
}

.meta-role {
    color: var(--rartist-name);
    font-size: 12px;
}

.meta-separator {
    color: var(--rartist-name);
    font-size: 12px;
}

.meta-time-ago {
    color: var(--rartist-name);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-bookmark {
    margin-left: 5px;
    color: var(--body-text);
    cursor: pointer;
}

.meta-row-bottom {
    font-size: 12px;
    color: var(--rartist-name);
}

/* Share Section */
.meta-share-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-top: 5px;
}

.share-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--rartist-name);
    display: flex;
    align-items: center;
    gap: 5px;
}

.share-icon {
    font-size: 16px;
    color: var(--body-text); 
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

.share-icon.fb { color: #1877F2; }
.share-icon.x-twitter { color: var(--body-text); }
.share-icon.email { color: #f39c12; }
.share-icon:hover { opacity: 0.8; transform: scale(1.1); }

/* Content Body Typography */
.article-content-body {
    font-family: 'Lora', serif; 
    font-size: 18px;
    line-height: 1.8;
    color: var(--body-text);
}

.article-content-body p {
    margin-bottom: 24px;
}

/* Tags Styles */
.tag-pill {
    background: var(--menu-bg);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 5px;
    display: inline-block;
}

/* Responsive: Mobile Layout */
@media (max-width: 768px) {
    .article-main-title {
        font-size: 24px;
    }

    .article-meta-detailed {
        position: relative;
    }

    /* Force share icons to own row on mobile */
    .meta-share-wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed var(--border-color-d);
        justify-content: flex-start;
    }
    
    .meta-row-top {
        font-size: 12px;
    }
}


/* Featured Image */
.article-featured-image {
    position: relative;
    width: 100%;        
    max-width: 100%;  
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden; 
    display: block;  
}

.article-featured-image img {
    width: 100% !important;  
    max-width: 100% !important; 
    height: auto !important; 
    display: block;
    object-fit: cover; 
}

/* ============================
   Article Archive Header Styles
   ============================ */

.archive-header-wrapper {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color-d);
}

.archive-main-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--body-text);
    margin-bottom: 8px;
    text-transform: capitalize;
}

.archive-sub-desc {
    font-size: 15px;
    color: var(--rartist-name);
    max-width: 800px;
    line-height: 1.6;
}

/* Adjust Grid for Archive Page */
.article-archive .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Responsive adjustment for the archive grid with sidebar */
@media (max-width: 1024px) {
    .article-archive .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .article-archive .articles-grid {
        grid-template-columns: 1fr;
    }
    
    .archive-main-title {
        font-size: 24px;
    }
}

/* ============================
   Article Tags Styling
   ============================ */

.article-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color-d);
}

.article-tags-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.tags-label {
    font-weight: 800;
    font-size: 14px;
    color: var(--body-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tags-label i {
    color: var(--accent-color);
}

.article-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-pill {
    display: inline-block;
    background-color: var(--menu-bg); /* Uses your theme's blue/menu color */
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px; /* Makes them rounded "pills" */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tag-pill:hover {
    background-color: var(--search-btn-bg-hover); /* Darker shade on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .article-tags-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ============================
   Social Follow Box Styling
   ============================ */
.social-follow-box {
    background: linear-gradient(135deg, var(--menu-bg) 0%, var(--deep-blue-hover) 100%);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin: 30px 0;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Subtle background glow effect */
.social-follow-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.social-follow-box h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff !important;
    position: relative;
    z-index: 1;
}

.social-follow-box p {
    font-size: 15px;
    margin-bottom: 25px;
    opacity: 0.9;
    color: #eee !important;
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.social-btn i {
    font-size: 18px;
}

/* Twitter / X Button */
.social-btn.twitter {
    background: #000;
    border: 1px solid rgba(255,255,255,0.2);
}

.social-btn.twitter:hover {
    background: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Telegram Button */
.social-btn.telegram {
    background: #229ED9;
    border: 1px solid rgba(255,255,255,0.2);
}

.social-btn.telegram:hover {
    background: #1c8ac0;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
    .social-follow-box {
        padding: 25px 20px;
        margin: 20px 10px;
    }
    .social-buttons {
        flex-direction: column;
        gap: 12px;
    }
    .social-btn {
        width: 100%;
    }
}

/*
===============================================================
   ADS POSITION
===============================================================
*/

.header-ad-slot,
.header-ad-slot-2,
.header-ad-slot-3,
.in-post-ad,
.sidebar-ad,
.after-article-ad {
    display: block; /* Can use flex, but block with margin auto often safer for ad scripts */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    clear: both;
    max-width: 100%;
}

.header-ad-slot {
    margin-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-d); /* Optional visual separation */
}

/* Flex centering for ensuring content inside sits in middle */
.header-ad-slot > div,
.in-post-ad > div,
.sidebar-ad > div,
.after-article-ad > div {
    margin: 0 auto;
    display: inline-block;
}

/* Optional: Add visible "Advertisement" label above ads */
.header-ad-slot::before,
.in-post-ad::before,
.sidebar-ad::before,
.after-article-ad::before {
    content: 'Advertisement';
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-align: center;
    opacity: 0.7;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .header-ad-slot,
    .in-post-ad,
    .sidebar-ad,
    .after-article-ad {
        overflow: hidden; /* prevent horizontal scroll caused by fixed width ads */
    }
}