* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f8f9fa;
    color: #1a1a2e;
}


/* =========================
   PAGE
========================= */

.register-page {
    min-height: 100vh;

    padding: 42px 25px 65px;

    background:
        radial-gradient(
            circle at top left,
            rgba(26, 86, 219, 0.07),
            transparent 35%
        ),
        #f8f9fa;
}

.register-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}


/* =========================
   BACK HOME
========================= */

.back-home {
    display: inline-block;

    margin-bottom: 18px;

    color: #1a56db;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}

.back-home:hover {
    color: #1341b0;
}


/* =========================
   LANGUAGE TOGGLE
   ========================= */

.auth-language-row {
    display: flex;
    justify-content: flex-end;

    margin-bottom: 18px;
}

/* Mirrors shared-layout.css. This screen loads its own stylesheet only. */

.language-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;

    background: #ffffff;

    border: 1px solid #e2e7ef;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}

.language-toggle__link {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.language-toggle__link:hover,
.language-toggle__link.active {
    color: #1a56db;
}

.language-toggle__divider {
    color: #d0d5dd;
}


/* =========================
   CARD
   ========================= */

.register-card {
    width: 100%;

    padding: 38px 48px 42px;

    background: #ffffff;

    border: 1px solid #e2e7ef;

    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(15, 23, 42, 0.09);
}


/* =========================
   HEADER
========================= */

.register-header {
    margin-bottom: 28px;

    text-align: center;
}

.system-name {
    margin-bottom: 6px;

    color: #1a56db;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.4px;
}

.register-header h1 {
    margin-bottom: 7px;

    color: #0f172a;

    font-size: 27px;
    font-weight: 700;
}

.register-header p {
    color: #6b7280;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================
   SECTION TITLE
========================= */

.section-title {
    margin: 24px 0 14px;

    padding-bottom: 8px;

    border-bottom: 1px solid #e1e6ed;

    color: #0f172a;

    font-size: 14px;
    font-weight: 700;
}

.section-title:first-of-type {
    margin-top: 0;
}


/* =========================
   FORM GRID
========================= */

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #26364d;

    font-size: 12px;
    font-weight: 700;
}

.form-group label span {
    color: #1a56db;
}

.form-group label small {
    color: #9ca3af;

    font-size: 10px;
    font-weight: 400;
}


/* =========================
   INPUTS
========================= */

input,
select {
    width: 100%;

    height: 46px;

    padding: 0 13px;

    border: 1px solid #ccd5e1;

    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: #26364d;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    transition: 0.2s ease;
}

input::placeholder {
    color: #9ba6b5;
}

input:focus,
select:focus {
    border-color: #1a56db;

    box-shadow:
        0 0 0 3px rgba(26, 86, 219, 0.08);
}

select {
    cursor: pointer;
}


/* =========================
   PASSWORD
========================= */

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 45px;
}

.password-wrapper input::-ms-reveal,
.password-wrapper input::-ms-clear {
    display: none;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 12px;

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border: none;

    background: transparent;

    color: #7b8797;

    cursor: pointer;
}

.password-toggle:hover {
    color: #1a56db;
}

.eye-icon {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================
   TERMS
========================= */

.terms-check {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 7px;
    margin-bottom: 16px;

    padding: 12px 14px;

    border: 1px solid #d9e3f5;

    border-radius: 7px;

    background: #f5f8ff;
}

.terms-check input {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    margin-top: 1px;

    accent-color: #1a56db;

    cursor: pointer;
}

.terms-check label {
    color: #536174;

    font-size: 11px;

    line-height: 1.5;
}

.terms-link {
    padding: 0;

    border: none;

    background: transparent;

    color: #1a56db;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.terms-link:hover {
    text-decoration: underline;
}


/* =========================
   BUTTONS
========================= */

.primary-btn,
.secondary-btn {
    height: 45px;

    padding: 0 22px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

.primary-btn {
    border: 1px solid #1a56db;

    background: #1a56db;

    color: #ffffff;
}

.primary-btn:hover {
    background: #1341b0;

    border-color: #1341b0;
}

.secondary-btn {
    border: 1px solid #ccd5e1;

    background: #ffffff;

    color: #334155;
}

.secondary-btn:hover {
    border-color: #1a56db;

    color: #1a56db;
}

.full-btn {
    width: 100%;
}


/* =========================
   ERROR
========================= */

.error-message {
    display: none;

    width: 100%;

    margin: 8px 0 13px;

    padding: 10px 12px;

    border: 1px solid #fecdd3;

    border-radius: 6px;

    background: #fff1f2;

    color: #be123c;

    font-size: 11px;

    line-height: 1.5;
}

.error-message.show {
    display: block;
}


/* =========================
   VERIFICATION SCREEN
========================= */

.verification-screen {
    display: none;
}

.verification-screen.show {
    display: block;
}

.verification-note {
    margin-bottom: 18px;

    padding: 12px 14px;

    border-left: 3px solid #1a56db;

    border-radius: 5px;

    background: #f0f4ff;

    color: #5b6676;

    font-size: 11px;

    line-height: 1.5;
}

.verification-note strong {
    color: #1a1a2e;
}


/* =========================
   VERIFICATION BUTTONS
========================= */

.verification-buttons {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 20px;
}


/* =========================
   UPLOAD
========================= */

.upload-box {
    width: 100%;
    height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    position: relative;

    padding: 0;

    overflow: hidden;

    border: 1px dashed #bdcbe0;

    border-radius: 8px;

    background: #fbfcff;

    text-align: center;

    cursor: pointer;

    transition: 0.2s ease;
}

.upload-box:hover {
    border-color: #1a56db;

    background: #f5f8ff;
}

.upload-placeholder {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;
}

.id-preview {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: none;
}

.remove-upload-button {
    display: none;

    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 4;

    width: 28px;
    height: 28px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(38, 54, 77, 0.85);

    color: #ffffff;

    cursor: pointer;

    font-size: 20px;
    line-height: 1;
}

.remove-upload-button:hover {
    background: #c0392b;
}

.file-size {
    display: none;

    position: absolute;

    right: 8px;
    bottom: 8px;
    left: 8px;

    z-index: 2;

    margin: 0;
    padding: 4px 8px;

    border-radius: 4px;

    background: rgba(255, 255, 255, 0.88);

    color: #26364d;

    font-size: 11px;

    text-align: center;
}

.upload-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 8px;

    border-radius: 50%;

    background: #edf3ff;

    color: #1a56db;

    font-size: 20px;
}

.upload-box h3 {
    margin-bottom: 4px;

    color: #26364d;

    font-size: 13px;
}

.upload-box p {
    color: #8994a4;

    font-size: 10px;
}

.upload-box .file-name {
    max-width: 90%;

    margin-top: 7px;

    color: #1a56db;

    font-size: 11px;

    word-break: break-word;
}

.upload-progress {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 3;

    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 4px;

    background: #e4ebf5;
}

.upload-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #1a56db;

    transition: width 0.15s ease;
}


/* =========================
   CAMERA
========================= */

.camera-box {
    width: 100%;
    min-height: 150px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 18px;

    border: 1px solid #e0e6ef;

    border-radius: 8px;

    background: #fbfcff;

    text-align: center;
}

.camera-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    border-radius: 50%;

    background: #edf3ff;

    color: #1a56db;

    font-size: 19px;
}

.camera-box h3 {
    margin-bottom: 5px;

    color: #26364d;

    font-size: 13px;
}

.camera-box p {
    max-width: 470px;

    margin-bottom: 11px;

    color: #8994a4;

    font-size: 10px;

    line-height: 1.5;
}

.camera-btn {
    height: 36px;

    padding: 0 18px;

    border: 1px solid #1a56db;

    border-radius: 6px;

    background: #ffffff;

    color: #1a56db;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.camera-btn:hover {
    background: #1a56db;

    color: #ffffff;
}


/* =========================
   MODAL
========================= */

.review-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(15, 23, 42, 0.60);
}

.review-modal.show {
    display: flex;
}


/* =========================
   REVIEW CARD
========================= */

.review-card {
    width: 100%;
    max-width: 650px;
    max-height: 88vh;

    overflow-y: auto;

    padding: 30px 35px;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(15, 23, 42, 0.22);
}

.review-card h2 {
    margin-bottom: 7px;

    color: #0f172a;

    font-size: 22px;

    text-align: center;
}

.review-description {
    margin-bottom: 20px;

    color: #7b8797;

    font-size: 12px;

    line-height: 1.5;

    text-align: center;
}

.review-section-title {
    margin: 18px 0 8px;

    padding-bottom: 7px;

    border-bottom: 1px solid #e2e8f0;

    color: #1a56db;

    font-size: 12px;
    font-weight: 700;
}

.review-details {
    border: 1px solid #e0e5ec;

    border-radius: 8px;

    overflow: hidden;
}

.review-item {
    min-height: 47px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 10px 14px;

    border-bottom: 1px solid #e2e8f0;
}

.review-item:last-child {
    border-bottom: none;
}

.review-item span {
    color: #687386;

    font-size: 11px;
}

.review-item strong {
    max-width: 65%;

    color: #0f172a;

    font-size: 11px;

    text-align: right;

    word-break: break-word;
}


/* =========================
   ID PREVIEW
========================= */

.review-id-item {
    align-items: flex-start;
}

.review-id-preview {
    width: 290px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}

.review-id-preview img {
    display: none;

    width: 290px;
    height: 180px;

    object-fit: contain;

    padding: 8px;

    border: 1px solid #d4ddea;

    border-radius: 8px;

    background: #f8fafc;
}

.review-id-preview img.show {
    display: block;
}

.review-id-preview strong {
    max-width: 100%;

    color: #1a56db;

    font-size: 11px;

    text-align: center;

    line-height: 1.4;
}


/* =========================
   CONFIRMATION
========================= */

.confirmation-check {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 18px;

    padding: 12px 14px;

    border: 1px solid #d7e2fa;

    border-radius: 7px;

    background: #f0f4ff;
}

.confirmation-check input {
    width: 17px;
    height: 17px;

    flex-shrink: 0;

    margin-top: 1px;

    accent-color: #1a56db;
}

.confirmation-check label {
    color: #43536b;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================
   REVIEW BUTTONS
========================= */

.review-buttons {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 17px;
}


/* =========================
   TERMS MODAL
========================= */

.terms-card {
    width: 100%;
    max-width: 680px;
    max-height: 86vh;

    display: flex;

    flex-direction: column;

    padding: 30px 35px;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(15, 23, 42, 0.22);
}

.terms-card h2 {
    margin-bottom: 18px;

    color: #0f172a;

    font-size: 21px;

    text-align: center;
}

.terms-content {
    max-height: 55vh;

    overflow-y: auto;

    padding-right: 9px;
}

.terms-content h3 {
    margin-top: 15px;
    margin-bottom: 5px;

    color: #1a1a2e;

    font-size: 12px;
}

.terms-content h3:first-child {
    margin-top: 0;
}

.terms-content p {
    color: #64748b;

    font-size: 11px;

    line-height: 1.6;
}

.terms-buttons {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 20px;
}


/* =========================
   OTP
========================= */

.otp-card {
    max-width: 460px;

    padding: 31px 35px 28px;

    text-align: center;
}

.otp-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 13px;

    border-radius: 50%;

    background: #edf3ff;

    color: #1a56db;
}

.mail-icon {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.otp-card h2 {
    margin-bottom: 8px;

    color: #0f172a;

    font-size: 21px;
}

.otp-card .review-description {
    margin-bottom: 18px;
}

.otp-card .review-description strong {
    color: #1a56db;
}

.otp-input-container {
    width: 100%;

    margin-bottom: 11px;
}

#otpInput {
    width: 100%;
    height: 55px;

    padding: 0 15px;

    border: 1px solid #ccd5e1;

    border-radius: 8px;

    outline: none;

    color: #0f172a;

    text-align: center;

    letter-spacing: 9px;

    font-size: 22px;
    font-weight: 700;
}

#otpInput::placeholder {
    color: #c5cbd4;

    letter-spacing: 8px;
}

#otpInput:focus {
    border-color: #1a56db;

    box-shadow:
        0 0 0 3px rgba(26, 86, 219, 0.08);
}

.otp-buttons {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.otp-verify-btn,
.otp-back-btn {
    width: 100%;

    height: 44px;
}

.resend-btn {
    width: 100%;

    margin-top: 12px;

    padding: 6px;

    border: none;

    background: transparent;

    color: #1a56db;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.resend-btn:hover:not(:disabled) {
    color: #1341b0;

    text-decoration: underline;
}

.resend-btn:disabled {
    color: #9ca3af;

    cursor: not-allowed;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 700px) {

    .register-page {
        padding: 25px 15px 45px;
    }

    .register-card {
        padding: 28px 24px 32px;
    }

    .form-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .verification-buttons,
    .review-buttons,
    .terms-buttons {
        grid-template-columns: 1fr;
    }

    .review-card,
    .terms-card {
        padding: 25px 22px;
    }

    .review-id-preview {
        width: 220px;
    }

    .review-id-preview img {
        width: 220px;
        height: 145px;
    }
}


@media (max-width: 450px) {

    .register-card {
        padding: 25px 18px 29px;
    }

    .register-header h1 {
        font-size: 23px;
    }

    .register-header p {
        font-size: 11px;
    }

    .review-item {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

    .review-item strong {
        max-width: 100%;

        text-align: left;
    }

    .review-id-preview {
        width: 100%;
    }

    .review-id-preview img {
        width: 100%;
    }

}
/* ============================================================
   LIVENESS CAPTURE
   Extends the existing .camera-box card with a live preview,
   the active-challenge prompt, and an honest empty state for
   the staff review modal. Scoped .liveness-* so nothing here
   can bleed into the rest of the registration form.
   ============================================================ */

.liveness-consent {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    max-width: 470px;
    margin-bottom: 6px;
    color: #26364d;
    font-size: 10px;
    line-height: 1.5;
    cursor: pointer;
}

.liveness-consent input {
    margin-top: 1px;
    accent-color: #1c5c3d;
}

.liveness-note {
    max-width: 470px;
    margin-bottom: 11px;
    color: #8994a4;
    font-size: 9px;
    line-height: 1.55;
}

.liveness-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 10px;
    background: #10161f;
    aspect-ratio: 4 / 3;
}

.liveness-stage video {
    display: block;
    width: 100%;
    height: 100%;
    /* Mirrored so the preview reads as a mirror. The landmarks are read from
       the unmirrored frame, and the saved snapshot is flipped on the canvas to
       match, so what staff see lines up with what the resident saw. */
    transform: scaleX(-1);
    object-fit: cover;
}

.liveness-guide {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    width: 46%;
    height: 60%;
    top: 20%;
    left: 27%;
    pointer-events: none;
}

/* The captured still, shown in place of the live video while the resident
   decides whether to keep it. Sits above the video rather than beside it so
   confirming a photo does not reflow the card. */
.liveness-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #10161f;
}

/* The oval guide is drawn over the live feed only; it would sit on top of an
   already-captured frame and imply a live view that is not happening. */
.liveness-stage[data-preview="true"] .liveness-guide {
    display: none;
}

/* Scoped to .camera-box on purpose. The base card styles its own copy as
   ".camera-box p", which is a class plus a type selector and therefore outranks
   a bare ".liveness-challenge". Unscoped, the challenge prompt rendered as
   ordinary 10px body text and the error diagnostic rendered the same grey as
   the status line, so a failure was indistinguishable from idle narration.
   Prefixing adds a second class and settles it. */
.camera-box .liveness-challenge {
    max-width: 420px;
    min-height: 15px;
    margin-bottom: 4px;
    color: #1c5c3d;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* 420px rather than the 470px the card would otherwise hand down, so the prompt
   and the status line span exactly the stage and the progress bar instead of
   running wider than the frame they describe. */
.camera-box .liveness-status {
    max-width: 420px;
    min-height: 15px;
    margin-bottom: 8px;
    color: #8994a4;
    font-size: 10px;
    text-align: center;
}

.camera-box .liveness-diagnostic {
    max-width: 420px;
    margin: -4px 0 8px;
    color: #b04a4a;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
}

.liveness-progress {
    width: 100%;
    max-width: 420px;
    height: 4px;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e0e6ef;
}

.liveness-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #1c5c3d;
    transition: width 0.2s ease;
}

.liveness-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.liveness-disclosure {
    max-width: 470px;
    margin-top: 9px;
    color: #8994a4;
    font-size: 9px;
    line-height: 1.55;
}

.is-hidden {
    display: none !important;
}

/* State colours on the capture card, driven by the data-state attribute the
   UI module writes. */
.camera-box[data-state="captured"] {
    border-color: #b7d8c4;
    background: #f4faf6;
}

.camera-box[data-state="error"] {
    border-color: #e8b4b4;
    background: #fdf5f5;
}