/* Declared on :root, not just these two selectors — any element appended straight to
   <body> (a JS-built modal, etc.) sits outside their DOM subtree, so a var() used there
   couldn't resolve a variable scoped only to .kye-emp-form/.kye-emp-message-box. See
   the matching note in kye-emp-admin.css for the bug this caused there. */
:root {
    --kye-navy: #0f3d63;
    --kye-navy-dark: #0b2c49;
    --kye-accent-bg: #eaf2fb;
    --kye-border: #e3e8ee;
    --kye-text: #1f2937;
    --kye-muted: #6b7280;
    --kye-good-bg: #e3f6e9;
    --kye-good-text: #157a45;
    --kye-error-bg: #fbe9e7;
    --kye-error-text: #cf222e;
    --kye-warn-bg: #fef6e7;
    --kye-warn-text: #b45309;
    --kye-warn-icon-bg: #fdecc8;
}
.kye-emp-form,
.kye-emp-message-box {
    width: 100% !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--kye-text);
    box-sizing: border-box;
}

/* Outer wrapper for the public (frontend) shortcode output — this is what actually
   constrains and centers the page, regardless of how wide the parent theme's content
   area is. Uses !important because the form is embedded via shortcode into an unknown
   theme that may set its own width/display rules on generic content wrappers. */
.kye-emp-context-public {
    max-width: 960px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 32px 16px !important;
    box-sizing: border-box !important;
}

.kye-emp-message-box {
    background: #fff;
    border: 1px solid var(--kye-border);
    border-top: 3px solid var(--kye-warn-text);
    border-radius: 12px;
    padding: 40px 32px;
    max-width: 480px;
    margin: 48px auto;
    text-align: center;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
}
.kye-emp-message-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kye-warn-icon-bg);
    color: var(--kye-warn-text);
}
.kye-emp-message-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    color: #111827;
}
.kye-emp-message-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--kye-muted);
}

/* Scoped update link (e.g. a passport-only expiry reminder) */
.kye-emp-scope-notice {
    background: var(--kye-warn-bg);
    color: var(--kye-warn-text);
    border: 1px solid #f6dfae;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.kye-emp-rejection-notice {
    background: var(--kye-error-bg);
    border: 1px solid #f3c6c2;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.kye-emp-rejection-notice strong {
    display: block;
    color: var(--kye-error-text);
    font-size: 13.5px;
    margin-bottom: 4px;
}
.kye-emp-rejection-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #7a2e28;
}
.kye-emp-field:has(input:disabled),
.kye-emp-field:has(select:disabled),
.kye-emp-field:has(textarea:disabled) {
    opacity: 0.55;
}
.kye-emp-field input:disabled,
.kye-emp-field select:disabled,
.kye-emp-field textarea:disabled {
    background: #f3f4f6;
    cursor: not-allowed;
}
.kye-emp-repeater-add:disabled,
.kye-emp-repeater-remove:disabled { opacity: 0.4; cursor: not-allowed; }
.kye-emp-photo-row.kye-emp-locked { opacity: 0.55; }

/* Public page intro / welcome header */
.kye-emp-intro { text-align: center; margin-bottom: 28px; }
.kye-emp-intro-title { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 10px; }
.kye-emp-intro-text { font-size: 13.5px; line-height: 1.6; color: var(--kye-muted); max-width: 620px; margin: 0 auto; }

/* Wizard shell */
.kye-emp-wizard-card {
    background: #fff;
    border: 1px solid var(--kye-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    overflow: hidden;
}

/* Progress bar */
.kye-emp-wizard-progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 26px 32px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--kye-border);
}
.kye-emp-wizard-progress:before {
    content: "";
    position: absolute;
    top: 38px;
    left: 60px;
    right: 60px;
    height: 2px;
    background: var(--kye-border);
    z-index: 0;
}
.kye-emp-wizard-progress-bar {
    position: absolute;
    top: 38px;
    left: 60px;
    height: 2px;
    width: 0%;
    background: var(--kye-navy);
    z-index: 1;
    transition: width 0.25s ease;
}
.kye-emp-wizard-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    text-align: center;
    cursor: pointer;
}
.kye-emp-wizard-step:hover .kye-emp-wizard-step-circle { border-color: var(--kye-navy); color: var(--kye-navy); }
.kye-emp-wizard-step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    transition: all 0.2s ease;
}
.kye-emp-wizard-step-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.2px;
    max-width: 90px;
}
.kye-emp-wizard-step.active .kye-emp-wizard-step-circle {
    background: var(--kye-navy);
    border-color: var(--kye-navy);
    color: #fff;
}
.kye-emp-wizard-step.active .kye-emp-wizard-step-label { color: var(--kye-navy); }
.kye-emp-wizard-step.completed .kye-emp-wizard-step-circle {
    background: var(--kye-good-text);
    border-color: var(--kye-good-text);
    color: #fff;
}
.kye-emp-wizard-step.completed .kye-emp-wizard-step-label { color: var(--kye-good-text); }
.kye-emp-wizard-step.error .kye-emp-wizard-step-circle {
    background: var(--kye-error-text);
    border-color: var(--kye-error-text);
    color: #fff;
}
.kye-emp-wizard-step.error .kye-emp-wizard-step-label { color: var(--kye-error-text); }

/* Body */
.kye-emp-wizard-body { padding: 26px 32px; }
.kye-emp-step-content { display: none; }
.kye-emp-step-content.active { display: block; animation: kye-emp-fade 0.2s ease; }
@keyframes kye-emp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.kye-emp-step-title { font-size: 17px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.kye-emp-step-subtitle { font-size: 12.5px; color: var(--kye-muted); margin: 0 0 20px; }

.kye-emp-subhead {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--kye-navy);
    margin: 18px 0 8px;
}
.kye-emp-subhead:first-child { margin-top: 0; }

.kye-emp-financial-section {
    border: 1px solid var(--kye-border);
    border-radius: 10px;
    padding: 16px 18px 18px;
    margin-top: 18px;
    background: #fbfcfd;
}
.kye-emp-financial-section .kye-emp-subhead { margin-top: 0; }
.kye-emp-financial-section .kye-emp-field-wide { margin-top: 14px; }

/* Grid & fields */
.kye-emp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.kye-emp-field { display: flex; flex-direction: column; }
.kye-emp-field-wide { grid-column: 1 / -1; }
.kye-emp-field label { font-weight: 600; margin-bottom: 6px; font-size: 12.5px; color: #374151; }

.kye-emp-field input[type="text"],
.kye-emp-field input[type="email"],
.kye-emp-field input[type="date"],
.kye-emp-field textarea {
    border: 1px solid #d5dbe3;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--kye-text);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
/* Selects: only ever set background-color (never the `background` shorthand) so we
   never wipe out a native/WP-core arrow image that a shorthand would reset to none. */
.kye-emp-field select {
    border: 1px solid #d5dbe3;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--kye-text);
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.kye-emp-field input:focus,
.kye-emp-field select:focus,
.kye-emp-field textarea:focus {
    outline: none;
    border-color: var(--kye-navy);
    box-shadow: 0 0 0 3px rgba(15, 61, 99, 0.12);
}
.kye-emp-field textarea { resize: vertical; }

/* Public-facing page only: there's no WP-admin core CSS here to fall back on for
   default input padding, so these would otherwise render edge-to-edge/cramped.
   The admin context deliberately keeps no padding here — WP-admin's own styling
   already handles it there.

   A <select> computes its intrinsic height differently from a text input even with
   identical padding (native OS chrome), so padding alone can't guarantee they match.
   Fixing an explicit height (with border-box) on every single-line control sidesteps
   that entirely — inputs and selects end up pixel-identical regardless of how each
   browser sizes its native widgets. */
.kye-emp-context-public .kye-emp-field input[type="text"],
.kye-emp-context-public .kye-emp-field input[type="email"],
.kye-emp-context-public .kye-emp-field input[type="date"],
.kye-emp-context-public .kye-emp-field select,
.kye-emp-context-public .kye-emp-yn-select {
    height: 36px;
    padding: 0 12px;
    box-sizing: border-box;
}
.kye-emp-context-public .kye-emp-field textarea {
    padding: 8px 12px;
    box-sizing: border-box;
}

/* Repeatable list fields (bank accounts, loan banks, etc.) */
.kye-emp-repeater-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kye-emp-repeater-row { display: flex; align-items: stretch; gap: 8px; }
.kye-emp-repeater-row input[type="text"] { flex: 1; min-width: 0; }
/* Compact padding for these row inputs — the general public-page padding (9px 12px,
   sized for full standalone fields) made repeater rows noticeably taller than needed. */
.kye-emp-context-public .kye-emp-repeater-row input[type="text"] { padding: 7px 10px; }
.kye-emp-repeater-remove {
    width: 32px;
    flex-shrink: 0;
    border: 1px solid #d5dbe3;
    background: #fff;
    color: #94a3b8;
    border-radius: 7px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.kye-emp-repeater-remove:hover { background: var(--kye-error-bg); color: var(--kye-error-text); border-color: #f3c6c2; }
.kye-emp-repeater { display: flex; flex-direction: column; }
.kye-emp-repeater-add { align-self: flex-end; padding: 8px 16px; font-size: 12.5px; }
.kye-emp-field.kye-emp-invalid input,
.kye-emp-field.kye-emp-invalid select,
.kye-emp-field.kye-emp-invalid textarea {
    border-color: var(--kye-error-text);
    box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.1);
}

/* Photo */
.kye-emp-photo-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--kye-border);
}
.kye-emp-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--kye-accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--kye-border);
}
.kye-emp-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.kye-emp-avatar-placeholder { font-size: 11px; color: #9aa4b2; text-transform: uppercase; letter-spacing: 0.5px; }
.kye-emp-avatar-check { color: var(--kye-navy); font-size: 22px; font-weight: bold; }
.kye-emp-photo-upload { display: flex; flex-direction: column; gap: 6px; }
.kye-emp-file-btn {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    background: var(--kye-navy);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.kye-emp-file-btn:hover { background: var(--kye-navy-dark); }
.kye-emp-file-btn input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.kye-emp-file-name { font-size: 11.5px; color: var(--kye-muted); }
.kye-emp-photo-row.kye-emp-invalid .kye-emp-avatar-preview { box-shadow: 0 0 0 2px var(--kye-error-text); }
.kye-emp-photo-row.kye-emp-invalid .kye-emp-file-btn { box-shadow: 0 0 0 2px var(--kye-error-text); }
.kye-emp-photo-row.kye-emp-invalid .kye-emp-file-name { color: var(--kye-error-text); }

/* Yes/No select in doc table. border/border-radius/background forced with !important
   because this form is embedded via shortcode into an unknown theme — on the live site a
   theme-level `select` rule was loading with enough specificity/order to flatten the
   corners and border despite the plain class rule here, the same class of bug already
   fixed for the admin status select. Padding/height are deliberately left alone so the
   public-context sizing rule below (which matches selects to text-input height) still wins. */
.kye-emp-yn-select {
    min-width: 80px;
    border: 1px solid #d5dbe3 !important;
    border-radius: 6px !important;
    font-size: 12.5px;
    color: var(--kye-text);
    background-color: #fff !important;
    font-family: inherit;
    box-shadow: none !important;
}
.kye-emp-yn-select:focus {
    outline: none;
    border-color: var(--kye-navy) !important;
    box-shadow: 0 0 0 3px rgba(15, 61, 99, 0.12) !important;
}

/* Documents table */
.kye-emp-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 1px solid var(--kye-border); border-radius: 8px; overflow: hidden; }
.kye-emp-doc-table th, .kye-emp-doc-table td { border-bottom: 1px solid var(--kye-border); padding: 9px 10px; font-size: 12.5px; text-align: left; vertical-align: middle; }
.kye-emp-doc-table thead th { background: #f8fafc; color: #4b5563; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; border-bottom: 1px solid var(--kye-border); }
.kye-emp-doc-table tbody tr:last-child td { border-bottom: none; }
.kye-emp-doc-table tbody tr:hover { background: #fafbfc; }
.kye-emp-doc-table input[type="text"] { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d5dbe3; border-radius: 6px; font-size: 12.5px; }
.kye-emp-doc-table input[type="file"] { font-size: 11px; max-width: 150px; }
.kye-emp-doc-table td.kye-emp-invalid { box-shadow: inset 0 0 0 2px var(--kye-error-text); border-radius: 4px; }
.kye-emp-view-file-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--kye-navy);
    text-decoration: none;
}
.kye-emp-view-file-link:hover { text-decoration: underline; }

.kye-emp-declaration {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--kye-muted);
    background: #f8fafc;
    border: 1px solid var(--kye-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 18px;
}

.kye-emp-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--kye-text);
    cursor: pointer;
}
.kye-emp-checkbox-row input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--kye-navy);
}

/* Nav & buttons */
.kye-emp-wizard-nav {
    display: flex;
    align-items: center;
    padding: 18px 32px;
    border-top: 1px solid var(--kye-border);
    background: #fbfcfd;
}
.kye-emp-wizard-spacer { flex: 1; }

.kye-emp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
}
.kye-emp-btn:active { transform: translateY(1px); box-shadow: none; }
/* Replace the browser's default focus outline (a jarring blue ring even on mouse
   clicks) with an on-brand one that only appears for keyboard navigation. */
.kye-emp-btn:focus { outline: none; }
.kye-emp-btn:focus-visible { outline: 2px solid var(--kye-navy); outline-offset: 2px; }
.kye-emp-btn-primary { background: var(--kye-navy); color: #fff; box-shadow: 0 1px 2px rgba(11, 44, 73, 0.25); }
.kye-emp-btn-primary:hover { background: var(--kye-navy-dark); box-shadow: 0 2px 6px rgba(11, 44, 73, 0.3); }
.kye-emp-btn-ghost { background: #fff; color: #374151; border: 1px solid #d5dbe3; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.kye-emp-btn-ghost:hover { background: #f1f5f9; border-color: #c3cbd6; }
.kye-emp-btn:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* Notices */
.kye-emp-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 500; }
.kye-emp-notice.success { background: var(--kye-good-bg); color: var(--kye-good-text); border: 1px solid #b6e3c3; }
.kye-emp-notice.error { background: var(--kye-error-bg); color: var(--kye-error-text); border: 1px solid #f3c6c2; }

/* Success screen */
.kye-emp-wizard-success { display: none; padding: 60px 32px; text-align: center; }
.kye-emp-wizard-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kye-good-bg);
    color: var(--kye-good-text);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.kye-emp-wizard-success h3 { font-size: 17px; margin: 0 0 6px; color: #111827; }
.kye-emp-wizard-success p { font-size: 13px; color: var(--kye-muted); margin: 0; }

@media (max-width: 640px) {
    .kye-emp-grid { grid-template-columns: 1fr; }
    .kye-emp-doc-table { display: block; overflow-x: auto; }
    .kye-emp-wizard-progress { padding: 20px 16px 16px; }
    .kye-emp-wizard-progress:before, .kye-emp-wizard-progress-bar { left: 30px; right: 30px; }
    .kye-emp-wizard-step-label { display: none; }
    .kye-emp-wizard-body { padding: 20px 18px; }
    .kye-emp-wizard-nav { padding: 16px 18px; }
}