/* =====================================
   VERIFICATION RESULT PAGE
   Deliberately reuses the KYC form's own "step 6 / Verification Completed"
   components (.wrapper, .form-card, .success, .success-icon, .reference,
   .green — all defined in css/style.css) instead of a separate bespoke
   card, so a user who just finished the form lands on something that
   visually continues the same flow instead of a different-looking page.
   Only what that component doesn't already support (color variants for
   a declined/pending outcome, and a multi-field detail table) is added
   here, namespaced "vr-" to avoid colliding with the site's own generic
   classes.
   ===================================== */

/* Vertically centers the result card in the space between header and
   footer (scoped to this page's body class only — doesn't touch the
   .wrapper/.form-card used by kyc-form.php itself). */
body.vr-result-page{
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

body.vr-result-page main.wrapper{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:0;
    margin-bottom:0;
    width:100%;
}

body.vr-result-page main.wrapper > .form-card{
    width:100%;
}

/* Color variants for .success-icon — the KYC form only ever needed the
   green "approved" version; a declined/rejected/in-review result needs
   its own tone while keeping the same gradient-circle treatment. */
.success-icon.failed{
    background:linear-gradient(135deg,#FEE2E2,#FECACA);
    color:var(--red, #DC2626);
    box-shadow:0 10px 26px rgba(220,38,38,.22);
}

.success-icon.pending{
    background:linear-gradient(135deg,#FEF3C7,#FDE68A);
    color:var(--amber, #D97706);
    box-shadow:0 10px 26px rgba(217,119,6,.22);
}

/* Multi-field detail table, sitting inside the same .reference box the
   KYC form uses for its (single-field) reference/status summary. */
.vr-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding:11px 0;
    border-bottom:1px solid var(--border, #E2E8F0);
}

.vr-row:first-child{
    padding-top:0;
}

.vr-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.vr-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted, #64748B);
    white-space:nowrap;
}

.vr-value{
    font-size:14.5px;
    font-weight:700;
    color:var(--text, #101828);
    text-align:right;
}

.vr-value.failed{ color:var(--red, #DC2626); }
.vr-value.pending{ color:var(--amber, #D97706); }
.vr-value.success{ color:var(--green); }

/* .btn normally relies on the site-wide ".home-body a{text-decoration:
   none}" reset, but this button sits inside <main class="wrapper"> which
   isn't wrapped in .home-body (same as kyc-form.php's own layout) — so
   without this it shows a browser-default underline that no other
   button on the site has. */
/* CSP (style-src, no 'unsafe-inline') silently drops inline style="" —
   this used to be <p style="margin:0;"> for the "still processing" copy
   inside .reference. */
.vr-nomargin{
    margin:0;
}

.vr-download-btn,
.vr-download-btn:hover{
    text-decoration:none;
    margin-top:24px;
}

.vr-footnote{
    margin:22px 0 0;
    font-size:13.5px;
    color:var(--muted, #64748B);
    line-height:1.7;
}

.vr-footnote a{
    color:var(--primary, #1E4661);
    font-weight:600;
    text-decoration:none;
}

.vr-footnote a:hover{
    text-decoration:underline;
}

/* Each rejected document's resubmission form reuses kyc-form.php's own
   .document-card/.upload-area dropzone styling (from css/style.css) so it
   looks identical to the original upload step — .document-card's own
   margin-bottom already spaces out multiple cards, nothing extra needed. */
.sl-resubmit-submit{
    margin-top:18px;
}

/* Track-application.php result layout — a status hero up top (reuses
   .success/.success-icon from kyc-form's own Step 6) so the outcome is
   obvious at a glance, then grouped sections below instead of one long
   undifferentiated list of rows. */
.vr-status-hero{
    margin-bottom:8px;
}

/* Shown in place of the lookup form once a result is on screen — the form
   itself is hidden then, so this is the only way back to search again. */
.sl-track-again-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13.5px;
    font-weight:600;
    color:var(--primary, #1E4661);
    text-decoration:none;
}

.sl-track-again-link:hover{
    text-decoration:underline;
}

.vr-section-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted, #64748B);
    margin:26px 0 10px;
}

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

.vr-callout{
    margin-top:0;
    padding:4px 18px;
    border-radius:var(--radius-md, 12px);
    background:#FEF2F2;
    border:1px solid #FECACA;
}

.vr-callout .vr-row{
    border-bottom-color:#FBD5D5;
}

.sl-resubmit-card{
    margin-top:0;
    padding:4px 18px;
    border-radius:var(--radius-md, 12px);
    background:#F8FAFC;
    border:1px solid var(--border, #E2E8F0);
}

.sl-resubmit-row input[type="file"]{
    flex:1 1 220px;
    font-size:13px;
}

.sl-resubmit-row .btn{
    flex:0 0 auto;
    padding:10px 20px;
}

.sl-resubmit-note{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--border, #E2E8F0);
}

.sl-resubmit-note:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:none;
}

/* "Start Verification" on the Restart Identity Verification box — amber
   instead of the site's default navy .primary-btn, so a rejected
   applicant's re-verification call-to-action reads as "this still needs
   action" rather than blending into every other primary button. Targeted
   by ID, not the .sl-reverify-btn class on the element — this page's
   <body class="home-body"> wraps the whole page (unlike kyc-form.php,
   where that class only wraps the header), so the generic ".home-body
   button" reset in home.css (class+element, (0,1,1)) outranks a lone
   class selector (0,1,0) and strips the background entirely; an ID
   selector (1,0,0) is the simplest way to always win that fight. */
#startReverificationBtn{
    background:linear-gradient(135deg,var(--amber,#D97706),#B45309);
    box-shadow:0 10px 24px rgba(217,119,6,.28);
    color:#fff;
    font-size:14.5px;
}

#startReverificationBtn:hover:not(:disabled){
    box-shadow:0 14px 28px rgba(217,119,6,.36);
}

/* Same ".home-body button" specificity fight as above, this time against
   .skip-payment-link's own (lower-specificity) color/text-decoration. */
#copyReverificationLinkBtn{
    color:var(--text-light,#8a8f98);
    text-decoration:underline;
}

#copyReverificationLinkBtn:hover{
    color:var(--text,#333);
}

#reverificationMessage:not(:empty){
    margin-top:12px;
    padding:12px 16px;
    border-radius:var(--radius-sm,8px);
    font-size:13.5px;
    font-weight:600;
    text-align:center;
}

#reverificationMessage.form-status-error{
    background:#FBEAEA;
    color:#C0392B;
}

#reverificationMessage.form-status-success{
    background:#ecfdf5;
    color:#065f46;
}

/* "Continue Verification" on the Continue Identity Verification box —
   same ".home-body button" specificity fight as #startReverificationBtn
   above, same ID-targeting fix. Solid navy instead of that button's amber:
   this case isn't "something went wrong", just "finish the step you
   already started". */
#continueVerificationBtn{
    background:#1e4661;
    box-shadow:0 10px 24px rgba(30,70,97,.28);
    color:#fff;
    font-size:14.5px;
}

#continueVerificationBtn:hover:not(:disabled){
    background:#193a51;
    box-shadow:0 14px 28px rgba(30,70,97,.36);
}

#copyContinueVerificationLinkBtn{
    color:var(--text-light,#8a8f98);
    text-decoration:underline;
}

#copyContinueVerificationLinkBtn:hover{
    color:var(--text,#333);
}

#continueVerificationMessage:not(:empty){
    margin-top:12px;
    padding:12px 16px;
    border-radius:var(--radius-sm,8px);
    font-size:13.5px;
    font-weight:600;
    text-align:center;
}

#continueVerificationMessage.form-status-error{
    background:#FBEAEA;
    color:#C0392B;
}

#continueVerificationMessage.form-status-success{
    background:#ecfdf5;
    color:#065f46;
}