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

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

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



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

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

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

/* Mobile & Tablet Responsive (up to 991.98px to match d-lg-none) */
@media (max-width: 991.98px) {
    /* 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 */
    }
}

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

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

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

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

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

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

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

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


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

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

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

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

/* Adjust navbar collapse */
.navbar-collapse {
    padding: 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 */
    }
}

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