/* ==========================================================================
   custom.css
   Holds rules that were originally inlined in index3.html.
   Keeping them here satisfies the "no inline CSS" coding standard while
   preserving the exact look-and-feel of the source template.
   ========================================================================== */

/* Header top — spacing for the second contact link & email icon */
.header1-call-spaced { padding-left: 30px; }
.header1-email-icon  { margin-top: -5px; }

/* Hero area background (originally inline on .hero-area1) */
.hero-area1 {
    background-image: url('../img/bg/hero1-bg.png');
    min-height: 900px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}

/* Section background colors that were inline */
.section-bg-light  { background: #FFFBFB; }
.cta1-bg-dark      { background-color: #181A1C; }
.footer-address-text { color: #181A1C; }

/* Contact form Send button — remove default browser border */
.contact-send-btn { border: none; }

/* ==========================================================================
   AUTH PAGES (login / register)
   ========================================================================== */
.auth-section { padding: 120px 0 100px; }
.auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    padding: 40px 36px;
}
.auth-form .auth-field { margin-bottom: 16px; }
.auth-form .auth-field label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 600;
    margin-bottom: 6px;
    color: #181A1C;
}
.auth-forgot-link {
    font-size: 12px;
    font-weight: 500;
    color: #ff385c;
    text-decoration: none;
}
.auth-forgot-link:hover { text-decoration: underline; }
.auth-form .auth-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.auth-form .auth-field input:focus { border-color: #ff6d2d; }
.auth-submit-btn { width: 100%; border: none; }

/* ─── Login button ─── premium pill with icon + animated arrow.
   Overrides the template's .theme-btn1::after dark overlay too. */
.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%) !important;
    color: #fff !important;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 8px 22px rgba(255, 56, 92, 0.32),
        inset 0 -2px 0 rgba(0, 0, 0, 0.10);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    position: relative;
    overflow: hidden;
}
/* Suppress the template's .theme-btn1:after dark overlay (it uses
   single-colon syntax). Both syntaxes nuked for safety. */
.login-btn:after,
.login-btn::after {
    content: none !important;
    display: none !important;
    background: none !important;
    transform: none !important;
}
.login-btn:hover:after,
.login-btn:hover::after { display: none !important; }

.login-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,0.32) 50%,
        transparent 100%);
    transition: left .55s ease;
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px rgba(255, 56, 92, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.10);
    filter: brightness(1.04);
}
.login-btn:hover::before { left: 100%; }
.login-btn:active {
    transform: translateY(0);
    box-shadow:
        0 4px 14px rgba(255, 56, 92, 0.32),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.login-btn i { font-size: 14px; }
.login-btn-arrow { transition: transform .25s ease; }
.login-btn:hover .login-btn-arrow { transform: translateX(4px); }
.visa-cancel-btn,
.visa-action-btn { margin-left: 8px; border: none; }
.auth-switch { margin-top: 16px; color: #555; }
.auth-switch a { color: #ff6d2d; font-weight: 600; }

.auth-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.auth-alert-error   { background: #fdecea; color: #b71c1c; border: 1px solid #f5c2c0; }
.auth-alert-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dashboard-section {
    padding: 80px 0 80px;
    min-height: 70vh;
    position: relative;
}
/* Subtle decorative gradient blobs in the background of the wizard area */
.dashboard-section.section-bg-light {
    background:
        radial-gradient(at 15% 0%,  rgba(255, 56, 92, 0.05) 0%, transparent 45%),
        radial-gradient(at 85% 12%, rgba(255, 109, 45, 0.04) 0%, transparent 40%),
        #fbfbfd;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.dashboard-header-actions a { margin-left: 6px; }
.dashboard-greeting-email {
    color: #6b7280;
    font-size: 14px;
    margin: 8px 0 0;
}
.dashboard-greeting-email i { color: #ff385c; margin-right: 6px; }

.stat-cards-row { display: flex; flex-wrap: wrap; }
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 18px;
    margin-bottom: 18px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
    border-left: 4px solid #999;
}
.stat-card-label { font-size: 13px; color: #6b7280; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.stat-card-value { font-size: 30px; margin: 0; color: #181A1C; }

.stat-card-total    { border-left-color: #3b82f6; }
.stat-card-new      { border-left-color: #2563eb; }
.stat-card-pending  { border-left-color: #f59e0b; }
.stat-card-review   { border-left-color: #8b5cf6; }
.stat-card-approved { border-left-color: #10b981; }
.stat-card-rejected { border-left-color: #ef4444; }

.dashboard-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}
.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.dashboard-card-btn { border: none; }

/* ==========================================================================
   TABLE
   ========================================================================== */
.dashboard-table-wrap { overflow-x: auto; }
.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.dashboard-table thead th {
    background: #f7f8fa;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.dashboard-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid #f0f1f5;
    vertical-align: middle;
}
.dashboard-table tbody tr:hover { background: #fafbff; }
.dashboard-table-empty { text-align: center; color: #6b7280; padding: 30px 10px; }

.action-cell { white-space: nowrap; }
.action-btn {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px 2px;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
}
.action-btn:hover { color: #fff; opacity: .9; }
.action-btn-view     { background: #3b82f6; }
.action-btn-track    { background: #8b5cf6; }
.action-btn-edit     { background: #f59e0b; }
.action-btn-print    { background: #6b7280; }
.action-btn-download { background: #10b981; }
.action-btn-upload { background: #10b981; }

/* ==========================================================================
   STATUS BADGES
   ========================================================================== */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}
.badge-status-new               { background: #2563eb; }      /* Blue */
.badge-status-pending           { background: #f59e0b; }      /* Orange */
.badge-status-under-review      { background: #8b5cf6; }      /* Purple */
.badge-status-approved          { background: #10b981; }      /* Green */
.badge-status-rejected          { background: #ef4444; }      /* Red */
.badge-status-document-required { background: #facc15; color:#1f2937; }  /* Yellow */

.badge-payment-pending  { background: #f59e0b; }
.badge-payment-paid     { background: #10b981; }
.badge-payment-failed   { background: #ef4444; }
.badge-payment-refunded { background: #6b7280; }

/* ==========================================================================
   PREMIUM FORM CARDS (apply / edit / upload)
   ========================================================================== */
.form-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 30px 32px 28px;
    margin-bottom: 24px;
    box-shadow:
        0 1px 0 rgba(20, 25, 50, 0.03),
        0 6px 18px -4px rgba(20, 25, 50, 0.06),
        0 18px 48px -16px rgba(20, 25, 50, 0.08);
    border: 1px solid #eef0f5;
    animation: card-fade-in .45s cubic-bezier(.21,.62,.32,1);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    overflow: hidden;
}
/* Subtle 4px gradient stripe at the top of every card — the premium tell. */
.form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff385c 0%, #ff6d2d 60%, #ffae6d 100%);
    opacity: .9;
}
.form-card:hover {
    box-shadow:
        0 1px 0 rgba(20, 25, 50, 0.03),
        0 10px 28px -4px rgba(20, 25, 50, 0.08),
        0 24px 60px -16px rgba(20, 25, 50, 0.12);
    border-color: #e6e8ef;
}
@keyframes card-fade-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-card-title {
    font-size: 19px;
    margin: 0 0 24px;
    color: #0f172a;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
}
/* Gradient-icon prefix for card titles — applies whenever a card title
   contains an <i.form-card-icon> (Font Awesome). */
.form-card-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 17px;
    box-shadow: 0 8px 18px -8px rgba(255, 56, 92, 0.65);
    flex-shrink: 0;
}
/* Optional secondary line under the icon title */
.form-card-lead {
    margin: -12px 0 22px 56px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
}
.form-card-subtitle {
    font-size: 14px;
    margin: 20px 0 14px;
    color: #ff385c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #f0f0f5;
}
.form-card-subtitle::before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #ff385c, #ff6d2d);
    border-radius: 2px;
}
.form-card-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin: -6px 0 14px;
}
.form-card-hint i { color: #10b981; }
.form-field { margin-bottom: 12px; }

/* Label — small caps with letter-spacing for the editorial feel */
.form-field label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #374151;
    font-size: 11.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
}
/* Auto-style any `*` in labels as a red dot+asterisk */
.form-field label::after,
.form-field label .req { color: #ff385c; font-weight: 800; }

/* Auto-style any literal " *" suffix in the label text — applied by
   detecting via attribute is tricky, so for now we just keep .req. */

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e8eaf0;
    border-radius: 12px;
    font-size: 14px;
    color: #0f172a;
    background: #fafbfd;
    outline: none;
    text-transform: uppercase;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .25s ease,
        transform .15s ease;
    font-family: inherit;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(20, 25, 50, 0.02);
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: #d4d5db; background: #fff; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #ff6d2d;
    background: #fff;
    box-shadow:
        inset 0 1px 2px rgba(20, 25, 50, 0.04),
        0 0 0 4px rgba(255, 109, 45, 0.12);
    transform: translateY(-1px);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #aab0bc;
    font-weight: 400;
    text-transform: uppercase;
}
/* Date / email / number inputs shouldn't be force-uppercased */
.form-field input[type="date"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field input[type="tel"] { text-transform: none; }

/* Read-only inputs (Applicant Details mirrored from MRZ scan) — kept
   in the same chrome as editable fields but visually "locked": muted
   bg, no hover/focus pop, default cursor. */
.form-field input[readonly] {
    background: #f8fafc;
    color: #0f172a;
    cursor: default;
    font-weight: 700;
}
.form-field input[readonly]:hover,
.form-field input[readonly]:focus {
    background: #f8fafc;
    border-color: #e8eaf0;
    box-shadow: none;
    transform: none;
}

/* Custom chevron for selects — bigger, brand-coloured, with a subtle
   pill behind it so the dropdown affordance reads at a glance. */
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    /* SVG: chevron-down 14×9, brand orange. */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%23ff6d2d' d='M1.6 1.6L7 7l5.4-5.4L10.6 0 7 3.6 3.4 0z'/></svg>"),
        linear-gradient(180deg, #fff5f7 0%, #ffe5ec 100%);
    background-repeat: no-repeat;
    background-position: right 14px center, right 4px center;
    background-size: 14px 9px, 30px 30px;
    padding-right: 48px;
    cursor: pointer;
    font-weight: 600;
}
.form-field select:hover {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%23fff' d='M1.6 1.6L7 7l5.4-5.4L10.6 0 7 3.6 3.4 0z'/></svg>"),
        linear-gradient(180deg, #ff6d2d 0%, #ff385c 100%);
}
.form-field select:focus {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%23fff' d='M1.6 1.6L7 7l5.4-5.4L10.6 0 7 3.6 3.4 0z'/></svg>"),
        linear-gradient(180deg, #ff6d2d 0%, #ff385c 100%);
}
/* Premium variant inside the wizard hero — navy chevron pill */
.wizard-section .form-field select {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%230a2540' d='M1.6 1.6L7 7l5.4-5.4L10.6 0 7 3.6 3.4 0z'/></svg>"),
        linear-gradient(180deg, #eef2f7 0%, #dbe1ea 100%);
}
.wizard-section .form-field select:hover,
.wizard-section .form-field select:focus {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path fill='%23ffffff' d='M1.6 1.6L7 7l5.4-5.4L10.6 0 7 3.6 3.4 0z'/></svg>"),
        linear-gradient(180deg, #14365e 0%, #0a2540 100%);
}

/* Date inputs — recolor the native picker icon to brand */
.form-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(40%) sepia(83%) saturate(2466%) hue-rotate(346deg) brightness(101%) contrast(101%);
}

/* Optional helper text under a field */
.form-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* Section divider — small uppercase mini-header to group related fields
   inside a single .form-card. Use as: <div class="form-section">…</div> */
.form-section {
    margin: 14px 0 6px;
    padding-top: 0;
    border-top: 0;
}
.form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0 0 10px;
}
.form-section-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    border-radius: 9px;
    font-size: 13px;
    box-shadow: 0 6px 14px -6px rgba(255, 56, 92, 0.55);
}
/* Premium navy-gold variant — used inside .wizard-section */
.wizard-section .form-section-icon {
    background: linear-gradient(135deg, var(--vf-navy) 0%, var(--vf-navy-2) 100%);
    box-shadow: 0 6px 14px -6px rgba(10, 37, 64, 0.45);
}
.wizard-section .form-section-icon::after {
    /* tiny gold accent dot */
    content: '';
    position: absolute;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vf-gold);
    margin: -22px 0 0 22px;
    box-shadow: 0 0 0 2px #fff;
}
.form-section-icon { position: relative; }
/* The OLD ::before bar is replaced by the icon tile, so suppress it */
.form-section-title::before { content: none !important; }

/* Input prefix icons — wrap an input in .input-with-icon, drop an
   <i class="input-icon"> alongside. The wrapper is block-level with
   font-size:0 so the wrapped field can't inherit baseline/whitespace
   that would make the wrapper taller than the field itself (which
   would push the absolutely-positioned icon out of vertical center). */
.input-with-icon {
    position: relative;
    display: block;
    font-size: 0;
    line-height: 0;
}
.input-with-icon > .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    transition: color .2s ease;
}
.input-with-icon > input,
.input-with-icon > select,
.input-with-icon > textarea {
    padding-left: 42px !important;
    display: block;
    vertical-align: top;
    font-size: 14px;       /* restore — wrapper sets 0 to kill whitespace */
    line-height: 1.4;
}
.input-with-icon > input:focus ~ .input-icon,
.input-with-icon:focus-within > .input-icon { color: #ff6d2d; }
.wizard-section .input-with-icon:focus-within > .input-icon { color: var(--vf-navy); }

/* ==========================================================================
   APPLICATION VIEW
   ========================================================================== */
.view-status-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 22px; }
.detail-list { display: grid; grid-template-columns: 200px 1fr; row-gap: 10px; column-gap: 16px; margin: 0; }
.detail-list dt { font-weight: 600; color: #6b7280; }
.detail-list dd { margin: 0; color: #181A1C; }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.doc-list li:last-child { border-bottom: none; }
.doc-list a { color: #2563eb; text-decoration: none; }
.doc-date { color: #9ca3af; font-size: 12px; margin-left: 6px; }

/* ==========================================================================
   STATUS TIMELINE
   ========================================================================== */
.timeline { list-style: none; padding-left: 18px; margin: 0; }
.timeline-item {
    position: relative;
    padding: 0 0 22px 22px;
    border-left: 2px solid #e5e7eb;
}
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
}
.timeline-done .timeline-dot { background: #10b981; box-shadow: 0 0 0 1px #10b981; }
.timeline-done { border-left-color: #10b981; }
.timeline-body strong { display: block; color: #181A1C; }
.timeline-date { color: #9ca3af; font-size: 12px; }

/* ==========================================================================
   HEADER AUTH GROUP (login / register / user chip)
   ========================================================================== */
.header-auth-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Plain text link with subtle icon + animated underline */
.header-auth-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #181A1C;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s;
}
.header-auth-link i { font-size: 16px; color: #ff385c; }
.header-auth-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #ff385c;
    transition: width .25s ease;
}
.header-auth-link:hover { color: #ff385c; }
.header-auth-link:hover::after { width: 100%; }

/* Primary pill CTA — used for Register / Apply Visa */
.header-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 40px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(255, 56, 92, 0.55);
    transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.header-cta-btn i { font-size: 13px; }
.header-cta-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(255, 56, 92, 0.7);
    filter: brightness(1.05);
}

/* Circular icon button — used for logout */
.header-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f5f5f7;
    color: #181A1C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s, transform .2s;
}
.header-icon-btn:hover {
    background: #ff385c;
    color: #fff;
    transform: translateY(-2px);
}

/* Logged-in user chip — avatar + name */
.header-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    background: #f7f7f9;
    border-radius: 40px;
    color: #181A1C;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .25s, transform .2s;
}
.header-user-chip:hover {
    background: #ffe5ec;
    color: #181A1C;
    transform: translateY(-1px);
}
.header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.header-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user-caret { font-size: 10px; color: #6b7280; margin-left: 4px; }

/* User dropdown (logged-in chip menu) */
.header-user-dropdown { position: relative; }
.header-user-trigger { border: none; cursor: pointer; }
.header-user-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 1000;
}
.header-user-dropdown:hover .header-user-menu,
.header-user-dropdown:focus-within .header-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.header-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #181A1C;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.header-user-menu a i { width: 16px; color: #ff385c; font-size: 13px; }
.header-user-menu a:hover { background: #fff5f7; color: #ff385c; }
.header-user-menu-sep { height: 1px; background: #f0f0f0; margin: 6px 0; }

/* ==========================================================================
   PROFILE PAGE
   ========================================================================== */
.profile-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.profile-avatar-lg,
.profile-avatar-md {
    border-radius: 50%;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.profile-avatar-lg { width: 110px; height: 110px; font-size: 44px; box-shadow: 0 8px 24px -6px rgba(255,56,92,0.4); }
.profile-avatar-md { width: 80px; height: 80px; font-size: 32px; }
.profile-avatar-lg img,
.profile-avatar-md img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-banner-info h1 { margin: 0 0 8px; font-size: 28px; color: #181A1C; }
.profile-banner-email { margin: 4px 0; color: #4b5563; }
.profile-banner-email i { color: #ff385c; margin-right: 6px; }
.profile-meta { color: #9ca3af; font-size: 13px; margin-top: 8px; }

/* Tabs */
.profile-tabs {
    display: flex;
    gap: 6px;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
    flex-wrap: wrap;
}
.profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 8px;
    color: #6b7280;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.profile-tab:hover { background: #fff5f7; color: #ff385c; }
.profile-tab.is-active {
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
}
.profile-tab i { font-size: 13px; }
.profile-tab-panel { display: none; }
.profile-tab-panel.is-active { display: block; }

/* Photo upload row */
.photo-preview-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f0f0f0;
}
.photo-preview-info p { margin: 0; color: #6b7280; font-size: 14px; }
.photo-form .auth-submit-btn { width: auto; padding-left: 22px; padding-right: 22px; }

/* ==========================================================================
   HEADER FIXES — keep menu visible + dropdowns above the wizard hero
   ========================================================================== */

/* Sit the whole header above any other stacking context on the page
   (especially the wizard-hero, which sets position:relative). */
header,
.header-area,
.header-area-all,
#header { position: relative; z-index: 50 !important; }

/* Bulletproof menu legibility: force dark text on the light header bg. */
.main-menu-ex > ul > li > a {
    color: #0f172a !important;
    font-weight: 700 !important;
    transition: color .2s ease;
}
.main-menu-ex > ul > li > a:hover,
.main-menu-ex > ul > li.has-dropdown:hover > a,
.main-menu-ex > ul > li.mega-dropdawn:hover > a {
    color: #ff385c !important;
}

/* Dropdown panels must render *above* the navy hero. */
.main-menu-ex .sub-menu,
.main-menu-ex .sub-menu-all,
.main-menu-ex .mega-dropdawn-ul {
    z-index: 60 !important;
}

/* ==========================================================================
   PREMIUM WIZARD THEME — luxury visa-consultancy chrome
   Navy + gold accent layered over the existing red brand for the apply flow
   ========================================================================== */
:root {
    --vf-navy:       #0a2540;
    --vf-navy-2:     #14365e;
    --vf-gold:       #d4af37;
    --vf-gold-soft:  #e6c870;
    --vf-glass:      rgba(255, 255, 255, 0.72);
    --vf-glass-bord: rgba(255, 255, 255, 0.55);
    --vf-glass-shad: 0 10px 40px rgba(10, 37, 64, 0.10),
                     0 2px 8px  rgba(10, 37, 64, 0.04);
}

/* ----- Hero banner ----- */
.wizard-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(at 80% 0%, rgba(212, 175, 55, 0.22) 0%, transparent 55%),
        radial-gradient(at 0%  100%, rgba(14, 165, 233, 0.18) 0%, transparent 50%),
        linear-gradient(135deg, var(--vf-navy) 0%, var(--vf-navy-2) 100%);
    padding: 68px 0 88px;
    margin-bottom: -42px;             /* form-cards float up into the banner */
    z-index: 1;                       /* stay BELOW the header (z-index: 50) */
}
.wizard-hero::after {                 /* gold underline accent at bottom */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--vf-gold) 30%, var(--vf-gold) 70%, transparent);
    opacity: .55;
}
.wizard-hero-map,
.wizard-hero-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wizard-hero-map  { opacity: .14; }
.wizard-hero-path { opacity: .9; }

.wizard-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.wizard-hero-text { max-width: 720px; }
.wizard-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--vf-gold-soft);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.wizard-hero-eyebrow i { color: var(--vf-gold); }
.wizard-hero-title {
    margin: 18px 0 10px;
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #fff;
}
.wizard-hero-subtitle {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    max-width: 600px;
    line-height: 1.55;
}
.wizard-hero-trust {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
}
.wizard-hero-trust span i { color: var(--vf-gold); margin-right: 6px; }

/* Auto-save draft indicator pill */
.wizard-autosave {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 600;
}
.wizard-autosave-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: autosave-pulse 2.5s ease infinite;
}
@keyframes autosave-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);    }
}

/* ----- Wizard section: glassmorphic, sits over the hero's bottom edge ----- */
.wizard-section {
    background:
        radial-gradient(at 15% 0%,  rgba(212, 175, 55, 0.06) 0%, transparent 45%),
        radial-gradient(at 85% 12%, rgba(14, 165, 233, 0.05) 0%, transparent 40%),
        #fbfbfd !important;
    padding-top: 60px !important;
}

/* Glassmorphic form-card override (only inside .wizard-section) */
.wizard-section .form-card {
    background: var(--vf-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--vf-glass-bord);
    box-shadow: var(--vf-glass-shad);
}
/* Replace the red top stripe with a gold one inside .wizard-section */
.wizard-section .form-card::before {
    background: linear-gradient(90deg, transparent 0%, var(--vf-gold) 35%, var(--vf-gold-soft) 65%, transparent 100%);
    opacity: .85;
}

/* Mobile hero */
@media (max-width: 768px) {
    .wizard-hero { padding: 48px 0 70px; }
    .wizard-hero-title { font-size: 30px; }
    .wizard-hero-subtitle { font-size: 14px; }
    .wizard-hero-inner { flex-direction: column; align-items: flex-start; }
    .wizard-autosave { align-self: flex-start; }
}

/* ==========================================================================
   APPLY WIZARD — Premium step indicator + cards + fields
   ========================================================================== */

/* Step indicator — single continuous track behind the circles.
   Circles always sit ABOVE the track (z-index), so the line never
   "cuts" through any of them. */
.wizard-stepper {
    position: relative;
    padding: 0 28px;          /* 28px = half of circle width (56) */
    max-width: 820px;
    margin: 0 auto 44px;
}
.wizard-stepper-track,
.wizard-stepper-fill {
    position: absolute;
    top: 26px;                /* visual middle of the 56px circle */
    left: 28px;
    right: 28px;
    height: 4px;
    border-radius: 999px;
}
.wizard-stepper-track { background: #f0f1f5; z-index: 0; }
.wizard-stepper-fill  {
    background: linear-gradient(90deg, #ff385c 0%, #ff6d2d 100%);
    box-shadow: 0 0 12px -2px rgba(255, 56, 92, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s cubic-bezier(.21,.62,.32,1);
    z-index: 1;
}
.wizard-stepper-list {
    position: relative;
    z-index: 2;               /* circles ALWAYS above both tracks */
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}
.wizard-step {
    flex: 0 0 auto;
    width: 56px;              /* circle width — keeps spacing predictable */
    text-align: center;
    color: #9ca3af;
    font-weight: 600;
    font-size: 13px;
}
.wizard-step-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #f0f1f5;
    color: #9ca3af;
    font-size: 20px;
    margin-bottom: 10px;
    transition: background .35s ease, border-color .35s ease, color .35s ease, transform .25s ease, box-shadow .35s ease;
}
.wizard-step.is-active .wizard-step-circle {
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    border-color: transparent;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 12px 26px -6px rgba(255, 56, 92, 0.55);
    animation: pulse-step 2s ease-in-out infinite;
}
@keyframes pulse-step {
    0%, 100% { box-shadow: 0 12px 26px -6px rgba(255, 56, 92, 0.55); }
    50%      { box-shadow: 0 12px 26px -6px rgba(255, 56, 92, 0.85); }
}
.wizard-step.is-done .wizard-step-circle {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.45);
}
.wizard-step.is-active .wizard-step-label,
.wizard-step.is-done .wizard-step-label { color: #181A1C; font-weight: 700; }
.wizard-step-label {
    display: block;
    white-space: nowrap;
    transform: translateX(-50%);
    margin-left: 50%;
    width: max-content;
    max-width: 120px;
}
.wizard-step-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: .2px;
    white-space: nowrap;
    transform: translateX(-50%);
    margin-left: 50%;
    width: max-content;
    max-width: 140px;
}
.wizard-step.is-active .wizard-step-sub { color: #ff385c; }

/* Overall progress bar — sits above the step circles */
.wizard-progress {
    max-width: 720px;
    margin: 0 auto 18px;
    padding: 0 6px;
}
.wizard-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 8px;
}
.wizard-progress-meta span:last-child { color: #ff385c; }
.wizard-progress-track {
    width: 100%;
    height: 6px;
    background: #f0f1f5;
    border-radius: 999px;
    overflow: hidden;
}
.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff385c 0%, #ff6d2d 100%);
    border-radius: 999px;
    transition: width .6s cubic-bezier(.21,.62,.32,1);
    box-shadow: 0 0 12px -2px rgba(255, 56, 92, 0.5);
}
@media (max-width: 600px) {
    .wizard-stepper       { padding: 0 22px; }
    .wizard-step          { width: 44px; }
    .wizard-step-circle   { width: 44px; height: 44px; font-size: 16px; }
    .wizard-stepper-track,
    .wizard-stepper-fill  { top: 20px; left: 22px; right: 22px; }
    .wizard-step-sub      { display: none; }
    .wizard-step-label    { font-size: 11px; max-width: 80px; }
}

/* Navigation row */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #f0f0f5;
    gap: 12px;
    flex-wrap: wrap;
}
/* Wizard nav buttons share the exact look of the dropzone .dz-btn-primary
   used by the "Upload Photo" button — same pill, padding, font weight,
   shadow, hover behavior. */
.wizard-back-btn,
.wizard-next-btn,
.wizard-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, color .2s, filter .2s;
}
.wizard-back-btn  { background: #fff; color: #374151 !important; border-color: #e5e7eb !important; }
.wizard-back-btn:hover { background: #f9fafb; color: #181A1C !important; transform: translateY(-1px); }

.wizard-next-btn,
.wizard-submit-btn,
.wizard-next-btn:hover,
.wizard-submit-btn:hover,
.wizard-next-btn:focus,
.wizard-submit-btn:focus,
.wizard-next-btn:active,
.wizard-submit-btn:active {
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%) !important;
    background-color: #ff385c !important;
    color: #fff !important;
    border-color: transparent !important;
}
.wizard-next-btn,
.wizard-submit-btn {
    box-shadow: 0 6px 16px -8px rgba(255, 56, 92, 0.6);
}
.wizard-next-btn:hover,
.wizard-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(255, 56, 92, 0.65);
    filter: brightness(1.05);
}

/* The Visafast template's .theme-btn1 paints a dark `#181A1C` block
   via a ::after pseudo-element that slides in on hover. Kill it for
   our gradient wizard buttons so the gradient stays visible. */
.wizard-next-btn::after,
.wizard-submit-btn::after,
.wizard-next-btn:hover::after,
.wizard-submit-btn:hover::after,
.wizard-back-btn::after,
.wizard-back-btn:hover::after {
    content: none !important;
    background: none !important;
    transform: none !important;
    display: none !important;
}

.wizard-existing-link { margin-top: 14px; color: #6b7280; }
.wizard-existing-link a { color: #ff385c; font-weight: 600; }

.review-list { grid-template-columns: 150px 1fr; }

/* ==========================================================================
   APPLY SUCCESS PAGE
   ========================================================================== */
.success-card {
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.success-icon {
    font-size: 72px;
    color: #10b981;
    margin-bottom: 12px;
    line-height: 1;
}
.success-card h1 { margin: 0 0 8px; font-size: 30px; color: #181A1C; }
.success-sub { color: #6b7280; margin: 0 0 24px; }
.success-app-no {
    display: inline-block;
    background: linear-gradient(135deg, #fff5f7 0%, #ffe5ec 100%);
    border-radius: 12px;
    padding: 18px 28px;
    margin: 0 auto 28px;
}
.success-label { display: block; font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.success-value { display: block; font-size: 22px; font-weight: 700; color: #ff385c; font-family: monospace; letter-spacing: 1px; }

.success-credentials {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 0 auto 24px;
    text-align: left;
    max-width: 500px;
}
.success-credentials h4 { margin: 0 0 8px; color: #92400e; font-size: 16px; }
.success-credentials p { color: #78350f; margin: 0 0 12px; font-size: 14px; }
.success-credentials .detail-list { grid-template-columns: 160px 1fr; }
.success-password { font-family: monospace; font-weight: 700; color: #92400e; letter-spacing: 1px; }
.success-credentials-existing { background: #eff6ff; border-color: #bfdbfe; }
.success-credentials-existing p { color: #1e40af; margin: 0; }
.success-tip { font-size: 13px; color: #78350f !important; margin: 8px 0 0 !important; }
.success-tip i { color: #f59e0b; margin-right: 6px; }

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.success-actions a { border: none; }

/* Receipt strip on the payment-success page */
.success-receipt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    background: #f7f8fa;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 18px 24px;
    margin: 22px auto;
    max-width: 640px;
    text-align: left;
}
.success-receipt > div { padding: 2px 0; }
.success-receipt .success-label { display: block; font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.success-receipt .success-value { display: block; font-size: 15px; font-weight: 700; color: #181A1C; }
.success-mono { font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace; font-size: 13px !important; color: #ff385c !important; }
.success-icon-paid { color: #10b981; }

/* ==========================================================================
   PAYMENT CARD (Razorpay-style dummy)
   ========================================================================== */
.pay-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px -10px rgba(20, 25, 50, 0.12);
    border: 1px solid #eef0f3;
    overflow: hidden;
    animation: card-fade-in .45s cubic-bezier(.21,.62,.32,1);
}
.pay-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
    color: #fff;
}
.pay-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: .3px;
}
.pay-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #3395ff, #1976d2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
}
.pay-secure { font-size: 12px; opacity: .85; }
.pay-secure i { color: #4ade80; margin-right: 4px; }

.pay-amount {
    text-align: center;
    padding: 32px 22px 18px;
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}
.pay-amount-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 6px;
}
.pay-amount-value {
    margin: 0;
    font-size: 42px;
    font-weight: 800;
    color: #181A1C;
    letter-spacing: -1px;
}
.pay-amount-currency {
    font-size: 14px;
    font-weight: 600;
    color: #9ca3af;
    margin-left: 6px;
}

.pay-summary {
    list-style: none;
    padding: 0 22px;
    margin: 0;
}
.pay-summary li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px dashed #f0f0f5;
}
.pay-summary li:last-child { border-bottom: 0; }
.pay-summary li span { color: #6b7280; }
.pay-summary li strong { color: #181A1C; font-weight: 600; }

.pay-methods { padding: 18px 22px 8px; }
.pay-methods-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    margin: 0 0 10px;
}
.pay-methods-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.pay-method {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #f7f8fa;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.pay-method:hover { background: #fff5f7; }
.pay-method input { display: none; }
.pay-method input:checked + i,
.pay-method input:checked ~ i { color: #ff385c; }
.pay-method:has(input:checked) {
    background: #fff5f7;
    border-color: #ff385c;
    color: #ff385c;
}
.pay-method i { color: #6b7280; transition: color .15s; }

.pay-btn {
    width: calc(100% - 44px);
    margin: 18px 22px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .25s, filter .2s;
    position: relative;
}
.pay-btn:hover    { transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(10, 37, 64, 0.45); }
.pay-btn:disabled { cursor: wait; opacity: .85; transform: none; }
.pay-btn.is-processing {
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    animation: pay-pulse 1.5s ease infinite;
}
@keyframes pay-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 56, 92, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 56, 92, 0); }
}
.pay-btn-spinner i { margin-right: 8px; }

.pay-disclaimer {
    margin: 0 22px 22px;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}
.pay-disclaimer i { color: #f59e0b; margin-right: 6px; }
.pay-disclaimer strong { color: #92400e; }

.pay-trust {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 14px;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}
.pay-trust i { color: #10b981; margin-right: 4px; }
@media (max-width: 480px) {
    .pay-methods-row { grid-template-columns: 1fr; }
    .pay-amount-value { font-size: 34px; }
    .success-receipt { padding: 16px; }
}

/* ==========================================================================
   EMAIL PREVIEW CARD (apply/credentials_sent)
   ========================================================================== */
.email-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #eef0f3;
}
.email-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #fff5f7 0%, #ffffff 100%);
    border-bottom: 1px solid #f0f0f0;
}
.email-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.email-card-meta { flex: 1; min-width: 0; font-size: 13px; }
.email-card-from { font-weight: 600; color: #181A1C; margin-bottom: 2px; }
.email-card-to,
.email-card-date { color: #6b7280; }
.email-card-date { margin-top: 2px; font-size: 12px; }

.email-card-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    align-self: flex-start;
    white-space: nowrap;
}
.email-card-badge-mock { background: #fef3c7; color: #92400e; }
.email-card-badge-smtp { background: #d1fae5; color: #065f46; }

.email-card-subject {
    padding: 14px 22px;
    border-bottom: 1px solid #f7f7f9;
    color: #181A1C;
    font-size: 14px;
}
.email-card-body {
    margin: 0;
    padding: 22px;
    background: #fafbff;
    color: #1f2937;
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    border: 0;
    border-radius: 0;
}

.email-dev-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
    color: #1e40af;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.email-dev-note i { color: #3b82f6; margin-top: 2px; }
.email-dev-note code {
    background: #dbeafe;
    color: #1e3a8a;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.wizard-continue-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.wizard-continue-row a { border: none; }

/* Apply wizard — logged-in banner shown on step 1 */
.apply-loggedin-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%);
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
}
.apply-banner-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.apply-banner-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apply-banner-text { line-height: 1.4; }
.apply-banner-text strong { display: block; color: #181A1C; font-size: 14px; }
.apply-banner-text span { display: block; color: #4b5563; font-size: 13px; margin-top: 2px; }

/* Account-exists page (shown to guests whose email is already registered) */
.account-exists-card {
    background: #fff;
    border-radius: 16px;
    padding: 44px 36px;
    text-align: center;
    box-shadow: 0 6px 28px rgba(0,0,0,0.06);
}
.account-exists-icon {
    font-size: 56px;
    color: #f59e0b;
    margin-bottom: 12px;
    line-height: 1;
}
.account-exists-card h1 { margin: 0 0 10px; color: #181A1C; font-size: 26px; }
.account-exists-sub { color: #4b5563; margin: 0 auto 26px; max-width: 520px; line-height: 1.6; }
.account-exists-sub strong { color: #ff385c; }
.account-exists-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.account-exists-actions a { border: none; }
.account-exists-help { font-size: 13px; color: #6b7280; margin: 0; }
.account-exists-help a { color: #ff385c; font-weight: 600; }

/* ==========================================================================
   APPLY WIZARD — STEP 2 CARDS (Passport Scanner + Applicant Photo)
   ========================================================================== */

/* Card with the "01 / 02" numbered header */
.step-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    padding: 26px 28px 14px;
    margin-bottom: 22px;
}
/* Edit page — current-file preview above each replace input. */
.file-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.file-preview-thumb {
    display: block;
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    border: 1.5px solid #e8eaf0;
    border-radius: 10px;
    background: #f8fafc;
    transition: border-color .18s ease, transform .18s ease;
}
.file-preview-thumb:hover { border-color: #ff6d2d; transform: translateY(-1px); }
.file-preview-thumb img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
}
.file-preview-thumb-square {
    max-width: 180px;
}
.file-preview-thumb-square img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.file-preview-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    color: #ef4444;
    font-weight: 700;
    text-decoration: none;
}
.file-preview-doc i { font-size: 26px; }
.file-preview-doc span { color: #0f172a; font-size: 14px; }
.file-preview-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px;
    background: #f8fafc;
    border: 1.5px dashed #d4d5db;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}
.file-preview input[type="file"] {
    padding: 10px 14px;
    border: 1.5px dashed #d4d5db;
    border-radius: 10px;
    background: #fafbfd;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}
.file-preview input[type="file"]:hover { border-color: #ff6d2d; }

/* Edit page header — Back button to the left of the title. */
.edit-page-head {
    display: flex;
    align-items: center;
    gap: 18px;
}
.edit-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    flex: 0 0 auto;
}
@media (max-width: 640px) {
    .edit-page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Track page header — Back button on the left, title centered. */
.track-page-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.track-page-head .track-back-btn {
    position: absolute;
    left: 0;
    top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
}
@media (max-width: 768px) {
    .track-page-head { flex-direction: column; align-items: stretch; }
    .track-page-head .track-back-btn { position: static; align-self: flex-start; }
}

/* ==========================================================================
   FINAL SUBMIT — read-only confirmation page
   ========================================================================== */
.final-submit-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 14px;
}
.final-submit-banner-icon {
    flex: 0 0 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    color: #059669;
    font-size: 22px;
}
.final-submit-banner h4 {
    margin: 0 0 4px;
    color: #065f46;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
}
.final-submit-banner p {
    margin: 0;
    color: #047857;
    font-size: 13px;
}

/* Read-only value blocks */
.review-readonly label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    color: #374151;
    font-size: 11.5px;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.review-readonly .ro-val {
    padding: 11px 14px;
    background: #f8fafc;
    border: 1.5px solid #e8eaf0;
    border-radius: 10px;
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

/* Read-only doc tile (link, not file input) */
.doc-tile.ro {
    cursor: pointer;
    text-decoration: none;
}
.doc-tile.ro:hover { transform: translateY(-1px); border-color: #ff6d2d; }
.doc-tile.ro .doc-tile-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Payment summary */
.pay-summary {
    background: linear-gradient(135deg, #fff7f3 0%, #fff5f7 100%);
    border: 1px solid #ffd6c2;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 4px 0 18px;
}
.pay-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 14px;
    color: #374151;
    border-bottom: 1px dashed rgba(255, 109, 45, 0.18);
}
.pay-summary-row:last-of-type { border-bottom: 0; }
.pay-summary-label { font-weight: 600; letter-spacing: .3px; }
.pay-summary-val   { font-weight: 700; color: #0f172a; }

.pay-summary-total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 2px solid rgba(255, 109, 45, 0.45);
    border-bottom: 0 !important;
    font-size: 18px;
}
.pay-summary-total .pay-summary-label { color: #0f172a; font-weight: 800; }
.pay-summary-total .pay-summary-val   {
    color: #ff385c;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -.3px;
}
.pay-summary-gateway {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pay-summary-gateway i { color: #059669; }
.pay-summary-gateway strong { color: #1d4ed8; font-weight: 800; }

.pay-submit-btn {
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%) !important;
}
.pay-submit-btn i { margin-right: 4px; }

/* Confirmation checkbox above submit */
.final-submit-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: #78350f;
    font-weight: 600;
    cursor: pointer;
}
.final-submit-checkbox input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: #ff6d2d;
}

/* ==========================================================================
   MULTI-DOCUMENT UPLOADER (Step 4)
   Each tile is a click-target around a hidden <input type="file">.
   Empty state = generic icon + "Click to upload". After picking, shows
   the file name + size. The X button clears the selection.
   ========================================================================== */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.doc-grid-extras { margin-top: 12px; }
.doc-grid-extras:empty { display: none; }

.doc-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fafbfd;
    border: 1.5px dashed #d4d5db;
    border-radius: 12px;
    cursor: pointer;
    transition: all .18s ease;
}
.doc-tile:hover {
    border-color: #ff6d2d;
    background: #fff7f3;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 109, 45, 0.10);
}
.doc-tile input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.doc-tile-icon {
    flex: 0 0 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #e8eaf0;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 18px;
    transition: all .18s ease;
}
.doc-tile.has-file .doc-tile-icon {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #34d399;
    color: #059669;
}
.doc-tile-body {
    flex: 1 1 auto;
    min-width: 0;
}
.doc-tile-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}
.doc-tile-meta {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-tile.has-file .doc-tile-meta {
    color: #059669;
    font-weight: 600;
}
.doc-tile-clear {
    flex: 0 0 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #ef4444;
    font-size: 11px;
    cursor: pointer;
    z-index: 2;
    transition: all .15s ease;
}
.doc-tile-clear:hover { background: #fef2f2; transform: scale(1.05); }
.doc-tile.has-file .doc-tile-clear { display: inline-flex; }

.doc-add-btn {
    margin-top: 14px;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px dashed #d4d5db;
    border-radius: 10px;
    color: #ff6d2d;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.doc-add-btn:hover {
    border-color: #ff6d2d;
    background: #fff7f3;
    transform: translateY(-1px);
}

/* ==========================================================================
   REVIEW APPLICATION (Step 4) — editable summary using the same chrome
   as the rest of the wizard. Tiny "source" pill next to each label
   shows where the prefilled value came from (passport scan, login,
   user input, or system default).
   ========================================================================== */
.src-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 4px;
    font: 700 9px/1.4 'SFMono-Regular','Menlo','Consolas',monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.photo-required-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 600;
}
.photo-required-error i { color: #ef4444; font-size: 16px; }
.photo-required-error.is-hidden { display: none; }
.step-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 8px 18px -6px rgba(255, 56, 92, 0.5);
}
.step-card-title { margin: 0; color: #181A1C; font-size: 18px; }
.step-card-sub   { margin: 4px 0 0; color: #6b7280; font-size: 13px; }

/* Dropzone — dashed area you drop / browse into */
.dropzone-wrap { margin-bottom: 22px; }
.dropzone {
    position: relative;
    border: 2px dashed #d8d8e0;
    border-radius: 14px;
    background: #fafbff;
    padding: 36px 24px;
    text-align: center;
    transition: border-color .2s, background .2s, transform .12s;
    cursor: default;
}
.dropzone.is-dragover {
    border-color: #ff385c;
    background: #fff5f7;
    transform: scale(1.005);
}
.dropzone-headline {
    font-family: inherit;
    font-size: 30px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: -.5px;
    margin-bottom: 6px;
}
.dropzone-tagline {
    color: #4b5563;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
}
.dropzone-meta {
    color: #9ca3af;
    font-size: 12px;
    letter-spacing: .3px;
    margin-bottom: 18px;
}
.dropzone-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.scan-file-input { display: none; }

/* Inline buttons inside the dropzone — distinct from theme-btn1 so they
   sit comfortably inside the dashed box */
.dz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.dz-btn:hover { transform: translateY(-1px); }
.dz-btn-primary {
    background: linear-gradient(135deg, #ff385c 0%, #ff6d2d 100%);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(255, 56, 92, 0.6);
}
.dz-btn-primary:hover { box-shadow: 0 10px 22px -8px rgba(255, 56, 92, 0.65); filter: brightness(1.05); }
.dz-btn-secondary {
    background: #fff;
    color: #374151;
    border-color: #e5e7eb;
}
.dz-btn-secondary:hover { background: #f9fafb; }

/* Status line under the dropzone */
.scan-statusline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 6px 4px 0;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    color: #6b7280;
}
.scan-statusdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}
.scan-statusdot--idle     { background: #d1d5db; }
.scan-statusdot--progress { background: #3b82f6; animation: pulse-dot 1.2s ease infinite; }
.scan-statusdot--success  { background: #10b981; }
.scan-statusdot--warn     { background: #f59e0b; }
.scan-statusdot--error    { background: #ef4444; }
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0   rgba(59,130,246,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(59,130,246,0);   }
}
.scan-statustext { flex: 1; }
.scan-reset-link {
    background: none;
    border: 0;
    color: #ff385c;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}
.scan-reset-link:hover { text-decoration: underline; }

/* When an image is loaded the dropzone switches into "image fills the box"
   mode: the inner upload prompt + buttons disappear and the image takes
   over, with an animated scan-line overlay drawn on top during OCR. */
.dropzone-image {
    position: relative;
    width: 100%;
    min-height: 260px;
    max-height: 420px;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
}
.dropzone-image.is-hidden { display: none; }
.dropzone-image img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
}

/* When showing the image we also drop the dashed border + soft bg so it
   reads as a real preview rather than an empty box. */
.dropzone.has-image {
    padding: 0;
    border-style: solid;
    border-color: #181A1C;
    background: #111;
}

/* ──────────────────────────────────────────────────────────────────
   CYBERPUNK IMMIGRATION HUD — futuristic passport scan overlay
   Inspired by airport biometric kiosks & sci-fi security terminals.
   Layers (back→front):
     1  Matrix-rain canvas
     2  Drifting cyan grid lattice
     3  Radial vignette
     4  Holographic iridescent sweep
     5  Animated world route SVG
     6  Targeting corner brackets (lock-on pulse)
     7  Crosshair beams (H + V)
     8  Heatmap face-detection orb
     9  MRZ zone with shimmering decoded stream
    10  Feature keypoints + expanding rings
    11  Glass HUD pills (status / SECURE)
    12  OCR stream panel (right)
    13  AI verification checklist (bottom-left)
    14  Coordinates ticker (bottom-right)
    15  Horizontal glitch flicker
   ────────────────────────────────────────────────────────────────── */
/* Brand neon palette for the HUD */
.scan-hud {
    --hud-cyan:    #00f7ff;
    --hud-blue:    #1d4ed8;
    --hud-green:   #22c55e;
    --hud-amber:   #fbbf24;
    --hud-bg:      rgba(2, 8, 23, 0.62);
    --hud-bg-deep: rgba(2, 8, 23, 0.82);
    --hud-stroke:  rgba(0, 247, 255, 0.45);
    --hud-mono:    'SFMono-Regular','Menlo','Consolas',monospace;
}

/* Darken the underlying dropzone-image bg so the HUD reads cinematic */
.dropzone-image.is-scanning { background: #02060f; }
.dropzone-image.is-scanning img {
    filter: brightness(0.92) saturate(0.85) contrast(1.05);
    transform: perspective(900px) rotateX(2deg) rotateY(-1deg);
    transition: transform .6s ease, filter .4s ease;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    overflow: hidden;
}
.dropzone-image.is-scanning .scan-overlay { opacity: 1; }

/* ──── 1: Matrix rain canvas ──── */
.scan-hud-matrix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    mix-blend-mode: screen;
}

/* ──── 2: Cyan grid lattice ──── */
.scan-hud-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 247, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 247, 255, 0.14) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
    animation: scan-grid-drift 9s linear infinite;
}

/* ──── 3: Radial vignette ──── */
.scan-hud-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(2,6,23,0.75) 100%);
    pointer-events: none;
}

/* ──── 4: Holographic iridescent sweep ──── */
.scan-hud-holo {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(0, 247, 255, 0.0) 30%,
        rgba(0, 247, 255, 0.18) 45%,
        rgba(34, 197, 94, 0.18) 55%,
        rgba(0, 247, 255, 0.0) 70%,
        transparent 100%);
    background-size: 250% 250%;
    mix-blend-mode: screen;
    animation: scan-holo 4s linear infinite;
}

/* ──── 5: World route SVG ──── */
.scan-hud-routes {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 32%;
    width: 88%;
    height: 35%;
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(0, 247, 255, 0.65));
    pointer-events: none;
}
.scan-hud-routes path { animation: scan-dash-flow 3s linear infinite; }

/* ──── 6: Targeting corner brackets ──── */
.scan-hud-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--hud-cyan);
    filter: drop-shadow(0 0 8px rgba(0, 247, 255, 0.9));
    animation: scan-corners-lock 1.5s ease-in-out infinite;
}
.scan-hud-corner--tl { top: 12px;    left: 12px;    border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.scan-hud-corner--tr { top: 12px;    right: 12px;   border-left: 0;  border-bottom: 0; border-top-right-radius: 4px; }
.scan-hud-corner--bl { bottom: 12px; left: 12px;    border-right: 0; border-top: 0;    border-bottom-left-radius: 4px; }
.scan-hud-corner--br { bottom: 12px; right: 12px;   border-left: 0;  border-top: 0;    border-bottom-right-radius: 4px; }

/* ──── 7: Crosshair beams ──── */
.scan-hud-beam--h {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--hud-cyan) 50%, transparent 100%);
    box-shadow:
        0 0 14px 3px rgba(0, 247, 255, 0.7),
        0 0 28px 8px rgba(0, 247, 255, 0.30);
    animation: scan-sweep-h 2.4s cubic-bezier(.55,.08,.45,.92) infinite;
}
.scan-hud-beam--v {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, var(--hud-green) 50%, transparent 100%);
    box-shadow: 0 0 12px 2px rgba(34, 197, 94, 0.7);
    opacity: 0.7;
    animation: scan-sweep-v 3.6s cubic-bezier(.55,.08,.45,.92) infinite;
}

/* ──── 10: Feature keypoints ──── */
.scan-hud-kp {
    position: absolute;
    width: 9px;
    height: 9px;
}
.scan-hud-kp i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--hud-cyan);
    box-shadow:
        0 0 0 2px rgba(0, 247, 255, 0.40),
        0 0 12px var(--hud-cyan);
    opacity: 0;
    animation: scan-dot-pulse 2.6s ease-in-out infinite;
}
.scan-hud-kp::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1.5px solid var(--hud-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: scan-dot-ring 2.6s ease-out infinite;
}
.scan-hud-kp-1 { top: 18%; left: 16%; animation-delay: 0.0s;  }
.scan-hud-kp-2 { top: 28%; left: 70%; animation-delay: 0.45s; }
.scan-hud-kp-3 { top: 44%; left: 36%; animation-delay: 0.9s;  }
.scan-hud-kp-4 { top: 52%; left: 84%; animation-delay: 1.35s; }
.scan-hud-kp-5 { top: 60%; left: 22%; animation-delay: 1.8s;  }
.scan-hud-kp-6 { top: 34%; left: 54%; animation-delay: 2.25s; }
.scan-hud-kp-1 i, .scan-hud-kp-1::after { animation-delay: 0.0s; }
.scan-hud-kp-2 i, .scan-hud-kp-2::after { animation-delay: 0.45s; }
.scan-hud-kp-3 i, .scan-hud-kp-3::after { animation-delay: 0.9s; }
.scan-hud-kp-4 i, .scan-hud-kp-4::after { animation-delay: 1.35s; }
.scan-hud-kp-5 i, .scan-hud-kp-5::after { animation-delay: 1.8s; }
.scan-hud-kp-6 i, .scan-hud-kp-6::after { animation-delay: 2.25s; }

/* ──── 11: Glass HUD pills (status / SECURE) ──── */
.scan-hud-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--hud-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--hud-stroke);
    border-radius: 999px;
    color: #fff;
    font: 700 10.5px/1 var(--hud-mono);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.scan-hud-pill--status { top: 14px;    left: 14px;   }
.scan-hud-pill--secure { top: 14px;    right: 14px;
    border-color: rgba(34, 197, 94, 0.55);
    color: #d1fae5;
}
.scan-hud-pill--secure i { color: var(--hud-green); }
.scan-hud-pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hud-green);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85);
    animation: scan-label-pulse 1.2s ease-out infinite;
}
.scan-hud-pill-sep { color: rgba(255,255,255,0.3); }
.scan-hud-pill-pct {
    color: var(--hud-cyan);
    min-width: 32px;
    text-align: right;
}
.scan-hud-pill [data-scan-dots]::after {
    content: '';
    animation: scan-dots-anim 1s steps(4, end) infinite;
}

/* ──── 12: OCR stream panel (right side) ──── */
.scan-hud-panel {
    position: absolute;
    padding: 10px 12px;
    background: var(--hud-bg-deep);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--hud-stroke);
    border-radius: 8px;
    color: rgba(220, 252, 255, 0.95);
    box-shadow: 0 6px 24px rgba(0,0,0,0.6),
                inset 0 0 30px rgba(0, 247, 255, 0.05);
    text-align: left;
}
.scan-hud-panel-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--hud-cyan);
    font: 700 9.5px/1 var(--hud-mono);
    letter-spacing: 2.4px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 247, 255, 0.18);
}
.scan-hud-panel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hud-green);
    box-shadow: 0 0 6px var(--hud-green);
    animation: scan-label-pulse 1.4s ease-out infinite;
}

.scan-hud-panel--ocr {
    top: 52px;
    left: 14px;
    width: 175px;
    max-height: 42%;
    overflow: hidden;
}
.scan-hud-ocr {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 10px/1.4 var(--hud-mono);
    text-align: left;
}
.scan-hud-ocr li {
    color: rgba(220, 252, 255, 0.92);
    padding: 2px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 0;
    animation: scan-ocr-in .25s ease-out forwards;
    text-align: left;
}
.scan-hud-ocr li::before {
    content: '> ';
    color: var(--hud-cyan);
}
.scan-hud-ocr li b {
    color: var(--hud-green);
    font-weight: 700;
}

/* ──── Step indicator (centre-bottom) ────
   Mirrors the regular .scan-statusline text into a glass pill on the
   HUD so the user can see what stage the scanner is at without
   looking away from the cinematic overlay. */
.scan-hud-step {
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    max-width: 70%;
    background: var(--hud-bg-deep);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--hud-stroke);
    border-radius: 999px;
    color: rgba(220, 252, 255, 0.96);
    font: 600 11px/1.3 var(--hud-mono);
    letter-spacing: .8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scan-hud-step-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 18px; height: 18px;
    align-items: center; justify-content: center;
    background: rgba(0, 247, 255, 0.18);
    border-radius: 50%;
    color: var(--hud-cyan);
    font-size: 10px;
    animation: scan-hud-step-spin 1.4s linear infinite;
}
.scan-hud-step[data-kind="success"] .scan-hud-step-icon {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    animation: none;
}
.scan-hud-step[data-kind="warn"] .scan-hud-step-icon,
.scan-hud-step[data-kind="error"] .scan-hud-step-icon {
    background: rgba(255, 56, 92, 0.25);
    color: #ff385c;
    animation: none;
}
@keyframes scan-hud-step-spin { to { transform: rotate(360deg); } }

/* Bouncing-dots accent next to the step text when in progress.
   Three glowing dots that pulse in sequence — visual feedback that the
   pipeline is actively working. */
.scan-hud-step::after {
    content: '';
    display: inline-flex;
    width: 22px;
    height: 6px;
    margin-left: 2px;
    background-image:
        radial-gradient(circle, var(--hud-cyan) 50%, transparent 51%),
        radial-gradient(circle, var(--hud-cyan) 50%, transparent 51%),
        radial-gradient(circle, var(--hud-cyan) 50%, transparent 51%);
    background-size: 6px 6px;
    background-position: 0 50%, 8px 50%, 16px 50%;
    background-repeat: no-repeat;
    animation: scan-hud-step-dots 1.1s ease-in-out infinite;
    opacity: 1;
}
.scan-hud-step[data-kind="success"]::after,
.scan-hud-step[data-kind="warn"]::after,
.scan-hud-step[data-kind="error"]::after,
.scan-hud-step[data-kind="idle"]::after { display: none; }

@keyframes scan-hud-step-dots {
    0%, 100% { opacity: 0.3; }
    25%      { opacity: 1;   background-position: 0 30%,  8px 50%, 16px 50%; }
    50%      { opacity: 1;   background-position: 0 50%,  8px 30%, 16px 50%; }
    75%      { opacity: 1;   background-position: 0 50%,  8px 50%, 16px 30%; }
}

@media (max-width: 640px) {
    .scan-hud-step { font-size: 10px; padding: 5px 10px; bottom: 48px; }
}

/* ──── 14: Coordinates ticker (bottom-right) ──── */
.scan-hud-coords {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--hud-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--hud-stroke);
    border-radius: 8px;
    color: rgba(220, 252, 255, 0.92);
    font: 10px/1 var(--hud-mono);
    letter-spacing: 1.4px;
}
.scan-hud-coords-lbl {
    color: var(--hud-cyan);
    font-weight: 700;
    border-right: 1px solid rgba(0, 247, 255, 0.3);
    padding-right: 8px;
}

/* ──── 15: Glitch flicker ──── */
.scan-hud-glitch {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 247, 255, 0.04) 49.5%,
        rgba(0, 247, 255, 0.08) 50%,
        rgba(0, 247, 255, 0.04) 50.5%,
        transparent 100%);
    background-size: 100% 12px;
    mix-blend-mode: screen;
    opacity: 0.35;
    animation: scan-glitch-flicker 5.5s steps(40) infinite;
}

/* Hide heavy HUD parts on tiny screens so it still reads well */
@media (max-width: 640px) {
    .scan-hud-panel--ocr  { width: 130px; left: 8px; top: 48px; }
    .scan-hud-coords      { display: none; }
    .scan-hud-pill        { font-size: 9.5px; padding: 5px 10px; }
    .scan-hud-corner      { width: 20px; height: 20px; }
}

/* ── keyframes ─────────────────────────────────────────────────── */
@keyframes scan-corners-lock {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.06); opacity: 1;   }
}
@keyframes scan-holo {
    0%   { background-position:   0%   0%; }
    100% { background-position: 250% 250%; }
}
@keyframes scan-grid-drift {
    from { background-position:  0  0,  0  0; }
    to   { background-position: 30px 30px, -30px 30px; }
}
@keyframes scan-sweep-h {
    0%   { top: 0%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes scan-sweep-v {
    0%   { left: 100%; opacity: 0;   }
    10%  {             opacity: 0.7; }
    90%  {             opacity: 0.7; }
    100% { left: 0%;   opacity: 0;   }
}
@keyframes scan-dot-pulse {
    0%, 100% { transform: scale(0.5); opacity: 0; }
    40%      { transform: scale(1.0); opacity: 1; }
    70%      { transform: scale(1.4); opacity: 0.4; }
}
@keyframes scan-dot-ring {
    0%   { transform: scale(0.4); opacity: 0;   }
    30%  { opacity: 0.9; }
    100% { transform: scale(3.0); opacity: 0;   }
}
@keyframes scan-label-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85); }
    100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}
@keyframes scan-dash-flow {
    to { stroke-dashoffset: -40; }
}
@keyframes scan-dots-anim {
    0%   { content: '';     }
    25%  { content: '.';    }
    50%  { content: '..';   }
    75%  { content: '...';  }
    100% { content: '';     }
}
@keyframes scan-ocr-in {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0);    }
}
@keyframes scan-glitch-flicker {
    0%, 92%, 100%       { opacity: 0.35; transform: translateY(0); }
    93%                 { opacity: 0.7;  transform: translateY(-2px); }
    94%                 { opacity: 0.1;  transform: translateY(4px); }
    95%                 { opacity: 0.6;  transform: translateY(-1px); }
    96%, 99%            { opacity: 0.35; transform: translateY(0); }
}

/* Standalone progress bar (separate from the image now) */
.scan-progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 4px;
}
.scan-progress.is-hidden { display: none; }
.scan-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ff385c, #ff6d2d);
    transition: width .25s ease;
}

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

/* Scan-failed prompt — invites the user to upload a clearer image
   when MRZ parsing failed. */
.scan-error-prompt {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-top: 12px;
    background: linear-gradient(135deg, #fff5f5 0%, #fffbeb 100%);
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    box-shadow: 0 4px 14px -4px rgba(239, 68, 68, 0.15);
    animation: scan-error-in .35s ease;
}
.scan-error-prompt.is-hidden { display: none; }
@keyframes scan-error-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.scan-error-prompt-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 16px -6px rgba(239, 68, 68, 0.55);
}
.scan-error-prompt-body { flex: 1; min-width: 0; }
.scan-error-prompt-body strong {
    display: block;
    color: #991b1b;
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 700;
}
.scan-error-prompt-body p {
    margin: 0;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.5;
}
.scan-error-prompt-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .scan-error-prompt { flex-direction: column; align-items: flex-start; }
    .scan-error-prompt-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   SCANNED PASSPORT DETAILS CARD (step 3 — read-only summary of scan)
   ========================================================================== */
.scan-details-card {
    background: linear-gradient(135deg, #fff5f7 0%, #ffffff 100%);
    border: 1px solid #ffe5ec;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
}
.scan-details-title {
    margin: 0 0 22px;
    color: #ff385c;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    position: relative;
    padding-bottom: 14px;
}
.scan-details-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, #ff385c, #ff6d2d);
    border-radius: 999px;
}
@media (max-width: 600px) {
    .scan-details-title { font-size: 18px; letter-spacing: 1.4px; }
}
/* Thumbnails row — each thumb lives in its own col-md-6 so it lines
   up with the matching first-field below (passport thumb → Passport
   Type, applicant photo → Surname). */
.scan-details-thumbs-row {
    margin-bottom: 4px;
    position: relative;
}
/* Caption beneath each thumbnail */
.scan-details-thumb-wrap { text-align: center; }
.scan-thumb-caption {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #6b7280;
}

/* Dedicated photos card — sits before the fields card */
.scan-photos-card { padding-bottom: 26px; }
.scan-details-thumb-col {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
/* Passport: fills the column width, aspect-locked to ~1.42:1 (real
   passport bio-page ratio). Photo: portrait, sized so its HEIGHT
   roughly matches the passport's so both sit on the same baseline. */
.scan-details-thumb-col {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.scan-details-thumb {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1.42 / 1;          /* landscape — passport bio page */
    border-radius: 18px;
    overflow: hidden;
    background: #fafbff;
    padding: 10px;
    border: 1px solid #eef0f5;
    box-shadow:
        0 1px 0 rgba(20, 25, 50, 0.03),
        0 10px 24px -4px rgba(20, 25, 50, 0.10),
        0 22px 50px -16px rgba(20, 25, 50, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.scan-details-thumb:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 0 rgba(20, 25, 50, 0.03),
        0 16px 32px -4px rgba(20, 25, 50, 0.14),
        0 30px 60px -16px rgba(20, 25, 50, 0.18);
}
.scan-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    background: #fafbff;
}
/* Applicant photo — portrait 3:4. Sized to roughly the same HEIGHT as
   the passport on a 480-wide passport (480 / 1.42 ≈ 338) so they
   visually align across the row. */
.scan-details-thumb-photo {
    width: auto;
    max-width: 260px;
    aspect-ratio: 3 / 4;
    height: auto;
}
.scan-details-thumb-photo img { object-fit: cover; object-position: top; }

@media (max-width: 992px) {
    .scan-details-thumb       { max-width: 100%; }
    .scan-details-thumb-photo { max-width: 220px; }
}
@media (max-width: 480px) {
    .scan-details-thumb-photo { max-width: 200px; }
}

.sd-field { margin-bottom: 14px; }
.sd-field label {
    display: block;
    font-size: 10.5px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    margin-bottom: 6px;
}
.sd-value {
    position: relative;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: .3px;
    box-shadow: 0 1px 0 rgba(20, 25, 50, 0.02);
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.sd-value::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--vf-gold, #d4af37), var(--vf-gold-soft, #e6c870));
}
.sd-value:hover {
    border-color: #d4af37;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(212, 175, 55, 0.25);
}

.scan-result {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 28px;
    padding: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
    border: 1px solid #eef0f5;
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(20, 25, 50, 0.03),
        0 8px 24px -4px rgba(20, 25, 50, 0.08);
    margin-bottom: 14px;
    overflow: hidden;
}
/* Gold accent stripe at top — premium tell, matches the wizard chrome. */
.scan-result::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--vf-gold, #d4af37) 35%, var(--vf-gold-soft, #e6c870) 65%, transparent);
    opacity: .85;
}
/* Thumb takes ~40 % of the row, data column takes the rest. */
.scan-result-thumb {
    flex: 0 0 40%;
    width: 40%;
    min-width: 260px;
    aspect-ratio: 1.42 / 1;     /* match passport bio-page ratio */
    max-height: 360px;
    border-radius: 12px;
    overflow: hidden;
    background: #fafbff;
    padding: 12px;
    border: 1px solid #eef0f5;
    box-shadow: inset 0 1px 0 rgba(20, 25, 50, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, box-shadow .3s ease;
}
.scan-result-thumb:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(20, 25, 50, 0.02),
        0 12px 24px -6px rgba(20, 25, 50, 0.14);
}
.scan-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}
.scan-result-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.scan-result-title {
    margin: 0 0 16px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* ── Scan-success reveal effect ─────────────────────────────
   1) Whole card slides up + fades in
   2) Thumb gets a quick green ring "pulse"
   3) Title pops in
   4) Each chip cascades up one by one
   5) Confetti-style burst from the card centre              */
.scan-result {
    position: relative;
    overflow: hidden;
}
.scan-result.is-revealing {
    animation: scan-reveal-card .6s cubic-bezier(.34,1.56,.64,1) both;
}
.scan-result.is-revealing .scan-result-thumb {
    animation: scan-reveal-thumb .9s ease-out both;
}
.scan-result.is-revealing .scan-result-title {
    animation: scan-reveal-fade .5s ease-out .2s both;
}
.scan-result.is-revealing .scan-chip {
    opacity: 0;
    animation: scan-reveal-chip .45s ease-out both;
}
.scan-result.is-revealing .scan-chip:nth-child(1)  { animation-delay: .25s; }
.scan-result.is-revealing .scan-chip:nth-child(2)  { animation-delay: .30s; }
.scan-result.is-revealing .scan-chip:nth-child(3)  { animation-delay: .35s; }
.scan-result.is-revealing .scan-chip:nth-child(4)  { animation-delay: .40s; }
.scan-result.is-revealing .scan-chip:nth-child(5)  { animation-delay: .45s; }
.scan-result.is-revealing .scan-chip:nth-child(6)  { animation-delay: .50s; }
.scan-result.is-revealing .scan-chip:nth-child(7)  { animation-delay: .55s; }
.scan-result.is-revealing .scan-chip:nth-child(8)  { animation-delay: .60s; }
.scan-result.is-revealing .scan-chip:nth-child(9)  { animation-delay: .65s; }
.scan-result.is-revealing .scan-chip:nth-child(10) { animation-delay: .70s; }
.scan-result.is-revealing .scan-chip:nth-child(n+11) { animation-delay: .75s; }
.scan-result.is-revealing .scan-result-actions {
    animation: scan-reveal-fade .45s ease-out .85s both;
}

@keyframes scan-reveal-card {
    0%   { opacity: 0; transform: translateY(18px) scale(.985); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes scan-reveal-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes scan-reveal-chip {
    0%   { opacity: 0; transform: translateY(10px) scale(.96); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes scan-reveal-thumb {
    0%   { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0.6); }
    50%  { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);   }
    100% { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0);   }
}

/* Confetti burst — JS injects this with N particle <span>s. */
.scan-success-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 5;
}
.scan-success-burst span {
    position: absolute;
    top: 0; left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: scan-burst-fly 1s cubic-bezier(.15,.7,.3,1) both;
}
@keyframes scan-burst-fly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    15%  { opacity: 1; transform: translate(calc(-50% + var(--tx) * 0.15), calc(-50% + var(--ty) * 0.15)) scale(1.2); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.4); }
}
.scan-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-bottom: 18px;
}
.scan-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    line-height: 1.3;
    font-weight: 500;
    color: #374151;
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.scan-chip:hover {
    border-color: var(--vf-gold, #d4af37);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(212, 175, 55, 0.25);
}
.scan-chip-k {
    color: #6b7280;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.scan-chip-v {
    color: #ff385c;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* The data column is narrower now (thumb takes 60%) — stack chips
   in one column whenever we're not on a wide desktop. Covers tablet
   portrait (≤1280) AND the 601–768 gap where the result card has
   already stacked vertically. */
@media (max-width: 1280px) {
    .scan-chips { grid-template-columns: 1fr; }
}

.scan-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   SCANNER DEBUG PREVIEW CARD (after scan)
   left  : processed passport image with pink MRZ-region overlay
   right : JSON dump (parsed fields, mapping, raw OCR text)
   ========================================================================== */
.scan-debug-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    color: #4b5563;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s ease;
}
.scan-result-actions .scan-debug-toggle { margin-left: auto; }
.scan-debug-toggle i { color: #ff385c; font-size: 13px; }
.scan-debug-toggle:hover {
    border-color: #ff385c;
    color: #181A1C;
    box-shadow: 0 4px 12px rgba(255, 56, 92, 0.12);
    transform: translateY(-1px);
}
.scan-debug-toggle.is-hidden { display: none; }

.scan-debug-card {
    margin-top: 14px;
    background: #fff;
    border: 1px solid #f0f0f5;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    padding: 22px;
}
.scan-debug-card-head { margin-bottom: 16px; }
.scan-debug-card-title {
    margin: 0;
    color: #181A1C;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.scan-debug-card-sub {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}
.scan-debug-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 14px;
}
.scan-debug-image {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f4f6;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scan-debug-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
}
.scan-debug-mrz-overlay {
    position: absolute;
    border: 2px solid #ff385c;
    background: rgba(255, 56, 92, 0.18);
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.0); /* placeholder */
    border-radius: 4px;
}
.scan-debug-json {
    margin: 0;
    padding: 16px;
    background: #1f2937;
    color: #d1d5db;
    border-radius: 10px;
    font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.65;
    max-height: 400px;
    overflow: auto;
    white-space: pre;
    word-break: normal;
}

@media (max-width: 768px) {
    .scan-debug-card-grid { grid-template-columns: 1fr; }
    .scan-result { flex-direction: column; align-items: stretch; gap: 18px; }
    .scan-result-thumb,
    .scan-result-body { flex: 1 1 auto; width: 100%; max-width: 100%; }
    .scan-result-thumb { max-height: 260px; }
    .scan-result-body  { width: 100%; }
}

/* ==========================================================================
   APPLICANT PHOTO EDITOR (Cropper.js — Indian visa spec, 1:1 square)
   ========================================================================== */
.photo-editor {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.04);
}
.photo-editor-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: stretch;
}
.photo-editor-pane { display: flex; flex-direction: column; }
.photo-editor-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
}

/* Cropper area — fixed-height box, Cropper.js fills it */
.photo-cropper-wrap {
    width: 100%;
    height: 340px;
    background: #1f2937;
    border-radius: 10px;
    overflow: hidden;
}
.photo-cropper-wrap img { display: block; max-width: 100%; }

/* Toolbar buttons under the cropper */
.photo-editor-toolbar {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ed-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.ed-btn:hover {
    background: #ff385c;
    border-color: #ff385c;
    color: #fff;
    transform: translateY(-1px);
}
.ed-sep {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #e5e7eb;
    margin: 0 4px;
}

/* Live preview pane */
.photo-preview-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 340px;
    background: #f3f4f6;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.photo-preview-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* India spec card under the preview */
.photo-spec-card {
    margin-top: 10px;
    background: #fff5f7;
    border: 1px solid #ffe5ec;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: #374151;
}
.photo-spec-card strong {
    display: block;
    color: #ff385c;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.photo-spec-card ul {
    margin: 0;
    padding-left: 18px;
    line-height: 1.5;
}

/* Upload + Remove row shown after a photo is loaded */
.photo-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.photo-actions[hidden] { display: none; }

@media (max-width: 768px) {
    .photo-editor-grid { grid-template-columns: 1fr; }
    .photo-cropper-wrap, .photo-preview-wrap { height: 260px; }
}

/* Auto-filled inputs glow briefly so the user spots them */
.field-autofilled {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    animation: scan-glow 1.6s ease;
}
@keyframes scan-glow {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    60%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Estimated values (issue date back-calculated from expiry) — persistent
   red highlight + warning note. Reverts to brand styling on focus so the
   field stops "screaming" once the user is correcting it. */
.field-estimated,
.form-field input.field-estimated {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
    animation: estimate-pulse 2.4s ease 2;
}
.field-estimated:focus,
.form-field input.field-estimated:focus {
    background: #fff !important;
    border-color: #ff6d2d !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 4px rgba(255, 109, 45, 0.12) !important;
}
@keyframes estimate-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.18); }
}
.field-estimated-note {
    color: #b91c1c !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.field-estimated-note i { color: #ef4444; }

/* ==========================================================================
   FLOATING LABELS — opt-in by wrapping a .form-field in .form-float
   The input MUST have placeholder=" " (a single space) for the
   :placeholder-shown trick to work.
   ========================================================================== */
.form-float {
    position: relative;
}
.form-float > label {
    position: absolute;
    top: 14px;
    left: 16px;
    margin: 0;
    background: linear-gradient(180deg, transparent 50%, #fff 50%);
    padding: 0 6px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
    pointer-events: none;
    transform-origin: left center;
    transition: transform .18s ease, color .18s ease, top .18s ease;
}
.form-float > input:not([type="date"]):placeholder-shown + label,
.form-float > textarea:placeholder-shown + label {
    transform: translateY(0) scale(1);
}
.form-float > input:focus + label,
.form-float > input:not(:placeholder-shown) + label,
.form-float > textarea:focus + label,
.form-float > textarea:not(:placeholder-shown) + label,
.form-float > select + label {
    top: -8px;
    transform: scale(.85);
    color: var(--vf-navy);
    font-weight: 700;
}
.form-float > input,
.form-float > textarea,
.form-float > select {
    padding-top: 18px !important;
    padding-bottom: 10px !important;
}

/* "Previously uploaded" banner on step 2 — shown when wizard state
   already holds a passport scan or applicant photo (e.g. user clicked
   Back from a later step). Lets them see their data is preserved. */
.prev-upload-banner { padding-bottom: 22px; }
.prev-upload-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.prev-upload-head > i {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -6px rgba(16, 185, 129, 0.5);
}
.prev-upload-head strong { color: #065f46; font-size: 14px; font-weight: 700; }
.prev-upload-head p {
    margin: 2px 0 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}
.prev-upload-head em { color: #ff385c; font-style: normal; font-weight: 700; }

.prev-upload-thumbs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}
.prev-upload-thumbs figure {
    margin: 0;
    background: #fafbff;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 14px rgba(20, 25, 50, 0.06);
}
.prev-upload-thumbs img {
    display: block;
    width: 160px;
    height: 110px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}
.prev-upload-thumbs figcaption {
    margin-top: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b7280;
}

/* Country flag chip rendered next to country inputs */
.form-field input.has-country-flag {
    padding-left: 52px;
}
.country-flag {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
    user-select: none;
}
.country-flag.has-flag { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08)); }
.form-field { position: relative; }

/* When country-flags.js paints a flag onto an existing .input-icon
   slot (inside .input-with-icon), bump the size + drop shadow so the
   emoji reads as a real flag and not a tiny squiggle. */
.country-flag-emoji {
    font-size: 18px !important;
    line-height: 1;
    color: inherit !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.10));
}

/* ==========================================================================
   VISA FORM (apply step 2) — MOBILE TUNING
   Tighter step cards, full-width tap targets, single-column chips,
   stacked wizard nav with primary CTA on top for one-thumb flow.
   ========================================================================== */
@media (max-width: 600px) {
    .scan-widget-preview { grid-template-columns: 1fr; }

    /* Step card chrome */
    .step-card { padding: 18px 14px; }
    .step-card-head { gap: 10px; margin-bottom: 14px; }
    .step-number {
        width: 36px; height: 36px;
        font-size: 13px;
        border-radius: 10px;
    }
    .step-card-title { font-size: 16px; }
    .step-card-sub   { font-size: 12px; line-height: 1.45; }

    /* Dropzone — smaller hero + stacked full-width buttons */
    .dropzone { padding: 22px 14px; border-radius: 12px; }
    .dropzone-headline { font-size: 20px; margin-bottom: 4px; }
    .dropzone-tagline  { font-size: 14px; }
    .dropzone-meta     { font-size: 11px; margin-bottom: 14px; }
    .dropzone-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .dropzone-actions .dz-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 18px;
    }

    /* Image preview — shorter on phones so the HUD reads cinematic */
    .dropzone-image     { min-height: 200px; max-height: 320px; }
    .dropzone-image img { max-height: 320px; }

    .scan-statusline { font-size: 12px; }

    /* Scan-result card — chips single column, action buttons share row */
    .scan-result { padding: 16px; gap: 14px; border-radius: 14px; }
    .scan-result-thumb {
        min-width: 0;              /* override the desktop 260px floor */
        max-height: 220px;
        padding: 8px;
    }
    .scan-result-title { font-size: 16px; margin-bottom: 12px; }
    .scan-chips { grid-template-columns: 1fr; gap: 6px 8px; }
    .scan-chip  { padding: 8px 12px; font-size: 12px; }

    .scan-result-actions { gap: 8px; }
    .scan-result-actions .dz-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 10px 14px;
    }
    .scan-result-actions .scan-debug-toggle {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        order: 99;                 /* always last when chips wrap */
    }

    /* Photo editor (already stacks at 768) — tighten for phones */
    .photo-editor { padding: 12px; }
    .photo-cropper-wrap,
    .photo-preview-wrap { height: 280px; }
    .photo-editor-toolbar { justify-content: center; gap: 6px; }
    .ed-btn { width: 34px; height: 34px; }
    .ed-sep { display: none; }
    .photo-actions { flex-direction: column; gap: 8px; }
    .photo-actions .dz-btn { width: 100%; justify-content: center; }
    .photo-spec-card { font-size: 11.5px; }
    .photo-spec-card ul { padding-left: 16px; }

    /* Photo-required banner */
    .photo-required-error { padding: 12px 14px; font-size: 13px; }

    /* Wizard nav — stack with primary Next on top */
    .wizard-nav {
        flex-direction: column-reverse;
        gap: 10px;
        padding-top: 18px;
    }
    .wizard-back-btn,
    .wizard-next-btn,
    .wizard-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
}

@media (max-width: 380px) {
    .dropzone-headline { font-size: 18px; }
    .step-card-title   { font-size: 15px; }
    .scan-result-thumb { max-height: 180px; }
    .photo-cropper-wrap,
    .photo-preview-wrap { height: 240px; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
.print-page { background: #fff; color: #111; font-family: Arial, sans-serif; }
.print-wrap { max-width: 800px; margin: 30px auto; padding: 30px; }
.print-header h2 { margin: 0 0 8px; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.print-table th,
.print-table td { border: 1px solid #ccc; padding: 8px 10px; text-align: left; vertical-align: top; }
.print-table th { background: #f2f2f2; width: 180px; }
.print-note { margin-top: 30px; font-size: 12px; color: #555; font-style: italic; }
.print-actions { margin-top: 20px; }
@media print {
    .no-print { display: none !important; }
}

/* ==========================================================================
   COUNTRIES PICKER (multi-chip input — apply form's "Countries Visited")
   The field-wrapper looks like a single bordered input; chips + the live
   text input flow inline inside it (Gmail "To:" / GitHub label pattern).
   ========================================================================== */
.countries-picker { display: block; position: relative; }

/* The bordered "fake input" that contains both chips and the live input */
.countries-picker .countries-picker-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    background: #fafbfd;
    border: 1.5px solid #e8eaf0;
    border-radius: 12px;
    cursor: text;
    transition: border-color .2s ease, background .2s ease, box-shadow .25s ease;
    box-shadow: inset 0 1px 0 rgba(20, 25, 50, 0.02);
}
.countries-picker .countries-picker-field:hover {
    border-color: #d4d5db;
    background: #fff;
}
.countries-picker .countries-picker-field:focus-within {
    border-color: #ff6d2d;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 109, 45, 0.14);
}

/* Globe icon prefix — sits at the left of the field */
.countries-picker .countries-picker-icon {
    color: #94a3b8;
    font-size: 15px;
    margin-right: 2px;
    flex-shrink: 0;
    transition: color .2s ease;
}
.countries-picker .countries-picker-field:focus-within .countries-picker-icon {
    color: #ff6d2d;
}

/* Chips container — inline with the input, no longer a separate row */
.countries-picker .countries-picker-chips {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    min-height: 0;
}
.countries-picker .countries-picker-chips:empty {
    display: none !important;
}

/* The transparent live-input that flows after the chips */
.countries-picker .countries-picker-input {
    flex: 1 1 140px;
    min-width: 100px;
    border: 0 !important;
    background: transparent !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    text-transform: none !important;
    line-height: 1.4;
    height: auto !important;
}
.countries-picker .countries-picker-input::placeholder {
    color: #aab0bc;
    font-weight: 400;
    text-transform: none;
}

.countries-picker .countries-picker-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 14px;
    background: linear-gradient(135deg, #fff5f7 0%, #ffe5ec 100%);
    border: 1px solid #ffcfd9;
    color: #b91c4a;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: none;        /* defeat parent .form-field uppercase */
    letter-spacing: .2px;
    box-shadow: 0 1px 2px rgba(185, 28, 74, 0.08);
    transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
    animation: countries-chip-pop .22s cubic-bezier(.21,.62,.32,1) both;
}
.countries-picker .countries-picker-chip:hover {
    background: linear-gradient(135deg, #ffe5ec 0%, #ffd1dc 100%);
    border-color: #ffb6c5;
    box-shadow: 0 3px 8px -2px rgba(185, 28, 74, 0.18);
}
@keyframes countries-chip-pop {
    from { opacity: 0; transform: translateY(-2px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

.countries-picker .countries-picker-chip-flag {
    font-size: 14px;
    line-height: 1;
}

.countries-picker .countries-picker-chip-x {
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(185, 28, 74, 0.12);
    color: #b91c4a;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, color .15s, transform .15s;
}
.countries-picker .countries-picker-chip-x:hover {
    background: #b91c4a;
    color: #fff;
    transform: scale(1.08);
}
.countries-picker .countries-picker-chip-x:active { transform: scale(0.95); }

/* Optional "Clear all" link, rendered by the JS when ≥2 chips exist.
   Sits inline at the end of the chip row, just before the live input. */
.countries-picker .countries-picker-clear {
    background: transparent;
    border: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    align-self: center;
    transition: color .15s;
}
.countries-picker .countries-picker-clear:hover { color: #b91c4a; }