/* ==========================================================================
   Crystal Tuition – student pages ([cmt_subscribe], [cmt_calendar], [cmt_portal])
   Crystal Math design system: navy + teal, Poppins headings, Inter body.
   Everything is scoped to .cmt so Woodmart/Elementor styles are not affected.
   ========================================================================== */

.cmt {
	--cmt-accent: #14B8A6;
	--cmt-accent-dark: color-mix(in srgb, var(--cmt-accent) 82%, #000);
	--cmt-accent-soft: color-mix(in srgb, var(--cmt-accent) 11%, #fff);
	--cmt-navy: #0D1B2A;
	--cmt-text: #475569;
	--cmt-muted: #64748B;
	--cmt-faint: #94A3B8;
	--cmt-line: #E8EEF5;
	--cmt-soft: #F8FAFC;
	--cmt-warn-bg: #FEF3C7; --cmt-warn: #92400E;
	--cmt-bad-bg: #FEE2E2; --cmt-bad: #991B1B;
	--cmt-ok-bg: #DCFCE7; --cmt-ok: #166534;
	--cmt-radius: 20px;
	--cmt-radius-sm: 12px;
	--cmt-shadow: 0 6px 24px -8px rgba(13, 27, 42, .08);
	--cmt-shadow-hover: 0 18px 44px -12px rgba(13, 27, 42, .14);
	--cmt-display: "CMT Poppins", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cmt-body: var(--wd-text-font, "CMT Inter", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	font-family: var(--cmt-body);
	color: var(--cmt-text);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 1180px;
	width: 100%;
	min-width: 0;
	margin-inline: auto;
	box-sizing: border-box;
}
/* Elementor: a Shortcode widget inside a container that centres its items would otherwise shrink to fit. */
.elementor-widget-shortcode:has(.cmt), .elementor-widget-text-editor:has(.cmt) { width: 100%; max-width: 100%; align-self: stretch; }
.cmt *, .cmt *::before, .cmt *::after { box-sizing: border-box; }
/* Every element uses our font explicitly, so theme/page-builder rules on p, span, dt, small… can't swap it. */
.cmt.cmt, .cmt.cmt * { font-family: var(--cmt-body); }
.cmt svg { display: inline-block; flex: none; }
.cmt a { color: inherit; }
.cmt.cmt h1, .cmt.cmt h2, .cmt.cmt h3, .cmt.cmt h4 { font-family: var(--cmt-display); color: var(--cmt-navy); letter-spacing: -.01em; text-transform: none; margin: 0; }
.cmt .cmt-h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.25; font-weight: 600; margin: 0 0 1rem; }
.cmt .cmt-muted { color: var(--cmt-muted); margin: 0; }
.cmt .cmt-center { text-align: center; }
.cmt .cmt-link { color: var(--cmt-accent-dark); font-weight: 600; text-decoration: none; font-size: .92rem; }
.cmt .cmt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmt :focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; border-radius: 6px; }

/* Buttons */
.cmt .cmt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	min-height: 46px; padding: .7rem 1.4rem; margin: 0; border-radius: 999px; border: 1.5px solid transparent;
	font-family: var(--cmt-display); font-size: .95rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none;
	text-decoration: none; cursor: pointer; box-shadow: none; white-space: nowrap;
	transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .2s, color .2s, border-color .2s;
}
.cmt .cmt-btn-primary { background: var(--cmt-accent); color: #fff; box-shadow: 0 10px 22px -10px var(--cmt-accent); }
.cmt .cmt-btn-primary:hover { background: var(--cmt-accent-dark); color: #fff; transform: translateY(-2px); }
.cmt .cmt-btn-ghost { background: #fff; color: var(--cmt-navy); border-color: var(--cmt-line); }
.cmt .cmt-btn-ghost:hover { border-color: var(--cmt-accent); color: var(--cmt-navy); }
.cmt .cmt-btn-sm { min-height: 38px; padding: .45rem 1rem; font-size: .85rem; }
.cmt .cmt-btn-block { width: 100%; }
.cmt .cmt-btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.cmt .cmt-icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--cmt-line); background: #fff; color: var(--cmt-navy); text-decoration: none; transition: border-color .2s, background .2s; }
.cmt .cmt-icon-btn:hover { border-color: var(--cmt-accent); background: var(--cmt-accent-soft); }
.cmt .cmt-icon-btn svg { width: 20px; height: 20px; }

/* Cards, notices, tags */
.cmt .cmt-card { background: #fff; border: 1px solid var(--cmt-line); border-radius: var(--cmt-radius); box-shadow: var(--cmt-shadow); padding: clamp(1.1rem, 2.5vw, 1.6rem); margin: 0 0 1.2rem; }
.cmt .cmt-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; }
.cmt .cmt-card-head h3 { font-size: 1.15rem; font-weight: 600; }
.cmt .cmt-alert { padding: .9rem 1.1rem; margin: 0 0 1rem; border-radius: var(--cmt-radius-sm); background: var(--cmt-accent-soft); color: var(--cmt-navy); border: 1px solid color-mix(in srgb, var(--cmt-accent) 30%, #fff); }
.cmt .cmt-alert-warn { background: var(--cmt-warn-bg); color: var(--cmt-warn); border-color: #FDE68A; }
.cmt .cmt-alert a { font-weight: 600; }
.cmt .cmt-empty { padding: 1.4rem 1rem; text-align: center; color: var(--cmt-muted); border: 1.5px dashed var(--cmt-line); border-radius: var(--cmt-radius-sm); background: var(--cmt-soft); }
.cmt .cmt-tag { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--cmt-soft); color: var(--cmt-navy); border: 1px solid var(--cmt-line); line-height: 1.4; }
.cmt .cmt-tag-grade { background: var(--cmt-accent-soft); color: var(--cmt-accent-dark); border-color: transparent; }
.cmt .cmt-tag-warn { background: var(--cmt-warn-bg); color: var(--cmt-warn); border-color: transparent; }
.cmt .cmt-tag-bad { background: var(--cmt-bad-bg); color: var(--cmt-bad); border-color: transparent; }
.cmt .cmt-badge { display: inline-flex; align-items: center; padding: .22rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.cmt .cmt-badge.is-ok { background: var(--cmt-ok-bg); color: var(--cmt-ok); }
.cmt .cmt-badge.is-warn { background: var(--cmt-warn-bg); color: var(--cmt-warn); }
.cmt .cmt-badge.is-bad { background: var(--cmt-bad-bg); color: var(--cmt-bad); }
.cmt .cmt-badge.is-muted { background: var(--cmt-soft); color: var(--cmt-muted); border: 1px solid var(--cmt-line); }
.cmt .cmt-hint { font-size: .82rem; color: var(--cmt-muted); }
.cmt .cmt-feedback { margin: .4rem 0 0; font-size: .86rem; font-weight: 600; }
.cmt .cmt-feedback.is-ok { color: var(--cmt-ok); }
.cmt .cmt-feedback.is-bad { color: var(--cmt-bad); }
.cmt .cmt-support { margin: 1.5rem 0 0; text-align: center; color: var(--cmt-muted); font-size: .9rem; }
.cmt .cmt-wc-notices { margin-bottom: 1rem; }

/* ---------- [cmt_subscribe] ---------- */
.cmt-subscribe .cmt-progress { display: flex; justify-content: center; gap: .5rem 1.5rem; flex-wrap: wrap; list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: none; }
.cmt-subscribe .cmt-progress li { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .88rem; font-weight: 600; color: var(--cmt-faint); }
.cmt-subscribe .cmt-progress li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--cmt-line); font-family: var(--cmt-display); font-size: .82rem; }
.cmt-subscribe .cmt-progress li.is-current { color: var(--cmt-navy); }
.cmt-subscribe .cmt-progress li.is-current span { border-color: var(--cmt-accent); background: var(--cmt-accent); color: #fff; }
.cmt-subscribe .cmt-progress li.is-done { color: var(--cmt-accent-dark); }
.cmt-subscribe .cmt-progress li.is-done span { border-color: var(--cmt-accent); color: var(--cmt-accent-dark); }
.cmt-subscribe .cmt-block { margin: 0 0 2.2rem; }
.cmt-subscribe .cmt-block > .cmt-h2 { text-align: center; }
.cmt .cmt-grade-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 760px; margin: 0 auto 1rem; }
.cmt .cmt-grade-card {
	position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; border-radius: var(--cmt-radius);
	background: #fff; border: 2px solid var(--cmt-line); box-shadow: var(--cmt-shadow); text-decoration: none; color: var(--cmt-navy);
	transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .2s;
}
.cmt .cmt-grade-card:hover { transform: translateY(-3px); box-shadow: var(--cmt-shadow-hover); border-color: color-mix(in srgb, var(--cmt-accent) 55%, var(--cmt-line)); }
.cmt .cmt-grade-card.is-selected { border-color: var(--cmt-accent); background: var(--cmt-accent-soft); }
.cmt .cmt-grade-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--cmt-navy); color: #fff; font-family: var(--cmt-display); font-size: 1.35rem; font-weight: 700; }
.cmt .cmt-grade-card.is-selected .cmt-grade-num { background: var(--cmt-accent); }
.cmt .cmt-grade-txt { display: flex; flex-direction: column; font-family: var(--cmt-display); font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.cmt .cmt-grade-txt small { font-family: var(--cmt-body); font-weight: 500; font-size: .82rem; color: var(--cmt-muted); }
.cmt .cmt-grade-card.is-locked { cursor: not-allowed; opacity: .55; box-shadow: none; background: var(--cmt-soft); }
.cmt .cmt-grade-card.is-locked:hover { transform: none; border-color: var(--cmt-line); }
.cmt .cmt-grade-card.is-locked .cmt-grade-num { background: #94A3B8; }
.cmt .cmt-lock { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; color: var(--cmt-muted); }
.cmt .cmt-have { display: flex; flex-direction: column; gap: .3rem; margin-top: auto; padding: .9rem 1rem; border-radius: var(--cmt-radius-sm); background: var(--cmt-soft); border: 1px dashed var(--cmt-line); font-size: .9rem; color: var(--cmt-text); }
.cmt .cmt-have strong { color: var(--cmt-navy); font-family: var(--cmt-display); font-weight: 600; }
.cmt .cmt-enrolled { margin-bottom: 1.6rem; }
.cmt .cmt-grade-card:not(.is-selected) .cmt-tick { display: none; }
.cmt .cmt-plans-panel[hidden], .cmt [data-cmt-pick-note][hidden] { display: none !important; }
.cmt .cmt-plans-panel.is-entering { animation: cmt-fade .25s ease-out; }
@keyframes cmt-fade { from { opacity: 0; transform: translateY(6px); } }
.cmt .cmt-tick { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--cmt-accent); color: #fff; }
.cmt .cmt-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 900px; margin: 0 auto; }
.cmt .cmt-plan { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem; border-radius: var(--cmt-radius); background: #fff; border: 1px solid var(--cmt-line); box-shadow: var(--cmt-shadow); }
.cmt .cmt-plan form { margin: auto 0 0; }
.cmt .cmt-plan-feature { border: 2px solid var(--cmt-accent); }
.cmt .cmt-ribbon { position: absolute; top: -12px; right: 1.2rem; padding: .25rem .75rem; border-radius: 999px; background: var(--cmt-navy); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cmt .cmt-plan h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; }
.cmt .cmt-price { margin: 0; font-family: var(--cmt-display); font-size: 2rem; font-weight: 700; color: var(--cmt-navy); line-height: 1.1; }
.cmt .cmt-price .cmt-per { font-size: .95rem; font-weight: 500; color: var(--cmt-muted); margin-left: .15rem; }
.cmt .cmt-price del, .cmt .cmt-price del * { font-size: 1.05rem; font-weight: 500; color: var(--cmt-faint); margin-right: .25rem; }
.cmt .cmt-price .woocommerce-Price-amount { font-weight: inherit; }
.cmt .cmt-due { display: grid; gap: .1rem; padding: .85rem 1rem; border-radius: var(--cmt-radius-sm); background: var(--cmt-accent-soft); }
.cmt .cmt-due > span { font-size: .82rem; font-weight: 600; color: var(--cmt-accent-dark); }
.cmt .cmt-due strong { font-family: var(--cmt-display); font-size: 1.45rem; color: var(--cmt-navy); }
.cmt .cmt-due small { font-size: .8rem; color: var(--cmt-muted); }
.cmt .cmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .93rem; }
/* Plan feature lists always read left-aligned, even inside a centred Elementor/theme section. */
.cmt .cmt-plans .cmt-list, .cmt .cmt-plans .cmt-list li { text-align: left !important; justify-self: stretch; margin-left: 0; margin-right: 0; }
.cmt .cmt-plans .cmt-list { justify-items: start; width: 100%; }
.cmt .cmt-list li { position: relative; margin: 0; padding-left: 1.6rem; }
.cmt .cmt-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--cmt-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 3.8 3.8L18 8' fill='none' stroke='%230E9384' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.cmt .cmt-list strong { color: var(--cmt-navy); }
.cmt .cmt-single-link { margin: 1.4rem auto 0; max-width: 900px; text-align: center; padding: .9rem 1rem; border-radius: var(--cmt-radius-sm); background: var(--cmt-soft); border: 1px solid var(--cmt-line); font-size: .93rem; }
.cmt .cmt-single-link a { color: var(--cmt-accent-dark); font-weight: 600; }
.cmt .cmt-secure { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; font-size: .84rem; }
.cmt .cmt-secure svg { width: 16px; height: 16px; }

/* ---------- [cmt_calendar] ---------- */
.cmt-calendar { transition: opacity .2s; }
.cmt-calendar.is-loading .cmt-cal-body { opacity: .5; pointer-events: none; }
.cmt .cmt-cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.2rem; }
.cmt .cmt-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.cmt .cmt-chip { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--cmt-line); background: #fff; color: var(--cmt-navy); font-weight: 600; font-size: .88rem; text-decoration: none; transition: border-color .2s, background .2s; }
.cmt .cmt-chip:hover { border-color: var(--cmt-accent); }
.cmt .cmt-chip.is-on { background: var(--cmt-navy); border-color: var(--cmt-navy); color: #fff; }
.cmt .cmt-month-nav { display: flex; align-items: center; gap: .7rem; }
.cmt .cmt-month-title { min-width: 10ch; text-align: center; font-size: 1.25rem; font-weight: 600; outline: none; }
.cmt .cmt-cal-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.cmt .cmt-grid-wrap { position: sticky; top: 100px; padding: 1rem; background: #fff; border: 1px solid var(--cmt-line); border-radius: var(--cmt-radius); box-shadow: var(--cmt-shadow); }
.cmt table.cmt-grid { width: 100%; border-collapse: separate; border-spacing: 4px; margin: 0; table-layout: fixed; border: 0; background: none; }
.cmt .cmt-grid th { padding: .2rem 0 .4rem; font-size: .72rem; font-weight: 700; color: var(--cmt-faint); text-transform: uppercase; letter-spacing: .06em; text-align: center; border: 0; background: none; }
.cmt .cmt-grid td { padding: 0; border: 0; background: none; text-align: center; vertical-align: middle; }
.cmt .cmt-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; width: 100%; border-radius: 12px; font-size: .9rem; font-weight: 500; color: var(--cmt-navy); text-decoration: none; }
.cmt .is-past .cmt-day { color: var(--cmt-faint); }
.cmt a.cmt-day.has-lessons { background: var(--cmt-accent-soft); font-weight: 700; transition: background .2s, transform .2s; }
.cmt a.cmt-day.has-lessons:hover { background: color-mix(in srgb, var(--cmt-accent) 22%, #fff); }
.cmt .is-past a.cmt-day.has-lessons { background: var(--cmt-soft); color: var(--cmt-muted); }
.cmt .cmt-day i { display: flex; gap: 3px; height: 6px; margin-top: 2px; }
.cmt .cmt-day i b { width: 5px; height: 5px; border-radius: 50%; background: var(--cmt-accent); }
.cmt .is-past .cmt-day i b { background: var(--cmt-faint); }
.cmt .is-today .cmt-day { box-shadow: inset 0 0 0 2px var(--cmt-navy); }
.cmt .is-selected a.cmt-day { background: var(--cmt-accent); color: #fff; }
.cmt .is-selected .cmt-day i b { background: #fff; }
.cmt .cmt-tz { display: flex; align-items: center; gap: .4rem; margin: .6rem .2rem 0; font-size: .8rem; color: var(--cmt-muted); }
.cmt .cmt-tz svg { width: 15px; height: 15px; }
.cmt .cmt-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 .9rem; }
.cmt .cmt-list-head h3 { font-size: 1.15rem; font-weight: 600; outline: none; }
.cmt .cmt-lesson {
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 1rem; align-items: center;
	padding: 1rem 1.1rem; margin: 0 0 .8rem; background: #fff; border: 1px solid var(--cmt-line); border-radius: var(--cmt-radius-sm); box-shadow: var(--cmt-shadow);
}
.cmt .cmt-lesson.is-booked { border-color: color-mix(in srgb, var(--cmt-accent) 55%, var(--cmt-line)); background: linear-gradient(90deg, var(--cmt-accent-soft), #fff 40%); }
.cmt .cmt-lesson.is-past, .cmt .cmt-lesson.is-cancelled { box-shadow: none; background: var(--cmt-soft); }
.cmt .cmt-lesson.is-cancelled .cmt-lesson-title { text-decoration: line-through; color: var(--cmt-muted); }
.cmt .cmt-lesson-date { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 14px; background: var(--cmt-navy); color: #fff; line-height: 1.05; }
.cmt .cmt-lesson.is-past .cmt-lesson-date { background: #CBD5E1; }
.cmt .cmt-lesson-date span { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.cmt .cmt-lesson-date strong { font-family: var(--cmt-display); font-size: 1.45rem; font-weight: 700; }
.cmt .cmt-lesson-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .3rem; }
.cmt .cmt-lesson-title { font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.cmt .cmt-lesson-time { margin: .15rem 0 0; font-size: .88rem; color: var(--cmt-text); }
.cmt .cmt-lesson-time abbr { text-decoration: none; font-weight: 600; color: var(--cmt-muted); font-size: .78rem; }
.cmt .cmt-lesson-desc { margin-top: .35rem; font-size: .86rem; color: var(--cmt-muted); }
.cmt .cmt-lesson-desc p { margin: 0 0 .3rem; }
.cmt .cmt-lesson-action { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.cmt .cmt-state { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--cmt-navy); }
.cmt .cmt-state svg { width: 18px; height: 18px; }
.cmt .cmt-state-ok { color: var(--cmt-ok); }
.cmt .cmt-state-plan { color: var(--cmt-accent-dark); font-size: .88rem; }
.cmt .cmt-live { color: #DC2626; font-weight: 700; }
.cmt .cmt-live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .35rem; border-radius: 50%; background: #DC2626; animation: cmt-pulse 1.4s infinite; }
@keyframes cmt-pulse { 50% { opacity: .3; } }
.cmt .cmt-state-muted { color: var(--cmt-muted); font-weight: 500; font-size: .86rem; max-width: 220px; }
.cmt .cmt-past { margin-top: 1rem; }
.cmt .cmt-past summary { cursor: pointer; font-weight: 600; color: var(--cmt-navy); padding: .6rem 0; }

/* ---------- [cmt_portal] — tabbed layout ----------
   Scoped as .cmt-portal .cmtp-* and resetting theme button/link styles,
   so Woodmart/Elementor typography and button rules can't reshape it. */
.cmt-portal { max-width: 960px; }
.cmt-portal .cmtp-i { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.cmt-portal .cmtp-link { display: inline-flex !important; align-items: center; gap: .3rem; color: var(--cmt-accent-dark) !important; font-weight: 600; font-size: .9rem; text-decoration: none !important; }
.cmt-portal .cmtp-link .cmtp-i { width: 16px; height: 16px; transition: transform .2s; }
.cmt-portal .cmtp-link:hover .cmtp-i { transform: translateX(3px); }

/* Buttons (reset theme styles first) */
.cmt-portal .cmtp-btn, .cmt-portal .cmtp-tab, .cmt-portal .cmtp-textbtn { all: unset; box-sizing: border-box; cursor: pointer; font-family: var(--cmt-display); -webkit-tap-highlight-color: transparent; }
.cmt-portal .cmtp-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .65rem 1.3rem; border-radius: 999px; font-size: .92rem; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s, box-shadow .25s; }
.cmt-portal .cmtp-btn-primary { background: var(--cmt-accent); color: #fff !important; box-shadow: 0 10px 22px -12px var(--cmt-accent); }
.cmt-portal .cmtp-btn-primary:hover { background: var(--cmt-accent-dark); transform: translateY(-2px); }
.cmt-portal .cmtp-btn-ghost { background: #fff; color: var(--cmt-navy) !important; border: 1.5px solid var(--cmt-line); }
.cmt-portal .cmtp-btn-ghost:hover { border-color: var(--cmt-accent); }
.cmt-portal .cmtp-btn-lg { min-height: 50px; padding: .8rem 1.6rem; font-size: 1rem; }
.cmt-portal .cmtp-btn:focus-visible, .cmt-portal .cmtp-tab:focus-visible, .cmt-portal .cmtp-textbtn:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; }
.cmt-portal .cmtp-textbtn { display: inline-block; font-family: var(--cmt-body); font-size: .82rem; font-weight: 500; color: var(--cmt-muted); text-decoration: underline; text-underline-offset: 3px; }
.cmt-portal .cmtp-textbtn:hover { color: var(--cmt-bad); }

/* Welcome + next lesson */
.cmt-portal .cmtp-hero { display: block !important; position: relative; overflow: hidden; margin: 0 0 1rem; padding: clamp(1.25rem, 3.5vw, 1.9rem); border-radius: 24px; color: #CBD5E1; background: radial-gradient(120% 140% at 100% 0%, rgba(20,184,166,.28) 0%, rgba(20,184,166,0) 55%), linear-gradient(135deg, #0D1B2A 0%, #13253A 100%); }
.cmt-portal .cmtp-hero-top { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cmt-portal .cmtp-me { display: flex !important; align-items: center; gap: 1rem; min-width: 0; }
.cmt-portal .cmtp-avatar { display: grid !important; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 18px; background: var(--cmt-accent); color: #fff; font-family: var(--cmt-display); font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; }
.cmt-portal .cmtp-me-text { display: block; min-width: 0; }
.cmt-portal .cmtp-eyebrow { margin: 0 0 .1rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7DD3FC; }
.cmt.cmt-portal .cmtp-hero .cmtp-hello { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.15; color: #fff; }
.cmt-portal .cmtp-email { margin: .15rem 0 0; font-size: .9rem; color: #94A3B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-portal .cmtp-hero-links { display: flex !important; gap: .5rem; }
.cmt-portal .cmtp-hero-links a { display: inline-flex !important; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; background: rgba(255,255,255,.08); color: #E2E8F0 !important; font-size: .85rem; font-weight: 500; text-decoration: none !important; transition: background .2s; }
.cmt-portal .cmtp-hero-links a:hover { background: rgba(255,255,255,.16); }
.cmt-portal .cmtp-hero-links .cmtp-i { width: 16px; height: 16px; }
.cmt-portal .cmtp-next { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.4rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.cmt-portal .cmtp-next-info { display: block; min-width: 0; flex: 1 1 260px; }
.cmt-portal .cmtp-next-label { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7DD3FC; }
.cmt-portal .cmtp-next-title { margin: .2rem 0 .35rem; font-family: var(--cmt-display); font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: #fff; }
.cmt-portal .cmtp-next-when { display: flex !important; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; font-size: .9rem; color: #CBD5E1; }
.cmt-portal .cmtp-next-when .cmtp-i { width: 16px; height: 16px; color: #7DD3FC; }
.cmt-portal .cmtp-nw { display: inline-flex !important; align-items: center; gap: .4rem; white-space: nowrap; margin-right: .7rem; }
.cmt-portal .cmtp-next-action { display: block; flex: none; }
.cmt-portal .cmtp-opens { display: flex !important; flex-direction: column; align-items: flex-end; font-size: .8rem; color: #94A3B8; text-align: right; }
.cmt-portal .cmtp-opens strong { font-family: var(--cmt-display); font-size: 1.05rem; font-weight: 600; color: #fff; }

/* Alerts */
.cmt-portal .cmtp-alert { display: flex !important; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--cmt-warn-bg); color: var(--cmt-warn); border: 1px solid #FDE68A; }
.cmt-portal .cmtp-alert p { margin: 0; font-size: .92rem; line-height: 1.5; }
.cmt-portal .cmtp-alert a { color: inherit !important; font-weight: 700; }
.cmt-portal .cmtp-alert .cmtp-i { margin-top: 1px; }

/* Tabs (shown once the script runs; without it every section is listed) */
.cmt-portal .cmtp-tabs { display: none !important; }
.cmt-portal.is-tabbed .cmtp-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: 0 0 1rem; padding: .35rem; border-radius: 18px; background: #fff; border: 1px solid var(--cmt-line); box-shadow: var(--cmt-shadow); }
.cmt-portal .cmtp-tab { display: flex !important; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .55rem .6rem; border-radius: 13px; color: var(--cmt-text); font-size: .92rem; font-weight: 600; line-height: 1.1; text-align: center; transition: background .2s, color .2s; }
.cmt-portal .cmtp-tab:hover { background: var(--cmt-soft); color: var(--cmt-navy); }
.cmt-portal .cmtp-tab[aria-selected="true"] { background: var(--cmt-navy); color: #fff; }
.cmt-portal .cmtp-tab em { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: 999px; background: var(--cmt-accent-soft); color: var(--cmt-accent-dark); font-style: normal; font-size: .75rem; font-weight: 700; }
.cmt-portal .cmtp-tab[aria-selected="true"] em { background: var(--cmt-accent); color: #fff; }

/* Panels */
.cmt-portal .cmtp-panel { display: block !important; margin: 0 0 1rem; padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: 22px; background: #fff; border: 1px solid var(--cmt-line); box-shadow: var(--cmt-shadow); }
.cmt-portal.is-tabbed .cmtp-panel[hidden] { display: none !important; }
.cmt-portal .cmtp-panel-head { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 1.1rem; }
.cmt-portal .cmtp-panel-title { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--cmt-navy); }
.cmt-portal .cmtp-list { display: grid !important; gap: .75rem; }

/* Lesson rows */
.cmt-portal .cmtp-lesson { display: grid !important; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .9rem 1rem; border-radius: 16px; background: var(--cmt-soft); border: 1px solid var(--cmt-line); }
.cmt-portal .cmtp-lesson.is-off { opacity: .75; }
.cmt-portal .cmtp-lesson.is-off .cmtp-lesson-title { text-decoration: line-through; }
.cmt-portal .cmtp-date { display: flex !important; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 14px; background: var(--cmt-navy); color: #fff; line-height: 1.05; }
.cmt-portal .cmtp-lesson.is-past .cmtp-date { background: #CBD5E1; color: var(--cmt-navy); }
.cmt-portal .cmtp-date-m, .cmt-portal .cmtp-date-w { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cmt-portal .cmtp-date-d { font-family: var(--cmt-display); font-size: 1.45rem; font-weight: 700; }
.cmt-portal .cmtp-lesson-body { display: block; min-width: 0; }
.cmt-portal .cmtp-lesson-title { margin: 0 0 .2rem; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--cmt-navy); }
.cmt-portal .cmtp-lesson-meta { margin: 0 0 .45rem; font-size: .87rem; color: var(--cmt-text); }
.cmt-portal .cmtp-lesson-meta span { display: inline; }
.cmt-portal .cmtp-lesson-meta .cmtp-i { margin: -2px .35rem 0 0; }
.cmt-portal .cmtp-lesson-meta .cmtp-i { width: 15px; height: 15px; color: var(--cmt-muted); }
.cmt-portal .cmtp-tags { display: flex !important; flex-wrap: wrap; gap: .35rem; margin: 0; }
.cmt-portal .cmtp-grade, .cmt-portal .cmtp-tag { display: inline-flex !important; align-items: center; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.4; }
.cmt-portal .cmtp-grade { background: var(--cmt-accent-soft); color: var(--cmt-accent-dark); }
.cmt-portal .cmtp-tag { background: #fff; color: var(--cmt-text); border: 1px solid var(--cmt-line); }
.cmt-portal .cmtp-lesson-side { display: flex !important; flex-direction: column; align-items: flex-end; gap: .35rem; text-align: right; }
.cmt-portal .cmtp-hint { font-size: .8rem; color: var(--cmt-muted); }
.cmt-portal .cmtp-pill { display: inline-flex !important; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.cmt-portal .cmtp-pill .cmtp-i { width: 14px; height: 14px; }
.cmt-portal .cmtp-pill.is-ok { background: var(--cmt-ok-bg); color: var(--cmt-ok); }
.cmt-portal .cmtp-pill.is-warn { background: var(--cmt-warn-bg); color: var(--cmt-warn); }
.cmt-portal .cmtp-pill.is-bad { background: var(--cmt-bad-bg); color: var(--cmt-bad); }
.cmt-portal .cmtp-pill.is-muted { background: #fff; color: var(--cmt-muted); border: 1px solid var(--cmt-line); }

/* Plans */
.cmt-portal .cmtp-plans { display: grid !important; gap: .9rem; }
.cmt-portal .cmtp-plan { display: block !important; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--cmt-soft); border: 1px solid var(--cmt-line); }
.cmt-portal .cmtp-plan.is-active { background: linear-gradient(135deg, var(--cmt-accent-soft), #fff 70%); border-color: color-mix(in srgb, var(--cmt-accent) 35%, var(--cmt-line)); }
.cmt-portal .cmtp-plan-top { display: flex !important; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 1rem; }
.cmt-portal .cmtp-plan-name { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--cmt-navy); }
.cmt-portal .cmtp-plan-top .cmtp-pill { margin-left: auto; }
.cmt-portal .cmtp-facts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem 1rem; }
.cmt-portal .cmtp-fact { display: flex !important; flex-direction: column; gap: .15rem; padding: .7rem .85rem; border-radius: 12px; background: #fff; border: 1px solid var(--cmt-line); }
.cmt-portal .cmtp-fact-k { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cmt-muted); }
.cmt-portal .cmtp-fact-v { font-size: .95rem; font-weight: 600; color: var(--cmt-navy); line-height: 1.35; }
.cmt-portal .cmtp-plan-foot { display: flex !important; justify-content: flex-end; margin-top: 1rem; }

/* Payments */
.cmt-portal .cmtp-pay { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .6rem 1rem; padding: .85rem 1rem; border-radius: 14px; background: var(--cmt-soft); border: 1px solid var(--cmt-line); color: var(--cmt-navy) !important; text-decoration: none !important; transition: border-color .2s, background .2s; }
.cmt-portal .cmtp-pay:hover { border-color: var(--cmt-accent); background: #fff; }
.cmt-portal .cmtp-pay-main { display: flex !important; flex-direction: column; min-width: 0; }
.cmt-portal .cmtp-pay-no { font-family: var(--cmt-display); font-weight: 600; font-size: .95rem; }
.cmt-portal .cmtp-pay-date { font-size: .82rem; color: var(--cmt-muted); }
.cmt-portal .cmtp-pay-total { font-family: var(--cmt-display); font-weight: 600; font-size: 1rem; text-align: right; white-space: nowrap; }

/* Empty states */
.cmt-portal .cmtp-empty { display: flex !important; flex-direction: column; align-items: center; gap: .35rem; padding: 1.8rem 1rem; text-align: center; border-radius: 16px; background: var(--cmt-soft); border: 1.5px dashed var(--cmt-line); }
.cmt-portal .cmtp-empty-icon { display: grid !important; place-items: center; width: 52px; height: 52px; margin-bottom: .3rem; border-radius: 16px; background: var(--cmt-accent-soft); color: var(--cmt-accent-dark); }
.cmt-portal .cmtp-empty-icon .cmtp-i { width: 24px; height: 24px; }
.cmt-portal .cmtp-empty-title { margin: 0; font-family: var(--cmt-display); font-size: 1.02rem; font-weight: 600; color: var(--cmt-navy); }
.cmt-portal .cmtp-empty-text { margin: 0 0 .7rem; max-width: 42ch; font-size: .9rem; color: var(--cmt-muted); }
.cmt-portal .cmtp-support { margin: 1.4rem 0 0; text-align: center; font-size: .88rem; color: var(--cmt-muted); }

/* Logged out */
.cmt-portal .cmtp-login { display: block !important; max-width: 480px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: 24px; background: #fff; border: 1px solid var(--cmt-line); box-shadow: var(--cmt-shadow); text-align: center; }
.cmt-portal .cmtp-login-icon { display: inline-grid !important; place-items: center; width: 56px; height: 56px; margin-bottom: .8rem; border-radius: 18px; background: var(--cmt-navy); color: #fff; }
.cmt-portal .cmtp-title { margin: 0 0 .4rem; font-size: 1.45rem; font-weight: 700; color: var(--cmt-navy); }
.cmt-portal .cmtp-sub { margin: 0 0 1.2rem; color: var(--cmt-muted); font-size: .93rem; }
.cmt-portal .cmtp-login form { text-align: left; }
.cmt-portal .cmtp-login form p { margin: 0 0 .9rem; }
.cmt-portal .cmtp-login label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .88rem; color: var(--cmt-navy); }
.cmt-portal .cmtp-login input[type="text"], .cmt-portal .cmtp-login input[type="password"] { width: 100%; min-height: 48px; padding: .6rem .95rem; border: 1.5px solid var(--cmt-line); border-radius: 12px; background: #fff; font-size: 1rem; }
.cmt-portal .cmtp-login input:focus { outline: none; border-color: var(--cmt-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cmt-accent) 15%, transparent); }
.cmt-portal .cmtp-login .login-remember label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.cmt-portal .cmtp-login input[type="submit"] { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--cmt-accent); color: #fff; font-family: var(--cmt-display); font-weight: 600; font-size: 1rem; cursor: pointer; text-transform: none; letter-spacing: 0; }
.cmt-portal .cmtp-login a { color: var(--cmt-accent-dark); font-weight: 600; }

/* Narrow layout: the script adds .is-narrow from the portal's own width (works in narrow page-builder columns); the media query covers no-JS. */
.cmt-portal.is-narrow .cmtp-hero-links { width: 100%; }
.cmt-portal.is-narrow .cmtp-hero-links a { flex: 1; justify-content: center; white-space: nowrap; }
.cmt-portal.is-narrow .cmtp-next { padding: 1rem; }
.cmt-portal.is-narrow .cmtp-next-action, .cmt-portal.is-narrow .cmtp-next-action .cmtp-btn { width: 100%; }
.cmt-portal.is-narrow .cmtp-opens { align-items: flex-start; text-align: left; }
.cmt-portal.is-narrow.is-tabbed .cmtp-tabs { gap: .2rem; padding: .25rem; }
.cmt-portal.is-narrow .cmtp-tab { flex-direction: column; gap: .2rem; min-height: 58px; padding: .45rem .2rem; font-size: .74rem; position: relative; }
.cmt-portal.is-narrow .cmtp-tab em { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; font-size: .66rem; }
.cmt-portal.is-narrow .cmtp-lesson { grid-template-columns: 52px minmax(0, 1fr); gap: .85rem; align-items: start; }
.cmt-portal.is-narrow .cmtp-date { height: 58px; }
.cmt-portal.is-narrow .cmtp-lesson-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; text-align: left; padding-top: .7rem; border-top: 1px solid var(--cmt-line); }
.cmt-portal.is-narrow .cmtp-lesson-side .cmtp-btn { flex: 1 1 100%; }
.cmt-portal.is-narrow .cmtp-pay { grid-template-columns: minmax(0, 1fr) auto; }
.cmt-portal.is-narrow .cmtp-pay .cmtp-pill { grid-column: 1; grid-row: 2; justify-self: start; }
.cmt-portal.is-narrow .cmtp-pay-total { grid-row: 1 / span 2; grid-column: 2; }
.cmt-portal.is-narrow .cmtp-plan-top .cmtp-pill { margin-left: 0; }
.cmt-portal.is-narrow .cmtp-plan-foot .cmtp-btn { width: 100%; }
@media (max-width: 600px) {
	.cmt-portal .cmtp-hero-links { width: 100%; }
	.cmt-portal .cmtp-hero-links a { flex: 1; justify-content: center; white-space: nowrap; }
	.cmt-portal .cmtp-next { padding: 1rem; }
	.cmt-portal .cmtp-next-action, .cmt-portal .cmtp-next-action .cmtp-btn { width: 100%; }
	.cmt-portal .cmtp-opens { align-items: flex-start; text-align: left; }
	.cmt-portal.is-tabbed .cmtp-tabs { gap: .2rem; padding: .25rem; }
	.cmt-portal .cmtp-tab { flex-direction: column; gap: .2rem; min-height: 58px; padding: .45rem .2rem; font-size: .74rem; position: relative; }
	.cmt-portal .cmtp-tab em { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; font-size: .66rem; }
	.cmt-portal .cmtp-lesson { grid-template-columns: 52px minmax(0, 1fr); gap: .85rem; align-items: start; }
	.cmt-portal .cmtp-date { height: 58px; }
	.cmt-portal .cmtp-lesson-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; text-align: left; padding-top: .7rem; border-top: 1px solid var(--cmt-line); }
	.cmt-portal .cmtp-lesson-side .cmtp-btn { flex: 1 1 100%; }
	.cmt-portal .cmtp-pay { grid-template-columns: minmax(0, 1fr) auto; }
	.cmt-portal .cmtp-pay .cmtp-pill { grid-column: 1; grid-row: 2; justify-self: start; }
	.cmt-portal .cmtp-pay-total { grid-row: 1 / span 2; grid-column: 2; }
	.cmt-portal .cmtp-plan-top .cmtp-pill { margin-left: 0; }
	.cmt-portal .cmtp-plan-foot .cmtp-btn { width: 100%; }
}
/* Narrow layout: the script adds .is-tiny from the portal's own width (works in narrow page-builder columns); the media query covers no-JS. */
.cmt-portal.is-tiny .cmtp-hero { padding: 1.1rem; border-radius: 20px; }
.cmt-portal.is-tiny .cmtp-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; }
.cmt-portal.is-tiny .cmtp-hero-links a span { font-size: .8rem; }
.cmt-portal.is-tiny .cmtp-panel { padding: 1rem; border-radius: 18px; }
.cmt-portal.is-tiny .cmtp-lesson { grid-template-columns: 1fr; padding: .85rem; }
.cmt-portal.is-tiny .cmtp-date { flex-direction: row; gap: .35rem; height: auto; padding: .3rem .7rem; justify-self: start; border-radius: 10px; }
.cmt-portal.is-tiny .cmtp-date-d { font-size: 1rem; }
.cmt-portal.is-tiny .cmtp-lesson-side { grid-column: auto; }
.cmt-portal.is-tiny .cmtp-tab span { font-size: .7rem; }
.cmt-portal.is-tiny .cmtp-facts { grid-template-columns: 1fr; }
@media (max-width: 380px) {
	.cmt-portal .cmtp-hero { padding: 1.1rem; border-radius: 20px; }
	.cmt-portal .cmtp-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; }
	.cmt-portal .cmtp-hero-links a span { font-size: .8rem; }
	.cmt-portal .cmtp-panel { padding: 1rem; border-radius: 18px; }
	.cmt-portal .cmtp-lesson { grid-template-columns: 1fr; padding: .85rem; }
	.cmt-portal .cmtp-date { flex-direction: row; gap: .35rem; height: auto; padding: .3rem .7rem; justify-self: start; border-radius: 10px; }
	.cmt-portal .cmtp-date-d { font-size: 1rem; }
	.cmt-portal .cmtp-lesson-side { grid-column: auto; }
	.cmt-portal .cmtp-tab span { font-size: .7rem; }
	.cmt-portal .cmtp-facts { grid-template-columns: 1fr; }
}
}

/* Join page */
.cmt-join { padding: 2rem 1rem 3rem; }
.cmt .cmt-join-head { display: grid; gap: .4rem; justify-items: start; margin-bottom: 1.2rem; }
.cmt .cmt-join-head .cmt-h2 { margin: .2rem 0 0; }
.cmt .cmt-join-frame { background: #fff; border: 1px solid var(--cmt-line); border-radius: var(--cmt-radius); box-shadow: var(--cmt-shadow); padding: 1rem; min-height: 320px; overflow: hidden; }


/* Book this lesson: once-off or plan */
.cmt .cmt-choice { width: min(320px, 100%); margin-top: .35rem; padding: .7rem; border: 1px solid var(--cmt-line); border-radius: 16px; background: #fff; box-shadow: var(--cmt-shadow-hover); text-align: left; display: grid; gap: .45rem; }
.cmt .cmt-choice[hidden], .cmt .cmt-choice [hidden] { display: none !important; }
.cmt .cmt-choice-title { margin: 0 0 .1rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cmt-muted); }
.cmt .cmt-choice-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; padding: .7rem .85rem; border: 1px solid var(--cmt-line); border-radius: 12px; cursor: pointer; font-family: var(--cmt-body); color: var(--cmt-navy); transition: border-color .15s, background .15s; }
.cmt .cmt-choice-opt:hover, .cmt .cmt-choice-opt:focus-visible { border-color: var(--cmt-accent); background: var(--cmt-accent-soft); }
.cmt .cmt-choice-opt:focus-visible { outline: 2px solid var(--cmt-accent); outline-offset: 2px; }
.cmt .cmt-choice-opt[aria-busy="true"] { opacity: .6; cursor: progress; }
.cmt .cmt-choice-main { display: grid; gap: .1rem; }
.cmt .cmt-choice-main strong { font-size: .95rem; font-weight: 600; color: var(--cmt-navy); }
.cmt .cmt-choice-main small { font-size: .8rem; color: var(--cmt-muted); line-height: 1.35; }
.cmt .cmt-choice-price { font-family: var(--cmt-display); font-weight: 700; color: var(--cmt-navy); white-space: nowrap; }
.cmt .cmt-choice-go { font-size: 1.1rem; color: var(--cmt-accent-dark); }
.cmt .cmt-choice-foot { margin: .15rem 0 0; font-size: .82rem; color: var(--cmt-muted); }
.cmt .cmt-choice-foot a { color: var(--cmt-accent-dark); font-weight: 600; }
.cmt .cmt-choice-done { margin: 0; padding: .55rem .7rem; border-radius: 10px; background: var(--cmt-ok-bg); color: var(--cmt-ok); font-size: .86rem; font-weight: 600; }
.cmt .cmt-choice-done a { display: inline-block; margin-top: .2rem; color: var(--cmt-ok); }

/* Exam countdowns (portal) */
.cmt-portal .cmtp-exams { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: 0 0 1.1rem; }
.cmt-portal .cmtp-exam { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--cmt-line); background: linear-gradient(135deg, #fff, var(--cmt-accent-soft)); }
.cmt-portal .cmtp-exam-head { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; color: var(--cmt-navy); font-size: .95rem; }
.cmt-portal .cmtp-exam-date { margin: 0; font-size: .84rem; color: var(--cmt-muted); }
.cmt-portal .cmtp-count { display: flex; gap: .45rem; }
.cmt-portal .cmtp-count span { display: grid; justify-items: center; min-width: 58px; padding: .45rem .3rem; border-radius: 12px; background: var(--cmt-navy); color: #fff; }
.cmt-portal .cmtp-count b { font-family: var(--cmt-display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cmt-portal .cmtp-count small { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.cmt-portal .cmtp-exam.is-done .cmtp-count { display: none; }
.cmt-portal.is-tiny .cmtp-count span { min-width: 0; flex: 1; }

/* WooCommerce My Account: Student Portal card */
.cmt-account-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: linear-gradient(135deg, #0D1B2A, #0E3A40); color: #CBD5E1; }
.cmt-account-card p { margin: 0; }
.cmt-account-card strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .15rem; }
.cmt-account-card a.cmt-account-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.2rem; border-radius: 999px; background: var(--cmt-accent, #14B8A6); color: #fff !important; font-weight: 600; text-decoration: none !important; white-space: nowrap; }

/* Join page: time left */
.cmt .cmt-join-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.cmt .cmt-join-meta p { margin: 0; }
.cmt .cmt-timeleft { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--cmt-accent-soft); color: var(--cmt-accent-dark); font-weight: 600; font-size: .9rem; }
.cmt .cmt-timeleft.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: cmt-pulse 1.4s infinite; }
.cmt .cmt-timeleft.is-over { background: var(--cmt-soft); color: var(--cmt-muted); }

/* Recording player */
.cmt .cmt-player { position: relative; overflow: hidden; border-radius: var(--cmt-radius); background: #000; box-shadow: var(--cmt-shadow-hover); margin-bottom: 1rem; }
.cmt .cmt-player video { display: block; width: 100%; max-height: 78vh; background: #000; }
.cmt .cmt-watermark { position: absolute; top: 12px; right: 14px; padding: .2rem .55rem; border-radius: 8px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.55); font-size: .78rem; pointer-events: none; user-select: none; animation: cmt-drift 40s linear infinite alternate; }
@keyframes cmt-drift { 0% { top: 12px; right: 14px; } 50% { top: calc(100% - 60px); right: 30%; } 100% { top: 40%; right: 60%; } }

/* [cmt_nbt] workshop booking */
.cmt-nbt { display: grid; gap: 1.6rem; }
.cmt .cmt-nbt-head { text-align: center; margin: 0 0 1rem; }
.cmt .cmt-nbt-head h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .25rem; }
.cmt .cmt-nbt-head p { margin: 0; color: var(--cmt-muted); }
.cmt .cmt-nbt-runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; max-width: 980px; margin: 0 auto; }
.cmt .cmt-nbt-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: var(--cmt-radius); background: #fff; border: 1px solid var(--cmt-line); box-shadow: var(--cmt-shadow); text-align: left; }
.cmt .cmt-nbt-top { display: grid; gap: .45rem; justify-items: start; }
.cmt .cmt-nbt-card h4 { font-size: 1.12rem; font-weight: 600; margin: 0; }
.cmt .cmt-nbt-card .cmt-price { margin: 0; }
.cmt .cmt-nbt-card .cmt-per { margin-left: .35rem; }
.cmt .cmt-nbt-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cmt .cmt-nbt-sessions li { display: flex; align-items: center; gap: .7rem; margin: 0; }
.cmt .cmt-nbt-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cmt-navy); color: #fff; font-family: var(--cmt-display); font-weight: 700; }
.cmt .cmt-nbt-sessions strong { display: block; color: var(--cmt-navy); font-weight: 600; font-size: .95rem; }
.cmt .cmt-nbt-sessions small { color: var(--cmt-muted); font-size: .84rem; }
.cmt .cmt-nbt-venue { display: flex; gap: .45rem; align-items: center; margin: 0; color: var(--cmt-text); font-size: .9rem; }
.cmt .cmt-nbt-venue svg { width: 18px; height: 18px; flex: none; color: var(--cmt-accent-dark); }
.cmt .cmt-nbt-desc { font-size: .9rem; color: var(--cmt-muted); }
.cmt .cmt-nbt-desc p { margin: 0 0 .4rem; }
.cmt .cmt-nbt-actions { margin-top: auto; display: grid; gap: .6rem; }
.cmt .cmt-nbt-form { display: grid; gap: .3rem; justify-items: center; margin: 0; }
.cmt .cmt-hint-warn { color: #B45309; font-weight: 600; }
.cmt .cmt-nbt-empty { max-width: 640px; margin: 0 auto; padding: 1.4rem; border-radius: var(--cmt-radius); background: var(--cmt-soft); border: 1px dashed var(--cmt-line); text-align: center; color: var(--cmt-text); }
.cmt .cmt-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Portal: NBT workshop card */
.cmt-portal .cmtp-nbt { display: grid; gap: .8rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--cmt-line); background: linear-gradient(135deg, #fff, var(--cmt-accent-soft)); }
.cmt-portal .cmtp-nbt-head { display: grid; gap: .25rem; justify-items: start; }
.cmt-portal .cmtp-nbt-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cmt-portal .cmtp-nbt-sessions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; padding: .55rem .7rem; border-radius: 12px; background: #fff; border: 1px solid var(--cmt-line); font-size: .9rem; }
.cmt-portal .cmtp-gap { height: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.cmt .cmt-cal-layout { grid-template-columns: 1fr; }
	.cmt .cmt-grid-wrap { position: static; max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (max-width: 680px) {
	.cmt .cmt-grade-pick { grid-template-columns: 1fr; max-width: 420px; }
	.cmt .cmt-plans { grid-template-columns: 1fr; }
	.cmt .cmt-cal-toolbar { flex-direction: column; align-items: stretch; }
	.cmt .cmt-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; scrollbar-width: none; }
	.cmt .cmt-chip { flex: none; }
	.cmt .cmt-month-nav { justify-content: space-between; }
	.cmt .cmt-lesson { grid-template-columns: 52px minmax(0, 1fr); gap: .8rem; padding: .9rem; }
	.cmt .cmt-lesson-date { height: 56px; }
	.cmt .cmt-lesson-date strong { font-size: 1.25rem; }
	.cmt .cmt-lesson-action { grid-column: 1 / -1; align-items: stretch; text-align: left; }
	.cmt .cmt-lesson-action .cmt-btn { width: 100%; }
	.cmt .cmt-choice { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.cmt * { transition: none !important; }
	.cmt .cmt-btn-primary:hover, .cmt .cmt-grade-card:hover { transform: none; }
}