/*
 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
*/

:root,
[data-bs-theme="light"] {
  --bs-gray-100: #f8f9fa; 
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  
  /* Custom color variables for specific use cases */
  --bs-input-bg: #f8f9fa;
  --bs-input-border: #ced4da;
  --bs-input-focus-border: #673de6;
  --bs-card-bg: #ffffff;
  --bs-footer-bg: #ffffff;
  --bs-overlay-bg: rgba(0,0,0,0.5);
  --bs-scrollbar-track: #f5f5f5;
  --bs-icon-color: #333333;
  --bs-menu-gradient-start: #673de6;
  --bs-menu-gradient-end: #9774ff;
  --bs-premium-gradient-start: #ffd700;
  --bs-premium-gradient-end: #ffed4e;
  --bs-notification-dot: #ff4757;
  --bs-tab-inactive-bg: #eee;
  --bs-tab-active-bg: #f2ebff;
  --bs-sidebar-item-bg: #f2ebff;
  --bs-sidebar-item-text: #121212;
  --bs-sidebar-item-subtext: #6a6a6a;
  --bs-card-hover-shadow: rgba(0,0,0,0.1);
  --bs-player-gradient-start: #170837;
  --bs-player-gradient-end: #131229;
  --bs-scrollbar-thumb: #dd0000;
  --bs-scrollbar-track-dark: #2f2f2f;
}

[data-bs-theme="dark"] {
  --bs-gray-100: #212529;  
  --bs-gray-200: #343a40;
  --bs-gray-300: #495057;
  --bs-gray-400: #6c757d;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #ced4da;
  --bs-gray-700: #dee2e6;
  --bs-gray-800: #e9ecef;
  --bs-gray-900: #f8f9fa;
  
  /* Custom color variables for specific use cases */
  --bs-body-bg: #0f1014;
  --bs-secondary-bg: #21232d;
  --bs-input-bg: #28303c;
  --bs-input-border: #353d49;
  --bs-input-focus-border: #a283ff;
  --bs-card-bg: #2d2d2d;
  --bs-footer-bg: #1a1a1a;
  --bs-overlay-bg: rgba(0,0,0,0.7);
  --bs-scrollbar-track: #333333;
  --bs-icon-color: #ffffff;
  --bs-menu-gradient-start: #a283ff;
  --bs-menu-gradient-end: #6c5ce7;
  --bs-premium-gradient-start: #ffd700;
  --bs-premium-gradient-end: #ffed4e;
  --bs-notification-dot: #ff6b81;
  --bs-tab-inactive-bg: #3a3a3a;
  --bs-tab-active-bg: #4a4a4a;
  --bs-sidebar-item-bg: #3a3a3a;
  --bs-sidebar-item-text: #ffffff;
  --bs-sidebar-item-subtext: #b0b0b0;
  --bs-card-hover-shadow: rgba(255,255,255,0.1);
  --bs-player-gradient-start: #170837;
  --bs-player-gradient-end: #131229;
  --bs-scrollbar-thumb: #ff4444;
  --bs-scrollbar-track-dark: #3a3a3a;

   --bg-primary: #0f1117;
    --bg-secondary: #161b27;
    --bg-card: #1a2035;
    --bg-card2: #1e2640;
    --border: #2a3350;
    --text-primary: #e8eaf0;
    --text-secondary: #8b93a8;
    --text-muted: #5c6578;
    --green: #22c55e;
    --green-dim: #16a34a;
    --red: #ef4444;
    --orange: #f59e0b;
    --blue: #3b82f6;
    --blue-light: #60a5fa;
    --purple: #8b5cf6;
    --purple-light: #a78bfa;
    --cyan: #06b6d4;
    --sidebar-w: 80px;
    --font: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
    --exam-card-bg: #161d30;
      --bg:           #0d1021;
  --bg2:          #111427;
  --bg3:          #161b32;
  --bg4:          #1b2240;
  --border:       #252e4e;
  --border2:      #2d3860;
  --txt:          #dce3f7;
  --muted:        #6a7899;
  --muted2:       #8a94b8;
  --purple:       #7c3aed;
  --purple-light: #9d6af5;
  --purple-glow:  rgba(124,58,237,0.18);
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.15);
  --orange:       #f59e0b;
  --orange-dim:   rgba(245,158,11,0.15);
  --red:          #f43f5e;
  --blue:         #3b82f6;
  --sidebar-w:    168px;
  --topbar-h:     64px;
  --font:         'Sora', sans-serif;
  --mono:         'JetBrains Mono', monospace;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 4px 24px rgba(0,0,0,0.4);

    --g-bg:         #0c0f1a;
  --g-sidebar:    #111527;
  --g-sidebar-w:  165px;
  --g-topbar:     #111527;
  --g-card:       #161d30;
  --g-card2:      #1c2540;
  --g-border:     #232c45;
  --g-border2:    #2a3555;
  --g-txt:        #dde3f0;
  --g-muted:      #6b7899;
  --g-green:      #10b981;
  --g-green-dim:  rgba(16,185,129,.12);
  --g-red:        #f43f5e;
  --g-red-dim:    rgba(244,63,94,.12);
  --g-orange:     #f59e0b;
  --g-blue:       #3b82f6;
  --g-purple:     #8b5cf6;
  --g-cyan:       #06b6d4;
  --g-teal:       #14b8a6;
  --g-accent:     #7c3aed;
  --g-radius:     12px;
  --g-font:       'Plus Jakarta Sans', sans-serif;
  --g-mono:       'JetBrains Mono', monospace;
    --purple-dim:   rgba(124,58,237,0.15);
  --purple-card:  linear-gradient(135deg,#2a1a5e 0%,#1a1040 100%);
  --green:        #10b981;
  --green-card:   linear-gradient(135deg,#0a3328 0%,#061e18 100%);
  --green-dim:    rgba(16,185,129,0.15);
  --blue:         #3b82f6;
  --blue-card:    linear-gradient(135deg,#0f2a5e 0%,#091440 100%);
  --blue-dim:     rgba(59,130,246,0.15);
}

* {
    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-body-color);
    overflow-x: auto;
    overflow-y: hidden;
}

#content{
    overflow-y: scroll;
}

.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: var(--bs-primary);}
.btn{border-radius: 30px;padding: 8px 15px; max-width: 450px;}
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    font-size: 16px;
    border-radius: 30px;
    font-weight: 500;
}
.btn-small {
    font-size: 14px;
    padding: 5px 10px;
}
.btn-tag {
    font-size: 13px;
    padding: 5px 10px;
    font-weight: 500;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    filter: brightness(0.85);
}
.blmp-loadmore-btn{background: none; border: none;}
.blmp-loadmore-btn i.fas.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(160, 80, 255, 0.8);
    background: rgba(120, 40, 200, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 16px;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 0 18px rgba(160, 80, 255, 0.4);
}
body[class*="-club"] .section-header .arrow-link {
margin-bottom: 15px;
}
.link-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    text-indent: -9999px;
}
.arrow-link {
    display: flex;
    opacity: 0.7;
        color: var(--bs-gray-900);
}

.arrow-link:after {
    content: "";
    background: url(/wp-content/themes/bootscore-child/assets/img/icons/down-arrow-icon.svg);
    display: block;
    width: 13px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: 5px;
    background-position: center;
    transform: rotate(270deg);
}

/* 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: var(--bs-scrollbar-track);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-gray-300);
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-500);
}

.alert p {    margin-bottom: 0;}
.border-none{border: none;}
.form-select, select{
    font-size: 16px;
    background: var(--bs-input-bg);
    border: 1px solid var(--bs-input-border);
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    color: var(--bs-body-color);
}
.modal-backdrop{z-index: 0;}
.form-control {
    width: 100%;
    background: var(--bs-input-bg);
    border: 1px solid var(--bs-input-border);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    font-size: 1rem;
    transition: all 0.2s;
}
.form-control:focus{box-shadow: none;}
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 60%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/down-arrow-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.select-wrapper select {
    appearance: none;
    padding-right: 40px;
}
.alert-info{
    --bs-alert-color: #ffa200;
    --bs-alert-bg: var(--bs-input-bg);
    text-align: center; 
    border: none;
}

/* Fixed Header */
.app-header {
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 15px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bs-body-bg);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}
.main-logo {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 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;
    color: var(--bs-body-color);
}

.welcome-text h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
}

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

.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: var(--bs-notification-dot);
    border-radius: 50%;
}

.header-right .header-icon button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-right .header-icon button .fa-bars:before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/menu-icon.svg);
    width: 25px;
    height: 25px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
}
.header-right .header-icon .fa-bell:before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/notofication-bell-icon.svg);
    width: 25px;
    height: 25px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
}

/* Slide-in Menu & Notifications Common Styles */
.slide-in-menu,
.slide-in-notifications {
    display: none;
    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: var(--bs-overlay-bg);
    z-index: 100;
    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;
}

#sideMenu{top: 0 !important;}

/* Override Bootstrap's offcanvas behavior to always push */
.offcanvas {
    visibility: visible !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.offcanvas.show {
    transform: translateX(0);
}

/* Push the entire page when offcanvas opens */
.offcanvas-backdrop {
    display: none !important;
}

/* When offcanvas is shown, push the #page container */
body.offcanvas-push #page {
    transform: translateX(-80%);
    transition: transform 0.3s ease-in-out;
    overflow-x: hidden;
}

/* Make sure offcanvas is on top */
.offcanvas.offcanvas-end {
    width: 85% !important;
    z-index: 1050;
}

.offcanvas-header{
    background: linear-gradient(135deg, var(--bs-menu-gradient-start) 0%, var(--bs-menu-gradient-end) 100%);
    color: var(--bs-white);
}

/* Push Menu Styles - UPDATED */
.push-menu {
    width: 80% !important;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: visible !important;
    z-index: 9999;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    background: var(--bs-body-bg);
}

.push-menu.show {
    transform: translateX(0);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

/* Push the entire site content */
#page {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

body.menu-push #page {
    transform: translateX(-80%);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bs-overlay-bg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

body.menu-push .menu-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Make sure Bootstrap's backdrop doesn't interfere */
.offcanvas-backdrop {
    display: none !important;
}

/* Optional: Add scroll lock when menu is open */
body.menu-push {
    overflow: hidden;
    height: 100vh;
}

.premium-section {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--bs-premium-gradient-start), var(--bs-premium-gradient-end));
    border-radius: 10px;
    margin-bottom: 20px;
}
.btn-upgrade {
    background: var(--bs-body-bg);
    color: var(--bs-white);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* Ad banner */
  .ad-banner {
    border-radius: 14px;
    overflow: hidden;
    background: #13131f;
    border: 0.5px solid #2a2a3a;
  }
  .ad-image {
    position: relative;
    height: 150px;
    background: linear-gradient(180deg, #1a1224 0%, #2d1f3d 100%);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .ad-hand-bg {
    position: absolute;
    inset: 0;
  }
  .ad-notebook-icon {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 60px;
    height: 70px;
    border-radius: 4px;
    background: repeating-linear-gradient(0deg, #b0c4de 0px, #b0c4de 1px, #f8f8f8 1px, #f8f8f8 10px);
    opacity: 0.7;
  }
  .ad-prompt-bubble {
    background: #fff;
    border-radius: 18px;
    padding: 8px 14px;
    margin: 0 10px 10px;
    font-size: 12px;
    color: #111;
    line-height: 1.4;
    max-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ad-plus { width: 22px; height: 22px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #444; flex-shrink: 0; }
  .ad-send { width: 22px; height: 22px; background: #555; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .ad-send svg { width: 11px; height: 11px; fill: var(--bs-white); }
  .ad-chatgpt-logo {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }
  .gpt-icon { width: 18px; height: 18px; background: var(--bs-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .gpt-icon svg { width: 12px; height: 12px; }
  .ad-footer {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #13131f;
  }
  .ad-icon-box { width: 36px; height: 36px; background: var(--bs-white); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px;}
  .ad-badge { background: #f5a623; color: var(--bs-white); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
  .ad-footer-text { flex: 1; }
  .ad-title { color: var(--bs-white); font-size: 13px; font-weight: 600; }
  .ad-sub { color: #888; font-size: 11px; }
  .try-btn {
    background: #222;
    border: 0.5px solid #444;
    color: var(--bs-white);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
  }

/* ════════════════════════════════════════════
   OFFCANVAS PANEL
════════════════════════════════════════════ */
/* ── OFFCANVAS PANEL ── */
  .offcanvas.offcanvas-end {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 340px;
    max-width: 92vw;
    z-index: 1000;
    transform: translateX(110%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
background: var(--bs-black)
    /* Space background 
    background:
      radial-gradient(ellipse at 20% 0%, rgba(120,60,220,.45) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 90%, rgba(80,30,160,.35) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(15,10,40,1) 0%, rgba(8,5,25,1) 100%);
    border-left: 1px solid rgba(140,100,255,.25);
    box-shadow:
      -12px 0 60px rgba(120,60,220,.3),
      -4px 0 20px rgba(160,80,255,.15); */
  }

  /* starfield */
  .offcanvas.offcanvas-end::before {
    content: '';
    position: absolute;
    inset: 0;
    /* background-image: url(/wp-content/uploads/2026/04/gradient-bg.jpg); */
    background-size: cover;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
  }

  .offcanvas.offcanvas-end.show {
    transform: translateX(0);
  }

  /* ── HEADER ── */
  .offcanvas-header {
    position: relative;
    z-index: 1;
    padding: 20px 20px 18px;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    background: transparent;
  }

  .offcanvas-header .d-flex { display: flex; align-items: center; width: 100%; }
  .offcanvas-header .flex-shrink-0 { flex-shrink: 0; margin-right: 14px; }
  .offcanvas-header .flex-grow-1 { flex: 1; }

  /* Avatar ring */
  .avatar-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #a855f7, #6d28d9, #c084fc, #7c3aed);
    box-shadow:
      0 0 18px rgba(168,85,247,.7),
      0 0 35px rgba(168,85,247,.3),
      inset 0 0 12px rgba(255,255,255,.08);
    position: relative;
  }

  .avatar-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #c084fc, #7c3aed, #a855f7, #c084fc);
    z-index: -1;
    filter: blur(4px);
    opacity: .6;
    animation: spin 4s linear infinite;
  }

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

  .avatar-ring img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .offcanvas-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
  }

  .user-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
  }

  .user-role-text {
    font-size: 12px;
    color: rgba(200,170,255,.75);
    letter-spacing: .5px;
  }

  .kids-badge {
    background: rgba(120,80,200,.35);
    border: 1px solid rgba(168,85,247,.45);
    color: rgba(220,190,255,.9);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .6px;
  }

  .btn-close-custom {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
    flex-shrink: 0;
    margin-left: auto;
  }
  .btn-close-custom:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
  }

  /* ── BODY ── */
  .offcanvas-body {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
  }

  .offcanvas-body::-webkit-scrollbar { width: 4px; }
  .offcanvas-body::-webkit-scrollbar-track { background: transparent; }
  .offcanvas-body::-webkit-scrollbar-thumb { background: rgba(120,80,200,.4); border-radius: 4px; }

  /* ── SECTION LABEL ── */
  .menu-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(160,120,255,.55);
    text-transform: uppercase;
    padding: 18px 20px 8px;
  }

  /* ── MENU ITEMS ── */
  .menu-list {
    list-style: none;
        display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 14px;
  }

  .menu-list li {  }

  .menu-list li a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 15px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--bs-gray-600);
    background: rgb(13 15 30);
    font-size: 14px;
    letter-spacing: .2px;
    transition: all .22s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(37,46,78,0.4);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
  }

  .menu-list li a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    opacity: 0;
    transition: opacity .2s;
  }

  .menu-list li a:hover::before { opacity: 1; }
  .menu-list li a:hover {
    color: rgba(230,210,255,.95);
        border-color: rgba(140, 100, 255, .2);
    background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgb(30 27 75 / 75%) 0%, rgb(81 41 87 / 75%) 100%);
  }

  /* Active state */
  .menu-list li.active a {
    background: linear-gradient(135deg, rgba(120,60,220,.35) 0%, rgba(100,40,200,.2) 100%);
    border: 1px solid rgba(168,85,247,.5);
    color: #fff;
    font-weight: 600;
    box-shadow:
      0 0 20px rgba(120,60,220,.2),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  .menu-list li.active a .menu-icon {
    color: #c084fc;
    filter: drop-shadow(0 0 6px rgba(192,132,252,.8));
  }

  .menu-list li.active a .menu-arrow {
    color: rgba(200,160,255,.8);
  }

  /* Icon */
  .menu-icon {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: rgba(160,120,255,.75);
    flex-shrink: 0;
    transition: all .22s;
  }

  .menu-list li a:hover .menu-icon {
    color: #c084fc;
    filter: drop-shadow(0 0 5px rgba(192,132,252,.6));
  }

  /* Arrow */
  .menu-arrow {
    margin-left: auto;
    font-size: 11px;
    color: var(--bs-gray-400);
    flex-shrink: 0;
    transition: all .22s;
  }

  .menu-list li a:hover .menu-arrow {
    color: var(--bs-gray-600);
    transform: translateX(2px);
  }

  /* Divider between items (subtle) */
  .menu-list li:not(:last-child) a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 1px;
    background: rgba(140,100,255,.07);
  }

  .menu-list li.active a::after { display: none; }

  /* ── FOOTER SECTION ── */
  .menu-footer {
    padding: 14px 12px 20px;
    position: relative;
    z-index: 1;
    padding-bottom: 50px !important;
  }

  /* Premium card */
  .premium-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px;
    border-radius: 16px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid transparent;

    background:
      linear-gradient(135deg, rgba(20,12,50,.95) 0%, rgba(15,8,35,.95) 100%);
    background-clip: padding-box;
  }

  /* Gold border via pseudo */
  .premium-card::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 17.5px;
    background: linear-gradient(135deg, #f59e0b, #d97706, #fbbf24, #92400e, #f59e0b);
    z-index: -1;
    background-size: 200% 200%;
    animation: goldShift 3s ease infinite;
  }

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

  /* Gold glow */
  .premium-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, rgba(251,191,36,.04) 100%);
    pointer-events: none;
  }

  .premium-crown {
    font-size: 28px;
    filter: drop-shadow(0 0 10px rgba(251,191,36,.7)) drop-shadow(0 0 20px rgba(245,158,11,.4));
    flex-shrink: 0;
    z-index: 1;
  }

  .premium-text { flex: 1; z-index: 1; }
  .premium-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
  }
  .premium-subtitle {
    font-size: 11px;
    color: rgba(200,170,120,.7);
    margin-top: 2px;
    letter-spacing: .2px;
  }

  .btn-upgrade {
    z-index: 1;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 50px;
    cursor: pointer;
    letter-spacing: .4px;
    white-space: nowrap;
    transition: all .2s;
    backdrop-filter: blur(4px);
  }

  .btn-upgrade:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.4);
    box-shadow: 0 0 12px rgba(255,255,255,.15);
  }

  /* Logout */
  .btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid rgba(140,100,255,.15);
    color: rgba(180,150,255,.65);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .4px;
    cursor: pointer;
    text-decoration: none;
    transition: all .22s;
  }

  .btn-logout:hover {
    background: rgba(200,60,60,.08);
    border-color: rgba(239,68,68,.3);
    color: rgba(252,165,165,.85);
  }



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

.notifications-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--bs-gray-600);
    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;
    color: var(--bs-body-color);
}

.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: var(--bs-gray-100);
}

.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: var(--bs-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.notification-icon i {
    font-size: 1.1rem;
    color: var(--bs-icon-color);
}

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

.notification-content h6 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

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

.notification-content p {
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    line-height: 1.4;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--bs-gray-500);
}

.notification-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary);
    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: var(--bs-gray-500);
    margin-bottom: 15px;
}

.empty-state h5 {
    margin: 0 0 10px 0;
    color: var(--bs-gray-600);
    font-weight: 600;
}

.empty-state p {
    margin: 0;
    color: var(--bs-gray-500);
    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: var(--bs-primary);
}

.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 i {
    font-size: 1.5rem;
    color: var(--bs-icon-color);
}

.menu-trigger i {
    font-size: 1.5rem;
    color: var(--bs-icon-color);
}

.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: var(--bs-footer-bg);
    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: var(--bs-footer-bg);
    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-body-color);
    text-decoration: none;
    font-size: 12px;
}

.nav-item i { 
    font-size: 22px; 
    transition: all 0.3s; 
    --fa: ""; 
    background-repeat: no-repeat; 
    background-position: center;
}
.nav-item i::after{content: "";padding: 12px;}
.nav-item i.fa-home { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/home-icon.svg);}
.nav-item i.fa-book { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/course-icon.svg);}
.nav-item i.fa-kids { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/kid-icon.svg);}
.nav-item i.fa-star { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/gab24-icon.svg); padding: 10px 16px 0px;}
.nav-item i.fa-search { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/search-icon.svg);}
.nav-item i.fa-heart { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/heart-icon.svg);}
.nav-item i.fa-profile { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/profile-icon.svg);}
.nav-item i.fa-playlist { background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/playlist-icon.svg);}

.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;
    color: var(--bs-body-color);
}

.nav-item.active i,
.nav-item:hover i {
    color: var(--bs-primary);
}

.nav-item.active span,
.nav-item:hover span {
    color: var(--bs-primary);
}

/* Top Navigation */
.site-header {
    padding: 0;
    top: 0;
    z-index: 99;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
}
.section-header + p:empty {
    display: none;
}
.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: var(--bs-gray-300);
    border-radius: 24px;
    padding: 10px 40px 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 500px;
}
.search-bar input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    color: var(--bs-body-color);
}

.search-bar input::placeholder {
    color: var(--bs-gray-600);
}
.gab24-search-form button.btn{box-shadow: 0 0 0 1px rgb(168 139 250 / 30%), 0 0 20px rgb(153 54 244 / 50%), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-radius: 6px; padding: 10px 30px;}
.gab24-search-form button.btn::before, .gab24-search-form button.btn::after{border-radius: 6px; width: 100%;}
.top-nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
button.gab24-load-more {    border-radius: 50px;    padding: 12px; width: 100%;}

.app-premium{ margin-right: 15px;}

.btn-premium {
    border: none;
    padding: 8px 24px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
    margin-right: 10px;
    background: linear-gradient(135deg, var(--bs-premium-gradient-start), var(--bs-premium-gradient-end));
    color: var(--bs-dark);
}

.btn-install {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 14px;
    margin-left: 10px;
    color: var(--bs-body-color);
}

.icon-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--bs-icon-color);
}

.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-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;
    color: var(--bs-body-color);
}
.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: var(--bs-gray-600);
    font-weight: 600;
    font-size: 14px;
    padding: 5px 0;
    cursor: pointer;
    background: var(--bs-tab-inactive-bg);
    padding: 5px 12px;
    border-radius: 30px;
}

.sidebar-tab.active {
    color: var(--bs-body-color);
    background: var(--bs-tab-active-bg);
    font-weight: 700;
}
.sidebar-list {
    overflow-y: hidden;
    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: var(--bs-sidebar-item-bg);
    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: var(--bs-sidebar-item-text);
}

.sidebar-item-info p {
    font-size: 12px;
    color: var(--bs-sidebar-item-subtext);
    margin: 0;
}
.sidebar-info-btm span{
    margin-right: 15px;
}

.clubs-section{scrollbar-width: none; -ms-overflow-style: none;}
.clubs-section > div {gap: 5px;}
.club-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 150px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--bs-card-hover-shadow);
    flex-shrink: 0;
}
.club-logo img{border-radius: 8px;}

/* Main Content */
.main-content {
    padding: 30px;
    background: var(--bs-card-bg);
}

.section-heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--bs-body-color);
}
.form-select:disabled, select:disabled {    
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-500);
}
.submit-btn:disabled {    
    background: var(--bs-gray-300);
    cursor: not-allowed;
}

/* Radio Cards */
.radio-card {
    background: var(--bs-gray-200);
    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 var(--bs-card-hover-shadow);
}

.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;
    color: #333;
}

.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: var(--bs-card-bg);
    border: 1px solid var(--bs-gray-300);
    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: var(--bs-body-color);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--bs-gray-200);
}

.dropdown-divider {
    margin: 8px 0;
    border-color: var(--bs-gray-300);
}

/* Responsive */

@media (min-width: 992px) {
    .navbar-expand-lg {
        display: block;
    }
    .offcanvas.offcanvas-end {
    width: 25% !important;
    }
    body.menu-push #page {
    transform: translateX(-25%);
}
.app-header{justify-content: right;}
.app-navigation .nav-item.d-lg-block{display: flex !important;}

}

@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, var(--bs-player-gradient-start) 0%, var(--bs-player-gradient-end) 100%);
}

.gs-footer-player .gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, var(--bs-player-gradient-start) 0%, var(--bs-player-gradient-end) 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;
}

.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;
}

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

.gs-footer-player {
    position: relative;
    overflow: hidden;
}

/* This will be the dynamically created blur background */
.gs-footer-blur-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: blur(75px) !important;
    -webkit-filter: blur(75px) !important;
    z-index: -1 !important;
    opacity: 1;
}

/* Optional: Add a subtle overlay for better contrast */
.gs-footer-blur-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.0) !important;
    z-index: -1 !important;
}

/* Ensure content stays above */
.gs-footer-player .toggle-audio-player {
    position: relative;
    z-index: 1;
}

.btn-icon-left{display: flex; align-items: center; gap: 10px; padding: 0; border: none;}
.btn-icon-left:before{content: ""; display: block; width: 20px; height: 20px; background-repeat: no-repeat; }
.btn-refresh::before {background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/refresh-icon.svg);}

/* 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:6px; 
    margin-bottom: 10px; 
    margin-top: 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 {   display: flex;  align-items: center;}
.gs-play-btn { 
    position:relative; 
    width:40px; 
    height:40px; 
    border-radius:50%; 
    background:var(--bs-white); 
    color: var(--bs-body-bg); 
    border:none;
    cursor:pointer;
}
button.gs-play-btn i::before{font-size: 14px;}
.gs-play-btn.playing { background:#ca1616; color:#fff; }
.play-btn {    margin-right: 10px;}
button.gs-more-btn {  
    background-color: transparent;  
    border: none;    
    font-size: 20px;
    color: var(--bs-body-color);
}
.gs-card .gs-end .play-btn button.gs-play-btn, .gs-card .gs-end .play-btn button.gs-play-btn i {    
    display: flex;    
    align-items: center;    
    justify-content: center;  
}
.gs-card .gs-end .play-btn button.gs-play-btn i:before{ 
    content: "";    
    width: 14px;    
    height: 14px;  
    display: block;    
    background-repeat: no-repeat;    
    background-position: center; 
}
.gs-card .gs-end .play-btn button.gs-play-btn .fa-play:before {     
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/play-icon-dark.svg);  
}
.gs-card .gs-end .play-btn button.gs-play-btn .fa-pause:before {     
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/pause-icon-dark.svg);  
}

/* 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; 
    line-height: 16px; 
    font-weight: 700; 
    margin:0; 
    display: -webkit-box;    
    -webkit-box-orient: vertical;    
    -webkit-line-clamp: 1;    
    overflow: hidden;    
    text-overflow: ellipsis;
    white-space: normal;
    color: var(--bs-body-color);
}
.gs-sub { 
    font-size:12px; 
    color:var(--bs-gray-500); 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 1;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal;
}

/* 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:var(--bs-gray-500); 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; gap: 8px;}
button.gs-share {    margin: 0 7px;}
.gs-fav button.gs-icon {    
    background: none;    
    border: none;  
    color: var(--bs-body-color);  
    font-size: 18px;
}

/* footer player - fixed bottom */
.gs-footer-player { 
    position:fixed; 
    left:0; 
    right:0; 
    bottom:60px; 
    background: var(--bs-player-gradient-end);
    padding:0; 
    border-radius:0; 
    display:flex; 
    align-items:center; 
    gap:12px; 
    z-index:101; 
}
.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;}
.gs-footer-player .footer-actions .gs-foot-btn, .gs-footer-player .footer-actions .speed-toggle-btn {   display: none;}
.gs-footer-player.gs-full-screen-player .footer-actions .speed-toggle-btn{display: block;}
.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn {  width: auto; display: block;}
.footer-actions .gs-foot-btn.gs-footer-share-proxy:before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/share-icon.svg);
    width: 20px;
    height: 20px;
    display: block;
}
.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn.gs-footer-share-proxy:before { width: 25px; height: 25px;}

.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";  font-family: "Font Awesome 6 Free";  font-weight: 900;}
.footer-actions #gs-toggle.is-playing::before {  content: "\f04c";  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-white);   
    background-color: var(--bs-primary); 
    display: flex;    
    align-items: center;    
    justify-content: center;
        position: relative;
    /* padding: 12px 35px; */
    border-radius: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible;
    background: linear-gradient(135deg, #3b0764 0%, #6d28d9 50%, #1d4ed8 100%);
    background-size: 200%;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3), 0 0 20px rgba(109, 40, 217, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    z-index: 0;
}
button#gs-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: inherit;
    background-size: 200%;
    animation: aurora-shift 5s ease infinite;
    z-index: -1;
}
button#gs-toggle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent);
    border-radius: 50px 50px 0 0;
    pointer-events: none;
}
button#gs-toggle.is-paused:before {    display: none;}
button#gs-toggle::after, button#gs-toggle::before{color: #000;}
.gs-footer-right {  padding: 0 10px;}
.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 .footer-actions .gs-foot-btn .fa-play, .gs-footer-player .footer-actions .gs-foot-btn .fa-pause {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gs-footer-player .footer-actions .gs-foot-btn i:before{
    content: "";
    width: 18px;
    height: 18px;
    display: block;
}
.gs-footer-player .footer-actions .gs-foot-btn .fa-play:before {
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/play-icon.svg);
}
.gs-footer-player .footer-actions .gs-foot-btn .fa-pause:before {
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/pause-icon.svg);
}

.gs-footer-player.gs-full-screen-player {
  height: 100%;
  background: var(--bs-player-gradient-end);
  background: linear-gradient(90deg, var(--bs-player-gradient-end) 0%, var(--bs-player-gradient-start) 100%);
  background: -moz-linear-gradient(90deg, var(--bs-player-gradient-end) 0%, var(--bs-player-gradient-start) 100%);
  background: -webkit-linear-gradient(90deg, var(--bs-player-gradient-end) 0%, var(--bs-player-gradient-start) 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;
    height: 100%;
}

.gs-footer-player.gs-full-screen-player .gs-category-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 6%;
}
.gs-footer-player.gs-full-screen-player .gs-categrory {      
    padding: 0 15px;  
    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;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.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{display: flex;}
.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; 
    background: var(--bs-white);
    color: var(--bs-body-bg); 
    box-shadow: none;
}
.gs-footer-player.gs-full-screen-player #gs-toggle i.fa-play {  
    padding-left: 4px;  
    font-size: 24px;
}
.gs-footer-player.gs-full-screen-player #gs-toggle i.fa-play::before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/play-icon-dark.svg);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
}
.gs-footer-player.gs-full-screen-player #gs-toggle i.fa-pause::before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/pause-icon-dark.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
}
.gs-footer-player.gs-full-screen-player #gs-toggle i.fa-pause {
    margin-left: 3px;
}

.gs-footer-player .footer-actions .gs-foot-btn i.fas.fa-step-forward::before, 
.gs-footer-player .footer-actions .gs-foot-btn i.fas.fa-step-backward::before{
    content: "";
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
}

.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn i.fas.fa-step-forward::before, 
.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn i.fas.fa-step-backward::before{
    content: "";
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
}

.gs-footer-player .footer-actions .gs-foot-btn i.fas.fa-step-forward::before{
background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/next-icon.svg);
}
.gs-footer-player .footer-actions .gs-foot-btn i.fas.fa-step-backward::before{
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/prev-icon.svg);
}

.gs-footer-player .gs-minimize-btn {
  background: transparent;
  color: var(--bs-white);
  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: 25px;}
.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;}
.gs-footer-player.gs-full-screen-player .gs-footer-center .gs-footer-right-icons button.gs-playlist-btn {  display: flex; align-items: center; width: 30px; background: transparent;    border: none;}
.gs-footer-player.gs-full-screen-player .gs-footer-center .gs-footer-right-icons button.gs-playlist-btn .fa-plus::before {
    content: "";
    font-family: 'FontAwesome';
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/plus-circle-icon.svg);
    width: 25px;
    height: 25px;
    display: block;
}
/* 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;
}

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

.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;
  overflow-y: hidden;
  padding-right: 10px;
  box-sizing: content-box;
}

/* 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;
}

.gs-tab-content::-webkit-scrollbar-thumb {
  background-color: var(--bs-scrollbar-thumb);
  border-radius: 6px;
}

.gs-tab-content::-webkit-scrollbar-track {
  background-color: var(--bs-scrollbar-track-dark);
}

/* Firefox */
.gs-tab-content {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-scrollbar-thumb) var(--bs-scrollbar-track-dark);
}
.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: 22px;}

/* 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: var(--bs-gray-900);
    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;}

.gs-footer-player.gs-full-screen-player .gs-footer-left {  flex: 1;        align-items: center;   justify-content: center;    }
.gs-footer-player.gs-full-screen-player .gs-footer-left img {    max-width: 400px;   height: auto; max-height: 400px;}

.gs-footer-player {
    transition: transform 0.3s ease-out, height 0.3s ease-out;
    touch-action: pan-x; 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.gs-full-screen-player {
    transform: translateY(0) !important;
    height: 100% !important;
    top: 0 !important;
}
.gs-footer-player .gs-minimize-btn .fa-chevron-down:before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/down-arrow-icon.svg);
    width: 25px;
    height: 25px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
}

.audio-guru-filter-wrapper {position: relative; margin-bottom:10px; margin-right: -15px;}
.audio-guru-nav-container {position: relative; display: flex; align-items: center; margin-bottom:15px; }

/* The Scrollable Row */
.audio-guru-filter-nav {
    display: flex; 
    gap: 5px;
    overflow-x: auto;            
    white-space: nowrap; 
    flex-wrap: nowrap;
    padding-right: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;            
    scroll-behavior: smooth;
        padding-top: 5px;
    padding-bottom: 5px;
}

.audio-guru-filter-nav:after {
    display: none;
    content: "";
    background: linear-gradient(323deg, var(--bs-body-bg) 20%, rgba(29, 33, 37, 0) 75%);
    width: 100px;
    height: 100%;
    position: absolute;
    right: 0;
}

.audio-guru-filter-nav::-webkit-scrollbar {            display: none;     }
.gab24-filter-wrapper {      margin-bottom: 10px;  padding-right: 40px;}
.gab24-filter-wrapper + br {display: none;}
/* Buttons */
.gab24-filter-wrapper .gab24-filter-btn, .audio-guru-filter-nav .audio-filter-btn {
    border-color: var(--bs-dark-border-subtle);
    font-size: 14px;
    padding: 6px 12px;
}
.gab24-filter-wrapper .gab24-filter-btn.active, .audio-guru-filter-nav .audio-filter-btn.active{  
    color: var(--bs-white);
    background: #56258c;
    border-color: #6c3189;
}
button.gab24-start-exam-btn{
    border-color: rgba(255, 255, 255, 0.05);
    font-size: 14px;
    margin-bottom: 10px;
    padding: 6px 15px;
}
.audio-filter-btn { flex: 0 0 auto; }

/* Scroll Arrow */
.gab24-scroll-arrow { 
    position: absolute; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 10; 
    width: 35px;
    height: 35px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 0; 
    opacity: 0.9; 
}
.gab24-scroll-arrow:hover { opacity: 1; }

/* Loader */
.audio-guru-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; }
/* Fade out target when loading */
.audio-guru-filter-target.loading { opacity: 0.5; pointer-events: none; }
.heroes.swiper-container {    overflow: hidden;}
.swiper-pagination-bullet{background: var(--swiper-pagination-bullet-inactive-color, var(--bs-gray-500));}
.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--bs-white, var(--bs-white));
}

@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%;}
 .desktop-carousel{display: none;}
.mobile-carousel{display: block;  margin-left: -15px; margin-right: -15px; }
.heroes.swiper-container .swiper-slide { border-radius: 0;}
body[class*="-club"] .widget > p {display: none;}
body[class*="-club"] .app-container { margin-top: -102px;}
/* Merge hero with content using dark gradient that feathers at top and bottom */
.audio-guru-hero-wrapper {
    position: relative;
    margin-bottom: 0 !important;
    isolation: isolate;
}

.audio-guru-hero-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -130px;
    background: linear-gradient(180deg, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.2) 10%,
        rgba(0,0,0,0.5) 20%,
        rgba(0,0,0,0.9) 30%,
        rgba(0,0,0,1) 40%,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0.9) 70%,
        rgba(0,0,0,0.5) 80%,
        rgba(0,0,0,0.2) 90%,
        rgba(0,0,0,0) 100%
    );
    pointer-events: none;
    z-index: 5;
    height: 50%;
}

.page-builder-content {
    position: relative;
    margin-top: -40px;
    z-index: 0;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 30px;}
}

@media (min-width:768px){
    .gs-footer-player.gs-full-screen-player .gs-categrory .gs-category-title {   font-size: 24px;}
    .gs-footer-player.gs-full-screen-player{padding: 0;}
    .gs-full-screen-player .gs-footer-center {  flex-direction: row;}
    .gs-footer-player.gs-full-screen-player .gs-category-header, 
    .gs-footer-player.gs-full-screen-player .gs-footer-center, 
    .gs-full-screen-player .gs-footer-right{padding: 0 60px;}
    .gs-footer-player.gs-full-screen-player .gs-category-header {    margin-top: 3%;  }
    .gs-footer-player.gs-full-screen-player .footer-actions {  gap: 40px;  justify-content: center;}
.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;}
.gs-full-screen-player .footer-progress{    margin-top: 0;}
.gs-footer-player .gs-minimize-btn {font-size: 28px;}
}

@media  (min-width:769px) and (max-width:991px){
.audio-guru-hero-wrapper::after{bottom: -240px;}
}

@media (max-width:767px){
  .character-bg-area .poster-wrap, .gs-full-screen-player .footer-progress {    max-width: 100%;}
  .audio-container.row{margin: 0 !important; padding: 0 !important;}
  .gs-footer-player.gs-full-screen-player .toggle-audio-player{justify-content: space-evenly;}
  .gs-footer-player.gs-full-screen-player .gs-footer-title {-webkit-line-clamp: 1;}
  .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;}
  .gs-duration {    font-size: 12px;    color: var(--bs-gray-900);    font-weight: 500;}
}

@media (max-width:450px){
.gs-tab-nav li {  padding: 8px 6px;}
}
.gs-arrow-up{  display: none;  position: absolute;    top: -20px;    right: 45%;}
#btn-audio-toggle{        
    background: var(--bs-player-gradient-start);    
    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: var(--bs-overlay-bg);
    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;
}

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

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

.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);
    }
}

/* =================================
GRID AUDIO STYLE 
===================================*/
.audio-guru-swiper-container.audio-grid {
    margin-right: -15px;
}

.audio-grid {    
    display: flex;    
    flex-wrap: wrap;    
    flex-direction: row;        
    margin-bottom:30px;  
    gap: 10px;  
}
.audio-grid .gs-card {    
    position: relative;    
    flex-direction: column;    
    flex-basis: calc(50% - 10px) ;    
    background: transparent;    
    padding: 0;
    flex-grow: 1;
}
.audio-grid .gs-card .gs-cover { 
    height: auto;  
    width: 100%; 
    aspect-ratio: 1 / 1;  
    overflow: hidden;
}
.audio-grid .gs-card .gs-right {    
    width: 100%;
}
.audio-grid .gs-card .gs-title{
    -webkit-line-clamp: 1; 
    white-space: normal; 
    line-height: 18px; 
    font-weight: 600;
}
.audio-grid .gs-card .gs-end{
    position: absolute; 
    width: 100%; 
    height: 100%;
}
.audio-grid .gs-card .gs-end .play-btn {  
    width: 100%; 
    height: 100%; 
    margin: 0; 
}      
.audio-grid .gs-card .gs-end .play-btn .gs-play-btn{ 
    left: 0;   
    width: 100%;   
    height: 100%;  
    border-radius: 0; 
    opacity: 0;
}
.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: block; 
  line-height: 14px;
}
.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 button{ 
    background: var(--bs-gray-200); 
    font-weight: 600; 
    border: none; 
    border-radius: 30px; 
    text-align: center;    
    padding: 5px 15px;    
    font-size: 14px; 
    margin-right: 5px; 
    display: block;  
    margin-bottom: 5px;
    color: var(--bs-body-color);
}
.tag-list li button.active {    
    background: var(--bs-gray-900);    
    color: var(--bs-gray-100);
}
h2.wp-block-heading {    font-size: 1.5rem;}

/* MAIN RESPONSIVE */

@media (min-width:992px){
.app-header {padding: 8px 30px; gap: 30px;}
.app-container,.app-header{}
.content-section{padding: 0;}
.content-section > .content-wrapper{ gap: 10px; }
.content-wrapper .center-panel {min-width: 60%;}
.content-section > .content-wrapper > div {    overflow-y: auto;}
.gs-footer-active .app-content {    padding-bottom: 120px;}
.center-panel, .left-panel, .right-panel {    
    background-color: var(--bs-body-bg); 
    border-radius: 8px;
}
.app-content .content-section.active {padding-left: 130px; padding-right: 30px; margin: 0; max-width: 100%;}
.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; }
.page-title {    font-size: 1.5rem}
.gab24-recent-courses .gab24-course-item {  flex: 0 0 calc(16% - 10px);}
.left-panel .gs-card{padding: 0; background: none; margin-bottom: 15px;}
.gs-cover {    width: 70px;    height: 70px;}
.sub-title {font-size: 24px;}
.club-popup-container{max-width: 800px !important;}
.quiz-popup .current-q-timer{    top: -500px !important;}

.audio-grid .gs-card .gs-title{    font-size: 17px; margin-bottom: 4px;}
.audio-grid .gs-card .gs-sub { font-size: 14px;}
.audio-grid .gs-card .gs-end {display: block;}
.gs-right{flex-direction: row;    align-items: center;    justify-content: space-between;}
.gs-title {  font-size: 16px;}
.gs-sub { font-size: 14px;}
.gs-card .gs-end .play-btn button.gs-play-btn i:before {  width: 20px;    height: 18px;}
.detail-view-container.audio-grid .gs-card {    
    flex: 0 0 calc((100% - 50px) / 6);    
    max-width: calc((100% - 50px) / 6);
}
.track-actions button.remove-from-playlist {   padding-top: 0;}
.favorite-btn .fav-icon:before{    width: 20px;  height: 20px;}
.playlist-toggle-btn.playlist-style-button:after {width: 25px;  height: 25px;}
.left-panel .gs-cover{width: 50px;    height: 50px;}
.gs-footer-player{bottom: 0;}
.footer-actions .gs-foot-btn#gs-prev, .footer-actions .gs-foot-btn#gs-next, .footer-progress {   display: flex; }
.gs-full-screen-player .footer-actions .gs-foot-btn#gs-prev, 
.gs-full-screen-player .footer-actions .gs-foot-btn#gs-next, .gs-full-screen-player .footer-progress{font-size: 24px; }
.gs-full-screen-player .footer-actions .footer-actions button {        width: 24px;    }
.gs-footer-player.gs-full-screen-player .footer-actions .gs-foot-btn, 
.gs-footer-player.gs-full-screen-player .footer-actions .speed-toggle-btn {display: block;}
.gs-footer-player .footer-actions .gs-foot-btn .fa-play{    padding-left: 4px;} 
.gs-footer-player .footer-actions .gs-foot-btn i:before{width: 24px;    height: 24px;    background-repeat: no-repeat;    background-position: center;}
.gs-footer-center{ width: auto;flex-grow: 0;padding: 15px 30px 15px 10px;}
.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: 10px 0 0;    display: flex;    align-items: center;    justify-content: center;    gap: 30px;} 
.footer-actions button {   width: 25px;}
.footer-actions .gs-foot-btn{font-size: large;}

.footer-progress{width: 100%;display: flex; flex-direction: column-reverse; margin-top: -20px; margin-bottom: 10px;}
    .gs-full-screen-player .footer-progress {        margin-top: 10px;    }
.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: 50px;  height: 50px;}
.gs-footer-player .toggle-audio-player{ padding: 0 30px;}
.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;}
.playlists-grid .playlist-card{width: 25%;}
.club-logo{width: 16.44%;}
.form-control, .form-select, select{padding: 1rem 1rem;}
.search-section button.btn {   height: 100%;}
.gab24-filter-wrapper .gab24-filter-btn, .audio-guru-filter-nav .audio-filter-btn {   padding: 8px 15px;}

.gab24-results {
    position: relative;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gab24-results .gs-card {
    flex: 0 0 calc((100% - 50px) / 6);
    max-width: calc((100% - 50px) / 6);
    box-sizing: border-box;
    position: relative;
    flex-direction: column;
    background: transparent;
}
.gab24-results .gs-card .gs-right { position: initial;  width: 100%;}
.gab24-results .gs-card .gs-end { display: block; position: absolute; width: 100%; height: 100%; }
.gab24-results .gs-card .gs-cover {
    height: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.gab24-results .gs-card .gs-time-wrap {
    display: block;
    line-height: 14px;
    bottom: 53px;
    font-size: 14px;
    color: var(--bs-gray-900);
    position: absolute;
    right: 0;
    background: #312e3b;
    border-radius: 0 5px 0 5px;
    padding: 4px 10px;
}
.gab24-results .gs-card .gs-title {
    -webkit-line-clamp: 1;
    white-space: normal;
    font-size: 17px;
    margin-bottom: 4px;
    line-height: 18px;
    font-weight: 600;
}
.gab24-results .gs-card .gs-sub { font-size: 14px;}
.gab24-results .gs-card .gs-end .gs-fav, .gab24-results .gs-card .gs-end .gs-playlist-wrap { display: none;}
.gab24-results .gs-card .gs-end .play-btn {    width: 100%;    height: 100%;    margin: 0;}
.gab24-results .gs-card .gs-end .play-btn .gs-play-btn {    left: 0;    width: 100%;    height: 100%;    border-radius: 0;    opacity: 0;}
.desktop-carousel{display: block;}
.mobile-carousel{display: none;}
}

/* CLUB PAGES */
body[class*="-club"] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}
body[class*="-club"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: -1;
}
body[class*="-club"] .detail-header {
    display: none;
}
body.section-space-club {
    background-image: url(/wp-content/themes/bootscore-child/assets/img/clubs/space-bg1.jpg);
}
body.section-mystery-club{
     background-image: url(/wp-content/themes/bootscore-child/assets/img/clubs/Mystery-bg1.jpg);
}
body.section-wildlife-club{
     background-image: url(/wp-content/themes/bootscore-child/assets/img/clubs/wildlife-bg2.jpg);
}
body.section-ai-club{
     background-image: url(/wp-content/themes/bootscore-child/assets/img/clubs/ai-bg.jpg);
}
body.section-life-skills-club{
     background-image: url(/wp-content/uploads/2026/03/lifeskills-quiz-bg.jpg);
}
.heroes.swiper-container .swiper-button-next:after,.heroes.swiper-container .swiper-button-prev:after {
    
}

body[class*="-club"] .gs-card{
    position: relative;
    background: linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 60px rgba(0,0,0,0.3);
  transition: all 0.35s ease;
  overflow: hidden;
  
}

body[class*="-club"] .audio-grid .gs-card{gap: 0; flex-grow: 1;}

body[class*="-club"] .gs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(135deg, rgb(255 255 255 / 80%), rgb(255 255 255 / 19%), rgb(255 255 255 / 34%));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
body[class*="-club"] .gs-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.15),
    transparent
  );
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}
body.section-space-club .gs-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 15px 45px rgba(139,92,246,0.35),
    0 0 60px rgba(139,92,246,0.25);
}
body[class*="-club"] .audio-grid .gs-card .gs-right {
    width: 100%;
    padding: 10px;
}
body[class*="-club"] .audio-grid .gs-card .gs-time-wrap {
    position: absolute;
    bottom: 56px;}
body[class*="-club"] .page-title, body[class*="-club"] .arrow-link {
    text-shadow: 4px 5px 15px rgb(0 0 0 / 100%);
}
body[class*="-club"] .app-navigation{
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
}
section.club-banner {
    margin-left: -30px;
    margin-right: -30px;
}

body[class*="-club"] .gab24-filter-wrapper .gab24-filter-btn, body[class*="-club"] .audio-guru-filter-nav .audio-filter-btn {
    color: var(--bs-white);
    border-color: var(--bs-dark-border-subtle);
    font-size: 14px;
    padding: 6px 12px;
    text-align: center;
    background: rgb(255 255 255 / 6%);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgb(0 0 0 / 74%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255 255 255 / 18%);
}
body[class*="-club"] .gab24-filter-wrapper .gab24-filter-btn.active, body[class*="-club"] .audio-guru-filter-nav .audio-filter-btn.active{
    color: var(--bs-black);
    background: var(--bs-white);
    border-color: var(--bs-gray-400);
}

@media (min-width:1400px){
.gab24-results .gs-card { flex: 0 0 calc((100% - 70px) / 8); max-width: calc((100% - 70px) / 8);}
}

@media (max-width:991px){

body[class*="-club"] .app-header {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 34%, rgba(0, 0, 0, 0) 100%);}

/* CLUB PAGES */
section.club-banner {
    margin-left: -15px;
    margin-right: -15px;
}

.space-hero {
    padding: 0;
    background-position: center bottom;
    background-size: cover;
    border-radius: 0;
    align-items: start;
    margin-bottom: 40px;
  }
  .hero-content {
    padding: 30px;
    backdrop-filter: blur(2px);
    width: 100%;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

@media (max-width:767){
.swiper-pagination, .swiper-button-next, .swiper-button-prev {    display: none;}
}

@media (max-width:575px){

}

/* =================================
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");
}








/* --- GAB24 CLUB ACTION BAR --- */
.club-action-bar {
    backdrop-filter: blur(3px);
    border-radius: 10px;
    padding: 15px 0px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.action-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 30%;
}

.action-item:active {
    transform: scale(0.9);
}

.action-icon {
    line-height: 50px;
    border-radius: 50%;
    margin: 0 auto 5px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.action-icon img {
    width: 70px;
}

.action-item span {
    font-size: 0.8rem;
    display: block;
    line-height: normal;
    font-weight: 800;
        text-transform: uppercase;
}

.action-item.is-locked {
    filter: grayscale(1);
    opacity: 0.5;
}

.level-btm-grid{
    gap: 15px;
    display: flex;
    width: 100%;
}

/* --- FULL SCREEN POPUP OVERLAY --- */
.gab24-club-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 25, 0.95);
    backdrop-filter: blur(15px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
}
.gab24-club-popup-overlay::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: -1;
    }
.space-club-section .gab24-club-popup-overlay{
    background-image: url(/wp-content/uploads/2026/03/space-quiz-bg.jpg);
}
.wildlife-club-section .gab24-club-popup-overlay{
    background-image: url(/wp-content/uploads/2026/03/wildlife-quiz-bg.jpg);
}
.life-skills-club-section .gab24-club-popup-overlay{
    background-image: url(/wp-content/uploads/2026/03/lifeskills-quiz-bg.jpg);
}
.mystery-club-section .gab24-club-popup-overlay{
    background-image: url(/wp-content/uploads/2026/03/mystery-quiz-bg.jpg);
}
.ai-club-section .gab24-club-popup-overlay{
   background-image: url(/wp-content/uploads/2026/03/ai-quiz-bg.jpg);
}




.club-popup-body{width: 100%;}
.club-popup-header {
    position: absolute;
    right: 15px;
    top: 10px;
        z-index: 10;
}
.quiz-popup .club-popup-body {
    position: relative;
    width: 100%;
}

.result-card {
    padding: 15px;
}
.result-card button.btn {    width: 100%;    max-width: 100%;}
.result-card .display-4 {
    color: #ffe200;
    text-shadow: 0 0 10px rgb(192 255 0 / 50%);
}
.quiz-mark {
    font-size: 36px;
    color: #ffd600;
    text-shadow: 0 0 10px rgb(192 255 0 / 25%);
}
.quiz-container{  padding: 15px 20px 20px 20px;}
/* --- QUIZ UI ELEMENTS --- */
.quiz-image-header img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom: 2px solid rgba(0, 210, 255, 0.3);
}

.quiz-question-text {
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
    font-size: 1.10rem;
}
.quiz-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem; 
}
.quiz-opt-btn {
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgb(214 204 255 / 37%);
    -webkit-backdrop-filter: blur(10px);
    outline: none;
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset;
    transition: all 0.3s;
    overflow: hidden;
}
.quiz-opt-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
}

.space-club-section .quiz-opt-btn{
    background: linear-gradient(135deg, rgb(30, 27, 75) 0%, rgb(79 70 229 / 60%) 50%, rgb(89 46 129 / 61%) 100%);
    border-color: rgb(144 100 211 / 56%);
    box-shadow: 0 0 18px rgb(118 98 231 / 22%), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.ai-club-section .quiz-opt-btn{
        background: linear-gradient(135deg, rgb(24 73 107) 0%, rgb(70 145 229 / 60%) 50%, rgb(46 102 129 / 61%) 100%);
    border-color: rgb(100 158 211 / 56%);
    box-shadow: 0 0 18px rgb(118 98 231 / 22%), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.wildlife-club-section .quiz-opt-btn{
background: rgba(3, 18, 8, .65);
    border-color: rgb(124 197 34 / 56%);
    box-shadow: 0 0 18px rgba(34, 197, 94, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.life-skills-club-section .quiz-opt-btn{
background: rgb(18 18 3 / 65%);
    border-color: rgb(197 180 34 / 56%);
    box-shadow: 0 0 18px rgb(197 192 34 / 22%), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.mystery-club-section .quiz-opt-btn{
        background: linear-gradient(135deg, rgb(72 27 75) 0%, rgb(164 70 229 / 25%) 50%, rgb(129 46 107 / 61%) 100%);
    border-color: rgb(211 100 190 / 56%);
    box-shadow: 0 0 18px rgb(118 98 231 / 22%), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.quiz-opt-btn:hover, .quiz-opt-btn.active {
    background: rgba(0, 210, 255, 0.15);
    border-color: #00d2ff;
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

/* --- LEADERBOARD & RESULTS --- */
.reward-box {
    border-left: 4px solid #ffd400;
    text-align: center !important;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(10px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
}

.display-4 {
    color: #00d2ff;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
    font-weight: 800;
}
/* --- ANIMATIONS --- */
.fade-in-down {
    animation: fadeInDown 0.4s ease-out;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

body.club-popup-open {
    overflow: hidden;
}

.quiz-image-header img {
    border-top-left-radius: 28px; /* Match your container radius */
    border-top-right-radius: 28px;
    border-bottom: 2px solid rgba(0, 210, 255, 0.2);
}

/* Leaderboard Tabs */
.popup-leaderboard-tab {
    padding: 5px 15px;
    font-size: 0.8rem;
    color: white;
    text-align: center;
    background: rgb(255 255 255 / 6%);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgb(0 0 0 / 74%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255 255 255 / 18%);
}

.popup-leaderboard-tab.btn.active {
color: var(--bs-black);
    background-color: var(--bs-white);
    border-color: var(--bs-white);
}

/* Stat Cards for Progress */
.stat-card {
    background: rgba(255, 255, 255, 0.05) !important;
    text-align: center;
}

.level-circle {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border: 4px solid #00d2ff;
    border-radius: 50%;
    margin: 0 auto;
    font-size: 1.2rem;
    font-weight: bold;
    color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

/* Progress Bar at Footer */
.popup-footer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.quiz-popup .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #ffffff;
    transition: var(--bs-progress-bar-transition);
}
.ai-club-section .quiz-popup .progress-bar{
    background-color: #098cc0;
}

.wildlife-club-section .quiz-popup .progress-bar{
    background-color: #0f6b0d;
}
.space-club-section .quiz-popup .progress-bar{
    background-color: #502cad;
}
.life-skills-club-section .quiz-popup .progress-bar{
    background-color: #958418;
}
.mystery-club-section .quiz-popup .progress-bar{
    background-color: #95188d;
}

.progress-bar {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#quiz-meta-absolute {
  display: none !important;
    transition: all 0.3s ease;
    position: absolute;
    z-index: 2;
    top: -20px;
    left: 0;
    right: 0;
}
.quiz-popup #quiz-meta-absolute {    display: flex !important;}

.quiz-popup .current-q-timer {
    position: absolute;
    top: -240px;
    text-align: center;
    font-size: 24px;
    opacity: 1;
    left: 0;
    right: 0;
    max-width: 140px;
}
.current-q-timer {
    position: relative;
    padding: 5px 20px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    letter-spacing: .6px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.3);
        display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.current-q-timer::before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/timer-icon.svg);
    width: 22px;
    height: 22px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}
.space-club-section .current-q-timer {
    background: linear-gradient(310deg, rgb(31 33 89 / 19%), rgb(88 58 183 / 59%));
}
.ai-club-section .current-q-timer {
    background: linear-gradient(310deg, rgb(31 78 89 / 19%), rgb(15 58 87 / 36%));
}
.wildlife-club-section .current-q-timer {
    background: linear-gradient(310deg, rgb(31 89 36 / 19%), rgb(33 87 15 / 36%));
}
.life-skills-club-section .current-q-timer {
        background: linear-gradient(310deg, rgb(88 89 31 / 19%), rgb(87 81 15 / 36%));
}
.mystery-club-section .current-q-timer {
    background: linear-gradient(310deg, rgb(89 31 87 / 19%), rgb(87 15 75 / 36%));
}
.progress-popup #popup-dynamic-content{padding: 20px 0;}

#quiz-nav-toolbar {
    padding-bottom: 25px !important;
}
.btn-timer {
    position: relative;
    padding: 15px 34px;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    transition: all .3s;
    overflow: hidden;
}

#quiz-nav-toolbar, .popup-title{display:none;}
#quiz-nav-toolbar {  width: 100%;}


/* Level Display */
.level-main-display {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #1e293b 0%, #0f172a 100%);
    border: 3px solid #00d2ff;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}
.level-main-display .lvl-label { font-size: 0.6rem; color: #00d2ff; font-weight: 800; }
.level-main-display .lvl-number { font-size: 2rem; color: #fff; font-weight: 900; line-height: 1; }

/* Stats Grid */
.stats-grid-modern {display: flex;flex-wrap: wrap;}
.stat-box {
    padding: 20px 5px;
    text-align: center;
    background: rgb(255 255 255 / 6%);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255 255 255 / 18%);
}
.stat-box i { font-size: 1.2rem; margin-bottom: 8px; display: block; }
.stat-box .stat-val { font-size: 3rem; font-weight: 600; color: #fff; display: flex;    align-items: center;    justify-content: center;}
.stat-box .stat-val img {    width: 60px;}
.stat-box .stat-label { font-size: 14px; color: #94a3b8; text-transform: uppercase; display: flex; align-items: center;justify-content: center;}
.stat-box .stat-label img {    width: 20px;    margin-right: 5px;}
.stat-box .xp-points{font-size: 5rem;}
.img-100 img { width: 100px; height: auto; }
/* Badges */
.badge-item {
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}
.progress-popup .progress-details { padding: 0;}

/* Background Layer */
.club-popup-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(5px);
}

/* Dot Navigation */
.nav-dot {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
.nav-dot.answered { background: #00d2ff; }
.nav-dot.current { 
    background: #fff; 
    transform: scale(1.3);
    box-shadow: 0 0 8px #fff;
}


.btn-prev-q, .btn-next-q {
    width: 45px;
    height: 45px;
    display: flex !important; /* Ensure icons are visible and centered */
    align-items: center;
    justify-content: center;
    color: white !important;
    position: relative;
    z-index: 3;
    border-radius: 50%;
    transition: all 0.2s;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .6px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.btn-prev-q::before, .btn-next-q::before{
content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent);
    border-radius: 50px 50px 0 0;
    pointer-events: none;
}
.btn-prev-q::after, .btn-next-q::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
    transition: left .55s ease;
}
.space-club-section .btn-prev-q, .space-club-section .btn-next-q {
background: rgb(10 3 20 / 72%);
    border: 1.5px solid rgb(52 34 197 / 50%);
    box-shadow: 0 0 14px rgb(44 34 197 / 25%), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
    color: #987cff !important
}
.ai-club-section .btn-prev-q, .ai-club-section .btn-next-q {
background: rgb(3 14 20 / 72%);
    border: 1.5px solid rgb(34 129 197 / 50%);
    box-shadow: 0 0 14px rgb(34 159 197 / 25%), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
    color: #16b2ff !important;
}
.wildlife-club-section .btn-prev-q, .wildlife-club-section .btn-next-q {
background: rgba(3, 20, 8, .72);
    border: 1.5px solid rgba(34, 197, 94, .5);
    box-shadow: 0 0 14px rgba(34, 197, 94, .25), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
    color: #2eb37c !important
}
.life-skills-club-section .btn-prev-q, .life-skills-club-section .btn-next-q {
    background: rgb(20 19 3 / 72%);
    border: 1.5px solid rgb(197 177 34 / 50%);
    box-shadow: 0 0 14px rgb(197 192 34 / 25%), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
    color: #b3a42e !important;
}
.mystery-club-section .btn-prev-q, .mystery-club-section .btn-next-q {
background: rgb(17 3 20 / 72%);
    border: 1.5px solid rgb(149 34 197 / 50%);
    box-shadow: 0 0 14px rgb(187 34 197 / 25%), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .25);
    color: #cb349b !important;
}

.btn-prev-q i, .btn-next-q i {
    font-size: 1.2rem; /* Make arrows clearly visible */
}
.btn-submit-quiz-trigger {
    color: #1a1a2e !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(120, 255, 214, 0.3);
    z-index: 1;
}

/* --- OVERLAY FIXES --- */

div#popup-dynamic-content{
     -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.1);
    backdrop-filter: blur(10px) saturate(2) brightness(1.1);
    border-radius: 15px;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

div#popup-dynamic-content::before {
    content: '';
    position: absolute;
    inset: 0px;
    border-radius: 15px;
    padding: 2px;
    background-size: 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-spin 4s linear infinite;
}

.progress-popup div#popup-dynamic-content, .leaderboard-popup div#popup-dynamic-content {
    background: none;
}
.progress-popup div#popup-dynamic-content::before, .leaderboard-popup div#popup-dynamic-content::before {display: none;}
.progress-popup .club-popup-container, .leaderboard-popup .club-popup-container{justify-content:flex-start; backdrop-filter: blur(1px) saturate(2) brightness(1.1);}
.progress-popup div#popup-dynamic-content, .leaderboard-popup  div#popup-dynamic-content {backdrop-filter: initial; -webkit-backdrop-filter: none;}

.space-club-section #popup-dynamic-content {
    background: rgb(7 1 41 / 71%);
}
.space-club-section #popup-dynamic-content::before{
background: linear-gradient(135deg, #4b0d6b, #442f83, #19196b, #671489);
}
.ai-club-section #popup-dynamic-content {
    background: rgb(1 22 41 / 71%);
}
.ai-club-section #popup-dynamic-content::before{
background: linear-gradient(135deg, #0d516b, #125975, #193f6b, #093b4f);
}

.wildlife-club-section #popup-dynamic-content {
    background: rgb(1 41 28 / 71%);
}
.wildlife-club-section #popup-dynamic-content::before{
background: linear-gradient(135deg, #0f6b0d, #177512, #196b31, #102b05);
}

.life-skills-club-section #popup-dynamic-content {
    background: rgb(41 36 1 / 71%);
}
.life-skills-club-section #popup-dynamic-content::before{
background: linear-gradient(135deg, #6b640d, #757312, #6b6719, #2b2605);
}
.mystery-club-section #popup-dynamic-content {
    background: rgb(33 1 41 / 71%)
}
.mystery-club-section #popup-dynamic-content::before{
background: conic-gradient(from var(--ba,0deg),#e879f9 0deg,#a855f7 90deg,#f43f5e 180deg,#e879f9 360deg);
}


.club-popup-bg, #popup-image-header { display: none !important; } 
.club-popup-container {
    background-size: cover;
    background-position: center;
    transition: background 0.5s ease-in-out;
       width: 100%;
    max-width: 500px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: auto;
        align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
}

.club-popup-container::before{
    content: "";
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.10);
    background: linear-gradient(0deg, rgb(0 0 0 / 70%) 0%, rgba(0, 0, 0, 0.16) 50%);
}
.progress-details {
    padding-left: 15px;
    padding-right: 15px;
}

/* Progress Bar at Footer */
.popup-footer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* Animation */
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }



.question-badge { 
position: relative;
text-transform: uppercase;
    margin: auto;
     box-shadow:
        0 0 8px rgb(0 0 0 / 70%), inset 0 0 6px rgba(59, 61, 58, 0.4);
    display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffffff;
 backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    border: none;
    outline: none;
    overflow: hidden;
    transition: all .35s cubic-bezier(.25, .46, .45, .94);
}
.question-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .7) 0%, transparent 100%), 
    radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, .5) 0%, transparent 100%), 
    radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, .8) 0%, transparent 100%), 
    radial-gradient(1px 1px at 72% 60%, rgba(255, 255, 255, .5) 0%, transparent 100%), 
    radial-gradient(1px 1px at 85% 25%, rgba(255, 255, 255, .6) 0%, transparent 100%), 
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(255, 255, 255, .4) 0%, transparent 100%), 
    radial-gradient(1px 1px at 90% 75%, rgba(255, 255, 255, .5) 0%, transparent 100%);
}
.question-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 60%, transparent 100%);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}


.space-club-section .question-badge::before {
    background: radial-gradient(ellipse 70% 80% at 70% 50%, rgba(34, 197, 94, .15) 0%, 
    transparent 60%), radial-gradient(ellipse 40% 60% at 88% 30%, rgba(132, 204, 22, .1) 0%, 
    transparent 50%), radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .6) 0%, 
    transparent 100%), radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, .7) 0%, 
    transparent 100%), radial-gradient(1px 1px at 80% 65%, rgba(255, 255, 255, .5) 0%, transparent 100%);
}
.space-club-section .question-badge {
    color: #cdb2ff;
    background: rgb(16 1 51 / 60%);
    box-shadow: 0 0 0 1.5px rgb(70 56 181 / 55%), 0 0 0 3px rgb(34 60 197 / 15%), 0 0 22px 3px rgb(101 34 197 / 35%), 0 0 55px 8px rgba(34, 197, 94, .15), 
    inset 0 1px 0 rgba(255, 255, 255, .1), 
    inset 0 -1px 0 rgba(0, 0, 0, .3);
}

.ai-club-section .question-badge {
    color: #26cbff;
    background: rgb(3 11 20 / 60%);
    box-shadow: 0 0 0 1.5px rgb(34 129 197 / 55%), 0 0 0 3px rgb(34 142 197 / 15%), 0 0 22px 3px rgb(34 132 197 / 35%), 0 0 55px 8px rgba(34, 197, 94, .15), 
    inset 0 1px 0 rgba(255, 255, 255, .1), 
    inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.ai-club-section .question-badge::before {
        background: radial-gradient(ellipse 70% 80% at 70% 50%, rgb(34 147 197 / 15%) 0%, transparent 60%), 
        radial-gradient(ellipse 40% 60% at 88% 30%, rgb(22 170 204 / 10%) 0%, transparent 50%), 
        radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .6) 0%, transparent 100%), 
        radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, .7) 0%, transparent 100%), 
        radial-gradient(1px 1px at 80% 65%, rgba(255, 255, 255, .5) 0%, transparent 100%);
}

.wildlife-club-section .question-badge::before {
    background: radial-gradient(ellipse 70% 80% at 70% 50%, rgba(34, 197, 94, .15) 0%, 
    transparent 60%), radial-gradient(ellipse 40% 60% at 88% 30%, rgba(132, 204, 22, .1) 0%, 
    transparent 50%), radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .6) 0%, 
    transparent 100%), radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, .7) 0%, 
    transparent 100%), radial-gradient(1px 1px at 80% 65%, rgba(255, 255, 255, .5) 0%, transparent 100%);
}
.wildlife-club-section .question-badge {
    color: #3dbf2e;
    background: rgba(3, 20, 8, .6);
    box-shadow: 0 0 0 1.5px rgba(34, 197, 94, .55), 0 0 0 3px rgba(34, 197, 94, .15), 0 0 22px 3px rgba(34, 197, 94, .35), 0 0 55px 8px rgba(34, 197, 94, .15), 
    inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .3);
}

.life-skills-club-section .question-badge::before {
    background: radial-gradient(ellipse 70% 80% at 70% 50%, rgba(34, 197, 94, .15) 0%, 
    transparent 60%), radial-gradient(ellipse 40% 60% at 88% 30%, rgba(132, 204, 22, .1) 0%, 
    transparent 50%), radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .6) 0%, 
    transparent 100%), radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, .7) 0%, 
    transparent 100%), radial-gradient(1px 1px at 80% 65%, rgba(255, 255, 255, .5) 0%, transparent 100%);
}
.life-skills-club-section .question-badge {
        color: #e1ce3c;
    background: rgb(20 20 3 / 60%);
    box-shadow: 0 0 0 1.5px rgb(197 184 34 / 55%), 0 0 0 3px rgba(34, 197, 94, .15), 0 0 22px 3px rgb(197 196 34 / 35%), 0 0 55px 8px rgb(197 196 34 / 15%), 
    inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.mystery-club-section .question-badge::before {
       background: radial-gradient(ellipse 70% 80% at 70% 50%, rgb(192 34 197 / 15%) 0%, transparent 60%), 
       radial-gradient(ellipse 40% 60% at 88% 30%, rgb(142 22 204 / 10%) 0%, transparent 50%),
       radial-gradient(1px 1px at 15% 20%, rgba(255, 255, 255, .6) 0%, transparent 100%), 
       radial-gradient(1.5px 1.5px at 55% 35%, rgba(255, 255, 255, .7) 0%, transparent 100%), 
       radial-gradient(1px 1px at 80% 65%, rgba(255, 255, 255, .5) 0%, transparent 100%);
}
.mystery-club-section .question-badge {
    color: #ff76ed;
    background: rgb(20 3 19 / 60%);
    box-shadow: 0 0 0 1.5px rgb(197 34 147 / 55%), 0 0 0 3px rgb(166 34 197 / 15%), 0 0 22px 3px rgb(139 34 197 / 35%), 0 0 55px 8px rgba(34, 197, 94, .15), 
    inset 0 1px 0 rgba(255, 255, 255, .1), 
    inset 0 -1px 0 rgba(0, 0, 0, .3);
}


.badge-grid-display {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.badge-item-modern {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-icon-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.badge-item-modern span {
    font-size: 0.65rem;
    color: #cbd5e0;
    display: block;
    line-height: 1.2;
}
.leaderboard-wrapper{padding-top: 50px;}
.leaderboard-list-container {
    max-height: 95vh;
    overflow-y: auto;
    margin-top: 15px;
}
#leaderboard-toppers{
    display: flex;
    flex-direction: row;
        align-items: end;
    flex: 1 0 0;
    margin-bottom: 15px;
}
button.btn-close-club-popup {
    font-size: 0 !important;
    text-indent: -9999px;
    padding: 5px;
}
button.btn-close-club-popup::before {
    content: "";
    background-image: url(/wp-content/themes/bootscore-child/assets/img/icons/close-icon.svg);
    width: 15px;
    height: 15px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
}
/* Make the 2nd div become 1st */
#leaderboard-toppers .leaderboard-row:nth-child(2) {
  order: 1;
}

/* Make the 1st div become 2nd */
#leaderboard-toppers .leaderboard-row:nth-child(1) {
  order: 2;
}

/* Keep the 3rd div in its original position */
#leaderboard-toppers .leaderboard-row:nth-child(3) {
  order: 3;
}

#leaderboard-toppers .leaderboard-row:nth-child(1) .rank-badge-img{zoom: 1.5;}
#leaderboard-toppers .leaderboard-row:nth-child(1) .rank-badge-img{zoom: 1.2;}

#leaderboard-toppers .leaderboard-row-bg, #leaderboard-toppers .leaderboard-row::before, #leaderboard-toppers .badge-box {
    display: none;
}
#leaderboard-toppers .leaderboard-row .name-box {
    padding: 0 !important;
}
#leaderboard-toppers .leaderboard-row {
    display: flex !important;
    flex-direction: column;
    align-content: flex-end;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    text-align: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    gap: 0;
}
#leaderboard-toppers .leaderboard-row .name-box .gs-title {
    font-size: 18px;
}
#leaderboard-toppers .rank-box {padding: 0; margin-bottom: 10px;}
.rank-box {    padding-left: 10px;}
#leaderboard-items{padding: 15px;}
.leaderboard-wrapper #leaderboard-items{padding: 0;}

.rank-badge-img {
    object-fit: contain;
}
.club-popup-open .page-builder-content{z-index: 105;}
.leaderboard-row {   
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    /* background: linear-gradient(90deg, rgb(14 20 90 / 26%) 0%, rgb(28 18 95 / 54%) 60%, rgb(14 20 90 / 65%) 100%);
    border: 1.5px solid rgb(234 237 253 / 30%); */
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s;
    background: rgb(255 255 255 / 6%);
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgb(255 255 255 / 18%);
}
.leaderboard-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 8px 8px 50% 50%;
    pointer-events: none;
}
.leaderboard-row::after {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent, var(--neon-blue), var(--neon-purple), transparent);
    opacity: 0.8;
}
.leaderboard-row .name-box {
    text-transform: capitalize;
}
.leaderboard-row-bg{   position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
     filter: blur(75px) !important;
    -webkit-filter: blur(75px) !important;
    transform: scale(1.5); 
    z-index: 0 !important; 
    opacity: 1;}

.user-xp-points span span {
    opacity: 0.8;
    font-weight: 200;
    font-size: 12px;
    text-transform: uppercase;
}



























 /* ════════════════════════════════════════
     BUTTON 1 — Pixel-perfect HOME button
     (exact replica of the uploaded image)
  ════════════════════════════════════════ */
  .btn-galaxy {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 480px;
    padding: 18px 22px;
    border-radius: 16px;
    cursor: pointer;
    border: none;
    outline: none;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    text-align: left;
    /* Glassmorphism core */
    background: rgba(30, 20, 70, 0.55);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    /* Dual neon border — inner glow + border */
    box-shadow:
      0 0 0 1.5px rgba(100, 80, 255, 0.55),
      0 0 0 3px rgba(80, 60, 220, 0.2),
      0 0 18px 2px rgba(80, 50, 200, 0.4),
      0 0 45px 6px rgba(60, 30, 160, 0.25),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.3);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Starfield inside button */
  .btn-galaxy::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 80% at 70% 50%, rgba(160, 80, 220, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse 40% 60% at 90% 30%, rgba(255,180,255,0.08) 0%, transparent 50%),
      radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.7) 0%, transparent 100%),
      radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 55% 35%, rgba(255,255,255,0.8) 0%, transparent 100%),
      radial-gradient(1px 1px at 72% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
      radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.5) 0%, transparent 100%);
    border-radius: inherit;
    pointer-events: none;
  }

  /* Top glass gloss */
  .btn-galaxy::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 60%,
      transparent 100%);
    border-radius: 16px 16px 0 0;
    pointer-events: none;
  }

  .btn-galaxy:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1.5px rgba(120, 100, 255, 0.75),
      0 0 0 4px rgba(100, 80, 255, 0.25),
      0 0 28px 4px rgba(100, 60, 230, 0.55),
      0 0 70px 10px rgba(80, 40, 180, 0.3),
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.3);
  }

  .btn-galaxy:active { transform: translateY(0px) scale(0.99); }

  .btn-galaxy .icon-wrap {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .btn-galaxy .icon-wrap svg { width: 26px; height: 26px; }

  .btn-galaxy .label { flex: 1; position: relative; z-index: 1; }

  .btn-galaxy .chevron {
    margin-left: auto;
    color: rgba(120, 140, 255, 0.8);
    font-size: 18px;
    position: relative; z-index: 1;
    transition: transform 0.3s;
  }

  .btn-galaxy:hover .chevron { transform: translateX(3px); }


  /* ════════════════════════════════════════
     BUTTON 2 — Neon border glow
  ════════════════════════════════════════ */
  .btn-neon {
    position: relative;
    padding: 16px 36px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    background: transparent;
    z-index: 0;
    transition: all 0.3s;
  }

  .btn-neon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    padding: 2px;
    background: linear-gradient(135deg, #7c3aed, #3b82f6, #06b6d4, #7c3aed);
    background-size: 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-spin 4s linear infinite;
  }

  .btn-neon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: rgba(30, 10, 80, 0.6);
    backdrop-filter: blur(12px);
    z-index: -1;
    box-shadow:
      0 0 20px rgba(124, 58, 237, 0.4),
      0 0 40px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255,255,255,0.1);
  }

  @keyframes border-spin {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
  }

  .btn-neon:hover::after {
    box-shadow:
      0 0 30px rgba(124, 58, 237, 0.7),
      0 0 60px rgba(59, 130, 246, 0.35),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }

  .btn-neon:hover { transform: translateY(-2px); }
  .btn-neon:active { transform: scale(0.98); }


  /* ════════════════════════════════════════
     BUTTON 3 — Frosted glass solid
  ════════════════════════════════════════ */
  .btn-frost {
    position: relative;
    cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.10);
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
    box-shadow:
      0 4px 10px rgba(0,0,0,0.15),
      0 1px 0 rgba(255,255,255,0.15) inset,
      0 -1px 0 rgba(0,0,0,0.15) inset;
    transition: all 0.3s;
    overflow: hidden;
  } 

  .btn-frost::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.1) 0%,
      transparent 100%);
    pointer-events: none;
  }

  .btn-frost:hover {
    border-color: rgba(255,255,255,0.38);
    background: rgba(255,255,255,0.11);
    box-shadow:
      0 8px 36px rgba(0,0,0,0.4),
      0 0 0 1px rgba(255,255,255,0.08),
      0 1px 0 rgba(255,255,255,0.2) inset;
      
  }

  .btn-frost:active { transform: scale(0.98); }


  /* ════════════════════════════════════════
     BUTTON 4 — Aurora shimmer
  ════════════════════════════════════════ */
  .btn-aurora {
    position: relative;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg,
      #3b1f8c 0%,
      #6d28d9 35%,
      #1d4ed8 65%,
      #0ea5e9 100%);
    background-size: 200% 200%;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.15),
      0 4px 20px rgba(109, 40, 217, 0.5),
      0 8px 40px rgba(29, 78, 216, 0.3),
      inset 0 1px 0 rgba(255,255,255,0.25),
      inset 0 -1px 0 rgba(0,0,0,0.2);
    animation: aurora-shift 5s ease infinite;
    transition: all 0.3s;
    overflow: hidden;
  }

  .btn-aurora::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,0.15),
      transparent);
    transition: left 0.6s ease;
  }

  .btn-aurora:hover::before { left: 100%; }

  .btn-aurora::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.12) 0%,
      transparent 100%);
    pointer-events: none;
    border-radius: 50px 50px 0 0;
  }

  @keyframes aurora-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .btn-aurora:hover {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.2),
      0 6px 28px rgba(109, 40, 217, 0.65),
      0 12px 50px rgba(29, 78, 216, 0.4),
      inset 0 1px 0 rgba(255,255,255,0.3);
  }

  .btn-aurora:active { transform: scale(0.98); }


  /* ════════════════════════════════════════
     BUTTON 5 — Holographic iridescent
  ════════════════════════════════════════ */
  .btn-holo {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    background: linear-gradient(135deg,
      #1e1b4b 0%,
      #312e81 25%,
      #4c1d95 50%,
      #1e3a5f 75%,
      #1e1b4b 100%);
    background-size: 300% 300%;
    animation: holo-pan 8s ease infinite;
    overflow: hidden;
    transition: all 0.35s;
    box-shadow:
      0 0 0 1px rgba(167, 139, 250, 0.4),
      0 0 25px rgba(139, 92, 246, 0.4),
      inset 0 1px 0 rgba(255,255,255,0.15);
      border-radius: 50px;
  }

  @keyframes holo-pan {
    0%, 100% { background-position: 0% 50%; }
    33% { background-position: 100% 0%; }
    66% { background-position: 50% 100%; }
  }

  .btn-holo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 20%,
      rgba(120, 200, 255, 0.08) 35%,
      rgba(200, 120, 255, 0.1) 50%,
      rgba(100, 255, 200, 0.08) 65%,
      transparent 80%);
    animation: holo-sweep 3s ease-in-out infinite alternate;
  }

  @keyframes holo-sweep {
    0% { transform: translateX(-30%) skewX(-10deg); opacity: 0.5; }
    100% { transform: translateX(60%) skewX(-10deg); opacity: 1; }
  }

  .btn-holo::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
    border-radius: 12px 12px 0 0;
  }

  .btn-holo:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 0 0 1.5px rgba(167, 139, 250, 0.7),
      0 0 40px rgba(139, 92, 246, 0.6),
      0 0 80px rgba(139, 92, 246, 0.2);
  }


  /* ════════════════════════════════════════
     BUTTON 6 — Crystalline / Deep space
  ════════════════════════════════════════ */
  .btn-crystal {
    position: relative;
    padding: 16px 36px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    background: rgba(15, 8, 40, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: all 0.3s;
    overflow: hidden;
  }

  .btn-crystal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1.5px;
    background: conic-gradient(
      from var(--angle, 0deg),
      #a855f7 0deg,
      #3b82f6 90deg,
      #06b6d4 180deg,
      #a855f7 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate-border 3s linear infinite;
  }

  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes rotate-border {
    to { --angle: 360deg; }
  }

  .btn-crystal::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent);
    border-radius: 50px 50px 0 0;
  }

  .btn-crystal:hover {
    transform: translateY(-2px);
    background: rgba(20, 10, 55, 0.75);
    box-shadow:
      0 0 20px rgba(168, 85, 247, 0.4),
      0 0 50px rgba(59, 130, 246, 0.25);
  }


  /* ════════════════════════════════════════
     BUTTON 7 — Sparkle AI button (CSS+JS)
  ════════════════════════════════════════ */
  .btn-sparkle-wrap {
    position: relative;
    display: inline-flex;
        width: 100%;
  }

  .btn-sparkle {
    position: relative;
    padding: 12px 35px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    gap: 10px;
    overflow: visible;
    background: linear-gradient(135deg, #4a0e0e 0%, #dc2626 50%, #f97316 100%);
    background-size: 200%;
    box-shadow: 0 0 0 1px rgb(250 139 139 / 30%), 0 0 20px rgb(244 67 54 / 50%), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    z-index: 0;
  }

  .btn-sparkle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: inherit;
    background-size: 200%;
    animation: aurora-shift 5s ease infinite;
    z-index: -1;
  }

  .btn-sparkle::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.13), transparent);
    border-radius: 50px 50px 0 0;
    pointer-events: none;
  }

  .btn-sparkle:hover {
    transform: translateY(-3px);
    box-shadow:0 0 0 1px rgb(216 50 26), 0 0 35px rgb(171 15 12), 0 8px 40px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    background-position: right center;
  }

  .btn-sparkle:active { transform: scale(0.98); }

  /* Sparkle particles */
  .sparkle-particle {
    position: absolute;
    top: 50%; left: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: white;
  }

  .sparkle-star {
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }

  .sparkle-star path {
    fill: rgba(255,255,255,0.9);
  }

  .btn-sparkle-wrap:hover .sparkle-particle,
  .btn-sparkle-wrap:hover .sparkle-star {
    animation: sparkle-fly var(--dur, 1s) var(--delay, 0s) ease-out forwards;
  }

  @keyframes sparkle-fly {
    0% {
      opacity: 0;
      transform: translate(var(--tx0, 0px), var(--ty0, 0px)) scale(0);
    }
    15% {
      opacity: 1;
      transform: translate(
        calc(var(--tx0, 0px) + var(--txd, 0px) * 0.3),
        calc(var(--ty0, 0px) + var(--tyd, 0px) * 0.3)
      ) scale(1.2);
    }
    80% {
      opacity: 0.8;
      transform: translate(
        calc(var(--tx0, 0px) + var(--txd, 0px)),
        calc(var(--ty0, 0px) + var(--tyd, 0px))
      ) scale(0.7) rotate(var(--rot, 0deg));
    }
    100% {
      opacity: 0;
      transform: translate(
        calc(var(--tx0, 0px) + var(--txd, 0px) * 1.2),
        calc(var(--ty0, 0px) + var(--tyd, 0px) * 1.4)
      ) scale(0) rotate(var(--rot2, 0deg));
    }
  }


  /* ════════════════════════════════════════
     BUTTON 8 — Plasma pulse
  ════════════════════════════════════════ */
  .btn-plasma {
    position: relative;
    padding: 16px 36px;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    background: rgba(8, 4, 25, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    transition: all 0.3s;
  }

  .btn-plasma::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
      from 0deg,
      #ff00ff33, #00ffff33, #ff000033, #0000ff33, #ff00ff33
    );
    animation: plasma-spin 4s linear infinite;
    border-radius: 50%;
  }

  @keyframes plasma-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  .btn-plasma::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    border-radius: 11px;
    background: rgba(8, 4, 30, 0.88);
    z-index: 0;
  }

  .btn-plasma span {
    position: relative;
    z-index: 1;
  }

  .btn-plasma:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.2);
  }


  /* ════════════════════════════════════════
     BUTTON 9 — Nebula wide (like original)
     with subtle dust/nebula inside
  ════════════════════════════════════════ */
  .btn-nebula {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 380px;
    padding: 16px 20px 16px 20px;
    border-radius: 14px;
    cursor: pointer;
    border: none;
    outline: none;
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    background: rgba(20, 10, 55, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
      0 0 0 1px rgba(100, 80, 255, 0.45),
      0 0 20px 2px rgba(80, 50, 200, 0.3),
      inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.3s;
  }

  .btn-nebula::before {
    content: '';
    position: absolute;
    right: -20px; top: -20px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(200, 100, 255, 0.2) 0%, rgba(100, 50, 200, 0.1) 40%, transparent 70%);
    animation: nebula-drift 6s ease-in-out infinite alternate;
    pointer-events: none;
  }

  @keyframes nebula-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-10px, 10px) scale(1.15); }
  }

  .btn-nebula::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent);
    pointer-events: none;
  }

  .btn-nebula:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1.5px rgba(130, 100, 255, 0.7),
      0 0 35px 4px rgba(100, 60, 230, 0.5),
      inset 0 1px 0 rgba(255,255,255,0.15);
  }

  .btn-nebula .icon-circle {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(100, 80, 220, 0.35);
    border: 1px solid rgba(140, 120, 255, 0.4);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
  }

  .btn-nebula .meta {
    display: flex; flex-direction: column;
    flex: 1;
    position: relative; z-index: 1;
  }

  .btn-nebula .meta .subtitle {
    font-size: 11px;
    font-weight: 400;
    color: rgba(180, 160, 255, 0.6);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }

  .btn-nebula .chevron-right {
    color: rgba(120, 100, 255, 0.7);
    font-size: 16px;
    z-index: 1;
    transition: transform 0.3s;
  }

  .btn-nebula:hover .chevron-right { transform: translateX(3px); }


  /* ════════════════════════════════════════
     BUTTON 10 — Golden luxury
  ════════════════════════════════════════ */
  .btn-gold {
    position: relative;
    padding: 12px 35px;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1a1005;
    background: linear-gradient(135deg,
      #b8860b 0%,
      #ffd700 25%,
      #ffec8b 45%,
      #ffd700 65%,
      #b8860b 100%);
    background-size: 200%;
    animation: gold-shimmer 4s linear infinite;
    box-shadow:
      0 0 0 1px rgba(255, 200, 50, 0.3),
      0 4px 20px rgba(180, 130, 0, 0.5),
      0 8px 40px rgba(180, 130, 0, 0.2),
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -1px 0 rgba(0,0,0,0.15);
    overflow: hidden;
    transition: all 0.3s;
  }

  @keyframes gold-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .btn-gold::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: left 0.6s ease;
  }

  .btn-gold:hover::before { left: 150%; }

 .btn-gold:hover, .btn-gold:active, .btn-gold:focus {
    transform: translateY(-3px) !important;
    box-shadow:
      0 0 0 1px rgba(255, 215, 0, 0.5),
      0 6px 30px rgba(200, 150, 0, 0.65),
      0 12px 60px rgba(180, 130, 0, 0.3),
      inset 0 1px 0 rgba(255,255,255,0.5) !important;
      color: #1a1005 !important;
  }

  .btn-gold::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
    pointer-events: none;
  }

  /* ────────────────────────────────────────
     ICONS (SVG inline)
  ──────────────────────────────────────── */
  .icon-home {
    color: #7b8bff;
    filter: drop-shadow(0 0 6px rgba(100,120,255,0.8));
  }

  .icon-ai {
    color: #c084fc;
    filter: drop-shadow(0 0 5px rgba(192,132,252,0.7));
  }

  .sparkle-svg-icon {
    width: 20px; height: 20px;
    filter: drop-shadow(0 0 4px rgba(200,180,255,0.8));
  }

  /* ─── Divider ─── */
  .divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin: 24px 0 28px;
  }



  /* ════════════════════════════════════════
     EXAM FRONTEND STYLE
  ════════════════════════════════════════ */
.theme-gray-bg {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.1);
    border-radius: 15px !important;
    padding: 15px;
}
div#exam-intro {
    background: #4324bf;
    background: radial-gradient(circle, rgb(67 36 191 / 18%) 10%, rgba(0, 0, 0, 0) 45%);
    height: calc(100vh - 300px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
div#exam-intro h1{font-size: 3.5rem;}
.exam-card-bg{background-color: var(--exam-card-bg);}

.exam-wrapper {
    padding-left: 50px;
    padding-right: 50px;
}
div#exam-intro p {
    font-size: 1.1rem !important;
        padding: 0 20%;
}
.exam-gen-tags {
    display: flex;
    gap: 10px;
}
.gx-back-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--txt);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all .15s;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.gx-back-btn:hover {
    background: var(--border);
    color: var(--bs-white);
}
.section-exam .gs-footer-player {
    display: none !important;
}

#exam-question > .card {
    padding: 0;
    border-radius: 20px;
}
.exam-gen-tags .btn {
    cursor: auto;
}
.exam-gen-tags .btn:hover {
    box-shadow: none;
}
#exam-question .card {
    padding: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 14px;
}
#exam-question .card-body button.list-group-item {
        display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border2);
    background: var(--bg4);
    cursor: pointer;
    transition: all .15s;
    position: relative;
}


#exam-question .card-body button.list-group-item:hover, #exam-question .card-body button.list-group-item:focus, #exam-question .card-body button.list-group-item:active,
#exam-question .card-body button.list-group-item.active {
    border-color: var(--purple);
    background: var(--purple-glow);
}
div#exam-question {
    margin-top: 30px;
}
#exam-question > .card .card-header {
    border-radius: 20px 0 0;
    background: none;
    padding: 16px 20px 14px;
    flex-wrap: wrap;
    gap: 10px;
    background: none;
}
#exam-question .card-body button.list-group-item span.me-3 {
    min-width: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg2);
    border: 1.5px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all .15s;
    color: var(--muted2);
}
.question-count {
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row; 
}
.question-count .btn {
    border-radius: 50%;
    padding: 0;
    width: 40px;
    height: 40px;
}

.exam-banner {
    background: linear-gradient(135deg, #1a2240 0%, #0f172a 60%, #1a1040 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
  }

    .badge-completed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.3);
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .badge-completed::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
  .hero-title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin-bottom: 6px; }
  .hero-sub { font-size: 14px; color: var(--text-secondary); }
  .trophy-img { font-size: clamp(60px, 8vw, 90px); line-height: 1; flex-shrink: 0; }

   /* ─── STATS ROW ────────────────────────────────────── */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
  }
  .stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: left !important;
  }
  .stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; }
  .stat-icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .stat-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .stat-icon.blue { background: rgba(59,130,246,0.15); color: var(--blue-light); }
  .stat-icon.green { background: rgba(34,197,94,0.15); color: var(--green); }
  .stat-icon.purple { background: rgba(139,92,246,0.15); color: var(--purple-light); }
  .stat-icon.orange { background: rgba(245,158,11,0.15); color: var(--orange); }
  .stat-value { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: var(--text-primary); }
  .stat-sub { font-size: 12px; margin-top: 4px; }
  .stat-sub.green { color: var(--green); }
  .stat-sub.orange { color: var(--orange); }
  .stat-progress {
    height: 4px;
    background: var(--border);
    border-radius: 99px;
    margin-top: 10px;
    overflow: hidden;
  }
  .stat-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 1s ease;
  }
  .stat-progress-fill.blue { background: var(--blue); }
  .stat-progress-fill.green { background: var(--green); }
  .stat-progress-fill.purple { background: var(--purple); }
  .stat-progress-fill.orange { background: var(--orange); }

/* ─── REPORT SECTION ──────────────────────────────── */
  .report-card {
    
  }
  .report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
  }
  .report-title { font-size: clamp(16px, 2vw, 20px); font-weight: 700; }
  .report-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 20px;
  }
  .report-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
  }
  .download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    transition: all 0.2s;
  }
  .download-btn:hover { background: var(--border); }


  /* ══════════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════════ */
.gx-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex: 1;
}

/* ─── QUESTION PANEL ──────────────────────── */
.gx-q-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gx-q-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}

/* Question header row */
.gx-q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.gx-q-title {
  font-size: 15px;
  font-weight: 700;
}
.gx-q-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gx-bookmark-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--purple-light);
  font-size: 13px;
  font-weight: 600;
  transition: opacity .15s;
}
.gx-bookmark-btn svg { width: 15px; height: 15px; }
.gx-bookmark-btn:hover { opacity: 0.7; }
.gx-single-correct {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 500;
}
.gx-single-correct svg { width: 14px; height: 14px; }
.gx-q-divider { height: 1px; background: var(--border); margin: 0 20px; }

/* Question text */
.gx-q-text {
  padding: 18px 20px 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--txt);
  line-height: 1.7;
}

/* Options */
.gx-options { display: flex; flex-direction: column; gap: 10px; }
.gx-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg4);
  cursor: pointer;
  transition: all .15s;
  position: relative;
  height: 100%;
}
.gx-option:hover { border-color: var(--purple); background: var(--purple-glow); }
.option-card.selected, .option-card.selected .gx-option {
  border-color: var(--purple);
  background: rgba(124,58,237,0.15);
}
.gx-option-letter {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all .15s;
  color: var(--muted2);
}
.gx-option.selected .gx-option-letter, .gx-option.active .gx-option-letter, .option-card.selected .gx-option-letter {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--bs-white);
}
.gx-option-text { flex: 1; font-size: 15px; font-weight: 400; color: var(--txt); }
.gx-option-check {
  width: 24px; height: 24px;
  background: var(--purple);
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gx-option-check svg { width: 13px; height: 13px; color: var(--bs-white); }
.gx-option.selected .gx-option-check { display: flex; }

/* End Test + Timer pill */
.timer-wrap {
    display: flex;
    justify-content: end;
    margin-top: -65px;
}
.gx-endtest-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
}
.gx-endtest-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  color: var(--txt);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  transition: all .15s;
      border: none;
  border-right: 1px solid var(--border2);
}
.gx-endtest-btn svg { width: 18px; height: 22px; color: var(--muted2); }
.gx-endtest-btn:hover { background: rgba(244,63,94,0.12); color: var(--red); }
.gx-timer {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--red);
  letter-spacing: 1px;
}
.gx-timer svg { width: 14px; height: 14px; color: var(--red); }

/* Why correct box */
.gx-why-box {
  margin: 0 20px 20px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.gx-why-icon {
  width: 36px; height: 36px;
  background: var(--purple-glow);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.gx-why-body { flex: 1; }
.gx-why-title { font-size: 13px; font-weight: 700; color: var(--purple-light); margin-bottom: 5px; }
.gx-why-text { font-size: 12.5px; color: var(--muted2); line-height: 1.6; }

/* Question meta footer */
.gx-q-foot {
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.gx-qf-item {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gx-qf-item + .gx-qf-item { border-left: 1px solid var(--border); }
.gx-qf-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  display: flex; align-items: center; gap: 5px;
}
.gx-qf-label svg { width: 12px; height: 12px; }
.gx-qf-value { font-size: 13px; font-weight: 600; color: var(--txt); }
.gx-qf-value.medium { color: var(--orange); }
.gx-qf-value.easy { color: var(--green); }
.gx-qf-value.hard { color: var(--red); }

/* ─── NAV BUTTONS (bottom) ───────────────── */
.gx-nav-btns {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.gx-prev-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--txt);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: all .15s;
  white-space: nowrap;
}
.gx-prev-btn:hover { background: var(--border); }
.gx-prev-btn svg { width: 14px; height: 14px; }

.gx-review-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: all .15s;
  white-space: nowrap;
}
.gx-review-btn:hover {    color: var(--g-red);    border-color: 1px solid var(--g-red);}
.gx-review-btn svg { width: 14px; height: 14px; }

.gx-next-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius);
  transition: all .15s;
  white-space: nowrap;
  border-color: var(--purple);
}
.gx-next-btn:hover { background: var(--purple-light); }
.gx-next-btn svg { width: 14px; height: 14px; }

/* ─── RIGHT SIDEBAR ────────────────────── */
.gx-right-panel {
  width: 330px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Questions palette */
.gx-palette-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.gx-palette-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Legend */
.gx-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gx-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted2);
}
.gx-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.gx-legend-dot.answered { background: var(--green); }
.gx-legend-dot.review { background: var(--orange); }
.gx-legend-dot.current { background: var(--purple); }
.gx-legend-dot.not-answered { background: transparent; border: 1.5px solid var(--border2); }

/* Number grid */
.gx-num-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.gx-num-btn {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  cursor: pointer;
  border: 1.5px solid var(--border2);
  background: var(--bg4);
  color: var(--muted2);
  transition: all .12s;
}
.gx-num-btn:hover { border-color: var(--purple); color: var(--txt); }
.gx-num-btn.current {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  font-weight: 700;
}
.gx-num-btn.answered {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.gx-num-btn.review-marked {
  background: var(--orange-dim);
  border-color: var(--orange);
  color: var(--orange);
}

/* Progress card */
.gx-progress-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.gx-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.gx-progress-title { font-size: 14px; font-weight: 700; }
.gx-progress-count { font-size: 12px; color: var(--muted); font-family: var(--mono); }

.gx-progress-bar-wrap {
  height: 6px;
  background: var(--bg4);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 14px;
}
.gx-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  border-radius: 99px;
  transition: width 0.5s ease;
}
.gx-progress-pct {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  font-family: var(--mono);
  margin-top: -10px;
  margin-bottom: 12px;
}

.gx-progress-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gx-pstat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gx-pstat-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.gx-pstat-icon.green { background: var(--green-dim); }
.gx-pstat-icon.orange { background: var(--orange-dim); }
.gx-pstat-icon.green svg { color: var(--green); width: 13px; height: 13px; }
.gx-pstat-icon.orange svg { color: var(--orange); width: 13px; height: 13px; }
.gx-pstat-label { font-size: 11px; color: var(--muted); margin-bottom: 1px; }
.gx-pstat-value { font-size: 20px; font-weight: 800; font-family: var(--mono); color: var(--txt); }

/* ══════════════════════════════════════════════
   MOBILE MENU BUTTON
══════════════════════════════════════════════ */
.gx-mobile-menu {
  display: none;
  width: 36px; height: 36px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  color: var(--txt);
  cursor: pointer;
  flex-shrink: 0;
}
.gx-mobile-menu svg { width: 18px; height: 18px; }

.gx-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 299;
  backdrop-filter: blur(3px);
}
.gx-overlay.show { display: block; }



/* ─── STAT CARDS ───────────────────────────── */
.gab-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.gab-stat {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gab-stat-top {
  padding: 14px 16px 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}
.gab-stat-ring {
  position: relative;
  width: 58px; height: 58px;
  flex-shrink: 0;
}
.gab-stat-ring svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.gab-stat-ring-track { fill: none; stroke: var(--g-border2); stroke-width: 5; }
.gab-stat-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 157; transition: stroke-dashoffset 1s ease; }
.gab-stat-ring-label {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--g-muted);
  text-align: center;
  line-height: 1.2;
}

.gab-stat-body { flex: 1; min-width: 0; }
.gab-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--g-muted);
  margin-bottom: 4px;
}
.gab-stat-label.cyan { color: var(--g-cyan); }
.gab-stat-label.orange { color: var(--g-orange); }
.gab-stat-label.teal { color: var(--g-teal); }
.gab-stat-value {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  font-family: var(--g-mono);
  letter-spacing: -1px;
  color: var(--g-txt);
  line-height: 1;
  margin-bottom: 4px;
}
.gab-stat-value .denom { font-size: 14px; font-weight: 400; color: var(--g-muted); letter-spacing: 0; }
.gab-stat-caption { font-size: 11px; color: var(--g-muted); }
.gab-stat-caption.red-txt { color: var(--g-red); }

.gab-stat-bottom {
  border-top: 1px solid var(--g-border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.gab-stat-bottom .label { color: var(--g-muted); }
.gab-stat-bottom .value { font-weight: 700; font-family: var(--g-mono); }

/* Sparkline for performance card */
.gab-sparkline { width: 100%; height: 42px; }

/* Check icon for correct answers */
.gab-check-icon {
  width: 54px; height: 54px;
  background: rgba(16,185,129,.12);
  border: 2px solid var(--g-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gab-check-icon svg { width: 24px; height: 24px; color: var(--g-green); }

/* Clock icon */
.gab-clock-icon {
  width: 54px; height: 54px;
  background: rgba(245,158,11,.10);
  border: 2px solid var(--g-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gab-clock-icon svg { width: 22px; height: 22px; color: var(--g-orange); }


/* ─── BOTTOM CARDS ────────────────────────────────── */
  .bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  .bottom-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
  }
  .bottom-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
  }
  .bottom-card-title.green { color: var(--green); }
  .bottom-card-title.orange { color: var(--orange); }
  .bottom-card-title.purple { color: var(--purple-light); }
  .strength-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .strength-item svg { flex-shrink: 0; color: var(--green); }
  .improve-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .improve-item svg { flex-shrink: 0; color: var(--orange); margin-top: 1px; }
  .rank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
  }
  .rank-box { text-align: center; }
  .rank-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
  .rank-value { font-size: 32px; font-weight: 800; color: var(--text-primary); font-family: var(--font-mono); }
  .rank-sub { font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
  .rank-sub strong { color: var(--purple-light); }


/* ─── QUESTION CARDS ───────────────────────── */
.gab-q-list { display: flex; flex-direction: column; gap: 18px; }

.gab-q-card {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  overflow: hidden;
}

/* Question header */
.gab-q-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.gab-ques {
    background: #27315b;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #2e3c75;
}
.gab-q-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g-red-dim);
  border: 2px solid var(--g-red);
  color: var(--g-red);
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--g-mono);
}
.gab-q-num.correct { background: var(--g-green-dim); border-color: var(--g-green); color: var(--g-green); }
.gab-incorrect-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--g-red);
  background: var(--g-red-dim);
  border: 1px solid rgba(244,63,94,.2);
  padding: 3px 8px;
  border-radius: 4px;
}
.gab-q-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--g-txt);
  line-height: 1.5;
  min-width: 0;
}
.gab-q-tag {
  font-size: 11px;
  font-weight: 600;
  background: var(--g-accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
  
/* Answer row */
.gab-answer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 18px 14px;
}
.gab-answer-box {
  border-radius: 10px;
  padding: 12px 14px;
}
.gab-answer-box.wrong {
  background: var(--g-red-dim);
  border: 1px solid rgba(244,63,94,.25);
}
.gab-answer-box.correct-ans {
  background: var(--g-green-dim);
  border: 1px solid rgba(16,185,129,.25);
}
.gab-ans-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.gab-ans-label.red { color: var(--g-red); }
.gab-ans-label.green { color: var(--g-green); }
.gab-ans-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  font-style: italic;
}
.gab-ans-text.red { color: var(--g-red); }
.gab-ans-text.green { color: var(--g-green); }

/* Explanation */
.gab-explanation {
  background: var(--g-card2);
  border-top: 1px solid var(--g-border);
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-direction: column;
}
.gab-explanation-body { flex: 1; min-width: 0; }
.gab-exp-title { font-size: 13px; font-weight: 700; color: var(--g-txt); }
.gab-exp-step {
  font-size: 14px;
  color: var(--muted2);
  margin-bottom: 7px;
  line-height: 1.5;
}
/* .gab-exp-step::before { content: '▸'; color: var(--g-border2); flex-shrink: 0; margin-top: 1px; } */
.gab-exp-step em { font-style: italic; color: var(--g-txt); }
.gab-exp-step strong { color: var(--g-txt); }
.gab-exp-img {
  width: 130px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 50px;
}
.gab-exp-img.bio-img { background: linear-gradient(135deg, #0f2027, #1a3a4a, #0f2027); }
.gab-exp-img.repro-img { background: linear-gradient(135deg, #2d1b4e, #4a1942, #1e0a2e); }
.gab-exp-img.plant-img { background: linear-gradient(135deg, #0f2a1a, #1a4a2a, #0d1f10); }


/* ═══════════════════════════════════════════════════
   OVERALL PERFORMANCE TOPBAR
═══════════════════════════════════════════════════ */
.gd-topbar {
  height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 12px;
  flex-shrink: 0;
}
.gd-topbar-left { flex: 1; }
.gd-page-title { font-size: clamp(18px, 2vw, 32px); font-weight: 700; letter-spacing: -0.3px; }
.gd-page-sub { font-size: 14px; color: var(--txt2); margin-top: 1px; }
.gd-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════
   STAT HERO CARDS (top row)
═══════════════════════════════════════════════════ */
.gd-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.gd-hero-card {
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  min-height: 115px;
}
.gd-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}
.gd-hero-card.purple-card { background: var(--purple-card); }
.gd-hero-card.green-card  { background: var(--green-card); }
.gd-hero-card.blue-card   { background: var(--blue-card); }

.gd-hero-icon {
  width: 54px; height: 54px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.gd-hero-icon.purple { background: rgba(124,58,237,0.35); }
.gd-hero-icon.green  { background: rgba(16,185,129,0.3); }
.gd-hero-icon.blue   { background: rgba(59,130,246,0.3); }
.gd-hero-icon svg { width: 26px; height: 26px; }

.gd-hero-body { flex: 1; min-width: 0; }
.gd-hero-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.gd-hero-value {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: #fff;
  margin-bottom: 5px;
  font-family: var(--mono);
}
.gd-hero-value .denom { font-size: 15px; font-weight: 400; opacity: 0.6; letter-spacing: 0; }
.gd-hero-sub { font-size: 12px; color: rgba(255,255,255,0.5); }

/* Mini sparkline in hero card */
.gd-hero-spark {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 90px;
  height: 40px;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════
   BOTTOM ROW GRID  (2 col)
═══════════════════════════════════════════════════ */
.gd-bot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Recent Tests Table ─────────────────────────── */
.gd-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.gd-table-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.gd-table-title span { font-size: 20px; }
.gd-view-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  background: var(--bg4);
  border: 1px solid var(--border2);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: all .15s;
}
.gd-view-btn:hover { background: var(--border); }

.gd-table-wrap { overflow-x: auto; }
.gd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 520px;
}
.gd-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gd-table tbody tr {
  border-bottom: 1px solid rgba(35,43,74,0.7);
  transition: background .12s;
}
.gd-table tbody tr:last-child { border-bottom: none; }
.gd-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.gd-table td {
  padding: 9px 8px;
  color: var(--txt2);
  vertical-align: middle;
  white-space: nowrap;
}
.gd-table td:first-child { color: var(--muted); font-size: 11px; }

/* Subject chips */
.gd-chips { display: flex; gap: 4px; flex-wrap: nowrap; }
.gd-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: var(--mono);
}
.gd-chip.bio  { background: rgba(16,185,129,0.18); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.gd-chip.chem { background: rgba(245,158,11,0.18); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }
.gd-chip.phy  { background: rgba(59,130,246,0.18); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }

/* Score cell */
.gd-score { font-weight: 700; font-family: var(--mono); }
.gd-score.neg { color: var(--red); }
.gd-score.pos { color: var(--green); }
.gd-score.zero { color: var(--muted); }

/* Time cell */
.gd-time-cell { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.gd-time-cell svg { width: 12px; height: 12px; }

/* Load more */
.gd-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--purple2);
  cursor: pointer;
  transition: all .15s;
}
.gd-load-more:hover { background: var(--purple-dim); border-color: var(--purple); }
.gd-load-more svg { width: 16px; height: 16px; }

/* ── Charts column ──────────────────────────────── */
.gd-charts-col { display: flex; flex-direction: column; gap: 16px; }

.gd-chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

.gd-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.gd-chart-title { font-size: 15px; font-weight: 700; }
.gd-chart-toggle {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt);
  background: var(--bg4);
  border: 1px solid var(--border2);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.gd-chart-canvas { width: 100% !important; }

/* Legend */
.gd-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.gd-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--txt2); }
.gd-legend-dot { width: 10px; height: 3px; border-radius: 99px; }


/* ── Performance Insights card ─────────────────── */
.gd-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.gd-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}
.gd-card-title span { font-size: 20px; }

.gd-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.gd-insight-item:last-child { border-bottom: none; padding-bottom: 0; }
.gd-insight-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gd-insight-icon.red { background: var(--red-dim); }
.gd-insight-icon.orange { background: var(--orange-dim); }
.gd-insight-text { font-size: 13px; color: var(--txt2); padding-top: 6px; line-height: 1.5; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .gx-right-panel { width: 280px; }
  .gx-num-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 768px) {
    #exam-question .card-body {
    padding: 20px;
}
}
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .gx-sidebar { display: none; }
  .gx-main { margin-left: 0; }
  .gx-mobile-menu { display: flex; }
  .gx-sidebar.open {
    display: flex;
    width: 200px;
    box-shadow: 6px 0 30px rgba(0,0,0,0.6);
  }
  .gx-topbar { padding: 0 14px; }
  .gx-content { flex-direction: column; gap: 16px; }
  .gx-right-panel { width: 100%; }
  .gx-page-header { padding: 14px 14px 8px; }
  .gx-num-grid { grid-template-columns: repeat(8, 1fr); }
  .gx-endtest-mobile {
    display: flex !important;
    align-items: center;
    gap: 7px;
    background: rgba(244,63,94,0.12);
    border: 1px solid rgba(244,63,94,0.3);
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
  }
  .gx-endtest-mobile svg { width: 13px; height: 13px; }
}



@media (max-width: 767px) {
#exam-question .card {    width: 100%;}
    .exam-wrapper {        padding-top: 10px !important;    }
div#exam-question{flex-direction: column; margin-top: 20px;}
.question-count { height: auto !important;}
.exam-btm-btns{flex-wrap: wrap;}
.exam-btm-btns .btn.btn-gold{width: 100%; margin-top: 20px;}
div#exam-intro{height: auto;padding-top: 0 !important;  padding-bottom: 0 !important;}
div#exam-intro h1 {    font-size: 2rem;   font-weight: 700;}
.exam-gen-tags { gap: 5px;    flex-wrap: wrap;    align-items: center;    justify-content: center;}
.exam-gen-tags .btn {  margin-bottom: 5px !important;}
div#exam-intro p{padding: 0;}
.gx-nav-btns button#submit-btn{flex-grow: 1;}
#exam-question .card-body button.list-group-item {padding: 10px 14px;}

}

@media (max-width: 600px) {
  .gx-q-foot { grid-template-columns: 1fr; }
  .gx-qf-item + .gx-qf-item { border-left: none; border-top: 1px solid var(--border); }
  .gx-nav-btns { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gx-prev-btn, .gx-next-btn { justify-content: center; }
  .gx-num-grid { grid-template-columns: repeat(7, 1fr); }
  .gx-legend { gap: 10px; }
  .gx-page-title { font-size: 15px; }
  .gx-page-badge { font-size: 11px; }
  .exam-wrapper { padding-left: 15px;  padding-right: 15px;}
  .gx-review-btn, .gx-prev-btn, .gx-next-btn{padding: 12px 14px;}
  span.gx-page-title {    font-size: 20px;}
}

@media (max-width: 400px) {
  .gx-num-grid { gap: 5px; }
  .gx-option-text { font-size: 12.5px; }
  .exam-wrapper {    padding-left: 0;    padding-right: 0;}
}



/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .gab-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gab-exp-img { width: 100px; height: 90px; font-size: 38px; }
}

@media (max-width: 860px) {
  :root { --g-sidebar-w: 0px; }
  .gab-sidebar { display: none; }
  .gab-main { margin-left: 0; }
  .gab-topbar { padding: 10px 16px; }
  .gab-content { padding: 14px 14px 40px; }
  .gab-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gab-answer-row { grid-template-columns: 1fr; }
  .gab-tabs { gap: 0; }
  .gab-tab { padding: 10px 12px; font-size: 12px; }
  .gab-explanation { flex-direction: column; }
  .gab-exp-img { width: 100%; height: 120px; font-size: 50px; }
  .gab-q-footer { flex-direction: column; align-items: flex-start; }
  .gab-dl-btn span { display: none; }
  .gab-dl-btn { padding: 8px 10px; }
}

@media (max-width: 767px) {
.gab-q-header{flex-direction: column;}
.bottom-grid { grid-template-columns: 1fr;}
}

@media (max-width: 560px) {
  .gab-stats-grid { grid-template-columns: 1fr 1fr; }
  .gab-stat-top { flex-direction: column; gap: 8px; }
  .gab-stat-value { font-size: 20px; }
  .gab-filter-row { gap: 5px; }
  .gab-filter-btn { font-size: 11px; padding: 4px 9px; }
  .gab-q-header { flex-wrap: wrap; }
  .gab-q-tag { font-size: 10px; }
  .gab-page-title { font-size: 14px; }
}

@media (max-width: 1100px) {
  .gd-hero-grid { grid-template-columns: repeat(3, 1fr); }
  .gd-mid-grid { grid-template-columns: 1fr; }
  .gd-bot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  :root { --sidebar-w: 0px; }
  .gd-sidebar { display: none; }
  .gd-main { margin-left: 0; }
  .gd-mobile-btn { display: flex; }
  .gd-sidebar.open { display: flex; width: 200px; box-shadow: 6px 0 30px rgba(0,0,0,0.6); }
  .gd-topbar { padding: 0 14px; }
  .gd-content { padding: 14px 14px 40px; }
  .gd-hero-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .gd-hero-grid { grid-template-columns: 1fr; }
  .gd-page-title { font-size: 17px; }
  .gd-date-pill span { display: none; }
  .gd-user-name { display: none; }
  .gd-hero-spark { display: none; }
}

@media (max-width: 420px) {
  .gd-topbar-right { gap: 6px; }
}