/* Roominusa new SPA layer. It intentionally mirrors the old KYC visual system. */
:root {
    --primary: #1a56db;
    --primary-hover: #1e40af;
    --primary-light: #3b82f6;
    --primary-ultra-light: #eff6ff;
    --primary-border: #dbeafe;
    --primary-glow: rgba(26, 86, 219, 0.15);
    --primary-shadow: rgba(26, 86, 219, 0.25);
    --accent-success: #10b981;
    --accent-success-light: #d1fae5;
    --accent-warning: #f59e0b;
    --accent-warning-light: #fef3c7;
    --accent-danger: #ef4444;
    --accent-danger-light: #fee2e2;
    --bg-page: #f0f4f8;
    --bg-card: #ffffff;
    --bg-input: #f9fafb;
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html,
body,
main {
    min-height: 100dvh;
}

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
    font-family: inherit;
}

.wizard-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
}

.wizard-shell.is-fullscreen {
    padding: 0;
    align-items: stretch;
}

.application-form {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.application-form.is-fullscreen {
    max-width: 100%;
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.roominusa-header {
    padding: 18px 24px 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(26, 86, 219, 0.2);
}

.brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
}

.brand-subtitle {
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.form-banner {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.4px;
}

.form-body {
    padding: 24px 20px;
}

/* Column now that the illustration sits above the heading. min-height is kept so
   the card does not visibly shrink between the welcome step and the form step. */
.welcome-message {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

/* Fluid, not a fixed pixel cap: the art tracks the card's content width so it keeps
   the same proportions on a 320px phone and a 412px one. A px-only max-width made it
   fill 100% of a narrow card but only ~70% of a wide one, which read as "too small"
   on bigger phones. The cap only bites once the card stops growing (480px desktop). */
.welcome-art {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

.welcome-message h1 {
    margin: 0;
    max-width: 340px;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--text-heading);
}

.wizard-progress-bar {
    width: 100%;
    height: 4px;
    background: #e2e8f0;
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), #60a5fa);
    transition: width 450ms ease;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.indicator-circle {
    background: linear-gradient(135deg, var(--primary-ultra-light), #dbeafe);
    color: var(--primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.section-title {
    color: var(--primary);
    font-size: 1.08rem;
    font-weight: 800;
    margin: 0;
}

.form-input-premium {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    font-size: 0.95rem;
    background: var(--bg-input);
    color: var(--text-heading);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    width: 100%;
}

.form-input-premium:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
    background: #fff;
    outline: none;
}

.form-input-premium.is-invalid {
    border-color: var(--accent-danger);
    background: #fef2f2;
}

.form-label-premium {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

.invalid-feedback {
    display: block;
    min-height: 18px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Buttons read --btn, which the admin sets independently of the brand colour.
   The var() fallbacks keep this stylesheet correct on its own. */
.primary-action {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--btn, var(--primary)), var(--btn-light, var(--primary-light)));
    color: #fff;
    padding: 14px 22px;
    font-weight: 800;
    box-shadow: 0 4px 14px var(--btn-shadow, rgba(26, 86, 219, 0.3));
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.primary-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px var(--btn-shadow, rgba(26, 86, 219, 0.35));
}

.primary-action:disabled,
.secondary-action:disabled {
    opacity: 0.65;
    transform: none;
    cursor: wait;
}

.secondary-action {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--text-body);
    padding: 12px 18px;
    font-weight: 800;
}

/* Forward action ("Next", "Try again") — carries the admin button colour. */
.success-action {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--btn, var(--primary)), var(--btn-light, var(--primary-light)));
    color: #fff;
    padding: 12px 18px;
    font-weight: 800;
    box-shadow: 0 4px 14px var(--btn-shadow, rgba(26, 86, 219, 0.3));
}

/* Paired with .success-action on the review screens. Deliberately neutral rather
   than themed: if both buttons carried --btn they would be indistinguishable. */
.warning-action {
    border: 1px solid var(--border-hover);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--text-body);
    padding: 12px 18px;
    font-weight: 800;
}

.warning-action:hover {
    background: #f1f5f9;
    border-color: var(--text-muted);
}

.step-copy {
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 0.94rem;
}

.upload-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sample-frame {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #f8fafc;
    padding: 14px;
    text-align: center;
    margin: 18px 0;
}

.sample-frame img {
    max-width: 100%;
    max-height: 230px;
    object-fit: contain;
    border-radius: 12px;
}

.photo-ready-step {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.photo-ready-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--primary-ultra-light), #dbeafe);
    color: var(--primary);
    font-size: 1.5rem;
}

.photo-ready-title {
    margin: 0 0 4px;
    color: var(--text-heading);
    font-size: 1rem;
    font-weight: 800;
}

.photo-ready-copy {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}

.photo-ready-sample {
    display: block;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    margin: 15px auto 20px;
}

.photo-ready-sample-selfie {
    max-height: 300px;
}

.ready-action {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--btn, var(--primary)), var(--btn-light, var(--primary-light)));
    color: #fff;
    padding: 12px 40px;
    font-weight: 800;
    box-shadow: 0 8px 20px var(--btn-shadow, rgba(26, 86, 219, 0.3));
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 192px;
}

.ready-action-main {
    font-size: 1.05rem;
    line-height: 1.2;
}

.ready-action-sub {
    font-size: 0.85rem;
    opacity: .92;
    line-height: 1.35;
}

.video-instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instruction-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary-ultra-light), #dbeafe);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 1.2rem;
}

.instruction-title {
    margin-bottom: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading);
}

.instruction-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.instruction-block {
    width: 100%;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-block__inner {
    transition: opacity 0.4s ease;
}

.instruction-block__inner.fade-in {
    opacity: 1;
}

.instruction-block__inner.fade-out {
    opacity: 0;
}

.instruction-block img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.instruction-list {
    padding-left: 20px;
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.instruction-text {
    font-size: 0.85rem;
}

.upload-status {
    border: 1px solid var(--border);
    background: #f8fafc;
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-top: 14px;
}

.upload-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 800;
}

.progress-track {
    height: 7px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-top: 9px;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 180ms ease;
}

.preview-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(38dvh, 420px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.congrats-overlay,
.thank-you-overlay,
.email-popup-overlay,
.photo-instruction-overlay,
.reload-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.email-popup-overlay {
    opacity: 0;
    transition: opacity .25s ease;
}

.email-popup-overlay.visible {
    opacity: 1;
}

.congrats-card,
.email-popup-card,
.photo-instruction-card,
.reload-prompt-card {
    width: min(400px, 100%);
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 30px 24px;
    text-align: center;
}

/* Next Step Modal Custom Styles */
.congrats-overlay {
    /* match .wizard-shell horizontal padding so the card lines up with .application-form */
    padding: 20px 15px;
}

.congrats-card.next-step-card {
    /* same footprint as .application-form */
    width: 100%;
    max-width: 480px;
    max-height: min(94vh, 780px);
    overflow-y: auto;
    padding: 44px 26px 40px;
    border-radius: 18px;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.congrats-card.next-step-card::-webkit-scrollbar {
    width: 4px;
}

.congrats-card.next-step-card::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.direct-secure-box {
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 16px;
    text-align: center;
}

.direct-secure-content {
    width: 100%;
}

.direct-secure-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #1d4ed8;
    margin: 0 0 6px 0;
    line-height: 1.3;
    letter-spacing: -0.1px;
}

.direct-secure-desc {
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
    margin: 0;
}

.congrats-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.congrats-close-btn:hover {
    color: #334155;
    background: #f1f5f9;
}

/* ==========================================================================
   New Thank You Modal Styles (Matching Image 2)
   ========================================================================== */
.congrats-card.thank-you-card,
.thank-you-card {
    width: 100%;
    max-width: 440px;
    max-height: min(92vh, 680px);
    overflow-y: auto;
    padding: 32px 26px 28px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    background: #ffffff;
    text-align: center;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.thank-you-card::-webkit-scrollbar {
    width: 4px;
}

.thank-you-card::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.thank-you-check-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e6f4ea;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.thank-you-main-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-heading, #0f172a);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.thank-you-main-sub {
    font-size: 0.92rem;
    color: var(--text-secondary, #64748b);
    margin: 0 0 22px;
    line-height: 1.45;
}

.thank-you-next-box {
    background: #f0f6ff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    margin-bottom: 22px;
}

.thank-you-next-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: var(--primary, #1a56db);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.thank-you-next-text {
    flex: 1;
    min-width: 0;
}

.thank-you-next-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-heading, #0f172a);
    margin-bottom: 3px;
    line-height: 1.3;
}

.thank-you-next-desc {
    font-size: 0.84rem;
    color: var(--text-body, #475569);
    line-height: 1.45;
}

.thank-you-inbox-note {
    text-align: center;
    margin-bottom: 24px;
}

.thank-you-inbox-heading {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-heading, #1e293b);
    margin: 0 0 4px;
    line-height: 1.3;
}

.thank-you-inbox-copy {
    font-size: 0.86rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
    line-height: 1.45;
}

.thank-you-done-btn {
    width: 100%;
    background: var(--btn, var(--primary, #1a56db));
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px var(--btn-shadow, rgba(26, 86, 219, 0.35));
    transition: background 0.15s ease, transform 0.1s ease;
}

.thank-you-done-btn:hover {
    background: var(--btn-hover, var(--primary-hover, #1e40af));
    transform: translateY(-1px);
}

.thank-you-done-btn:active {
    transform: translateY(0);
}

@media (max-width: 440px) {
    .thank-you-card {
        padding: 26px 20px 22px;
        border-radius: 20px;
    }

    .thank-you-main-title {
        font-size: 1.3rem;
    }

    .thank-you-main-sub {
        font-size: 0.88rem;
    }
}

.next-step-header-box {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 16px 6px 10px;
    margin-bottom: 0;
    text-align: center;
    box-shadow: none;
}

.next-step-header-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--primary-light);
    box-shadow: 0 3px 10px var(--primary-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.next-step-title {
    font-size: 1.48rem;
    font-weight: 800;
    color: var(--primary-hover);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.next-step-subtitle {
    font-size: 1.02rem;
    color: var(--primary-hover);
    font-weight: 600;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 460px;
}

.next-step-header-box .next-step-btn {
    margin: 30px auto 0;
}

/* Reward Promo Box - Compact Secondary Extra Feature Layout */
.reward-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.reward-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.reward-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.reward-item-icon svg {
    width: 15px;
    height: 15px;
}

.reward-item-content {
    flex: 1;
    min-width: 0;
}

.reward-item-top .reward-item-content {
    padding-right: 0;
}

.reward-item-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 2px;
    line-height: 1.2;
}

.reward-item-text {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
}

.reward-highlight {
    color: #1d4ed8;
    font-weight: 700;
}

.reward-item-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
    position: relative;
    z-index: 2;
}

/* Soft Transparent Background Overlay Gift Card Graphic */
.reward-box-graphic {
    position: absolute;
    right: -10px;
    top: -8px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.08;
    /* Soft subtle watermark */
}

.gift-card-graphic {
    width: 125px;
    height: 78px;
    background: linear-gradient(135deg, #0b1e36 0%, #16365c 50%, #0d2545 100%);
    border-radius: 9px;
    box-shadow: 0 6px 16px rgba(11, 30, 54, 0.22);
    position: relative;
    overflow: hidden;
    transform: rotate(-10deg);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.gift-card-graphic:hover {
    transform: rotate(0deg) scale(1.03);
}

.gift-card-graphic:hover {
    transform: rotate(0deg) scale(1.03);
}

.gift-card-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.gift-card-ribbon-v {
    position: absolute;
    right: 25px;
    top: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
    opacity: 0.85;
}

.gift-card-ribbon-h {
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    height: 10px;
    background: linear-gradient(180deg, #d97706, #fbbf24, #d97706);
    opacity: 0.65;
}

.gift-card-bow {
    position: absolute;
    top: 10px;
    right: 19px;
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.gift-card-text-wrap {
    z-index: 2;
    text-align: center;
    transform: translateY(4px);
}

.gift-card-label {
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1px;
}

.gift-card-amount {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Brand Section Header */
.brands-divider {
    display: flex;
    align-items: center;
    margin: 12px 0 10px;
}

.brands-divider::before,
.brands-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.brands-divider span {
    padding: 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.brand-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease;
}

.brand-item:hover {
    border-color: #cbd5e1;
}

.brands-subtext {
    font-size: 0.72rem;
    color: #64748b;
    margin: 0 0 12px;
}

/* Trust Row Card Frame & Icon Alignment */
.trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 6px;
    margin-bottom: 14px;
}

.trust-col {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: flex-start;
    padding: 2px 4px;
}

.trust-icon-box {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 800;
}

.trust-text {
    text-align: left;
    min-width: 0;
}

.trust-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
}

.trust-desc {
    font-size: 0.63rem;
    color: #64748b;
    line-height: 1.15;
    white-space: nowrap;
}

/* Action Button */
.next-step-btn {
    /* sized to its label, centered, never wider than the card */
    width: auto;
    min-width: 200px;
    max-width: 100%;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--btn-light, var(--primary-light)) 0%, var(--btn, var(--primary)) 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 17px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--btn-shadow, var(--primary-shadow));
    transition: all 0.2s ease;
}

.next-step-btn:hover {
    background: linear-gradient(180deg, var(--btn, var(--primary)) 0%, var(--btn-hover, var(--primary-hover)) 100%);
    box-shadow: 0 6px 16px var(--btn-shadow, var(--primary-shadow));
    transform: translateY(-1px);
}

.next-step-btn:active {
    transform: translateY(0);
}

/* Footer note */
.next-step-footer {
    font-size: 0.67rem;
    color: #94a3b8;
    line-height: 1.35;
    margin: 10px auto 0;
    max-width: 580px;
}

/* Mobile responsiveness & height optimization */
@media (max-width: 620px) {
    .congrats-card.next-step-card {
        padding: 34px 16px 30px;
        border-radius: 16px;
        /* stays flush with .application-form (overlay supplies the 15px gutters) */
        width: 100%;
    }

    .next-step-header-box {
        padding: 12px 4px 6px;
        margin-bottom: 0;
    }

    .next-step-header-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }

    .next-step-header-icon svg {
        width: 24px;
        height: 24px;
    }

    .next-step-title {
        font-size: 1.25rem;
    }

    .next-step-subtitle {
        font-size: 0.94rem;
        margin-bottom: 10px;
    }

    .reward-box {
        padding: 12px 14px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .reward-item-icon {
        width: 32px;
        height: 32px;
    }

    .reward-item-icon svg {
        width: 16px;
        height: 16px;
    }

    .reward-item-title {
        font-size: 0.86rem;
        margin-bottom: 2px;
    }

    .reward-item-text {
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .reward-item-top .reward-item-content {
        padding-right: 0;
    }

    .reward-box-graphic {
        right: -10px;
        top: -6px;
        opacity: 0.18;
    }

    .gift-card-graphic {
        width: 105px;
        height: 65px;
        transform: rotate(-10deg);
    }

    .gift-card-amount {
        font-size: 0.72rem;
    }

    .reward-item-divider {
        margin: 8px 0;
    }

    .brands-divider {
        margin: 8px 0 6px;
    }

    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .brand-item {
        height: 38px;
        padding: 2px;
    }

    .brand-item svg {
        max-width: 100%;
        height: auto;
    }

    .brands-subtext {
        font-size: 0.66rem;
        margin-bottom: 8px;
    }

    .trust-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 10px;
        padding: 8px 10px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .trust-col {
        justify-content: flex-start;
    }

    .trust-icon-box {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .trust-title {
        font-size: 0.7rem;
    }

    .trust-desc {
        font-size: 0.6rem;
    }

    .next-step-btn {
        padding: 15px 32px;
        font-size: 1rem;
    }

    .next-step-footer {
        font-size: 0.62rem;
        margin-top: 8px;
    }
}

.photo-instruction-card {
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.photo-instruction-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

.photo-instruction-copy {
    margin: 0 0 30px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.reload-prompt-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: var(--accent-warning-light);
    color: var(--accent-warning);
    font-size: 1.6rem;
}

.reload-prompt-card h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
}

.reload-prompt-card p {
    margin: 0 0 22px;
    color: var(--text-muted);
}

.reload-prompt-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
}

.status-dot.uploading {
    background: var(--accent-warning);
    animation: pulse 1s infinite;
}

.status-dot.uploaded {
    background: var(--accent-success);
}

.status-dot.error {
    background: var(--accent-danger);
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.75;
    }
}

.page-video {
    height: 100% !important;
    position: relative;
    background: #020617;
    color: #fff;
    flex: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.liveness-video-wrap {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
}

#webcam {
    z-index: 1 !important;
    flex-grow: initial !important;
    max-height: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    background: #020617;
}

/* Mirror the live webcam preview at ALL viewport sizes (selfie view). The reference
   project mirrors on both breakpoints (desktop `video` + mobile `.page-video #webcam`);
   our old code only mirrored <=991px, so on wide/desktop viewports the preview was raw
   while the ring stayed in screen space — making "turn right" light the right arc while
   the unmirrored face pointed left. Detection + recording run on the raw frame; only the
   preview is flipped, which is what makes left/right read naturally against the ring. */
.page-video #webcam {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.liveness-close-btn {
    z-index: 999;
    color: #fff;
}

.liveness-timer-row,
.liveness-not-recognized {
    z-index: 999;
    color: #fff;
    padding-top: 1.5rem;
    margin: 0;
    text-align: center;
    min-height: 64px;
}

/* Shown in place of TRY AGAIN while the app is getting ready for another attempt.
   Occupies roughly the button's footprint so the panel doesn't jump when they swap. */
.liveness-retry-prep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.liveness-retry-prep[hidden] {
    display: none;
}

.liveness-retry-prep__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #4ade80;
    animation: livenessSpin 0.8s linear infinite;
}

/* Inline spinner for a button that is waiting on a background upload
   (e.g. Next pressed before the ID photo finished uploading). */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: livenessSpin 0.8s linear infinite;
}

.liveness-icon-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 0;
    margin-left: 6px;
    line-height: 1;
    cursor: pointer;
}

.video-position__text {
    position: absolute;
    bottom: 10px;
    width: 100%;
    left: 0;
    padding: 0 15px;
    z-index: 99;
    text-align: center;
    pointer-events: none;
}

.video-position__text h5 {
    font-size: 1.25rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hold-timer-top {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    font-size: 2rem;
    font-weight: 900;
    color: #4ade80;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 28px;
    border-radius: 30px;
    border: 2px solid rgba(74, 222, 128, 0.4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    animation: holdPulse 1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes holdPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 0.85;
    }
}

/* Loading overlay shown over the camera while the MediaPipe model + WASM download
   and initialize. Fades out (via .is-hidden) the moment the landmarker is ready. */
.liveness-loading {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 0 1.5rem;
    text-align: center;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.35s ease;
}

.liveness-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.liveness-loading__spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #4ade80;
    animation: livenessSpin 0.9s linear infinite;
}

.liveness-loading__text {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    max-width: 320px;
}

@keyframes livenessSpin {
    to {
        transform: rotate(360deg);
    }
}

#webcam-wrapper {
    position: absolute;
    width: 200px;
    height: 250px;
    max-width: 90%;
    max-height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 100vmax rgba(50, 50, 50, 0.95);
    border-radius: 50%;
    z-index: 9;
}

.webcam-wrapper__inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.webcam-wrapper__top,
.webcam-wrapper__bottom,
.webcam-wrapper__left,
.webcam-wrapper__right {
    position: absolute;
    border: 8px solid #b4b5b3;
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.webcam-wrapper__top,
.webcam-wrapper__bottom {
    left: -10px;
    width: calc(100% + 20px);
    height: 260px;
    border-radius: 45%;
    border-left-color: transparent;
    border-right-color: transparent;
}

.webcam-wrapper__top {
    top: -20px;
    border-bottom-color: transparent;
}

.webcam-wrapper__bottom {
    bottom: -20px;
    border-top-color: transparent;
}

.webcam-wrapper__left,
.webcam-wrapper__right {
    top: 0;
    width: 210px;
    height: 100%;
    border-radius: 39%;
    border-bottom-color: transparent;
    border-top-color: transparent;
}

.webcam-wrapper__left {
    left: -15px;
    border-right-color: transparent;
}

.webcam-wrapper__right {
    right: -15px;
    border-left-color: transparent;
}

.success--left {
    border-left-color: green !important;
}

.success--right {
    border-right-color: green !important;
}

.success--top {
    border-top-color: green !important;
}

.success--bottom {
    border-bottom-color: green !important;
}

.error--left {
    border-left-color: red !important;
}

.error--right {
    border-right-color: red !important;
}

.error--top {
    border-top-color: red !important;
}

.error--bottom {
    border-bottom-color: red !important;
}

.flash--left {
    border-left-color: orange !important;
    animation: flashBlink .6s ease-in-out;
}

.flash--right {
    border-right-color: orange !important;
    animation: flashBlink .6s ease-in-out;
}

.flash--top {
    border-top-color: orange !important;
    animation: flashBlink .6s ease-in-out;
}

.flash--bottom {
    border-bottom-color: orange !important;
    animation: flashBlink .6s ease-in-out;
}

@keyframes flashBlink {
    0% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
}

.liveness-upload-sink {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Processing Overlay (after liveness recording) ── */
.processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    animation: processingFadeIn 0.4s ease;
    padding: 24px;
}

@keyframes processingFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.processing-circle-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 28px;
}

.processing-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}

.processing-circle-fill {
    fill: none;
    stroke: url(#processingGradient);
    stroke-width: 6;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.processing-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
}

.processing-percent span {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 1px;
}

.processing-title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 8px;
    text-align: center;
}

.processing-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.88rem;
    text-align: center;
    margin: 0 0 6px;
    line-height: 1.5;
}

.processing-dots::after {
    content: '';
    animation: processingDots 1.5s steps(4, end) infinite;
}

/* Network Stability Assurance Error Card (Dark Theme) */
.network-assurance-card {
    width: min(380px, 92vw);
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 20px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    position: relative;
    box-sizing: border-box;
}

.network-shield-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
}

.network-shield-outer {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.network-shield-inner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 6px #34d399;
}

.sparkle-1 {
    top: 4px;
    left: -6px;
}

.sparkle-2 {
    top: 2px;
    right: -4px;
    width: 3px;
    height: 3px;
}

.sparkle-3 {
    bottom: 6px;
    right: -8px;
}

.network-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.network-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #10b981;
    margin: 0 0 12px;
}

.network-accent-line {
    width: 28px;
    height: 3px;
    background: #10b981;
    border-radius: 2px;
    margin: 0 auto 18px;
}

.network-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0 0 24px;
}

.network-continue-btn {
    width: 100%;
    background: linear-gradient(180deg, var(--btn-light, var(--primary-light)) 0%, var(--btn, var(--primary)) 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--btn-shadow, rgba(26, 86, 219, 0.3));
    transition: all 0.2s ease;
}

.network-continue-btn:hover {
    background: linear-gradient(180deg, var(--btn, var(--primary)) 0%, var(--btn-hover, var(--primary-hover)) 100%);
    box-shadow: 0 6px 18px var(--btn-shadow, rgba(26, 86, 219, 0.4));
    transform: translateY(-1px);
}

.network-continue-btn:active {
    transform: translateY(0);
}

@keyframes processingDots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }
}

.processing-warning {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 12px;
    padding: 10px 16px;
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 700;
}


.complete-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-success-light);
    color: var(--accent-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    margin: 0 auto 20px;
}

.toast-stack {
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 20000;
    display: grid;
    gap: 10px;
}

.app-toast {
    width: min(340px, calc(100vw - 32px));
    border-radius: 14px;
    background: #fff;
    color: var(--text-heading);
    box-shadow: var(--shadow-xl);
    border-left: 4px solid var(--primary);
    padding: 13px 14px;
    font-size: 0.9rem;
    font-weight: 700;
}

.app-toast.success {
    border-left-color: var(--accent-success);
}

.app-toast.error {
    border-left-color: var(--accent-danger);
}

.app-toast.warning {
    border-left-color: var(--accent-warning);
}

@media (max-width: 575.98px) {
    .wizard-shell {
        padding: 10px;
        align-items: flex-start;
    }

    .application-form {
        border-radius: var(--radius-lg);
    }

    .form-body {
        padding: 18px 16px;
    }

    .upload-actions {
        grid-template-columns: 1fr;
    }

    .primary-action,
    .secondary-action,
    .success-action,
    .warning-action {
        width: 100%;
    }

    .welcome-message {
        min-height: 260px;
        gap: 14px;
    }

    /* ── Welcome step fills the device screen ──
       .wizard-shell is align-items:flex-start on phones (so the tall form steps scroll
       from the top). That left the short welcome card stranded in the upper third with
       dead space beneath it, so stretch just this step to the full viewport height and
       let the content distribute down it.
       !important is required: custom.css pins .application-form to
       min-height/height:auto !important, which would otherwise win. */
    .wizard-shell.is-welcome {
        align-items: stretch;
        /* This padding IS the top/bottom safe margin, and it is the only vertical
           spacing in play — the card's own margin is zeroed below so the height maths
           depends on one value declared right here, not on custom.css's margin too. */
        padding: 14px 10px;
    }

    .application-form.is-welcome {
        display: flex;
        flex-direction: column;
        margin: 0 auto !important;
        /* 100dvh less the 14px shell padding above and below, so the card ends exactly
           at the safe margin instead of running off-screen. dvh (not vh) so a mobile
           browser's collapsing address bar cannot overshoot the viewport. */
        min-height: calc(100dvh - 28px) !important;
    }

    .application-form.is-welcome .form-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* Absorbs the leftover height, which centres the art + heading in the free space
       and settles the CTA at the bottom of the screen. */
    .application-form.is-welcome .welcome-message {
        flex: 1 1 auto;
        min-height: 0;
    }

    #webcam {
        min-height: 0;
    }

    /* Tighter hero chrome on phones, so the single-line title has room to spare. */
    .selfie-hero {
        padding: 14px;
        gap: 10px;
    }

    .selfie-hero__check {
        width: 36px;
        height: 36px;
    }
}

/* ===========================================================================
   Profile Booster card (optional, shown on the KYC success screen) — premium.
   Inline-SVG iconography, brand-blue (#146EB4) accents, soft layered depth.
   =========================================================================== */
/* ── "Let's see you!" selfie step (post-completion) ── */
.selfie-complete {
    padding: 0 0 8px;
}

.selfie-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 18px;
    margin: 4px 0 18px;
    box-shadow: 0 14px 30px -14px var(--primary-shadow);
}

.selfie-hero__check {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* min-width:0 lets this flex child shrink below its content width instead of
   forcing the hero to overflow. */
.selfie-hero__text {
    min-width: 0;
}

/* The title must stay on one line down to ~320px. nowrap alone would overflow, so
   the size tracks the viewport and only caps at the desktop 1.05rem. */
.selfie-hero__title {
    font-size: clamp(0.72rem, 3.6vw, 1.05rem);
    white-space: nowrap;
    /* Safety net only: the clamp above already fits down to ~320px, so this never
       engages on real devices — it just stops a narrower screen breaking the layout. */
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}

.selfie-hero__sub {
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
}

.selfie-hero__sub strong {
    font-weight: 700;
    color: #fff;
}

.selfie-boost {
    text-align: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 24px 20px 22px;
    margin: 0 0 16px;
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.22);
}

.selfie-boost__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf1ff;
    color: #1f5eea;
}

.selfie-boost__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.selfie-boost__lead {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 auto 18px;
    max-width: 34ch;
}

.selfie-examples {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0 0 18px;
}

.selfie-example {
    flex: 1 1 0;
    max-width: 104px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: #eaf1ff;
    color: #9db8ee;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 10px 10px 0;
}

.selfie-dropzone {
    border: 2px dashed #b9cdf5;
    border-radius: 16px;
    background: #f7faff;
    padding: 20px 16px;
    margin: 0 0 14px;
}

.selfie-dropzone__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f5eea;
    color: #fff;
    box-shadow: 0 10px 20px -8px rgba(31, 94, 234, 0.6);
}

.selfie-dropzone__title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
}

.selfie-dropzone__hint {
    font-size: 0.76rem;
    color: #94a3b8;
    margin: 0 0 14px;
}

.selfie-dropzone__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn, var(--primary));
    color: #fff;
    border: none;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 11px 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 22px -10px var(--btn-shadow, rgba(26, 86, 219, 0.3));
    transition: filter 150ms ease, transform 120ms ease;
}

.selfie-dropzone__btn:hover {
    filter: brightness(1.06);
}

.selfie-dropzone__btn:active {
    transform: translateY(1px);
}

.selfie-note {
    display: flex;
    gap: 10px;
    text-align: left;
    align-items: flex-start;
    border-radius: 12px;
    padding: 13px 14px;
    margin-top: 10px;
}

.selfie-note p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #475569;
}

.selfie-note p strong {
    color: #0f172a;
}

.selfie-note__icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.selfie-note--why {
    background: #eef4ff;
}

.selfie-note--why .selfie-note__icon,
.selfie-note--why p strong {
    color: #1f5eea;
}

.selfie-note--private {
    background: #f1f5f9;
}

.selfie-note--private .selfie-note__icon {
    color: #64748b;
}

/* Center the staged selfie thumbnails within the new card */
.selfie-boost .boost-thumbs {
    justify-content: center;
}

.profile-booster {
    --pb-blue: #146EB4;
    --pb-blue-dark: #0f5689;
    position: relative;
    text-align: left;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    padding: 26px 22px 22px;
    margin: 18px 0 8px;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.05);
}

.profile-booster__badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-blue) 0%, #2a8fd8 100%);
    box-shadow: 0 10px 20px -6px rgba(20, 110, 180, 0.55);
    margin-bottom: 16px;
}

.profile-booster__title {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}

.profile-booster__chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(20, 110, 180, 0.1);
    color: var(--pb-blue);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.profile-booster__body {
    font-size: 0.9rem;
    line-height: 1.62;
    color: #4b5563;
    margin: 0 0 18px;
}

/* Selfie step only: Samsung's camera app ignores capture="user" and opens the
   rear lens, and no API can override it, so the user is told to flip. */
.photo-instruction-flip {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    padding: 11px 13px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    text-align: left;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #92400e;
}

.photo-instruction-flip i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 1rem;
}

/* Upload dropzone (triggers the hidden file input) */
.profile-booster__dropzone {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: var(--pb-blue);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
}

.profile-booster__dropzone:hover {
    border-color: var(--pb-blue);
    background: #f5faff;
}

.profile-booster__dropzone:active {
    transform: scale(0.995);
}

.profile-booster__dropzone-text {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
}

.profile-booster__dropzone-text small {
    font-size: 0.74rem;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 2px;
}

/* Thumbnail grid */
.boost-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.boost-thumbs:not(:empty) {
    margin-top: 12px;
}

.boost-thumb {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f7;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    animation: boost-thumb-in 180ms ease;
}

@keyframes boost-thumb-in {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.boost-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.boost-thumb__remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease;
}

.boost-thumb__remove:hover {
    background: #dc2626;
}

.boost-thumb__ok {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boost-thumb.is-uploaded::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px #16a34a;
    border-radius: 12px;
    pointer-events: none;
}

.boost-thumb__spin {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.55);
    border-top-color: #fff;
    border-radius: 50%;
    background: transparent;
    animation: profile-booster-spin 0.7s linear infinite;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.28);
}

/* Social link input with leading icon */
.profile-booster__input-wrap {
    position: relative;
    margin-top: 16px;
}

.profile-booster__input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.profile-booster__input {
    width: 100%;
    font-size: 0.9rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px 12px 40px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.profile-booster__input::placeholder {
    color: #9ca3af;
}

.profile-booster__input:focus {
    outline: none;
    border-color: var(--pb-blue);
    box-shadow: 0 0 0 3px rgba(20, 110, 180, 0.15);
}

.profile-booster__error {
    color: #dc2626;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 10px 0 0;
}

/* Brand-blue gradient CTA */
.profile-booster__cta {
    width: 100%;
    margin-top: 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pb-blue) 0%, var(--pb-blue-dark) 100%);
    color: #fff;
    font-size: 0.97rem;
    font-weight: 700;
    padding: 14px 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 12px 22px -10px rgba(20, 110, 180, 0.7);
    transition: filter 150ms ease, transform 120ms ease, opacity 150ms ease;
}

.profile-booster__cta:hover:not(:disabled) {
    filter: brightness(1.06);
}

.profile-booster__cta:active:not(:disabled) {
    transform: translateY(1px);
}

.profile-booster__cta:disabled {
    opacity: 0.8;
    cursor: default;
}

.profile-booster__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: profile-booster-spin 0.7s linear infinite;
}

@keyframes profile-booster-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Thank-you state */
.profile-booster.is-done {
    text-align: center;
}

.profile-booster__success {
    text-align: center;
    padding: 10px 0 4px;
    animation: boost-thumb-in 220ms ease;
}

.profile-booster__check {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================================================
   Success screen — compact confirmation + hero "boost" treatment.
   Goal: shrink the "you're done" signal and pull the eye to the optional card.
   All classes here are scoped to the success screen; shared classes untouched.
   =========================================================================== */

/* Compact green confirmation banner (replaces the large icon + long copy) */
.submit-confirm {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: var(--accent-success-light);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
}

.submit-confirm__check {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent-success);
    flex-shrink: 0;
}

.submit-confirm__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-body);
    margin: 0 0 2px;
}

.submit-confirm__note {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Connector cue: an animated downward chevron that flows the eye into the card */
.boost-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 6px 0 2px;
    color: #146EB4;
}

.boost-connector__line {
    width: 2px;
    height: 18px;
    background: linear-gradient(#cbd5e1, #146EB4);
    border-radius: 2px;
}

.boost-connector__chevron {
    font-size: 1.05rem;
    line-height: 1;
    animation: boost-bounce 1.4s ease-in-out infinite;
}

@keyframes boost-bounce {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(3px);
    }
}

/* Hero treatment: tinted background, stronger depth, gentle pulsing ring */
.profile-booster--hero {
    background: linear-gradient(180deg, #f5faff 0%, #eaf3ff 100%);
    border: 1.5px solid rgba(20, 110, 180, 0.28);
    animation: boost-card-pulse 2.6s ease-in-out infinite;
}

@keyframes boost-card-pulse {

    0%,
    100% {
        box-shadow: 0 22px 48px -20px rgba(20, 110, 180, 0.40), 0 0 0 0 rgba(20, 110, 180, 0);
    }

    50% {
        box-shadow: 0 22px 48px -20px rgba(20, 110, 180, 0.55), 0 0 0 4px rgba(20, 110, 180, 0.12);
    }
}

/* Pulsing lightning badge — the main eye magnet */
.profile-booster--hero .profile-booster__badge {
    animation: boost-badge-pulse 2s ease-in-out infinite;
}

@keyframes boost-badge-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 20px -6px rgba(20, 110, 180, 0.55), 0 0 0 0 rgba(20, 110, 180, 0.35);
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 12px 24px -6px rgba(20, 110, 180, 0.65), 0 0 0 10px rgba(20, 110, 180, 0);
    }
}

/* De-emphasize the Finish button so the boost card stays the focal action */
.submit-complete__finish {
    margin-top: 14px;
    opacity: 0.7;
}

/* Emphasize the Finish button when at least two photos are uploaded */
.submit-complete__finish.primary-action {
    opacity: 1;
    display: inline-block;
    min-width: 120px;
}

/* Goal met after saving -> stop all motion (no nagging) */
.profile-booster.is-done,
.profile-booster.is-done .profile-booster__badge {
    animation: none;
}

/* Accessibility: respect reduced-motion (card stays the focal point, just static) */
@media (prefers-reduced-motion: reduce) {

    .profile-booster--hero,
    .profile-booster--hero .profile-booster__badge,
    .boost-connector__chevron {
        animation: none;
    }
}