/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
body {
    background: var(--bs-body-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--bs-text-color);
}
.entry-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    display: none;
}
.page-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}
.sub-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
a.navbar-brand img {
    width: 130px;
}
.bold{font-weight: 600;}
.bolder{font-weight: 700;}
.smaller{font-size: 14px;}
.smallest {font-size: 12px;}

.icon-primary{color: #673de6;}
.btn{border-radius: 30px;;}
.btn-primary {
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 18px 40px !important;
    border: none;
    border-radius: 12px !important;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
}
.btn-small {
    font-size: 14px;
    padding: 5px 10px;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active {
    background-color: #5e2df1;
    border-color: #5e2df1;
}

/* Apply to all scrollable elements */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-gray-300) var(--bs-body-bg); /* For Firefox */
}

/* WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5; /* light background for contrast */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-gray-300); /* your main theme color */
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-500); /* slightly darker shade on hover */
}


.form-select, select{font-size: 14px;}

/* Fixed Header */
        .app-header {
            top: 0;
            left: 0;
            right: 0;
            padding: 15px;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
.main-logo img {
    width: 100px;
}
        .menu-icon {
            width: 40px;
            height: 40px;
            background: #fd8e00;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .menu-icon:hover {
            background: #e0e0e0;
        }

        .menu-icon i {
            color: #333;
            font-size: 18px;
        }

        .welcome-text h6 {
            font-size: 13px;
            font-weight: 400;
            margin: 0;
        }

        .welcome-text h4 {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .header-right {
            display: flex;
            gap: 15px;
            align-items: center;
        }

      

        .notification-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 8px;
            height: 8px;
            background: #ff4757;
            border-radius: 50%;
        }

/* Slide-in Menu & Notifications Common Styles */
.slide-in-menu,
.slide-in-notifications {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: var(--bs-body-bg);
    z-index: 10;
    transition: right 0.3s ease-in-out;
}

.slide-in-menu.active,
.slide-in-notifications.active {
    right: 0;
}

.menu-overlay,
.notifications-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.slide-in-menu.active + .menu-overlay,
.slide-in-notifications.active + .notifications-overlay {
    opacity: 1;
    visibility: visible;
}

.menu-content,
.notifications-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Menu Specific Styles */
.menu-header {
    padding: 20px;
    background: linear-gradient(135deg, #673de6 0%, #9774ff 100%);
    color: white;
    position: relative;
}

.menu-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.user-profile {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    margin-right: 15px;
}

.user-info h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.user-info p {
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    border-bottom: 1px solid var(--bs-gray-200);
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.menu-link:hover {
    background-color: var(--bs-gray-100);
    color: var(--bs-primary);
}

.menu-link i {
    width: 24px;
    margin-right: 15px;
    font-size: 1.1rem;
}

.menu-footer {
    border-top: 1px solid var(--bs-gray-200);
    padding: 20px;
}

.premium-section {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.premium-icon {
    background: rgba(255,255,255,0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.premium-icon i {
    color: #ff6b00;
    font-size: 1.2rem;
}

.premium-content {
    flex: 1;
}

.premium-content h5 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.premium-content p {
    margin: 2px 0 0 0;
    font-size: 0.8rem;
    color: #666;
}

.btn-upgrade {
    background: #333;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.logout-btn {
    display: flex;
    align-items: center;
    color: var(--bs-danger);
    text-decoration: none;
    padding: 10px 0;
    font-weight: 500;
}

.logout-btn i {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Notifications Specific Styles */
.notifications-header {
    padding: 20px;
    position: relative;
}

.notifications-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.notifications-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.notifications-title h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.btn-mark-all-read {
    background: none;
    border: none;
    color: var(--bs-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
}

.btn-mark-all-read:hover {
    color: var(--bs-primary);
}

.notifications-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.notifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--bs-body-bg);
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-gray-200);
    transition: background-color 0.2s ease;
    position: relative;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-item.unread {
    background-color: var(--bs-gray-100);
}

.notification-item.unread:hover {
    background-color: var(--bs-gray-200);
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-icon i {
    font-size: 1.1rem;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-content h6 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.notification-item.unread .notification-content h6 {
    color: var(--bs-primary);
}

.notification-content p {
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.4;
}

.notification-time {
    font-size: 0.75rem;
    color: #adb5bd;
}

.notification-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #673de6;
    margin-left: 10px;
    flex-shrink: 0;
    margin-top: 5px;
}

.notification-item:not(.unread) .notification-status {
    display: none;
}

.notifications-empty {
    padding: 40px 20px;
    text-align: center;
}

.empty-state i {
    font-size: 3rem;
    color: #adb5bd;
    margin-bottom: 15px;
}

.empty-state h5 {
    margin: 0 0 10px 0;
    color: #6c757d;
    font-weight: 600;
}

.empty-state p {
    margin: 0;
    color: #adb5bd;
    font-size: 0.9rem;
}

.notifications-footer {
    padding: 15px 20px;
}

.settings-link {
    display: flex;
    align-items: center;
    color: var(--bs-gray-800);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.settings-link:hover {
    color: #673de6;
}

.settings-link i {
    margin-right: 10px;
    font-size: 1rem;
}

/* Header Icon Styles */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.header-icon:hover {
    background: #e9ecef;
}

.header-icon i {
    font-size: 1.5rem;
}

.menu-trigger i {
    font-size: 1.5rem;
}

.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background: #dc3545;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

 /* Fixed Footer */
 footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}
        .app-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
            z-index: 1000;
        }

        .footer-nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
    flex-direction: row;
            margin: 0 auto;
            padding: 0;
            width: 100%;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            transition: all 0.3s;
            padding: 0 10px;
            color: var(--bs-text-color);
            text-decoration: none;
            font-size: 12px;
        }
.nav-item:hover {    color: #673de6;}

        .nav-item i {
            font-size: 22px;
            transition: all 0.3s;
        }

        .nav-item i.fa-user, .nav-item i.fa-home{font-weight: 500;}


        .nav-item span {
            font-size: 11px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .nav-item.active i,
        .nav-item:hover i {
            color: #673de6;
        }

        .nav-item.active span,
        .nav-item:hover span {
            color: #673de6;
        }

/* Top Navigation */
.site-header {
    padding: 0;
    top: 0;
    z-index: 99;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    width: 32px;
    height: 32px;
    background: #121212;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.search-bar {
    background: #f6f6f6;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    color: #121212;
}

.search-bar input::placeholder {
    color: #6a6a6a;
}

.top-nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-premium {
    background: #121212;
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
}

.btn-install {
    background: transparent;
    border: none;
    color: #121212;
    font-weight: 600;
    font-size: 14px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: #121212;
    font-size: 18px;
    cursor: pointer;
}

.profile-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
}

/* Sidebar */
.col-box {
    border-radius: 8px;
    height: calc(100vh - 70px);
}

.main-row {
    gap: 10px;
}

.sidebar {
    
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding: 15px 15px 0;
}

.sidebar-header>div {
    width: 100%;
}
.sidebar-header .side-top {
    display: flex;
    justify-content: space-between;
}
.sidebar-header h5 {
    font-weight: 700;
    font-size: 16px;
    margin: 0;
}
.sidebar .wp-block-search label {
    display: none;
}
.sidebar section.widget {
    margin-bottom: 5px !important;
}
.sidebar-tabs {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.sidebar-tab {
    background: transparent;
    border: none;
    color: #6a6a6a;
    font-weight: 600;
    font-size: 14px;
    padding: 5px 0;
    cursor: pointer;
    background: #eee;
    padding: 5px 12px;
    border-radius: 30px;
}

.sidebar-tab.active {
    color: #333;
    background: #f2ebff;
    font-weight: 700;
}
.sidebar-list {
    overflow-y: hidden; /* hide scrollbar by default */
  transition: overflow 0.3s ease;
   max-height: calc(100% - 80px);
   padding: 0 15px 15px 15px;
}
.sidebar-list:hover{
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px;
    cursor: pointer;
    transition: opacity 0.2s;
    background-color: #f2ebff;
    margin-bottom: 8px;
    border-radius: 8px;
}

.sidebar-item:hover {
    opacity: 0.7;
}

.sidebar-item img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

.sidebar-item-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #5e43f3, #7633ff);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}
.sidebar-item-info {
    flex-grow: 1;
}
.sidebar-item-info h6 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #121212;
}

.sidebar-item-info p {
    font-size: 12px;
    color: #6a6a6a;
    margin: 0;
}
.sidebar-info-btm span{
    margin-right: 15px;

}

/* Main Content */
.main-content {
    padding: 30px;
    background: #ffffff;
}

.section-heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #333;
}
.form-select:disabled, select:disabled {    background-color: #f0f0fd;    color: #bdbdd5;}
.submit-btn:disabled {    background: #cdcdeb;    cursor: not-allowed;}

/* Radio Cards */
.radio-card {
    background: #f6f6f6;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.radio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.radio-card.yellow {
    background: linear-gradient(135deg, #f4e04d, #e9d949);
}

.radio-card.cyan {
    background: linear-gradient(135deg, #7dd3c0, #6bc9b7);
}

.radio-card.coral {
    background: linear-gradient(135deg, #ff9a76, #ff8c63);
}

.radio-card.pink {
    background: linear-gradient(135deg, #ffaac7, #ff99bb);
}

.radio-card.teal {
    background: linear-gradient(135deg, #6dd5ed, #5cc5dd);
}

.radio-card.lime {
    background: linear-gradient(135deg, #d4fc79, #c5f166);
}

.radio-card.gray {
    background: linear-gradient(135deg, #e0e0e0, #d4d4d4);
}

.radio-card.lavender {
    background: linear-gradient(135deg, #d4c5f9, #c5b5e9);
}

.radio-badge {
    background: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 12px;
}

.radio-images {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.radio-img-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

.radio-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #121212;
    margin-bottom: 8px;
}

.radio-card p {
    font-size: 12px;
    color: #121212;
    opacity: 0.8;
    margin: 0;
}

.play-btn-hover {
    width: 48px;
    height: 48px;
    background: #1ed760;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 16px;
    right: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.play-btn-hover:hover {
    transform: scale(1.05);
}

.play-btn-hover i {
    color: #121212;
    font-size: 20px;
    margin-left: 3px;
}

/* Chart Cards */
.chart-card {
    border-radius: 12px;
    padding: 20px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.chart-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.chart-card.purple {
    background: linear-gradient(135deg, #8e2de2, #4a00e0);
}

.chart-card.red {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.chart-card.teal-dark {
    background: linear-gradient(135deg, #16a085, #138d75);
}

.chart-card.olive {
    background: linear-gradient(135deg, #95a56a, #7d8b58);
}

.chart-card.emerald {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.chart-card.orange {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.chart-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    align-self: flex-start;
}

.chart-badge img {
    width: 20px;
    height: 20px;
}

.chart-badge span {
    font-size: 11px;
    font-weight: 600;
}

.chart-card h4 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.2;
}

.chart-card p {
    font-size: 13px;
    opacity: 0.9;
    margin-top: auto;
}

/* Profile Dropdown */
.dropdown-menu {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 200px;
}

.dropdown-item {
    padding: 12px 20px;
    color: #121212;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: #f6f6f6;
}

.dropdown-divider {
    margin: 8px 0;
    border-color: #e0e0e0;
}



/* Responsive */

@media (min-width: 992px) {
    .navbar-expand-lg {
        width: 100%;
        display: block;
    }
}

@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -300px;
        top: 60px;
        width: 300px;
        height: calc(100vh - 60px);
        z-index: 999;
        transition: left 0.3s;
    }

    .sidebar.show {
        left: 0;
    }

    .main-content {
        padding: 20px 15px;
    }

    .section-title {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .search-bar {
        max-width: 200px;
    }

    .btn-premium {
        padding: 8px 16px;
        font-size: 12px;
    }

    .radio-card h5 {
        font-size: 16px;
    }

    .chart-card h4 {
        font-size: 24px;
    }
}

 /* Sticky header styles - only when scrolled to top */
.mcp-sticky-section {  position: relative; }
.mcp-sticky-section.sticky { position: sticky;  top: 0;  z-index: 10;  transition: all 0.3s ease; }
#mcp-content-type-tabs { background-color: var(--bs-body-bg);  transition: all 0.3s ease;        }
.title-ribbon{margin-left: -16px;  margin-right: -16px; border-radius: 0;  background-color: var(--bs-gray-200); color: var(--bs-white);  padding: 6px 15px; border: none;display: flex; align-items: center; justify-content: space-between;}
.title-ribbon .subject-info {    display: flex;    flex-direction: column;}
#mcp-pagination-info {  display: flex;    flex-direction: column; text-align: right; color: #fff;}
.title-ribbon .subject-info span {    font-size: 14px;}
#mcp-current-subject-name {    font-size: 18px;}
.mcp-wrapper .card, .mcp-wrapper .card .card-body {  padding: 0;  border: none;}
.mcp-wrapper .card .card-body ul.list-unstyled > li {    padding: 0 !important;}
.mcp-wrapper .card .card-body ul.list-unstyled > li .gs-cover {    display: none;}
.mcp-homepage-subjects > .d-flex{gap:8px !important;}
button.btn.mcp-ctype-tab {    margin-bottom: -2px;}
div#mcp-content-type-tabs { border-bottom: 2px solid var(--bs-gray-300);   margin-left: -15px;    margin-right: -15px; justify-content: space-around;}
.mcp-homepage-subjects {    margin-bottom: 30px;}
        button.btn.mcp-ctype-tab.active {
    border-left: none;
    border-right: none;
    border-top: none;
    border-color: transparent;
    border-bottom: 2px solid var(--bs-primary);
    padding: 10px;
    color: var(--bs-primary);
    border-radius: 0;
    font-weight: 700;
        background-color: transparent;
}
button.btn.mcp-ctype-tab.active:active, button.btn.mcp-ctype-tab.active:focus{
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
}

        .mcp-homepage-subjects button, button.mcp-subject-tab {
            border-radius: 12px;
            border: none;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            transition: transform 0.2s, box-shadow 0.2s;
            color: #111;
    padding: 6px 15px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 30px;
        }
        
        .mcp-homepage-subjects button:hover,  button.mcp-subject-tab:hover, button.mcp-subject-tab:active {
   
            color: #111;
        }
        
       .mcp-homepage-subjects button::before, button.mcp-subject-tab::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 60%;
            opacity: 0.05;
    z-index: 1;
        }
        
       .mcp-homepage-subjects button span, button.mcp-subject-tab span {
            z-index: 2;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .mcp-wrapper .card .card-body ul.list-unstyled > li .gs-card {
    padding: 15px 0;
    border-radius: 5px;
}
        
        /* English button */
        .mcp-homepage-subjects  button::before, button.mcp-subject-tab::before{display: none;}
        
      .mcp-homepage-subjects  button[data-subject*="english"], button.mcp-subject-tab[data-subject*="english"]{
            background-color: #b2eab8;
        }
      .mcp-homepage-subjects  button[data-subject*="english"]::before, button.mcp-subject-tab[data-subject*="english"]::before {
            background-image: url("/wp-content/themes/bootscore-child/assets/img/icons/book-icon.svg");
        }
        
        /* Social Science button */
      .mcp-homepage-subjects  button[data-subject^="social"], button.mcp-subject-tab[data-subject^="social"] {
            background-color: #b6eef5;
        }
       .mcp-homepage-subjects button[data-subject^="social"]::before, button.mcp-subject-tab[data-subject^="social"]::before {
            background-image: url("/wp-content/themes/bootscore-child/assets/img/icons/book-icon.svg");
        }
        
        /* English Grammar button */
       .mcp-homepage-subjects button[data-subject*="english-grammar"], button.mcp-subject-tab[data-subject*="english-grammar"] {
            background-color: #ffbe59;
        }
      .mcp-homepage-subjects button[data-subject*="english-grammar"]::before, button.mcp-subject-tab[data-subject*="english-grammar"]::before {
            background-image: url("/wp-content/themes/bootscore-child/assets/img/icons/book-icon.svg");
        }
        
        /* Science button */
       .mcp-homepage-subjects button[data-subject^="science"], button.mcp-subject-tab[data-subject^="science"] {
            background-color: #a9ccff;
        }
       .mcp-homepage-subjects button[data-subject^="science"]::before, button.mcp-subject-tab[data-subject^="science"]::before {
            background-image: url("/wp-content/themes/bootscore-child/assets/img/icons/book-icon.svg");
        }
        
        /* Maths button */
       .mcp-homepage-subjects button[data-subject*="maths"],  button.mcp-subject-tab[data-subject*="maths"]{
            background-color: #fdbcfe;
        }
      .mcp-homepage-subjects button[data-subject*="maths"]::before, button.mcp-subject-tab[data-subject*="maths"]::before {
            background-image: url("/wp-content/themes/bootscore-child/assets/img/icons/book-icon.svg");
        }


/* Remove the old audio background area */
.audio-bg-area {
    display: none !important;
}

/* Smooth Gradient Transitions for Audio Player */
.gs-footer-player {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #170837 0%, #131229 100%);
}

.gs-footer-player .gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #170837 0%, #131229 100%);
    background-size: cover;
    background-position: center;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
    opacity: 1;
    will-change: opacity; /* Performance optimization */
}

.gs-footer-player .gradient-background.new {
    opacity: 0;
}

.gs-footer-player .toggle-audio-player {
    position: relative;
    z-index: 1;
}

.gs-footer-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
    pointer-events: none;
}

.gs-footer-player.gs-full-screen-player::before {
    background: rgba(0, 0, 0, 0.5);
}

.audio-bg-area {
    display: none !important;
}



/* Playlist cards */
.gs-playlist { display:flex; flex-direction:column;  }

/* card */

.gs-card { display:flex; gap:10px; align-items:center; background: var(--bs-secondary-bg);  padding:0; border-radius:8px; margin-bottom: 10px; margin-bottom: 0;}
.gs-card:hover, .gs-card.active {  }
.gs-left { flex:0; display:flex; align-items:center; justify-content:flex-start; position:relative; width: 100%;}
.gs-cover { position:relative; width:60px; height:60px; border-radius:6px; overflow:hidden; }
.gs-cover img { width:100%; height:100%; object-fit:cover; display:block; }

/* play button overlay (left of cover like screenshot) */
.gs-fav {    margin-right: 15px;     display: flex;  align-items: center;}
.gs-play-btn { position:relative; width:40px; height:40px; border-radius:50%; background:var(--bs-primary); color: #fff; border:none; cursor:pointer;}
.gs-play-btn.playing { background:#ca1616; color:#fff; }
.play-btn {    margin-right: 5px;}
button.gs-more-btn {  background-color: transparent;  border: none;    font-size: 20px;}

/* right column */
.gs-right{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;     position: relative; max-width: 100%;}
.gs-title { font-size:14px; font-weight: 700; margin:0; display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 1;    overflow: hidden;    text-overflow: ellipsis;
    white-space: normal;}
.gs-sub { font-size:12px; color:var(--bs-gray-600); }

/* waveform canvas */
.gs-wave-wrap { position:relative; width:100%; }
.gs-waveform { width:100%; height:72px; display:block; background:transparent; border-radius:4px; }
.gs-wave-time { position:absolute; right:8px; top:6px; color:#9aa6b2; font-size:12px; }

/* actions */
.gs-actions { display:flex; gap:8px; margin-top:5px; }
.gs-action { background:#080808; font-size: 14px; border-radius:8px; padding:5px 10px; border:none; color:#aaaaaa; margin-right: 3px; cursor:pointer; }
.gs-end {    display: flex;    flex-wrap: wrap;    align-items: center;}
button.gs-share {    margin: 0 7px;}
.gs-fav button.gs-icon {    background: none;    border: none;  color: #333333;  font-size: 18px;}

/* footer player - fixed bottom */
.gs-footer-player { position:fixed; left:0; right:0; bottom:58px; background: #0d0c11;padding:0; border-radius:0; display:flex; align-items:center; gap:12px; z-index:99; }
.toggle-audio-player {    align-items: center;}
.gs-footer-left {     min-width: 70px;  max-width: 70px; display:flex; gap:10px; align-items:center;  width: 70px;  height: 70px;  padding: 5px;}
.gs-footer-thumb { width: 100%;    height: 100%; object-fit:cover; border-radius:6px; }
.gs-footer-title { font-weight:600;     text-align: left; color:#fff; }
.gs-footer-sub { color:var(--bs-gray-800); font-size:13px; text-align: left; }
.gs-footer-center { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; flex-grow: 1; padding: 15px 30px; width: 60%;}
.footer-progress { flex-grow: 1;}
.gs-foot-time {  display: flex;  justify-content: space-between;  color: var(--bs-gray-700);   margin-top: 7px; font-size: 12px;font-weight: 200;}

/* center controls */
.gs-foot-btn { background:#12171b; color:#fff; border:none;     padding: 8px 20px;  border-radius: 30px;  cursor: pointer; background-image: -webkit-linear-gradient(-57deg, #ff1e00 0%, #6a0000 100%); }
.gs-foot-progress {  margin:0; height:3px; background:rgba(255,255,255,0.2); border-radius:6px; position:relative; cursor:pointer;}
.gs-foot-progress-bar { position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--bs-white); border-radius:6px; }
.footer-actions {padding: 0 }
.footer-actions .gs-foot-btn {    border-radius: 50%; background: transparent; padding: 0; font-size: 24px;}
.footer-actions .gs-foot-btn#gs-prev, .footer-actions .gs-foot-btn#gs-next, .footer-progress{display: none;}
.footer-actions #gs-toggle img {    display: none !important;}
.footer-actions #gs-toggle.is-paused::before {  content: "\f04b"; /* Play icon */  font-family: "Font Awesome 6 Free";  font-weight: 900;}
.footer-actions #gs-toggle.is-playing::before {  content: "\f04c"; /* Pause icon */  font-family: "Font Awesome 6 Free";  font-weight: 900;}
button#gs-toggle{ font-size: 25px;  margin: 0 10px;    width: 40px;    height: 40px; color: var(--bs-dark-bg-subtle);   background-color: var(--bs-white); display: flex;    align-items: center;    justify-content: center;}
button#gs-toggle.is-paused:before {    display: none;}
button#gs-toggle::after, button#gs-toggle::before{color: #000;}
.gs-footer-right {  padding: 0 10px;}

.swiper{margin-right: -16px;}
.gs-category-header{display: none;}

.gs-audio-tabs {
  margin: 20px 0;
}

.gs-tab-nav {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  position: relative;
  justify-content:space-around;
}
.gs-tab-nav:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #30455f;
    background-image: linear-gradient(90deg, rgb(86 90 95) 40%, rgb(2 2 2) 100%);
}
.gs-tab-nav li button {
  padding: 8px 10px;
  cursor: pointer;
  color: #bbb;
      position: relative;
    font-weight: 600;
    transition: 0.3s;
    background: none;
    border: none;

}

.gs-tab-nav li button.active {
  color: #f10000;
   transition: 0.3s;
}

.gs-tab-content {
  display: none;
  padding-top: 15px;
  max-height: 600px;
    overflow-y: auto;
}

.gs-tab-content.active {
  display: block;
}
.gs-tab-nav li button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0%;
    height: 1px;
    background: #b70000;
    z-index: 1;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.gs-tab-nav li button.active::after {
    width: 75%;
}
.gs-playlist { display: none; }
.gs-playlist.visible { display: block; }
.character-bg-area {  background-position: center; background-size: auto; background-repeat: no-repeat;}


.gs-footer-player.gs-full-screen-player {
  height: calc(100vh);;
  background: #0d0c11;
background: linear-gradient(90deg, #131229 0%, #0d0c11 100%);
background: -moz-linear-gradient(90deg, #131229 0%, #0d0c11 100%);
background: -webkit-linear-gradient(90deg, #131229 0%, #0d0c11 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0d0c11", endColorstr="#131229", GradientType=1 );
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-shadow: 0 0 40px rgba(0,0,0,0.2);
      bottom: 0;
}
.gs-footer-player.gs-full-screen-player .toggle-audio-player {
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
}

.gs-footer-player.gs-full-screen-player .gs-category-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 8%;
}
.gs-footer-player.gs-full-screen-player .gs-categrory {    flex-grow: 1;    text-align: center;    color: #fff;}
.gs-footer-player.gs-full-screen-player .gs-categrory .gs-category-item {    font-size: 11px;  letter-spacing: 1px;  text-transform: uppercase;}
.gs-footer-player.gs-full-screen-player .gs-categrory .gs-category-title {    font-weight: 600;}
.gs-footer-player.gs-full-screen-player .gs-category-header .gs-more-btn {  display: flex;  align-items: center;  color: #fff;}
.gs-footer-player.gs-full-screen-player .gs-footer-left img { width: 100%;  height: 100%;  border-radius: 12px;  transition: all 0.3s ease;}
.gs-footer-player.gs-full-screen-player .gs-footer-title {font-size: large;}
.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn#gs-prev, 
.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn#gs-next, 
.gs-footer-player.gs-full-screen-player .footer-progress{display: block;}
.gs-footer-player.gs-full-screen-player button#gs-toggle {  font-size: 25px;  margin: 0 10px;    width: 65px;    height: 65px; }
.gs-footer-player.gs-full-screen-player #gs-toggle i {    font-size: 24px;}

.gs-footer-player .gs-minimize-btn {
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.gs-footer-player.gs-full-screen-player .gs-footer-left {
    width: 100%;
    max-width: 100%;
}
.gs-footer-player .gs-minimize-btn:hover {
 
  transform: scale(1.05);
}

.gs-full-screen-player .gs-footer-center,
.gs-full-screen-player .gs-footer-right {
  text-align: center;
  margin-top: 10px;
}
.gs-footer-player.gs-full-screen-player .gs-footer-center, .gs-footer-player.gs-full-screen-player .footer-progress {
    width: 100%;
}
.gs-footer-player.gs-full-screen-player .footer-actions {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 5px;
}

.gs-footer-player.gs-full-screen-player img.icon-player {    width: 20px;}
.gs-footer-player.gs-full-screen-player .gs-footer-center .gs-footer-meta {    flex-grow: 1;}
.gs-footer-player.gs-full-screen-player .gs-footer-center .gs-footer-right-icons {    display: flex; align-items: center;}
.gs-footer-player.gs-full-screen-player .gs-footer-center .gs-footer-right-icons img {  min-width: 24px;  max-width: 24px;}
.gs-footer-player.gs-full-screen-player .gs-footer-center .gs-footer-right-icons button.gs-fav-btn {font-size: 24px;}

/* Simple Working Marquee */
.gs-footer-meta {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gs-footer-title,
.gs-footer-sub {
    white-space: nowrap;
    display: inline-block;
    animation: none; /* No animation by default */
}

/* Only marquee when content exceeds */
.gs-footer-meta.title-overflow .gs-footer-title {
    animation: simpleMarquee 12s linear infinite;
    padding-left: 0; /* Start off-screen */
}

.gs-footer-meta.subtitle-overflow .gs-footer-sub {
    animation: simpleMarquee 15s linear infinite;
    animation-delay: 2s;
    padding-left: 0;
}

@keyframes simpleMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


/* Base styling */
.gs-tab-content {
  max-height: 600px;       /* limit height */
  overflow-y: hidden;      /* hide scrollbar initially */
  padding-right: 10px;     /* reserve space for scrollbar */
  box-sizing: content-box; /* prevent padding messing layout */
}

/* Show scrollbar only on hover/focus */
.gs-tab-content:hover,
.gs-tab-content:focus-within {
  overflow-y: auto;
}

/* WebKit (Chrome, Edge, Safari) */
.gs-tab-content::-webkit-scrollbar {
  width: 6px;              /* scrollbar width always reserved */
}

.gs-tab-content::-webkit-scrollbar-thumb {
  background-color: #dd0000; /* red scrollbar thumb */
  border-radius: 6px;
}

.gs-tab-content::-webkit-scrollbar-track {
  background-color: #2f2f2f; /* dark grey background */
}

/* Firefox */
.gs-tab-content {
  scrollbar-width: thin;             /* always reserve thin space */
  scrollbar-color: #dd0000 #2f2f2f;  /* thumb + track colors */
}
.audio-bg-area {
  content: ' ';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    z-index: -1;
    filter: blur(50x);
    -webkit-filter: blur(50px);
    background-repeat: no-repeat;
    background-position: 60%;
    background-size: 190%;
    transition: 0.5s;
}


/* Footer Player Toggle States */
#gs-toggle.is-paused .fa-play {    display: block;}

#gs-toggle.is-paused .fa-pause {    display: none;}
#gs-toggle.is-playing .fa-play {    display: none;}

#gs-toggle.is-playing .fa-pause {    display: block;}

/* Ensure proper icon display */
#gs-toggle i {    font-size: 16px;}

/* Progress bar cursor */
.gs-foot-progress {    cursor: pointer;}

.gs-foot-progress-bar {    transition: width 0.1s linear;}

/* Audio duration styling */
.gs-duration {    font-size: 12px;    color: #666;    font-weight: 500;}

.character-bg-area .main-poster, .character-bg-area .poster-wrap {    aspect-ratio: 16 / 10;}
.character-bg-area .poster-wrap {max-width: 60%; position: fixed;}
.audio-container .poster-wrap {height: auto;}
.audio-container{margin-bottom: 5rem; min-height: 70vh;}
@media (max-width:991px){
  .gs-footer-player{}
  .audio-container.px-5 {    padding-left: 20px !important;    padding-right: 20px !important;}
  .audio-bg-area{opacity: 0.2;}
  .gs-card { flex-direction:row; padding-right: 7px;}
  .gs-left { flex:0 0 0; }
  .gs-play-btn {  left: 0;  width: 30px; height: 30px; }
  .gs-footer-left {flex-direction: column;}
  .gs-footer-center{padding: 5px 0px 0 5px; flex-direction: column;}
  button.gs-share {    margin: 0 7px;}
 .gs-right, .gs-title {    flex-grow: 1;    overflow: hidden;    text-overflow: ellipsis;}
 .footer-actions { display: flex;    align-items: center;    padding: 0;   padding: 0; }
 .footer-progress{width: 100%;}
}

@media (min-width:768px){
.gs-footer-player.gs-full-screen-player .gs-footer-left {    width: 500px;    max-width: 500px;    height: 500px;}
.gs-full-screen-player .gs-footer-center, .gs-full-screen-player .gs-footer-right {  width: 100%; justify-content: center;   margin-top: 0;    flex-grow: initial;}
}

@media (max-width:767px){
  .character-bg-area .poster-wrap {    max-width: 100%;}
  .audio-container.row{margin: 0 !important; padding: 0 !important;}
  .gs-footer-player.gs-full-screen-player .gs-footer-title {-webkit-line-clamp: 1;}
  .gs-footer-player.gs-full-screen-player .gs-footer-left {height: auto;}
  .gs-footer-player.gs-full-screen-player .gs-footer-center{flex-grow: initial; display: flex; flex-wrap: nowrap; flex-direction: row; gap: 15px;}
  .gs-full-screen-player .gs-footer-right {  padding: 0;  text-align: center;    width: 100%;    align-items: center;    justify-content: center;    display: flex;    flex-direction: column;}
  html {    margin: 0 !important;}
  html #wpadminbar{display: none !important;}
}

@media (max-width:450px){
.gs-tab-nav li {  padding: 8px 6px;}
}
.gs-arrow-up{    position: absolute;    top: -20px;    right: 45%;}
#btn-audio-toggle{        background: #131229;    width: 35px;    height: 20px;    border-top-left-radius: 10px; color: #fff;
    border-top-right-radius: 10px;  border: none;}




    /* Progress Bar Styles */
.gs-foot-progress {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    margin: 10px 0;
}


.gs-foot-progress-handle {
    position: absolute;
    top: 50%;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gs-foot-progress:hover .gs-foot-progress-handle {
    opacity: 1;
}

.gs-foot-progress.dragging .gs-foot-progress-handle {
    opacity: 1;
}

/* Playback Speed Styles */
.playback-speed-container {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    justify-content: center;
}

.speed-btn {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.speed-btn.active,
.speed-btn:hover {
    background: #1db954;
    color: #000;
    border-color: #1db954;
}

/* More Menu Styles */
.gs-more-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.gs-more-menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.gs-more-menu-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bs-md-dark);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 80vh;
    overflow-y: auto;
}

.gs-more-menu.show .gs-more-menu-content {
    transform: translateY(0);
}

.gs-more-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
}

.gs-more-menu-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
}

.gs-more-menu-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

.gs-more-menu-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gs-more-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    background:none;
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
    width: 100%;
}

.gs-more-menu-item:hover {
    
}
.gs-more-menu-items button img {
    width: 20px;
}
.gs-more-menu-item i {
    font-size: 18px;
    width: 20px;
}
.gs-footer-right-icons {
    display: none;
}

/* Full screen player adjustments */
.gs-full-screen-player .gs-footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.gs-full-screen-player .footer-progress {
    width: 80%;
    max-width: 500px;
    padding-left: 5px;
    padding-right: 5px;
}

.gs-full-screen-player .footer-actions {
    margin: 10px 0;
}

.playback-speed-container{display: none;}

.gs-full-screen-player .playback-speed-container {
    display: block;
    margin-top: 0;
}

/* Speed toggle button styles */
.speed-toggle-btn {
    background: none;
    border: none;
    border-radius: 20px;
    color: white;
    padding: 0;
    cursor: pointer;
    gap: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 2px;
}

.speed-toggle-btn:hover {

}

.speed-toggle-btn:active {
   
}

.speed-toggle-btn i {
    display: none;
    font-size: 12px;
    opacity: 0.8;
}

.speed-text {
    min-width: 30px;
    text-align: center;
    display: none;
}

/* Speed notification animation */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Optional: Add different colors for different speeds */
/*.speed-toggle-btn[data-current-index="0"] {
     1x - Normal speed 
    color: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
} 

.speed-toggle-btn[data-current-index="1"] {
    color: rgba(234, 179, 8, 0.2);
    border-color: rgba(234, 179, 8, 0.3);
}

.speed-toggle-btn[data-current-index="2"] {
    color: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}*/


/* =================================
GRID AUDIO STYLE 
===================================*/

.audio-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
        margin-bottom: 30px;
    
}
.audio-grid .gs-card {
    position: relative;
    flex-direction: column;
    flex-basis: 50%;
    background: transparent;
    padding: 0;
}
.audio-grid .gs-card .gs-cover {    width: 100%;    height: 160px;}
.audio-grid .gs-card .gs-right {    width: 100%;}
.audio-grid .gs-card .gs-title{-webkit-line-clamp: 2; white-space: normal;}
.audio-grid .gs-card .gs-end .play-btn {    position: absolute; top: 120px;  right: 15px;}
.audio-grid .gs-card .gs-end .gs-fav {    display: none;    position: absolute;    bottom: 15px;    right: 0;}
.audio-grid .gs-card .gs-end .more-btn {  display: none;  position: absolute;    top: 15px;    right: 8px;    color: #fff;}
.audio-grid .gs-card .gs-time-wrap, .gs-time-wrap {    display: none;}
.audio-grid .gs-card .gs-end .more-btn button.gs-more-btn {    color: #fff;}
button.gs-fav-btn {    border: none;    background: no-repeat;}
.tag-list {    list-style: none;    padding-left: 0;    display: flex;  flex-wrap: wrap;  align-items: center; margin-bottom: 30px;}
.tag-list li a{ background: var(--bs-gray-200); font-weight: 600; border-radius: 30px; text-align: center;    padding: 5px 15px;    font-size: 14px; margin-right: 5px; display: block;  margin-bottom: 5px;}
.tag-list li a.active {    background: var(--bs-gray-900);    color: var(--bs-gray-100);}


@media (min-width:1800px){
.audio-grid .gs-card .gs-cover {height: 180px;}
}

@media (min-width:1600px) and (max-width:1799){
.audio-grid .gs-card .gs-cover {height: 160px;}
}
@media (min-width:1400px) and (max-width:1599){
.audio-grid .gs-card .gs-cover {height: 150px;}
}

@media (min-width:1200px){
body{background: var(--bs-black);}
.app-container,.app-header{background-color: var(--bs-black);}
.content-section{padding: 0;}
.content-section > .content-wrapper{ height: calc(100vh - 120px); gap: 10px; padding: 0 15px;}
.content-section > .content-wrapper > div {    overflow-y: auto;}
.home-section, .left-panel, .right-panel {    background-color: var(--bs-body-bg); padding: 15px;  border-radius: 8px;}
.home-section {padding-left: 30px; margin: 0; max-width: 100%;}
.app-navigation{display: none;}
.leftpanel-tabs{position: sticky;  top: 0;  z-index: 1; background: var(--bs-body-bg);  padding: 15px 15px 10px; }
.leftpanel-tabs .tag-list{margin-bottom: 0; }
.audio-grid .gs-card{flex-basis: 16%;}
.audio-4col .audio-guru-posts {    gap: 15px;    display: flex;    flex-wrap: wrap;}
.audio-4col .gs-card {    flex-basis: 24%;    margin-bottom: 0;}
.left-panel .gs-card{padding: 0; background: none; margin-bottom: 15px;}
.gs-title { font-size: 16px;}
.gs-card .gs-end{display: none;}
.audio-grid .gs-card .gs-end {display: block;}
.left-panel .gs-cover{width: 50px;    height: 50px;}
.audio-grid .gs-card .gs-end .play-btn { top: 110px; right: 10px;} 
.gs-footer-player{bottom: 0;}
.footer-actions .gs-foot-btn#gs-prev, .footer-actions .gs-foot-btn#gs-next, .footer-progress {    display: block; width: 14px;}
.gs-footer-center{ width: auto;flex-grow: 0;padding: 15px 30px 15px 10px;}
#gs-toggle i {    font-size: 16px;}
.gs-footer-right {    padding: 0 60px;    flex-grow: 1;    display: flex;    flex-direction: column-reverse;    align-items: center;}
.footer-actions {   position: relative;        z-index: 1; padding: 15px 0 0;    display: flex;    align-items: center;    justify-content: center;    gap: 30px;} 
.footer-actions button {   width: 16px;}
.footer-actions .gs-foot-btn{font-size: small;}
.footer-progress{width: 100%;display: flex; flex-direction: column-reverse; margin-top: -20px; margin-bottom: 15px;}
.gs-foot-progress{margin: 5px 0;}
.playback-speed-container{margin: 0; display: block;height: auto;}
.gs-foot-time{margin: 7px 0 2px;}
button#gs-toggle{margin: 0;  width: 40px;  height: 40px;}
.gs-footer-player .toggle-audio-player{background: var(--bs-black);}
.playlist-info-simple {   padding: 15px 0;}
.playlist-cover-large {   width: 20%;}
.playlist-info-simple .playlist-title {    font-size: 40px;}
.playlist-header-simple .playlist-meta {    font-size: 16px;}
.playlist-action-bar .btn-action{padding: 5px 20px;     flex-grow: initial;}
.playlist-action-bar .action-buttons {        gap: 10px; padding: 20px 0 30px;  justify-content: flex-end; border-bottom: 1px solid rgb(255,255,255,0.2);  margin-bottom: 30px; }
.playlist-tracks-cards .gs-card .gs-end {    display: flex;}
}

@media (max-width:1199px){
    .audio-guru-posts{gap: 10px;}
.audio-grid .gs-card{flex-basis: 20%;}
}
@media (max-width:991px){
.audio-grid .gs-card{flex-basis: 33%;}
}
@media (max-width:767){
.audio-grid .gs-card{flex-basis: 33%;}
.swiper-pagination, .swiper-button-next, .swiper-button-prev {    display: none;}
.gs-footer-player.gs-full-screen-player .gs-footer-left{height: 420px;}
}

@media (max-width:575px){
.audio-grid .gs-card{flex-basis: 50%;}
}

@media (max-width:530px){
.audio-grid .gs-card .gs-cover { height: 200px;}
.audio-grid .gs-card .gs-end .play-btn {   top: 160px;  right: 10px;}
}

@media (max-width:480px){
.audio-grid .gs-card .gs-cover { height: 180px;}
.audio-grid .gs-card .gs-end .play-btn {  top: 140px; right: 10px;}
.gs-footer-player.gs-full-screen-player .gs-footer-left{height: 390px;}
}

@media (max-width:440px){
.audio-grid .gs-card .gs-cover { height: 160px;}
.audio-grid .gs-card .gs-end .play-btn {   top: 120px;  right: 10px;}
.gs-footer-player.gs-full-screen-player .gs-footer-left{height: 360px;}
}

@media (max-width:380px){
.audio-grid .gs-card .gs-cover { height: 140px;}
.audio-grid .gs-card .gs-end .play-btn {    top: 100px;    right: 5px;}
.gs-footer-player.gs-full-screen-player .gs-footer-left{height: 330px;}
}


/* =================================
Subjects cover STYLE 
===================================*/
.homepage-subject-card .subject-card{
background-size: cover;
  background-position: center;
}
.homepage-subject-card[data-subject-slug*="science"] .subject-card{    background-image: url("/wp-content/uploads/2025/11/Science.jpg");}
.homepage-subject-card[data-subject-slug*="social-science"] .subject-card{    background-image: url("/wp-content/uploads/2025/11/Social-Science.jpg");}
.homepage-subject-card[data-subject-slug*="tamil"] .subject-card{    background-image: url("/wp-content/uploads/2025/11/Tamil.jpg");}
.homepage-subject-card[data-subject-slug*="english"] .subject-card{    background-image: url("/wp-content/uploads/2025/11/English.jpg");}
.homepage-subject-card[data-subject-slug*="math"] .subject-card{    background-image: url("/wp-content/uploads/2025/11/Maths.jpg");}
.homepage-subject-card[data-subject-slug*="bengali"] .subject-card{    background-image: url("/wp-content/uploads/2025/11/Bengali.jpg");}
.homepage-subject-card[data-subject-slug*="telugu"] .subject-card{   background-image: url("/wp-content/uploads/2025/11/Telugu.jpg");}
.homepage-subject-card[data-subject-slug*="hindi"] .subject-card{   background-image: url("/wp-content/uploads/2025/11/Hindi.jpg");}