:root {
    --bg: #f3f5f9;
    --bg-accent: #e8edf6;
    --card: #ffffff;
    --text: #172033;
    --muted: #647086;
    --line: #dce3ef;
    --primary: #b6151a;
    --primary-dark: #8f1115;
    --navy: #1f3559;
    --navy-soft: #eef3fb;
    --soft: #fff5f5;
    --success-soft: #eef8f0;
    --shadow: 0 18px 40px rgba(30, 41, 59, 0.08);
    --radius: 20px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, #ffffff 0%, #f7f8fc 42%, #eef2f8 100%);
}
.page-shell { padding: 30px 16px 72px; }
.container { max-width: 1120px; margin: 0 auto; }
.container.small { max-width: 760px; }
.portal-hero {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 22px;
    align-items: stretch;
    margin-bottom: 22px;
}
.hero-copy,
.hero-side {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(220,227,239,.92);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 24px 26px;
    backdrop-filter: blur(5px);
}
.hero-copy h1 { margin: 0 0 8px; font-size: 44px; letter-spacing: -.02em; }
.eyebrow {
    margin: 0 0 10px;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
}
.sub { margin: 0; color: var(--muted); font-size: 16.5px; }
.hero-side { background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%); }
.hero-side p { margin: 14px 0 0; color: var(--muted); line-height: 1.6; }

.portal-hero--single {
    grid-template-columns: 1fr;
}
.portal-hero--single .hero-copy {
    max-width: 100%;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: var(--navy-soft);
    color: var(--navy);
    font-size: 14.5px;
    font-weight: 700;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 18px;
}
.accent-card {
    background: linear-gradient(135deg, #fff 0%, #fcfdff 72%, #f2f6fd 100%);
    border-color: #d7e2f2;
}
.section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.compact-head { margin-bottom: 14px; }
.section-kicker {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.card h2, .card h3 { margin: 0; }
.card h2 { font-size: 26.5px; }
.card h3 { font-size: 21px; }
.section-note, .helper-text, .package-summary {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.5;
}
.package-summary {
    background: var(--navy-soft);
    color: var(--navy);
    padding: 11px 14px;
    border-radius: 14px;
    font-weight: 700;
    min-width: 280px;
}
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #dce3ef, transparent);
    margin: 24px 0;
}
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.align-end { align-items: end; }
label { display: block; }
label > span, .label-title {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 15.5px;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
    width: 100%;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 16.5px;
    background: #fff;
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #98acd1;
    box-shadow: 0 0 0 4px rgba(48, 84, 150, 0.12);
}
.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.option-grid.subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-card {
    border: 1px solid #d5dceb;
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.option-card:hover {
    border-color: #b7c5dc;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(32, 38, 52, 0.06);
}
.option-card input { margin-top: 3px; }
.option-card strong { display: block; margin-bottom: 4px; }
.option-card small { display: block; color: var(--muted); }
.option-card.is-selected {
    border-color: #97aede;
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(47, 88, 160, .10);
}
.option-card.is-disabled {
    opacity: .52;
    background: #f6f7fa;
}
.subjects-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin: 22px 0 12px;
}
.subject-count {
    min-width: 124px;
    text-align: center;
    background: var(--soft);
    color: #85242a;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 700;
}

.upload-box {
    background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fd 100%);
    border: 1px dashed #b9c6dc;
    border-radius: 18px;
    padding: 18px;
}
.terms-box {
    border: 1px solid #d9dde8;
    border-radius: 18px;
    padding: 20px 24px;
    background: #fbfcfe;
    max-height: none;
    overflow: visible;
}
.terms-box p,
.terms-box li { font-size: 15.5px; line-height: 1.7; }
.terms-box ol { margin: 0 0 10px 20px; padding: 0; }
.terms-box ol ol { margin-top: 8px; }
.checkbox-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.checkbox-line input { margin-top: 3px; }
.consent-line { margin-top: 16px; }
.declaration-copy {
    background: #fcfcfd;
    border: 1px solid #e6ebf4;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.declaration-copy p { margin: 0 0 8px; line-height: 1.6; }
.declaration-copy p:last-child { margin-bottom: 0; }
.signature-block { margin-top: 18px; }
#signaturePad {
    width: 100%;
    height: 260px;
    border: 1px dashed #bcc7da;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
    display: block;
    touch-action: none;
}
.signature-actions { margin-top: 10px; }
button {
    appearance: none;
    border: 0;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    padding: 13px 20px;
    font-size: 16.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}
button.secondary { background: #606978; }
button.secondary:hover { background: #4b5563; }
.preview-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.pdf-source {
    margin-top: 16px;
    border: 1px solid #d8deeb;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f7fb 100%);
    min-height: 220px;
    padding: 22px;
}
.pdf-sheet {
    width: 794px;
    margin: 0 auto;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}
.pdf-title { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.pdf-subtitle { text-align: center; font-size: 16px; margin-bottom: 20px; }
.pdf-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 16px; }
.pdf-table td, .pdf-table th { border: 1px solid #777; padding: 7px; vertical-align: top; }
.pdf-table th { background: #efefef; text-align: left; }
.pdf-section-title { background: #efefef; font-weight: 700; padding: 8px; border: 1px solid #777; border-bottom: 0; }
.pdf-mini { font-size: 11px; line-height: 1.5; }
.signature-img { max-height: 90px; border-bottom: 1px solid #000; display: inline-block; }
.form-actions { display: flex; justify-content: end; }
.sticky-actions {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    padding: 8px 0 0;
}
.sticky-actions button {
    min-width: 220px;
    box-shadow: 0 18px 36px rgba(182, 21, 26, .20);
}
.success-card { text-align: center; }
@media (max-width: 960px) {
    .portal-hero,
    .grid.two,
    .grid.three,
    .option-grid,
    .option-grid.subjects,
    .subjects-head,
    .section-head,
    .preview-header {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
    .package-summary { min-width: 0; }
    .pdf-source { overflow: auto; }
    .sticky-actions { position: static; }
}

.secondary { background: #5a6780; }
.secondary:hover { background: #465268; }
.preview-card .preview-header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
.pdf-source { min-height: 80px; }
.sticky-actions { position: sticky; bottom: 14px; z-index: 5; }
.form-actions { display:flex; justify-content:flex-end; }
.pricing-band {
    display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px;
    background: #f3f7ff;
    border: 1px solid #d9e4f4; border-radius: 18px; padding: 16px 18px; margin-bottom: 16px;
}
.pricing-band--single { grid-template-columns: 1fr; }
.pricing-label, .fee-label { display:block; margin-bottom:6px; font-size:13px; color: var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.pricing-band strong { font-size:16px; font-weight:700; color: var(--text); }
.fee-summary-card {
    background: linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
    border: 1px solid #d8e1f0; border-radius: 20px; padding: 20px; margin-bottom: 16px;
}
.fee-summary-grid { display:grid; grid-template-columns: 1fr 1fr 1.35fr; gap:16px; margin-bottom:16px; align-items:stretch; }
.fee-item { border: 1px solid #e3e8f2; border-radius: 16px; padding: 14px; background: #fff; min-height: 92px; }
.fee-item strong { font-size: 18px; }
.fee-item--primary {
    background: #2f6fed;
    border-color: #2f6fed;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
}
.fee-item--primary strong {
    color: #fff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}
.fee-total-row {
    display:flex; justify-content:space-between; align-items:end; gap:16px; padding:16px 18px; border-radius:16px;
    background:#1f3559; color:#fff;
}
.fee-total-row .fee-label { color: rgba(255,255,255,.72); }
.fee-total-row strong { font-size:28px; }
.fee-total-row p { margin:0; max-width:420px; color: rgba(255,255,255,.85); line-height:1.5; }
@media (max-width: 900px) {
    .portal-hero, .grid.two, .grid.three, .option-grid, .option-grid.subjects, .pricing-band, .fee-summary-grid { grid-template-columns: 1fr; }
    .subjects-head, .section-head, .preview-card .preview-header, .fee-total-row { flex-direction: column; align-items: stretch; }
    .card { padding: 18px; }
    .hero-copy h1 { font-size: 32px; }
}

.state-pricing-note { display:block; margin-top:8px; color: var(--muted); font-size: 12px; line-height:1.45; }
.option-card span { display:block; }
.option-card small.package-price { display:block; margin-top:6px; font-size:12px; }
.option-card input[type="radio"], .option-card input[type="checkbox"] { flex: 0 0 auto; }
.pricing-band strong.is-wm { color:#0f4c81; }
.pricing-band strong.is-em { color:#0b6b4b; }


.preview-sheet{background:#f8fafc;border:1px solid #d8e0ee;border-radius:16px;padding:20px;}
.preview-sheet h3{margin:0 0 14px;font-size:20px;color:#1f2937;}
.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;}
@media (max-width: 700px){.preview-grid{grid-template-columns:1fr;}}

input[readonly],
textarea[readonly],
select[readonly] {
    background: #f5f7fb;
    color: #445066;
    cursor: not-allowed;
}


.products-head,.package-subsection-head{margin:18px 0 12px;}
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.product-grid--bottom{margin-top:14px;grid-template-columns:1fr;}
.product-card small{display:block;margin-top:6px;line-height:1.45;}
.product-details-card{margin-top:18px;border:1px solid #e3e8f2;border-radius:18px;padding:18px;background:#fbfcff;}
.product-details-prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px;}
.product-details-list{font-size:15px;line-height:1.65;color:#334155;}
.is-hidden{display:none !important;}
@media (max-width: 900px){.product-grid,.product-details-prices{grid-template-columns:1fr;}}

.product-card--stacked {
    align-items: stretch;
    flex-direction: column;
}
.product-card--stacked > input {
    align-self: flex-start;
}
.product-inline-field {
    width: 100%;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed #d5dceb;
}
.product-inline-field label {
    width: 100%;
}
.product-price-static {
    margin-top: 8px;
    font-weight: 700;
    color: var(--navy);
}
.product-reg-fee {
    margin-top: 6px;
    font-weight: 700;
    color: #8b1e24;
}
.product-card--full {
    width: 100%;
}

.product-grid--top .product-card{height:100%;}
.product-card--stacked > span{display:block;width:100%;}
.product-card--stacked .product-inline-field{margin-top:auto;}


.product-grid--top {
    align-items: stretch;
}
.product-card {
    min-height: 100%;
}
.product-card--stacked {
    padding: 20px 22px;
    gap: 10px;
}
.product-card--stacked > input {
    margin-top: 2px;
    transform: scale(1.12);
}
.product-card-copy {
    display: block;
    width: 100%;
}
.product-card-copy strong {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 8px;
}
.product-card-copy small,
.product-card .product-inline-field label > span,
.mikids-block-title,
.mikids-inside-card label > span,
.package-grid .option-card small,
#subjectsGrid .option-card span,
.subjects-head .helper-text,
.subject-count {
    font-size: 17.8px;
}
.product-card small {
    line-height: 1.7;
}
.product-bullets {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: 17.8px;
    line-height: 1.7;
}
.product-bullets li {
    margin-bottom: 2px;
}
.product-price-static {
    margin-top: 12px;
    font-size: 17.8px;
}
.product-reg-fee {
    margin-top: 2px;
    font-size: 18.5px;
    font-weight: 700;
    color: #8b1e24;
}
.product-inline-field {
    margin-top: 14px;
    padding-top: 16px;
}
.product-inline-field input,
.mikids-inside-card input,
.mikids-inside-card select {
    font-size: 17px;
}
.product-card--mikids {
    gap: 12px;
}
.mikids-inside-card {
    width: 100%;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed #d5dceb;
}
.mikids-block {
    margin-top: 8px;
}
.mikids-block--spaced {
    margin-top: 24px;
}
.mikids-block-title {
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--text);
}
.mikids-student-grid {
    gap: 18px;
}
.mikids-student-grid label > span {
    margin-bottom: 10px;
}
.mikids-subjects-head {
    margin: 28px 0 14px;
}
.package-grid {
    gap: 14px;
}
.package-grid .option-card,
#subjectsGrid .option-card {
    min-height: 100%;
}
#subjectsGrid {
    margin-top: 8px;
}
@media (max-width: 900px) {
    .product-grid,
    .grid.three,
    .option-grid.subjects,
    .package-grid {
        grid-template-columns: 1fr;
    }
}

.preview-form-wrap{display:flex;flex-direction:column;gap:24px;}
.registration-form-preview{background:#fff;border:1px solid #d6dbe7;border-radius:10px;padding:24px 24px 28px;box-shadow:0 10px 24px rgba(0,0,0,.05);}
.preview-brand-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:14px;}
.preview-company-title{font-size:24px;font-weight:700;color:#6b2b7f;line-height:1.15;}
.preview-company-meta{font-size:12.5px;line-height:1.45;color:#374151;margin-top:6px;}
.preview-logo-tag{font-size:36px;font-weight:800;color:#d51d24;line-height:1;align-self:flex-start;}
.preview-main-title{text-align:center;font-size:24px;font-weight:800;margin-top:10px;}
.preview-main-subtitle{text-align:center;font-size:15px;font-weight:700;margin:6px 0 16px;}
.preview-section-title{background:#e6e6e6;border:1px solid #444;padding:8px 12px;text-align:center;font-size:15px;font-weight:700;margin-top:14px;}
.preview-form-table{width:100%;border-collapse:collapse;font-size:13px;}
.preview-form-table th,.preview-form-table td{border:1px solid #444;padding:8px 10px;vertical-align:top;}
.preview-form-table th{width:22%;text-align:left;background:#fafafa;}
.preview-product-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px;}
.preview-product-box{border:1px solid #444;padding:10px 12px;font-size:15px;line-height:1.5;min-height:100%;}
.preview-product-box--full{grid-column:1 / -1;}
.preview-product-title{font-weight:700;font-size:23.7px;margin-bottom:4px;}
.preview-product-fee{font-weight:700;font-size:16.9px;margin-bottom:6px;}
.preview-product-list,.preview-product-price,.preview-product-students{margin-top:6px;}
.preview-subsection-title{font-weight:700;font-size:16.9px;margin-top:10px;margin-bottom:6px;}
.preview-package-grid,.preview-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;}
.preview-package-line,.preview-subject-line{font-size:15px;line-height:1.45;}
.preview-package-line span{color:#475569;}

.preview-product-box--payment {
    background: #fff;
    text-align: center;
}
.preview-payment-title {
    font-size: 18.2px;
    font-weight: 800;
    margin-bottom: 10px;
}
.preview-total-plain {
    display: block;
    color: #000;
    font-weight: 800;
    font-size: 28.6px;
    line-height: 1.1;
}
.preview-footer-note{margin-top:12px;font-weight:700;text-align:right;font-size:14px;}
.preview-terms-copy{border:1px solid #444;border-top:0;padding:14px 16px;font-size:12.5px;line-height:1.45;}
.preview-terms-copy p{margin:0 0 8px;}
.preview-terms-copy ol{margin:0 0 0 18px;padding:0;}
.preview-terms-copy li{margin-bottom:6px;}
.preview-sign-row{border:1px solid #444;border-top:0;padding:10px 16px;font-size:12.5px;}
.preview-signatures{border:1px solid #444;border-top:0;padding:18px 16px 12px;display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:end;}
.preview-sign-line{margin-top:48px;border-top:1px solid #222;padding-top:6px;min-height:22px;}
@media (max-width: 800px){.preview-product-blocks,.preview-package-grid,.preview-subject-grid,.preview-signatures{grid-template-columns:1fr;}.preview-brand-head{flex-direction:column;}.preview-logo-tag{font-size:28px;}}

.preview-signature-image{max-height:72px;max-width:220px;display:block;object-fit:contain;margin:6px 0 8px;}
.preview-signature-placeholder{height:72px;}


.preview-brand-head--image{display:block;margin-bottom:10px}
.preview-header-image{display:block;width:100%;height:auto}
.preview-main-title{font-weight:700;letter-spacing:.03em}
.preview-main-subtitle{display:none}
.preview-terms-copy{font-size:14px;line-height:1.6;color:#111}
.preview-terms-copy p{margin:0 0 10px}
.preview-terms-copy ol{margin:0 0 0 18px;padding:0}
.preview-terms-copy ol>li{margin:0 0 10px;padding-left:4px}
.preview-terms-copy ol ol{list-style-type:lower-roman;margin-top:8px}
.preview-product-students--levels{margin-bottom:14px}
.preview-subsection-title{margin-top:14px}

.upload-box--with-qr {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}
.upload-qr-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    border-right: 1px solid #d9e1ee;
}
.payment-qr-image {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    border-radius: 14px;
    background: #fff;
}
.upload-receipt-panel {
    min-width: 0;
}
.easy-number-input {
    text-align: left;
}

@media (max-width: 760px) {
    .upload-box--with-qr {
        grid-template-columns: 1fr;
    }
    .upload-qr-panel {
        border-right: 0;
        border-bottom: 1px solid #d9e1ee;
        padding-bottom: 16px;
    }
}

/* V2 registration layout updates */
.full-row { grid-column: 1 / -1; }
.subsection-title { font-weight: 800; color: #172033; margin: 10px 0 14px; font-size: 1rem; }
.optional-note { font-weight: 600; color: #7b8496; font-size: .85em; }
.pic-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
.pic-card { border: 1px solid #e5e9f2; border-radius: 18px; padding: 18px; background: #fbfcff; }
.package-summary--top { margin: 0 0 16px; }
.fee-summary-grid--single { display: grid; grid-template-columns: 1fr; }
.fee-summary-grid--single .fee-item--primary { text-align: center; }
input[type="file"] { min-height: 48px; padding: 11px 12px; }
@media (min-width: 900px) { .pic-grid { grid-template-columns: 1fr 1fr; } }

/* V2.3 PIC side-by-side layout - standardized with form labels */
.pic-compare-wrap {
    margin-top: 24px;
    overflow-x: auto;
}
.pic-compare-grid {
    display: grid;
    grid-template-columns: 220px minmax(260px, 1fr) minmax(260px, 1fr);
    gap: 10px 28px;
    align-items: center;
    min-width: 760px;
}
.pic-compare-title,
.pic-row-label {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
}
.pic-compare-title {
    text-align: left;
}
.pic-compare-grid input {
    width: 100%;
    border: 1px solid #cfd8e7;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 16.5px;
    background: #fff;
    color: var(--text);
    min-height: 48px;
}
@media (max-width: 820px) {
    .pic-compare-grid {
        grid-template-columns: 150px minmax(240px, 1fr) minmax(240px, 1fr);
        gap: 9px 16px;
    }
}