/**
 * BARBRI Checkout/Storefront Styles
 *
 * Public-facing storefront for professional development courses.
 * Shares design tokens with pe-b2b-prototype but has distinct styling.
 *
 * FONTS: Bitter (headings), Nunito (body) - NO EXCEPTIONS
 * SPACING: 8px grid (8, 16, 24, 32, 40, 48, 56, 64)
 */

@import url('/css/variables.css');

/* ===========================================
   RESET & BASE
   =========================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: white;
}

/* Force all form elements to inherit Nunito */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Hide native search input clear button (we use custom ones) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
}

h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5 {
    font-size: var(--font-size-md);
}

h6 {
    font-size: var(--font-size-base);
}

/* Heading utility classes - apply visual sizing independent of semantic level */
.h1 { font-size: var(--font-size-3xl); }
.h2 { font-size: var(--font-size-2xl); }
.h3 { font-size: var(--font-size-xl); }
.h4 { font-size: var(--font-size-lg); }
.h5 { font-size: var(--font-size-md); }
.h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--space-3);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-colors);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ===========================================
   LAYOUT
   =========================================== */

.container {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-narrow {
    max-width: var(--content-max-width-narrow);
}

.container-wide {
    max-width: var(--content-max-width-wide);
}

/* ===========================================
   BACKGROUND UTILITIES
   Body is white by default. Use these classes
   to add grey backgrounds to sections/panels.
   =========================================== */

.bg-subtle {
    background-color: var(--color-bg-page);
}

.bg-white {
    background-color: white;
}

/* ===========================================
   GLOBAL HEADER
   =========================================== */

.global-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-light);
    height: 64px;
}

.global-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1440px;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-logo img {
    height: 20px;
    width: auto;
}

/* Global Navigation */
.global-nav {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: var(--space-4);
}

.global-nav-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-nav-item {
    position: relative;
}

.global-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3);
    height: 64px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

.global-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-3);
    right: var(--space-3);
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.global-nav-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.global-nav-link:hover::after {
    transform: scaleX(1);
}

.global-nav-link .nav-arrow {
    font-size: 20px;
}

/* Mega Menu */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 560px;
    background-color: var(--color-bg-card);
    border-radius: 0 16px 0 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: var(--z-dropdown);
}

/* Prevent right-side menus from going off screen */
.global-nav-item:nth-last-child(-n+2).has-mega-menu .mega-menu {
    left: auto;
    right: 0;
}

.global-nav-item.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

.mega-menu-inner {
    display: flex;
    gap: var(--space-5);
}

.mega-menu-column {
    min-width: 170px;
}

.mega-menu-heading {
    font-family: var(--font-family-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

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

.mega-menu-links li {
    margin-bottom: 0;
}

.mega-menu-links a {
    display: block;
    padding: 6px 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mega-menu-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Header Actions */
.global-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
}

.header-action-btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.header-action-btn .material-symbols-outlined {
    font-size: 22px;
}

.cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    background-color: var(--color-text-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login link with circle icon */
.header-login-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-all);
}

.header-login-link:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.header-login-link .material-symbols-outlined {
    font-size: 22px;
}

/* ===========================================
   PRODUCT SUBHEADER (Sticky with main nav)
   =========================================== */

.product-subheader {
    position: sticky;
    top: 64px; /* Below global header */
    z-index: calc(var(--z-sticky) - 1);
    background-color: var(--color-bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: var(--space-1) 0;
}

.product-subheader .container {
    height: 100%;
    max-width: 1440px;
}

.product-nav {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

.product-nav-title {
    flex: 1;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-light);
    color: var(--color-text-primary);
    text-decoration: none;
}

.product-nav-title:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.product-nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-nav-item {
    position: relative;
}

.product-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 48px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 0 var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
}

.product-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-3);
    right: var(--space-3);
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.product-nav-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.product-nav-link:hover::after {
    transform: scaleX(1);
}

.product-nav-link .nav-arrow {
    font-size: 18px;
    color: var(--color-text-primary);
}

/* Highlighted nav link (e.g., Passes) */
.product-nav-link-highlight {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.product-nav-link-highlight:hover {
    color: var(--color-primary-dark);
}

/* Product Dropdown */
.product-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-bg-card);
    border-radius: 0 16px 0 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: var(--z-dropdown);
    white-space: nowrap;
}

.product-nav-item.has-dropdown:hover .product-dropdown {
    opacity: 1;
    visibility: visible;
}

.product-dropdown-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-dropdown-links a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.product-dropdown-links a:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

/* Right-align dropdown for last nav item to prevent overflow */
.product-nav-item.has-dropdown:last-child .product-dropdown {
    left: auto;
    right: 0;
}

/* ===========================================
   BREADCRUMB
   =========================================== */

.breadcrumb {
    background-color: transparent;
    padding: var(--space-6) 0; /* 48px top and bottom */
}

/* Standard page padding - 48px top and bottom */
main {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

/* When breadcrumb exists, it provides the top spacing */
.breadcrumb + main {
    padding-top: 0;
}

/* Pages with in-hero breadcrumbs don't need main padding-top */
main.pricing-page,
main.directory-page,
main.landing-page {
    padding-top: 0;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    color: var(--color-text-tertiary);
}

.breadcrumb-item a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb-item-current span {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* ===========================================
   EXPANDING SEARCH
   =========================================== */

.expanding-search {
    position: relative;
    display: flex;
    align-items: center;
}

.expanding-search .search-toggle {
    z-index: 2;
}

.search-input-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 0 var(--space-2) 0 var(--space-3);
    width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: var(--z-dropdown);
}

.expanding-search.is-open .search-toggle {
    opacity: 0;
    visibility: hidden;
}

.expanding-search.is-open .search-input-container {
    width: 640px;
    opacity: 1;
    visibility: visible;
}

.search-input-container .search-icon {
    color: var(--color-text-tertiary);
    font-size: 20px;
    flex-shrink: 0;
}

.search-input-container input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    background: transparent;
    padding: var(--space-2) var(--space-2);
    min-width: 0;
}

.search-input-container input::placeholder {
    color: var(--color-text-tertiary);
}

.search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition: var(--transition-all);
}

.search-close:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 640px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--color-bg-card);
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: var(--z-dropdown);
}

.expanding-search.is-open.has-results .search-results-dropdown {
    display: block;
}

.search-results-section {
    padding: var(--space-2) 0;
}

.search-results-divider {
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-bg-hover);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.15s ease;
}

.search-result-item:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

.search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-icon .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-tertiary);
}

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

.search-result-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.search-no-results {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
}

.search-loading,
.search-empty {
    padding: var(--space-4) var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.search-loading {
    color: var(--color-primary);
}

/* ===========================================
   BUTTONS
   =========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    padding: var(--btn-padding-y) var(--btn-padding-x);
}

.btn .material-symbols-outlined {
    font-size: 18px;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background-color: #001722;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: #1a2e3b;
    color: white;
}

/* Disabled button states */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--color-border-default);
    border-color: var(--color-border-default);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-dark);
}

.btn-secondary:hover {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-text-primary);
}

.btn-ghost:hover {
    background-color: var(--color-bg-hover);
}

.btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
}

.btn-md {
    font-size: var(--font-size-base);
    padding: var(--btn-padding-y) var(--btn-padding-x);
}

.btn-lg {
    font-size: var(--font-size-md);
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
}

/* ===========================================
   HERO SECTION
   =========================================== */

.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-inverse);
    padding: var(--space-12) 0;
    text-align: center;
}

.hero h1 {
    color: var(--color-text-inverse);
    margin-bottom: var(--space-3);
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.9;
    margin-bottom: var(--space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-ctas {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Persona buttons on hero */
.persona-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.persona-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: var(--transition-all);
    min-width: 160px;
}

.persona-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
    text-decoration: none;
    transform: translateY(-2px);
}

.persona-btn-icon {
    font-size: 32px;
}

.persona-btn-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
}

/* ===========================================
   PASS BANNER (Upsell)
   =========================================== */

.pass-banner {
    background-color: var(--color-info-light);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.pass-banner-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pass-banner-icon {
    font-size: 28px;
    color: var(--color-info);
}

.pass-banner-text h4 {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-1);
}

.pass-banner-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ===========================================
   SECTION STYLING
   =========================================== */

.section {
    padding: var(--space-9) 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.section-title {
    font-size: var(--font-size-2xl);
}

.section-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ===========================================
   COURSE CARDS
   =========================================== */

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.course-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-all);
}

.course-card:hover {
    border-color: var(--color-border-dark);
    box-shadow: var(--shadow-md);
}

.course-card-image {
    aspect-ratio: 16 / 9;
    background-color: var(--color-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.course-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card-image .placeholder-icon {
    font-size: 48px;
    color: var(--color-text-tertiary);
}

.course-card-body {
    padding: var(--space-4);
}

.course-card-badges {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.course-card-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-tight);
}

.course-card-title a {
    color: var(--color-text-primary);
}

.course-card-title a:hover {
    color: var(--color-primary);
}

.course-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.course-card-price {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.course-card-price .original-price {
    text-decoration: line-through;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    margin-right: var(--space-1);
}

.course-card-pass-note {
    font-size: var(--font-size-xs);
    color: var(--color-success-dark);
    background-color: var(--color-success-light);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

/* ===========================================
   BADGES / CHIPS
   =========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-cle {
    background-color: #E8F4FD;
    color: #1565C0;
}

.badge-cpe {
    background-color: #FFF3E0;
    color: #E65100;
}

.badge-skills {
    background-color: #F3E5F5;
    color: #7B1FA2;
}

.badge-live {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

.badge-on-demand {
    background-color: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

/* ===========================================
   PRACTICE AREA PILLS
   =========================================== */

.practice-area-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.practice-area-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-all);
}

.practice-area-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}

/* ===========================================
   TRUST SIGNALS
   =========================================== */

.trust-section {
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    text-align: center;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.trust-item-icon {
    font-size: 32px;
    color: var(--color-success);
}

.trust-item-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ===========================================
   TESTIMONIAL
   =========================================== */

.testimonial {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.testimonial-quote {
    font-size: var(--font-size-2xl);
    font-style: italic;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.testimonial-author {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ===========================================
   PRODUCT FOOTER (Sub-Footer)
   =========================================== */

.product-footer {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: var(--space-6) 0;
}

.product-footer-inner {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: var(--space-6);
}

.product-footer-brand {
    /* First column */
}

.product-footer-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
}

.product-footer-columns {
    display: contents;
}

.product-footer-column h4 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-2);
}

.product-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-footer-column li {
    margin-bottom: var(--space-1);
}

.product-footer-column a {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition-colors);
}

.product-footer-column a:hover {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

/* ===========================================
   GLOBAL FOOTER (Corporate)
   =========================================== */

.global-footer {
    background-color: var(--color-text-primary);
    color: var(--color-text-inverse);
    padding: var(--space-8) 0 var(--space-5);
}

.global-footer::before {
    content: '';
    display: block;
    max-width: var(--content-max-width);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 auto var(--space-8);
}

.global-footer-top {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.global-footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.footer-logo {
    max-height: 28px;
    max-width: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
}

.global-footer-brand p {
    font-size: var(--font-size-xs);
    color: var(--color-text-inverse);
    margin: 0;
    line-height: var(--line-height-normal);
    font-style: italic;
}

.global-footer-links {
    display: contents;
}

.global-footer-column {
    /* Grid columns */
}

.global-footer-column h4 {
    color: var(--color-text-inverse);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.global-footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-footer-column li {
    margin-bottom: var(--space-1);
}

.global-footer-column a {
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: var(--transition-colors);
}

.global-footer-column a:hover {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

.global-footer-social {
    display: flex;
    justify-content: center;
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-4);
}

.social-icons {
    display: flex;
    gap: var(--space-3);
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: var(--transition-all);
}

.social-icons a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
}

.social-icons svg {
    width: 18px;
    height: 18px;
}

.global-footer-bottom {
    text-align: center;
}

.footer-contact p {
    font-size: var(--font-size-xs);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--line-height-normal);
}

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

/* ===========================================
   UTILITIES
   =========================================== */

.text-center { text-align: center; }
.text-muted { color: var(--color-text-secondary); }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ===========================================
   PRICING PAGE (Pluralsight-style)
   =========================================== */

/* Pricing Hero */
.pricing-hero {
    background: var(--color-bg-page);
    padding: var(--space-7) 0 var(--space-8);
    text-align: center;
}

.pricing-hero h1 {
    margin-bottom: var(--space-3);
}

.pricing-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Tab Toggle (pill style) */
.pricing-toggle {
    display: inline-flex;
    background: white;
    border-radius: var(--radius-full);
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pricing-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pricing-toggle-btn .material-symbols-outlined {
    font-size: 20px;
}

.pricing-toggle-btn:hover {
    color: var(--color-text-primary);
}

.pricing-toggle-btn.is-active {
    background: var(--color-text-primary);
    color: white;
}

/* Pricing Panels */
.pricing-panel {
    display: none;
    padding: var(--space-8) 0;
    background: var(--color-bg-page);
}

.pricing-panel.is-active {
    display: block;
}

/* Pricing Cards Grid - max 4 columns, fills width with fewer items */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

/* Organization cards use same layout as individual */

/* Pricing Card */
.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all 0.2s ease;
}

.pricing-card:hover {
    border-color: var(--color-border-dark);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pricing-card.is-popular {
    border-color: var(--color-primary);
    border-width: 2px;
}

.pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.pricing-card-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.pricing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.pricing-card-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.pricing-card-name {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-1);
}

.pricing-card-tagline {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    min-height: 72px; /* Accommodate 3 lines to align cards */
}

/* Pricing Card Price */
.pricing-card-price {
    text-align: center;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.pricing-card-price .price-amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.pricing-card-price .price-period {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
}

.pricing-card-price .price-discount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-dark);
}

.pricing-card-price .price-custom {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* Pricing Card Meta */
.pricing-card-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.pricing-card-meta .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Pricing Card Features */
.pricing-card-features {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    flex: 1;
}

.pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.pricing-card-features .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Pricing Card Actions */
.pricing-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
}

.pricing-card-actions .btn {
    width: 100%;
    justify-content: center;
}

.pricing-card-link {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.pricing-card-link:hover {
    text-decoration: underline;
}

/* Pricing Guarantee */
.pricing-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pricing-guarantee .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success);
}

/* Organization Intro */
.pricing-org-intro {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--space-6);
}

/* Team Pricing Calculator */
.team-pricing-calculator {
    max-width: 640px;
    margin: 0 auto;
}

.calculator-card {
    background: var(--color-bg-card);
    border: 2px solid var(--color-border-light);
    padding: var(--space-6);
    text-align: center;
}

.calculator-title {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
}

.seat-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.seat-btn {
    width: 48px;
    height: 48px;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.seat-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.seat-selector input {
    width: 100px;
    height: 56px;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

.seat-selector input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.calculator-pricing .price-breakdown {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border-light);
    margin-bottom: var(--space-5);
}

.calculator-pricing .price-column {
    text-align: center;
}

.calculator-pricing .price-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.calculator-pricing .price-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.calculator-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
}

.calculator-note .material-symbols-outlined {
    font-size: 18px;
}

.contact-message {
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}

/* Pricing Tiers Guide */
.pricing-tiers-guide {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.tier-item {
    flex: 1;
    padding: var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: 8px 0 8px 0;
    text-align: center;
    transition: all 0.15s ease;
}

.tier-item.is-active {
    background: var(--color-bg-subtle);
    border: 2px solid var(--color-border-default);
}

.tier-seats {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-1);
}

.tier-price {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Organization Benefits */
.pricing-org-benefits {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: white;
    border-radius: var(--radius-lg);
    text-align: center;
}

.pricing-org-benefits h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-5);
}

.org-benefits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.org-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-benefit .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

/* FAQ Section */
.pricing-faq {
    padding: var(--space-8) 0;
    background-color: var(--color-bg-card);
}

.pricing-faq h2 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border-light);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-icon {
    font-size: 24px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-bottom: var(--space-4);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Final CTA */
.pricing-final-cta {
    padding: var(--space-9) 0;
    background: var(--color-bg-page);
    text-align: center;
}

.pricing-final-cta h2 {
    margin-bottom: var(--space-2);
}

.pricing-final-cta p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.final-cta-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.final-cta-buttons .btn-secondary:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* ===========================================
   LANDING PAGE
   =========================================== */

.landing-page {
    padding-top: 0;
    padding-bottom: 0;
}

/* Landing Hero - Search Focused */
.landing-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-hover-blue) 100%);
    padding: var(--space-8) 0;
    text-align: center;
}

.landing-hero h1 {
    margin-bottom: var(--space-2);
}

.landing-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* Landing Search Bar */
.landing-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 720px;
    margin: 0 auto var(--space-4);
    background: white;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.landing-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.landing-search-icon {
    padding: 0 var(--space-3);
    color: var(--color-text-tertiary);
    font-size: 24px;
}

.landing-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-base);
    padding: var(--space-2) 0;
    background: transparent;
}

.landing-search input::placeholder {
    color: var(--color-text-tertiary);
}

/* Search clear button */
.landing-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--space-1);
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-search-clear:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.landing-search-clear .material-symbols-outlined {
    font-size: 18px;
}

.landing-search.has-value .landing-search-clear {
    display: flex;
}

/* Search Dropdown */
.landing-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-1);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.landing-search-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.landing-search-results {
    max-height: 320px;
    overflow-y: auto;
}

.landing-search-result {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
    text-align: left;
}

.landing-search-result:last-child {
    border-bottom: none;
}

.landing-search-result:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

.landing-search-result-icon {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    font-size: 20px;
    margin-top: 2px;
}

.landing-search-result-content {
    flex: 1;
    min-width: 0;
}

.landing-search-result-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-search-result-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.landing-search-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.landing-search-browse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-page);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.landing-search-browse-all:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

.landing-search-browse-all .material-symbols-outlined {
    font-size: 18px;
}

/* Browse Text Links */
.landing-browse-text {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
}

.landing-browse-text a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.landing-browse-text a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Pass CTA (A/B hybrid) */
.landing-pass-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.landing-pass-cta-or {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.landing-pass-cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.landing-pass-cta-link:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.landing-pass-cta-link .material-symbols-outlined {
    font-size: 20px;
}

.landing-pass-cta-link .material-symbols-outlined:last-child {
    font-size: 18px;
    opacity: 0.7;
}

/* Hero B2B Boxes */
.hero-b2b-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 1000px;
    margin: var(--space-8) auto 0;
}

.hero-b2b-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 0 8px 0 8px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero-b2b-box:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.hero-b2b-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 22px;
    flex-shrink: 0;
}

.hero-b2b-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.hero-b2b-content h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 2px;
}

.hero-b2b-content p {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: 0;
    line-height: var(--line-height-snug);
}

.hero-b2b-arrow {
    color: var(--color-text-tertiary);
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.hero-b2b-box:hover .hero-b2b-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Landing Sections */
.landing-section {
    padding: var(--space-8) 0;
}

.landing-section-alt {
    background-color: var(--color-bg-page);
}

.landing-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.landing-section-header h2 {
    font-size: var(--font-size-xl);
    margin: 0;
}

.landing-section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.landing-section-link:hover {
    text-decoration: underline;
}

.landing-section-link .material-symbols-outlined {
    font-size: 18px;
}

/* Course Card Grid */
.course-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* ===========================================
   COURSES DUAL PANEL (Live + On-Demand Side by Side)
   =========================================== */

.courses-dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.courses-panel {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 0 8px 0 8px;
    overflow: hidden;
}

.courses-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-page);
}

.courses-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.courses-panel-title h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
}

.courses-panel-icon {
    color: var(--color-primary);
    font-size: 20px;
}

.courses-panel-list {
    display: flex;
    flex-direction: column;
}

/* Smaller link in panel header */
.courses-panel-header .landing-section-link {
    font-size: var(--font-size-xs);
}

.courses-panel-header .landing-section-link .material-symbols-outlined {
    font-size: 14px;
}

.courses-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-tertiary);
}

.courses-panel-empty .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: var(--space-2);
    opacity: 0.5;
}

.courses-panel-empty p {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

.courses-panel-empty a {
    font-size: var(--font-size-xs);
}

/* ===========================================
   COMPACT COURSE CARD (For dual panel lists)
   =========================================== */

.course-card-compact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}

.course-card-compact:last-child {
    border-bottom: none;
}

.course-card-compact:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

/* Date column (for live courses) - calendar style */
.course-card-compact-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.course-card-compact-month {
    display: block;
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-primary);
    background: var(--color-bg-hover-blue);
    width: 100%;
    text-align: center;
    padding: 1px 0;
    line-height: 1.2;
}

.course-card-compact-day {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

/* Icon column (for on-demand courses) */
.course-card-compact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
}

.course-card-compact-icon .material-symbols-outlined {
    font-size: 18px;
}

/* Content area */
.course-card-compact-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.course-card-compact-header {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.course-card-compact-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.course-card-compact-area {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.course-card-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.badge-cle {
    background-color: #E8F0FE;
    color: #1A73E8;
}

.badge-cpe {
    background-color: #E6F4EA;
    color: #188038;
}

.course-card-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
}

.course-card-live-badge .material-symbols-outlined {
    font-size: 14px;
}

.course-card-compact-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-snug);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-compact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Credits row with verified icon */
.course-card-compact-credits {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 4px;
}

.course-card-compact-credits .material-symbols-outlined {
    font-size: 14px;
    color: var(--color-success);
}

/* jurisdiction-trigger styled via .chip classes in HTML */
.course-card-compact-content .jurisdiction-trigger {
    align-self: flex-start;
}

/* Arrow indicator */
.course-card-compact-arrow {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    align-self: center;
}

.course-card-compact:hover .course-card-compact-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ===========================================
   CHIP SYSTEM (matching learner portal)
   =========================================== */

/* Base chip style */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    white-space: nowrap;
}

/* Small chip - compact display */
.chip-sm {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0.2px;
}

/* Medium chip - default size */
.chip-md {
    font-size: var(--font-size-sm);
    padding: 4px 8px;
}

/* Large chip */
.chip-lg {
    font-size: var(--font-size-sm);
    padding: 6px 12px;
}

.chip-lg .material-symbols-outlined {
    font-size: var(--font-size-sm);
}

/* CLE - Blue (matching learner portal) */
.chip-cle {
    background: #DEEBFF;
    border-color: #4C9AFF;
    color: #0747A6;
}

/* CPE - Green (matching learner portal) */
.chip-cpe {
    background: #E3FCEF;
    border-color: #57D9A3;
    color: #006644;
}

/* Microlearning - Orange (matching learner portal) */
.chip-microlearning {
    background: #FFF3E0;
    border-color: #FFB74D;
    color: #E65100;
}

/* Skills - Purple (matching learner portal) */
.chip-skills {
    background: #F3E5F5;
    border-color: #CE93D8;
    color: #7B1FA2;
}

/* Simulation - Teal (matching learner portal) */
.chip-simulation,
.chip-simulations {
    background: #E0F7FA;
    border-color: #4DD0E1;
    color: #00838F;
}

/* Neutral - Grey (for jurisdictions, counts, etc.) */
.chip-neutral {
    background: var(--color-bg-page);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

.chip-pass {
    background: linear-gradient(135deg, #E8DFF5 0%, #F3E5F5 100%);
    border-color: #CE93D8;
    color: #6A1B9A;
}

/* SQE - Neutral grey (UK law) */
.chip-sqe {
    background: var(--color-bg-active);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

/* Bar Review - Blue (US bar prep) */
.chip-bar {
    background: #E5ECF9;
    border-color: #2A5488;
    color: #1A3D5C;
}

/* Clickable chip variant */
.chip-clickable {
    cursor: pointer;
    transition: var(--transition-all);
    border: none;
    font-family: inherit;
}

.chip-clickable:hover {
    filter: brightness(0.95);
}

/* ===========================================
   ALERTS
   =========================================== */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.alert .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-info {
    background: var(--color-info-light);
}

.alert-success {
    background: var(--color-success-light);
}

.alert-warning {
    background: var(--color-warning-light);
}

.alert-error {
    background: var(--color-error-light);
}

/* ===========================================
   JURISDICTIONS FLYOUT (matching learner dashboard)
   =========================================== */

.jurisdictions-flyout {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    background: var(--color-bg-card);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.jurisdictions-flyout.open {
    transform: translateX(0);
}

.jurisdictions-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.jurisdictions-flyout-header h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.jurisdictions-flyout-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: background-color 0.2s ease;
}

.jurisdictions-flyout-close:hover {
    background-color: var(--color-bg-hover);
}

.jurisdictions-flyout-close .material-symbols-outlined {
    font-size: 24px;
}

.jurisdictions-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.jurisdictions-flyout-course {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
    line-height: var(--line-height-relaxed);
}

.jurisdictions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jurisdiction-card {
    background: #F8F9FA;
    border: 1px solid #E0E0E0;
    border-radius: var(--radius-md);
    padding: 16px;
}

.jurisdiction-card-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.jurisdiction-card-credits {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.jurisdiction-card-credits .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-text-secondary);
}

.jurisdictions-flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
}

.jurisdictions-flyout-overlay.open {
    opacity: 1;
    visibility: visible;
}

.flyout-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.flyout-loading .material-symbols-outlined {
    animation: spin 1s linear infinite;
}

.flyout-error {
    padding: 40px;
    text-align: center;
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

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

.course-card-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.course-card-date .material-symbols-outlined {
    font-size: 16px;
}

.course-card-practice-area {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Course Table (Tabular List) */
.course-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.course-table-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: white;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.course-table-row:hover {
    background-color: var(--color-bg-hover-blue);
    text-decoration: none;
}

.course-table-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-bg-hover);
    border-radius: var(--radius-sm);
}

.course-table-month {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.course-table-day {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.course-table-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.course-table-icon .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-text-tertiary);
}

.course-table-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.course-table-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.course-table-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-table-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.course-table-time {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.course-table-area {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-table-arrow {
    color: var(--color-text-tertiary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.course-table-row:hover .course-table-arrow {
    opacity: 1;
}

/* Pass Promo Section */
.pass-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3a5c 100%);
    border-radius: 16px 0 16px 0; /* teardrop pattern */
    padding: var(--space-6);
    color: white;
    margin-top: var(--space-5);
}

.pass-promo-content h3 {
    font-size: var(--font-size-xl);
    color: white;
    margin: 0 0 var(--space-2);
}

.pass-promo-content p {
    opacity: 0.9;
    margin: 0 0 var(--space-3);
    max-width: 400px;
}

.pass-promo-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-4);
}

.pass-promo-features li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.pass-promo-features .material-symbols-outlined {
    font-size: 18px;
    color: #4ade80;
}

.pass-promo-cta {
    text-align: center;
}

.pass-promo-price {
    margin-bottom: var(--space-3);
}

.pass-promo-price-label {
    display: block;
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin-bottom: var(--space-1);
}

.pass-promo-price-amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
}

.pass-promo-price-period {
    font-size: var(--font-size-lg);
    opacity: 0.8;
}

.pass-promo-cta .btn-primary {
    background: white;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.pass-promo-cta .btn-primary:hover {
    background: var(--color-bg-hover);
}

.pass-promo-note {
    display: block;
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Practice Area Grid */
.practice-area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    max-width: 100%;
    overflow: hidden;
}

/* Unified Browse Card - used for jurisdiction, credit type, and practice area grids */
.browse-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 0;
}

.browse-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(42, 84, 136, 0.1);
}

.browse-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: color 0.2s ease;
    line-height: var(--line-height-tight);
}

.browse-card:hover .browse-card-name {
    color: var(--color-primary);
}

.browse-card-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.browse-card-action .material-symbols-outlined {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.browse-card:hover .browse-card-action {
    color: var(--color-primary);
}

.browse-card:hover .browse-card-action .material-symbols-outlined {
    transform: translateX(2px);
}

/* Legacy practice-area-card (for backward compatibility) */
.practice-area-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 0;
}

.practice-area-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(42, 84, 136, 0.1);
}

.practice-area-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: color 0.2s ease;
    line-height: var(--line-height-tight);
}

.practice-area-card:hover .practice-area-name {
    color: var(--color-primary);
}

.practice-area-browse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.practice-area-browse .material-symbols-outlined {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.practice-area-card:hover .practice-area-browse {
    color: var(--color-primary);
}

.practice-area-card:hover .practice-area-browse .material-symbols-outlined {
    transform: translateX(2px);
}

/* Credit Type Grid */
.credit-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    max-width: 100%;
    overflow: hidden;
}

.credit-type-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 0;
}

.credit-type-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(42, 84, 136, 0.1);
}

.credit-type-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: color 0.2s ease;
    line-height: var(--line-height-tight);
}

.credit-type-card:hover .credit-type-name {
    color: var(--color-primary);
}

.credit-type-browse {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    transition: color 0.2s ease;
}

.credit-type-browse .material-symbols-outlined {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.credit-type-card:hover .credit-type-browse {
    color: var(--color-primary);
}

.credit-type-card:hover .credit-type-browse .material-symbols-outlined {
    transform: translateX(2px);
}

/* Jurisdiction Grid (Landing Page) */
.jurisdiction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.jurisdiction-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-2);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.jurisdiction-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(42, 84, 136, 0.1);
}

.jurisdiction-abbr {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    line-height: 1;
}

.jurisdiction-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}

.jurisdiction-card:hover .jurisdiction-name {
    color: var(--color-primary);
}

.jurisdiction-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ===========================================
   DIRECTORY PAGES (Practice Areas, Credit Types)
   =========================================== */

.page-header {
    margin-bottom: var(--space-6);
}

.page-header h1 {
    margin-bottom: var(--space-2);
}

.page-header-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.directory-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.directory-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(42, 84, 136, 0.1);
}

.directory-card-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}

.directory-card:hover .directory-card-name {
    color: var(--color-primary);
}

.directory-card-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination-btn:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

.pagination-btn .material-symbols-outlined {
    font-size: 18px;
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Trust Bar */
.trust-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
}

.trust-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.trust-bar-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

/* Centered Section Title */
.landing-section-title-center {
    text-align: center;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-6);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.feature-item {
    text-align: center;
    padding: var(--space-5);
    background: white;
    border-radius: var(--radius-lg);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, var(--color-bg-hover-blue) 0%, #d4e4f7 100%);
    border-radius: var(--radius-lg);
    font-size: 28px;
    color: var(--color-primary);
}

.feature-item h4 {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
}

.feature-item p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.testimonial-card {
    position: relative;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}


.testimonial-text {
    position: relative;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--space-4);
}

.testimonial-author {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

/* Updated testimonial styles */
.testimonial-rating {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-3);
}

.testimonial-rating .material-symbols-outlined {
    font-size: 16px;
    color: #F59E0B;
    font-variation-settings: 'FILL' 1;
}

.testimonial-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-author-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.testimonial-author-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* Awards inside testimonials section */
.testimonials-awards {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
}

.testimonials-awards-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
}

.testimonials-awards-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.testimonials-awards-items .award-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.testimonials-awards-items .award-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

/* ===========================================
   LIBRARY MODULES
   =========================================== */

.library-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.library-module {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.library-module:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.library-module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 24px;
    flex-shrink: 0;
}

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

.library-module-content h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.library-module-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2);
    line-height: var(--line-height-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.library-module-count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.library-module-arrow {
    color: var(--color-text-tertiary);
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    margin-top: var(--space-1);
}

.library-module:hover .library-module-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ===========================================
   STATS BAR
   =========================================== */

.stats-bar {
    background: var(--color-bg-page);
    padding: var(--space-5) 0;
}

.stats-bar-inner {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
}

.stat-item {
    text-align: center;
    color: var(--color-text-primary);
}

.stat-number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--space-1);
    color: var(--color-primary);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ===========================================
   VALUE PROP SPLIT
   =========================================== */

.value-prop-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.value-prop-split-reverse {
    direction: rtl;
}

.value-prop-split-reverse > * {
    direction: ltr;
}

.value-prop-eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.value-prop-content h2 {
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--space-3);
}

.value-prop-content > p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.value-prop-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.value-prop-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.value-prop-list .material-symbols-outlined {
    color: var(--color-success);
    font-size: 18px;
    flex-shrink: 0;
}

.value-prop-visual {
    display: flex;
    justify-content: center;
}

.value-prop-card {
    background: linear-gradient(135deg, #F5F5F5 0%, var(--color-border-light) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.value-prop-card-icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.value-prop-card-stat {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.value-prop-card-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ===========================================
   AWARDS BAR
   =========================================== */

.awards-bar {
    background: var(--color-bg-card);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.awards-bar-label {
    text-align: center;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-3);
}

.awards-bar-items {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.award-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.award-item .material-symbols-outlined {
    font-size: 20px;
    color: #F59E0B;
}

/* ===========================================
   SECTION SUBTITLE
   =========================================== */

.landing-section-subtitle {
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: calc(-1 * var(--space-3)) 0 var(--space-6);
}

/* ===========================================
   FINAL CTA
   =========================================== */

.final-cta {
    background: var(--color-bg-page);
    padding: var(--space-8) 0;
}

.final-cta-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.final-cta h2 {
    color: var(--color-text-primary);
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--space-2);
}

.final-cta p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0 0 var(--space-5);
}

.final-cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}


/* ===========================================
   CONTACT PAGE
   =========================================== */

.contact-hero {
    background: linear-gradient(180deg, white 0%, var(--color-barbri-light-blue) 100%);
    padding: var(--space-8) 0;
    text-align: center;
}

.contact-hero h1 {
    margin: 0 0 var(--space-2);
}

.contact-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-content {
    padding: var(--space-8) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-option {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.contact-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 24px;
    margin-bottom: var(--space-3);
}

.contact-option h3 {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-1);
}

.contact-option p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2);
}

.contact-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.contact-form-wrapper {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.contact-form-wrapper h2 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-5);
}

.contact-form .form-group {
    margin-bottom: var(--space-4);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.contact-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-1);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.contact-form .required {
    color: #dc3545;
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 1024px) {
    /* Hide mega-nav on tablet and below */
    .global-nav {
        display: none; /* TODO: Mobile menu hamburger */
    }

    .global-footer-top {
        flex-wrap: wrap;
        gap: var(--space-5);
    }

    .global-footer-brand {
        width: 100%;
        margin-bottom: var(--space-3);
    }

    .global-footer-links {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .product-footer-inner {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .product-footer-brand {
        width: 100%;
    }

    /* Landing page tablet */
    .course-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dual panel - keep side by side but tighter */
    .courses-dual-panel {
        gap: var(--space-4);
    }

    .practice-area-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .credit-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .jurisdiction-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .directory-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid .testimonial-card:last-child {
        display: none;
    }

    .course-table-area {
        display: none;
    }

    /* Stats bar tablet */
    .stats-bar-inner {
        gap: var(--space-6);
    }

    .stat-number {
        font-size: var(--font-size-2xl);
    }

    /* Value prop tablet */
    .value-prop-split {
        gap: var(--space-6);
    }

    .value-prop-content h2 {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: var(--font-size-3xl);
    }

    .hero {
        padding: var(--space-9) 0;
    }

    .hero-subtitle {
        font-size: var(--font-size-md);
    }

    .persona-buttons {
        flex-direction: column;
        align-items: center;
    }

    .persona-btn {
        width: 100%;
        max-width: 280px;
    }

    /* Header responsive */
    .global-header {
        height: 56px;
    }

    .site-logo img {
        height: 24px;
    }

    .header-login-link {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }

    /* Product subheader responsive - horizontal scroll */
    .product-subheader {
        top: 56px; /* Match smaller header height */
        height: auto;
        padding: 0;
        overflow: hidden;
    }

    .product-subheader .container {
        padding: 0;
    }

    .product-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .product-nav-title {
        padding: var(--space-2) var(--space-4);
        border-bottom: 1px solid var(--color-border-light);
    }

    .product-nav-links {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 var(--space-2);
    }

    .product-nav-links::-webkit-scrollbar {
        display: none;
    }

    .product-nav-link {
        white-space: nowrap;
        padding: 0 var(--space-3);
        height: 44px;
    }

    /* Hide dropdown arrows on mobile - they don't work with touch */
    .product-nav-link .nav-arrow {
        display: none;
    }

    /* Product footer responsive */
    .product-footer-inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .product-footer-brand {
        text-align: center;
        padding-bottom: var(--space-4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .product-footer-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    .product-footer-column:empty {
        display: none;
    }

    /* Global footer responsive */
    .global-footer-top {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .global-footer-brand {
        text-align: center;
        align-items: center;
        padding-bottom: var(--space-4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .global-footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4) var(--space-5);
    }

    .global-footer-column {
        min-width: auto;
    }

    .global-footer-bottom .footer-contact p {
        font-size: var(--font-size-xs);
        line-height: 1.6;
    }

    .social-icons {
        gap: var(--space-3);
    }

    .social-icons a {
        width: 36px;
        height: 36px;
    }

    .pass-banner {
        flex-direction: column;
        text-align: center;
    }

    /* Landing page responsive */
    .landing-hero {
        padding: var(--space-6) 0;
    }

    /* B2B boxes stack on mobile */
    .hero-b2b-boxes {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        margin-top: var(--space-5);
    }

    .hero-b2b-box {
        padding: var(--space-3);
    }

    .hero-b2b-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    /* Stack dual panels vertically on mobile */
    .courses-dual-panel {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .courses-panel-title h2 {
        font-size: var(--font-size-xs);
    }

    .course-card-compact {
        padding: var(--space-2);
        gap: var(--space-2);
    }

    .course-card-compact-date,
    .course-card-compact-icon {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .course-card-compact-icon .material-symbols-outlined {
        font-size: 16px;
    }

    .course-card-compact-day {
        font-size: var(--font-size-xs);
    }

    .course-card-compact-month {
        font-size: 8px;
    }

    .course-card-compact-title {
        font-size: var(--font-size-xs);
    }

    .landing-search input {
        font-size: var(--font-size-base);
    }

    .landing-search-result-title {
        white-space: normal;
    }

    .course-card-grid {
        grid-template-columns: 1fr;
    }

    .pass-promo {
        flex-direction: column;
        text-align: center;
        gap: var(--space-5);
    }

    .pass-promo-content p {
        max-width: none;
    }

    .pass-promo-features {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }

    .practice-area-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .credit-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jurisdiction-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pagination {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .trust-bar {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .feature-item {
        padding: var(--space-3);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid .testimonial-card:last-child {
        display: block;
    }

    .course-table-row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .course-table-info {
        order: 1;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .course-table-date,
    .course-table-icon {
        order: 0;
    }

    .course-table-meta {
        order: 2;
        width: 100%;
        justify-content: flex-start;
    }

    .course-table-arrow {
        display: none;
    }

    .course-table-title {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    /* Library modules mobile */
    .library-modules-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .library-module {
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .library-module-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .library-module-content p {
        -webkit-line-clamp: 3;
    }

    /* Stats bar mobile */
    .stats-bar-inner {
        flex-wrap: wrap;
        gap: var(--space-4) var(--space-5);
        justify-content: center;
    }

    .stat-item {
        min-width: 120px;
    }

    .stat-number {
        font-size: var(--font-size-xl);
    }

    /* Value prop mobile - stack vertically */
    .value-prop-split {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        text-align: center;
    }

    .value-prop-content h2 {
        font-size: var(--font-size-lg);
    }

    .value-prop-list {
        text-align: left;
        max-width: 320px;
        margin: 0 auto;
    }

    .value-prop-card {
        max-width: 240px;
        padding: var(--space-5);
    }

    .value-prop-card-stat {
        font-size: var(--font-size-3xl);
    }

    /* Awards bar mobile */
    .awards-bar-items {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .award-item {
        font-size: var(--font-size-xs);
    }

    /* Final CTA mobile */
    .final-cta {
        padding: var(--space-6) 0;
    }

    .final-cta h2 {
        font-size: var(--font-size-xl);
    }

    .final-cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }

    /* Mobile full-width buttons */
    .btn-lg,
    .btn-full-mobile {
        width: 100%;
    }

    /* Buttons in common containers go full-width */
    .checkout-flow-card .btn,
    .auth-form .btn,
    .course-purchase-card .btn,
    .jurisdiction-hero-content > .btn,
    .section-cta .btn,
    .other-jurisdictions .btn {
        width: 100%;
    }
}

/* ===========================================
   BROWSE / SEARCH RESULTS PAGE
   Card-based layout matching learner portal
   =========================================== */

.browse-page {
    padding: var(--space-5) 0 var(--space-9);
}

/* Breadcrumbs (in-page, typically in hero sections)
 * Standards:
 * - 48px above (space from subnav)
 * - 48px below (space to page title/content)
 * - Home icon + "Home" as first crumb
 * - Intermediate pages as links
 * - Current page as plain text (not a link)
 * - Use "/" as separator
 */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-7); /* 48px from subnav */
    margin-bottom: var(--space-7); /* 48px to content below */
    font-size: var(--font-size-sm);
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--color-primary);
}

.breadcrumb-link .material-symbols-outlined {
    font-size: 18px;
}

.breadcrumb-separator {
    color: var(--color-text-tertiary);
}

.breadcrumb-current {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* Browse Header */
.browse-header {
    margin-bottom: var(--space-4);
}

.browse-header h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-1);
}

.browse-results-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Search and Filter Bar */
/* Sticky filter section on browse page */
.browse-sticky-filters {
    position: sticky;
    top: 112px; /* Below header (64px) + subheader (48px) */
    z-index: 50; /* Below header/subheader dropdowns (z-index 100+) */
    background-color: var(--color-bg-page);
    padding: var(--space-3);
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3) calc(-1 * var(--space-3));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s ease;
}

.browse-sticky-filters.is-stuck {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-filters-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.browse-search {
    display: flex;
    align-items: center;
    flex: 1;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
}

.browse-search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(42, 84, 136, 0.1);
}

.browse-search > .material-symbols-outlined:first-child {
    font-size: 20px;
    color: var(--color-text-tertiary);
    margin-right: var(--space-2);
}

.browse-search input {
    flex: 1;
    padding: var(--space-1) 0;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    border: none;
    background: transparent;
    color: var(--color-text-primary);
}

.browse-search input:focus {
    outline: none;
}

.browse-search input::placeholder {
    color: var(--color-text-tertiary);
}

.search-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--color-text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.search-clear-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

.search-clear-btn .material-symbols-outlined {
    font-size: 18px;
}

.search-btn {
    margin-left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.filters-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ===========================================
   Active Filter Chips
   =========================================== */
.browse-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background-color: var(--color-border-light);
    border-radius: var(--radius-md);
}

.active-filters-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-right: var(--space-1);
}

.filter-chip-label {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-tertiary);
}

.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: var(--transition-all);
}

.active-filter-chip:hover {
    background-color: var(--color-border-light);
    text-decoration: none;
}

.active-filter-chip .material-symbols-outlined {
    font-size: 14px;
}

.clear-all-filters {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.clear-all-filters:hover {
    color: var(--color-primary);
}

/* ===========================================
   Course Cards List (matching learner portal)
   =========================================== */
.course-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.course-card-row {
    display: grid;
    grid-template-columns: 1fr 120px 140px auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    background-color: var(--color-bg-card);
    transition: var(--transition-all);
}

.course-card-row:hover {
    background-color: var(--color-bg-hover);
}

/* Course Card Main Content */
.course-card-main {
    min-width: 0;
}

h3.course-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-2) 0;
}

.course-card-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.course-card-title a:hover {
    text-decoration: underline;
}

.course-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.course-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.course-card-meta-item .material-symbols-outlined {
    font-size: 16px;
}

.course-card-live-date {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.course-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Course Card Type Column */
.course-card-type {
    display: flex;
    justify-content: flex-start;
}

/* Course Card Credits Column */
.course-card-credits {
    display: flex;
    justify-content: flex-start;
}

/* Course Card Price Column (Browse page grid) */
.course-card-row .course-card-price {
    display: flex;
    justify-content: flex-end;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* Course Card Action Column */
.course-card-action {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.course-card-action .btn {
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

/* Jurisdiction Trigger Button (for compact cards) */
/* jurisdiction-trigger styled via .chip classes in HTML */

/* ===========================================
   Course Card Calendar Dropdown (for live dates)
   =========================================== */
.course-card-calendar-dropdown {
    position: relative;
    display: inline-flex;
}

.course-card-calendar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.course-card-calendar-btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-primary);
}

.course-card-calendar-btn:hover .material-symbols-outlined {
    color: var(--color-primary);
}

.course-card-calendar-btn .calendar-chevron {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.course-card-calendar-dropdown.open .course-card-calendar-btn .calendar-chevron {
    transform: rotate(180deg);
}

.course-card-calendar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.course-card-calendar-dropdown.open .course-card-calendar-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.course-card-calendar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.course-card-calendar-menu .dropdown-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.course-card-calendar-menu .dropdown-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.course-card-calendar-menu .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.course-card-calendar-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* ===========================================
   Clickable Filter Tags (practice areas, skills)
   =========================================== */
.filter-tag {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.filter-tag:hover {
    color: #0052CC;
    text-decoration: underline;
}

/* ===========================================
   Pagination Bar
   =========================================== */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.results-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.pagination-controls label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.per-page-select {
    padding: 6px var(--space-2);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.page-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    min-width: 120px;
    text-align: right;
}

.page-nav-buttons {
    display: flex;
    gap: var(--space-1);
}

.page-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.page-nav-btn:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-nav-btn .material-symbols-outlined {
    font-size: 20px;
}

/* ===========================================
   Filter Drawer
   =========================================== */
.filter-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.filter-drawer.open {
    right: 0;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    transition: var(--transition-all);
}

.drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.drawer-header .drawer-title {
    font-size: var(--font-size-xl);
    margin: 0;
}

.drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.drawer-close-btn:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.drawer-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background-color: var(--color-bg-card);
    flex-shrink: 0;
}

.drawer-footer .btn {
    flex: 1;
}

.drawer-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-5);
}

/* ===========================================
   CONFIRMATION MODAL
   =========================================== */

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 23, 34, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-4);
}

.confirm-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    background: var(--color-bg-card);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s ease;
    z-index: var(--z-modal);
}

.confirm-modal-overlay.open .confirm-modal {
    transform: scale(1) translateY(0);
}

.confirm-modal-header {
    padding: var(--space-5) var(--space-5) var(--space-3);
}

.confirm-modal-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.confirm-modal-body {
    padding: 0 var(--space-5) var(--space-4);
}

.confirm-modal-body p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.confirm-modal-items {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.confirm-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
}

.confirm-modal-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border-light);
}

.confirm-modal-item-title {
    color: var(--color-text-primary);
    flex: 1;
    padding-right: var(--space-3);
}

.confirm-modal-item-price {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.confirm-modal-savings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--color-success-light);
    border-radius: var(--radius-md);
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

.confirm-modal-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.confirm-modal-footer .btn {
    flex: 1;
}

/* ===========================================
   CART FLYOUT
   =========================================== */

.cart-flyout-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--z-modal-backdrop);
}

.cart-flyout-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart-flyout {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: var(--z-modal);
}

.cart-flyout.open {
    transform: translateX(0);
}

.cart-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
}

.cart-flyout-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.cart-flyout-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.cart-flyout-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

.cart-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-5) var(--space-4);
}

/* Section title - Order Summary */
.cart-flyout-section-title {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
}

/* Loading state */
.cart-flyout-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) 0;
    color: var(--color-text-secondary);
}

.cart-flyout-loading .material-symbols-outlined {
    font-size: 32px;
}

/* Empty state */
.cart-flyout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    text-align: center;
}

.cart-flyout-empty .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-text-tertiary);
}

.cart-flyout-empty p {
    color: var(--color-text-secondary);
    margin: 0;
}

/* Cart items */
.cart-flyout-items {
    display: flex;
    flex-direction: column;
}

.cart-flyout-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.cart-flyout-item:last-child {
    border-bottom: none;
}

.cart-flyout-item-info {
    flex: 1;
    min-width: 0;
}

.cart-flyout-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--line-height-tight);
    text-decoration: none;
    display: block;
}

.cart-flyout-item-title:hover {
    text-decoration: underline;
}

.cart-flyout-item-type {
    margin: 0 0 var(--space-2) 0;
}

.cart-flyout-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-flyout-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-tertiary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    transition: var(--transition-all);
}

.cart-flyout-item-remove:hover {
    color: var(--color-error);
    background: var(--color-bg-hover);
}

.cart-flyout-item-remove .material-symbols-outlined {
    font-size: 20px;
}

.cart-flyout-item-pricing {
    text-align: right;
    flex-shrink: 0;
}

.cart-flyout-item-price {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Footer */
.cart-flyout-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-card);
    flex-shrink: 0;
}

/* Totals section */
.cart-flyout-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cart-flyout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.cart-flyout-row-label {
    color: var(--color-text-primary);
}

.cart-flyout-row-value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.cart-flyout-row-total {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

.cart-flyout-row-total .cart-flyout-row-label {
    font-weight: var(--font-weight-semibold);
}

.cart-flyout-row-total .cart-flyout-row-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* Promo code */
.cart-flyout-promo {
    padding: var(--space-2) 0;
}

.cart-flyout-promo-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.cart-flyout-promo-toggle:hover {
    text-decoration: underline;
}

.cart-flyout-promo-form {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.cart-flyout-promo-form input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
}

.cart-flyout-promo-form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Checkout button */
.cart-flyout-footer .btn-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* Spinning animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .cart-flyout {
        width: 100vw;
    }
}

/* -------------------------------------------
   CART FLYOUT NOTICES
   Slim banners for price changes, unavailable items, already owned
   ------------------------------------------- */

.cart-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.cart-notice .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.cart-notice span:not(.material-symbols-outlined) {
    flex: 1;
}

.cart-notice-error {
    background-color: #FDEAE3;
    color: #c33;
}

.cart-notice-info {
    background-color: #E5ECF9;
    color: #1a4580;
}

.cart-notice-warning {
    background-color: #FFF8E6;
    color: #8a6d00;
}

.cart-notice-dismiss {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.cart-notice-dismiss:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* Item warning state - subtle left border indicator */
.cart-flyout-item-warning {
    border-left: 3px solid #FFAB00;
    padding-left: 12px;
    margin-left: -12px;
}

/* Warning badges on items */
.cart-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}

.cart-item-badge-owned {
    background-color: #E5ECF9;
    color: #1a4580;
}

.cart-item-badge-price {
    background-color: #FFF8E6;
    color: #8a6d00;
}

.cart-item-badge-unavailable {
    background-color: #FDEAE3;
    color: #c33;
}

/* Unavailable item state - greyed out */
.cart-flyout-item-unavailable {
    opacity: 0.6;
    border-left: 3px solid #c33;
    padding-left: 12px;
    margin-left: -12px;
}

.cart-flyout-item-unavailable .cart-flyout-item-title {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.cart-flyout-item-unavailable .cart-flyout-item-price {
    display: none;
}

/* Checkout product items - price determined during checkout */
.cart-flyout-item-checkout-product {
    background-color: #F8F9FA;
    border-left: 3px solid var(--color-primary);
    padding-left: 12px;
    margin-left: -12px;
}

.cart-flyout-item-checkout-product .cart-flyout-item-tbd {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 4px;
    font-style: italic;
}

.cart-flyout-item-price-tbd {
    color: var(--color-text-secondary);
    font-style: italic;
    font-weight: 400;
}

/* Old price strikethrough */
.cart-flyout-item-old-price {
    text-decoration: line-through;
    color: var(--color-text-secondary);
    font-size: 13px;
    margin-right: 4px;
}

/* Price direction indicator */
.cart-price-direction {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.cart-price-direction .material-symbols-outlined {
    font-size: 16px;
}

.cart-price-up {
    color: #c33;
}

.cart-price-down {
    color: #447228;
}

/* -------------------------------------------
   CART FLYOUT PROMO CODE (Enhanced)
   ------------------------------------------- */

.cart-flyout-promo-applied {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.cart-flyout-promo-applied .material-symbols-outlined {
    color: var(--color-success);
    font-size: 18px;
}

#cart-flyout-promo-code {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-success);
}

#cart-flyout-promo-remove {
    background: transparent;
    border: none;
    color: var(--color-success);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

#cart-flyout-promo-remove:hover {
    color: #2e5016;
}

.cart-flyout-promo-error {
    display: none;
    color: var(--color-error);
    font-size: 13px;
    margin-top: var(--space-1);
}

/* Pending promo state - awaiting product selection */
.cart-flyout-promo-pending {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.cart-flyout-promo-pending-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-flyout-promo-pending .material-symbols-outlined {
    color: #8a6d00;
    font-size: 18px;
    flex-shrink: 0;
}

.cart-flyout-promo-pending-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #8a6d00;
}

.cart-flyout-promo-pending-msg {
    font-size: 13px;
    color: #6d5600;
    padding-left: 26px;  /* Align with text after icon */
}

.cart-flyout-promo-remove-btn {
    background: transparent;
    border: none;
    color: #8a6d00;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    flex-shrink: 0;
}

.cart-flyout-promo-remove-btn:hover {
    color: #5a4800;
}

/* Discount row */
#cart-flyout-discount-row {
    color: var(--color-success);
}

/* ===========================================
   MOBILE MENU
   =========================================== */

/* Hamburger toggle button - hidden on desktop */
.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    margin-right: var(--space-2);
}

.mobile-menu-toggle:hover {
    background-color: var(--color-bg-hover);
}

.mobile-menu-toggle .material-symbols-outlined {
    font-size: 24px;
}

/* Show hamburger on tablet and below */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
    }
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 23, 34, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: var(--z-modal-backdrop);
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Mobile menu panel */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: var(--z-modal);
}

.mobile-menu.open {
    transform: translateX(0);
}

/* Mobile menu header */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.mobile-menu-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.mobile-menu-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

/* Mobile menu body */
.mobile-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) 0;
}

/* Mobile menu sections */
.mobile-menu-section {
    padding: 0 var(--space-5);
    margin-bottom: var(--space-4);
}

.mobile-menu-section-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-2) 0;
    padding: 0 var(--space-3);
}

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

.mobile-menu-list li {
    margin: 0;
}

.mobile-menu-list a {
    display: block;
    padding: var(--space-3);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}

.mobile-menu-list a:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-primary);
}

.mobile-menu-list a.mobile-menu-highlight {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Mobile menu footer */
.mobile-menu-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.mobile-menu-footer .btn {
    gap: var(--space-2);
}

.mobile-menu-footer .btn .material-symbols-outlined {
    font-size: 20px;
}

.filter-section {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.filter-section:last-of-type {
    border-bottom: none;
}

.filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.filter-section-header:hover {
    color: var(--color-primary);
}

.filter-section-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.filter-section-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s ease;
}

.filter-section-header[aria-expanded="false"] .material-symbols-outlined {
    transform: rotate(-90deg);
}

.filter-section-content {
    padding-top: var(--space-2);
}

.filter-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.filter-options-list.collapsed .filter-checkbox:nth-child(n+6) {
    display: none;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}

.filter-checkbox:hover {
    background-color: var(--color-bg-hover);
}

.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.filter-show-more {
    margin-top: var(--space-2);
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
}

.filter-show-more:hover {
    text-decoration: underline;
}

.filter-date-inputs {
    display: flex;
    gap: var(--space-3);
}

.filter-date-field {
    flex: 1;
}

.filter-date-field label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.filter-date-field input[type="date"] {
    width: 100%;
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
}

/* ===========================================
   Jurisdictions Flyout
   =========================================== */
.jurisdictions-flyout {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.jurisdictions-flyout.open {
    right: 0;
}

.jurisdictions-flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: var(--transition-all);
}

.jurisdictions-flyout-overlay.open {
    opacity: 1;
    visibility: visible;
}

.jurisdictions-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.jurisdictions-flyout-header h2 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.jurisdictions-flyout-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.jurisdictions-flyout-close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-hover);
}

.jurisdictions-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

.jurisdictions-flyout-course {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.jurisdictions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

a.jurisdiction-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg-page);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

a.jurisdiction-card:hover {
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

.jurisdiction-card-info {
    flex: 1;
    min-width: 0;
}

.jurisdiction-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.jurisdiction-card-credits {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.jurisdiction-card-expiry {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 4px;
}

.jurisdiction-card-arrow {
    color: var(--color-text-tertiary);
    font-size: 20px;
    flex-shrink: 0;
}

a.jurisdiction-card:hover .jurisdiction-card-arrow {
    color: var(--color-primary);
}

.flyout-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-secondary);
}

.flyout-loading .material-symbols-outlined {
    animation: spin 1s linear infinite;
}

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

/* ===========================================
   Empty State
   =========================================== */
.browse-empty {
    text-align: center;
    padding: var(--space-9) var(--space-5);
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.browse-empty-icon {
    font-size: 64px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.browse-empty h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.browse-empty p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-5);
}

.browse-empty-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

/* ===========================================
   Browse Page - Responsive
   =========================================== */
@media (max-width: 1024px) {
    .course-card-row {
        grid-template-columns: 1fr 120px auto;
    }

    .course-card-credits {
        display: none;
    }
}

@media (max-width: 768px) {
    .search-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .browse-search {
        max-width: none;
    }

    .course-card-row {
        grid-template-columns: 1fr auto;
        gap: var(--space-2);
    }

    .course-card-type {
        display: none;
    }

    .browse-active-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .active-filters-list {
        width: 100%;
    }

    .clear-all-filters {
        margin-left: 0;
        margin-top: var(--space-2);
    }

    .pagination-bar {
        flex-direction: column;
        gap: var(--space-3);
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-drawer {
        width: 100%;
        right: -100%;
    }

    .jurisdictions-flyout {
        width: 100%;
        right: -100%;
    }
}

/* ===========================================
   DIRECTORY PAGES (Practice Areas, Credit Types, Skills, Jurisdictions)
   =========================================== */

.directory-page {
    min-height: calc(100vh - 200px);
}

/* Directory Hero */
.directory-hero {
    background: var(--color-bg-page);
    padding: var(--space-7) 0 var(--space-8);
}

.directory-hero h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
}

.directory-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 700px;
    margin: 0;
    line-height: 1.6;
}

/* Directory Content */
.directory-content {
    padding: var(--space-6) 0 var(--space-8);
}

.directory-stats {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Directory Category (for Skills page) */
.directory-category {
    margin-bottom: var(--space-6);
}

.directory-category-title {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border-light);
}

/* Directory Card Icon */
.directory-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.directory-card-icon .material-symbols-outlined {
    font-size: 22px;
    color: var(--color-primary);
}

/* Directory Card Badge (for Credit Types) */
.directory-card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--color-bg-hover-blue);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

/* Directory Card Abbreviation (for Jurisdictions) */
.directory-card-abbr {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

/* Mini badges for CLE/CPE */
.directory-card-badges {
    display: flex;
    gap: var(--space-1);
    margin-top: auto;
}

.mini-badge {
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 5px;
    border-radius: 3px;
}

.badge-cle {
    background: #E8F5E9;
    color: #2E7D32;
}

.badge-cpe {
    background: #E3F2FD;
    color: #1565C0;
}

/* Jurisdictions Grid (narrower cards) */
.directory-grid-jurisdictions {
    grid-template-columns: repeat(6, 1fr);
}

.directory-grid-jurisdictions .directory-card {
    padding: var(--space-3);
    text-align: center;
    align-items: center;
}

/* ===========================================
   JURISDICTIONS MAP
   =========================================== */

.jurisdictions-map-section {
    padding: var(--space-6) 0;
    background: white;
}

.us-map-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.us-map {
    width: 100%;
    height: auto;
}

/* State paths */
.state-path {
    cursor: pointer;
    text-decoration: none;
}

.state-path path {
    fill: #dde4eb;
    stroke: white;
    stroke-width: 1;
    transition: fill 0.2s ease;
}

.state-path.has-courses path {
    fill: var(--color-primary);
    fill-opacity: 0.7;
}

.state-path:hover path,
.state-path:focus path {
    fill: var(--color-primary);
    fill-opacity: 1;
}

.state-path.no-data {
    cursor: default;
}

.state-path.no-data path {
    fill: #eef1f4;
}

.state-path.no-data:hover path {
    fill: #e0e5ea;
}

/* Map Tooltip */
.map-tooltip {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-text-primary);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.map-tooltip.visible {
    display: flex;
}

.map-tooltip-name {
    font-weight: var(--font-weight-semibold);
}

.map-tooltip-count {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* ===========================================
   JURISDICTION DETAIL PAGE
   =========================================== */

.jurisdiction-hero {
    background: var(--color-bg-page);
    padding: 0 0 var(--space-8);
}

.jurisdiction-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-6);
}

.jurisdiction-hero-main {
    flex: 1;
}

.jurisdiction-hero .jurisdiction-abbr {
    display: inline-block;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    background: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.jurisdiction-hero h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
}

.jurisdiction-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    max-width: 600px;
}

.jurisdiction-badges {
    display: flex;
    gap: var(--space-2);
}

.jurisdiction-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

.jurisdiction-badge .material-symbols-outlined {
    font-size: 18px;
}

.jurisdiction-badge.badge-cle {
    background: #E8F5E9;
    color: #2E7D32;
}

.jurisdiction-badge.badge-cpe {
    background: #E3F2FD;
    color: #1565C0;
}

/* Requirements Section */
.jurisdiction-requirements {
    padding: var(--space-6) 0;
    background: white;
}

.jurisdiction-requirements h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-4);
}

.requirement-card {
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.requirement-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.requirement-card-header .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.requirement-card-header h3 {
    font-size: var(--font-size-lg);
    margin: 0;
}

.requirement-style {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

.requirement-instructions {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Featured Courses Section */
.jurisdiction-courses {
    padding: var(--space-6) 0;
    background: var(--color-bg-subtle);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.section-header h2 {
    font-size: var(--font-size-2xl);
    margin: 0;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.view-all-link:hover {
    text-decoration: none;
    color: var(--color-primary-dark);
}

.view-all-link .material-symbols-outlined {
    font-size: 18px;
}

/* Courses Grid (mini cards) */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.course-card-mini {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    text-decoration: none;
    transition: all 0.2s ease;
}

.course-card-mini:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(42, 84, 136, 0.1);
    text-decoration: none;
}

.course-card-mini-thumb {
    aspect-ratio: 16 / 9;
    background: var(--color-bg-hover-blue);
    overflow: hidden;
}

.course-card-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card-mini-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.course-card-mini-placeholder .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-primary);
    opacity: 0.5;
}

.course-card-mini-content {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.course-card-mini h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-mini:hover h4 {
    color: var(--color-primary);
}

.course-card-mini-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.course-card-mini-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.course-card-mini-meta .material-symbols-outlined {
    font-size: 14px;
}

.course-card-mini-area {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-subtle);
    padding: 2px 6px;
    border-radius: 3px;
    align-self: flex-start;
}

.section-cta {
    text-align: center;
    margin-top: var(--space-5);
}

/* Other Jurisdictions Section */
.other-jurisdictions {
    padding: var(--space-8) 0;
    background: white;
    text-align: center;
}

.other-jurisdictions h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-2);
}

.section-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}


/* ===========================================
   DIRECTORY PAGE RESPONSIVE
   =========================================== */

@media (max-width: 1200px) {
    .directory-grid-jurisdictions {
        grid-template-columns: repeat(5, 1fr);
    }

    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .directory-grid-jurisdictions {
        grid-template-columns: repeat(4, 1fr);
    }

    .jurisdiction-hero-content {
        flex-direction: column;
    }

    .requirements-grid {
        grid-template-columns: 1fr;
    }

    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .directory-hero {
        padding: var(--space-4) 0 var(--space-6);
    }

    .directory-hero h1 {
        font-size: var(--font-size-3xl);
    }

    .directory-grid-jurisdictions {
        grid-template-columns: repeat(3, 1fr);
    }

    .us-map-container {
        display: none;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

@media (max-width: 576px) {
    .directory-grid-jurisdictions {
        grid-template-columns: repeat(2, 1fr);
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }

    .jurisdiction-badges {
        flex-direction: column;
    }
}

/* ===========================================
   PRICING PAGE RESPONSIVE
   =========================================== */

@media (max-width: 992px) {
    .org-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-hero {
        padding: var(--space-6) 0;
    }

    .pricing-hero h1 {
        font-size: var(--font-size-3xl);
    }

    .pricing-toggle-btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-xs);
    }

    /* On mobile, force single column */
    .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .org-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .final-cta-buttons {
        flex-direction: column;
    }

    .final-cta-buttons .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .pricing-toggle {
        width: 100%;
    }

    .pricing-toggle-btn {
        flex: 1;
        justify-content: center;
    }

    .org-benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .org-benefit {
        font-size: var(--font-size-xs);
    }
}

/* ===========================================
   CHECKOUT FLOW - LOGIN PAGE
   Entry point for checkout, login or create account
   =========================================== */

.checkout-login-page {
    background-color: var(--color-bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Minimal Checkout Header */
.checkout-header {
    background-color: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-3) 0;
}

.checkout-header-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-logo img {
    height: 24px;
    width: auto;
}

.checkout-header-secure {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-header-secure .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

/* Main Content Area */
.checkout-login-main {
    flex: 1;
    padding: var(--space-7) var(--space-4);
}

.checkout-login-container {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-6);
    align-items: start;
}

/* Left Column - Form */
.checkout-login-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.checkout-login-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
    padding: var(--space-6);
}

/* Auth Toggle Tabs */
.auth-toggle {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-5);
    border-bottom: 2px solid var(--color-border-light);
}

.auth-toggle-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.auth-toggle-btn:hover {
    color: var(--color-text-primary);
}

.auth-toggle-btn.active {
    color: var(--color-primary);
}

.auth-toggle-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
}

/* Auth Info Banner */
.auth-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-bg-hover-blue);
    border: 1px solid rgba(42, 84, 136, 0.15);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.auth-info-banner .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-info-banner p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Auth Messages */
.auth-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.auth-message .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.auth-message-success {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.auth-message-error {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

/* Auth Forms */
.auth-form .required-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.auth-form .required-note::before {
    content: '*';
    color: var(--color-error);
    margin-right: 4px;
}

.auth-form .form-group {
    margin-bottom: var(--space-4);
}

.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.auth-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.auth-form .required {
    color: var(--color-error);
}

.auth-form input,
.auth-form select {
    width: 100%;
    height: var(--input-height-default);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form input:focus,
.auth-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.auth-form input::placeholder {
    color: var(--color-text-disabled);
}

.auth-form .form-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* Password Input with Toggle */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: color 0.15s ease;
}

.password-toggle:hover {
    color: var(--color-text-primary);
}

.password-toggle .material-symbols-outlined {
    font-size: 20px;
}

/* Checkbox */
.form-group-checkbox {
    margin-bottom: var(--space-5);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.checkbox-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.checkbox-text a {
    color: var(--color-primary);
    text-decoration: none;
}

.checkbox-text a:hover {
    text-decoration: underline;
}

/* Full Width Button */
.btn-full {
    width: 100%;
    justify-content: center;
}

/* Auth Form Footer */
.auth-form-footer {
    margin-top: var(--space-5);
    text-align: center;
}

.auth-link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-footer-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Checkout Benefits */
.checkout-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.checkout-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-benefit .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-success);
}

/* Right Column - Order Summary */
.checkout-login-summary-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.order-summary-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    padding: var(--space-5);
}

.order-summary-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
}

.order-summary-items {
    display: flex;
    flex-direction: column;
}

/* Order summary item - matches cart flyout styling */
.order-summary-item {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
    align-items: flex-start;
}

.order-summary-item:first-child {
    padding-top: 0;
}

.order-summary-item:last-child {
    border-bottom: none;
}

.order-item-info {
    flex: 1;
    min-width: 0;
}

.order-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1) 0;
    line-height: var(--line-height-tight);
    display: block;
}

.order-item-type {
    margin: 0 0 4px 0;
}

.order-item-meta {
    margin: 0;
    line-height: 1.4;
}

.order-item-pricing {
    text-align: right;
    flex-shrink: 0;
}

.order-item-price {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.order-item-discounts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: var(--space-3);
    margin-top: var(--space-1);
}

.order-item-discount {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.order-item-discount::before {
    content: "•";
    margin-right: var(--space-2);
}

.order-item-discount-amount {
    color: var(--color-success);
}

.order-item-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.order-item-price-original {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

.order-item-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.order-item-price-pending {
    color: var(--color-text-tertiary);
}

.order-item-meta-pending {
    color: var(--color-text-tertiary);
    font-style: italic;
    font-size: 13px;
}

.order-item-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.order-item-quantity {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.order-item-quantity button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: var(--transition-colors);
}

.order-item-quantity button:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.order-item-quantity input {
    width: 36px;
    height: 28px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border-default);
    border-right: 1px solid var(--color-border-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.order-item-quantity input:focus {
    outline: none;
}

/* Old .order-item-remove styles removed - see checkout section for current styles */

.order-summary-divider {
    height: 1px;
    background-color: var(--color-border-light);
    margin: var(--space-4) 0;
}

.order-summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.order-summary-row .info-icon {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
    cursor: help;
}

.order-summary-row.order-summary-total {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-light);
}

/* Promo Code Section */
.order-summary-promo {
    margin-top: var(--space-3);
}

.order-summary-promo-toggle {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.order-summary-promo-toggle:hover {
    text-decoration: underline;
}

.order-summary-promo-form {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.order-summary-promo-form input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.order-summary-promo-form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Order Summary Continue Button */
.order-summary-actions {
    margin-top: var(--space-4);
}

/* Pass Upsell Card */
.pass-upsell-card {
    display: flex;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--color-bg-hover-blue) 0%, #f0f4fa 100%);
    border: 1px solid rgba(42, 84, 136, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.pass-upsell-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.pass-upsell-icon .material-symbols-outlined {
    font-size: 24px;
    color: white;
}

.pass-upsell-content h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.pass-upsell-content p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-2);
    line-height: 1.4;
}

.pass-upsell-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.pass-upsell-link:hover {
    text-decoration: underline;
}

/* Minimal Checkout Footer */
.checkout-footer {
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-4) 0;
}

.checkout-footer-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-footer p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

.checkout-footer-links {
    display: flex;
    gap: var(--space-4);
}

.checkout-footer-links a {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.checkout-footer-links a:hover {
    color: var(--color-primary);
}

/* Checkout Login Responsive */
@media (max-width: 768px) {
    .checkout-login-container {
        grid-template-columns: 1fr;
    }

    .checkout-login-summary-column {
        order: -1;
    }

    .order-summary-card {
        padding: var(--space-4);
    }

    .checkout-login-card {
        padding: var(--space-4);
    }

    .auth-form .form-row {
        grid-template-columns: 1fr;
    }

    .checkout-footer-inner {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }
}

/* ===========================================
   CHECKOUT FLOW - PAYMENT PAGE
   Billing address and payment form
   =========================================== */

.checkout-page {
    background-color: var(--color-bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Checkout Steps in Header */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.checkout-step-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-border-light);
    color: var(--color-text-secondary);
}

.checkout-step-number .material-symbols-outlined {
    font-size: 16px;
}

.checkout-step-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-step.active .checkout-step-number {
    background-color: var(--color-primary);
    color: white;
}

.checkout-step.active .checkout-step-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.checkout-step.completed .checkout-step-number {
    background-color: var(--color-success);
    color: white;
}

.checkout-step-divider {
    width: 24px;
    height: 1px;
    background-color: var(--color-border-light);
}

/* Main Checkout Area */
.checkout-main {
    flex: 1;
    padding: var(--space-6) var(--space-4);
}

.checkout-container {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-6);
    align-items: start;
}

/* Form Column */
.checkout-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.checkout-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
    padding: var(--space-5);
}

.checkout-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

/* Form Styles for Checkout */
.checkout-form .form-group {
    margin-bottom: var(--space-4);
}

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

.checkout-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.checkout-form .form-row-3 {
    grid-template-columns: 2fr 1fr 1fr;
}

.checkout-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.checkout-form .required {
    color: var(--color-error);
}

.checkout-form input,
.checkout-form select {
    width: 100%;
    height: var(--input-height-default);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-form input:focus,
.checkout-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.checkout-form input::placeholder {
    color: var(--color-text-disabled);
}

/* Payment Section */

/* Payment Method Selector */
.payment-method-selector {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.payment-method-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-card);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.payment-method-btn:hover {
    border-color: var(--color-border-default);
    background: var(--color-bg-hover);
}

.payment-method-btn.active {
    border-color: var(--color-primary);
    background: rgba(42, 84, 136, 0.05);
}

.payment-method-btn .payment-icon {
    font-size: 20px;
}

.payment-method-btn svg.payment-icon {
    flex-shrink: 0;
}

/* Payment Method Panels */
.payment-method-panel {
    padding-top: var(--space-3);
}

.payment-method-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--space-3);
}

.payment-panel-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
}

.payment-panel-info .material-symbols-outlined {
    color: var(--color-success);
    font-size: 24px;
    flex-shrink: 0;
}

.payment-panel-info p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* Apple Pay Button */
.apple-pay-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: #000;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.apple-pay-button:hover {
    background: #333;
}

.apple-pay-button svg {
    fill: currentColor;
    width: 18px;
    height: 18px;
}

/* Google Pay Button */
.google-pay-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: #fff;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.google-pay-button:hover {
    background: var(--color-bg-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.google-pay-button svg {
    width: 18px;
    height: 18px;
}

.payment-cards-accepted {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-bg-page);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.payment-cards-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.payment-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.payment-form .form-group {
    margin-bottom: 0;
}

/* Card Input with Icon */
.card-input-wrapper {
    position: relative;
}

.card-input-wrapper input {
    padding-right: 44px;
}

.card-input-icon {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-text-tertiary);
}

.cvc-icon {
    cursor: help;
}

/* Submit Section */
.checkout-submit {
    margin-top: var(--space-4);
}

.checkout-submit .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.checkout-submit .btn .material-symbols-outlined {
    font-size: 20px;
}

.checkout-submit-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.checkout-submit-note .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success);
}

/* Order Summary Checkout Button Section */
.order-summary-checkout {
    padding-top: var(--space-4);
}

.order-summary-checkout .btn {
    margin-bottom: var(--space-3);
}

.order-summary-checkout .btn:disabled {
    background-color: var(--color-border-default);
    border-color: var(--color-border-default);
    cursor: not-allowed;
}

.checkout-auth-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.4;
    margin-bottom: var(--space-3);
}

.checkout-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.checkout-secure-note .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success);
}

/* Order Item Remove Button - matches cart flyout styling */
.order-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-tertiary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: var(--transition-all);
}

.order-item-remove:hover {
    color: var(--color-error);
    background: var(--color-bg-hover);
}

.order-item-remove .material-symbols-outlined {
    font-size: 18px;
}

/* Read-only input styling */
.input-readonly {
    background-color: var(--color-bg-page);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    border-color: var(--color-border-light);
}

.input-readonly:focus {
    outline: none;
    border-color: var(--color-border-light);
    box-shadow: none;
}

/* Company Autocomplete */
.company-autocomplete-group {
    position: relative;
}

/* New organization input */
.new-org-input {
    margin-top: var(--space-2);
}

.new-org-input input {
    width: 100%;
}

.autocomplete-wrapper {
    position: relative;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

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

.autocomplete-item {
    padding: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 0.15s ease;
}

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

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background-color: var(--color-bg-hover);
}

.autocomplete-item.autocomplete-fixed {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    border-top: 1px solid var(--color-border-light);
}

.autocomplete-item.autocomplete-fixed .material-symbols-outlined {
    font-size: 18px;
    vertical-align: middle;
    margin-right: var(--space-1);
}

.autocomplete-no-results {
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

.autocomplete-selected {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.autocomplete-selected-name {
    flex: 1;
    color: var(--color-text-primary);
}

.autocomplete-selected-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: 50%;
}

.autocomplete-selected-clear:hover {
    color: var(--color-error);
    background-color: rgba(220, 53, 69, 0.1);
}

.autocomplete-selected-clear .material-symbols-outlined {
    font-size: 16px;
}

/* Order Summary (Checkout) - Sticky handled in checkout-flow-summary-column */

.order-summary-item-detailed {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.order-summary-item-detailed:first-child {
    padding-top: 0;
}

.order-summary-item-detailed:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.order-item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-item-meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.order-item-duration::before {
    content: '•';
    margin-right: var(--space-2);
}

/* Promo Code */
.promo-code-section {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.promo-code-message {
    font-size: var(--font-size-xs);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}

.promo-code-message.promo-error {
    color: var(--color-error);
    background-color: var(--color-error-light);
}

.promo-code-message.promo-success {
    color: var(--color-success-dark);
    background-color: var(--color-success-light);
}

.promo-code-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-success-light);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}

.promo-applied-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-success-dark);
    font-weight: var(--font-weight-medium);
}

.promo-applied-text .material-symbols-outlined {
    font-size: 16px;
}

.promo-remove-btn {
    background: none;
    border: none;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
}

.promo-remove-btn:hover {
    color: var(--color-error);
    text-decoration: underline;
}

/* Pending promo state - awaiting product selection */
.promo-code-pending {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-warning-light);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}

.promo-pending-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.promo-pending-header .material-symbols-outlined {
    font-size: 16px;
    color: #8a6d00;
    flex-shrink: 0;
}

.promo-pending-text {
    flex: 1;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: #8a6d00;
}

.promo-pending-msg {
    font-size: var(--font-size-xs);
    color: #6d5600;
    padding-left: 24px;  /* Align with text after icon */
}

.promo-code-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.promo-code-toggle:hover {
    color: var(--color-primary-dark);
}

.promo-code-toggle .material-symbols-outlined {
    font-size: 18px;
}

.promo-toggle-arrow {
    transition: transform 0.2s ease;
}

.promo-code-form {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
}

.promo-code-form input {
    flex: 1;
    height: 36px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.promo-code-form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.promo-input-wrapper {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}

.promo-code-form input.input-error {
    border-color: var(--color-error);
}

.promo-code-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-error-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

.promo-code-error .material-symbols-outlined {
    font-size: 16px;
}

/* Discount Row */
.order-summary-discount {
    color: var(--color-success-dark);
}

/* What's Included */
.order-included-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.order-included-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.order-included-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.order-included-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.order-included-list .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

/* Support Card */
.order-support-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg-page);
    border-radius: var(--radius-lg);
}

.order-support-card > .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.order-support-content {
    display: flex;
    flex-direction: column;
}

.order-support-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.order-support-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.order-support-link:hover {
    text-decoration: underline;
}

/* Checkout Responsive */
@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }

    .checkout-summary-column {
        order: -1;
    }

    .checkout-order-summary {
        position: static;
    }

    .checkout-steps {
        display: none;
    }
}

@media (max-width: 576px) {
    .checkout-form .form-row,
    .checkout-form .form-row-3 {
        grid-template-columns: 1fr;
    }

    .checkout-section {
        padding: var(--space-4);
    }
}

/* ===========================================
   CHECKOUT FLOW - CONFIRMATION PAGE
   Order complete, course access
   =========================================== */

.confirmation-page {
    background-color: var(--color-bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.confirmation-main {
    flex: 1;
    padding: var(--space-7) var(--space-4);
}

/* Success Message */
.confirmation-success {
    text-align: center;
    margin-bottom: var(--space-6);
}

.confirmation-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-success-light);
    border-radius: 50%;
}

.confirmation-success-icon .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-success);
}

.confirmation-success h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.confirmation-success p {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Confirmation Cards */
.confirmation-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.confirmation-card h2 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

.confirmation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.confirmation-card-header h2 {
    margin: 0;
}

.confirmation-order-id {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Order Details Grid */
.confirmation-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.confirmation-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.confirmation-detail-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.confirmation-detail-value {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.confirmation-total {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.confirmation-email-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-info-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-info-dark);
}

.confirmation-email-note .material-symbols-outlined {
    font-size: 20px;
}

/* Purchased Courses */
.confirmation-courses-intro {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.confirmation-courses {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.confirmation-course-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--color-bg-page);
    border-radius: var(--radius-md);
}

.confirmation-course-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.confirmation-course-icon .material-symbols-outlined {
    font-size: 28px;
    color: white;
}

.confirmation-course-info {
    flex: 1;
    min-width: 0;
}

.confirmation-course-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.confirmation-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.confirmation-course-meta span:not(:last-child)::after {
    content: '•';
    margin-left: var(--space-2);
}

/* CTA Buttons */
.confirmation-cta {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.confirmation-cta .btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* What's Next */
.confirmation-next-steps {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.confirmation-next-steps h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
    text-align: center;
}

.confirmation-steps-list {
    display: flex;
    gap: var(--space-5);
}

.confirmation-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.confirmation-step-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
}

.confirmation-step-content h4 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.confirmation-step-content p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

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

    .confirmation-cta {
        flex-direction: column;
    }

    .confirmation-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .confirmation-steps-list {
        flex-direction: column;
        gap: var(--space-4);
    }

    .confirmation-step-item {
        flex-direction: row;
        text-align: left;
        gap: var(--space-3);
    }

    .confirmation-step-icon {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .confirmation-course-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .confirmation-course-item .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===========================================
   CHECKOUT FLOW - SHARED HEADER/FOOTER
   Matches pe-b2b-prototype onboarding style
   =========================================== */

.checkout-flow-page {
    background-color: var(--color-bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Checkout Flow Header */
.checkout-flow-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4);
    z-index: var(--z-sticky);
}

.checkout-flow-header-left {
    flex: 1;
}

.checkout-flow-logo img {
    height: 24px;
    width: auto;
}

.checkout-flow-header-center {
    flex: 2;
    display: flex;
    justify-content: center;
}

.checkout-flow-header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Checkout Steps Indicator - Numbered Circles */
.checkout-flow-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.checkout-flow-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.checkout-flow-step .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-page);
    border: 2px solid var(--color-border-default);
    color: var(--color-text-secondary);
}

.checkout-flow-step.active .step-number {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.checkout-flow-step.active .step-label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.checkout-flow-step.completed .step-number {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.checkout-flow-step.completed .step-number .material-symbols-outlined {
    font-size: 18px;
}

.checkout-flow-step.completed .step-label {
    color: var(--color-success);
}

/* Clickable completed steps - hover effect */
a.checkout-flow-step {
    text-decoration: none;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: border-color 0.15s ease;
}

a.checkout-flow-step:hover {
    border-bottom-color: var(--color-primary);
}

a.checkout-flow-step:hover .step-label {
    color: var(--color-primary);
}

.step-connector {
    width: 40px;
    height: 2px;
    background: var(--color-border-light);
}

.step-connector.completed {
    background: var(--color-success);
}

/* Secure Badge */
.checkout-secure-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-secure-badge .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

/* Checkout Flow Main */
.checkout-flow-main {
    flex: 1;
    padding-top: 64px;
    display: flex;
    flex-direction: column;
}

/* Checkout Flow Footer */
.checkout-flow-footer {
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-4) 0;
}

.checkout-flow-footer-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-flow-footer p {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

.checkout-flow-footer-links {
    display: flex;
    gap: var(--space-4);
}

.checkout-flow-footer-links a {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.checkout-flow-footer-links a:hover {
    color: var(--color-primary);
}

/* Checkout Flow Container - Two Column Layout */
.checkout-flow-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-5);
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5);
    box-sizing: border-box;
}

/* Single column variant for confirmation pages */
.checkout-flow-container.checkout-flow-centered {
    grid-template-columns: 1fr;
    max-width: 800px;
}

.checkout-flow-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.checkout-flow-summary-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Make summary sticky but stop before footer */
.checkout-flow-summary-column .order-summary-card {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.order-summary-header {
    flex-shrink: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.order-summary-header .order-summary-title {
    margin-bottom: 0;
}

.order-summary-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) 0;
    min-height: 0;
}

/* Remove border from items in body - footer border-top provides separation */
.order-summary-body .order-summary-item,
.order-summary-body .order-summary-addon {
    border-bottom: none;
}

.order-summary-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-4);
}

/* Info message inside order summary */
.order-summary-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.order-summary-info > .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.order-summary-info p {
    margin: 0;
    line-height: 1.4;
}

.order-summary-info a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.order-summary-info a:hover {
    text-decoration: underline;
}

/* User Identity Banner */
.checkout-user-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.checkout-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.checkout-user-info .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-text-tertiary);
}

.checkout-user-info > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkout-user-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.checkout-user-email {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.checkout-user-switch {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.checkout-user-switch:hover {
    text-decoration: underline;
}

.checkout-flow-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    padding: var(--space-5);
    width: 100%;
}

/* Form inputs for checkout flow */
.checkout-flow-card input,
.checkout-flow-card select {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-flow-card input:focus,
.checkout-flow-card select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

.checkout-flow-card input::placeholder {
    color: var(--color-text-disabled);
}

.checkout-flow-card label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.checkout-flow-card .form-group {
    margin-bottom: var(--space-4);
}

.checkout-flow-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.checkout-flow-card .form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.checkout-flow-card .required {
    color: var(--color-error);
}

.checkout-card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.checkout-card-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.auth-divider span {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Auth Alternate Action */
.auth-alternate-action {
    text-align: center;
}

.auth-alternate-action p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* Auth Info Card */
.auth-info-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

.auth-info-card > .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.auth-info-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.auth-info-card p + p {
    margin-top: var(--space-1);
}

.auth-info-card a {
    color: var(--color-primary);
    text-decoration: none;
}

.auth-info-card a:hover {
    text-decoration: underline;
}

.auth-info-card h3 {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.auth-info-card-lg {
    padding: var(--space-5);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.auth-info-card-lg > .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: var(--space-2);
}

/* Checkout Back Link - 24px below to content */
.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-4); /* 24px */
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.checkout-back-link:hover {
    color: var(--color-primary);
}

.checkout-back-link .material-symbols-outlined {
    font-size: 18px;
}

/* Checkout User Identity Banner */
.checkout-user-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-background-alt, #F5F5F5);
    border-radius: var(--radius-sm);
}

.checkout-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkout-user-info > .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-text-tertiary);
}

.checkout-user-info div {
    display: flex;
    flex-direction: column;
}

.checkout-user-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.checkout-user-email {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.checkout-user-switch {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
}

.checkout-user-switch:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Checkout Flow Title and Subtitle */
.checkout-flow-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.checkout-flow-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4); /* 24px to form content */
}

/* Checkout CTA Button - 24px above from last content */
.checkout-flow-card > .btn:last-child,
.checkout-flow-card > form > .btn:last-child {
    margin-top: var(--space-4); /* 24px */
}

/* Checkout Form Actions (Back + Continue buttons) */
.checkout-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

@media (max-width: 480px) {
    .checkout-form-actions {
        flex-direction: column-reverse;
        gap: var(--space-3);
    }

    .checkout-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Add more spacing between sections inside forms */
.checkout-flow-card .checkout-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.checkout-flow-card .checkout-section + .checkout-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
}

/* Checkout Benefits List */
.checkout-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checkout-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-benefit .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
}

/* Checkout Support Card */
.checkout-support-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
}

.checkout-support-card > .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.checkout-support-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkout-support-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checkout-support-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.checkout-support-link:hover {
    text-decoration: underline;
}

/* Checkout Flow Responsive */
@media (max-width: 900px) {
    .checkout-flow-container {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .checkout-flow-summary-column {
        order: -1;
    }

    .checkout-flow-summary-column .order-summary-card {
        position: static;
        max-height: none;
        display: block;
        overflow: visible;
    }

    .order-summary-header {
        padding-bottom: 0;
        border-bottom: none;
    }

    .order-summary-header .order-summary-title {
        margin-bottom: var(--space-4);
    }

    .order-summary-body {
        overflow: visible;
        padding: 0;
    }

    .order-summary-footer {
        border-top: none;
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .checkout-flow-header {
        padding: 0 var(--space-3);
    }

    .checkout-flow-steps {
        display: none;
    }

    .checkout-flow-footer-inner {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .checkout-flow-container {
        padding: var(--space-4);
    }

    .checkout-flow-card {
        padding: var(--space-4);
    }
}

/* ===========================================
   COURSE DETAIL PAGE
   =========================================== */

.course-detail-page {
    padding: var(--space-6) 0 var(--space-9); /* 48px top for breadcrumb spacing */
}

.course-detail-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-5);
    align-items: start;
}

/* Main Content */
.course-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.course-detail-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.course-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.course-detail-title {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin: 0;
}

.course-detail-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.course-detail-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.course-detail-info-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
}

/* Sections */
.course-detail-section {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.course-detail-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.course-detail-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0 0 var(--space-3) 0;
}

/* Thumbnail */
.course-detail-thumbnail {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-hover);
}

.course-detail-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-detail-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.course-detail-thumbnail:hover .course-detail-play-overlay {
    opacity: 1;
}

.course-detail-play-overlay .material-symbols-outlined {
    font-size: 72px;
    color: white;
}

/* Description */
.course-detail-description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* Presenters */
.course-detail-presenters {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.presenter-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-lg);
}

.presenter-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    overflow: hidden;
}

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

.presenter-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.presenter-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.presenter-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.presenter-bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: var(--space-2) 0 0 0;
    line-height: var(--line-height-normal);
}

/* Credits Table */
.course-detail-credits {
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: white;
}

.credits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.credits-table th,
.credits-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.credits-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg-page);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credits-table th:first-child {
    border-top-left-radius: var(--radius-lg);
}

.credits-table th:last-child {
    border-top-right-radius: var(--radius-lg);
}

.credits-table td {
    color: var(--color-text-primary);
}

.credits-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.credits-table tbody tr:last-child td {
    border-bottom: none;
}

.jurisdiction-abbr {
    color: var(--color-text-tertiary);
    margin-left: 4px;
}

.credits-amount {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Materials */
.course-detail-materials {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.material-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.material-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.material-title {
    flex: 1;
    color: var(--color-text-primary);
}

.material-type {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

/* Transcript */
.course-detail-transcript {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.transcript-preview {
    margin: 0 0 var(--space-3) 0;
}

.transcript-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: 0;
}

.transcript-toggle:hover {
    text-decoration: underline;
}

.transcript-toggle .material-symbols-outlined {
    font-size: 20px;
}

.transcript-full {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Sidebar */
.course-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: 128px;
}

/* Teardrop Shape - BARBRI signature asymmetric rounded corners */
.teardrop {
    border-radius: 16px 0 16px 0; /* TL, TR, BR, BL */
}

.teardrop-sm {
    border-radius: 8px 0 8px 0;
}

/* Purchase Card */
.course-purchase-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 16px 0 16px 0; /* Teardrop shape */
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.course-purchase-price {
    text-align: center;
}

.price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.price-amount.price-included {
    font-size: var(--font-size-lg);
    color: var(--color-success);
}

.course-purchase-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.course-purchase-actions .btn {
    width: 100%;
    justify-content: center;
}

.course-purchase-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.course-purchase-divider::before,
.course-purchase-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.course-purchase-pass {
    text-align: center;
}

.pass-promo-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    width: 100%;
    justify-content: center;
}

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

/* Mobile Sticky CTA Bar */
.mobile-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-sticky-cta.visible {
    transform: translateY(0);
}

.mobile-sticky-cta-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    max-width: 100%;
}

.mobile-sticky-price {
    flex-shrink: 0;
}

.mobile-sticky-price-amount {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.mobile-sticky-actions {
    display: flex;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.mobile-sticky-actions .btn {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

/* Only show on mobile */
@media (min-width: 769px) {
    .mobile-sticky-cta {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
    }

    /* Add padding to footer so sticky bar doesn't cover content */
    .course-detail-page ~ .product-footer {
        padding-bottom: 80px;
    }
}

/* Credit Info Card (Sidebar) */
.course-credit-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 16px 0 16px 0; /* Teardrop shape */
    padding: var(--space-4);
}

.course-credit-card h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3) 0;
}

/* View Credits Button */
.view-credits-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family-primary);
}

.view-credits-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-default);
}

.view-credits-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.view-credits-text strong {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.view-credits-text span {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.view-credits-btn .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

/* Live Course Banner */
.live-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #E8F0F8 0%, #DEEBFF 100%);
    border: 1px solid #B3D4FF;
    border-radius: 8px;
    margin-bottom: 24px;
}

.live-banner > .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.live-banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-banner-date {
    font-weight: var(--font-weight-semibold);
    color: #1E3D66;
    font-size: var(--font-size-sm);
}

.live-banner-time {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
}

/* Calendar Dropdown */
.calendar-dropdown {
    position: relative;
}

.calendar-dropdown .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-dropdown .btn-secondary .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.calendar-dropdown.open .btn-secondary .material-symbols-outlined {
    transform: rotate(180deg);
}

.calendar-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    background: white;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.calendar-dropdown.open .calendar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    transition: background 0.15s ease;
}

.calendar-dropdown-menu .dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.calendar-dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.calendar-dropdown-menu .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.calendar-dropdown-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* NASBA Details Section */
.nasba-section {
    /* Inherits from .course-detail-section */
}

.nasba-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.nasba-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nasba-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nasba-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.learning-objectives {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

.learning-objectives h3 {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2) 0;
}

.objectives-content {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.objectives-content ul {
    margin: 0;
    padding-left: var(--space-4);
}

.objectives-content li {
    margin-bottom: var(--space-1);
}

.nasba-sponsor {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.nasba-sponsor img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
}

.nasba-sponsor p {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Course Outline */
.course-outline {
    margin: 0;
    padding-left: var(--space-4);
}

.course-outline li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-2);
}

/* Presenter Styling (Updated to match learner dashboard) */
.course-detail-presenters {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.presenter-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

.presenter-item .presenter-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.presenter-item .presenter-initials {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.presenter-item .presenter-details {
    flex: 1;
    min-width: 0;
}

.presenter-item .presenter-details h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 4px 0;
    color: var(--color-text-primary);
}

.presenter-item .presenter-details h4 a {
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.presenter-item .presenter-details h4 a:hover {
    text-decoration: underline;
}

.presenter-item .presenter-details h4 a .material-symbols-outlined {
    font-size: 14px;
}

.presenter-item .presenter-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
}

.presenter-item .presenter-bio {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Credits Table - Jurisdiction Links */
.credits-table .jurisdiction-link {
    color: var(--color-primary);
    text-decoration: none;
}

.credits-table .jurisdiction-link:hover {
    text-decoration: underline;
}

/* Responsive for live banner */
@media (max-width: 640px) {
    .live-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .nasba-details {
        grid-template-columns: 1fr;
    }

    .presenter-item {
        flex-direction: column;
        text-align: center;
    }

    .presenter-item .presenter-avatar {
        margin: 0 auto;
    }
}

/* Related Courses Section (Full-width, between main and footer) */
.related-courses-section {
    background: var(--color-bg-page);
    padding: var(--space-7) 0;
    border-top: 1px solid var(--color-border-light);
}

.related-courses-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4) 0;
}

.related-courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.related-course-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.related-course-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.related-course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.related-course-duration {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.related-course-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-course-price {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .course-detail-layout {
        grid-template-columns: 1fr;
    }

    .course-detail-sidebar {
        position: static;
        order: -1;
    }

    .related-courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .course-detail-title {
        font-size: var(--font-size-2xl);
    }

    .course-detail-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .related-courses-grid {
        grid-template-columns: 1fr;
    }

    .price-amount {
        font-size: var(--font-size-2xl);
    }
}


/* ======================================
   Toast Notifications
   ====================================== */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    border-radius: 8px;
    background: var(--color-rich-black);
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: toastSlideIn 0.3s ease;
}

.toast-success {
    background: #36B37E;
}

.toast-error {
    background: #DE350B;
}

.toast-close {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    /* Footer - single column on small phones */
    .product-footer-columns {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .global-footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .global-footer-column h4 {
        margin-bottom: var(--space-2);
    }

    .global-footer-column ul {
        margin-bottom: var(--space-4);
    }

    .global-footer-bottom .footer-contact p {
        font-size: 12px;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================
   Library Landing Page Styles (CLE, CPE, Skills)
   ============================================ */

/* Compact Hero - For library landing pages */
.landing-hero-compact {
    padding: var(--space-7) 0 var(--space-5);
}

.landing-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
    background: rgba(42, 84, 136, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.landing-hero-badge .material-symbols-outlined {
    font-size: 18px;
}

/* Quick Stats Bar */
.quick-stats {
    background: var(--color-rich-black);
    padding: var(--space-4) 0;
}

.quick-stats-inner {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quick-stat-number {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: white;
}

.quick-stat-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* Reduce top padding for sections immediately following quick-stats */
.quick-stats + .landing-section {
    padding-top: var(--space-6);
}

/* Skills Category Grid */
.skills-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.skills-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.skills-category-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
}

.skills-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-3);
    background: var(--color-bg-hover-blue);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 24px;
}

.skills-category-card h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.skills-category-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.skills-category-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin-top: auto;
}

.skills-category-link .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.15s ease;
}

.skills-category-card:hover .skills-category-link .material-symbols-outlined {
    transform: translateX(4px);
}

/* Skills Course Grid */
.skills-courses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.skills-course-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.skills-course-card:hover {
    border-color: var(--color-border-default);
    background-color: var(--color-bg-hover);
    text-decoration: none;
}

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

.skills-course-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: var(--space-2) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.skills-course-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.skills-course-duration {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-left: var(--space-2);
}

.skills-course-duration .material-symbols-outlined {
    font-size: 14px;
}

.skills-course-arrow {
    color: var(--color-text-tertiary);
    font-size: 20px;
    transition: transform 0.15s ease;
}

.skills-course-card:hover .skills-course-arrow {
    transform: translateX(4px);
}

/* Requirements Callout */
.requirements-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.requirements-callout-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.requirements-icon {
    flex-shrink: 0;
    font-size: 32px;
    color: var(--color-primary);
}

.requirements-text h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.requirements-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.requirements-callout .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* NASBA Callout (CPE specific) */
.nasba-callout {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-5);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.nasba-callout-logo {
    flex-shrink: 0;
    width: 80px;
}

.nasba-callout-logo img {
    width: 100%;
    height: auto;
}

.nasba-callout-content h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.nasba-callout-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-2);
}

.nasba-callout-content p:last-child {
    margin-bottom: 0;
}

.nasba-callout-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.nasba-callout-note a {
    color: var(--color-primary);
}

/* Features Grid 3-column variant */
.features-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Subnav link with dropdown */
.product-nav-link-with-dropdown {
    cursor: pointer;
}

/* Responsive: Skills Category Grid */
@media (max-width: 1024px) {
    .skills-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .landing-hero-compact {
        padding: 0 0 var(--space-5);
    }

    .quick-stats-inner {
        gap: var(--space-5);
    }

    .quick-stat-number {
        font-size: var(--font-size-xl);
    }

    .skills-category-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .skills-category-card {
        padding: var(--space-4);
    }

    .skills-courses-grid {
        grid-template-columns: 1fr;
    }

    .requirements-callout {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .requirements-callout .btn {
        width: 100%;
    }

    .nasba-callout {
        flex-direction: column;
    }

    .nasba-callout-logo {
        width: 60px;
    }

    .features-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   CHECKOUT COMPONENTS - REUSABLE
   Payment schedule, express checkout, card forms
   =========================================== */

/* Form Sections */
.form-section {
    margin-bottom: var(--space-6);
}

.form-section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Section Number - Numbered step indicator */
.section-number {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    flex-shrink: 0;
}

/* Section Description - Below section title, aligned under title text */
.section-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: calc(-1 * var(--space-2)) 0 var(--space-4) 0;
    margin-left: calc(28px + var(--space-3));
}

.form-subsection-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: var(--space-4) 0 var(--space-3) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

/* Schedule Options - Payment schedule selection cards */
.schedule-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.schedule-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 var(--space-2);
    align-items: center;
    padding: var(--space-3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-option:hover:not(.disabled) {
    border-color: var(--color-primary);
}

.schedule-option.selected {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.schedule-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.schedule-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.schedule-option .option-radio {
    grid-row: 1 / 3;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-default);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-option.selected .option-radio {
    border-color: var(--color-primary);
}

.schedule-option.selected .option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
}

.schedule-option-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.schedule-option-title {
    font-weight: var(--font-weight-semibold);
}

.schedule-option-price {
    margin-left: auto;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.schedule-option-badge {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-active);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.schedule-option-desc {
    grid-column: 2;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Payment Details Sections */
.payment-details-section {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.payment-schedule-section {
    margin-bottom: var(--space-4);
}

/* Partial Payment Breakdown */
.partial-breakdown {
    background: var(--color-bg-hover);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.partial-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    font-size: var(--font-size-sm);
}

.partial-total {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

/* Express Checkout (Apple Pay, Google Pay) */
.express-checkout {
    margin-bottom: var(--space-4);
}

.express-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.express-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0 var(--space-4);
}

.express-btn:hover {
    transform: translateY(-1px);
}

.express-btn:active {
    transform: translateY(0);
}

.express-btn.active {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Apple Pay Button - Official CSS implementation */
/* Uses native -webkit-appearance in Safari, fallback for other browsers */
@supports (-webkit-appearance: -apple-pay-button) {
    .express-btn-apple {
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: plain;
        -apple-pay-button-style: black;
        border: none;
        padding: 0;
        text-indent: -9999px;
    }

    .express-btn-apple:hover {
        transform: none;
    }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .express-btn-apple {
        background: #000;
        color: #fff;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
    }

    .express-btn-apple:hover {
        background: #1a1a1a;
    }
}

/* Google Pay Button */
.express-btn-google {
    background: #fff;
    border: 1px solid #dadce0;
}

.express-btn-google:hover {
    background: #f8f9fa;
    border-color: #c4c7c9;
}

.express-btn-google img {
    height: 24px;
    width: auto;
}

.express-divider {
    display: flex;
    align-items: center;
    margin: var(--space-4) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.express-divider::before,
.express-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}

.express-divider span {
    padding: 0 var(--space-3);
}

/* Card Form */
.card-input-wrapper {
    position: relative;
}

.card-input-icon {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 20px;
}

/* Form Select */
.form-select {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    background: white;
}

/* Form Hint */
.form-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

.form-hint .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* Employer Selection */
.employer-method-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.employer-tab {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: white;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-tab:hover {
    border-color: var(--color-border-default);
}

.employer-tab.active {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
    font-weight: var(--font-weight-semibold);
}

.employer-selected {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.employer-selected .material-symbols-outlined {
    color: var(--color-primary);
}

.employer-clear {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    color: var(--color-text-secondary);
}

.employer-clear:hover {
    color: var(--color-error);
}

/* Due Today Section */
.order-summary-due-today {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border-light);
}

.due-today-row {
    display: flex;
    justify-content: space-between;
    font-weight: var(--font-weight-semibold);
}

.due-today-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0 0;
}

/* Option Radio - Generic accessible radio indicator */
.option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-default);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Exam Date Options - Date selection grid */
.exam-date-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.exam-date-option {
    cursor: pointer;
}

.exam-date-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.exam-date-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.exam-date-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.exam-date-option:hover .exam-date-card {
    border-color: var(--color-primary);
}

.exam-date-option.selected .exam-date-card,
.exam-date-option input:checked + .exam-date-card {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.exam-date-option input:checked + .exam-date-card .option-radio {
    border-color: var(--color-primary);
}

.exam-date-option input:checked + .exam-date-card .option-radio::after {
    background: var(--color-primary);
}

.exam-date-month {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
}

.exam-date-days {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Package Options - Product package selection */
.package-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.package-option {
    cursor: pointer;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: all 0.2s ease;
    position: relative;
}

.package-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.package-option:hover {
    border-color: var(--color-primary);
}

.package-option.selected {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.package-option.selected .option-radio,
.package-option input:checked ~ .package-header .option-radio {
    border-color: var(--color-primary);
}

.package-option.selected .option-radio::after,
.package-option input:checked ~ .package-header .option-radio::after {
    background: var(--color-primary);
}

.package-popular {
    border-color: var(--color-primary);
}

.package-badge {
    position: absolute;
    top: -10px;
    right: var(--space-4);
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.package-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.package-name {
    flex: 1;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
}

.package-price {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
}

.package-description {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.package-features li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.package-features .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success);
}

/* Add-on Options - Checkbox selection cards */
.addon-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.addon-option {
    cursor: pointer;
}

.addon-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.addon-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.addon-option:hover .addon-card {
    border-color: var(--color-primary);
}

.addon-option.selected .addon-card {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.addon-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.addon-checkbox .material-symbols-outlined {
    font-size: 14px;
    color: transparent;
    transition: color 0.2s ease;
}

.addon-option.selected .addon-checkbox {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.addon-option.selected .addon-checkbox .material-symbols-outlined {
    color: white;
}

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

.addon-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.addon-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.addon-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
}

.addon-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Add-ons in order summary */
.order-summary-addon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-xs);
}

.order-summary-addon:last-child {
    border-bottom: none;
}

.addon-summary-name {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.addon-summary-price {
    color: var(--color-text-primary);
}

/* Order summary addon items (smaller variant) */
.order-summary-addon-item {
    padding: var(--space-2) 0;
    border-bottom: none;
}

.order-item-title-sm {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.order-item-price-sm {
    font-size: var(--font-size-sm);
}

/* Checkout Components - Mobile Responsive */
@media (max-width: 640px) {
    .express-buttons {
        grid-template-columns: 1fr;
    }

    .employer-method-tabs {
        flex-direction: column;
    }

    .exam-date-options {
        grid-template-columns: 1fr;
    }

    .addon-header {
        flex-direction: column;
        gap: var(--space-1);
    }

    .addon-price {
        font-size: var(--font-size-sm);
    }
}

/* ===========================================
   ONBOARDING FLOW STYLES
   =========================================== */

/**
 * Onboarding Container & Cards
 * Used across /sqe/onboarding/, /bar-review/onboarding/, /adaptibar/onboarding/
 */
.onboarding-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-4);
}

.onboarding-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.onboarding-card-wide {
    max-width: 640px;
    margin: 0 auto;
}

.onboarding-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-5);
    text-align: center;
}

/**
 * Onboarding Forms
 */
.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.onboarding-form .form-group {
    margin-bottom: 0;
}

.onboarding-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.onboarding-form .form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
}

.onboarding-form .required {
    color: var(--color-error);
}

.onboarding-form input[type="text"],
.onboarding-form input[type="email"],
.onboarding-form input[type="tel"],
.onboarding-form select,
.onboarding-form textarea {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.onboarding-form input:focus,
.onboarding-form select:focus,
.onboarding-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(42, 84, 136, 0.1);
}

/**
 * Form Grid Layouts
 */
.form-grid {
    display: grid;
    gap: var(--space-4);
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/**
 * Radio and Checkbox Groups
 */
.radio-group,
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.radio-group-vertical,
.checkbox-group-vertical {
    flex-direction: column;
    gap: var(--space-2);
}

.radio-item,
.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}

.radio-text,
.checkbox-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

.radio-text strong,
.checkbox-text strong {
    display: block;
    font-weight: var(--font-weight-semibold);
}

.radio-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

/**
 * Materials Options (Digital vs Physical)
 */
.materials-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.materials-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.materials-option:hover {
    border-color: var(--color-border-default);
}

.materials-option.selected {
    border-color: var(--color-primary);
    background: var(--color-bg-hover-blue);
}

.materials-option input[type="radio"] {
    margin-top: 4px;
}

.materials-option-content {
    flex: 1;
}

.materials-option-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.materials-option-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

.materials-option-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

/**
 * Shipping Methods
 */
.shipping-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.shipping-method {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.shipping-method:hover {
    border-color: var(--color-border-default);
}

.shipping-method.selected {
    border-color: var(--color-primary);
    background: var(--color-bg-hover-blue);
}

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

.shipping-method-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.shipping-method-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.shipping-method-price {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.shipping-method-price.free {
    color: var(--color-success);
}

/**
 * Subject Confidence Grid (Adaptibar)
 */
.subject-confidence-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.subject-confidence-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bg-page);
    border-radius: var(--radius-md);
}

.subject-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    flex: 1;
}

.confidence-rating {
    display: flex;
    gap: var(--space-2);
}

.confidence-option {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.confidence-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.confidence-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.confidence-option:hover .confidence-label {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.confidence-option input[type="radio"]:checked + .confidence-label {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.confidence-legend {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    padding: 0 var(--space-3);
}

/**
 * Onboarding Actions (Navigation Buttons)
 */
.onboarding-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-light);
}

.onboarding-actions-split {
    justify-content: space-between;
}

.onboarding-actions .material-symbols-outlined {
    font-size: 20px;
}

/**
 * Conditional Fields
 */
.conditional-field {
    animation: fadeIn 0.2s ease;
}

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

/**
 * Onboarding Mobile Responsive
 */
@media (max-width: 640px) {
    .onboarding-container {
        padding: var(--space-4) var(--space-3);
    }

    .onboarding-card {
        padding: var(--space-4);
    }

    .subject-confidence-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .confidence-rating {
        width: 100%;
        justify-content: space-between;
    }

    .confidence-label {
        width: 44px;
        height: 44px;
    }

    .onboarding-actions {
        flex-direction: column;
    }

    .onboarding-actions-split {
        flex-direction: column-reverse;
    }

    .onboarding-actions .btn-secondary,
    .onboarding-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .materials-option {
        flex-direction: column;
        text-align: center;
    }
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/**
 * Teardrop Corners
 * Asymmetric rounding: top-left and bottom-right rounded, others square
 * Creates a distinctive diagonal visual flow
 */
.teardrop,
.teardrop-md {
    border-radius: 16px 0 16px 0 !important;
}

.teardrop-sm {
    border-radius: 8px 0 8px 0 !important;
}

.teardrop-lg {
    border-radius: 24px 0 24px 0 !important;
}

/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

/**
 * Visually Hidden
 * Hides content visually but keeps it accessible to screen readers
 * and maintains keyboard focus capability
 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * Focus Visible Indicators for Custom Radio/Checkbox Inputs
 * When native inputs receive keyboard focus, show outline on parent container
 */
.schedule-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.exam-date-option:has(input:focus-visible) .exam-date-card {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.package-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.addon-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Product Options - Radio selection cards (Adaptibar products) */
.product-option {
    cursor: pointer;
    position: relative;
}

.product-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.product-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}