/*--- styles.css ---*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

/* Global Styles */
body {
    font-family: "DM Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
    /*background-color: var(--cream-20);*/
    /*background: linear-gradient(135deg, var(--slate-900), var(--slate-800), var(--slate-700));*/
    background: linear-gradient(180deg, #F0F1F1 0%, #CFD9DA 52.6%, #B1C1C9 100%);
    background-attachment: fixed;
    color: var(--keys-primary-text);
    margin: 0;
    padding: 0 12px;           /* default for desktop & tablet */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Override on small screens (phones) */
@media (max-width: 480px) {
    body {
        padding: 0;           /* zero padding on phones */
    }
}


.appWrapper{
    display: flex;
    background-color: var(--cream-20);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
    flex: 1;
}

main{
    display: flex;
    flex-direction: column;
    padding: 12px;
    flex: 1 0 auto;
}
/* Public pages (e.g., pricing.html, privacy.html) */
.public-page {
    background-color: var(--gray-0); /* Light background as in your pricing.html example */
}

/* Application pages (e.g., attendee-home.html) */
.application-page {
    /* Example: Adjust based on your needs */
    background-color: var(--cream-20);
}

/* Admin pages (e.g., facilitator_dashboard.html) */
.admin-page {
    /* Example: Adjust based on your needs */
    background-color: var(--gray-0);
}

a {
    text-decoration: none;
    color: var(--keys-interactive);
}

/**********************************/
/*      General Pages
/**********************************/

.pageContent {
    margin: 0px auto;
    padding: 0px 20px;
    width: 100%;
}

/**********************************/
/*      Container & Headings    
/**********************************/

/* Form Container */
.container {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    background-color: var(--keys-white);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Headings */
h1 {
    font-size: 24px; /* Changed from 1.75rem */
    font-weight: 500;
    margin-bottom: 12px; /* Changed from 1.5rem */
    color: var(--slate-900);
}

h2 {
    font-size: 20px; /* Changed from 1.25rem */
    font-weight: 400;
    margin-bottom: 12px; /* Changed from 1rem */
    color: var(--slate-800);
}

h3 {
    font-size: 16px; /* Changed from 1rem */
    font-weight: 300;
    margin-bottom: 12px; /* Changed from 0.75rem */
    color: var(--slate-600);
}

h4 {
    font-size: 14px; /* Changed from 1rem */
    font-weight: 300;
    margin-bottom: 12px; /* Changed from 0.75rem */
    color: var(--slate-800);
}

/**********************************/
/*       App Header     
/**********************************/


.navbar {
    display: flex;
    padding: 12px 12px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-25);
    width: -webkit-fill-available;
}

.navbar-left, .navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-logo-link{
    display: flex;
    gap: 0px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-700);
}
.navbar-logo {
    height: 24px;
    width: auto;
    margin-right: 8px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
    margin-right: 20px;
    padding: 0;
    color: var(--gray-900);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    letter-spacing: 0.05em;
    }

.nav-link {
    display: flex;
    padding: 0 12px;
    align-items: flex-start;
    gap: 10px;
    color: var(--blue-900);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.navbar-menu {
    position: relative;
    height: 24px;
    align-content: center;
}

a.menu-toggle {
    padding: 0 4px;
}

a.menu-toggle i {
    color: var(--blue-900);
}

.navbar .credit-count {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    padding: 0 12px;
    color: var(--blue-900);
    height: 24px;
}

.navbar .credit-count i {
    color: var(--orange-600);
    font-size: 20px;
    margin: 0 8px 0 0;
}


/* Profile Avatar */

.profile-link{
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}
.profile-link {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}

.profile-avatar {
    display: flex;
    align-items: center;
    border:1px solid var(--slate-75);
    background-color: var(--gray-0);
    background-image: url('/static/images/avatar_placeholder.svg');
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
    height: 24px;
    width: 24px;
    position: relative;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar.avatar-mini {
    height: 36px;
    width: 36px;
    /*border-radius: 8px;*/
}

.profile-avatar.avatar-small {
    height: 48px;
    width: 48px;
    /*border-radius: 8px;*/
}

.profile-avatar.avatar-medium {
    height: 75px;
    width: 75px;
    /*border-radius: 12px;*/
}

.profile-avatar.avatar-large {
    height: 120px;
    width: 120px;
    /*border-radius: 12px;*/
}




/* Overlay Menu */
.overlay-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    overflow-x: hidden;
    border-radius: 4px;
    background: var(--keys-white);
    box-shadow: 1px 1px 6px var(--gray-200);
    width: max-content;
    min-width: 200px;
}

.menuItems {
    display: flex;
    padding: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.menuDivider {
    display: block;
    border-bottom: 1px solid var(--gray-100);
    height: 1px;
    width: 100%;
}

.menuSectionHeader {
    display: block;
    text-transform: uppercase;
    padding: 2px 8px;
    font-size: 12px;
}

.menuItems a {
    display: flex;
    padding: 6px 8px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    text-decoration: none;
    color: var(--blue-900);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: background-color 0.3s;
}

.menuItems a.active {
    background-color: var(--blue-600);
    color: var(--keys-white);
    border-radius: 8px;
}

.menuItems a:hover {
    background-color: var(--gray-50);
    border-radius: 8px;
}

/* Utility Classes */
.beta {
    display: inline-block;
    font-size: 12px;
    color: var(--keys-white);
    background-color: var(--orange-600);
    border-radius: 4px;
    padding: 0 6px;
    text-transform: uppercase;
    margin: 0 4px;
}

/* Features Section */
.features, .how-it-works, .call-to-action {
    padding: 40px 20px;
    text-align: center;
}

.features h2, .how-it-works h2, .call-to-action h2 {
    margin-bottom: 20px;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.feature {
    background-color: var(--keys-white);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--gray-500);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .feature-list {
        grid-template-columns: 1fr;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }

    .overlay-menu {
        width: 100%;
    }
}


/**********************************/
/*        App Footer      
/**********************************/

footer {
    display: flex;
    padding: 8px 10px;
    justify-content: space-around;
    align-items: center;
    align-self: stretch;
    border-top: 1px solid var(--gray-100);
    flex-wrap: wrap;
    gap: 0px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    background-color: var(--gray-0);
    margin: 0px auto;
    width: 100%;
    }
    @media (max-width: 600px) {
        footer {
            margin: 0;
            width: 100%;
        }
    }
    footer a {
        color: var(--gray---gray-800, #4E5A6B);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding: 8px 8px;
        border: 1px solid transparent;
        }
        footer a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            border: 1px solid #DDD;
        }
    footer .copyright {
        font-size: 14px;
        }


/**********************************/
/*       Pages
/**********************************/

.page{
    /*background-color: var(--gray-0);*/
    /*padding: 0px 12px;*/
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    }
    .page .pageHeader {
        padding: 12px;
        /*margin: -12px -12px 0px -12px;*/
/*        background-color: var(--gray-0);*/
        }
    .page .pageContainer{
        width: 100%;
        display: flex;
        flex-direction: column;
        }



.facilitator_page {
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Ensure it takes at least full viewport height */
    flex: 1;
}

.facilitator_page .pageContainer {
    flex: 1 0 auto; /* Grow to fill space, don't shrink, auto base size */
    display: flex;
    flex-direction: column;
}

.facilitator_page .tab-wrapper {
    flex: 1; /* Allow tab-wrapper to flex vertically */
    overflow: hidden; /* Prevent unwanted scrollbars */
    display: flex;
    flex-direction: column;
}

.facilitator_page .tab-content {
    flex: 1; /* Fill the height of tab-wrapper */
    overflow: auto; /* Allow scrolling within tab-content if needed */
    display: flex;
    flex-direction: column;
}

/*
.facilitator_page{
    display: flex;
    flex-direction: column;
    }*/


    .facilitator_page .pageHeader{
        background-color: var(--keys-white);
        padding: 0px 20px;
    }

    /*.facilitator_page .pageContainer{
        padding: 20px 20px;
        display: flex;
        flex-direction: column;
        }*/

    .facilitator_page .tab-nav{
        background-color: var(--keys-white);
        border: none;
        border-top: none;
        border-bottom: 1px solid var(--keys-stroke);
        padding: 0px 40px 8px 40px;
        list-style: none;
        display: flex;
        flex-direction: row;
        }

        .facilitator_page .tab-nav .menuDivider{
            display: none;
        }
        .facilitator_page .tab-nav .menuSectionHeader{
            display: none;
        }

    .facilitator_page .section{
        background-color: var(--keys-white);
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        padding: 12px 20px;
        }

.pageTitle{
    color: var(--gray-800);
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 100%;
    padding-top: 8px;
    }
    .page .pageTitle{
        max-width: 500px;
        }



/* Event Header Styles */
.eventHeader {
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: var(--gray-500);
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    padding: 8px 0px;
    width: 100%;
    }
    .page .eventHeader{
        max-width: 500px;
        }

.eventHeader-left, .eventHeader-right {
    display: flex;
    gap: 10px; /* Small spacing between spans, e.g., "Feb 18th" and "9am - 3pm" */
}

.eventHeader-date{
    font-weight: 400;
    }
.eventHeader-time{
    font-weight: 400;
    }
.eventHeder-uid-label{
    font-weight: 400;
    }
    .eventHeder-uid{
        font-weight: 600;
        }


/**********************************/
/*       Pages
/**********************************/


/* Breadcrumb container */
.breadcrumbs{
    display: flex;
    gap: 12px;
}
.breadcrumbs a i.icon:before{
    font-size: 32px;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
    width: 100%;
    }

/* Individual items */
.breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Separator between items */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/"; /* Default separator */
    padding: 0 8px;
    color: #6c757d; /* Muted color for separators */
}

/* Links */
.breadcrumb-item a {
    color: var(--gray-800);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-item:last-child a {
    color: var(--gray-700);
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--keys-interactive);
    text-decoration: underline; /* Hover/focus feedback */
    outline: none; /* Remove default focus outline, if styled elsewhere */
}


/* Active (current) item */
.breadcrumb-item.active {
    color: #6c757d; /* Muted color for current page */
}

/* Optional: Customization classes */
.breadcrumb--chevron .breadcrumb-item + .breadcrumb-item::before {
    content: ">"; /* Alternative separator */
}

.breadcrumb--attendee {
    font-size: 16px;
}

.breadcrumb--facilitator {
    font-size: 19px;
    padding: 8px 0px;
}


/**********************************/
/*       Pill
/**********************************/
.pills{
    display: flex;
    flex-wrap: wrap;
}
.pill{
    display: inline-flex;
    font-size: 12px;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 100px;
    background-color: var(--gray-50);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    }
    .pill.mutual-pill {
        background-color: var(--yellow-200);
        border-color: var(--yellow-500);
        color: var(--gray-800);
        }
    .pill.known-pill {
        background-color: var(--green-200);
        border-color: var(--green-500);
        color: var(--gray-800);
        }
    .pill.top-pick-pill {
        background-color: var(--cyan-50);
        border-color: var(--cyan-200);
        color: var(--gray-800);
        }
    .pill.upcoming-event {
        background-color: var(--green-50);
        border-color: var(--green-200);
        color: var(--green-800);
        }



/**********************************/
/*       Spinner
/**********************************/
/*  Usage
<div class="spinner"></div>
*/
    .spinner {
        display: none;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0px 4px;
        overflow: hidden;
        animation: spin 2s linear infinite;
        position: relative;
        }
    .form-actions .spinner{
        top: 5px;
        }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


/**********************************/
/*         Special Icons
/**********************************/

.checkmark-icon {
    display: inline-block;
    min-width: 24px;
    width: 24px;
    height: 24px;
    background-color: var(--green-700);
    color: var(--gray-0);
    text-align: center;
    line-height: 24px;
    border-radius: 100px;
    font-weight: 800;
}

/**********************************/
/*       Loading Indicator
/**********************************/



    .loading-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }

    .loading-indicator span {
        width: 10px;
        height: 10px;
        background-color: var(--keys-interactive);
        border-radius: 50%;
        margin: 0 5px;
        animation: loading 2.4s infinite both;
    }

    .loading-indicator span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .loading-indicator span:nth-child(3) {
        animation-delay: 0.4s;
    }
    @keyframes loading {
        0% {
            opacity: 0.3;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1);
        }
        100% {
            opacity: 0.3;
            transform: scale(0.3);
        }
    }


/**********************************/
/*        Sections      
/**********************************/

.metric-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-tile {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.metric-tile i {
    font-size: 24px;
    color: #007bff;
    margin-bottom: 10px;
}

.metric-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.metric-value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}



/**********************************/
/*        Sections      
/**********************************/
.section {
    margin-bottom: 48px;
}
.sectionBlock{
    background-color: var(--gray-0);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0px 12px 0px;
}
.sectionBlock h3{
    color: var(--gray-700);
    font-size: 18px;
}
.sectionBlock p{
    color: var(--gray-600);
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 12px;
}

.sectionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
    width: 100%;
}

.sectionHeader h1, .sectionHeader h2, .sectionHeader h3, .sectionHeader h4 {
    margin-bottom: 0px;
}
.sectionHeader a{
    font-weight: 300;
}

.sectionHeader-Left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sectionHeader-Right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sectionBody {
    display: grid;
    
    gap: 20px;
    width: 100%;
}
.sectionBodyGrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(237px, 1fr));
    gap: 20px;
}

.sectionBodyContainer {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.tableSectionHeader{
    display: flex;
    flex-direction: column;
    padding: 0px 0;
    margin: 12px;
}
.tableSectionSearch{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}
.tableSectionFilter{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    width: 100%;
    border-radius: 8px;
    background-color: var(--gray-25);
    margin-top: 12px;
    border: 1px solid var(--gray-100);
}

/* Note box with checkmark */
.note {
    display: flex;
    align-items: center;
    background-color: var(--yellow-50);
    padding: 15px 20px;
    margin-bottom: 20px;
    border-left: 4px solid var(--yellow-300);
    border-radius: 4px;
    font-size: 14px; /* Changed from 0.875rem */
    line-height: 1.4;
}

.note i {
    margin-right: 10px;
    color: var(--yellow-600);
    font-size: 19px; /* Changed from 1.2rem */
}

/* Attendance Row */
.attendance-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Price Display */
.price {
    margin-left: auto;
    font-size: 18px; /* Changed from 1.125rem */
    color: var(--keys-black);
    font-weight: 600;
}

/* Event Details Section */
.event-details > div {
    margin-bottom: 15px;
}

.event-times {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.event-times > div {
    flex: 1;
    min-width: 120px;
}

.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-right: 40px;
}

.input-with-icon i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--keys-placeholder);
}

/* Sessions Section */
.sessions h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-session {
    background-color: var(--keys-interactive);
    color: var(--keys-white);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px; /* Changed from 0.875rem */
}

.add-session:hover {
    background-color: #085e91;
}

/* Each Session */
.session {
    margin: 20px;
    border: 1px solid var(--gray-100);
    padding-bottom: 12px;
}

.session-details.hidden {
    display: none;
}

/* Optional: Add visual feedback for the toggle states */
.toggle-icon.open {
    /* Styles for open state if desired */
}

.toggle-icon.closed {
    /* Styles for closed state if desired */
}

/*
  If you want to keep the older style on h3, you can leave this. 
  But we now have a .session-header and .session-title below.
*/
.session h3 {
    margin-bottom: 0;
}

/* Session Header for mobile-friendly layout */
.session-header {
    display: flex;
    flex-wrap: wrap; /* So actions move below on narrow screens */
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.session-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.session-actions {
    display: flex;
    gap: 5px;
}

.session-actions button {
    padding: 5px 10px;
    font-size: 13px; /* Changed from 0.8rem */
}

/* Toggle session details (hide/show) */
.session-details {
    margin-top: 10px;
}

.session-details.hidden {
    display: none;
}

/* Toggle agenda details (hide/show) */
.agenda-details {
    margin-top: 10px;
}

.agenda-details.hidden {
    display: none;
}


/**********************************/
/*        List Card
/**********************************/

.listCard {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    min-width: 300px;
    border-radius: 8px;
    background: var(--gray-0);
    box-shadow: 0px 1px 6px 0px rgba(48, 59, 76, 0.10);
}
.listCardHeader {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--gray-100, #EDEDED);
}
.listCardTitle {
    color: var(--gray-600);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.listCardActions {
    flex: 1 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.listCardSubHeader{
    padding: 2px 12px;
    text-transform: uppercase;
    font-size: 12px;
}
.listCardTile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-bottom: 1px solid var(--gray-75, #F5F5F5);
    background: linear-gradient(180deg, #FCFCFC 0%, #FCFCFC 100%);
    padding: 6px 12px;
    color: var(--gray---gray-850, #303B4C);
    cursor: pointer;
}

/**********************************/
/*        Card Component
/**********************************/
.Card {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    min-width: 300px;
    border-radius: 8px;
    background: var(--gray-0);
    box-shadow: 0px 1px 6px 0px rgba(48, 59, 76, 0.10);
}

.CardHeader {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid var(--gray-100, #EDEDED);
}

.CardTitle {
    color: var(--gray-600);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.CardActions {
    flex: 1 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.CardContent {
    padding: 12px;
    align-self: stretch;
    color: var(--gray-700);
}

.CardContent h3 {
    color: var(--gray-700);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.CardContent p {
    color: var(--gray-600);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 12px;
}

.CardContent p:last-child {
    margin-bottom: 0;
}

.CardContent .multiline {
    white-space: pre-line;
}





/**********************************/
/*        Step Progress Indicator
/**********************************/

        .progress-container {
            width: calc(100% - 60px);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .progress-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin: 20px 0px;
        }
        
        /* Progress line */
        .progress-steps::before {
            content: '';
            position: absolute;
            top: 11px;
            left: 30px; /* Start at center of first dot */
            width: calc(100% - 60px); /* Adjust width to end at center of last dot */
            height: 4px;
            background-color: #e0e0e0;
            z-index: 1;
        }
        
        /* Completed line */
        .progress-steps .progress-line {
            position: absolute;
            top: 10px;
            left: 30px; /* Start at center of first dot */
            height: 4px;
            background-color: var(--green-600);
            transition: width 0.3s ease;
            z-index: 2;
        }
        
        .progress-steps .step {
            position: relative;
            z-index: 3;
            text-align: center;
            width: 60px;
        }
        
        .progress-steps .step-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            transition: all 0.3s ease;
            border: 2px solid #e0e0e0;
        }
        
        .progress-steps .step-label {
            font-size: 14px;
            color: #757575;
            transition: color 0.3s ease;
        }
        
        /* Not yet completed step */
        .progress-steps .step-not-completed .step-dot {
            background-color: #fff;
            border-color: #e0e0e0;
        }
        
        /* Active step */
        .progress-steps .step-active .step-dot {
            background-color: #fff;
            border-color: var(--green-600);
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
        }
        
        .progress-steps .step-active .step-label {
            color: var(--green-600);
            font-weight: bold;
        }
        
        /* Completed step */
        .progress-steps .step-completed .step-dot {
            background-color: var(--green-600);
            border-color: var(--green-600);
        }
        
        .progress-steps .step-completed .step-label {
            color: var(--green-600);
        }
        
        .progress-steps .step-completed .step-dot::after {
            content: "✓";
            color: white;
            font-size: 14px;
            font-weight: bold;
        }

/**********************************/
/*        Testimony      
/**********************************/

p.testimonial {
    font-size: 16px;
    background-color: var(--yellow-50);
    padding: 12px;
    border-radius: 8px;
}
span.testimonial_author {
    display: block;
    font-weight: 200;
    margin-top: 4px;
}


/**********************************/
/*        Search      
/**********************************/


.search-container {
    position: relative;
    display: inline-block;
    width: 200px; /* Adjust as needed based on layout */
}

.search-container i.icon-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-600);
    font-size: 14px;
}

#search-input, .search-input {
    width: 100%;
    padding: 8px 30px 8px 30px; /* Padding for icons on both sides */
    border: 1px solid var(--keys-stroke);
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--keys-white);
    color: var(--keys-black);
    margin: 0px;
}

#search-input:focus, .search-input:focus {
    outline: none;
    border-color: var(--keys-interactive);
}

#clear-search, .clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 14px;
}

#clear-search i, .clear-search i {
    font-size: 14px;
}



/**********************************/
/*     Form Elements    
/**********************************/

/* Basic Label & Input Styles */
/*label {
    display: block;
    margin-bottom: 5px;
    color: var(--keys-primary-text);
    font-size: 14px;
    font-weight: 500;
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--keys-stroke);
    border-radius: 5px;
    background-color: var(--keys-white);
    color: var(--keys-black);
    box-sizing: border-box;
    font-size: 14px;
}

input::placeholder,
textarea::placeholder {
    color: var(--keys-placeholder);
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 5px;
}*/




/* Form Actions */
.form-actions {
    margin-top: 30px;
    text-align: right;
    padding: 0px 12px;
}

/**********************************/
/*          Forms       
/**********************************/


/* Form Layout */
.form-container {
/*    border-radius: 8px;*/
    overflow:hidden;
    margin: 12px 0px;
    width: 100%;
}

.form-section {
    border: 1px solid var(--keys-stroke);
    border-radius: 8px;
    background-color: var(--keys-white);
    margin-bottom: 42px;
    padding-bottom: 8px;
    transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out, margin-bottom 500ms ease-in-out;
}
.form-section:last-child {
    margin-bottom: 0px;
    }

.form-section.hidden {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.form-section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--keys-stroke);
    padding: 12px;
    border-radius: 0px;
}
.form-section-icon {
    font-size: 20px;
    color: var(--blue-600);
}
.course-option .form-section-icon{
    color: var(--green-600);
}

.header-toggle {
    margin-left: 16px;
}

.form-section-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.form-section-header-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}

/* Ensure the toggle in header has proper spacing */
.header-toggle .toggle-label {
    margin-left: 8px;
    font-weight: normal;
}

.form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.form-section-description {
    font-size: 13px;
    color: var(--gray-600);
    margin-top: 2px;
}


.form-section-footer {
    padding: 12px;
    font-size: 14px;
}

.form-section p{
    padding: 0px 12px;
}

/* Input Groups */
.input-group {
    margin-bottom: 16px;
}

.input-group.highlight {
    padding: 8px;
    background-color: var(--gray-0);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    margin: 0px 8px;
}
.input-group.highlight.highlight-offset{
    margin-top: 26px;
}

.input-group:last-child {
    margin-bottom: 0;
}

.input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 26px;
    padding: 0px 12px 0px 12px;
}

.input-row:last-child {
    margin-bottom: 0;
}

.input-row.hidden{
    display: none;
}
.input-row-header{
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    padding: 2px 4px;
    color: var(--gray-700);
    border-top: 1px solid var(--gray-200);
}

.input-column {
    flex: 0 1 auto;
    min-width: 0;
}

.input-column-btn-labels{
    padding-top: 26px;
    align-items: center;

}
.input-column-btn{
    padding-top: 8px;
    align-items: center;
}

.input-column-stretch {
    flex: 1;
    min-width: 250px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

/* Labels */
.input-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-weight: 300;
    color: var(--gray-800);
    font-size: 13px;
}
.input-label img{
    height: 20px;
}

.input-label .label-icon {
    font-size: 14px;
    line-height: 22px;
    color: var(--gray-600);
}

.label-required::after {
    content: "*";
    color: var(--raspberry-600);
    margin-left: 4px;
}

.label-optional {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: normal;
    margin-left: auto;
}

/* Input Styling */
.input-wrapper {
    position: relative;
}

.input-field {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 13px;
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    transition: all 0.2s ease;
    height: 36px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .input-field {
        font-size: 16px;
    }
}

textarea.input-field {
    min-height: 85px;
    }
textarea.input-field.medium{
    min-height: 200px;
    }
textarea.input-field.big{
    min-height: 350px;
    }
textarea.input-field.huge{
    min-height: 600px;
    }

/* Specific input width classes */
.input-field-xs {
    width: 80px;
}

.input-field-sm {
    width: 120px;
}

.input-field-md {
    width: 200px;
}
.input-field-fill{
    width: 100% !important;
    }
    .input-field-fill input{
        width: 100% !important;
    }


.input-field:focus {
    border-color: var(--cyan-600);
    box-shadow: 0 0 0 3px rgba(80, 130, 178, 0.1);
    outline: none;
}

.input-field.error {
    border-color: var(--red-500);
}



/* Input Description and Example */
.input-description {
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray-600);
}

.input-example {
    margin-top: 2px;
    font-size: 11px;
    color: var(--gray-500);
    font-style: italic;
}

/* Error Message */
.input-error {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    color: var(--red-600);
}

.input-error.visible {
    display: block;
}

/* Adjacent Inputs */
.adjacent-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
    width: fit-content;
}

.adjacent-inputs .input-field {
    width: 120px;
}

.adjacent-inputs .input-separator {
    color: var(--gray-600);
    font-weight: 500;
    padding: 0 4px;
}

/* Unit Input */
.unit-input {
    position: relative;
    width: fit-content;
}

.unit-input .input-field {
    padding-right: 36px;
    width: 100px;
}

.input-unit {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-600);
    font-size: 13px;
    pointer-events: none;
}

.unit-input-with-select {
    display: flex;
    align-items: stretch;
    width: fit-content;
}

.unit-input-with-select .input-field {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-unit-select {
    border: 1px solid #ccc;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0 8px;
    background-color: #f5f5f5;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.input-unit-select:focus {
    outline: none;
    border-color: #0066cc;
}

.common-value-select {
    width: 20px;
    border: 1px solid var(--gray-300);
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 0 8px;
    background-color: var(--gray-100);
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
}

.common-value-select:hover {
    background-color: var(--gray-200);
}

.common-value-select:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(80, 130, 178, 0.1);
}

.input_label_image{
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
}


.form-actions {

    margin-top: 20px;
    text-align: right;
}

/* Slider Radio Style */


.slider-radio {
    position: relative;
    display: flex;
    background: #eee;
    border-radius: 30px;
    height: 40px;
    width: 450px;
    margin: 0;
}

.slider-radio label {
    flex: 1;
    text-align: center;
    padding: 11px 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    font-weight: 500;
    font-size: 14px;
}

.slider-radio input[type="radio"] {
    display: none;
}

.slider-radio .slider-indicator {
    position: absolute;
    height: 32px;
    width: 50%;
    left: 4px;
    top: 4px;
    background: var(--blue-400);
    border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.slider-radio input[type="radio"]:checked + label {
    color: white;
}

.slider-radio input[type="radio"]:nth-of-type(1):checked ~ .slider {
    transform: translateX(0);
}

.slider-radio input[type="radio"]:nth-of-type(2):checked ~ .slider {
    transform: translateX(100%);
}

.slider-radio.selected-first .slider-indicator {
    left: 4px;
}

.slider-radio.selected-second .slider-indicator {
    left: calc(50% - 4px);
}


/* For smaller screens */
@media (max-width: 480px) {
    .slider-radio {
        max-width: 100%;
    }
}


/**********************************/
/*      Form Tabs
/**********************************/


.formTabs {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 32px;
}

.formTabs .formTab {
    background: none;
    border: none;
    color: var(--gray-600);
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding: 12px 24px;
}

.formTabs .formTab.active {
    border-bottom-color: var(--cyan-600);
    color: var(--gray-600);
    font-weight: 600;
}

.formTabs .formTab:not(.active):hover {
    border-bottom-color: var(--cyan-400);
    color: var(--cyan-600);
}


/**********************************/
/*       Button Core Styles     
/**********************************/

:root {
  /* Existing design tokens … */
  --btn-border-radius: 4px;
  --btn-disabled-opacity: 0.6;
}

/* Base button class */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-family: 'DM Sans';
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
  border-radius: var(--btn-border-radius);
  padding: 4px 8px;
  gap: 4px;
}

/* Selected state (can be applied as a modifier class) */
.btn.selected {
  /* Example: an inset border or other visual cue */
  box-shadow: inset 0 0 0 2px var(--keys-interactive);
}

/**********************************/
/*         Button Size Variants
/**********************************/

/* Note: For standard buttons, padding applies to all sides uniformly */
.btn-mini    { font-size: 10px; padding: 2px 4px; }
.btn-small   { font-size: 12px; padding: 2px 8px; }
.btn-medium  { font-size: 14px; padding: 4px 8px; }
.btn-large   { font-size: 20px; padding: 4px 24px; }
.btn-xlarge  { font-size: 24px; padding: 6px 28px; }

/**********************************/
/*       Button Type Variants   
/**********************************/

/* Primary, Secondary & Tertiary */
.btn-primary   {
    background-color: var(--cyan-600);
    color: var(--keys-white);
    border: 1px solid var(--cyan-600);
    }
    .btn-primary i.icon::before {
        color: var(--keys-white);
        }
    .btn-primary:hover   {
        background-color: var(--cyan-700);
        color: var(--keys-white);
        }
    .btn-primary:disabled   {
        background-color: var(--gray-400);
        color: var(--keys-white);
        cursor: default;
        border: 1px solid var(--gray-200);
        }


.btn-secondary {
  background-color: transparent;
  color: var(--cyan-600);
  border: 1px solid var(--cyan-600);
    }
    .btn-secondary i.icon::before {
        color: var(--cyan-600);
        }
    .btn-secondary:hover {
      border: 1px solid var(--cyan-700);
        }
        .btn-secondary i.icon::before {
            color: var(--cyan-700);
            }
    .btn-secondary:disabled   {
        background-color: var(--gray-50);
        color: var(--gray-400);
        cursor: default;
        border: 1px solid var(--gray-100);
        }
        .btn-secondary i.icon::before {
            color: var(--gray-400);
        }



.btn-tertiary  {
  background-color: transparent;
  color: var(--keys-interactive);
    }
    .btn-tertiary i.icon::before {
        color: var(--keys-interactive);
        }

/* Icon Button: intended for single-icon use */
/* Uses a circular shape; size adjustments can come from combining with size classes */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--gray-200);
  color: var(--keys-black);
  /* Reset padding – size classes or explicit width/height should be used */
  padding: 0;
}

/* Optional: preset dimensions for icon buttons by size */
.btn-icon.btn-mini    { width: 20px; height: 20px; font-size: 10px; }
.btn-icon.btn-small   { width: 24px; height: 24px; font-size: 12px; }
.btn-icon.btn-medium  { width: 28px; height: 28px; font-size: 14px; }
.btn-icon.btn-large   { width: 36px; height: 36px; font-size: 20px; }
.btn-icon.btn-xlarge  { width: 44px; height: 44px; font-size: 24px; }

.btn-icon.toggle-icon{
    background-color: inherit;
    border: none;
}

/* Checkbox Button: acts like a toggle with a visual indicator */
.btn-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--gray-300);
  color: var(--keys-black);
  /* Padding set via size classes */
}

/* Change appearance when selected */
.btn-checkbox.selected {
  background-color: var(--keys-interactive);
  color: var(--keys-white);
}

/* Indicator (using a pseudo-element) */
.btn-checkbox::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--keys-stroke);
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  background-color: transparent;
}
.btn-checkbox.selected::after {
  background-color: var(--keys-white);
}

/* Square Button: force a square shape using aspect-ratio */
.btn-square {
  /* For non-icon square buttons, size classes should set width/height via padding or explicit dimensions */
  aspect-ratio: 1 / 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/**********************************/
/*         Button Groups
/**********************************/

/* Grouped buttons share a common container */
.btn-group {
  display: inline-flex;
}

/* Reset individual button border-radius & spacing */
.btn-group .btn {
  border-radius: 0;
  margin: 0;
  border-right-width: 0;
}

/* Apply rounded corners to the first and last buttons */
.btn-group .btn:first-child {
  border-top-left-radius: var(--btn-border-radius);
  border-bottom-left-radius: var(--btn-border-radius);
}
.btn-group .btn:last-child {
  border-top-right-radius: var(--btn-border-radius);
  border-bottom-right-radius: var(--btn-border-radius);
  border-right-width: 1px; /* restore right border if needed */
}

/**********************************/
/*         Action Buttons
/**********************************/

.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Change from center to stretch */
    gap: 10px;
    padding: 20px 0px;
    flex: 1;
    width: 100%; /* This makes the container fill its parent's width */
    }
    .action-buttons-header{
        display: flex;
        flex-direction: column;
        gap: 8px;
        }
    .action-buttons h2{
        display: flex;
        font-size: 15px;
        color: var(--gray-500);
        text-transform: uppercase;
        font-weight: 500;
        margin-bottom: 0px;
        line-height: 18px;
        gap: 8px;
        }
    .action-buttons p{
        margin: 0px;
        font-weight: 300;
        color: var(--gray-700);
        font-size: 14px;
        padding: 0px 20px;
        }
    .action-button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        background-color: var(--keys-white);
        padding: 12px 20px;
        min-height: 50px;
        text-decoration: none;
        cursor: pointer;
        font-size: 28px;
        border: none;
        width: 100%;
        border-bottom: 1px solid var(--keys-stroke);
        }
        .action-button.disabled{
            border-color: var(--gray-200);
            background-color: var(--gray-50);
            cursor: default;
            }
            .action-button.disabled .action-button-label{
                color: var(--gray-500);
                }
            .action-button.disabled .action-button-text{
                color: var(--gray-400);
                }

        .action-button:hover {
            background-color: var(--gray-50);
            }

        .action-button .icon:before{
            color: var(--cyan-600);
            }

        .action-button-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
            text-align: left;
            }

            .action-button-label {
                color: var(--cyan-700);
                font-size: 18px;
                font-weight: 500;
                }

            .action-button-text {
                color: var(--gray-800);
                font-size: 16px;
                font-weight: 400;
                }
        .action-button-content-row{
            flex-direction: row;
            }

    .action-button:first-child {
        border-radius: 8px 8px 0px 0px;
    }
    .action-button:last-child {
        border-radius: 0px 0px 8px 8px;
        border-bottom: none;
    }
/**********************************/
/*         Attendee Buttons
/**********************************/

.attendee-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 0px;
    flex: 1;
    }
    .attendee-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--keys-white);
        padding: 12px 20px;
        min-height: 50px;
        text-decoration: none;
        cursor: pointer;
        font-size: 28px;
        border-bottom: 1px solid var(--keys-stroke);
        }
        .button-header{
            display: flex;
            align-items: center;
            gap: 16px;
            flex-direction: row;
            width: 100%; /* Make the header take full width */
            justify-content: space-between; /* Push items to the edges */
        }
        .button-header .icon-user-1 {
            flex-shrink: 0; /* Prevent icon from shrinking */
        }
        .button-header .icon-chevron-right {
            flex-shrink: 0;
            margin-left: auto;
            font-size: 17px;
        }
        .button-body{
        }
        .attendee-button:hover {
            background-color: var(--gray-50);
            }
        .attendee-button .icon{
            font-size: 28px;
            }
        .attendee-button .icon:before{
            color: var(--cyan-600);
            }
        .attendee-button-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1; /* This will make it take all available space */
            width: 100%; /* Ensure it takes the full width */
            }
            .attendee-button-content-header {
                display: flex;
                gap: 12px;
                align-items: baseline;
                flex-wrap: wrap;
            }
            .attendee-button-label {
                color: var(--cyan-700);
                font-size: 18px;
                font-weight: 500;
                }
            .attendee-button-text {
                color: var(--gray-800);
                font-size: 16px;
                font-weight: 400;
                text-transform: capitalize;
                }
            .attendee-button-intro {
                font-size: 14px;
                color: var(--gray-700);
                font-weight: 300;
                }

    .attendee-button:first-child {
        border-radius: 8px 8px 0px 0px;
    }
    .attendee-button:last-child {
        border-radius: 0px 0px 8px 8px;
        border-bottom: none;
    }


/**********************************/
/*         Tab Navigation
/**********************************/

.tab-nav {
    list-style: none;
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--keys-stroke);
    border-top: 1px solid var(--gray-75);
    background-color: var(--gray-25);
    margin: 0 -40px;
    padding: 0 20px;
    scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tab-link {
  flex: 1 0 auto; /* Allow tabs to shrink/grow */
  padding: 12px 16px;
  text-align: center;
  font-size: 14px; /* Changed from 0.875rem */
  color: var(--keys-primary-text);
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent; /* Default underline for separation */
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;


}

.tab-link:hover:not(.disabled) {
  background-color: var(--gray-50);
  opacity: 0.9;
}

.tab-link:active:not(.disabled) {
  transform: translateY(1px);
}

/* Active state: visually indicate the selected tab */
.tab-link.active {
  font-weight: bold;
  color: var(--keys-interactive);
  background-color: var(--keys-white);
  border-bottom-color: var(--keys-interactive);
}

/* Focus state for accessibility */
.tab-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--keys-interactive);
}

/* Disabled state */
.tab-link.disabled,
.tab-link[disabled] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
}


@media (min-width: 768px) {
    /* Turn the outer container into a two-column flex */
    .facilitator_page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    }

    /* Make the tab list a vertical nav column */
    .facilitator_page .tab-nav {
    flex-direction: column;
    min-width: 200px;                 /* side‐nav width */
    border-bottom: none;          /* remove bottom border */
    border-right: 1px solid var(--keys-stroke);
    margin: 0;
    margin-right: 12px;
    padding: 20px;
    background-color: var(--keys-white);
    align-self: flex-start;
    height: auto;
    }

    /* Adjust each tab link for side-nav style */
    .facilitator_page .tab-nav .tab-link {
    text-align: left;
    padding: 12px 16px;
    border-bottom: none;          /* remove underline */
    border-left: 3px solid transparent;
    margin-bottom: 8px;
    max-width: none;
    }

    .facilitator_page .tab-nav .tab-link.active {
    font-weight: 600;
    color: var(--keys-interactive);
    background-color: var(--gray-50);
    border-left-color: var(--keys-interactive);
    }

    .facilitator_page .tab-nav .tab-link:hover {
    background-color: var(--gray-50);
    }

    .facilitator_page .tab-nav .menuDivider{
        display: block;
    }
    .facilitator_page .tab-nav .menuSectionHeader{
        display: block;
    }


    /* Push the main content over next to the nav */
    .facilitator_page .pageContainer {
    flex: 1;
    margin: 0;
    padding: 20px;
    flex-direction: row;
    width: 100%;
    }
    .tab-wrapper{
        width: 100%;
    }
}


/**********************************/
/*          Menus       
/**********************************/

/* Dropdown Menu Button */
.dropdown-menu-button {
    position: relative;
    background-color: var(--keys-interactive);
    color: var(--keys-white);
    padding: 10px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dropdown-menu-button:hover {
    background-color: #085e91;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--keys-white);
    border: 1px solid var(--keys-stroke);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
    width: max-content;
    max-width: 300px;
    }
    .menu-right{
        left: 0;
        }

.dropdown-menu.show {
    display: block;
}

.dropdown-menu li {
    list-style: none;
    padding: 10px 20px;
    cursor: pointer;
}

.dropdown-menu li:hover {
    background-color: var(--gray-50);
}



/**********************************/
/*         Popover Styles
/**********************************/

.popover-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.popover {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--keys-white);
    padding: 20px;
    border: 1px solid var(--keys-stroke);
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.popover-header {
    margin-bottom: 15px;
}

.popover-header h3 {
    margin: 0;
    font-size: 16px; /* Changed from 1rem */
    font-weight: 500;
    color: var(--gray-700);
}

.popover-body {
    margin-bottom: 15px;
}

.popover-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}


/**********************************/
/*         Person Card
/**********************************/

    .person-card {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: 50px;
        text-decoration: none;
        border-top: 1px solid var(--gray-100);
        padding: 40px 12px 20px 12px;
        }

        .person-card-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
            font-family: "DM Sans", sans-serif;
            }
            .person-card-content-header {
                display: flex;
                align-items: center;
                gap: 12px;
                flex-wrap: wrap;
                }
                .person-card-name {
                    color: var(--gray-700);
                    font-size: 25px;
                    font-weight: 500;
                }

            .person-card-blurb1{
                color: var(--gray-800);
                font-size: 14px;
                font-weight: 400;
                text-transform: capitalize;
                display: flex;
                gap: 8px;
            }

            .person-card-blurb2 {
                color: var(--gray-500);
                font-size: 14px;
                font-weight: 400;
                text-transform: capitalize;
                display: flex;
                gap: 8px;
                }
            .person-card-links {
                display: flex;
                gap: 16px;
                }
                .person-card-link{
                    display: flex;
                    font-size: 16px;
                    font-weight: 400;
                    gap: 8px;
                    align-items: center;
                    }
                    .person-card-link img{
                        width: 16px;
                        height: 16px;
                        }
        .person-card-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            }


        .badge-light {
            background-color: #f8f9fa;
            color: #333;
            margin-left: 5px;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.8em;
            }


/* Responsive Styles */
@media (max-width: 500px) {
    .person-card {
        flex-direction: column;
    }
}


/**********************************/
/*      Faciliatator/Admin Pages Styles
/**********************************/




/* Grid and Card Layouts */
.events-grid, .cohorts-grid, .users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 12px;
}

/* Responsive breakpoints for card grids */
@media (max-width: 480px) {
    .events-grid, .cohorts-grid, .users-grid {
        grid-template-columns: 1fr;
        margin: 6px;
        gap: 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .events-grid, .cohorts-grid, .users-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
    }
}

@media (min-width: 769px) {
    .events-grid, .cohorts-grid, .users-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        max-width: 1200px;
    }
}

.card {
    background: var(--gray-0);
    border-radius: 8px;
    padding: 0;
    border: 1px solid var(--gray-75);
    transition: box-shadow 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 1px 6px 0px rgba(48, 59, 76, 0.10);
}

.card:hover {
    box-shadow: 0px 4px 12px 0px rgba(48, 59, 76, 0.30);
}

/* ─── Calendar Filter ─────────────────────────────────────────── */
.calendar-wrapper {
    border: 1px solid var(--gray-100);
    background: var(--gray-25);
    border-radius: 8px;
    margin-bottom: 20px;
    margin-left: 12px;
    margin-right: 12px;
    padding: 12px;
}
.calendar-wrapper.collapsed .calendar-container { display: none; }

.calendar-toggle {
    background: none;
    border: none;
    font-size: 14px;
    gap: 6px;
    color: var(--keys-interactive);
    cursor: pointer;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0 12px; 
}

button#cal-next, button#cal-prev {
    border: 1px solid var(--gray-800);
    color: var(--cyan-400);
    background-color: var(--gray-0);
    border-radius: 4px;
    cursor: pointer;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 24px repeat(6, auto); /* Added: 24px for header, auto for date rows */
    gap: 4px;
    font-size: 11px;
}

.cal-row { display: contents; } /* Keep grid flow */

.cal-day-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
}

.cal-cell {
    min-height: 70px;
    background: var(--keys-white);
    border: 1px solid var(--gray-100);
    border-radius: 4px;
    padding: 2px 2px 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.cal-cell.other-month  { opacity: 0.4; }
.cal-cell.selected      { border-color: var(--cyan-600); box-shadow: 0 0 0 2px var(--cyan-200); }
.cal-cell.today        { border: 2px solid var(--green-500); }

.cal-date   { font-weight: 600; display: block; margin-bottom: 2px; }

.cal-event {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    color: var(--gray-700);
}

.cal-more  { font-size: 10px; color: var(--gray-500); }

.card .banner-image {
    width: 100%;
    padding-top: 40%;
    background-size: cover;
    background-position: center;
    background-color: var(--gray-25);
    border-bottom: 1px solid var(--gray-100);
    background-image: url(/static/images/default_banner.png);
    flex-shrink: 0;
}

.card .card-content {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.card .card-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.card .card-header h3 a {
    text-decoration: none;
    color: var(--text-default);
}

.card .card-header h3 a:hover {
    color: var(--cyan-600);
}

.card .card-info {
    flex: 1;
}

.card .card-info p {
    margin: 6px 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--gray-700);
}

.card .card-info i {
    margin-right: 8px;
    color: var(--gray-500);
    width: 16px;
    flex-shrink: 0;
}

.card .card-roles {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-100);
}

.card .card-roles p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--gray-600);
}

/* Status pills */
.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 8px;
}

.pill.upcoming-event {
    background: var(--green-100);
    color: var(--green-700);
}

.pill.ongoing-event {
    background: var(--cyan-100);
    color: var(--cyan-700);
}

.pill.past-event {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Past event cards styling */
.card.status-Past {
    background-color: var(--gray-50);
}

/* Card menu positioning */
.card .card-menu {
    position: relative;
}

.card .card-menu .dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
}

.event-card, .cohort-card, .user-card {
    background: var(--cream-20);
    border-radius: 12px;
    padding: 0;
    border: 1px solid var(--gray-75);
    transition: box-shadow 0.2s ease;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
}

/* User cards don't have banners, so they need padding */
.user-card {
    padding: 12px;
}

.event-card:hover, .cohort-card:hover, .user-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Make cohort and event cards clickable */
.cohort-card[data-href],
.event-card[data-href] {
    cursor: pointer;
}

.event-card.status-Past {
    background-color: var(--gray-25);
}

/* Card Banner Styles */
.card-banner {
    position: relative;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--gray-100);
}

.card-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-banner-overlay .card-header {
    margin-bottom: 0;
}

.card-banner-overlay .card-header h3 {
    color: var(--keys-white);
}

.card-banner-overlay .card-header h3 a {
    color: var(--keys-white);
    text-decoration: none;
}

.card-banner-overlay .card-header h3 a:hover {
    color: var(--cyan-100);
}

.card-banner-overlay .cohort-name {
    color: var(--gray-200);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.card-banner-overlay .pill {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--gray-800);
}

/* Card content (non-banner) needs padding */
.card-meta, .card-details {
    padding: 12px;
}

.card-meta {
    padding-top: 16px;
}

/* Responsive banner styles */
@media (max-width: 768px) {
    .card-banner {
        height: 100px;
    }
    
    .card-banner-overlay {
        padding: 8px;
    }
    
    .card-banner-overlay .card-header h3 {
        font-size: 1.1rem;
    }
    
    .card-meta, .card-details {
        padding: 8px;
    }
    
    .card-meta {
        padding-top: 12px;
    }
}

/* Card Components */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.card-header h3 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

.card-header h3 a {
    text-decoration: none;
    color: var(--keys-interactive);
    font-weight: 400;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-label {
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 500;
}

.event-card .metric-value,
.cohort-card .metric-value {
    font-weight: 700;
    color: var(--text-default);
}

.metric-ratio .numerator {
    margin-right: 2px;
}

.metric-ratio .slash {
    margin: 0 2px;
    color: var(--gray-500);
    font-weight: 400;
}

.metric-ratio .denominator {
    font-weight: 500;
    color: var(--gray-500);
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.progress-bar-outer {
    flex-grow: 1;
    height: 8px;
    background: var(--gray-100);
    border-radius: 50px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    background: var(--cyan-600);
    width: 0%;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.additional-details {
    margin-top: 16px;
}

.card-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-default);
    margin-bottom: 8px;
}

.card-detail-item .label {
    color: var(--gray-500);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 8px;
}

.card-detail-item .value {
    flex-grow: 1;
    text-align: right;
    white-space: nowrap;
}

.roles-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
}

.roles-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-default);
}

.roles-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.roles-section li {
    font-size: 0.9rem;
    color: var(--text-default);
    margin-bottom: 6px;
}

.roles-section p {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin: 0;
}

.cohort-name {
    font-size: 12px;
    color: var(--gray-700);
}

/* Card Menu */
.card-menu {
    position: relative;
}

.card-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 6px;
    overflow: hidden;
}

.dropdown-items {
    display: flex;
    padding: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.dropdown-items a {
    display: flex;
    padding: 6px 8px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    text-decoration: none;
    color: var(--blue-900);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: background-color 0.3s;
}

.dropdown-items a:hover {
    background-color: var(--gray-50);
    border-radius: 8px;
}

/* Filter and Sort Controls */
.filter-sort-controls {
    display: flex;
    gap: 20px;
}

.filter-sort-controls select {
    border: 1px solid var(--gray-100);
    padding: 8px 4px;
    border-radius: 6px;
    color: var(--gray-600);
}

/* Tab Navigation */
.tab-nav {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    border-bottom: 1px solid var(--gray-200);
}

.tab-nav li {
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.tab-nav li.active {
    color: var(--keys-interactive);
    border-bottom: 2px solid var(--keys-interactive);
}

.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: block;
}




/* Attendee Cards Layout */
.attendees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px 0;
}

.attendee-card {
    background: var(--gray-0);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    transition: box-shadow 0.2s ease;
}

.attendee-card:hover {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.attendee-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.attendee-card-header .profile-avatar {
    flex-shrink: 0;
}

.attendee-card-header .user-info {
    flex: 1;
    min-width: 0;
}

.attendee-card-header .user-info .name {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendee-card-header .user-info .name a {
    color: var(--text-default);
    text-decoration: none;
}

.attendee-card-header .user-info .name a:hover {
    color: var(--cyan-600);
}

.attendee-card-header .user-type {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.attendee-card-header .user-type i {
    font-size: 14px;
    color: var(--gray-500);
}

.attendee-card-body {
    margin-bottom: 12px;
}

.attendee-card-body .organization {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendee-card-body .status-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    gap: 8px;
}

.attendee-card-body .last-seen {
    flex: 1;
}

.attendee-card-body .rsvp-status {
    flex-shrink: 0;
    font-weight: 500;
}

.attendee-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
    font-size: 12px;
}

.attendee-card-metrics .metric {
    display: flex;
    align-items: center;
    gap: 4px;
}

.attendee-card-metrics .metric i {
    font-size: 14px;
}

.attendee-card-metrics .metric i.icon-checkmark-circle {
    color: var(--green-600);
}

.attendee-card-metrics .metric i.icon-warning {
    color: var(--yellow-600);
}

.attendee-card-metrics .metric i.icon-error {
    color: var(--red-600);
}

.attendee-card-metrics .metric i.icon-clock {
    color: var(--gray-500);
}

.attendee-card-metrics .metric-label {
    color: var(--gray-500);
}

.attendee-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .attendees-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .attendees-grid {
        grid-template-columns: repeat(auto, 1fr);
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .attendees-grid {
        grid-template-columns: repeat(auto, 1fr);
    }
}

@media (min-width: 1441px) {
    .attendees-grid {
        grid-template-columns: repeat(auto, 1fr);
    }
}


/**********************************/
/*      Flash Messages
/**********************************/

.flashes {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    max-width: 600px;
    width: calc(100% - 40px);
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none; /* Allow clicks through container */
}

.flashes li {
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 12px;
    background-color: var(--gray-0);
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: 4px solid var(--gray-400);
    pointer-events: auto; /* Re-enable clicks on flash items */
    animation: flashSlideIn 0.3s ease-out;
    font-size: 14px;
    font-weight: 500;
}

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

/* Flash message content styling */
.flash-message {
    flex-grow: 1;
    margin-right: 12px;
}

/* Flash message controls */
.flash-controls {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.countdown-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dismiss-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background: none;
    color: var(--gray-500);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.dismiss-button:hover {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

/* Countdown animation */
.flash-countdown-circle-progress {
    animation: flash-countdown 12s linear forwards;
}

@keyframes flash-countdown {
    to {
        stroke-dashoffset: 62.8;
    }
}

/* Category-specific styling */
.flashes .success {
    background-color: #f0f9ff;
    border-color: #10b981;
    border-left-color: #10b981;
    color: #065f46;
}

.flashes .success .countdown-svg circle:last-child {
    stroke: #10b981;
}

.flashes .warning {
    background-color: #fffbeb;
    border-color: #f59e0b;
    border-left-color: #f59e0b;
    color: #92400e;
}

.flashes .warning .countdown-svg circle:last-child {
    stroke: #f59e0b;
}

.flashes .danger,
.flashes .error {
    background-color: #fef2f2;
    border-color: #ef4444;
    border-left-color: #ef4444;
    color: #991b1b;
}

.flashes .danger .countdown-svg circle:last-child,
.flashes .error .countdown-svg circle:last-child {
    stroke: #ef4444;
}

.flashes .info {
    background-color: #eff6ff;
    border-color: #3b82f6;
    border-left-color: #3b82f6;
    color: #1e40af;
}

.flashes .info .countdown-svg circle:last-child {
    stroke: #3b82f6;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .flashes {
        top: 10px;
        width: calc(100% - 20px);
        max-width: none;
    }
    
    .flashes li {
        padding: 14px 16px;
        margin-bottom: 8px;
        font-size: 13px;
    }
}


/**********************************/
/*      Root Variables  
/**********************************/
:root {
    --keys-white: #FFFFFF;
    --keys-stroke: #DFE4EA;
    --keys-disabled: #D1D8E1;
    --keys-placeholder: #9CABBF;
    --keys-primary-text: #637381;
    --keys-black: #111928;
    --keys-interactive: #0B76B7;
    --gray-0: #FFFFFF;
    --gray-25: #F9FAFB;
    --gray-50: #F3F4F6;
    --gray-75: #E5E7EB;
    --gray-100: #DEE2E6;
    --gray-200: #CED4DA;
    --gray-300: #B6BFC8;
    --gray-400: #A8AEB8;
    --gray-500: #8E96A4;
    --gray-600: #6B7280;
    --gray-700: #4B5563;
    --gray-800: #374151;
    --gray-900: #1F2A37;
    --gray-1000: #000000;

    --slate-25: #F6F7F9;
    --slate-50: #EDEFF2;
    --slate-75: #E4E7EC;
    --slate-100: #D5D9E2;
    --slate-200: #CCD2DB;
    --slate-300: #BDC4D1;
    --slate-400: #A5AEC0;
    --slate-500: #8793AB;
    --slate-600: #6C7B98;
    --slate-700: #56637B;
    --slate-800: #414B5D;
    --slate-900: #2E3542;

    --cream-10: #FDFDFC;
    --cream-15: #FBFAF9;
    --cream-20: #F9F8F6;
    --cream-25: #F7F5F3;
    --cream-30: #F5F2F0;
    --red-50: #FEF3F3;
    --red-75: #FEEBEB;
    --red-100: #FDD8D8;
    --red-200: #FBC0C0;
    --red-300: #F89090;
    --red-400: #F77979;
    --red-500: #F56060;
    --red-600: #E10E0E;
    --orange-50: #FFF0E9;
    --orange-75: #FDE5D8;
    --orange-100: #FDE5D8;
    --orange-200: #F9C1A4;
    --orange-300: #F7A77D;
    --orange-400: #F59460;
    --orange-500: #F27430;
    --orange-600: #F26E27;
    --orange-700: #E1580E;
    --yellow-50: #FFFBEB;
    --yellow-75: #FEF7DC;
    --yellow-100: #FEF3C7;
    --yellow-200: #FEEDAA;
    --yellow-300: #FDE68A;
    --yellow-400: #FCD34D;
    --yellow-500: #FBBF24;
    --yellow-600: #F59E0B;
    --yellow-700: #D97706;
    --green-50: #DAF8E6;
    --green-75: #C2F3D6;
    --green-100: #ACEFC8;
    --green-200: #82E6AC;
    --green-300: #57DE8F;
    --green-400: #2CD673;
    --green-500: #27C468;
    --green-600: #22AD5C;
    --green-700: #1A8245;
    --teal-50: #D7F9F8;
    --teal-75: #AFF3F1;
    --teal-100: #AFF3F1;
    --teal-200: #87EDE9;
    --teal-400: #20D9D2;
    --teal-600: #02AAA4;
    --teal-700: #06A09B;
    --cyan-50: #E2F6FE;
    --cyan-75: #D0F0FD;
    --cyan-100: #98DCF6;
    --cyan-200: #77D1F3;
    --cyan-400: #18BFFF;
    --cyan-600: #01A9DB;
    --cyan-700: #0B76B7;
    --blue-50: #E1E8FF;
    --blue-75: #C3CEF6;
    --blue-100: #ADBCF2;
    --blue-200: #8099EC;
    --blue-400: #5475E5;
    --blue-600: #2D68F8;
    --blue-700: #1C3FB7;
    --purple-50: #F5F3FF;
    --purple-75: #EDE9FE;
    --purple-100: #DDD6FE;
    --purple-200: #C4B5FD;
    --purple-400: #A78BFA;
    --purple-600: #8646F4;
    --purple-700: #6D28D9;
    --pink-50: #FCF1FE;
    --pink-75: #F9E6FE;
    --pink-100: #F6D8FE;
    --pink-200: #EAA7FC;
    --pink-400: #DF76FA;
    --pink-600: #D345F8;
    --pink-700: #C814F6;
    --shadow: 0px 4px 4px 0px rgba(99,115,129,0);
}

/**********************************/
/*      Authentication Cards     */
/**********************************/

.auth-card {
    background-color: var(--keys-white);
    border-radius: 12px;
    padding: 40px;
    margin: 40px auto;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-75);
    transition: box-shadow 0.2s ease;
}

@media (max-width: 480px) {
    .auth-card {
        margin: 20px auto;
        padding: 24px;
        border-radius: 8px;
    }
}