/*
* customer.css — SeminarBooking Customer-Facing Stylesheet
* ─────────────────────────────────────────────────────────
* Restyled May 2026 — warm editorial palette as the product default.
*
* TOKEN STRATEGY
* Every visual decision in this file flows from --sb-* custom properties
* declared in :root. Those tokens are intended to be overridden at runtime
* by the per-tenant /ui/v1/css/site.css endpoint. The values below are the
* PRODUCT DEFAULTS — what a new academy gets out of the box, before any
* tenant branding is applied.
*
* Existing token names are preserved (--sb-primary, --sb-accent, etc.) so
* tenant overrides that target them continue to work. Where the warm system
* needed finer control we added new tokens (--sb-ink, --sb-sand,
* --sb-font-mono, etc.) — these can be overridden too but are optional.
*
* FONTS: the layout still controls font loading via site.FontUrl. To get the
* defaults working without any tenant config, we @import them below. If a
* tenant supplies their own FontUrl + --sb-font-family / --sb-font-display
* overrides, the @import is harmless (browser dedupes by family/weight).
*
* SECTIONS
* 1. CSS custom properties (defaults — overridable at runtime)
* 2. Base
* 3. Header / topbar
* 4. Navbar
* 5. Footer
* 6. Hero
* 7. Course cards (legacy .sb-course-card primitives)
* 8. Basket
* 9. Forms / checkout
* 10. Buttons & badges
* 11. Utilities
* 12. Course catalogue & filter (.course-card / .course-filter)
* 13. Checkout progress
* 14. My Bookings / data tables
* 15. Impersonation banner
* 16. Print / invoice
* 17. Responsive
*/
/* Fonts loaded via in _CustomerLayout.cshtml for faster first paint. */
/* ── 1. CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
/* Surfaces */
--sb-bg: oklch(0.975 0.008 75); /* cream — page background, never #fff */
--sb-bg-alt: oklch(0.955 0.012 70); /* slightly warmer surface */
--sb-sand: oklch(0.93 0.018 75); /* subtle tinted surface */
--sb-sand-deep: oklch(0.88 0.022 72); /* chip backgrounds */
--sb-card: #ffffff; /* card surface (kept white) */
/* Text */
--sb-ink: oklch(0.20 0.012 60); /* primary text, headings */
--sb-ink-deep: oklch(0.12 0.010 60); /* deepest ink — hover, dark surfaces */
--sb-text: oklch(0.40 0.015 60); /* body text */
--sb-text-muted: oklch(0.56 0.012 65); /* mono labels, eyebrows, placeholders */
/* Primary (back-compat — maps to ink) */
--sb-primary: var(--sb-ink);
--sb-primary-dark: var(--sb-ink-deep);
--sb-primary-light: oklch(0.30 0.013 60);
/* Secondary (back-compat — maps to sand) */
--sb-secondary: var(--sb-sand);
/* Accent — terracotta */
--sb-accent: oklch(0.62 0.14 40);
--sb-accent-dark: oklch(0.50 0.13 38);
--sb-accent-soft: oklch(0.94 0.04 55);
/* Lines */
--sb-border: oklch(0.91 0.012 72); /* default */
--sb-border-strong: oklch(0.86 0.015 70); /* inputs, primary dividers */
/* Status */
--sb-success: oklch(0.58 0.10 155);
--sb-warning: oklch(0.55 0.13 25);
/* Type */
--sb-font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--sb-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--sb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Topbar (default = no separate bar; collapsed into navbar) */
--sb-topbar-bg: var(--sb-bg);
--sb-topbar-text: var(--sb-text-muted);
/* Navbar */
--sb-navbar-bg: var(--sb-bg);
--sb-navbar-border: var(--sb-border);
--sb-navbar-shadow: none;
--sb-navbar-height: 72px;
/* Footer */
--sb-footer-bg: var(--sb-ink);
--sb-footer-text: oklch(0.78 0.008 65);
--sb-footer-heading: oklch(0.94 0.008 70);
--sb-footer-link: oklch(0.78 0.008 65);
--sb-footer-link-hover: oklch(0.97 0.005 70);
--sb-footer-base-bg: var(--sb-ink-deep);
/* Geometry */
--sb-radius: 8px;
--sb-radius-lg: 10px;
--sb-radius-pill: 99px;
--sb-radius-btn: 4px;
--sb-shadow-card: 0 1px 0 oklch(0.92 0.012 70), 0 1px 2px rgba(60,40,20,0.04);
--sb-shadow-card-hover: 0 1px 0 oklch(0.88 0.015 70),
0 12px 28px -12px rgba(60,40,20,0.18),
0 30px 60px -30px rgba(60,40,20,0.10);
--sb-transition: 0.15s ease-out;
--bs-nav-link-color: var(--sb-accent);
}
/* ── 2. BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.nav-link {
color: var(--sb-accent) !important;
}
body.sb-customer {
font-family: var(--sb-font-family);
color: var(--sb-text);
background: var(--sb-bg);
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .sb-display {
font-family: var(--sb-font-display);
color: var(--sb-ink);
line-height: 1.1;
font-weight: 400; /* Instrument Serif sits at 400 — never bold it */
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
em.accent {
font-style: italic;
color: var(--sb-accent-dark);
}
a {
color: var(--sb-ink);
text-decoration: none;
transition: color var(--sb-transition);
}
a:hover { color: var(--sb-accent); }
img { max-width: 100%; height: auto; }
::selection { background: var(--sb-accent-soft); color: var(--sb-ink); }
/* ── 3. HEADER / TOPBAR ───────────────────────────────────── */
.sb-header {
position: sticky;
top: 0;
z-index: 1030;
background: var(--sb-bg);
}
.sb-header__topbar {
background: var(--sb-topbar-bg);
color: var(--sb-topbar-text);
font-family: var(--sb-font-mono);
font-size: 0.7rem;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 0.55rem 0;
border-bottom: 1px solid var(--sb-border);
}
.sb-topbar__link {
color: var(--sb-text-muted);
transition: color var(--sb-transition);
white-space: nowrap;
text-decoration:none;
}
.sb-topbar__link:hover { color: var(--sb-ink); }
.sb-topbar__link .bi { font-size: 0.85rem; }
/* ── 4. NAVBAR ────────────────────────────────────────────── */
.sb-navbar {
background: var(--sb-navbar-bg);
border-bottom: 1px solid var(--sb-navbar-border);
box-shadow: var(--sb-navbar-shadow);
min-height: var(--sb-navbar-height);
padding-top: 0;
padding-bottom: 0;
}
.sb-navbar__brand { padding: 14px 0; }
.sb-navbar__logo { height: 44px; width: auto; display: block; }
.sb-navbar__brand-text {
font-family: var(--sb-font-display);
font-size: 1.6rem;
color: var(--sb-ink);
font-weight: 400;
letter-spacing: -0.01em;
}
.sb-nav__link {
font-family: var(--sb-font-family);
font-weight: 400 !important;
font-size: 0.95rem;
letter-spacing: -0.005em;
color: var(--sb-text) !important;
padding: 0.55rem 1rem !important;
position: relative;
transition: color var(--sb-transition);
text-transform: uppercase;
}
.sb-nav__link::after {
content: '';
display: block;
position: absolute;
bottom: -4px;
left: 1rem;
right: 1rem;
height: 1.5px;
background: var(--sb-accent);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--sb-transition);
}
.sb-nav__link:hover { color: var(--sb-ink) !important; }
.sb-nav__link:hover::after,
.sb-nav__link.active::after { transform: scaleX(1); }
.sb-nav__link.active {
color: var(--sb-ink) !important;
font-weight: 500 !important;
}
/* Inline account links inside the navbar (replaces the old topbar account links) */
.sb-nav__account {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sb-font-mono);
font-size: 0.7rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--sb-text-muted) !important;
padding: 0.4rem 0.6rem;
text-decoration:none;
transition: color var(--sb-transition);
}
.sb-nav__account:hover { color: var(--sb-ink) !important; }
.sb-nav__account .bi { font-size: 0.95rem; }
/* Basket button — ink filled, terracotta hover (no longer gold) */
.sb-btn, .sb-btn-basket {
background: var(--sb-ink);
color: var(--sb-bg) !important;
font-family: var(--sb-font-family);
font-weight: 500;
font-size: 0.9rem;
letter-spacing: -0.005em;
padding: 0.55rem 1.15rem;
border-radius: var(--sb-radius-btn);
position: relative;
transition: background var(--sb-transition);
white-space: nowrap;
text-decoration:none;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--sb-ink);
}
.sb-btn-basket:hover {
background: var(--sb-accent-dark);
border-color: var(--sb-accent-dark);
color: var(--sb-bg) !important;
}
.sb-basket-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--sb-accent);
color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
margin-left: 4px;
}
/* ── 5. FOOTER ────────────────────────────────────────────── */
.sb-footer__main {
background: var(--sb-footer-bg);
color: var(--sb-footer-text);
padding: 4rem 0 3rem;
}
.sb-footer__logo {
filter: brightness(0) invert(1);
opacity: 0.92;
max-height: 52px;
width: auto;
margin-bottom: 1.25rem;
}
.sb-footer__tagline {
font-size: 0.95rem;
line-height: 1.6;
color: var(--sb-footer-text);
max-width: 32ch;
}
.sb-footer__contact {
font-size: 0.875rem;
margin-bottom:0.4rem;
color: var(--sb-footer-text);
}
.sb-footer__contact a {
color: var(--sb-footer-link);
text-decoration: none;
transition: color var(--sb-transition);
}
.sb-footer__contact a:hover { color: var(--sb-footer-link-hover); }
.sb-footer__heading {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sb-footer-heading);
margin-bottom: 1.25rem;
opacity: 0.85;
}
.sb-footer__list { list-style: none; padding: 0; margin: 0; }
.sb-footer__list li { margin-bottom: 0.55rem; }
.sb-footer__list a {
color: var(--sb-footer-link);
font-size: 0.92rem;
transition: color var(--sb-transition);
text-decoration:none;
}
.sb-footer__list a:hover { color: var(--sb-footer-link-hover); }
.sb-footer__base {
background: var(--sb-footer-base-bg);
padding: 1.1rem 0;
border-top: 1px solid rgba(255,255,255,0.04);
}
.sb-footer__copyright,
.sb-footer__payment {
color: rgba(255,255,255,0.55);
font-family: var(--sb-font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ── 6. HERO ──────────────────────────────────────────────── */
.sb-hero {
background: var(--sb-bg);
color: var(--sb-ink);
padding: 4.5rem 0 3.5rem;
margin-bottom: 0;
border-bottom: 1px solid var(--sb-border);
}
.sb-hero--sm { padding: 3rem 0 2.5rem; }
.sb-hero__eyebrow {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sb-text-muted);
margin-bottom: 0.85rem;
}
.sb-hero__title {
font-family: var(--sb-font-display);
font-size: clamp(2.25rem, 5vw, 3.75rem);
color: var(--sb-ink);
line-height: 1.0;
letter-spacing: -0.02em;
font-weight: 400;
margin-bottom: 0.75rem;
text-transform: uppercase;
}
.sb-hero__title em.accent {
font-style: italic;
color: var(--sb-accent-dark);
}
.sb-hero__subtitle {
font-size: 1.05rem;
color: var(--sb-text);
max-width: 60ch;
line-height: 1.5;
}
.sb-hero__location {
font-family: var(--sb-font-body);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--sb-accent);
margin: 0.5rem 0 0;
line-height: 1.1;
}
.sb-hero__teacher-photo {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 1rem;
border: 3px solid rgba(255,255,255,0.25);
display: block;
}
.sb-hero__teacher-instagram {
font-size: 0.88rem;
margin: 0.5rem 0 0;
}
.sb-hero__teacher-instagram a {
color: var(--sb-accent);
text-decoration: none;
}
.sb-hero__teacher-instagram a:hover { text-decoration: underline; }
.sb-hero__breadcrumb {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.sb-hero__breadcrumb .breadcrumb-item,
.sb-hero__breadcrumb .breadcrumb-item a { color: var(--sb-text-muted); }
.sb-hero__breadcrumb .breadcrumb-item.active { color: var(--sb-ink); }
.sb-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--sb-text-muted); opacity: 0.5; }
.sb-hero__subtitle span { color: inherit !important; background-color: transparent !important; }
/* ── 7. COURSE CARDS (legacy .sb-course-card primitive) ───── */
.sb-course-card {
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-lg);
overflow: hidden;
box-shadow: var(--sb-shadow-card);
transition: box-shadow var(--sb-transition), transform var(--sb-transition);
background: var(--sb-card);
height: 100%;
display: flex;
flex-direction: column;
}
.sb-course-card:hover {
box-shadow: var(--sb-shadow-card-hover);
transform: translateY(-2px);
}
.sb-course-card__body { padding: 1.25rem 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.sb-course-card__category {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sb-text-muted);
margin-bottom: 0.5rem;
}
.sb-course-card__title {
font-family: var(--sb-font-display);
font-size: 1.35rem;
color: var(--sb-ink);
line-height: 1.15;
margin-bottom: 0.5rem;
font-weight: 400;
letter-spacing:-0.01em;
}
.sb-course-card__meta {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--sb-text-muted);
margin-bottom: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
}
.sb-course-card__description {
font-size: 0.92rem;
color: var(--sb-text);
flex: 1;
margin-bottom: 1rem;
line-height: 1.55;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.sb-course-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--sb-border);
margin-top: auto;
}
.sb-course-card__price {
font-family: var(--sb-font-display);
font-size: 1.55rem;
color: var(--sb-ink);
line-height: 1;
letter-spacing: -0.01em;
}
.sb-course-card__price small {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
color: var(--sb-text-muted);
letter-spacing: 0.10em;
text-transform: uppercase;
margin-left: 4px;
}
/* ── 8. BASKET ────────────────────────────────────────────── */
.sb-basket-table { width: 100%; border-collapse: collapse; }
.sb-basket-table th {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--sb-text-muted);
padding: 0.75rem 0.85rem;
border-bottom: 1px solid var(--sb-border);
text-align: left;
}
.sb-basket-table td {
padding: 1rem 0.85rem;
border-bottom: 1px solid var(--sb-border);
vertical-align: middle;
color: var(--sb-ink);
}
.sb-basket-timer {
background: var(--sb-accent-soft);
border: 1px solid oklch(0.88 0.05 55);
border-radius: var(--sb-radius);
padding: 0.75rem 1.1rem;
font-size: 0.92rem;
color: var(--sb-ink);
display: flex;
align-items: center;
gap: 0.55rem;
}
.sb-basket-timer strong { color: var(--sb-accent-dark); font-weight: 500; }
.sb-basket-empty {
text-align: center;
padding: 6rem 1rem 7rem;
}
.sb-basket-empty__icon {
width: 72px;
height: 72px;
margin: 0 auto 1.5rem;
color: var(--sb-text-muted);
opacity: 0.6;
}
.sb-basket-empty__icon svg { width: 100%; height: 100%; }
.sb-basket-empty__title {
font-family: var(--sb-font-display);
font-size: 1.75rem;
color: var(--sb-ink);
margin-bottom: 1.5rem;
line-height: 1.1;
letter-spacing: -0.01em;
}
.sb-order-summary {
background: var(--sb-card);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-lg);
padding: 1.75rem;
}
.sb-order-summary__title {
font-family: var(--sb-font-display);
font-size: 1.5rem;
color: var(--sb-ink);
margin-bottom: 1.25rem;
line-height: 1;
letter-spacing: -0.01em;
}
.sb-order-summary__row {
display: flex;
justify-content:space-between;
padding: 0.55rem 0;
font-size: 0.92rem;
color: var(--sb-text);
}
.sb-order-summary__row--total {
border-top: 1px solid var(--sb-border-strong);
margin-top: 0.5rem;
padding-top: 0.85rem;
font-family: var(--sb-font-display);
font-size: 1.35rem;
color: var(--sb-ink);
letter-spacing: -0.01em;
}
/* ── 9. FORMS / CHECKOUT ──────────────────────────────────── */
.sb-form-section {
background: var(--sb-card);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-lg);
padding: 1.75rem 2rem;
margin-bottom: 1.5rem;
}
.sb-form-section__title {
font-family: var(--sb-font-display);
font-size: 1.45rem;
color: var(--sb-ink);
margin-bottom: 1.25rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--sb-border);
line-height: 1;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 400;
}
.sb-form-section__title .bi {
font-size: 1.1rem;
color: var(--sb-text-muted);
}
.form-label {
font-family: var(--sb-font-family);
font-size: 0.85rem;
font-weight: 500;
color: var(--sb-ink);
margin-bottom: 0.35rem;
}
.form-control, .form-select {
font-family: var(--sb-font-family);
font-size: 0.95rem;
color: var(--sb-ink);
background: var(--sb-card);
border: 1px solid var(--sb-border-strong);
border-radius: var(--sb-radius);
padding: 0.55rem 0.85rem;
transition: border-color var(--sb-transition), box-shadow var(--sb-transition);
}
.form-control::placeholder { color: var(--sb-text-muted); }
.form-control:focus, .form-select:focus {
border-color: var(--sb-accent);
box-shadow: 0 0 0 3px var(--sb-accent-soft);
outline: none;
}
.form-control[readonly], .form-control:disabled {
background: var(--sb-bg-alt);
color: var(--sb-text-muted);
cursor: not-allowed;
}
.form-text, .sb-form-hint {
font-size: 0.8rem;
color: var(--sb-text-muted);
margin-top: 0.35rem;
display: inline-flex;
align-items: center;
gap: 5px;
}
.form-check-input {
border: 1.5px solid var(--sb-border-strong);
border-radius: 4px;
width: 1.05rem;
height: 1.05rem;
}
.form-check-input:checked {
background-color: var(--sb-ink);
border-color: var(--sb-ink);
}
.form-check-input:focus {
box-shadow: 0 0 0 3px var(--sb-accent-soft);
border-color: var(--sb-accent);
}
.form-check-label {
font-size: 0.92rem;
color: var(--sb-text);
}
/* ── 10. BUTTONS & BADGES ─────────────────────────────────── */
.btn-sb-primary {
background: var(--sb-ink);
color: var(--sb-bg);
border: 1px solid var(--sb-ink);
font-family: var(--sb-font-family);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: -0.005em;
border-radius: var(--sb-radius-btn);
padding: 0.65rem 1.5rem;
transition: background var(--sb-transition), border-color var(--sb-transition);
}
.btn-sb-primary:hover {
background: var(--sb-accent-dark);
border-color: var(--sb-accent-dark);
color: var(--sb-bg);
}
.btn-sb-accent {
background: var(--sb-accent);
color: #fff;
border: 1px solid var(--sb-accent);
font-family: var(--sb-font-family);
font-weight: 500;
font-size: 0.95rem;
border-radius: var(--sb-radius-btn);
padding: 0.65rem 1.5rem;
transition: background var(--sb-transition), border-color var(--sb-transition);
}
.btn-sb-accent:hover {
background: var(--sb-accent-dark);
border-color: var(--sb-accent-dark);
color: #fff;
}
.btn-sb-outline {
background: transparent;
color: var(--sb-ink);
border: 1px solid var(--sb-border-strong);
font-family: var(--sb-font-family);
font-weight: 500;
font-size: 0.95rem;
border-radius: var(--sb-radius-btn);
padding: 0.6rem 1.45rem;
transition: all var(--sb-transition);
}
.btn-sb-outline:hover {
background: var(--sb-ink);
color: var(--sb-bg);
border-color: var(--sb-ink);
}
.btn-sb-ghost {
background: transparent;
color: var(--sb-text);
border: 1px solid transparent;
font-family: var(--sb-font-family);
font-size: 0.9rem;
border-radius: var(--sb-radius);
padding: 0.45rem 0.85rem;
transition: background var(--sb-transition), color var(--sb-transition);
}
.btn-sb-ghost:hover {
background: var(--sb-sand);
color: var(--sb-ink);
}
/* Badges — pill, mono uppercase */
.sb-badge {
display: inline-block;
font-family: var(--sb-font-mono);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 0.25em 0.75em;
border-radius: var(--sb-radius-pill);
line-height: 1.4;
border: 1px solid transparent;
}
.sb-badge--new { background: oklch(0.94 0.05 155); color: oklch(0.35 0.10 155); }
.sb-badge--popular { background: var(--sb-accent-soft); color: var(--sb-accent-dark); }
.sb-badge--online { background: oklch(0.94 0.04 240); color: oklch(0.40 0.10 240); }
.sb-badge--inperson { background: oklch(0.94 0.04 300); color: oklch(0.40 0.10 300); }
.sb-badge--limited { background: oklch(0.94 0.05 25); color: oklch(0.40 0.13 25); }
.sb-badge--available { background: oklch(0.94 0.05 155); color: oklch(0.35 0.10 155); }
.sb-badge--forthcoming {
background: oklch(0.94 0.05 155);
color: oklch(0.35 0.10 155);
border-color: oklch(0.88 0.06 155);
}
.sb-badge--completed { background: var(--sb-sand); color: var(--sb-text); }
.sb-badge--cancelled { background: oklch(0.94 0.05 25); color: oklch(0.40 0.13 25); }
/* ── 11. UTILITIES ────────────────────────────────────────── */
.sb-section { padding: 4rem 0; }
.sb-section--alt { background: var(--sb-bg-alt); }
.sb-section--tight { padding: 2.5rem 0; }
.sb-section-title {
font-family: var(--sb-font-display);
font-size: clamp(1.6rem, 3vw, 2.25rem);
color: var(--sb-ink);
margin-bottom: 0.5rem;
line-height: 1.05;
letter-spacing: -0.015em;
}
.sb-section-subtitle {
color: var(--sb-text);
margin-bottom:2.5rem;
font-size: 1.05rem;
max-width: 60ch;
}
.sb-eyebrow {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sb-text-muted);
}
.sb-divider { width: 36px; height: 1.5px; background: var(--sb-accent); margin: 1rem 0 1.75rem; border: none; }
/* ── 12. COURSE CATALOGUE & FILTER ────────────────────────── */
/* Filter pills */
.course-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 2rem;
}
.course-filter__btn {
font-family: var(--sb-font-family);
font-size: 0.85rem;
font-weight: 400;
letter-spacing: -0.005em;
padding: 0.45rem 1rem;
border: 1px solid var(--sb-border);
background: var(--sb-card);
color: var(--sb-text);
border-radius: var(--sb-radius-btn);
cursor: pointer;
transition: background var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition);
text-transform: uppercase;
}
.course-filter__btn:hover {
border-color: var(--sb-border-strong);
color: var(--sb-ink);
}
.course-filter__btn--active {
background: var(--sb-sand);
border-color: var(--sb-ink);
color: var(--sb-ink);
font-weight: 500;
}
/* Catalogue grid */
.course-catalogue {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 24px;
}
/* Keyword search */
.course-search {
margin-bottom: 1.5rem;
}
.course-search__input {
font-family: var(--sb-font-family);
font-size: 0.9rem;
width: 100%;
max-width: 420px;
padding: 0.5rem 1rem;
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-btn);
background: var(--sb-card);
color: var(--sb-text);
transition: border-color var(--sb-transition);
}
.course-search__input:focus {
outline: none;
border-color: var(--sb-ink);
}
.course-catalogue__empty {
color: var(--sb-text-muted);
padding: 3rem 0;
text-align: center;
font-family: var(--sb-font-mono);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Course card — Section/Secondary hex now drives a 4px top border via CSS var */
.course-card {
/* --section-colour is set inline from Razor: style="--section-colour: {{SectionHex}};" */
--section-colour: var(--sb-border-strong);
background: var(--sb-card);
border: 1px solid var(--sb-border);
border-top: 4px solid var(--section-colour);
border-radius: var(--sb-radius-lg);
overflow: hidden;
box-shadow: var(--sb-shadow-card);
transition: box-shadow var(--sb-transition), transform var(--sb-transition);
display: flex;
flex-direction: column;
}
.course-card:hover {
box-shadow: var(--sb-shadow-card-hover);
transform: translateY(-2px);
}
/* Header bar — kept structurally, restyled to a slim eyebrow row (no fill colour) */
.course-card__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px 0;
background: transparent !important; /* override inline SectionHex bg */
gap: 12px;
}
.course-card__section-label {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--section-colour);
display: inline-flex;
align-items: center;
gap: 6px;
}
.course-card__section-label::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--section-colour);
}
.course-card__location-label {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--sb-text-muted);
}
/* Card body — strip the inline SecondaryHex background */
.course-card__body {
padding: 16px 20px 20px;
background: transparent !important; /* override inline SecondaryHex bg */
flex: 1;
display: flex;
flex-direction: column;
}
.course-card__subtitle {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--sb-text-muted);
margin: 0 0 0.5rem;
}
.course-card__name {
font-family: var(--sb-font-display);
font-size: 1.75rem;
font-weight: 400;
letter-spacing: -0.015em;
text-transform: none;
line-height: 1.05;
margin: 0 0 0.6rem;
color: var(--sb-ink);
}
.course-card__location {
font-family: var(--sb-font-body);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--section-colour, var(--sb-accent));
margin: -0.3rem 0 0.9rem;
line-height: 1.1;
}
.course-card__image {
width: 100%;
max-height: 180px;
object-fit: cover;
border-radius: var(--sb-radius);
margin-bottom: 12px;
}
.course-card__seminar-type {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
color: var(--sb-text-muted);
margin: 0 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.10em;
}
.course-card__level { color: var(--sb-ink); font-weight: 500; }
.course-card__seminar-sep { color: var(--sb-text-muted); margin: 0 0.25em; }
.course-card__teachers {
font-family: var(--sb-font-body);
font-size: 0.82rem;
color: var(--sb-text-muted);
margin: 0 0 0.2rem;
display: flex;
align-items: center;
gap: 0.35em;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.course-card__teachers-note {
font-size: 0.8em;
color: #b3b3b3;
margin: 0 0 0.75rem;
padding-left: 1.35em;
}
.course-card__subtitle2 {
font-size: 0.92rem;
color: var(--sb-text);
margin: 0 0 0.85rem;
line-height: 1.5;
}
.course-card__details-toggle {
margin: 10px 0 14px;
border-top: 1px solid var(--sb-border);
border-bottom: 1px solid var(--sb-border);
}
.course-card__details-toggle > summary {
padding: 0.7rem 0;
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
color: var(--sb-ink);
}
.course-card__details-toggle > summary::before {
content: '+';
font-family: var(--sb-font-mono);
font-size: 1rem;
line-height: 1;
color: var(--sb-text-muted);
}
.course-card__details-toggle[open] > summary::before { content: '−'; }
.course-card__details-body { padding: 4px 0 14px; }
.course-card__details-body p {
font-size: 0.92rem;
line-height: 1.55;
color: var(--sb-text);
margin-bottom: 0.85rem;
}
.course-card__details-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.course-card__details-table td {
padding: 0.45rem 0;
border-bottom: 1px solid var(--sb-border);
vertical-align:top;
color: var(--sb-ink);
}
.course-card__details-table td:first-child {
width: 110px;
color: var(--sb-text-muted);
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.course-card__vat {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
color: var(--sb-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 4px;
}
.course-card__points { font-size: 0.85rem; color: var(--sb-accent-dark); }
.course-card__map-link {
margin-left: 6px;
color: var(--sb-accent);
text-decoration: none;
}
/* Date badge */
.course-card__dates { margin: 14px 0 8px; }
.course-card__date-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--sb-radius-pill);
background: var(--sb-sand);
color: var(--sb-ink);
}
.course-card__date-badge .bi { color: var(--sb-text-muted); }
/* Card footer */
.course-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--sb-border);
gap: 12px;
}
.course-card__price {
font-family: var(--sb-font-display);
font-size: 1.7rem;
font-weight: 400;
color: var(--sb-ink);
line-height: 1;
letter-spacing: -0.015em;
}
.course-card__price small {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
font-weight: 500;
color: var(--sb-text-muted);
letter-spacing: 0.10em;
text-transform: uppercase;
margin-left: 4px;
}
.course-card__btn {
display: inline-block;
padding: 0.55rem 1.25rem;
font-family: var(--sb-font-family);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: -0.005em;
text-transform: none;
text-decoration:none;
border-radius: var(--sb-radius-btn);
transition: background var(--sb-transition), border-color var(--sb-transition), color var(--sb-transition);
white-space: nowrap;
border: 1px solid transparent;
}
.course-card__btn--book {
background: var(--sb-ink);
color: var(--sb-bg);
border-color: var(--sb-ink);
}
.course-card__btn--book:hover {
background: var(--sb-accent-dark);
border-color: var(--sb-accent-dark);
color: var(--sb-bg);
}
.course-card__btn--enquire {
background: transparent;
border-color: var(--sb-border-strong);
color: var(--sb-ink);
}
.course-card__btn--enquire:hover {
background: var(--sb-ink);
color: var(--sb-bg);
border-color: var(--sb-ink);
}
/* ── 13. CHECKOUT PROGRESS ────────────────────────────────── */
.sb-checkout-progress {
background: var(--sb-bg);
border-bottom: 1px solid var(--sb-border);
padding: 20px 0 24px;
}
.sb-checkout-progress__inner {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
max-width: 620px;
margin: 0 auto;
}
.sb-checkout-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-width: 120px;
}
.sb-checkout-step__line {
position: absolute;
top: 16px;
right: calc(50% + 18px);
left: calc(-50% + 18px);
height: 1px;
background: var(--sb-border);
z-index: 0;
}
.sb-checkout-step__line--done { background: var(--sb-ink); }
.sb-checkout-step__circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--sb-font-mono);
font-size: 0.82rem;
font-weight: 500;
z-index: 1;
position: relative;
transition: all var(--sb-transition);
border: 1px solid var(--sb-border-strong);
background: var(--sb-card);
color: var(--sb-text-muted);
}
.sb-checkout-step--done .sb-checkout-step__circle {
background: var(--sb-ink);
border-color: var(--sb-ink);
color: var(--sb-bg);
}
.sb-checkout-step--current .sb-checkout-step__circle {
background: var(--sb-accent);
border-color: var(--sb-accent);
color: #fff;
box-shadow: 0 0 0 4px var(--sb-accent-soft);
}
/* Linkable completed step — wrapping the circle */
a.sb-checkout-step__circle--link {
text-decoration: none;
cursor: pointer;
}
a.sb-checkout-step__circle--link:hover {
background: var(--sb-accent-dark);
border-color: var(--sb-accent-dark);
color: #fff;
transform: scale(1.08);
}
.sb-checkout-step__label {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
font-weight: 500;
margin-top: 10px;
color: var(--sb-text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
white-space: nowrap;
}
.sb-checkout-step--current .sb-checkout-step__label { color: var(--sb-accent-dark); }
.sb-checkout-step--done .sb-checkout-step__label { color: var(--sb-ink); }
/* Confirmation tick */
.sb-confirm-tick {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--sb-accent-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: var(--sb-accent-dark);
flex-shrink: 0;
}
/* ── 14. MY BOOKINGS / DATA TABLES ────────────────────────── */
.sb-bookings-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--sb-bg-alt);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-pill);
margin-bottom: 1.5rem;
width: fit-content;
}
.sb-bookings-tab {
font-family: var(--sb-font-family);
font-size: 0.9rem;
font-weight: 400;
color: var(--sb-text);
padding: 0.5rem 1.1rem;
border: 1px solid transparent;
background: transparent;
border-radius: var(--sb-radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background var(--sb-transition), color var(--sb-transition);
}
.sb-bookings-tab:hover { color: var(--sb-ink); }
.sb-bookings-tab--active {
background: var(--sb-card);
color: var(--sb-ink);
font-weight: 500;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.sb-bookings-tab .bi { color: var(--sb-text-muted); }
.sb-bookings-tab--active .bi { color: var(--sb-accent); }
.sb-bookings-tab__count {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
padding: 1px 7px;
border-radius: var(--sb-radius-pill);
background: var(--sb-sand-deep);
color: var(--sb-ink);
margin-left: 4px;
}
.sb-bookings-tab--active .sb-bookings-tab__count {
background: var(--sb-ink);
color: var(--sb-bg);
}
.sb-data-card {
background: var(--sb-card);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-lg);
overflow: hidden;
}
.sb-data-table {
width: 100%;
border-collapse: collapse;
}
.sb-data-table thead th {
font-family: var(--sb-font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sb-text-muted);
padding: 0.85rem 1.1rem;
border-bottom: 1px solid var(--sb-border);
background: var(--sb-bg-alt);
text-align: left;
}
.sb-data-table tbody td {
padding: 1rem 1.1rem;
border-bottom: 1px solid var(--sb-border);
vertical-align: middle;
font-size: 0.92rem;
color: var(--sb-ink);
}
.sb-data-table tbody tr:last-child td { border-bottom: none; }
.sb-data-table tbody tr:hover td { background: oklch(0.98 0.008 72); }
.sb-data-table__booking-no {
font-family: var(--sb-font-mono);
font-size: 0.85rem;
font-weight: 500;
color: var(--sb-ink);
}
.sb-data-table__booking-meta {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
font-weight: 500;
color: var(--sb-text-muted);
letter-spacing: 0.10em;
text-transform: uppercase;
margin-top: 2px;
}
.sb-data-table__course-name {
font-family: var(--sb-font-display);
font-size: 1.05rem;
color: var(--sb-ink);
line-height: 1.15;
letter-spacing: -0.005em;
}
.sb-data-table__course-loc {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
color: var(--sb-text-muted);
margin-top: 3px;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 5px;
}
.sb-data-table__investment {
font-family: var(--sb-font-display);
font-size: 1.05rem;
color: var(--sb-ink);
letter-spacing: -0.005em;
}
.sb-data-table__action {
font-family: var(--sb-font-family);
font-size: 0.82rem;
font-weight: 500;
color: var(--sb-ink);
padding: 0.4rem 0.9rem;
border: 1px solid var(--sb-border-strong);
background: var(--sb-card);
border-radius: var(--sb-radius);
text-decoration:none;
transition: background var(--sb-transition), border-color var(--sb-transition);
display: inline-block;
}
.sb-data-table__action:hover {
background: var(--sb-ink);
color: var(--sb-bg);
border-color: var(--sb-ink);
}
/* Side panels (Account / Loyalty etc.) */
.sb-side-panel {
background: var(--sb-card);
border: 1px solid var(--sb-border);
border-radius: var(--sb-radius-lg);
padding: 1.5rem 1.6rem;
margin-bottom: 1.25rem;
}
.sb-side-panel__title {
font-family: var(--sb-font-display);
font-size: 1.5rem;
color: var(--sb-ink);
margin-bottom: 1.1rem;
line-height: 1;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 400;
}
.sb-side-panel__title .bi {
font-size: 1.05rem;
color: var(--sb-text-muted);
}
.sb-side-panel__label {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
color: var(--sb-text-muted);
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.sb-side-panel__value {
font-size: 0.95rem;
color: var(--sb-ink);
margin-bottom: 1rem;
word-break: break-word;
}
.sb-side-panel__readonly-hint {
font-family: var(--sb-font-mono);
font-size: 0.65rem;
color: var(--sb-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-left: 4px;
}
.sb-loyalty-points {
display: flex;
align-items: center;
gap: 1.1rem;
}
.sb-loyalty-points__value {
font-family: var(--sb-font-display);
font-size: 2.75rem;
color: var(--sb-ink);
line-height: 1;
letter-spacing: -0.02em;
}
.sb-loyalty-points__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--sb-accent-soft);
color: var(--sb-accent-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
margin-left: auto;
}
.sb-loyalty-points__hint {
font-size: 0.82rem;
color: var(--sb-text-muted);
margin-top: 0.4rem;
}
/* ── 15. IMPERSONATION BANNER ─────────────────────────────── */
.db-impersonation-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 8px 16px;
background: var(--sb-accent-soft);
border-bottom: 1px solid var(--sb-accent);
font-family: var(--sb-font-family);
font-size: 13px;
color: var(--sb-accent-dark);
}
.db-impersonation-banner-info {
display: flex;
align-items: center;
gap: 10px;
}
.db-impersonation-banner-text {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.db-impersonation-banner-label {
font-family: var(--sb-font-mono);
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sb-accent-dark);
}
.db-impersonation-banner-name { font-size: 13px; font-weight: 500; color: var(--sb-ink); }
.db-impersonation-banner-meta {
font-family: var(--sb-font-mono);
font-size: 10px;
color: var(--sb-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.db-impersonation-banner-actions { display: flex; align-items: center; gap: 8px; }
.db-impersonation-banner .db-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
border-radius: var(--sb-radius);
border: 1px solid var(--sb-border-strong);
background: var(--sb-card);
color: var(--sb-ink);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.db-impersonation-banner .db-btn:hover { background: var(--sb-sand); }
.db-impersonation-banner .db-btn-danger {
background: var(--sb-ink);
border-color: var(--sb-ink);
color: var(--sb-bg);
}
.db-impersonation-banner .db-btn-danger:hover {
background: var(--sb-accent-dark);
border-color: var(--sb-accent-dark);
}
/* ── 16. PRINT / INVOICE ──────────────────────────────────── */
@media screen { .print-only { display: none !important; } }
@media print {
.no-print, .sb-header, .sb-footer, .sb-checkout-progress, .sb-hero,
nav, header, footer { display: none !important; }
.print-only { display: block !important; }
body { background: #fff; font-family: Arial, sans-serif; color: #000; }
}
.sb-invoice {
max-width: 800px;
margin: 0 auto;
padding: 40px;
font-size: 13px;
color: #000;
}
.sb-invoice__header {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
border-bottom: 2px solid var(--sb-ink);
padding-bottom: 20px;
}
.sb-invoice__company-name { font-size: 18px; font-weight: 600; color: var(--sb-ink); margin-bottom: 4px; }
.sb-invoice__company-address { line-height: 1.5; color: #444; }
.sb-invoice__title { font-size: 22px; font-weight: 600; color: var(--sb-ink); margin-bottom: 8px; font-family: var(--sb-font-display); }
.sb-invoice__bill-to {
margin-bottom: 24px;
padding: 12px 16px;
background: var(--sb-bg-alt);
border-left: 3px solid var(--sb-ink);
line-height: 1.6;
}
.sb-invoice__table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.sb-invoice__table th {
background: var(--sb-ink);
color: var(--sb-bg);
padding: 8px 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.10em;
font-family: var(--sb-font-mono);
font-weight: 500;
}
.sb-invoice__table td {
padding: 8px 12px;
border-bottom: 1px solid var(--sb-border);
vertical-align:top;
}
.sb-invoice__table tfoot td { border-bottom: none; padding: 6px 12px; }
.sb-invoice__total-row td {
border-top: 2px solid var(--sb-ink);
font-size: 15px;
padding-top: 10px !important;
font-weight: 500;
}
.sb-invoice__footer {
text-align: center;
color: #888;
font-size: 11px;
margin-top: 32px;
padding-top:16px;
border-top: 1px solid var(--sb-border);
}
/* ── Course description HTML rendering ────────────────────── */
.course-description { line-height: 1.6; color: var(--sb-text); }
.course-description p { margin: 0 0 0.85em; }
.course-description p:last-child { margin-bottom: 0; }
.course-description ul,
.course-description ol { margin: 0 0 0.85em 1.4em; padding: 0; }
.course-description li { margin-bottom: 0.25em; }
.course-description strong { font-weight: 500; color: var(--sb-ink); }
.course-description em { font-style: italic; }
.course-description a { color: var(--sb-accent); text-decoration: underline; }
.course-description h2,
.course-description h3 {
font-family: var(--sb-font-display);
font-size: 1.2rem;
font-weight: 400;
margin: 1em 0 0.4em;
color: var(--sb-ink);
letter-spacing: -0.01em;
}
/* ── 17. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 991.98px) {
#customerNav {
padding: 1rem 0;
border-top: 1px solid var(--sb-border);
margin-top: 0.5rem;
}
.sb-nav__link::after { display: none; }
.sb-btn-basket { margin-top: 0.75rem; }
.sb-hero { padding: 3rem 0 2.5rem; }
.sb-form-section { padding: 1.5rem; }
.course-catalogue { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
.sb-form-section { padding: 1.25rem; }
.sb-course-card__footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.course-card__footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.sb-checkout-progress__inner { gap: 0; }
.sb-checkout-step { min-width: 80px; }
.sb-data-table thead { display: none; }
.sb-data-table tbody td {
display: block;
padding: 0.5rem 1rem;
border: none;
}
.sb-data-table tbody tr {
display: block;
padding: 1rem 0;
border-bottom: 1px solid var(--sb-border);
}
}
/* ── Course Detail page — left column (cd-*) ──────────────────────────────── */
.cd-img {
width: 100%;
max-height: 320px;
object-fit: cover;
border-radius: var(--sb-radius-lg, 12px);
margin-bottom: 2rem;
}
.cd-meta {
font-family: var(--sb-font-mono);
font-size: 0.7rem;
font-weight: 500;
color: var(--sb-text-muted);
text-transform: uppercase;
letter-spacing: 0.10em;
margin: 0 0 1rem;
}
.cd-level { color: var(--sb-ink); font-weight: 500; }
.cd-sep { color: var(--sb-text-muted); margin: 0 0.25em; }
.cd-subtitle {
font-size: 1rem;
color: var(--sb-text);
margin: 0 0 0.75rem;
line-height: 1.5;
}
.cd-location {
font-family: var(--sb-font-body);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--section-colour, var(--sb-accent));
margin: 0 0 1rem;
line-height: 1.1;
}
.cd-teachers {
font-family: var(--sb-font-body);
font-size: 0.82rem;
color: var(--sb-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 0.2rem;
display: flex;
align-items: center;
gap: 0.35em;
}
.cd-teachers-note {
font-size: 0.8em;
color: #b3b3b3;
margin: 0 0 1.25rem;
padding-left: 1.35em;
}
.cd-subtitle2 {
font-size: 0.95rem;
color: var(--sb-text);
margin: 0 0 1.75rem;
line-height: 1.55;
white-space: pre-line;
}
.cd-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
margin-bottom: 2rem;
}
.cd-table td {
padding: 0.55rem 0;
vertical-align: top;
}
.cd-table td:first-child {
color: var(--sb-text-muted);
width: 6.5rem;
white-space: nowrap;
}
.cd-table td:last-child { color: var(--sb-text); }
.cd-table tr { border-bottom: 1px solid var(--sb-border); }
.cd-table tr:last-child { border-bottom: none; }
.cd-vat { color: var(--sb-text-muted); font-size: 0.82em; }
.cd-points { color: var(--sb-text-muted); font-size: 0.82em; }
.cd-map-link {
color: var(--section-colour, var(--sb-accent));
margin-left: 0.4em;
text-decoration: none;
font-size: 0.95em;
}
.cd-map-link:hover { opacity: 0.75; }
.cd-section-label {
font-family: var(--sb-font-body);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sb-text-muted);
margin: 0 0 0.6rem;
}
.cd-description {
font-size: 0.92rem;
line-height: 1.65;
margin: 0 0 2rem;
}
.cd-prereq {
border-left: 3px solid var(--section-colour, var(--sb-accent));
padding: 0.75rem 1rem;
background: var(--sb-surface-alt, #f9f7f4);
border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
font-size: 0.88rem;
color: var(--sb-text);
margin-bottom: 1.5rem;
}
.cd-prereq-label {
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sb-text-muted);
margin-bottom: 0.35rem;
}
.cd-panel-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25em;
margin-bottom: 0.75rem;
}
.cd-panel-price__amount {
font-family: var(--sb-font-display);
font-size: 1.75rem;
font-weight: 400;
color: var(--sb-primary, var(--sb-ink));
line-height: 1;
}
.cd-panel-price__vat {
font-size: 0.82rem;
color: var(--sb-text-muted);
}
.cd-panel-price__label {
font-size: 0.88rem;
color: var(--sb-text-muted);
}
/* ── Flexible Pricing — customer detail page ──────────────── */
.session-picker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--c-border, #dee2e6);
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.session-picker-item:hover { border-color: var(--c-accent, #0d6efd); }
.session-picker-item.selected {
border-color: var(--c-accent, #0d6efd);
background: rgba(13,110,253,.05);
}
.session-picker-item--sold-out {
opacity: 0.55;
cursor: not-allowed;
background: var(--c-surface-alt, #f8f9fa);
}
.session-picker-item--sold-out:hover { border-color: var(--c-border, #dee2e6); }
.session-picker-item input[type=radio] { margin: 0; }
.session-saving {
display: inline-block;
margin-left: 8px;
font-size: 12px;
color: #198754;
font-weight: 600;
}
.price-struck {
text-decoration: line-through;
color: var(--c-ink-mute, #6c757d);
margin-right: 6px;
}
.price-member {
color: #198754;
font-weight: 700;
}
.member-teaser {
font-size: 13px;
color: var(--c-ink-soft, #6c757d);
margin-top: 4px;
}
.tier-price-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 8px 0;
}
.tier-price-table th,
.tier-price-table td {
padding: 7px 10px;
border-bottom: 1px solid var(--c-border, #dee2e6);
text-align: left;
}
.tier-price-table tr.tier-active {
background: rgba(13,110,253,.06);
font-weight: 600;
}