/* Company portal form — shared validation, hero, and stepper styles */

/*
    Bootstrap's reboot sets `label { display: inline-block }` outside any cascade layer, and an
    unlayered rule wins over Tailwind's layered utilities no matter the specificity. Without this
    a `<label class="block">` field flows inline and sits beside the next field instead of
    stacking. Restore the display utilities for labels only.
*/
label.block { display: block; }
label.flex { display: flex; }
label.inline-flex { display: inline-flex; }
label.grid { display: grid; }
label.hidden { display: none; }

.logo-white {
    filter: brightness(0) invert(1);
}

@keyframes heroDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--drift, -720px)); }
}

.hero-wave {
    animation-name: heroDrift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .hero-wave {
        animation: none;
    }
}

/* Form field validation */
.field-control.is-invalid {
    border-color: #f43f5e !important;
    --tw-ring-color: #fecdd3;
}

.field-control.is-invalid:focus {
    border-color: #e11d48 !important;
    --tw-ring-color: #fecdd3;
}

#passportDropzone.is-invalid {
    background-color: #fff1f2;
    border-color: #f43f5e !important;
}

/* Document upload validation */
.company-portal-docs .cp-doc-card.is-invalid {
    border-color: #f43f5e;
    box-shadow: 0 0 0 1px #fecdd3;
}

.company-portal-docs .cp-doc-card__field-error {
    display: none;
    margin: 0 1.25rem 0.75rem;
    font-size: 0.75rem;
    color: #e11d48;
}

.company-portal-docs .cp-doc-card.is-invalid .cp-doc-card__field-error {
    display: block;
}

/* Form stepper */
.cp-form-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.cp-form-stepper__step {
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.cp-form-stepper__step--active {
    background-color: var(--cp-brand, #3b82f6);
    color: #fff;
}

.cp-form-stepper__step--complete {
    background-color: var(--cp-brand, #3b82f6);
    color: #fff;
}

.cp-form-stepper__step--pending {
    background-color: #e2e8f0;
    color: #64748b;
}

.cp-form-stepper__label {
    font-size: 0.75rem;
}

.cp-form-stepper__label--active {
    font-weight: 600;
    color: #334155;
}

.cp-form-stepper__label--pending {
    font-weight: 500;
    color: #94a3b8;
}

.cp-form-stepper__connector {
    height: 1px;
    width: 2rem;
}

.cp-form-stepper__connector--complete {
    background-color: color-mix(in srgb, var(--cp-brand, #3b82f6) 40%, transparent);
}

.cp-form-stepper__connector--pending {
    background-color: #e2e8f0;
}

/* Support footer */
.cp-support-footer {
    margin-top: auto;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    background-color: #eef3f8;
}

/* Colour field — swatch + hex (branding / theme pickers) */
.su-color-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.su-color-field__label {
    margin: 0;
    color: #8a9bb0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

.su-color-field__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.su-color-field__swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0.2rem;
    border: 1px solid #c5d4e8;
    border-radius: 0.55rem;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(197, 212, 232, 0.35);
}

.su-color-field__swatch:hover {
    border-color: #9eb6d4;
}

.su-color-field__swatch:focus-within {
    border-color: #7aa2d4;
    box-shadow: 0 0 0 3px rgba(122, 162, 212, 0.22);
}

.su-color-field__picker {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: var(--su-swatch, #ffffff);
    cursor: pointer;
}

.su-color-field__picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.su-color-field__picker::-webkit-color-swatch {
    border: 0;
    border-radius: 0.35rem;
}

.su-color-field__picker::-moz-color-swatch {
    border: 0;
    border-radius: 0.35rem;
}

.su-color-field__hex {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid #d5deea;
    border-radius: 0.55rem;
    background: #fff;
    color: #334155;
    font-size: 0.95rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.01em;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.su-color-field__hex::placeholder {
    color: #94a3b8;
}

.su-color-field__hex:hover:not(:disabled) {
    border-color: #b8c7db;
}

.su-color-field__hex:focus {
    border-color: #7aa2d4;
    box-shadow: 0 0 0 3px rgba(122, 162, 212, 0.18);
}

.su-color-field__hex:disabled,
.su-color-field__picker:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* Shared popup / page form fields */
.form-group,
.cd-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-full,
.cd-form-full {
    grid-column: 1 / -1;
}

.form-label,
.cd-form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.required,
.cd-req {
    color: #e74c3c;
}

.form-hint {
    margin: 0;
    font-size: 0.78rem;
    color: #687c94;
}

.form-input,
.cd-form-input {
    width: 100%;
    border: 1px solid var(--xp-border, #d1d5db);
    border-radius: 0.55rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    color: var(--xp-text, #1a1a2e);
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.form-input:focus,
.cd-form-input:focus {
    border-color: hsl(209deg 75% 17% / 42%);
}

.form-input.is-invalid,
.cd-form-input.is-invalid {
    border-color: #f43f5e;
}

.form-input.is-invalid:focus,
.cd-form-input.is-invalid:focus {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}

.form-input:disabled,
.cd-form-input:disabled {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

.form-error {
    margin: 0;
    font-size: 0.75rem;
    color: #e11d48;
}

.su-option-row__extra .su-field {
    display: contents;
}

/* Shared form field chrome — label, required badge, hint */
.su-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.su-field__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.su-field__required,
.su-required {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    background: var(--xpat-orange-light, #fff4f0);
    color: var(--xpat-orange-dark, #d94a1c);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.su-field--required .form-input,
.su-field--required .cd-form-input {
    border-color: #d7dee8;
}

.su-field--invalid .form-input,
.su-field--invalid .cd-form-input,
.su-field--invalid .form-input:focus,
.su-field--invalid .cd-form-input:focus,
.su-field--required .form-input:focus {
    border-color: #16345f82;
}

.su-field--invalid .form-input:focus,
.su-field--invalid .cd-form-input:focus {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

.su-field__hint {
    margin: 0;
    font-size: 0.78rem;
    color: #687c94;
}

/* Date picker / date range */
.su-date-input {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
}

.su-date-input__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.su-date-input__control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.su-date-input__field {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.6rem 2.55rem 0.6rem 0.75rem;
    border: 1px solid var(--xp-border, #d1d5db);
    border-radius: 0.55rem;
    background: #fff;
    color: var(--xp-text, #1a1a2e);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.25;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.su-date-input__field::placeholder {
    color: #8ea1b7;
}

.su-date-input__field:hover:not(:disabled) {
    border-color: hsl(210, 18%, 78%);
}

.su-date-input--open .su-date-input__field,
.su-date-input__field:focus {
    border-color: var(--xp-navy, #18334f);
    box-shadow: 0 0 0 3px rgba(24, 51, 79, 0.12);
}

.su-date-input--invalid .su-date-input__field,
.su-date-input--invalid .su-date-input__field:focus {
    border-color: #e11d48;
}

.su-date-input--invalid .su-date-input__field:focus {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

.su-date-input__field:disabled {
    background: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
}

.su-date-input__icon-btn {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: #8ea1b7;
    cursor: pointer;
}

.su-date-input__icon-btn:hover:not(:disabled) {
    background: var(--xp-hover, #f1f5f9);
    color: var(--xp-navy, #18334f);
}

.su-date-input__icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.su-date-input__icon {
    display: block;
}

.su-date-input--open {
    z-index: 20;
}

.su-date-input__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: transparent;
}

.su-date-input__panel {
    position: absolute;
    display: inline-table;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 1100;
    width: min(100%, 18.5rem);
    padding: 0.85rem 0.85rem 0.65rem;
    border: 1px solid var(--xp-border, #dce4ef);
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(18, 38, 63, 0.14);
    box-sizing: border-box;
}

.su-date-input--fixed-panel .su-date-input__panel {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    z-index: 1100;
}

.su-date-input__panel--range {
    width: max-content;
    max-width: calc(100vw - 2rem);
}

.su-date-input__months {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.su-date-input__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--xp-border, #e8eef5);
}

.su-date-input__footer-btn {
    margin: 0;
    padding: 0.2rem 0.35rem;
    border: 0;
    background: transparent;
    color: var(--xp-navy, #18334f);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0.35rem;
}

.su-date-input__footer-btn:hover {
    background: var(--xp-hover, #f1f5f9);
}

.su-date-input__footer-btn--accent {
    color: var(--xp-orange, rgb(241 89 46));
}

.su-date-input__hint {
    margin-left: auto;
    color: #8ea1b7;
    font-size: 0.75rem;
    font-weight: 500;
}

.su-date-month {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 16.5rem;
}

.su-date-month__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.su-date-month__title {
    flex: 1 1 auto;
    text-align: center;
    color: var(--xp-text, #1a1a2e);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.su-date-month__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: #687c94;
    cursor: pointer;
}

.su-date-month__nav:hover {
    background: var(--xp-hover, #f1f5f9);
    color: var(--xp-navy, #18334f);
}

.su-date-month__nav--spacer {
    visibility: hidden;
    pointer-events: none;
}

.su-date-month__nav-icon {
    display: block;
}

.su-date-month__weekdays,
.su-date-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
}

.su-date-month__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6rem;
    color: #8ea1b7;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.su-date-month__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--xp-text, #1a1a2e);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
}

.su-date-month__day-label {
    position: relative;
    z-index: 1;
}

.su-date-month__day:hover:not(:disabled):not(.su-date-month__day--selected):not(.su-date-month__day--range-start):not(.su-date-month__day--range-end) {
    background: var(--xp-hover, #eef3f8);
}

.su-date-month__day--outside {
    color: #b6c3d4;
    font-weight: 400;
}

.su-date-month__day--today:not(.su-date-month__day--selected):not(.su-date-month__day--range-start):not(.su-date-month__day--range-end) {
    color: var(--xp-navy, #18334f);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px rgba(24, 51, 79, 0.28);
}

.su-date-month__day--in-range {
    border-radius: 0;
    background: rgba(24, 51, 79, 0.08);
}

.su-date-month__day--range-start,
.su-date-month__day--range-end,
.su-date-month__day--selected {
    background: var(--xp-navy, #18334f);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.su-date-month__day--range-start {
    border-radius: 9999px 0 0 9999px;
}

.su-date-month__day--range-end {
    border-radius: 0 9999px 9999px 0;
}

.su-date-month__day--range-start.su-date-month__day--range-end,
.su-date-month__day--selected {
    border-radius: 9999px;
}

.su-date-month__day--disabled,
.su-date-month__day:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 40rem) {
    .su-date-input__panel--range {
        width: min(100%, 18.5rem);
    }

    .su-date-input__months {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* On/off switch used by field option rows */
.su-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.55rem;
    height: 1.45rem;
}

.su-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.su-switch__ui {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: #d5deea;
    box-shadow: inset 0 0 0 1px #c5d0de;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.su-switch__ui::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: transform 0.15s ease;
}

.su-switch input:checked + .su-switch__ui {
    background: var(--su-primary, #f35930);
    box-shadow: none;
}

.su-switch input:checked + .su-switch__ui::after {
    transform: translateX(1.1rem);
}

.su-switch input:focus-visible + .su-switch__ui {
    box-shadow: 0 0 0 3px rgba(243, 89, 48, 0.22);
}

.su-switch input:disabled {
    cursor: not-allowed;
}

.su-switch input:disabled + .su-switch__ui {
    opacity: 0.55;
}

/* Field option row — required toggle plus extra choices (display audience, etc.) */
.su-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
}

.su-option-row--on {
    border-color: #fbd0c2;
    background: #fffaf8;
}

.su-option-row__main {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    cursor: pointer;
}

.su-option-row__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.su-option-row__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.su-option-row__hint {
    font-size: 0.75rem;
    color: #64748b;
}

.su-option-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.su-option-row__badge--optional {
    background: #f1f5f9;
    color: #64748b;
}

.su-option-row__badge--required {
    background: var(--xpat-orange-light, #fff4f0);
    color: var(--xpat-orange-dark, #d94a1c);
}

.su-option-row__extra {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.su-option-row__extra[hidden] {
    display: none !important;
}

/* Segmented choice — User / Consultant, Yes / No, etc. */
.su-segmented {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.su-segmented__label {
    margin-right: 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.su-segmented__group {
    display: inline-flex;
    align-items: stretch;
    gap: 1px;
}

.su-segmented__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* Bootstrap reboot sets `label { display: inline-block }` unlayered; keep the pill layout. */
label.su-segmented__option {
    display: inline-flex;
}

.su-segmented__option + .su-segmented__option {
    margin-left: -1px;
}

.su-segmented__option:first-of-type {
    border-radius: 0.375rem 0 0 0.375rem;
}

.su-segmented__option:last-of-type {
    border-radius: 0 0.375rem 0.375rem 0;
}

.su-segmented__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.su-segmented__option--active {
    z-index: 1;
    border-color: var(--su-secondary, #54679B);
    background: color-mix(in srgb, var(--su-secondary, #54679B) 12%, #fff);
    color: var(--su-secondary, #54679B);
}

.su-segmented__option:hover:not(.su-segmented__option--active) {
    background: #f8fafc;
}

/* Simple checkbox option row */
.su-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.55rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    cursor: pointer;
}

.su-checkbox-row input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--su-primary, #f35930);
}

.su-checkbox-row__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.su-checkbox-row__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.su-checkbox-row__hint {
    font-size: 0.75rem;
    color: #64748b;
}

/* File input / dropzone (ported from EmployeePortal TcFileDropZone) */
.su-file-input {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
}

.su-file-input__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.su-file-input__zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    border: 2px dashed var(--xp-navy, #18334f);
    border-radius: 12px;
    padding: 40px 24px;
    min-height: 160px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: #eef3f8;
    overflow: hidden;
}

.su-file-input__zone--active,
.su-file-input__zone:hover:not(.su-file-input__zone--disabled):not(.su-file-input__zone--busy):not(.su-file-input__zone--filled) {
    border-color: var(--xp-navy-deep, #0f2438);
    background: #e4ecf5;
    box-shadow: inset 0 0 0 1px rgba(24, 51, 79, 0.06);
}

.su-file-input__zone--filled {
    border-style: solid;
    border-color: #b7d7c3;
    background: #f4faf6;
    box-shadow: none;
}

.su-file-input__zone--filled:hover:not(.su-file-input__zone--disabled):not(.su-file-input__zone--busy) {
    border-color: #9ec9ae;
    background: #eef8f1;
}

.su-file-input__zone--busy {
    pointer-events: none;
    opacity: 0.9;
    cursor: wait;
}

.su-file-input__zone--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.su-file-input__zone--invalid {
    border-color: #e11d48;
    background: #fff1f2;
}

.su-file-input__icon {
    display: block;
    flex-shrink: 0;
    color: #5b9bd5;
}

.su-file-input__icon--filled {
    color: #1b6b3a;
}

.su-file-input__status--busy {
    color: var(--xp-navy, #18334f);
}

.su-file-input__spinner {
    width: 1.75rem;
    height: 1.75rem;
}

/* Near-invisible full-area file input — opacity 0 can break drag-and-drop in some browsers */
.su-file-input__native,
.su-file-input__zone input[type="file"].su-file-input__native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0.01 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    border: 0 !important;
    font-size: 0 !important;
}

.su-file-input__zone--busy .su-file-input__native,
.su-file-input__zone--disabled .su-file-input__native {
    pointer-events: none;
    cursor: default;
}

.su-file-input__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
}

.su-file-input__status {
    font-weight: 700;
    font-size: 0.86rem;
    color: #1b6b3a;
}

.su-file-input__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2d3d;
    word-break: break-all;
}

.su-file-input__size {
    font-size: 0.82rem;
    color: #5f738a;
    font-weight: 600;
}

.su-file-input__hint {
    font-size: 0.78rem;
    color: #8ea1b7;
}

.su-file-input__placeholder {
    font-size: 0.9rem;
    color: #6b7c90;
    line-height: 1.45;
}

.su-file-input__browse {
    font-weight: 700;
    color: var(--xp-navy, #18334f);
}

/* Passport confirmation review (Employee Portal + Company Portal popups) */
.su-passport-review {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.25rem 0.15rem 0.5rem;
}

.su-passport-review__callout.cp-brand-callout,
.su-passport-review .cp-brand-callout {
    margin: 0;
    min-height: 0;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--brand-500, #005caa) 25%, transparent);
    background: color-mix(in srgb, var(--brand-500, #005caa) 5%, #fff);
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
}

.su-passport-review__error.cp-alert-error,
.su-passport-review .cp-alert-error {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #f8d7da;
    color: #721c24;
    font-size: 0.875rem;
    line-height: 1.45;
}

.cp-passport-review-grid,
.su-passport-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
}

@media (min-width: 640px) {
    .cp-passport-review-grid,
    .su-passport-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.su-passport-review__sex {
    grid-column: 1 / -1;
}

.cp-passport-review-actions,
.su-passport-review__actions {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #edf2f8;
}

.cp-passport-review-reupload {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    min-width: 0;
}

.cp-passport-review-reupload__text {
    margin: 0;
    max-width: 36rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.cp-passport-review-actions__primary {
    width: 100%;
}

.cp-passport-review-actions__confirm,
.cp-passport-review-actions__secondary {
    width: 100%;
    min-height: 3rem;
    justify-content: center;
}

.cp-passport-review-actions__confirm .su-btn__text,
.cp-passport-review-actions__secondary .su-btn__text {
    font-weight: 600;
}

@media (min-width: 640px) {
    .cp-passport-review-actions,
    .su-passport-review__actions {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .cp-passport-review-reupload {
        flex: 1 1 auto;
        align-items: flex-start;
        max-width: 36rem;
    }

    .cp-passport-review-actions__primary {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
    }

    .cp-passport-review-actions__confirm,
    .cp-passport-review-actions__secondary {
        width: auto;
        min-width: 12rem;
    }
}