/* Scott Price / SP Media Theme */

:root,
[data-bs-theme=light] {
  --bs-secondary-color: rgba(33, 37, 41, 1.0); 
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(240, 203, 255, 1);
  --bs-nav-pills-link-active-bg: #0dcaf0;
  --spm-picture-navbar-active-color: #00D4FF;
  --spm-picture-navbar-focus-color: #2C096C;
  --spm-picture-pill-active-bg: #6610f2;
  --spm-picture-accent-color: #00D4FF;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #ffffff;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: #0B011D;
  --bs-body-bg-rgb: 8, 5, 14;
  --bs-secondary-color: rgba(222, 226, 230, 1.0);
  --bs-link-color: #00D4FF;
  --bs-link-hover-color: #6610F2;
  --bs-link-hover-color-rgb: 102, 16, 242;
  --bs-border-color: #FFD700;
  --bs-border-color-translucent: rgba(255, 215, 0, 0.5);
  --spm-picture-navbar-active-color: #D4AF37;
  --spm-picture-navbar-focus-color: #FFD700;
  --bs-nav-pills-link-active-bg: #0dcaf0;
  --spm-picture-pill-active-bg: #2c096c;
  --spm-picture-accent-color: #D4AF37;
}
/*** Buttons ***/
[data-bs-theme=light] .btn-outline-primary {
    --bs-btn-color: #212529;
    --bs-btn-border-color: #6610f2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}
[data-bs-theme="light"] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6610F2;
    --bs-btn-border-color: var(--bs-border-color-translucent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00D4FF;
    --bs-btn-hover-border-color: #6f42c1;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6610f2;
    --bs-btn-active-border-color: var(--bs-border-color-translucent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}
[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6610F2;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6610F2;
    --bs-gradient: none;
}
[data-bs-theme=dark] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2C096C;
    --bs-btn-border-color: var(--bs-border-color-translucent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6610F2;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00D4FF;
    --bs-btn-active-border-color: var(--bs-border-color-translucent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}
.navbar .navbar-nav .nav-link {
    padding: 10px 5px;
    color: var(--bs-navbar-body-color);
    font-size: 18px;
    font-weight: 600;
}
.navbar .navbar-nav .nav-link:active,
.navbar .navbar-nav .nav-link.active {
    color: var(--spm-picture-navbar-active-color);
}

.navbar .navbar-nav .nav-link:focus-visible {
    color: var(--spm-picture-navbar-focus-color);
}
/* Normal, inactive pill */
#pills-tab.nav-pills .nav-link {
  color: #ffffff;
}

/* Use dark text during hover and keyboard focus */
#pills-tab.nav-pills .nav-link:hover,
#pills-tab.nav-pills .nav-link:focus-visible {
  color: #1A0B2E;
}

/* Keep active pill text white */
#pills-tab.nav-pills .nav-link.active,
#pills-tab.nav-pills .show > .nav-link {
  color: #ffffff;
}
/* Picture Lyrics dropdown hover color */
.dropdown-menu {
    --bs-dropdown-link-hover-bg: var(--bs-link-hover-color);
}
/* Full-sized bordered picture */
        .featured-image-container {
            border: 3px solid var(--spm-picture-accent-color);
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 2rem;
        }
        .featured-image {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Oval Bordered Nav Pills */
        .nav-pills .nav-link {
            border: 2px solid var(--spm-picture-accent-color);
            border-radius: 50px; /* Makes them oval */
            margin: 0 5px;
            padding: 10px 25px;
            color: #ffffff;
            transition: all 0.3s ease;
        }
        .nav-pills .nav-link.active {
            background-color: var(--spm-picture-pill-active-bg);
            color: white;
        }
        .nav-pills .nav-link:hover{
            background-color: var(--spm-picture-accent-color);
            color: #1A0B2E;  
    }

        /* Side Panel (Offcanvas) Styling */
        .offcanvas-lyrics {
            width: 100% !important;
        }
        @media (min-width: 768px) {
            .offcanvas-lyrics {
                width: 400px !important;
            }
        }

        /* Close Button Styling */
        .btn-close-circle {
            font-size: 1.5rem;
            opacity: 0.8;
            transition: opacity 0.2s;
            background: none;
            border: none;
            color: inherit;
        }
        .btn-close-circle:hover {
            opacity: 1;
        }

        /* Member List Styling */
        .member-avatar {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
            border-width: 1.5px!important;
        }
        /* Ensure pills stay circular/oval on mobile when showing only icons */
@media (max-width: 575.98px) {
    .nav-pills .nav-link {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 50px;
    }
    .nav-pills .nav-link i {
        font-size: 1.2rem;
    }
}