/* ============================================================
   Member Area v2 — design system
   Scoped under body.mv2 so it never collides with legacy styles.
   Brand-neutral action palette (cyan); per-brand logo/phone come
   from SiteData in the master. Introduced for DETG / WebsiteID 701.
   ============================================================ */

body.mv2 {
    --mv2-bg:          #f3f9fe;
    --mv2-surface:     #ffffff;
    --mv2-ink:         #0f1f33;
    --mv2-ink-2:       #3a4a5e;
    --mv2-ink-3:       #8a97a6;
    --mv2-border:      #e3e9f0;
    --mv2-border-soft: #edf1f6;
    --mv2-primary:     #22b0e8;
    --mv2-primary-dk:  #1a9fd4;
    --mv2-primary-soft:#e8f6fd;
    --mv2-brand:       #ff703e;
    --mv2-danger:      #d64545;
    --mv2-radius:      12px;
    --mv2-radius-lg:   20px;
    --mv2-radius-pill: 999px;
    --mv2-shadow:      0 1px 2px rgba(15, 31, 51, .04), 0 12px 30px -18px rgba(15, 31, 51, .25);
    --mv2-shadow-sm:   0 1px 2px rgba(15, 31, 51, .06);
    --mv2-field-h:     52px;
    --mv2-font:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    margin: 0;
    background: var(--mv2-bg);
    color: var(--mv2-ink);
    font-family: var(--mv2-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Sticky footer: #frmMain is the direct child of body on every v2 master
   (MemberV2/Legacy/Lesson all share this structure), so on short pages the
   footer was left stranded mid-page instead of pinned to the viewport bottom. */
body.mv2 form#frmMain { display: flex; flex-direction: column; min-height: 100vh; }
.mv2-shell { flex: 1 0 auto; }
.mv2-footer { flex-shrink: 0; }

body.mv2 *,
body.mv2 *::before,
body.mv2 *::after { box-sizing: border-box; }

body.mv2 img { max-width: 100%; }
body.mv2 a { color: var(--mv2-primary-dk); text-decoration: none; }
/* Legacy Bootstrap buttons (btn-danger/btn-success/btn-primary/btn-warning/btn-info),
   when rendered as <a class="btn ...">, all expect white text on a colored
   background — but the rule above (specificity 0,1,2) beats their own .btn-*
   color (0,1,0), leaving colored-on-colored unreadable text. Restore it here
   at matching specificity so every legacy anchor button stays readable across
   every chrome-only page. */
body.mv2 a.btn { color: #fff; }
body.mv2 a.btn:hover,
body.mv2 a.btn:focus { color: #fff; }

.mv2-shell { max-width: 1300px; margin: 0 auto; padding: 18px 24px 60px; }

/* ---------- header / nav ---------- */
.mv2-header {
    background: var(--mv2-surface);
    border: 1px solid var(--mv2-border-soft);
    border-radius: var(--mv2-radius-lg);
    box-shadow: var(--mv2-shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 26px;
    margin-bottom: 24px;
}
.mv2-logo { display: flex; align-items: center; flex: 0 0 auto; }
.mv2-logo img { max-height: 46px; width: auto; display: block; }

.mv2-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.mv2-nav li { margin: 0; }
.mv2-nav a {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--mv2-radius-pill);
    color: var(--mv2-ink-2);
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.mv2-nav a:hover { background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); }
.mv2-nav li.active a,
.mv2-nav a.active { background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); font-weight: 600; }

/* Carry GD's active-menu accent across the other refreshed brands, using
   each site's own palette. An inset shadow keeps the link dimensions stable. */
body.mv2.brand-gtts .mv2-nav li.active a,
body.mv2.brand-gtts .mv2-nav a.active,
body.mv2.brand-detg .mv2-nav li.active a,
body.mv2.brand-detg .mv2-nav a.active,
body.mv2.brand-ded .mv2-nav li.active a,
body.mv2.brand-ded .mv2-nav a.active {
    border-radius: 6px;
    box-shadow: inset 0 -3px var(--mv2-brand);
}

.mv2-header-right { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.mv2-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mv2-ink); white-space: nowrap; }
.mv2-phone i, .mv2-phone .mv2-phone-ico { color: var(--mv2-primary); }
body.mv2 .mv2-signout {
    display: inline-block;
    background: var(--mv2-primary);
    color: #fff;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--mv2-radius);
    border: 0;
    cursor: pointer;
}
body.mv2 .mv2-signout:hover { background: var(--mv2-primary-dk); color: #fff; }

/* mobile nav toggle (hidden on desktop) */
.mv2-nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.mv2-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--mv2-ink-2); margin: 4px 0; border-radius: 2px; }

/* ---------- page title ---------- */
.mv2-page-head { display: flex; align-items: center; gap: 18px; margin: 30px 4px 22px; }
.mv2-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--mv2-primary-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--mv2-primary); flex: 0 0 auto;
}
.mv2-avatar svg { width: 30px; height: 30px; }
.mv2-page-head h1 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--mv2-ink); }

/* ---------- card ---------- */
.mv2-card {
    background: var(--mv2-surface);
    border: 1px solid var(--mv2-border-soft);
    border-radius: var(--mv2-radius-lg);
    box-shadow: var(--mv2-shadow);
    padding: 34px 40px 40px;
}

/* ---------- segmented tabs ---------- */
.mv2-tabs {
    display: inline-flex;
    background: #f0f4f8;
    border-radius: var(--mv2-radius-pill);
    padding: 5px;
    margin-bottom: 30px;
    gap: 4px;
}
.mv2-tabs a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--mv2-radius-pill);
    font-weight: 600;
    font-size: 14px;
    color: var(--mv2-ink-3);
}
.mv2-tabs a.active { background: #fff; color: var(--mv2-ink); box-shadow: var(--mv2-shadow-sm); }

/* ---------- form grid ---------- */
.mv2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
}
/* A RepeatLayout="Flow" asp:DataList/Repeater wraps its whole output in a
   <span>, and each ItemTemplate in its own <span> — flatten both so the
   .mv2-field items inside become real grid children instead of one big cell. */
.mv2-grid > span:not(.mv2-field) { display: contents; }
.mv2-grid > span:not(.mv2-field) > span:not(.mv2-field) { display: contents; }

/* Name / M.I. / Last Name on one row (Edit Profile, Figma) */
.mv2-name-row { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr .7fr 2fr; gap: 22px 28px; }
@media (max-width: 720px) { .mv2-name-row { grid-template-columns: 1fr; } }
.mv2-field { display: flex; flex-direction: column; min-width: 0; }
.mv2-field.mv2-col-2 { grid-column: 1 / -1; }
.mv2-label {
    font-size: 13px; font-weight: 600; color: var(--mv2-ink);
    margin: 0 0 7px; display: block; line-height: 1.2;
}
.mv2-label .mv2-req { color: var(--mv2-danger); margin-left: 2px; }

/* inputs / selects / textareas — style the ASP.NET controls by role */
body.mv2 .mv2-field input[type="text"],
body.mv2 .mv2-field input[type="tel"],
body.mv2 .mv2-field input[type="email"],
body.mv2 .mv2-field input[type="password"],
body.mv2 .mv2-field input:not([type]),
body.mv2 .mv2-input,
body.mv2 .mv2-field select,
body.mv2 .mv2-field textarea {
    width: 100%;
    min-height: var(--mv2-field-h);
    border: 1px solid var(--mv2-border);
    border-radius: var(--mv2-radius);
    background: #fff;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--mv2-ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
body.mv2 .mv2-field textarea {
    padding: 14px 16px;
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}
body.mv2 .mv2-field input::placeholder,
body.mv2 .mv2-field textarea::placeholder { color: var(--mv2-ink-3); }
body.mv2 .mv2-field input:focus,
body.mv2 .mv2-field select:focus,
body.mv2 .mv2-field textarea:focus {
    border-color: var(--mv2-primary);
    box-shadow: 0 0 0 3px var(--mv2-primary-soft);
}
body.mv2 .mv2-field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* a field that holds several inline selects (e.g. birthday m/d/y) */
.mv2-inline { display: flex; gap: 14px; align-items: center; }
.mv2-inline > * { flex: 1; }
.mv2-inline .mv2-sep { flex: 0 0 auto; color: var(--mv2-ink-3); }

/* radio group (gender) */
.mv2-field .mv2-radios ul,
.mv2-field .mv2-radios { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.mv2-field .mv2-radios li { display: inline-flex; }
.mv2-field .mv2-radios label { font-size: 15px; color: var(--mv2-ink-2); font-weight: 500; margin: 0 0 0 6px; }
.mv2-field .mv2-radios input[type="radio"] { width: 18px; height: 18px; accent-color: var(--mv2-primary); }

/* validation summary */
body.mv2 .validation-summary,
body.mv2 .mv2-errors { margin-bottom: 18px; }
body.mv2 .mv2-errors:empty { display: none; }
body.mv2 .validation-summary ul { color: var(--mv2-danger); background: #fdecec; border: 1px solid #f5c6c6; border-radius: var(--mv2-radius); padding: 12px 16px 12px 34px; margin: 0; }

/* section subheading inside form (Oklahoma / Georgia / Parent) */
.mv2-subhead { grid-column: 1 / -1; font-size: 16px; font-weight: 700; color: var(--mv2-ink); margin: 8px 0 0; }
.mv2-note { grid-column: 1 / -1; font-size: 13px; color: var(--mv2-ink-2); margin: 0; }

/* ---------- actions ---------- */
.mv2-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 34px; }
body.mv2 .mv2-btn,
body.mv2 .mv2-actions input[type="submit"],
body.mv2 .mv2-actions .btn {
    display: inline-block;
    background: var(--mv2-primary);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 44px;
    border: 0;
    border-radius: var(--mv2-radius);
    cursor: pointer;
    box-shadow: var(--mv2-shadow-sm);
}
body.mv2 .mv2-btn:hover,
body.mv2 .mv2-actions input[type="submit"]:hover { background: var(--mv2-primary-dk); color: #fff; }
body.mv2 .mv2-btn-ghost {
    background: #fff; color: var(--mv2-primary-dk);
    border: 1px solid var(--mv2-border);
}

/* ---------- footer ---------- */
.mv2-footer { text-align: center; color: #cbd5e1; font-size: 14px; padding: 22px 24px; background: #0b1220; margin-top: 8px; }
.mv2-footer a { color: #e2e8f0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .mv2-nav { order: 3; width: 100%; justify-content: center; margin: 6px 0 0; }
    .mv2-header { flex-wrap: wrap; }
}
@media (max-width: 720px) {
    .mv2-shell { padding: 12px 14px 48px; }
    .mv2-card { padding: 24px 18px 28px; }
    .mv2-grid { grid-template-columns: 1fr; }
    .mv2-page-head h1 { font-size: 26px; }
    .mv2-nav a { padding: 8px 12px; font-size: 14px; }
    .mv2-actions { justify-content: stretch; }
    body.mv2 .mv2-actions input[type="submit"],
    body.mv2 .mv2-btn { width: 100%; text-align: center; }
}

/* ============================================================
   Dashboard (TrafficSchoolMain) — v2
   ============================================================ */

/* dismissible info alert */
body.mv2 .mv2-alert {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--mv2-surface);
    border: 1px solid var(--mv2-border-soft);
    border-left: 4px solid #e8a33d;
    border-radius: var(--mv2-radius);
    box-shadow: var(--mv2-shadow-sm);
    padding: 16px 18px; margin: 0 0 22px; position: relative;
}
body.mv2 .mv2-alert .mv2-alert-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: #fbecd2; color: #cf8a1e; display: flex; align-items: center; justify-content: center; }
body.mv2 .mv2-alert .mv2-alert-body { font-size: 14px; color: var(--mv2-ink-2); }
body.mv2 .mv2-alert .mv2-alert-body strong { color: var(--mv2-ink); display: block; margin-bottom: 2px; }
body.mv2 .mv2-alert .close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--mv2-ink-3); cursor: pointer; opacity: .7; }

/* danger variant — account-risk / failure warnings */
body.mv2 .mv2-alert.mv2-alert-danger { border-left-color: #d64545; }
body.mv2 .mv2-alert.mv2-alert-danger .mv2-alert-ico { background: #fdecec; color: #b02a2a; }
body.mv2 .mv2-alert.mv2-alert-danger .mv2-alert-body { color: var(--mv2-ink); font-weight: 700; }
body.mv2 .mv2-alert.mv2-alert-danger .mv2-alert-body p { margin: 0 0 6px; }
body.mv2 .mv2-alert.mv2-alert-danger .mv2-alert-body p:last-child { margin-bottom: 0; }

/* top two-column area */
.mv2-dash-top { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 24px; margin-bottom: 30px; }
.mv2-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv2-ink-3); }
.mv2-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mv2-card-head a { font-weight: 600; font-size: 14px; }

/* profile card */
.mv2-profile-id { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.mv2-profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--mv2-primary); color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mv2-profile-id h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--mv2-ink); }
.mv2-profile-id .mv2-sub { color: var(--mv2-ink-3); font-size: 13px; }
.mv2-profile-rows { border-top: 1px solid var(--mv2-border-soft); }
.mv2-prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--mv2-border-soft); }
.mv2-prow .mv2-prow-l { display: inline-flex; align-items: center; gap: 9px; color: var(--mv2-ink-3); font-size: 14px; }
.mv2-prow .mv2-prow-l svg { width: 16px; height: 16px; }
.mv2-prow .mv2-prow-v { font-weight: 600; color: var(--mv2-ink); font-size: 14px; text-align: right; }
.mv2-profile-cta { margin-top: 20px; }
body.mv2 .mv2-profile-cta a { display: block; text-align: center; padding: 12px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); font-weight: 600; color: var(--mv2-primary-dk); }
body.mv2 .mv2-profile-cta a:hover { background: var(--mv2-primary-soft); }

/* progress card */
.mv2-progress-top { display: flex; gap: 26px; align-items: center; margin-bottom: 20px; }
.mv2-ring { position: relative; width: 116px; height: 116px; flex: 0 0 auto; }
.mv2-ring svg { transform: rotate(-90deg); width: 116px; height: 116px; }
.mv2-ring .mv2-ring-bg { stroke: var(--mv2-primary-soft); }
.mv2-ring .mv2-ring-fg { stroke: var(--mv2-primary); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.mv2-ring .mv2-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mv2-ring .mv2-ring-pct { font-size: 22px; font-weight: 800; color: var(--mv2-ink); line-height: 1; }
.mv2-ring .mv2-ring-cap { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--mv2-ink-3); text-transform: uppercase; margin-top: 3px; }
.mv2-progress-right { flex: 1; min-width: 0; }
.mv2-progress-bar { height: 8px; border-radius: 999px; background: var(--mv2-primary-soft); overflow: hidden; margin: 8px 0 18px; }
.mv2-progress-bar > i { display: block; height: 100%; background: var(--mv2-primary); border-radius: 999px; }
.mv2-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mv2-stat { border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius); padding: 14px 16px; }
.mv2-stat .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv2-ink-3); }
.mv2-stat .v { font-size: 20px; font-weight: 800; color: var(--mv2-ink); margin-top: 2px; }
.mv2-stat .s { font-size: 12px; color: var(--mv2-ink-3); }
.mv2-current-chapter { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #f0f6fb; border-radius: var(--mv2-radius); padding: 16px 20px; margin-top: 4px; }
.mv2-current-chapter .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv2-ink-3); }
.mv2-current-chapter .v { font-size: 17px; font-weight: 700; color: var(--mv2-ink); }
body.mv2 .mv2-btn-arrow { display: inline-flex; align-items: center; gap: 8px; }
body.mv2 .mv2-viewall { display: block; width: 100%; margin-top: 14px; text-align: center; padding: 12px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); font-weight: 600; color: var(--mv2-primary-dk); background: #fff; cursor: pointer; }
body.mv2 .mv2-viewall:hover { background: var(--mv2-primary-soft); }
/* Pin the syllabus toggle to the card's bottom edge so it lines up with the
   profile card's "View / Edit Full Profile" button (Figma). */
.mv2-dash-top > .mv2-card { display: flex; flex-direction: column; }
body.mv2 .mv2-dash-top .mv2-viewall { margin-top: auto; }
.mv2-dash-top .mv2-current-chapter { margin-bottom: 14px; }
.mv2-syllabus-wrap { margin-top: 16px; }

/* section heading */
.mv2-section-head { margin: 6px 0 18px; }
.mv2-section-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--mv2-ink); }
.mv2-section-head p { margin: 4px 0 0; color: var(--mv2-ink-3); font-size: 14px; }

/* upgrade cards */
.mv2-upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.mv2-upcard { position: relative; background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm); border-top: 4px solid var(--mv2-primary); overflow: hidden; display: flex; flex-direction: column; }
.mv2-upcard.accent { border-top-color: var(--mv2-brand); }
/* Source images here are small icon-sized assets (~60-125px), not banner
   photos — a fixed shorter height + object-fit:contain keeps them crisp and
   centered instead of upscaled/cropped/blurred by a wide 16:9 cover box. */
.mv2-upcard .mv2-upcard-media { background: var(--mv2-primary-soft); height: 130px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.mv2-upcard .mv2-upcard-media img { width: 100%; height: 100%; object-fit: cover; }
.mv2-upcard .mv2-upcard-media.contain img { width: auto; height: auto; max-width: 72%; max-height: 88px; object-fit: contain; }
.mv2-upcard.accent .mv2-upcard-media { background: #fdeee6; }
.mv2-upcard-free { position: absolute; top: 10px; right: 10px; background: #fff; color: var(--mv2-brand); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: var(--mv2-shadow-sm); }
.mv2-upcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.mv2-upcard-body h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--mv2-ink); }
.mv2-upcard-body > p { margin: 0 0 14px; font-size: 14px; color: var(--mv2-ink-2); }
.mv2-feat { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mv2-feat li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--mv2-ink-2); }
.mv2-feat li svg { width: 16px; height: 16px; color: var(--mv2-primary); flex: 0 0 auto; }
.mv2-upcard.accent .mv2-feat li svg { color: var(--mv2-brand); }
.mv2-upcard .mv2-badge { display: inline-block; background: #fff; border: 1px solid var(--mv2-border); color: var(--mv2-brand); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.mv2-upcard-foot { margin-top: auto; }
body.mv2 .mv2-upcard-foot a, body.mv2 .mv2-upcard-foot .btn { display: block; text-align: center; padding: 13px; border-radius: var(--mv2-radius); font-weight: 600; background: var(--mv2-primary); color: #fff; }
body.mv2 .mv2-upcard-foot a:hover { background: var(--mv2-primary-dk); }
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a, body.mv2 .mv2-upcard.accent .mv2-upcard-foot .btn { background: var(--mv2-brand); }
/* When the backend disables the upgrade link (e.g. MemberHelper.CanUpgradeExamPrep
   returns false), ASP.NET renders it with .aspNetDisabled/.disabled and strips the
   href — make that state look genuinely unavailable instead of a live button. */
body.mv2 .mv2-upcard-foot a.disabled,
body.mv2 .mv2-upcard-foot a.aspNetDisabled,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a.disabled,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a.aspNetDisabled { background: var(--mv2-border); color: var(--mv2-ink-3); cursor: not-allowed; pointer-events: none; }
body.mv2 .mv2-upcard-foot a.disabled:hover,
body.mv2 .mv2-upcard-foot a.aspNetDisabled:hover,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a.disabled:hover,
body.mv2 .mv2-upcard.accent .mv2-upcard-foot a.aspNetDisabled:hover { background: var(--mv2-border); }

/* balance bar */
.mv2-balance { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm); padding: 20px 24px; margin-bottom: 24px; }
.mv2-balance .mv2-balance-ico { width: 44px; height: 44px; border-radius: 10px; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); display: flex; align-items: center; justify-content: center; }
.mv2-balance .mv2-balance-txt { flex: 1; min-width: 200px; }
.mv2-balance .mv2-balance-txt .k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv2-ink-3); }

/* balance bar — account balance info + payment CTA (BalanceDue.ascx / BalanceDueExam.ascx) */
.mv2-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; }
.mv2-balance-row .mv2-balance-sentence { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--mv2-ink); }
.mv2-balance-row .mv2-balance-amount { color: var(--mv2-primary-dk); font-size: 17px; }
.mv2-balance-row .mv2-balance-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.mv2-balance-row .mv2-balance-big { font-size: 26px; font-weight: 800; color: var(--mv2-ink); line-height: 1.2; }
.mv2-balance-row .mv2-balance-desc { font-size: 14px; color: var(--mv2-ink-2); }
.mv2-balance-row .mv2-balance-desc::first-letter { text-transform: lowercase; }
.mv2-balance-row .mv2-btn { flex: 0 0 auto; }

/* referral bar (green) */
.mv2-refer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--mv2-brand); border-radius: var(--mv2-radius-lg); padding: 22px 26px; margin-bottom: 24px; color: #fff; }
.mv2-refer .mv2-refer-ico { width: 46px; height: 46px; border-radius: 10px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.mv2-refer .mv2-refer-txt { flex: 1; min-width: 220px; }
.mv2-refer .mv2-refer-txt h3 { margin: 0 0 3px; font-size: 20px; font-weight: 800; }
.mv2-refer .mv2-refer-txt p { margin: 0; font-size: 14px; color: rgba(255,255,255,.9); }
.mv2-refer .mv2-refer-actions { display: flex; align-items: center; gap: 18px; }
body.mv2 .mv2-refer .mv2-btn-white { background: #fff; color: var(--mv2-brand); font-weight: 700; padding: 11px 20px; border-radius: var(--mv2-radius); }
body.mv2 .mv2-refer a { color: #fff; font-weight: 600; }

/* app promo */
.mv2-apppromo { display: flex; align-items: center; gap: 30px; background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm); padding: 24px 30px; margin-bottom: 10px; }
.mv2-apppromo .mv2-app-phone { flex: 0 0 auto; width: 150px; }
.mv2-apppromo .mv2-app-txt h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--mv2-ink); }
.mv2-apppromo .mv2-app-txt p { margin: 0 0 16px; font-size: 14px; color: var(--mv2-ink-2); max-width: 60ch; }
.mv2-app-badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mv2-app-badges img { height: 44px; width: auto; }

/* legacy hooks kept but hidden; syllabus reuses existing controls */
body.mv2 #chart_div { display: none; }
body.mv2 .traffic-main-chapters { font-size: 14px; }
body.mv2 .vertical-banner { display: none; }

@media (max-width: 980px) {
    .mv2-dash-top { grid-template-columns: 1fr; }
    .mv2-upgrade-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .mv2-progress-top { flex-direction: column; align-items: stretch; }
    .mv2-stat-row { grid-template-columns: 1fr; }
    .mv2-apppromo { flex-direction: column; text-align: center; }
}

/* legacy bootstrap remnants used by preserved controls */
body.mv2 .modal { display: none !important; }
body.mv2 .modal.in { display: flex !important; }
body.mv2 .member-dash-v2 .row { display: block; margin: 0; }
body.mv2 .link-covid { display:block; text-align:center; padding:14px; color:var(--mv2-danger); }

/* upgrade wrapper Panel is transparent to the grid */
body.mv2 .mv2-upcontents { display: contents; }

/* generic: a wrapper (asp:Panel etc.) transparent to the surrounding .mv2-grid */
body.mv2 .mv2-contents { display: contents; }

/* small helper text under a field (formats, notes) */
.mv2-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mv2-ink-3); }

/* section title inside a card (e.g. "Court Information") */
.mv2-card-title { margin: 0 0 20px; font-size: 20px; font-weight: 800; color: var(--mv2-ink); }

/* ============================================================
   Course syllabus (View All Chapters) — v2 styling of the
   compiled CourseStatusSummary2 control output.
   ============================================================ */
body.mv2 .mv2-syllabus-wrap .course-syllabus h3 { font-size: 20px; font-weight: 800; color: var(--mv2-ink); margin: 0 0 14px; }
body.mv2 .mv2-syllabus-wrap .course-icons { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--mv2-ink-2); }
body.mv2 .mv2-syllabus-wrap .course-icons li { display: inline-flex; align-items: center; gap: 8px; }
body.mv2 .course-icons span { width: 15px; height: 15px; border-radius: 50%; display: inline-block; background: var(--mv2-border); }
body.mv2 .course-icons .completed-check { background: #1c9a63; }
body.mv2 .course-icons .caution-icon { background: #e8a33d; }
body.mv2 .course-icons .check-mark-x { background: #cbd5e1; }

/* the JS-filled duplicate column is hidden; the server-rendered summary is the source of truth */
body.mv2 #courses-table { display: none; }

body.mv2 .traffic-main-chapters { border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius); overflow: hidden; margin-left: 0; }
body.mv2 .traffic-main-chapters .header { display: grid; grid-template-columns: 120px 1fr 130px; gap: 14px; padding: 12px 18px; background: var(--mv2-primary-soft); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mv2-ink-3); }
body.mv2 .traffic-main-chapters .header > div { min-width: 0; }
body.mv2 .traffic-main-chapters .header-minutes { text-align: right; }

body.mv2 .traffic-main-chapters > div:not(.header) { display: grid; grid-template-columns: 120px 1fr 130px; align-items: center; gap: 6px 14px; padding: 15px 18px; border-top: 1px solid var(--mv2-border-soft); border-left: 3px solid transparent; }
body.mv2 .traffic-main-chapters .chapter-complete,
body.mv2 .traffic-main-chapters .chapter-completed,
body.mv2 .traffic-main-chapters .chapter-finished { border-left-color: #1c9a63; }
body.mv2 .traffic-main-chapters .chapter-inprogress { border-left-color: #e8a33d; }
body.mv2 .traffic-main-chapters .chapter-unfinished { border-left-color: var(--mv2-border); }

body.mv2 .traffic-main-chapters .chapter-number { font-weight: 700; color: var(--mv2-ink); font-size: 14px; }
body.mv2 .traffic-main-chapters .chapter-title { font-weight: 600; color: var(--mv2-ink); }
body.mv2 .traffic-main-chapters .chapter-status { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 13px; color: var(--mv2-ink-3); }
body.mv2 .traffic-main-chapters .status-icon { width: 14px; height: 14px; border-radius: 50%; background: var(--mv2-border); flex: 0 0 auto; }
body.mv2 .traffic-main-chapters .chapter-complete .status-icon,
body.mv2 .traffic-main-chapters .chapter-completed .status-icon,
body.mv2 .traffic-main-chapters .chapter-finished .status-icon { background: #1c9a63; }
body.mv2 .traffic-main-chapters .chapter-inprogress .status-icon { background: #e8a33d; }
body.mv2 .traffic-main-chapters .icon-showlessons { display: none; }

body.mv2 .traffic-main-chapters .lessons { grid-column: 1 / -1; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
body.mv2 .traffic-main-chapters .lesson { padding: 6px 10px; font-size: 13.5px; color: var(--mv2-ink-2); border-radius: 6px; }
body.mv2 .traffic-main-chapters .lesson a { color: var(--mv2-primary-dk); font-weight: 600; }
body.mv2 .traffic-main-chapters .lesson-link:hover { background: var(--mv2-primary-soft); }

/* ============================================================
   Lesson player (TrafficSchoolLesson) — v2
   ============================================================ */
.mv2-lesson-head { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 2fr) auto; gap: 26px; align-items: center; margin: 26px 4px 22px; }
.mv2-lesson-greeting { display: flex; align-items: center; gap: 14px; }
.mv2-lesson-avatar { width: 44px; height: 44px; border-radius: 50%; background: #ffe6dc; color: var(--mv2-brand); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mv2-lesson-hello { font-size: 19px; font-weight: 800; color: var(--mv2-ink); line-height: 1.15; }
.mv2-lesson-sub { font-size: 13px; color: var(--mv2-ink-3); }
.mv2-lesson-progress .mv2-lp-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--mv2-ink-2); font-weight: 600; margin-bottom: 8px; }
body.mv2 .mv2-lesson-progress .progress-bar { height: 12px; background: #e7ecf1; border-radius: 999px; overflow: hidden; box-shadow: none; width: 100%; }
/* backend injects the "4%" text + width:X% into .current-progress; hide the
   text for a clean Figma-style fill, keep a small nub visible at low % */
body.mv2 .mv2-lesson-progress .current-progress { height: 100%; min-width: 10px; background: var(--mv2-brand); border-radius: 999px; font-size: 0; color: transparent; transition: width .35s ease; }
body.mv2 .mv2-lesson-progress .current-progress.progress-zero { min-width: 0; }
.mv2-lesson-textsize { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.mv2-lesson-textsize > span { font-size: 14px; color: var(--mv2-ink-2); }
body.mv2 a.mv2-textbtn { width: 42px; height: 42px; border: 1px solid var(--mv2-border); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--mv2-ink); background: #fff; }
body.mv2 a.mv2-textbtn:hover { background: var(--mv2-primary-soft); }
body.mv2 a.mv2-textbtn .loupe { display: none; }

.mv2-readalong { margin-bottom: 24px; }
.mv2-readalong:empty { display: none; }

.mv2-lesson-content .mv2-lesson-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mv2-brand); margin-bottom: 10px; }
body.mv2 .mv2-lesson-content .welcome,
.mv2-lesson-content .mv2-lesson-title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--mv2-ink); line-height: 1.12; margin: 0 0 22px; display: block; }
.mv2-lesson-content { display: flow-root; }
body.mv2 .LessonContent { font-size: 16px; line-height: 1.7; color: var(--mv2-ink-2); display: flow-root; }
body.mv2 .LessonContent img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
body.mv2 .LessonContent p { margin: 0 0 16px; }

.mv2-lesson-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 28px 0 10px; clear: both; }
body.mv2 .mv2-lesson-nav .previous-lesson-btn { background: #fff; border: 1px solid var(--mv2-border); color: var(--mv2-ink); font-weight: 600; padding: 13px 24px; border-radius: var(--mv2-radius); }
body.mv2 .mv2-lesson-nav .previous-lesson-btn:hover { background: #f5f8fb; }
body.mv2 .mv2-lesson-nav .next-lesson-btn { background: #199a63; color: #fff; font-weight: 600; padding: 13px 28px; border-radius: var(--mv2-radius); border: 0; }
body.mv2 .mv2-lesson-nav .next-lesson-btn:hover { background: #15834f; color: #fff; }

body.mv2 .red-timer-wrap { text-align: center; margin: 14px 0; }
/* legacy stylesheet makes .red-timer a floated block — neutralize so the pill
   actually centers under the lesson content (client feedback) */
body.mv2 .red-timer { display: inline-flex; float: none; margin: 0 auto; }

/* Lesson media (client feedback): center the player, use the content width,
   keep aspect ratio, kill the letterbox gap around small embeds */
body.mv2 .LessonContent video,
body.mv2 .LessonContent .video-js,
body.mv2 .LessonContent iframe,
body.mv2 .LessonContent object,
body.mv2 .LessonContent embed {
    display: block;
    margin: 16px auto;
    width: 100% !important;
    max-width: 880px;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: #000;
}
body.mv2 #lessontimer, body.mv2 #lessontimertop { font-weight: 700; }

@media (max-width: 900px) {
    .mv2-lesson-head { grid-template-columns: 1fr; }
    .mv2-lesson-textsize { justify-content: flex-start; }
    body.mv2 .mv2-lesson-content .welcome, .mv2-lesson-content .mv2-lesson-title { font-size: 26px; }
}

/* page-head subtitle + read-only display field */
.mv2-page-head-sub { align-items: flex-start; }
.mv2-page-head-sub h1 { margin-bottom: 4px; }
.mv2-page-sub { margin: 0; color: var(--mv2-ink-2); font-size: 14.5px; max-width: 80ch; }
body.mv2 .mv2-readonly-field { min-height: var(--mv2-field-h); display: flex; align-items: center; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); background: #f5f8fb; padding: 0 16px; color: var(--mv2-ink); font-size: 15px; font-weight: 600; }

/* ============================================================
   Read-along audio player (lesson) — Figma node 11457-5916
   Custom UI wired to a hidden native <audio> (engine untouched)
   ============================================================ */
body.mv2 .mv2-readalong { padding: 20px 24px; overflow: hidden; }
.mv2-ra-inner { display: flex; flex-direction: column; gap: 16px; }
.mv2-ra-audio { display: none; }

/* top row: speaker + heading + equalizer + badge */
.mv2-ra-top { display: flex; align-items: center; gap: 22px; }
.mv2-ra-lead { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; min-width: 0; }
.mv2-ra-speaker { width: 66px; height: 66px; flex: 0 0 auto; }
.mv2-ra-lead-txt { min-width: 0; }
.mv2-ra-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--mv2-ink); max-width: 16ch; }
.mv2-ra-hint { margin: 6px 0 0; display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--mv2-ink-2); }
.mv2-ra-hint svg { color: var(--mv2-primary); flex: 0 0 auto; }
.mv2-readalong.is-unavailable .mv2-ra-hint { color: #b02a2a; font-weight: 600; }
.mv2-readalong.is-unavailable .mv2-ra-play { opacity: .6; }

/* equalizer — animated bars, decorative */
.mv2-ra-eq { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 5px; height: 72px; overflow: hidden; }
.mv2-ra-eq span { display: block; width: 5px; border-radius: 3px; background: var(--mv2-primary); height: 30%; align-self: center; }
/* varied resting heights so it reads as a waveform even when paused */
.mv2-ra-eq span:nth-child(4n+1) { height: 55%; }
.mv2-ra-eq span:nth-child(4n+2) { height: 85%; }
.mv2-ra-eq span:nth-child(4n+3) { height: 40%; }
.mv2-ra-eq span:nth-child(6n) { height: 70%; }
.mv2-ra-eq span:nth-child(5n) { height: 95%; }
.mv2-readalong.is-playing .mv2-ra-eq span { animation: mv2eq 900ms ease-in-out infinite alternate; }
@keyframes mv2eq { from { height: 14%; } to { height: 92%; } }

/* Audio read-along badge / upgrade CTA */
body.mv2 .mv2-ra-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: var(--mv2-primary); color: #fff; font-weight: 700; font-size: 14.5px; padding: 11px 20px; border-radius: 999px; white-space: nowrap; }
body.mv2 a.mv2-ra-badge:hover { background: var(--mv2-primary-dk); color: #fff; }

/* controls row */
.mv2-ra-controls { display: flex; align-items: center; gap: 16px; }
body.mv2 .mv2-ra-play { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--mv2-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s; }
body.mv2 .mv2-ra-play:hover { background: var(--mv2-primary-dk); }
.mv2-ra-play .mv2-ra-ico-pause { display: none; }
.mv2-readalong.is-playing .mv2-ra-play .mv2-ra-ico-play { display: none; }
.mv2-readalong.is-playing .mv2-ra-play .mv2-ra-ico-pause { display: inline; }
.mv2-ra-time { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--mv2-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv2-ra-seek { flex: 1 1 auto; position: relative; height: 8px; border-radius: 999px; background: #e4ebf1; cursor: pointer; }
.mv2-ra-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--mv2-primary); }
.mv2-ra-seek-knob { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--mv2-primary); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: none; }
body.mv2 .mv2-ra-btn { flex: 0 0 auto; height: 40px; min-width: 44px; padding: 0 12px; border-radius: 12px; border: 0; background: var(--mv2-primary); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
body.mv2 .mv2-ra-btn:hover { background: var(--mv2-primary-dk); }
.mv2-ra-vol .mv2-ra-ico-mute { display: none; }
.mv2-readalong.is-muted .mv2-ra-vol .mv2-ra-ico-vol { display: none; }
.mv2-readalong.is-muted .mv2-ra-vol .mv2-ra-ico-mute { display: inline; }
.mv2-ra-menu-wrap { position: relative; flex: 0 0 auto; }
.mv2-ra-pop { position: absolute; right: 0; bottom: calc(100% + 8px); background: #fff; border: 1px solid var(--mv2-border); border-radius: 12px; box-shadow: var(--mv2-shadow-md, 0 8px 24px rgba(16,40,70,.14)); padding: 6px; min-width: 150px; display: none; z-index: 20; }
.mv2-ra-menu-wrap.open .mv2-ra-pop { display: block; }
.mv2-ra-pop a, .mv2-ra-pop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--mv2-ink); cursor: pointer; }
.mv2-ra-pop a:hover, .mv2-ra-pop button:hover { background: var(--mv2-surface-2, #f2f7fb); }

/* upsell (no audio) — controls are decorative links */
.mv2-readalong.is-upsell .mv2-ra-seek { cursor: default; }

@media (max-width: 780px) {
    .mv2-ra-top { flex-wrap: wrap; gap: 14px; }
    .mv2-ra-eq { order: 3; flex-basis: 100%; height: 44px; }
    .mv2-ra-badge { order: 2; margin-left: auto; }
    .mv2-ra-title { font-size: 17px; }
    .mv2-ra-speaker { width: 54px; height: 54px; }
    .mv2-ra-controls { flex-wrap: wrap; gap: 12px; }
    .mv2-ra-time { order: 2; }
    .mv2-ra-seek { order: 5; flex-basis: 100%; }
}

/* ============================================================
   Upgrades / Study Tools (StudyTools.aspx) — v2 card restyle.
   The ST*.ascx controls emit legacy .row/.span* markup; this
   styles it into clean v2 cards without editing those controls.
   ============================================================ */
.study-tools-page .mv2-alert { margin-bottom: 22px; }
.mv2-upgrades-list { display: flex; flex-direction: column; gap: 18px; }

/* Each ST control root is a .row → card (Figma 11457:6696 row style: circular
   product tile at the left, "$price Title" bold, content beside it). */
.mv2-upgrades-list .row {
    background: var(--mv2-surface);
    border: 1px solid var(--mv2-border-soft);
    border-radius: var(--mv2-radius-lg);
    box-shadow: var(--mv2-shadow-sm);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 22px;
}
.mv2-upgrades-list .row:has(> .span4) {
    grid-template-columns: 76px 1fr;
    grid-template-areas: "icon title" "icon body";
}
.mv2-upgrades-list .row:has(> .span4) .study-tools-header { grid-area: title; align-self: center; }
.mv2-upgrades-list .row:has(> .span4) .span4 { grid-area: icon; }
.mv2-upgrades-list .row:has(> .span4) .span8 { grid-area: body; }
.mv2-upgrades-list .study-tools-header h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--mv2-ink); line-height: 1.25; }
.mv2-upgrades-list .study-tools-header h3 a { color: var(--mv2-primary-dk); }

.mv2-upgrades-list .span4 {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--mv2-primary-soft);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; text-align: center;
}
.mv2-upgrades-list .span4 div { display: contents; }
.mv2-upgrades-list .span4 img { max-width: 52px; max-height: 52px; width: auto; height: auto; }
.mv2-upgrades-list .span8 { min-width: 0; }
.mv2-upgrades-list .span8 > p { margin: 0 0 12px; font-size: 14.5px; color: var(--mv2-ink-2); }
.mv2-upgrades-list .span8 > p:last-child { margin-bottom: 0; }
.mv2-upgrades-list a { color: var(--mv2-primary-dk); }

/* order checkbox — prominent CTA pill (asp:CheckBox renders span.studytoolcheck > input + label) */
.mv2-upgrades-list .Validation { margin: 14px 0 0; }
.mv2-upgrades-list .studytoolcheck { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--mv2-border); color: var(--mv2-ink); font-weight: 600; padding: 12px 18px; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.mv2-upgrades-list .studytoolcheck:hover { border-color: var(--mv2-primary); }
.mv2-upgrades-list .studytoolcheck:has(input:checked) { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); box-shadow: 0 0 0 1px var(--mv2-primary); }
.mv2-upgrades-list .studytoolcheck input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mv2-primary); cursor: pointer; margin: 0; }
.mv2-upgrades-list .studytoolcheck label { margin: 0; cursor: pointer; }

/* shipping radios */
.mv2-upgrades-list .stshipping { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mv2-upgrades-list .stshipping li { display: flex; align-items: center; }
.mv2-upgrades-list .stshipping label { margin: 0 0 0 8px; color: var(--mv2-ink-2); font-size: 14.5px; }
.mv2-upgrades-list .stshipping input[type="radio"] { accent-color: var(--mv2-primary); width: 16px; height: 16px; }

/* Texas driving record extra fields */
.mv2-upgrades-list .span8 label { display: inline-block; font-weight: 600; font-size: 13px; color: var(--mv2-ink); margin-bottom: 6px; }
.mv2-upgrades-list input[type="text"] { width: 100%; max-width: 320px; height: 46px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); background: #fff; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--mv2-ink); }
.mv2-upgrades-list input[type="text"]:focus { border-color: var(--mv2-primary); box-shadow: 0 0 0 3px var(--mv2-primary-soft); outline: none; }
.mv2-upgrades-list small { color: var(--mv2-ink-3); font-size: 12.5px; }
.mv2-upgrades-list .marginB20 { margin-bottom: 18px; }

/* empty / tdc states */
.study-tools-page .mv2-empty { text-align: center; }
.study-tools-page .mv2-empty h1 { margin: 0; font-size: 22px; color: var(--mv2-ink); }
.study-tools-page .tdc-upgrade-note { line-height: 1.6; color: var(--mv2-ink-2); }

@media (max-width: 640px) {
    .mv2-upgrades-list .row:has(> .span4) { grid-template-columns: 1fr; grid-template-areas: "icon" "title" "body"; }
}

/* ============================================================
   Referrals (RAF-Info.aspx) — consolidated v2 page (node 11457-6437)
   ============================================================ */
/* stat cards */
.mv2-raf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 4px 0 24px; }
.mv2-raf-stat { border-radius: var(--mv2-radius-lg); border: 1px solid var(--mv2-border-soft); padding: 20px 24px; }
.mv2-raf-stat.is-earned { background: #eafaf1; border-color: #c9efd9; }
.mv2-raf-stat.is-count  { background: #fff6e9; border-color: #f6e2bf; }
.mv2-raf-stat.is-perref { background: #e9f7fe; border-color: #c7e9f8; }
.mv2-raf-stat-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 700; font-size: 14.5px; }
.mv2-raf-stat.is-earned .mv2-raf-stat-top { color: #16875a; }
.mv2-raf-stat.is-count  .mv2-raf-stat-top { color: #c98a1e; }
.mv2-raf-stat.is-perref .mv2-raf-stat-top { color: var(--mv2-primary-dk); }
.mv2-raf-stat-ico { display: inline-flex; }
.mv2-raf-stat-value { font-size: 30px; font-weight: 800; color: var(--mv2-ink); line-height: 1; }
.mv2-raf-stat-sub { margin-top: 8px; font-size: 13.5px; color: var(--mv2-ink-2); }

.mv2-raf-h { margin: 0 0 22px; font-size: 24px; font-weight: 800; color: var(--mv2-ink); }
.mv2-card.mv2-raf-how, .mv2-card.mv2-raf-share, .mv2-card.mv2-raf-history { margin-bottom: 22px; }

/* how it works — 3 steps with connectors */
.mv2-raf-steps { display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 8px 0 6px; }
.mv2-raf-step { flex: 1 1 0; max-width: 300px; text-align: center; position: relative; }
.mv2-raf-step:not(:last-child)::after {
    content: ""; position: absolute; top: 29px; left: calc(50% + 44px); right: calc(-50% + 44px); height: 6px;
    background-image:
        radial-gradient(circle, #8fa0b0 0 2.5px, transparent 3px),
        radial-gradient(circle, #8fa0b0 0 2.5px, transparent 3px),
        repeating-linear-gradient(90deg, #c7d2dd 0 5px, transparent 5px 12px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px, calc(100% - 24px) 2px;
    background-position: left center, right center, center center;
}
.mv2-raf-step-ico { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: #1b2431; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -6px rgba(27,36,49,.5); }
.mv2-raf-step h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 800; color: var(--mv2-ink); }
.mv2-raf-step p { margin: 0 auto; max-width: 30ch; font-size: 14px; color: var(--mv2-ink-2); }

/* share your referral link */
.mv2-raf-linkrow { display: flex; gap: 14px; align-items: stretch; }
body.mv2 .mv2-raf-link { flex: 1 1 auto; height: 58px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); background: #f7fafc; padding: 0 20px; font-size: 16px; color: var(--mv2-ink); font-family: inherit; min-width: 0; }
.mv2-raf-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; background: #1b2431; color: #fff; border: 0; border-radius: var(--mv2-radius); padding: 0 26px; font-weight: 700; font-size: 15px; cursor: pointer; }
.mv2-raf-copy:hover { background: #111823; }
.mv2-raf-code { margin: 14px 2px 0; font-size: 13.5px; color: var(--mv2-ink-2); }
.mv2-raf-code strong { color: var(--mv2-ink); letter-spacing: .04em; }
.mv2-raf-orvia { margin: 22px 2px 12px; font-size: 15px; color: var(--mv2-ink-2); }
.mv2-raf-sharebtns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
body.mv2 .mv2-raf-sharebtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 8px; min-width: 0; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); color: var(--mv2-ink); font-family: inherit; font-weight: 600; font-size: 15px; background: #fff; cursor: pointer; }
body.mv2 .mv2-raf-sharebtn:hover { border-color: var(--mv2-primary); color: var(--mv2-primary-dk); background: var(--mv2-primary-soft); }
.mv2-raf-sharebtn svg { flex: 0 0 auto; }

/* Instagram/TikTok use the member's existing link with explicit paste guidance. */
body.mv2 .mv2-raf-social-hint { margin: 14px 2px 0; color: var(--mv2-ink-2); font-size: 13px; }
.mv2-raf-social-help { margin-top: 14px; padding: 16px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); background: var(--mv2-primary-soft); }
body.mv2 .mv2-raf-social-help p { margin: 0; font-size: 14px; color: var(--mv2-ink); }
body.mv2 .mv2-raf-social-help .mv2-raf-link { display: block; width: 100%; margin-top: 12px; }
body.mv2 .mv2-raf-social-help a { display: inline-block; margin-top: 10px; font-weight: 700; text-decoration: underline; }
body.mv2 .mv2-raf-social-help[hidden],
body.mv2 .mv2-raf-social-help [hidden] { display: none; }
body.mv2 [data-raf-social]:focus-visible { outline: 2px solid var(--mv2-primary); outline-offset: 3px; }
@media (max-width: 1100px) {
    .mv2-raf-sharebtns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* referral history */
.mv2-raf-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
.mv2-raf-history-head .mv2-raf-h { margin: 0; }
.mv2-raf-list { display: flex; flex-direction: column; gap: 14px; }
.mv2-raf-item { display: flex; align-items: center; gap: 16px; border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius); padding: 14px 18px; }
.mv2-raf-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #f0a92b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.mv2-raf-item-main { flex: 1 1 auto; min-width: 0; }
.mv2-raf-item-name { font-weight: 700; color: var(--mv2-ink); font-size: 15px; }
.mv2-raf-item-sub { font-size: 13px; color: var(--mv2-ink-3); margin-top: 2px; }
.mv2-raf-item-amt { flex: 0 0 auto; font-weight: 800; color: #16875a; font-size: 15px; min-width: 52px; text-align: right; }
.mv2-raf-empty { text-align: center; padding: 20px; color: var(--mv2-ink-2); }

/* status badges */
.mv2-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mv2-badge-ok { background: #e6f7ee; color: #16875a; }
.mv2-badge-progress { background: #fff2df; color: #c98a1e; }

/* small ghost button */
body.mv2 .mv2-btn-sm { padding: 9px 18px; font-size: 14px; }

@media (max-width: 820px) {
    .mv2-raf-stats { grid-template-columns: 1fr; }
    .mv2-raf-steps { flex-direction: column; align-items: center; gap: 26px; }
    .mv2-raf-step:not(:last-child)::after { display: none; }
    .mv2-raf-sharebtns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .mv2-raf-linkrow { flex-direction: column; }
    .mv2-raf-copy { height: 52px; justify-content: center; }
    body.mv2 .mv2-raf-sharebtn { gap: 8px; font-size: 14px; }
}

/* ============================================================
   Upload Documents (UploadDocument.aspx) — node 11457-6866
   Repeater emits card rows; controls (FileUpload/hiddenField) preserved.
   ============================================================ */
.mv2-upl-validation { margin: 0 0 18px; }
.mv2-upl-validation .mv2-error { display: block; background: #fdecec; border: 1px solid #f4c7c7; color: #b02a2a; border-radius: var(--mv2-radius); padding: 12px 16px; margin-bottom: 12px; font-size: 14px; }
.mv2-upl-validation .mv2-error ul { margin: 6px 0 0; padding-left: 18px; }

.mv2-upl-list { display: flex; flex-direction: column; gap: 18px; }
.mv2-upl-item { display: flex; align-items: center; gap: 18px; background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm); padding: 18px 24px; }
.mv2-upl-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--mv2-primary-soft); color: var(--mv2-primary); display: inline-flex; align-items: center; justify-content: center; }
.mv2-upl-main { flex: 1 1 auto; min-width: 0; }
.mv2-upl-name { font-size: 18px; font-weight: 800; color: var(--mv2-ink); }
.mv2-upl-sub { margin-top: 3px; font-size: 13px; color: var(--mv2-ink-3); font-weight: 600; }
.mv2-upl-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* status badges (reuse .mv2-badge; add danger) */
.mv2-badge-danger { background: #fdecec; color: #d64545; }

/* Upload rows (Figma 11457-6866): red-outlined status badge with an info icon,
   blue-outlined Choose File, and an outlined icon-only cloud-upload button
   (background-image — generated content and children don't render on
   <input type=submit>). */
.mv2-upl-item .mv2-badge { border-radius: 10px; padding: 8px 14px 8px 34px; position: relative; font-weight: 600; }
.mv2-upl-item .mv2-badge-danger { border: 1.5px solid #d64545; color: #c62828; background: #fdecec; }
.mv2-upl-item .mv2-badge-ok { border: 1.5px solid #16875a; color: #16875a; background: #e6f7ee; }
.mv2-upl-item .mv2-badge::before {
    content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; background-repeat: no-repeat; background-size: contain;
}
.mv2-upl-item .mv2-badge-danger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='8' r='.5' fill='%23c62828'/%3E%3C/svg%3E"); }
.mv2-upl-item .mv2-badge-ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316875a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9'/%3E%3C/svg%3E"); }

/* Choose File — blue outlined per Figma */
body.mv2 .mv2-upl-file::file-selector-button { color: var(--mv2-primary-dk); border-color: var(--mv2-primary); }
body.mv2 .mv2-upl-file::-webkit-file-upload-button { color: var(--mv2-primary-dk); border-color: var(--mv2-primary); }

body.mv2 .mv2-upl-btn {
    font-size: 0; color: transparent; width: 48px; height: 44px; padding: 0;
    background-color: #fff; border: 1px solid var(--mv2-primary); border-radius: var(--mv2-radius);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a9fd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
body.mv2 .mv2-upl-btn:hover {
    /* the generic .mv2-btn:hover uses the `background` shorthand, which wipes
       background-image — re-assert the icon here */
    background-color: var(--mv2-primary-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a9fd4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2'/%3E%3Cpolyline points='16 16 12 12 8 16'/%3E%3Cline x1='12' y1='12' x2='12' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
.mv2-upl-btnwrap.mv2-btn-loading .mv2-upl-btn { background-image: none; }

/* file input styled as "Choose File" outline button */
body.mv2 .mv2-upl-file { font-size: 0; color: var(--mv2-ink-2); max-width: 190px; }
body.mv2 .mv2-upl-file::file-selector-button {
    font-size: 15px; font-weight: 700; font-family: inherit;
    color: var(--mv2-primary-dk); background: #fff;
    border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius);
    padding: 12px 22px; margin-right: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
body.mv2 .mv2-upl-file::-webkit-file-upload-button {
    font-size: 15px; font-weight: 700; font-family: inherit;
    color: var(--mv2-primary-dk); background: #fff;
    border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius);
    padding: 12px 22px; margin-right: 10px; cursor: pointer;
}
body.mv2 .mv2-upl-file::file-selector-button:hover { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); }
.mv2-upl-filewrap { display: inline-flex; align-items: center; gap: 8px; }
.mv2-upl-filename { font-size: 13px; font-weight: 700; color: var(--mv2-ink-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv2-upl-filename.mv2-upl-filename-active { color: var(--mv2-primary-dk); }
.mv2-upl-filename.mv2-upl-filename-active::before { content: "✓ "; }
.mv2-upl-btn { white-space: nowrap; }
.mv2-upl-btn:disabled { cursor: not-allowed; opacity: .85; }
.mv2-upl-btnwrap { position: relative; display: inline-block; }
.mv2-upl-btnwrap.mv2-btn-loading .mv2-upl-btn { color: transparent !important; }
.mv2-upl-spinner {
    display: none;
    position: absolute; top: 50%; left: 50%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid rgba(34, 176, 232, .35);
    border-top-color: var(--mv2-primary-dk);
    border-radius: 50%;
    animation: mv2-spin .7s linear infinite;
    pointer-events: none;
}
.mv2-upl-btnwrap.mv2-btn-loading .mv2-upl-spinner { display: block; }
@keyframes mv2-spin { to { transform: rotate(360deg); } }
.mv2-upl-empty { text-align: center; color: var(--mv2-ink-2); padding: 30px; font-size: 16px; }

@media (max-width: 720px) {
    .mv2-upl-item { flex-wrap: wrap; }
    .mv2-upl-actions { flex-basis: 100%; justify-content: flex-start; }
}

/* ============================================================
   Make Payment (MakePayment.aspx + MakePaymentButtons.ascx)
   node 11200-18 — markup+CSS only; HyperLink NavigateUrls preserved
   ============================================================ */
/* outstanding-balance alert */
.mv2-pay-alert { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: #fdf5f5; border: 2px solid #e53935; border-left-width: 5px; border-radius: var(--mv2-radius-lg); padding: 22px 28px; margin: 4px 0 24px; }
.mv2-pay-alert-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; background: #f9dede; color: #d64545; display: inline-flex; align-items: center; justify-content: center; }
.mv2-pay-alert-bal { flex: 0 0 auto; display: flex; flex-direction: column; }
.mv2-pay-alert-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mv2-ink-3); }
.mv2-pay-alert-amt { font-size: 34px; font-weight: 800; color: var(--mv2-ink); line-height: 1.1; }
.mv2-pay-alert-msg { flex: 1 1 300px; margin: 0; color: #b04141; font-size: 15.5px; line-height: 1.5; min-width: 260px; }

/* payment card head */
.mv2-pay-h { margin: 0 0 4px; font-size: 30px; font-weight: 800; color: var(--mv2-ink); letter-spacing: -.02em; }
.mv2-pay-sub { margin: 0 0 24px; color: var(--mv2-ink-2); font-size: 15px; }

/* payment method rows */
.mv2-pay-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mv2-pay-method { position: relative; display: flex; align-items: center; gap: 18px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); padding: 20px 24px; transition: border-color .15s, box-shadow .15s, background .15s; }
.mv2-pay-method:hover { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); box-shadow: var(--mv2-shadow-sm); }
.mv2-pay-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.mv2-pay-ico-cc { background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); }
.mv2-pay-ico-pp { background: #e7eefb; color: #003087; }
.mv2-pay-ico-mail { background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); }
.mv2-pay-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.mv2 a.mv2-pay-title { font-size: 18px; font-weight: 800; color: var(--mv2-ink); }
body.mv2 a.mv2-pay-title:hover { color: var(--mv2-ink); }
/* stretched link — whole row is clickable via the title's anchor */
a.mv2-pay-title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mv2-pay-desc { font-size: 14px; color: var(--mv2-ink-2); }
/* Figma rows carry no chevron — keep the markup, hide the glyph */
.mv2-pay-arrow { display: none; }

@media (max-width: 620px) {
    .mv2-pay-alert-msg { flex-basis: 100%; }
    .mv2-pay-method { padding: 16px; gap: 14px; }
    body.mv2 a.mv2-pay-title { font-size: 16px; }
}

/* ============================================================
   Certificate of Lesson Completion (ExamCertificatePrint.aspx)
   node 11298-107 — markup+CSS only; butGenerate/OnClick preserved
   ============================================================ */
.mv2-cert-wrap { display: flex; justify-content: center; }
.mv2-cert-card { max-width: 680px; width: 100%; text-align: center; padding: 46px 48px 48px; }
.mv2-cert-ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); margin-bottom: 22px; }
.mv2-cert-h { margin: 0 0 12px; font-size: 30px; font-weight: 800; color: var(--mv2-ink); letter-spacing: -.01em; }
.mv2-cert-sub { margin: 0 0 28px; color: var(--mv2-ink-2); font-size: 15.5px; }
.mv2-cert-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; border: 2px dashed var(--mv2-border); border-radius: var(--mv2-radius-lg); background: var(--mv2-bg); padding: 24px; margin-bottom: 28px; }
.mv2-cert-preview-title { font-weight: 700; color: var(--mv2-ink-2); font-size: 15px; }
.mv2-cert-preview-sub { color: var(--mv2-ink-3); font-size: 13.5px; }
body.mv2 .mv2-cert-btn { padding: 15px 34px; font-size: 16px; }

@media (max-width: 560px) {
    .mv2-cert-card { padding: 34px 22px; }
}

/* ============================================================
   Quiz results (TrafficSchoolQuizFinish.aspx) — node 11419-170
   Header card + print link are new v2 markup. The QuestionCorrectList
   below keeps its ORIGINAL class names (examres*) — see the .aspx
   comment: a backend Virginia override hardcodes "examresIncorrect".
   ============================================================ */
.mv2-qz-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.mv2-qz-head-badge { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mv2-qz-badge-fail { background: #fdecec; color: #d64545; }
.mv2-qz-badge-pass { background: #e6f7ee; color: #16875a; display: none; }
.mv2-qz-head-text { flex: 1 1 320px; min-width: 0; }
.mv2-qz-eyebrow { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv2-ink-3); margin-bottom: 6px; }
.mv2-qz-title { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.mv2-qz-title-fail { color: #d64545; }
.mv2-qz-title-pass { color: #16875a; display: none; }
.mv2-qz-sub { margin: 0; color: var(--mv2-ink-2); font-size: 15px; }
.mv2-qz-num { font-weight: 800; color: var(--mv2-ink); }
.mv2-qz-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.mv2-qz-score-pill { display: none; align-items: center; justify-content: center; min-width: 56px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--mv2-bg); border: 1px solid var(--mv2-border); font-weight: 800; font-size: 15px; color: var(--mv2-ink); }
.mv2-qz-head-btns { display: flex; gap: 10px; }

/* pass/fail badge is toggled by a small inline script (see .aspx) — only one of
   labelPassed/labelFailed actually renders server-side, so JS reads which one
   exists rather than relying on a CSS-only selector. */
.mv2-qz-head.is-pass .mv2-qz-badge-fail { display: none; }
.mv2-qz-head.is-pass .mv2-qz-badge-pass { display: inline-flex; }
.mv2-qz-head.is-pass .mv2-qz-title-fail { display: none; }
.mv2-qz-head.is-pass .mv2-qz-title-pass { display: inline; }

.mv2-qz-results { margin-top: 4px; }
.mv2-qz-print { text-align: center; margin: 24px 0 4px; }
.mv2-qz-printlink { font-weight: 600; color: var(--mv2-primary-dk); }

@media (max-width: 700px) {
    .mv2-qz-head-actions { margin-left: 0; flex-basis: 100%; }
}

/* ---- QuestionCorrectList (Keltex.Quiz) — Figma 11303-425 ----
   REAL control markup is table-based:
     td.examresquestionblock
       > div.examresquestion
       > table.examresanswers > tbody > tr
           > td            (marker: <img CheckCorrect|CheckIncorrect.gif> or &nbsp;)
           > td.examresCorrect | td.examresIncorrect   (option text)
   .examresCorrect = the correct answer; .examresIncorrect = the other options.
   The row whose FIRST td holds a marker img is the STUDENT's chosen answer.
   Per Figma we only highlight the student's own pick (green if right, red if
   wrong) and never reveal an un-picked correct answer. */

body.mv2 .mv2-card.mv2-qz-results { background: none; border: 0; box-shadow: none; padding: 0; }

/* flatten the outer review table into stacked cards */
.mv2-qz-results .examres,
.mv2-qz-results .examres > tbody,
.mv2-qz-results .examres > tbody > tr { display: block; }
.mv2-qz-results .examres > tbody > tr { margin-bottom: 20px; }
/* Width: the rules above only flatten the OUTER table via direct-child
   combinators, but the compiled control nests the question block deeper on some
   pages. Any table left as display:table shrink-to-fits to its widest line, so
   the result cards rendered narrower than the header card above them. Flatten
   every table in the review at any depth and pin it to the container width. */
.mv2-qz-results table,
.mv2-qz-results table > tbody,
.mv2-qz-results table > tbody > tr,
.mv2-qz-results table > tbody > tr > td { display: block; width: 100%; max-width: 100%; }
.mv2-qz-results .examresquestionblock { width: 100%; max-width: 100%; }
.mv2-qz-results .examresquestionblock {
    display: block; position: relative;
    background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft);
    border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm);
    padding: 26px 28px 26px 82px;
}
/* question-level badge: green ✓ (answered correctly), red ✗ (answered wrong),
   neutral (unanswered) — driven by which marker gif the block contains */
.mv2-qz-results .examresquestionblock::before {
    content: ""; position: absolute; left: 26px; top: 24px; width: 36px; height: 36px;
    border-radius: 10px; background: var(--mv2-bg); border: 1px solid var(--mv2-border-soft);
    background-repeat: no-repeat; background-position: center; background-size: 18px;
}
.mv2-qz-results .examresquestionblock:has(img[src*="CheckCorrect.gif"])::before {
    background-color: #e6f7ee; border-color: #bfe8d2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316875a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.mv2-qz-results .examresquestionblock:has(img[src*="CheckIncorrect.gif"])::before {
    background-color: #fdecec; border-color: #f4c7c7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64545' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.mv2-qz-results .examresquestion { font-weight: 700; color: var(--mv2-ink); font-size: 16px; margin-bottom: 14px; line-height: 1.4; }

/* flatten the answers table; hide the marker-image column */
.mv2-qz-results .examresanswers,
.mv2-qz-results .examresanswers > tbody { display: block; width: 100%; }
.mv2-qz-results .examresanswers > tbody > tr { display: block; margin-bottom: 10px; }
.mv2-qz-results .examresanswers > tbody > tr:last-child { margin-bottom: 0; }
.mv2-qz-results .examresanswers > tbody > tr > td:first-child { display: none; }
.mv2-qz-results .examresanswers img { display: none; }
.mv2-qz-results .examresCorrect,
.mv2-qz-results .examresIncorrect {
    display: block; position: relative;
    background: none; color: var(--mv2-ink-2); font-weight: 500;
    padding: 6px 2px;
}
/* highlight ONLY the student's own answer — scoped to the INNER answers table's
   row that carries a marker img (NOT the outer question row, which contains the
   img somewhere and would otherwise match every option). */
.mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckCorrect.gif"]) .examresCorrect {
    padding: 13px 168px 13px 16px; border-radius: 10px;
    background: #eef9f1; border: 1px solid #cdebd8; color: #16875a; font-weight: 700;
}
.mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckIncorrect.gif"]) .examresIncorrect {
    padding: 13px 130px 13px 16px; border-radius: 10px;
    background: #fdf1ef; border: 1px solid #f6cfc7; color: #c65b3f; font-weight: 700;
}
.mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckCorrect.gif"]) .examresCorrect::after {
    content: "Your answer · correct"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 13px; font-weight: 700; color: #16875a;
}
.mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckIncorrect.gif"]) .examresIncorrect::after {
    content: "Your answer"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font-size: 13px; font-weight: 700; color: #c65b3f;
}
.mv2-qz-results .examresReason { margin: 12px 0 0; font-size: 13.5px; color: var(--mv2-ink-2); background: var(--mv2-bg); border-radius: 8px; padding: 10px 14px; }
@media (max-width: 700px) {
    .mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckCorrect.gif"]) .examresCorrect,
    .mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckIncorrect.gif"]) .examresIncorrect { padding-right: 16px; }
    .mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckCorrect.gif"]) .examresCorrect::after,
    .mv2-qz-results .examresanswers tr:has(> td > img[src*="CheckIncorrect.gif"]) .examresIncorrect::after { display: none; }
}

/* ============================================================
   Final Exam — taking (TrafficSchoolExam.aspx) / node 11217-44
   ============================================================ */
.mv2-qz-head-actions .mv2-exam-timer-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv2-ink-3); text-align: right; margin-bottom: 4px; }
.mv2-exam-timer { display: block; font-size: 22px; font-weight: 800; color: var(--mv2-brand); text-align: right; font-variant-numeric: tabular-nums; }
.mv2-exam-note { background: var(--mv2-primary-soft); border-radius: var(--mv2-radius); padding: 14px 18px; margin-bottom: 20px; font-size: 14.5px; color: var(--mv2-ink-2); }
.mv2-exam-review-link { margin-bottom: 20px; }
.mv2-exam-review-link a { font-weight: 600; }

/* Quiz/exam taking (Figma): the outer container is invisible — every question
   is its own card, options are lettered 2-column choice buttons. */
body.mv2 .mv2-card.mv2-exam-questions { background: none; border: 0; box-shadow: none; padding: 0; }
.mv2-exam-questions { display: flex; flex-direction: column; gap: 20px; }
.mv2-exam-warncard { margin-top: 22px; text-align: center; }
.mv2-exam-warn-title { color: var(--mv2-danger); margin: 0 0 6px; }
.mv2-exam-warn-text { color: var(--mv2-ink-2); font-size: 14px; margin: 0; }
.mv2-exam-warncard .mv2-actions { justify-content: center; margin-top: 20px; }

.mv2-exam-questions .exam-questionblock {
    background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft);
    border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm);
    padding: 26px 28px;
}
.mv2-exam-questions .exam-question { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.mv2-exam-questions .exam-question-number {
    flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 9px;
    border-radius: 9px; background: var(--mv2-bg); border: 1px solid var(--mv2-border-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: var(--mv2-ink);
}
.mv2-exam-questions .exam-question-text { font-weight: 700; font-size: 16.5px; color: var(--mv2-ink); padding-top: 3px; }
.mv2-exam-questions .exam-imageholder { margin: 0 0 16px 43px; }
.mv2-exam-questions .exam-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.mv2-exam-questions .exam-answer { display: block; min-width: 0; }
.mv2-exam-questions .exam-answer .radio {
    display: flex; align-items: center; gap: 12px; margin: 0;
    border: 1px solid var(--mv2-border); border-radius: 12px; padding: 15px 18px;
    font-size: 15px; color: var(--mv2-ink); cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.mv2-exam-questions .exam-answer .radio:hover { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); }
.mv2-exam-questions .exam-answer .radio:has(input:checked) { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); box-shadow: 0 0 0 1px var(--mv2-primary); }
.mv2-exam-questions .exam-answer input[type="radio"] { accent-color: var(--mv2-primary); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.mv2-exam-questions .qletter { color: var(--mv2-ink-3); font-weight: 700; }
.mv2-exam-questions .validation-message { color: #c62828; font-weight: 600; font-size: 13.5px; margin-top: 12px; }
.mv2-exam-questions .field-validation-valid .validation-message,
.mv2-exam-questions .exam-questionblock.field-validation-valid > .validation-message { display: none; }

.mv2-exam-actionsrow { justify-content: center; margin-top: 24px; }

/* Answered-progress in the page head (updated by page JS) */
.mv2-qz-progress { min-width: 220px; }
.mv2-qz-progress-row { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; font-weight: 600; color: var(--mv2-ink-3); margin-bottom: 7px; }
.mv2-qz-progressbar { height: 8px; border-radius: 999px; background: var(--mv2-border); overflow: hidden; }
.mv2-qz-progressbar i { display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--mv2-primary); transition: width .25s; }

@media (max-width: 700px) {
    .mv2-qz-head { flex-direction: column; align-items: flex-start; }
    .mv2-qz-head-actions { align-self: stretch; }
    .mv2-exam-timer-label, .mv2-exam-timer { text-align: left; }
    .mv2-exam-questions .exam-answers { grid-template-columns: 1fr; }
}

/* ============================================================
   Exam Fail (TrafficSchoolExamFail.aspx) / node 11212-285
   ============================================================ */
.mv2-ef-card { padding-bottom: 40px; }
.mv2-ef-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 22px; }
.mv2-ef-stat { background: var(--mv2-bg); border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.mv2-ef-stat-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv2-ink-3); }
.mv2-ef-stat-value { font-size: 18px; font-weight: 800; color: var(--mv2-ink); }
.mv2-ef-unlimited { color: #16875a; }
.mv2-ef-retakeinfo { color: var(--mv2-ink-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }
.mv2-ef-retakeinfo a { font-weight: 600; }
.mv2-ef-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
.mv2-ef-actions-inline { display: flex; gap: 12px; flex-wrap: wrap; }
body.mv2 .mv2-ef-actions-inline input.mv2-btn,
body.mv2 .mv2-ef-actions-inline input.mv2-btn-ghost { cursor: pointer; border: 0; font-family: inherit; }
body.mv2 .mv2-ef-actions-inline input.mv2-btn-ghost { border: 1px solid var(--mv2-primary); background: #fff; color: var(--mv2-primary-dk); }

.mv2-ef-prepcard { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-left: 4px solid var(--mv2-brand); background: #fff8f2; }
.mv2-ef-prep-text { flex: 1 1 320px; }
.mv2-ef-prep-text p { margin: 0; color: var(--mv2-ink-2); font-size: 14.5px; }
body.mv2 .mv2-ef-prep-btn { background: var(--mv2-brand); border: 0; cursor: pointer; font-family: inherit; padding: 13px 26px; border-radius: var(--mv2-radius); color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
body.mv2 .mv2-ef-prep-btn:hover { opacity: .92; }

/* ============================================================
   Exam Proctor / access code (TrafficSchoolExamProctor.aspx) / node 11216-43
   ============================================================ */
.mv2-proctor-card { max-width: 720px; margin: 0 auto; padding: 44px 48px; }
.mv2-proctor-info { text-align: center; color: var(--mv2-ink-2); font-size: 15px; margin: 0 0 22px; line-height: 1.7; }
.mv2-proctor-card .mv2-alert { text-align: left; margin-bottom: 26px; }
.mv2-proctor-card .mv2-alert p { margin: 6px 0; }
.mv2-proctor-field { margin-bottom: 20px; }
.mv2-proctor-display { background: var(--mv2-bg); border-radius: var(--mv2-radius); padding: 14px 18px; margin-top: -8px; margin-bottom: 20px; font-size: 14px; color: var(--mv2-ink-2); line-height: 1.6; }
.mv2-proctor-actions { display: flex; gap: 14px; margin-top: 26px; }

/* ============================================================
   Completion Receipt (TrafficSchoolCompleteDMV.aspx) / node 11303-298
   ============================================================ */
.mv2-cr-head { align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.mv2-page-head-sub-text { margin: 4px 0 0; color: var(--mv2-ink-2); font-size: 14.5px; }
.mv2-cr-head-actions { display: flex; gap: 12px; margin-left: auto; align-self: center; }
.mv2-cr-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.mv2-cr-main p { color: var(--mv2-ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.mv2-cr-addr { color: var(--mv2-ink); font-weight: 600; }
.mv2-cr-rule { border: none; border-top: 1px solid var(--mv2-border-soft); margin: 18px 0; }
.mv2-cr-dear { font-weight: 700; color: var(--mv2-ink); }
.mv2-cr-signature { color: var(--mv2-ink); font-weight: 600; }
.mv2-cr-side { display: flex; flex-direction: column; gap: 20px; }
.mv2-cr-hourrow { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--mv2-border-soft); font-size: 14px; color: var(--mv2-ink-2); }
.mv2-cr-hourrow:last-child { border-bottom: 0; }
.mv2-cr-hourrow strong { color: var(--mv2-ink); }
.mv2-cr-exit { text-align: center; }
.mv2-cr-exit-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv2-ink-3); margin-bottom: 12px; }
.mv2-cr-exit-btn { width: 100%; }

@media (max-width: 860px) {
    .mv2-ef-stats { grid-template-columns: 1fr; }
    .mv2-cr-grid { grid-template-columns: 1fr; }
    .mv2-proctor-card { padding: 30px 22px; }
}

/* ============================================================
   Disabled / CertificateDeliveryInfo / drive-time confirm
   ============================================================ */
.mv2-disabled-ico { background: #fdecec; color: #d64545; }
.mv2-disabled-call { margin-top: 6px; }
.mv2-cdi-card p { color: var(--mv2-ink-2); font-size: 15px; line-height: 1.65; margin: 0 0 16px; }
.mv2-cdi-actions { justify-content: flex-start; align-items: center; gap: 16px; margin-top: 26px; }
.mv2-cdi-cta-text { color: var(--mv2-ink); }
.mv2-dts-card { max-width: 640px; margin: 0 auto; padding: 44px 48px; }
.mv2-dts-text { max-width: 44ch; margin-left: auto; margin-right: auto; }
.mv2-dts-confirm { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 22px 0; font-size: 14.5px; color: var(--mv2-ink-2); cursor: pointer; }
.mv2-dts-confirm input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mv2-primary); }

/* ============================================================
   Shipping Information (ShippingInfo.aspx / STShipping.ascx)
   ============================================================ */
.mv2-ship-card p, .mv2-ship-intro { color: var(--mv2-ink-2); font-size: 15px; line-height: 1.6; }
.mv2-ship-current { margin-bottom: 14px; font-size: 15px; color: var(--mv2-ink); }
.mv2-ship-body { color: var(--mv2-ink-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.mv2-ship-options { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mv2-ship-options li { border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); padding: 14px 18px; display: flex; align-items: center; transition: border-color .15s, background .15s; }
.mv2-ship-options li:has(input:checked) { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); }
.mv2-ship-options input[type="radio"] { accent-color: var(--mv2-primary); width: 17px; height: 17px; margin-right: 12px; }
.mv2-ship-options label { font-size: 15px; color: var(--mv2-ink); font-weight: 600; flex: 1; cursor: pointer; }
.mv2-ship-note { margin-top: 22px; }
.mv2-ship-loc-sub { color: var(--mv2-ink-2); font-size: 14.5px; margin: 0 0 14px; }
.mv2-ship-address { background: var(--mv2-bg); border-radius: var(--mv2-radius); padding: 16px 20px; color: var(--mv2-ink); font-weight: 600; line-height: 1.6; }
.mv2-ship-retail p { color: var(--mv2-ink-2); font-size: 14.5px; }
.mv2-ship-certmail { margin-top: 20px; }

/* ============================================================
   Course Outline (TrafficSchoolOutline.aspx) — GTTS:SchoolStatusOutline hooks
   ============================================================ */
.mv2-outline-head { align-items: flex-start; }
.mv2-outline-leftoff { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.mv2-outline-leftoff-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); display: inline-flex; align-items: center; justify-content: center; }
.mv2-outline-leftoff-text { flex: 1 1 auto; display: flex; flex-direction: column; }
.mv2-outline-leftoff-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv2-ink-3); }
.mv2-outline-leftoff-value { font-size: 17px; font-weight: 800; color: var(--mv2-ink); }
.mv2-outline-list .mv2-outline-accordion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mv2-outline-chapter { border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius); overflow: hidden; }
.mv2-outline-chapter-link { display: block; padding: 16px 20px; font-weight: 700; color: var(--mv2-ink); background: var(--mv2-bg); }
.mv2-outline-lessons { list-style: none; margin: 0; padding: 6px 10px; }
.mv2-outline-lesson { padding: 10px 14px; border-radius: 8px; }
.mv2-outline-lesson:hover { background: var(--mv2-primary-soft); }
.mv2-outline-lesson a { color: var(--mv2-ink-2); font-size: 14.5px; }
.mv2-outline-lesson-num { font-weight: 700; color: var(--mv2-primary-dk); margin-right: 8px; }

/* ============================================================
   Review your course materials (TrafficSchoolLessonReview.aspx)
   ============================================================ */
.mv2-review-select { max-width: 420px; margin-bottom: 24px; }
.mv2-review-title { font-size: 20px; font-weight: 800; color: var(--mv2-ink); margin-bottom: 16px; }
.mv2-review-content { line-height: 1.7; color: var(--mv2-ink-2); }
.mv2-review-empty { text-align: center; padding: 40px 20px; color: var(--mv2-ink-3); font-size: 15px; }

/* ============================================================
   Course Evaluation (TrafficSchoolEvaluation.aspx)
   ============================================================ */
.mv2-eval-notice { font-weight: 700; color: var(--mv2-ink); font-size: 15px; margin: 0 0 10px; }
.mv2-eval-scale { color: var(--mv2-ink-2); font-size: 14.5px; margin: 18px 0 26px; }
.mv2-eval-q { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--mv2-border-soft); }
.mv2-eval-q:last-of-type { border-bottom: 0; }
.mv2-eval-q-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.mv2-eval-q-body { flex: 1 1 auto; min-width: 0; }
.mv2-eval-q-body > p { margin: 0 0 12px; font-weight: 700; color: var(--mv2-ink); font-size: 15.5px; }
.mv2-eval-scale-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mv2-eval-scale-list td { display: inline-block; }
.mv2-eval-scale-list input[type="radio"] { position: absolute; opacity: 0; width: 36px; height: 36px; margin: 0; cursor: pointer; }
.mv2-eval-scale-list td { position: relative; }
.mv2-eval-scale-list label { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--mv2-border); font-size: 13.5px; font-weight: 600; color: var(--mv2-ink-2); cursor: pointer; transition: all .15s; }
.mv2-eval-scale-list input[type="radio"]:checked + label { background: var(--mv2-primary); border-color: var(--mv2-primary); color: #fff; }
.mv2-eval-q-text .mv2-input { min-height: 90px; resize: vertical; }

/* ============================================================
   Referrals shared tab bar (uc/RAF-Menu.ascx) — used by
   RAF-Info / RAF-View / RAF-Market / RAF-CashOut
   ============================================================ */
.mv2-raf-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 24px; padding: 5px; }
body.mv2 .mv2-raf-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--mv2-radius); font-weight: 600; font-size: 14.5px; color: var(--mv2-ink-2); }
body.mv2 .mv2-raf-tabs a:hover { background: var(--mv2-bg); color: var(--mv2-ink); }
body.mv2 .mv2-raf-tabs a.active { background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); }
@media (max-width: 760px) {
    .mv2-raf-tabs { grid-template-columns: 1fr 1fr; }
}

/* referral code bar (shared by Market / CashOut) */
.mv2-raf-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--mv2-surface); border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius-lg); box-shadow: var(--mv2-shadow-sm); padding: 16px 22px; margin-bottom: 22px; flex-wrap: wrap; }
.mv2-raf-code-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv2-ink-3); }
.mv2-raf-code-value { font-size: 18px; font-weight: 800; color: var(--mv2-ink); letter-spacing: .04em; margin-left: 10px; }

/* ============================================================
   Market to Your Friends (RAF-Market.aspx)
   ============================================================ */
.mv2-raf-market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mv2-raf-step-card { position: relative; padding-top: 46px; }
.mv2-raf-step-num { position: absolute; top: -16px; left: 30px; width: 34px; height: 34px; border-radius: 50%; background: var(--mv2-primary); color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -3px rgba(34,176,232,.55); }
.mv2-raf-step-card p { color: var(--mv2-ink-2); font-size: 14.5px; margin: 0 0 18px; }
.mv2-raf-socialrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mv2-raf-share-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; border-radius: var(--mv2-radius); border: 1px solid var(--mv2-border);
    background: #fff; color: var(--mv2-ink); font-size: 15px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.mv2-raf-share-btn:hover { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); }
.mv2-raf-email-card { grid-column: 1 / -1; }
.mv2-raf-email-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.mv2-raf-email-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mv2-raf-addcontact { font-weight: 600; font-size: 14px; display: inline-block; margin-bottom: 16px; }
.mv2-raf-import-label { color: var(--mv2-ink-2); font-size: 14px; margin: 0 0 12px; }
.mv2-raf-import-icons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.mv2-raf-import-btn {
    height: 44px; padding: 0 20px; border-radius: var(--mv2-radius); border: 1px solid var(--mv2-border);
    background: #fff; color: var(--mv2-ink); font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.mv2-raf-import-btn:hover { border-color: var(--mv2-primary); background: var(--mv2-primary-soft); }

@media (max-width: 820px) {
    .mv2-raf-market-grid { grid-template-columns: 1fr; }
    .mv2-raf-email-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Cash Out (RAF-CashOut.aspx)
   ============================================================ */
.mv2-raf-cashout-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.mv2-raf-cashout-side-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mv2-ink-3); margin-bottom: 8px; }
.mv2-raf-cashout-amt { font-size: 34px; font-weight: 800; color: var(--mv2-ink); margin-bottom: 10px; }
.mv2-raf-cashout-desc { color: var(--mv2-ink-2); font-size: 14px; margin: 0 0 20px; }
.mv2-raf-cashout-main { display: flex; flex-direction: column; gap: 20px; }
.mv2-raf-history-note { color: var(--mv2-ink-2); font-size: 14px; margin: 0 0 16px; }
.mv2-raf-table-wrapper { overflow-x: auto; }
.mv2-raf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mv2-raf-table th { text-align: left; padding: 10px 12px; color: var(--mv2-ink-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--mv2-border-soft); white-space: nowrap; }
.mv2-raf-table td { padding: 12px; border-bottom: 1px solid var(--mv2-border-soft); color: var(--mv2-ink-2); }
.mv2-raf-table tr:last-child td { border-bottom: 0; }
.mv2-raf-empty-row { text-align: center; padding: 24px; color: var(--mv2-ink-3); font-size: 14.5px; }

@media (max-width: 900px) {
    .mv2-raf-cashout-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Cash Out Now (RAF-CashOutNow.aspx)
   ============================================================ */
.mv2-raf-cashnow-card { max-width: 620px; margin: 0 auto; padding: 44px 48px; }
.mv2-raf-cashnow-card .mv2-cert-sub { text-align: left; margin-bottom: 12px; }

/* ============================================================
   Refer-a-Friend Banners (RAF-Banners.aspx)
   ============================================================ */
.mv2-raf-banner-card { margin-bottom: 20px; }
.mv2-raf-banner-title { font-size: 18px; font-weight: 800; color: var(--mv2-ink); margin-bottom: 14px; }
.mv2-raf-banner-preview { background: var(--mv2-bg); border: 1px dashed var(--mv2-border); border-radius: var(--mv2-radius); padding: 16px; text-align: center; margin-bottom: 16px; }
.mv2-raf-banner-preview img { max-width: 100%; }
.mv2-raf-banner-embed { margin-bottom: 16px; }
body.mv2 .mv2-raf-embed-ta { width: 100%; min-height: 70px; border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius); padding: 12px 14px; font-family: monospace; font-size: 12.5px; color: var(--mv2-ink-2); background: var(--mv2-bg); resize: vertical; }
.mv2-raf-banner-actions { display: flex; gap: 12px; }
body.mv2 .mv2-raf-banner-actions button.mv2-btn { border: 0; cursor: pointer; font-family: inherit; }

/* Some legacy code-behind paths (e.g. TrafficSchoolMain.aspx.cs conditionally
   overwriting a control's class attribute to "hidden") depend on Bootstrap's
   .hidden utility, which the v2 masters no longer load. Restore it so those
   controls actually hide instead of rendering unstyled. */
body.mv2 .hidden { display: none !important; }

/* ============================================================
   Member Services (MemberServices.aspx)
   ============================================================ */
.mv2-ms-btw { margin: 22px 0; }
.mv2-ms-btw p { color: var(--mv2-ink-2); font-size: 14.5px; margin: 0 0 16px; }
.mv2-ms-actions { margin-top: 22px; }

/* ImageButton (fixed OnClick signature — can't become a LinkButton) made
   invisible and layered over a normal-looking styled label. */
.mv2-imgbtn-wrap { position: relative; display: inline-block; }
.mv2-imgbtn-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mv2-imgbtn-label { pointer-events: none; }

/* ============================================================
   Contact Support Sent (ContactSupportSent.aspx)
   ============================================================ */
.mv2-css-ico { background: #e6f7ee; color: #16875a; }
.mv2-css-sent { color: var(--mv2-ink-3); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.mv2-css-sig { margin-top: 22px; color: var(--mv2-ink); font-size: 14.5px; }

/* Header spacing now lives on .mv2-header itself (margin-bottom): page content
   is usually wrapped in a container, so an adjacent-sibling rule never matched. */

/* Inline field-level validator message (RequiredFieldValidator/CompareValidator/etc.
   inside a .mv2-label) — shows the control's real ErrorMessage, not just a bare "*". */
.mv2-field-error { display: block; color: #b02a2a; font-size: 12.5px; font-weight: 700; margin-top: 4px; }

/* ============================================================
   Member Homepage (default.aspx + uc/Member_TrafficSchool.ascx)
   node 11298-107 — course-status card + certificate generation card.
   ============================================================ */
.mv2-tsc-card { text-align: center; padding: 46px 40px; }
.mv2-tsc-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; margin-bottom: 20px; }
.mv2-tsc-icon-info { background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); }
.mv2-tsc-icon-success { background: #e6f7ee; color: #16875a; }
.mv2-tsc-icon-warn { background: #fdf3e3; color: #9c6c0a; }
.mv2-tsc-title { font-size: 26px; font-weight: 800; color: var(--mv2-ink); margin: 0 0 10px; line-height: 1.3; }
.mv2-tsc-desc { color: var(--mv2-ink-2); font-size: 15px; margin: 0 auto 4px; max-width: 560px; }
.mv2-tsc-actions { margin-top: 24px; }
.mv2-tsc-tracking { margin-top: 10px; color: var(--mv2-ink-2); font-size: 14px; }

.mv2-tsc-hours { padding: 32px; }
.mv2-tsc-hours-intro { text-align: center; font-size: 16px; color: var(--mv2-ink); margin: 0 0 22px; }
.mv2-tsc-hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .mv2-tsc-hours-grid { grid-template-columns: 1fr; } }

.mv2-cert-box { margin: 26px auto 0; max-width: 460px; border: 1px dashed var(--mv2-border); border-radius: var(--mv2-radius-lg); padding: 30px 26px; background: var(--mv2-bg); }
.mv2-cert-box-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); margin-bottom: 14px; }
.mv2-cert-box-text { color: var(--mv2-ink-2); font-size: 14px; margin: 0 0 18px; }
.mv2-cert-box-btn { display: inline-flex; }

.mv2-tsc-ordercopy { margin-top: 20px; }

/* member/default.aspx page shell */
.mv2-home-hero { text-align: center; margin: 0 0 26px; }
.mv2-home-hero img { max-width: 260px; height: auto; border-radius: var(--mv2-radius-lg); }

/* ============================================================
   Important-information banner content (uc/ImportantCertificateInformation.ascx)
   Figma 11457-5552: bold dark title + muted description + "Learn more" link.
   ============================================================ */
body.mv2 .mv2-imp-title { display: inline-block; font-weight: 700; color: var(--mv2-ink); font-size: 15px; }
body.mv2 .mv2-imp-title:hover { color: var(--mv2-primary-dk); }
body.mv2 .mv2-imp-desc { display: block; margin-top: 4px; color: var(--mv2-ink-2); font-size: 14px; font-weight: 400; }
body.mv2 .mv2-imp-more { display: inline-block; margin-top: 4px; font-weight: 600; font-size: 14px; }

/* ============================================================
   Personal Validation failed (TrafficSchoolSecurityFail.aspx)
   ============================================================ */
.mv2-sqfail-card { max-width: 760px; margin: 34px auto 0; text-align: center; padding: 46px 44px; }
.mv2-sqfail-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: #fdecec; color: #d64545; margin-bottom: 18px; }
.mv2-sqfail-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mv2-ink-3); margin-bottom: 6px; }
.mv2-sqfail-title { margin: 0 0 10px; font-size: 30px; font-weight: 800; color: #c62828; }
.mv2-sqfail-sub { margin: 0 auto 24px; max-width: 56ch; color: var(--mv2-ink-2); font-size: 15px; }
.mv2-sqfail-note { text-align: left; }
.mv2-sqfail-note .mv2-alert-body { font-weight: 600; }
.mv2-sqfail-actions { justify-content: center; margin-top: 22px; }

/* Ohio permit-notice bullets inside the Upload Documents info alert */
.mv2-upl-ohio-list { margin: 8px 0 0; padding-left: 18px; }
.mv2-upl-ohio-list li { margin-bottom: 5px; font-weight: 400; }

/* ============================================================
   Registration flow (RegistrationInfo_*) — v2 rebuild of the
   legacy signup pages; controls/validators preserved.
   ============================================================ */
.mv2-reg-intro { color: var(--mv2-ink-2); font-size: 15.5px; line-height: 1.65; max-width: 72ch; margin: 0 0 10px; }

/* terms / certify card */
.mv2-terms-lead { font-size: 17px; font-weight: 700; color: var(--mv2-ink); margin: 0 0 18px; }
.mv2-terms-name { color: var(--mv2-primary-dk); }
.mv2-terms-text { color: var(--mv2-ink-2); font-size: 14.5px; line-height: 1.75; margin: 0 0 14px; text-align: left; }
.mv2-terms-actions { justify-content: center; margin-top: 28px; }

/* ============================================================
   Parent Drive Time Log (uc/ParentalInstructionLogHours.ascx)
   Oklahoma / parental-instruction hour logging.
   ============================================================ */
.mv2-dtl { padding: 26px 28px; }
/* The control carries its own card, but some hosts (member/default.aspx's
   parental-hours panel) already wrap it in one — flatten the inner card so it
   never renders as a box inside a box. */
.mv2-card .mv2-dtl { border: 0; box-shadow: none; background: none; padding: 0; }
.mv2-dtl-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.mv2-dtl-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); display: inline-flex; align-items: center; justify-content: center; }
.mv2-dtl-title { margin: 0 0 3px; font-size: 19px; font-weight: 800; color: var(--mv2-ink); }
.mv2-dtl-sub { margin: 0; font-size: 14px; color: var(--mv2-ink-2); }
.mv2-dtl-note { margin-bottom: 20px; }

.mv2-dtl-form { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr) auto; gap: 18px; align-items: end; }
.mv2-dtl-datewrap { position: relative; }
body.mv2 .mv2-dtl-datewrap .mv2-input { width: 100%; padding-right: 44px; }
.mv2-dtl-cal { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mv2-ink-3); cursor: pointer; display: inline-flex; }
.mv2-dtl-cal:hover { color: var(--mv2-primary-dk); }
.mv2-dtl-selects { display: flex; gap: 12px; }
.mv2-dtl-sel { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
body.mv2 .mv2-dtl-sel select {
    flex: 1; min-width: 0; height: var(--mv2-field-h);
    border: 1px solid var(--mv2-border); border-radius: var(--mv2-radius);
    background: #fff; padding: 0 12px; font-family: inherit; font-size: 15px; color: var(--mv2-ink);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a97a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer;
}
body.mv2 .mv2-dtl-sel select:focus { border-color: var(--mv2-primary); box-shadow: 0 0 0 3px var(--mv2-primary-soft); outline: none; }
.mv2-dtl-sel small { color: var(--mv2-ink-3); font-size: 13px; font-weight: 600; flex: 0 0 auto; }
body.mv2 .mv2-dtl-submit .mv2-btn { height: var(--mv2-field-h); white-space: nowrap; }
body.mv2 .mv2-dtl-submit .mv2-btn:disabled,
body.mv2 .mv2-dtl-submit .mv2-btn.aspNetDisabled { background: var(--mv2-border); color: var(--mv2-ink-3); cursor: not-allowed; }

.mv2-dtl-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.mv2-dtl-stat { flex: 1 1 200px; border: 1px solid var(--mv2-border-soft); border-radius: var(--mv2-radius); padding: 14px 16px; background: var(--mv2-bg); }
.mv2-dtl-stat .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mv2-ink-3); margin-bottom: 4px; }
.mv2-dtl-stat .v { display: block; font-size: 17px; font-weight: 800; color: var(--mv2-ink); }
.mv2-dtl-stat.is-logged { border-color: #cdebd8; background: #f2fbf6; }
.mv2-dtl-stat.is-logged .v { color: #16875a; }
.mv2-dtl-stat.is-remaining { border-color: #f6d7cf; background: #fdf5f3; }
.mv2-dtl-stat.is-remaining .v { color: #c65b3f; }
.mv2-dtl-stat.is-done { border-color: #cdebd8; background: #f2fbf6; }
.mv2-dtl-stat.is-done .v { color: #16875a; font-size: 15px; }

.mv2-dtl-progress { height: 8px; border-radius: 999px; background: var(--mv2-border); overflow: hidden; margin-top: 16px; }
.mv2-dtl-progress i { display: block; height: 100%; border-radius: 999px; background: var(--mv2-primary); transition: width .3s; }

@media (max-width: 780px) {
    .mv2-dtl-form { grid-template-columns: 1fr; }
    body.mv2 .mv2-dtl-submit .mv2-btn { width: 100%; }
}

/* ============================================================
   State permit-number entry (OklahomaPermitNumber.aspx)
   ============================================================ */
.mv2-permit-card { max-width: 640px; margin: 34px auto 0; text-align: center; padding: 44px 44px 40px; }
.mv2-permit-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--mv2-primary-soft); color: var(--mv2-primary-dk); margin-bottom: 18px; }
.mv2-permit-title { margin: 0 0 10px; font-size: 27px; font-weight: 800; color: var(--mv2-ink); line-height: 1.25; }
.mv2-permit-lead { margin: 0 auto 26px; max-width: 52ch; color: var(--mv2-ink-2); font-size: 15px; line-height: 1.6; }
.mv2-permit-form { max-width: 380px; margin: 0 auto; text-align: left; }
.mv2-permit-actions { margin-top: 18px; }
body.mv2 .mv2-permit-actions .mv2-btn { width: 100%; justify-content: center; }
/* The permit-card layout also hosts the phone-verification (Twilio) flow;
   these tints let its badge signal success / caution / failure states. */
.mv2-permit-badge.mv2-permit-badge-ok { background: #e6f7ee; color: #16875a; }
.mv2-permit-badge.mv2-permit-badge-warn { background: #fdf3e3; color: #9c6c0a; }
.mv2-permit-badge.mv2-permit-badge-danger { background: #fdf5f5; color: #d64545; }
/* six-digit SMS / one-time-code entry */
body.mv2 .mv2-code-input { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .35em; }