body { background: transparent; font-family: var(--ctms-font); }

        /* Brand the primary buttons via Bootstrap 5.3 button CSS vars. */
        .btn-primary {
            --bs-btn-bg: var(--ctms-primary);
            --bs-btn-border-color: var(--ctms-primary);
            --bs-btn-hover-bg: var(--ctms-primary-hover);
            --bs-btn-hover-border-color: var(--ctms-primary-hover);
            --bs-btn-active-bg: var(--ctms-primary-hover);
            --bs-btn-active-border-color: var(--ctms-primary-hover);
            --bs-btn-disabled-bg: var(--ctms-primary);
            --bs-btn-disabled-border-color: var(--ctms-primary);
            --bs-btn-color: var(--ctms-primary-contrast);
            --bs-btn-hover-color: var(--ctms-primary-contrast);
            --bs-btn-active-color: var(--ctms-primary-contrast);
            --bs-btn-disabled-color: var(--ctms-primary-contrast);
        }

        .class-card {
            border: 1px solid var(--ctms-border);
            border-radius: var(--ctms-radius);
            padding: 1.25rem;
            margin-bottom: 1rem;
            background: var(--ctms-surface);
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .class-card:hover {
            border-color: #94a3b8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .class-card .class-name { font-weight: 700; font-size: 1.05rem; color: var(--ctms-text); }
        .class-card .class-meta { font-size: 0.85rem; color: var(--ctms-muted); margin-top: 0.25rem; }
        .class-card .class-meta i { margin-right: 0.25rem; }
        .class-card .class-price { font-weight: 700; color: var(--ctms-text); font-size: 1.1rem; }
        .class-card .class-sessions { font-size: 0.8rem; color: #94a3b8; margin-top: 0.5rem; }

        .page-header { margin-bottom: 1.5rem; }
        .page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--ctms-text); margin: 0; }
        .page-header .subtitle { color: var(--ctms-muted); font-size: 0.9rem; }

        .empty-state { text-align: center; padding: 3rem 1rem; color: #94a3b8; }

        .program-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
        .program-filter .program-chip {
            border: 1px solid var(--ctms-border); background: #fff; border-radius: 999px;
            padding: 0.35rem 0.9rem; font-size: 0.85rem; color: var(--ctms-text);
            cursor: pointer; user-select: none; transition: all 0.15s ease;
        }
        .program-filter .program-chip:hover { border-color: #94a3b8; }
        .program-filter .program-chip.active {
            background: var(--ctms-primary); border-color: var(--ctms-primary); color: var(--ctms-primary-contrast);
        }
        .ctms-hosted .program-filter { justify-content: center; }
        .ctms-hosted .program-filter .program-chip { font-family: 'Yanone Kaffeesatz', sans-serif; letter-spacing: 0.3px; }

        .ctms-hosted .program-filter .program-chip { font-family: 'Yanone Kaffeesatz', sans-serif; letter-spacing: 0.3px; }

        /* ── Listing toolbar (opt-in via #ctmsToolbar mount) ──────────── */
        #ctmsToolbar { display: none; margin-bottom: 1.25rem; }
        .ctms-tb-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
        .ctms-tb-row + .ctms-tb-row { margin-top: 0.6rem; }
        .ctms-tb-search { display: block; position: relative; }
        .ctms-tb-search i {
            position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
            color: var(--ctms-muted); font-size: 1.05rem; pointer-events: none;
        }
        .ctms-tb-input {
            width: 100%; border: 1px solid var(--ctms-border); border-radius: 999px;
            padding: 0.6rem 1rem 0.6rem 2.4rem; font-size: 0.92rem;
            background: #fff; color: var(--ctms-text); outline: none;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .ctms-tb-input:focus {
            border-color: var(--ctms-primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctms-primary) 12%, transparent);
        }
        .ctms-tb-select {
            border: 1px solid var(--ctms-border); border-radius: 999px;
            padding: 0.4rem 0.9rem; font-size: 0.85rem;
            background: #fff; color: var(--ctms-text); cursor: pointer; outline: none;
        }
        .ctms-tb-select:focus { border-color: var(--ctms-primary); }
        .ctms-tb-toggle, .ctms-tb-chip {
            border: 1px solid var(--ctms-border); background: #fff; border-radius: 999px;
            padding: 0.35rem 0.9rem; font-size: 0.85rem; color: var(--ctms-text);
            cursor: pointer; user-select: none; transition: all 0.15s ease;
        }
        .ctms-tb-toggle:hover, .ctms-tb-chip:hover { border-color: #94a3b8; }
        .ctms-tb-toggle.active, .ctms-tb-chip.active {
            background: var(--ctms-primary); border-color: var(--ctms-primary); color: var(--ctms-primary-contrast);
        }
        .ctms-tb-facets { gap: 1.25rem; }
        .ctms-tb-facet { display: flex; flex-wrap: wrap; gap: 0.5rem; }

        /* Enrollment modal */
        .enroll-step-container { min-height: 240px; }
        .enroll-step { display: none; }
        .enroll-step.active { display: block; }

        /* Certs */
        .included-cert-item { padding: 0.2rem 0; font-size: 0.9rem; color: #212529; }
        .included-cert-item i { color: #16a34a; margin-right: 0.4rem; }

        .cert-card {
            border: 2px solid #e9ecef;
            border-radius: var(--ctms-radius);
            padding: 0.75rem 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
            user-select: none;
            cursor: pointer;
            background: #fff;
        }
        .cert-card:hover { border-color: #94a3b8; }
        .cert-card .cert-info { display: flex; align-items: center; gap: 0.75rem; }
        .cert-card .cert-name { font-weight: 600; font-size: 0.9rem; color: #212529; }
        .cert-card .cert-price { font-weight: 700; font-size: 0.9rem; color: #6c757d; }
        .cert-card .cert-check {
            width: 22px; height: 22px;
            border-radius: 50%;
            border: 2px solid #dee2e6;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        .cert-card .cert-check i { font-size: 14px; color: transparent; transition: color 0.15s ease; }
        .cert-card.selected { border-color: var(--ctms-primary); background: #eff6ff; background: color-mix(in srgb, var(--ctms-primary) 8%, #fff); }
        .cert-card.selected .cert-check { background: var(--ctms-primary); border-color: var(--ctms-primary); }
        .cert-card.selected .cert-check i { color: var(--ctms-primary-contrast); }
        .cert-card.selected .cert-price { color: var(--ctms-primary); }

        /* ── Session selection cards (Phase 3) ─────────────────────────── */
        .session-card .cert-name { font-size: 0.92rem; }
        .session-card .session-meta { font-size: 0.78rem; color: #6c757d; margin-top: 0.1rem; }
        .session-card .session-avail { font-size: 0.78rem; font-weight: 600; }
        .session-card .session-avail.full  { color: #dc3545; }
        .session-card .session-avail.tight { color: #b45309; }
        .session-card .session-avail.open  { color: #16a34a; }
        .session-card-disabled {
            opacity: 0.55;
            cursor: not-allowed !important;
            background: #f8f9fb;
        }
        .session-card-disabled:hover { border-color: #e9ecef; }
        .session-card[data-select-mode="single"] .cert-check { border-radius: 50%; }
        .session-card[data-select-mode="single"].selected .cert-check::after {
            content: ''; width: 10px; height: 10px; background: var(--ctms-primary-contrast); border-radius: 50%;
        }
        .session-card[data-select-mode="single"] .cert-check i { display: none; }

        .session-card.session-covered {
            cursor: default;
            border-color: #16a34a;
            background: #f0fdf4;
        }
        .session-card.session-covered .session-avail { color: #16a34a; }

        /* ── Conference track grouping ─────────────────────────────────── */
        .session-track-group:not(:first-child) { margin-top: 0.6rem; }
        .session-track-head {
            font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--ctms-primary);
            margin: 0 0 0.55rem; padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--ctms-border);
            display: flex; align-items: baseline; gap: 0.5rem;
        }
        .session-track-head .track-count {
            font-size: 0.7rem; font-weight: 500; letter-spacing: 0;
            text-transform: none; color: var(--ctms-muted);
        }

        .session-desc {
            font-size: 0.82rem;
            color: #64748b;
            margin-top: 0.15rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Info card */
        .info-card { background: #f8fafc; border: 1px solid var(--ctms-border); border-radius: 0.5rem; padding: 0.75rem 1rem; }
        .info-card .info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ctms-muted); margin-bottom: 0.1rem; }
        .info-card .info-value { font-weight: 600; color: var(--ctms-text); font-size: 0.9rem; }

        /* Stripe */
        .stripe-card-wrapper {
            border: 1px solid var(--ctms-border);
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            background: #fff;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .stripe-card-wrapper.StripeElement--focus {
            border-color: var(--ctms-accent);
            box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctms-accent) 12%, transparent);
        }

        .price-summary {
            background: #f8fafc;
            border: 1px solid var(--ctms-border);
            border-radius: 0.5rem;
            padding: 1rem;
        }
        .price-line { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.9rem; }
        .price-line.total { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--ctms-border); padding-top: 0.5rem; margin-top: 0.25rem; }
        .price-line.fee { color: #94a3b8; font-size: 0.85rem; }

        .success-state { text-align: center; padding: 2rem 1rem; }
        .success-icon { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
        .success-icon i { font-size: 2rem; color: #16a34a; }

        /* Private-class gate (Phase 1 of private-class feature) */
        .private-state { text-align: center; padding: 2rem 1rem; }
        .private-icon { width: 64px; height: 64px; border-radius: 50%; background: #fef3c7; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
        .private-icon i { font-size: 2rem; color: #b45309; }

        .powered-by { text-align: center; padding: 1rem; font-size: 0.75rem; color: #94a3b8; }
        .powered-by a { color: var(--ctms-muted); text-decoration: none; }

        /* ── White-glove hosted chrome (only applied on /p/<slug>) ──────── */
        body.ctms-hosted { background: #f6f7f9; }
        .ctms-hosted-header {
            background: #fff;
            text-align: center;
            padding: 1.5rem 1rem;
            border-bottom: 3px solid var(--ctms-primary);
        }
        .ctms-hosted-logo { max-height: 72px; width: auto; }
        .ctms-hosted-wordmark { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.5rem; color: var(--ctms-text); }
        .ctms-hosted .page-header { text-align: center; margin-top: 1.5rem; }
        .ctms-hosted .page-header h1 { font-family: 'Playfair Display', serif; }
        .ctms-hosted .page-header .subtitle {
            font-family: 'Yanone Kaffeesatz', sans-serif;
            font-size: 1.05rem; letter-spacing: 0.5px; text-transform: uppercase;
        }
        .ctms-hosted .class-card .class-name {
            font-family: 'Yanone Kaffeesatz', sans-serif; letter-spacing: 0.3px; font-size: 1.15rem;
        }
        .ctms-hosted-footer {
            text-align: center; padding: 1.5rem 1rem; margin-top: 1rem;
            color: var(--ctms-muted); font-size: 0.85rem; border-top: 1px solid var(--ctms-border);
        }
        .ctms-hosted-footer a { color: var(--ctms-primary); text-decoration: none; }
        .ctms-hosted-footer .ctms-attrib { display: block; margin-top: 0.6rem; font-size: 0.7rem; color: #b6bdc7; }
        .ctms-hosted-footer .ctms-attrib a { color: #b6bdc7; }

        /* ── Embed checkout overlay (only on ?embed=1, cross-site iframe) ── */
        body.ctms-embed { background: #fff; }
        .embed-checkout { max-width: 560px; margin: 0 auto; padding: 0.5rem; }
        .embed-checkout-header {
            display: flex; justify-content: space-between; align-items: flex-start;
            background: linear-gradient(135deg, var(--ctms-primary), var(--ctms-accent));
            color: var(--ctms-primary-contrast);
            padding: 1rem 1.25rem;
            border-radius: var(--ctms-radius) var(--ctms-radius) 0 0;
        }
        .embed-checkout-header h5 { margin: 0; font-weight: 700; font-size: 1.05rem; }
        .embed-checkout-header small { opacity: 0.8; }
        .embed-checkout-header .embed-close {
            background: none; border: none; color: inherit;
            font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
        }
        .embed-checkout-body {
            border: 1px solid var(--ctms-border); border-top: none;
            border-radius: 0 0 var(--ctms-radius) var(--ctms-radius);
            padding: 1.25rem; background: #fff;
        }
        /* Custom footer HTML: minimal attribution strip shown beneath it. */
        .ctms-hosted-footer-min { border-top: none; padding-top: 0.25rem; margin-top: 0; }
        .ctms-custom-header, .ctms-custom-footer { /* intentional no-op hook for custom_css scoping */ }

        /* ── Listing preset: grid ─────────────────────────────────────── */
.ctms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ctms-grid .class-card { margin-bottom: 0; height: 100%; }
@media (max-width: 640px) { .ctms-grid { grid-template-columns: 1fr; } }

/* ── Listing preset: table ────────────────────────────────────── */
.ctms-table-wrap { overflow-x: auto; }
.ctms-table { width: 100%; border-collapse: collapse; background: var(--ctms-surface); }
.ctms-table th {
    text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--ctms-muted); font-weight: 700; padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--ctms-border); white-space: nowrap;
}
.ctms-table td { padding: 0.75rem; border-bottom: 1px solid var(--ctms-border); font-size: 0.88rem; color: var(--ctms-text); vertical-align: middle; }
.ctms-table tbody tr:hover { background: #f8fafc; }
.ctms-t-name { font-weight: 600; }
.ctms-t-price { font-weight: 700; white-space: nowrap; }
.ctms-t-cta { text-align: right; white-space: nowrap; }
.ctms-full-badge {
    display: inline-block; margin-left: 0.4rem; font-size: 0.7rem; font-weight: 700;
    color: #dc3545; border: 1px solid #dc3545; border-radius: 999px; padding: 0 0.4rem;
}
@media (max-width: 640px) {
    .ctms-table thead { display: none; }
    .ctms-table, .ctms-table tbody, .ctms-table tr, .ctms-table td { display: block; width: 100%; }
    .ctms-table tr { border: 1px solid var(--ctms-border); border-radius: var(--ctms-radius); margin-bottom: 0.75rem; padding: 0.25rem 0; }
    .ctms-table td { border: none; padding: 0.35rem 0.85rem; }
    .ctms-table td[data-label]::before {
        content: attr(data-label); display: block;
        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ctms-muted);
    }
    .ctms-t-cta { text-align: left; padding-top: 0.5rem !important; }
}

/* ── Listing preset: accordion (grouped by program) ─────────────── */
.ctms-acc-group { border: 1px solid var(--ctms-border); border-radius: var(--ctms-radius); background: var(--ctms-surface); margin-bottom: 0.75rem; overflow: hidden; }
.ctms-acc-head {
    display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none;
    padding: 0.9rem 1.1rem; background: #f8fafc; transition: background 0.15s ease;
}
.ctms-acc-head:hover { background: #f1f5f9; }
.ctms-acc-head:focus { outline: 2px solid var(--ctms-primary); outline-offset: -2px; }
.ctms-acc-title { font-weight: 700; color: var(--ctms-text); flex-grow: 1; }
.ctms-acc-count { font-size: 0.8rem; color: var(--ctms-muted); white-space: nowrap; }
.ctms-acc-chev { font-size: 1.25rem; color: var(--ctms-muted); transition: transform 0.2s ease; }
.ctms-acc-group.open .ctms-acc-chev { transform: rotate(180deg); }
.ctms-acc-body { display: none; padding: 0 1.1rem 0.5rem; }
.ctms-acc-group.open .ctms-acc-body { display: block; }
.ctms-acc-desc { font-size: 0.88rem; color: var(--ctms-muted); padding: 0.9rem 0 0.4rem; border-bottom: 1px solid var(--ctms-border); white-space: pre-line; }
.ctms-acc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--ctms-border); }
.ctms-acc-row:last-child { border-bottom: none; }
.ctms-acc-row-name { font-weight: 600; color: var(--ctms-text); font-size: 0.95rem; }
.ctms-acc-row-meta { font-size: 0.82rem; color: var(--ctms-muted); margin-top: 0.2rem; }
.ctms-acc-row-meta i { margin-right: 0.25rem; }
.ctms-acc-row-side { text-align: right; white-space: nowrap; }
.ctms-acc-row-price { font-weight: 700; color: var(--ctms-text); margin-bottom: 0.35rem; }

/* Hosted-mode type carries through to the presets. */
.ctms-hosted .ctms-acc-title,
.ctms-hosted .ctms-acc-row-name { font-family: 'Yanone Kaffeesatz', sans-serif; letter-spacing: 0.3px; font-size: 1.1rem; }

/* ── Share mode (/c/<token>) ─────────────────────────────────────────
   The standalone share page reuses the embed checkout card, which is
   styled for a bare iframe. Restore the page framing the embed drops. */
   .ctms-share:not(.ctms-embed) .embed-checkout {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    border: 1px solid var(--ctms-border, #e9ecef);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.ctms-share:not(.ctms-embed) .embed-checkout-header {
    background: linear-gradient(135deg, var(--ctms-primary), var(--ctms-accent));
    color: var(--ctms-primary-contrast);
    padding: 1.25rem 1.5rem;
}
.ctms-share:not(.ctms-embed) .embed-checkout-header h5 { margin: 0; }
.ctms-share:not(.ctms-embed) .embed-checkout-body { padding: 1.5rem; }