/* Shared typography and spacing for registration and certificate forms. */
.live-class-form-page {
    --request-gutter: 24px;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #243247;
    -webkit-font-smoothing: antialiased;
}

/* Keep the original shell width, zoom, header and floating WhatsApp styles. */
/* Reserve the actual header height, including wrapped account actions. */
.certificate-request-page > .header-wrapper { position: sticky; }
.certificate-request-page > .header-wrapper > .header { position: relative; }
.certificate-request-page > .container { padding-top: 0; }
.certificate-request-page .certificate-help-section { margin: 24px var(--request-gutter) 16px; }
.certificate-request-page .certificate-help-section .btn-kendala { gap: 12px; }
.certificate-request-page .certificate-help-section .btn-kendala > .fa-chevron-right { flex-shrink: 0; align-self: center; }

.live-class-form-page :is(button, input, select, textarea) { font-family: inherit; }
.live-class-form-page :is(h2, h4, h6) { line-height: 1.45; }
.live-class-form-page .stepper-container {
    max-width: 560px;
    align-items: flex-start;
    margin: 28px auto;
    padding: 0;
}
.live-class-form-page .step-item { flex: 1; min-width: 0; width: auto; }
.live-class-form-page :is(.stepper-container::before, .stepper-line-progress) { left: 12.5%; right: 12.5%; top: 20px; }
.live-class-form-page .step-label { font-size: 13px; line-height: 1.5; margin-top: 10px; white-space: normal; }

.live-class-form-page :is(.participant-card, .sample-cert-card, .modern-warning-box, .modern-info-box, .modern-success-box, .cert-account-invite, .cert-account-connected, .cert-history-card, .confirmation-checkbox-wrapper) {
    margin: 20px var(--request-gutter);
    border-radius: 14px;
}
.live-class-form-page :is(.participant-card, .cert-account-invite, .cert-history-card) { padding: 24px; }
.live-class-form-page :is(.modern-warning-box, .modern-info-box, .modern-success-box) { gap: 12px; padding: 16px; }
.live-class-form-page :is(.modern-warning-content, .modern-info-content, .modern-success-content, .sample-cert-info, .option-content) { min-width: 0; }
.live-class-form-page :is(.modern-warning-content, .modern-info-content, .modern-success-content) h6 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.live-class-form-page :is(.modern-warning-content, .modern-info-content, .modern-success-content) p { font-size: 13px; line-height: 1.7; }
.live-class-form-page .cert-eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: .06em; }
.live-class-form-page .cert-account-invite h2 { font-size: 18px; font-weight: 600; }
.live-class-form-page :is(.cert-account-invite p, .cert-account-autofill p, .cert-history-card p) { font-size: 13px; line-height: 1.7; }
.live-class-form-page :is(.cert-account-invite-footer > span, .cert-account-email, .cert-connected-label) { font-size: 12px; }
.live-class-form-page .cert-account-primary { font-size: 14px; line-height: 1.5; white-space: normal; }
.live-class-form-page .sample-cert-card { gap: 16px; padding: 16px; }
.live-class-form-page .sample-cert-img-wrapper img { height: auto; display: block; }
.live-class-form-page .sample-cert-title { font-size: 15px; line-height: 1.5; font-weight: 600; }
.live-class-form-page .sample-cert-desc { font-size: 13px; line-height: 1.65; }

.live-class-form-page .section-heading-wrapper { gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 24px; }
.live-class-form-page .section-heading { font-size: 20px; font-weight: 600; line-height: 1.4; }
.live-class-form-page .wajib-diisi { font-size: 12px; white-space: nowrap; color: #bc3434; }
.live-class-form-page .form-group-custom { margin-bottom: 24px; }
.live-class-form-page .form-group-custom label { font-size: 14px; font-weight: 600; line-height: 1.6; flex-wrap: wrap; margin-bottom: 6px; }
.live-class-form-page .form-group-custom .hint-text { font-size: 13px; line-height: 1.65; color: #5d6d82; margin-bottom: 10px; }
.live-class-form-page :is(.form-control-custom, .identity-type-select) {
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.5;
    padding: 11px 14px;
    border-radius: 10px;
}
.live-class-form-page .form-control-custom::placeholder { color: #718096; font-size: 14px; opacity: 1; }
.live-class-form-page .identity-type-select { width: 185px; font-size: 14px; }
.live-class-form-page .email-input-custom { padding-left: 42px !important; }
.live-class-form-page .email-input-icon { left: 14px; }
.live-class-form-page .contact-divider { margin-block: 28px; }
.live-class-form-page .contact-divider span { font-size: 14px; }
.live-class-form-page :is(.btn-add-identity, .identity-delete-btn, .file-delete-btn, .btn-outline-blue, .payment-account__copy) { min-height: 44px; }
.live-class-form-page :is(.identity-delete-btn, .file-delete-btn) { min-width: 44px; }
.live-class-form-page .checkbox-custom { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; }
.live-class-form-page .checkbox-label { font-size: 14px; line-height: 1.65; font-weight: 500; }
.live-class-form-page .confirmation-checkbox-wrapper { padding: 16px; flex-wrap: wrap; }
.live-class-form-page .confirmation-checkbox-wrapper .checkbox-label { flex: 1; min-width: 0; }
.live-class-form-page .confirmation-checkbox-wrapper .custom-error-feedback { flex-basis: 100%; }
.live-class-form-page .participant-card :is(.confirmation-checkbox-wrapper, .dual-buttons-wrapper) { margin-inline: 0; }
.live-class-form-page :is(.btn-primary-custom, .btn-secondary-custom) { font-size: 14px; font-weight: 600; line-height: 1.5; padding: 14px 16px; min-height: 48px; border-radius: 10px; }
.live-class-form-page .btn-primary-custom { width: calc(100% - 2 * var(--request-gutter)); margin-inline: var(--request-gutter); }
.live-class-form-page .dual-buttons-wrapper { margin: 24px var(--request-gutter); gap: 12px; }
.live-class-form-page .dual-buttons-wrapper button { margin: 0; width: 100%; min-width: 0; }
.live-class-form-page .button-hint-text { margin: 12px var(--request-gutter) 24px; font-size: 12px; line-height: 1.65; }
.live-class-form-page :is(.summary-section-title, .summary-key, .summary-value) { font-size: 14px; line-height: 1.65; }
.live-class-form-page .summary-section-title { gap: 12px; flex-wrap: wrap; }
.live-class-form-page .summary-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; padding-block: 14px; }
.live-class-form-page .summary-value { display: block; overflow-wrap: anywhere; }
.live-class-form-page .summary-value i { margin-left: 6px; }
.live-class-form-page :is(.payment-accounts-help, .option-title) { font-size: 14px; line-height: 1.65; }
.live-class-form-page :is(.payment-account__holder, .option-desc, .upload-area-subtext, .file-name) { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.live-class-form-page .payment-account__number { font-size: 18px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.certificate-request-page .payment-account__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #dbe5f1;
    border-radius: 10px;
    background: #f3f7fc;
    color: #2455a4;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.certificate-request-page .payment-account__copy:hover { background: #e7effb; border-color: #a9c3e6; }
.certificate-request-page .payment-account__copy:active { background: #dbe8f9; }
.live-class-form-page .option-radio-btn { flex-shrink: 0; }
.live-class-form-page .score-option-card { gap: 12px; align-items: flex-start; }
.live-class-form-page .file-info { min-width: 0; }
.live-class-form-page .file-info > div { min-width: 0; }
.live-class-form-page .file-actions { flex-shrink: 0; }
.live-class-form-page .support-heading { display: grid !important; grid-template-columns: 40px minmax(0, 1fr); align-items: start !important; }
.live-class-form-page .support-heading > .badge { grid-column: 2; justify-self: start; margin-left: 0 !important; }
.live-class-form-page .support-heading h4 { font-size: 20px; }
.live-class-form-page :is(.success-desc, .success-next-step-desc) { font-size: 14px; line-height: 1.7; }
.live-class-form-page .cert-login-modal #certificate-login-description { font-size: 13px; }
.live-class-form-page #certificate-login-form input:not([type="hidden"]) { font-size: 16px; }
.live-class-form-page #certificate-login-form label { font-size: 14px; line-height: 1.5; }
.live-class-form-page #certificate-login-form small { font-size: 12px; }
.live-class-form-page :is(button, a, input, select):focus-visible { outline: 3px solid #7ba8e7; outline-offset: 3px; }

@media (max-width: 575px) {
    .live-class-form-page { --request-gutter: 16px; }
    .live-class-form-page .stepper-container { margin: 24px 12px; }
    .live-class-form-page .step-circle { width: 34px; height: 34px; font-size: 14px; }
    .live-class-form-page :is(.stepper-container::before, .stepper-line-progress) { top: 17px; }
    .live-class-form-page .step-label { font-size: 11px; margin-top: 8px; }
    .live-class-form-page :is(.participant-card, .cert-account-invite, .cert-history-card) { padding: 16px; }
    .live-class-form-page .cert-account-intro { gap: 12px; }
    .live-class-form-page .cert-account-invite h2 { font-size: 16px; }
    .live-class-form-page .cert-account-invite-footer { margin-top: 16px; gap: 12px; }
    .live-class-form-page .sample-cert-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; }
    .live-class-form-page .sample-cert-img-wrapper { width: 88px; height: auto; }
    .live-class-form-page .sample-cert-title { font-size: 14px; }
    .live-class-form-page .sample-cert-desc { font-size: 12px; }
    .live-class-form-page .section-heading { font-size: 18px; }
    .live-class-form-page .section-heading-wrapper { margin-bottom: 20px; }
    .live-class-form-page .identity-row { padding: 12px; gap: 10px; }
    .live-class-form-page .identity-type-select { width: 100%; font-size: 16px; }
    .live-class-form-page .summary-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .live-class-form-page .summary-key { font-size: 13px; }
    .live-class-form-page .dual-buttons-wrapper { flex-direction: column-reverse; }
    .live-class-form-page .payment-account { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; padding: 12px; }
    .live-class-form-page .payment-account__copy { grid-column: 2; justify-self: start; }
    .certificate-request-page .payment-accounts { gap: 8px; margin-block: 12px; }
    .certificate-request-page .payment-account { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 8px; padding: 10px; border-width: 1px; border-left-width: 3px; }
    .certificate-request-page .payment-account__logo img { height: 28px; }
    .certificate-request-page .payment-account__name { font-size: 13px; }
    .certificate-request-page .payment-account__holder { font-size: 11px; line-height: 1.45; }
    .certificate-request-page .payment-account__number { font-size: 15px; line-height: 1.5; }
    .certificate-request-page .payment-account__copy { grid-column: 3; grid-row: 1; justify-self: end; width: 40px; min-height: 40px; padding: 0; font-size: 16px; }
    .certificate-request-page .payment-account__copy-label { display: none; }
    .live-class-form-page .support-heading h4 { font-size: 18px; }
}