:root {
    /* Legacy aliases, kept in lockstep with the design-system tokens in
       assets/css/input.css (values from the Figma brand ramps below). */
    --primary-color: #6076E2; /* purple-600: header, footer, legacy buttons */
    --secondary-color: #4B5CB0; /* purple-700: buttons, links */
    --background-color: #FFFEFC; /* white */
    --text-color: #1F2937; /* gray-900 */
    --btn-text-color: #FFFFFF;
    --heading-font: 'Inter', sans-serif;
    --body-font: 'Inter', sans-serif;
    /* Alias to support --color-primary requests */
    --color-primary: var(--primary-color);

    /* Figma Design System - Primitives (Base) */
    --white: #FFFEFC;
    --black: #141416;

    /* Figma Design System - Gray Scale */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #BBC0CA;
    --gray-500: #9CA3AF;
    --gray-600: #6B7280;
    --gray-700: #4B5563;
    --gray-800: #374151;
    --gray-900: #1F2937;
    --gray-950: #111827;

    /* Figma Design System - Purple Scale */
    --purple-50: #F0F3FE;
    --purple-100: #D1D8FD;
    --purple-200: #BAC6FC;
    --purple-300: #9BABFA;
    --purple-400: #879BF9;
    --purple-500: #6982F8;
    --purple-600: #6076E2;
    --purple-700: #4B5CB0;
    --purple-800: #3A4888;
    --purple-900: #2C3768;
    --purple-950: #151D42;

    /* Figma Design System - Warning Scale */
    --warning-50: #FCFDF1;
    --warning-100: #F7F9D2;
    --warning-200: #F3F6BD;
    --warning-300: #EDF29F;
    --warning-400: #E9F08C;
    --warning-500: #E4EC6F;
    --warning-600: #CFD765;
    --warning-700: #A2A84F;

    /* Layout - Mobile header height for consistent spacing */
    --mobile-header-height: 72px;

    /* Layout - Mobile bottom nav height, excluding env(safe-area-inset-bottom).
       .bottom-nav is position:fixed, so nothing in the document reserves room
       for it; the mobile `body` padding below does, and both read this token so
       the nav and the space kept clear for it cannot drift apart. */
    --mobile-bottom-nav-height: 78px;
    --warning-800: #7D823D;
    --warning-900: #60632F;
    --warning-950: #4A4C24;

    /* Figma Design System - Success Scale */
    --success-50: #EEFCF3;
    --success-100: #C9F6DA;
    --success-200: #AFF1C8;
    --success-300: #8AEBAF;
    --success-400: #74E7A0;
    --success-500: #51E188;
    --success-600: #4ACD7C;
    --success-700: #3AA061;
    --success-800: #2D7C4B;
    --success-900: #225F39;
    --success-950: #164427;

    /* Figma Design System - Alert Scale */
    --alert-50: #FFF1EC;
    --alert-100: #FED4C3;
    --alert-200: #FDC0A5;
    --alert-300: #FCA37C;
    --alert-400: #FC9163;
    --alert-500: #FB753C;
    --alert-600: #E46A37;
    --alert-700: #B2532B;
    --alert-800: #8A4021;
    --alert-900: #693119;
}

/* 2. Global Styles */
body {
    font-family: var(--body-font, 'Inter', sans-serif), serif;
    background-color: var(--background-color);
    color: var(--text-color);
    /* padding-top: 76px;  Navbar height + Padding */
}

/* Headings + links are styled per-element with Tailwind utilities now; the old
   bare h1-h6 / a rules were removed so they don't override the design system. */

/* Main Content Container */
.main-content {
    width: 100%;
}

/* Login Form Styles */
.login {
    width: 100%;
    max-width: 360px;
    margin: 25px auto 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    text-align: center;
    padding: 1em;
}

.login img {
    max-width: 75px;
    max-height: 75px;
    margin-bottom: 25px;
}

.login input {
    outline: 0;
    background: #e7e4e4;
    width: 100%;
    border: 0;
    margin-bottom: 15px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
}

.login button {
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: var(--secondary-color);
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
}

.login button:hover,
.form button:active,
.form button:focus {
    background: var(--primary-color);
}

/* Footer Styles */
.footer {
    margin-top: 1em;
    font-size: 0.75em;
    padding: 15px;
    width: 100%;
    text-align: center;
}

.footer a {
    text-decoration: none;
}

/* Site footer refinements */
.site-footer a {
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}

/* Error Styles */
.errorlist {
    color: #bd512f !important;
}

.error input,
.error select {
    border: 2px solid red;
}

/* Help Text Styles */
.helptext {
    list-style-type: none;
    font-size: 0.75em;
    color: rgba(63, 63, 63, 0.59) !important;
}

.helptext li {
    list-style-type: none;
}

/* Cleaned Up CSS Below */

/* Bootstrap Button Overrides */
.btn.btn-primary {
    background: var(--primary-color) !important;
    color: var(--btn-text-color);
}

.btn.btn-outline-primary {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn.btn-outline-primary:hover {
    color: var(--btn-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Bootstrap Background Color Overrides */
.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Status background colors */
.bg-light-success {
    background-color: rgba(25, 135, 84, 0.15) !important;
}

.bg-light-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

.bg-light-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
}

/* Container Button Styles */
.container button:not(.btn-close) {
    width: 100%;
}



/* Classes Layout Styles */
.classes-container {
    min-height: 100dvh;
}

.classes-layout {
    display: flex;
    min-height: calc(100dvh - 200px);
}

/* Filter Sidebar */
.filters-sidebar {
    width: 350px;
    min-width: 350px;
    border-right: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 50;
}

.filters-content {
    padding: 1.5rem;
}

.filter-group {
    margin-bottom: 0.5rem;
}

.filter-group .form-label {
    font-weight: 600;
}


.classes-header {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0;
    display: block;
}

/* Classes Content */
.classes-content {
    flex: 1;
    padding: 2rem;
    overflow: visible;
    max-height: none;
}

/* Class Cards */
.class-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    overflow: hidden;
}

.actions {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: .5rem
}

.actions .btn {
    flex: 1;
}

.no-click {
    pointer-events: none;
}

.card-img-container {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.class-card:hover .card-img-container img {
    transform: scale(1.05);
}

.card-img-overlay-info {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.class-details {
    line-height: 1.6;
}

.class-schedule {
    border-left: 3px solid var(--primary-color, #007bff);
    background: rgba(0, 123, 255, 0.05);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}

.enrollment-status .badge {
    font-size: 0.85rem;
}

/* Mobile & Tablet Responsive (up to 991.98px to match d-lg-none) */
@media (max-width: 991.98px) {
    .classes-layout {
        flex-direction: column;
        min-height: auto; /* Let body handle the scroll on mobile */
    }

    .filters-sidebar {
        width: 100%;
        min-width: unset;
        height: 100dvh;
        max-height: none;
        position: fixed;
        top: 0;
        left: -100%;
        background: white;
        border-right: none;
        border-bottom: none;
        transition: left 0.3s ease;
        z-index: 1050;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
    }

    .filters-sidebar-body {
        flex: 1;
        overflow-y: auto;
    }

    .filters-sidebar.show {
        left: 0;
    }


    .classes-header {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
    }

    .classes-content {
        padding: 1rem;
        overflow-y: visible;      /* Disable inner scroll on mobile */
        max-height: none;         /* Let content flow */
    }

    /* Override height for mobile card images if needed, but aspect-ratio handles this now */
    .card-img-container {
        /* aspect-ratio set globally handles this, but we can enforce max-height if needed */
    }
}

/* Tablet-specific sidebar width (optional, but keep it constrained if drawer is visible) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .filters-sidebar {
        width: 350px; /* Standard width drawer on tablet */
    }
}

/* Empty state */
.text-center .display-1 {
    font-size: 4rem;
    opacity: 0.3;
}

.container h2 {
    margin-top: 0;
    padding: 10px;
}

/* Enrollment and Registration Styles */
.enroll {
    max-width: 750px;
}

.enroll input {
    outline: 0;
}

.register {
    margin: auto;
    width: 90%;
    max-width: 500px;
    padding: 1em;
}

.registration {
    /*position: relative;*/
    /*background: #FFFFFF;*/
    text-align: center;
    padding: 1em;
    margin: 0 auto;
    max-width: 750px;
}

/* List Reset in Containers */
/* Add primary-color dots to UL/LI items */
.style-ul ul li {
    position: relative;
    padding-left: 1.2em;
}

.style-ul ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: var(--primary-color);
}

/* Style ordered lists consistently */
.container ol li {
    position: relative;
    padding-left: 0.5em;
    margin-left: 1em;
}

/* Custom Hover Effect for Buttons */
.btn-custom {
    color: #212529; /* Neutral text color */
    background-color: #f8f9fa; /* Light background */
    border: 2px solid #dee2e6; /* Subtle border */
    transition: all 0.2s ease-in-out; /* Smooth transition */
}

.btn-custom:hover {
    color: var(--btn-text-color); /* Text changes to white */
    background-color: var(--secondary-color); /* Blue background */
    border-color: var(--primary-color); /* Blue border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Small Button Adjustments */
.btn-sm {
    white-space: nowrap;
}

/* Button Active State Overrides */
/* General button active state */
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    color: var(--btn-text-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.time-block {
    border-left: 4px solid var(--secondary-color);
    padding-left: 15px;
    margin-bottom: 20px;
}

.time-header {
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Profile Circle Icon */
.profile-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--btn-text-color);
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

/* Tab Content Styles */
.tab-content {
    padding: 2px;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
}

/* Profile Tabs Styling */
#profileTabs .nav-link {
    color: var(--text-color);
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

#profileTabs .nav-link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#profileTabs .nav-link.active {
    color: var(--btn-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: bold;
}

/* Logout Button */
.logout-btn {
    margin-top: 20px;
    width: 100%;
}

/* Bootstrap Icons - Circle Fill */
.bi[class*="-circle-fill"] {
    color: var(--primary-color);
}

.btn {
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "important"
    "menu"
    "placeholder";
    gap: 1.5rem;
}

.dashboard-grid > .area-important {
    grid-area: important;
}

.dashboard-grid > .area-menu {
    grid-area: menu;
}

.dashboard-grid > .area-placeholder {
    grid-area: placeholder;
}

@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
      "menu important"
      "menu placeholder";
    }

    .dashboard-grid > .area-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* Utilities: Brand helpers */
/* Text color using brand primary CSS variable */
.text-brand {
    color: var(--color-primary) !important;
}

/* Icon-only action buttons (e.g., edit/remove in Children tab) */
.icon-btn {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    line-height: 1;
}
.icon-btn:focus,
.icon-btn:active {
    outline: none !important;
    box-shadow: none !important;
}
/* Override broad container rule for icon buttons */
.container button.icon-btn:not(.btn-close) {
    width: auto !important;
}
/* Make sure the icon image isn't stretched and doesn't add extra spacing */
.icon-btn img {
    display: block;
}

/* Consistent enhancement for outline buttons used on About page */
.btn.info-btn {
    border-radius: 999px;
    font-weight: 600;
}
.btn-outline-primary.info-btn {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary.info-btn:hover {
    color: var(--btn-text-color);
    background-color: var(--primary-color);
}
.btn-outline-secondary.info-btn {
    color: #495057;
    border-color: #adb5bd;
}
.btn-outline-secondary.info-btn:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* ============================================
   Figma Design System - Home Screen Components
   ============================================ */

/* Mobile Home Layout */
.home-mobile {
    background-color: var(--gray-50);
    min-height: 100vh;
    padding-top: var(--mobile-header-height);
}

/* Top Header Bar */
.home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.home-header .logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.home-header .btn-outline-dark {
    padding: 8px 16px;
    border: 1px solid var(--gray-950);
    border-radius: 4px;
    background: transparent;
    color: var(--gray-950);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.home-header .btn-outline-dark:hover {
    background-color: var(--gray-950);
    color: var(--white);
}

/* Notification Banner */
.notification-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 16px;
    background-color: var(--warning-300);
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.03);
}

.notification-banner .notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.notification-banner .notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: var(--warning-50);
    border-radius: 8px;
}

.notification-banner .notification-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--black);
}

.btn-warning-dark {
    padding: 8px 16px;
    background-color: var(--warning-950);
    border: none;
    border-radius: 4px;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning-dark:hover {
    opacity: 0.9;
}

.text-warning-dark {
    color: var(--warning-950) !important;
}

/* Program Info Card */
.program-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px 0;
    margin: 16px;
    text-align: center;
}

.program-card .program-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 16px;
}

.program-card .program-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.program-card .program-links a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--purple-700);
    text-decoration: none;
    transition: color 0.2s ease;
}

.program-card .program-links a:hover {
    color: var(--purple-900);
    text-decoration: underline;
}

/* Important Dates Card */
.dates-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin: 16px;
}

.dates-card .dates-header {
    background-color: var(--purple-900);
    padding: 12px 16px;
}

.dates-card .dates-header h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    color: var(--white);
    margin: 0;
}

.dates-card .dates-body {
    padding: 16px;
}

.dates-card .date-item {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.dates-card .date-item:last-child {
    margin-bottom: 0;
}

.dates-card .date-icon {
    display: flex;
    align-items: flex-start;
    padding: 2px 0;
    color: var(--gray-800);
}

.dates-card .date-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dates-card .date-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

.dates-card .date-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-600);
}

/* Mobile Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--white);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1), 0 -1px 2px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Modal overlay layer.
 *
 * Mobile renders two pieces of position:fixed chrome that a modal must clear:
 *
 *   .home-header  100
 *   .bottom-nav  1000
 *
 * Modals used to be Tailwind's z-50, i.e. below both: the header sliced the top
 * off the modal and the bottom nav covered the Confirm/Cancel row, so on a phone
 * there was no visible way to submit an enrolment. The backdrop now dims the nav
 * too, which is what aria-modal="true" implies anyway.
 *
 * The mobile filter drawer on the classes page sits just below, at 1080/1090
 * (Tailwind classes, in registration/templates/classes.html) — it has to clear
 * the nav for the same reason, but a modal opened from that page must still win.
 *
 * 1100 also clears the stale .filters-sidebar / .mobile-filter-bar /
 * .mobile-registration-bar rules further down this file (90-1050). Those match
 * no markup any more, but leaving headroom means reviving one can't resurrect
 * this bug. Add new fixed chrome below 1080.
 */
.se-modal-layer {
    z-index: 1100;
}

/*
 * Height-cap fallback for the standard modal shape (#1659): a fixed inset-0
 * p-4 layer with a .relative flex-column panel capped by max-h-full, whose
 * inner region scrolls. The max-h-full utility only exists in the generated
 * tailwind bundle (static/css/tailwind.css, gitignored); a dev bundle built
 * before #1659 lacked it, which uncapped every modal at 375x667 and pushed
 * the pass-purchase submit button off screen. Keeping the cap here means
 * modal usability never depends on the freshness of the generated bundle.
 */
.se-modal-layer > .relative {
    max-height: 100%;
}

.bottom-nav .nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: var(--mobile-bottom-nav-height);
    padding: 0;
    margin: 0;
    list-style: none;
}

.bottom-nav .nav-items li {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bottom-nav .nav-item .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    margin-bottom: 4px;
}

.bottom-nav .nav-item .nav-icon i {
    font-size: 20px;
    color: var(--purple-900);
}

.bottom-nav .nav-item .nav-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    color: var(--purple-900);
}

.bottom-nav .nav-item.active .nav-icon {
    background-color: transparent;
}

.bottom-nav .nav-item.active .nav-icon i {
    color: var(--purple-600);
}

.bottom-nav .nav-item.active .nav-label {
    color: var(--purple-700);
}


/* Desktop adjustments - show traditional nav on larger screens */
@media (min-width: 992px) {
    .home-mobile {
        padding-bottom: 0;
    }
    
    .bottom-nav {
        display: none;
    }
    
    .home-header {
        display: none;
    }
    
    /* Show traditional navbar on desktop */
    /* Desktop navbar is sticky and in-flow now, so the body needs no top padding. */
}

/* Global mobile adjustments - bottom nav on all pages */
@media (max-width: 991.98px) {
    /* Keep the fixed .bottom-nav from covering the end of the document.
       This sits on `body` rather than `.main-content` because footer.html is
       included after the .main-content div closes: padding on the wrapper
       stopped short of the footer, so the Privacy Policy and Terms of Service
       links ended flush with the viewport bottom, underneath the nav, at
       maximum scroll on every page (issue #2017). */
    body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    /* Wallet page has no mobile layout wrapper of its own, so clear the fixed
       top header (.home-header) here rather than let it cover the heading. */
    .wallet-page .main-content {
        padding-top: var(--mobile-header-height);
    }

    /* Hide the traditional footer on mobile - bottom nav replaces it */
    .footer,
    .site-footer {
        display: none !important;
    }
    
    /* Hide navbar on all mobile pages - use mobile header + bottom nav instead */
    body {
        padding-top: 0 !important;
    }
    
    .navbar {
        display: none !important;
    }
}


/* On mobile, standard navbar is hidden via d-none d-lg-block in markup */
/* But we ensure it's hidden here too just in case */
/* The .navbar display:none rule is already included in the previous media query block */

/* ============================================
   Figma Design System - Schedule Page Components
   ============================================ */

/* Schedule Mobile Layout */
.schedule-mobile {
    background-color: var(--gray-50);
    min-height: 100vh;
    padding-top: var(--mobile-header-height);
}

/* Schedule Header Section */
.schedule-header-section {
    padding: 16px;
}

.schedule-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
    color: var(--black);
    text-align: center;
    margin-bottom: 12px;
}

/* Week Navigation */
.schedule-week-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.schedule-week-nav .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: var(--gray-50);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.schedule-week-nav .btn-icon:hover {
    background-color: var(--gray-200);
}

.schedule-week-nav .btn-icon i {
    font-size: 18px;
    color: var(--black);
}

.schedule-week-nav .week-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black);
}

/* Add to Calendar Button */
.btn-add-calendar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background-color: transparent;
    border: 1px solid var(--gray-950);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-950);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-add-calendar:hover {
    background-color: var(--gray-950);
    color: var(--white);
}

.btn-add-calendar i {
    font-size: 20px;
}

/* Schedule Day Cards */
.schedule-days {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
}

.schedule-day-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.schedule-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #D1D8FD; /* purple-100 */
    border-radius: 12px 12px 0 0;
}

.schedule-day-header.today {
    background-color: var(--purple-600);
}

.schedule-day-header.today .day-title {
    color: var(--white);
}

.schedule-day-header .day-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

.schedule-day-header .expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.schedule-day-header .expand-btn i {
    font-size: 20px;
    color: var(--black);
}

.schedule-day-header.today .expand-btn i {
    color: var(--white);
}

.schedule-day-header .expand-btn.collapsed i {
    transform: rotate(180deg);
}

.schedule-day-body {
    padding: 0 16px;
}

.schedule-day-body.empty {
    padding: 24px 16px;
    text-align: center;
}

.schedule-day-body .no-classes {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600);
}

/* Schedule Class Item */
.schedule-class-item {
    display: flex;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
}

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

.schedule-class-icon {
    display: flex;
    align-items: flex-start;
    padding: 2px 0;
}

.schedule-class-icon i {
    font-size: 16px;
    color: var(--gray-800);
}

.schedule-class-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.schedule-class-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

.schedule-class-name a {
    color: inherit;
    text-decoration: none;
}

.schedule-class-name a:hover {
    color: var(--purple-700);
    text-decoration: underline;
}

.schedule-class-time {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-600);
}

.schedule-class-meta {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600);
}

/* Student Filter Pills */
.student-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.student-filter-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.student-filter-pill.active {
    background-color: var(--purple-900);
    color: var(--white);
}

.student-filter-pill:not(.active) {
    background-color: transparent;
    border: 1px solid var(--purple-900);
    color: var(--purple-900);
}

.student-filter-pill:not(.active):hover {
    background-color: var(--purple-900);
    color: var(--white);
}

/* Desktop adjustments for schedule */
@media (min-width: 992px) {
    .schedule-mobile {
        padding-bottom: 0;
    }
}

/* ============================================
   Figma Design System - Profile Page Components
   ============================================ */

/* Profile Mobile Layout */
.profile-mobile {
    background-color: var(--gray-50);
    min-height: 100vh;
    padding-top: var(--mobile-header-height);
}

/* Profile Tab Pills (Shared mobile base) */
.profile-tabs-section {
    padding: 16px;
}

    .profile-nav-pills {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px; /* Reduced gap for equal spacing */
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%; /* Ensure full width */
    }

.profile-nav-pills::-webkit-scrollbar {
    display: none;
}

.profile-nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px; /* Reduced padding */
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px; /* Slightly smaller font to ensure fit */
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex: 1 1 0px; /* Grow equally to fill space */
    width: 0; /* Required for flex-grow to work properly in some browsers */
    background-color: var(--gray-200);
    color: var(--gray-950);
}

.profile-nav-pills .nav-link.active {
    background-color: var(--purple-700) !important; /* Force override bootstrap */
    color: var(--white) !important;
}

.profile-nav-pills .nav-link:hover:not(.active) {
    background-color: var(--gray-800);
    color: var(--white);
}

/* Profile Content Cards */
.profile-content-section {
    padding: 0 16px;
}

.profile-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    padding: 8px 16px;
    background-color: var(--purple-100);
    border-radius: 12px 12px 0 0;
    color: var(--black);
}

.profile-card-header .card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    margin: 0;
}

.profile-card-header .btn-add-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 12px;
    background-color: var(--purple-700);
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    text-decoration: none;
    transition: all 0.2s ease;
}

.profile-card-header .btn-add-child:hover {
    background-color: var(--purple-900);
}

.profile-card-header .btn-add-child i {
    font-size: 20px;
}

.profile-card-body {
    padding: 16px;
}

/* Child Item in Profile */
.child-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}

.child-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.child-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

.child-age {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

.child-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.child-detail-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-600);
}

.child-detail-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

/* Profile Form Fields */
.profile-form-group {
    margin-bottom: 16px;
}

.profile-form-group label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.profile-form-group input,
.profile-form-group select {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--white);
    transition: border-color 0.2s ease;
}

.profile-form-group input:focus,
.profile-form-group select:focus {
    outline: none;
    border-color: var(--purple-600);
}

/* Profile Section Title */
.profile-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 12px;
}

/* Profile Button Styles */
.btn-profile-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: fit-content;
    padding: 11px 24px;
    background-color: var(--purple-700);
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-profile-primary:hover {
    background-color: var(--purple-900);
}

.btn-profile-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: transparent;
    border: 1px solid var(--gray-950);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-950);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-profile-outline:hover {
    background-color: var(--gray-950);
    color: var(--white);
}

/* Payment Method Card */
.payment-method-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--gray-50);
    border-radius: 8px;
    margin-bottom: 16px;
}

.payment-method-icon {
    font-size: 32px;
    color: var(--purple-700);
}

.payment-method-info {
    flex: 1;
}

.payment-method-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

.payment-method-date {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600);
}

/* Calendar Feed Buttons */
.calendar-feed-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    margin-bottom: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
}

.calendar-feed-btn:hover {
    background-color: var(--gray-50);
    border-color: var(--purple-600);
}

.calendar-feed-btn i {
    font-size: 24px;
}

.calendar-feed-btn.google i {
    color: #4285F4;
}

.calendar-feed-btn.apple i {
    color: var(--black);
}

.calendar-feed-btn.download i {
    color: var(--purple-700);
}

.calendar-feed-btn span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

/* Profile Alert Info */
.profile-alert {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background-color: #E0F2FE;
    border-radius: 8px;
    margin-bottom: 16px;
}

.profile-alert i {
    font-size: 20px;
    color: #0284C7;
}

.profile-alert p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--black);
    margin: 0;
}

/* Profile page mobile adjustments */
@media (max-width: 991.98px) {
    /* Navbar, footer hiding and padding adjustments are handled by global mobile rules */
}

/* Desktop adjustments for profile */
@media (min-width: 992px) {
    .profile-mobile {
        padding-bottom: 0;
    }
    
    /* Vertical Sidebar Styling for Desktop */
    .profile-sidebar {
        background: transparent;
    }

    .profile-tabs-section {
        padding: 0;
    }

    .profile-nav-pills {
        flex-direction: column !important;
        gap: 8px;
    }

    /* Reset to vertical layout with proper alignment on desktop */
    .profile-nav-pills .nav-link {
        display: flex;
        border-radius: 12px; /* Softer rect instead of pill */
        justify-content: flex-start; /* Align text left */
        width: 100%;
        flex: none; /* Disable the flex-grow used on mobile */
        background-color: transparent; /* Clean background */
        color: var(--gray-600);
        padding: 12px 16px;
        font-size: 16px;
    }

    .profile-nav-pills .nav-link.active {
        background-color: var(--white) !important;
        color: var(--purple-700) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        font-weight: 600;
        border-left: 4px solid var(--purple-700);
        border-radius: 4px 12px 12px 4px; /* Straight edge on left */
    }

    .profile-nav-pills .nav-link:hover:not(.active) {
        background-color: var(--gray-200);
        color: var(--gray-950);
    }
}

/* ============================================
   Figma Design System - Classes Page Components
   ============================================ */

/* Classes Mobile Layout */
.classes-mobile {
    background-color: var(--gray-50);
    min-height: 100vh;
    padding-top: var(--mobile-header-height);
}

/* Classes Content Area */
.classes-mobile .classes-content-area {
    padding: 16px;
}

/* Filter Pills for Classes */
.classes-filter-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 4px 8px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.classes-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background-color: var(--gray-200);
    border: none;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-950);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.classes-filter-pill.active {
    background-color: var(--purple-700);
    color: var(--white);
}

.classes-filter-pill:hover:not(.active) {
    background-color: var(--gray-800);
    color: var(--white);
}

.classes-filter-pill i {
    font-size: 12px;
}

/* Mobile Filter Bar */
.mobile-filter-bar {
    position: sticky;
    top: 72px; /* Height of mobile header (48+12+12) */
    z-index: 90; /* Below header (100) but above content */
    padding: 12px 16px;
    background-color: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    transition: top 0.3s ease;
}

/* Mobile Filter Button */
.mobile-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background-color: var(--white);
    border: 1px solid var(--gray-950);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-950);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-filter-btn:hover {
    background-color: var(--gray-950);
    color: var(--white);
}

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

/* Class Card - Mobile Figma Style */
.class-card-mobile {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.class-card-mobile:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.class-card-mobile .card-image {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.class-card-mobile .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.class-card-mobile .card-image .price-badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

.class-card-mobile .card-body {
    padding: 12px 16px;
}

.class-card-mobile .class-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    margin-bottom: 4px;
}

.class-card-mobile .class-name a {
    color: inherit;
    text-decoration: none;
}

.class-card-mobile .class-name a:hover {
    color: var(--purple-700);
}

/* Class Details Rows (Mobile) */
.class-details-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.class-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.class-detail-row .detail-icon {
    width: 20px;
    height: 24px; /* Match line-height */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.class-detail-row .detail-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    flex: 1;
}

.class-detail-row .detail-text .text-muted {
    color: var(--gray-600) !important;
    font-weight: 500;
}

.class-card-mobile .card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--gray-50);
}

.class-card-mobile .card-actions .btn {
    flex: 1;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    text-align: center;
}

/* Programs dropdown hover behavior for desktop */
@media (min-width: 992px) {
    .programs-dropdown:hover .dropdown-menu {
        display: block;
    }

    .programs-dropdown .dropdown-menu {
        margin-top: 0;
    }
}

/* Adjust navbar collapse */
.navbar-collapse {
    padding: 0;
}

/* Classes page mobile adjustments */
@media (max-width: 991.98px) {
    /* Traditional filter sidebar is hidden off-screen by default on mobile (via .filters-sidebar styles above)
       but we need to make sure it's not display:none so it can slide in when toggled. */
    
    body.classes-page .classes-layout {
        display: block;
    }
    
    body.classes-page .classes-content {
        padding: 0;
    }
    
    body.classes-page .classes-content-area {
        padding: 0 1rem 1rem 1rem;
    }
}

/* Desktop adjustments for classes */
@media (min-width: 992px) {
    .classes-mobile {
        display: none;
    }
    
    /* Show traditional layout on desktop */
    body.classes-page .classes-container {
        display: block;
    }
}

/* ============================================
   Figma Design System - Filter Pills (Classes Page)
   ============================================ */

/* Active filter pill - Outline style with X button (from Figma buttonSmall) */
.filter-pill-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 8px 12px;
    height: 32px;
    background-color: transparent;
    border: 1px solid var(--gray-950);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-950);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-pill-active:hover {
    background-color: var(--gray-50);
    color: var(--gray-950);
    text-decoration: none;
}

.filter-pill-active .filter-pill-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
}

/* Clear all button - Neutral style (from Figma buttonSmall) */
.filter-pill-clear {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    height: 32px;
    background-color: var(--gray-200);
    border: none;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-950);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-pill-clear:hover {
    background-color: var(--gray-800);
    color: var(--white);
    text-decoration: none;
}

/* Filter pills container */
.active-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

/* The Figma-era .btn-class-* rules that used to live here are gone. Those classes
   remain in the markup as markers for BDD selectors and view tests only; the
   catalog buttons are styled by <c-button>. The rules were unlayered, so they
   outranked every (layered) Tailwind utility and forced the labels to 16px in a
   32px box -- which is what made "Join Waitlist" and "Learn more" wrap. */

/* Card footer with Figma button layout */
.class-card .card-footer {
    padding: 16px;
    background-color: transparent;
}

.class-card .card-footer .d-grid {
    display: flex !important;
    gap: 16px;
}

.class-card .card-footer .d-grid > * {
    flex: 1;
}

/* Price badge on card header - Figma style */
.class-card .card-img-overlay-info .badge,
.class-card-mobile .card-image .price-badge {
    padding: 8px 12px;
    background-color: var(--white) !important;
    color: var(--gray-950);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Figma Design System - Class Detail Page Components
   ============================================ */

/* Mobile Layout Wrapper */
.class-detail-mobile {
    background-color: var(--gray-50);
    min-height: 100vh;
    padding-top: var(--mobile-header-height);
}

@media (max-width: 991.98px) {
    /* Add extra padding to content to account for fixed bottom elements */
    .class-detail-mobile {
        padding-bottom: 160px; /* ~78px bottom nav + ~70px registration bar + spacing */
    }
}

/* Mobile Fixed Registration Bar */
.mobile-registration-bar {
    position: fixed;
    bottom: 0; 
    left: 0;
    right: 0;
    background-color: var(--white);
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 999; /* Just below bottom nav (1000) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--gray-200);
    /* Safely sit above the bottom navigation bar */
    margin-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    .mobile-registration-bar {
        display: none !important;
    }
    
    .class-detail-mobile {
        background-color: transparent;
        min-height: auto;
        padding-bottom: 0;
    }
}

/* Mobile Class Header (Title + Image) */
.class-header-mobile {
    background-color: var(--white);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}

.class-header-mobile .hero-image {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.class-header-mobile .header-content {
    padding: 16px;
}

.class-header-mobile h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: var(--black);
    margin-bottom: 8px;
}

.class-header-mobile .badge {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 8px;
}

/* Add no-scrollbar class for hiding scrollbars */
.no-scrollbar {
    scrollbar-width: none; /* For Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}