/* =========================================================
   UC Portal — Page-level and Layout Styles
   Covers: stepper wizard layout + landing/welcome page
   Figma: LcTth2sgEJ6uFC9DSWLt9A (data-extraction)
   ========================================================= */


/* =========================================================
   GLOBAL PAGE BODY
   ========================================================= */

.uc-page {
    min-height: 100vh;
    background-color: var(--cf-color-surface-secondary);
    display: flex;
    flex-direction: column;
    font-family: var(--cf-font-body);
    color: var(--cf-color-text-primary);
}


/* =========================================================
   APP HEADER
   ========================================================= */

.uc-header {
    background-color: var(--cf-color-surface-primary);
    border-bottom: 1px solid var(--cf-color-border);
    box-shadow: var(--cf-shadow-sm);
    flex-shrink: 0;
}

.uc-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.uc-header__brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

.uc-header__logo {
    height: 36px;
}

.uc-header__product {
    font-size: var(--cf-font-size-lg);  /* 20px */
    font-weight: 300;
    color: var(--cf-color-text-primary);
    line-height: 24px;
}

.uc-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.uc-header__user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--cf-color-btn-secondary);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-primary);
    white-space: nowrap;
}

.uc-header__user-pill i {
    font-size: 20px;
}


/* =========================================================
   SHARED BUTTON PRIMITIVES
   ========================================================= */

/* Dark (primary action) */
.uc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--cf-radius-md);
    font-family: var(--cf-font-body);
    font-size: var(--cf-font-size-base);
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.uc-btn--dark {
    background-color: var(--cf-color-btn-dark);
    color: var(--cf-color-btn-dark-text);
}

.uc-btn--dark:hover {
    background-color: #3d3d3d;
    color: var(--cf-color-btn-dark-text);
}

.uc-btn--secondary {
    background-color: var(--cf-color-btn-secondary);
    color: var(--cf-color-btn-secondary-text);
}

.uc-btn--secondary:hover {
    background-color: #c9c6c6;
    color: var(--cf-color-btn-secondary-text);
}

.uc-btn--ghost {
    background-color: transparent;
    color: var(--cf-color-text-primary);
}

.uc-btn--ghost:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--cf-color-text-primary);
}

.uc-btn[disabled],
.uc-btn--disabled {
    opacity: 0.24;
    cursor: not-allowed;
    pointer-events: none;
}

.uc-btn i {
    font-size: 20px;
    line-height: 1;
}


/* =========================================================
   STEPPER WIZARD LAYOUT
   ========================================================= */

.uc-main {
    flex: 1;
    padding: 32px 24px 48px;
    display: flex;
    justify-content: center;
}

.uc-container {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.uc-container--wide {
    max-width: 1200px;
}

/* Card */
.uc-card {
    background: var(--cf-color-surface-primary);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-sm);
}

.uc-card__body {
    padding: 32px 24px;
}

/* Nav row (Back / Primary button) */
.uc-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Legacy class mappings — views still use these */
.stepper-header { display: none; } /* replaced by .uc-header */

.stepper-main    { display: contents; }
.stepper-container { display: contents; }
.stepper-container--wide { display: contents; }

/* Keep old card classes working by mapping to new ones */
.stepper-card {
    background: var(--cf-color-surface-primary);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-sm);
}

.stepper-card__body {
    padding: 32px 24px;
}

.stepper-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Card typography */
.stepper-card__title {
    font-size: 1.5rem;     /* 24px */
    font-weight: 600;
    color: var(--cf-color-text-primary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.stepper-card__description {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}


/* =========================================================
   STEPPER BUTTONS (legacy classes — still used in views)
   ========================================================= */

.stepper-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: transparent;
    color: var(--cf-color-text-primary);
    font-size: var(--cf-font-size-base);
    font-weight: 400;
    font-family: var(--cf-font-body);
    text-decoration: none;
    border: none;
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.stepper-btn-back:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--cf-color-text-primary);
}

.stepper-btn-back i { font-size: 20px; }

.stepper-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--cf-color-accent);
    color: var(--cf-color-text-primary);
    font-size: var(--cf-font-size-base);
    font-weight: 400;
    font-family: var(--cf-font-body);
    text-decoration: none;
    border: none;
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.stepper-btn-primary:hover {
    background-color: var(--cf-color-accent-dark);
    color: var(--cf-color-text-primary);
}

.stepper-btn-primary i { font-size: 20px; }

.stepper-btn-primary--disabled,
.stepper-btn-primary[disabled] {
    opacity: 0.24;
    cursor: not-allowed;
    pointer-events: none;
}

/* Secondary variant (grey) */
.stepper-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background-color: var(--cf-color-btn-secondary);
    color: var(--cf-color-btn-secondary-text);
    font-size: var(--cf-font-size-base);
    font-weight: 400;
    font-family: var(--cf-font-body);
    text-decoration: none;
    border: none;
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.stepper-btn-secondary:hover {
    background-color: #c9c6c6;
}

.stepper-btn-secondary i { font-size: 20px; }

.stepper-btn-secondary--disabled,
.stepper-btn-secondary[disabled] {
    opacity: 0.24;
    cursor: not-allowed;
    pointer-events: none;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.stepper-form-group {
    margin-bottom: 16px;
    max-width: 418px;
}

.stepper-label {
    display: block;
    font-size: var(--cf-font-size-base);
    font-weight: 700;
    color: var(--cf-color-text-primary);
    margin-bottom: 8px;
}

.stepper-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font-size: var(--cf-font-size-base);
    font-family: var(--cf-font-body);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-md);
    background: var(--cf-color-surface-primary);
    color: var(--cf-color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stepper-input:focus {
    outline: none;
    border-color: var(--cf-color-btn-dark);
    box-shadow: 0 0 0 2px rgba(40, 40, 40, 0.12);
}

.stepper-input::placeholder {
    color: var(--cf-color-text-secondary);
}

/* Security note */
.stepper-security-note {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-secondary);
    margin-top: 8px;
}

.stepper-security-note i {
    font-size: 16px;
    color: var(--cf-color-info-icon);
}

/* Resend link */
.stepper-resend {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-secondary);
    margin-top: 8px;
}

.stepper-resend a,
.stepper-resend button {
    color: var(--cf-color-text-secondary);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

.stepper-resend a:hover,
.stepper-resend button:hover {
    color: var(--cf-color-text-primary);
}


/* =========================================================
   ALERT / BANNER STYLES
   ========================================================= */

.stepper-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: var(--cf-radius-lg);
    font-size: var(--cf-font-size-base);
    margin-bottom: 16px;
    border: 1px solid transparent;
    line-height: 1.5;
}

.stepper-alert--info {
    background-color: var(--cf-color-info-surface);
    border-color: var(--cf-color-info-border);
    color: var(--cf-color-text-primary);
}

.stepper-alert--info i {
    color: var(--cf-color-info-icon);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.stepper-alert--error {
    background-color: var(--cf-color-danger-surface);
    border-color: var(--cf-color-danger-border);
    color: var(--cf-color-text-primary);
}

.stepper-alert--error i {
    color: var(--cf-color-danger-icon);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.stepper-alert--success {
    background-color: var(--cf-color-success-surface);
    border-color: var(--cf-color-success-border);
    color: var(--cf-color-text-primary);
}

.stepper-alert--warning {
    background-color: #fef3c7;
    border-color: #fde68a;
    color: var(--cf-color-text-primary);
}

.stepper-alert ul {
    margin: 8px 0 0 16px;
    padding: 0;
}

.stepper-alert li {
    margin-bottom: 4px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.uc-footer {
    flex-shrink: 0;
    padding: 16px 32px;
}

.uc-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uc-footer__copy {
    font-size: 11px;
    font-weight: 500;
    color: var(--cf-color-footer-text);
    font-family: "Inter", var(--cf-font-body);
}

.uc-footer__links {
    display: flex;
    gap: 16px;
}

.uc-footer__links a {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-primary);
    text-decoration: none;
}

.uc-footer__links a:hover {
    text-decoration: underline;
}

/* Legacy footer classes */
.landing-footer { display: contents; }
.landing-footer__inner { display: contents; }
.landing-footer__links { display: contents; }


/* =========================================================
   LANDING / WELCOME PAGE
   ========================================================= */

.landing-page {
    min-height: 100vh;
    background-color: var(--cf-color-surface-secondary);
    display: flex;
    flex-direction: column;
    font-family: var(--cf-font-body);
}

.landing-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

/* Card */
.landing-card {
    background: var(--cf-color-surface-primary);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-md);
    max-width: 900px;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

/* Hero header */
.landing-header {
    background-color: var(--cf-color-brand-dark);
    padding: 40px 32px;
    text-align: center;
    border-radius: var(--cf-radius-lg) var(--cf-radius-lg) 0 0;
}

.landing-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.landing-brand__logo {
    height: 36px;
    filter: brightness(0) invert(1);
}

.landing-brand__subtitle {
    font-size: var(--cf-font-size-lg);  /* 20px */
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    line-height: 24px;
}

.landing-title {
    font-size: 2rem;       /* 32px */
    font-weight: 600;
    color: var(--cf-color-text-reverse);
    margin-bottom: 8px;
    line-height: 1.25;
}

.landing-description {
    font-size: var(--cf-font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 16px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.landing-company-badge {
    display: inline-block;
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-reverse);
    font-weight: 400;
}

/* Card body */
.landing-body {
    padding: 40px 32px;
}

/* Required Documents */
.landing-documents {
    margin-bottom: 24px;
}

.landing-documents__title {
    font-size: 1.5rem;     /* 24px */
    font-weight: 600;
    color: var(--cf-color-text-primary);
    margin-bottom: 8px;
}

.landing-documents__description {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.landing-documents__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .landing-documents__grid {
        grid-template-columns: 1fr;
    }
}

/* Doc cards */
.landing-doc-card {
    background: var(--cf-color-surface-primary);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-lg);
    padding: 32px 24px;
    position: relative;
    overflow: hidden;
}

/* Bracket corner decorations */
.landing-doc-card::before,
.landing-doc-card::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid var(--cf-color-accent);
}

.landing-doc-card::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
    border-radius: var(--cf-radius-lg) 0 0 0;
}

.landing-doc-card::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 var(--cf-radius-lg) 0;
}

.landing-doc-card__title {
    font-size: var(--cf-font-size-lg);  /* 20px */
    font-weight: 700;
    color: var(--cf-color-text-primary);
    margin-bottom: 8px;
}

.landing-doc-card__description {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.landing-doc-card__formats {
    display: flex;
    gap: 8px;
}

.landing-doc-card__format {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--cf-color-surface-secondary);
    border-radius: var(--cf-radius-sm);
    font-size: var(--cf-font-size-sm);  /* 14px */
    color: var(--cf-color-text-primary);
    min-height: 20px;
}

.landing-doc-card__format i {
    font-size: 12px;
    color: var(--cf-color-text-secondary);
}

/* Security banner */
.landing-security {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--cf-color-info-surface);
    border: 1px solid var(--cf-color-info-border);
    border-radius: var(--cf-radius-lg);
    padding: 12px;
    margin-bottom: 24px;
}

.landing-security__icon {
    font-size: 20px;
    color: var(--cf-color-info-icon);
    flex-shrink: 0;
    margin-top: 1px;
}

.landing-security__content { flex: 1; }

.landing-security__title {
    font-size: var(--cf-font-size-base);
    font-weight: 700;
    color: var(--cf-color-text-primary);
    margin-bottom: 2px;
}

.landing-security__text {
    font-size: var(--cf-font-size-base);
    color: var(--cf-color-text-primary);
    line-height: 1.5;
}

/* CTA */
.landing-cta {
    display: flex;
    justify-content: center;
}

.landing-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    width: 356px;
    padding: 0 16px;
    background-color: var(--cf-color-accent);
    color: var(--cf-color-text-primary);
    border-radius: var(--cf-radius-lg);
    font-size: 1.125rem;    /* 18px */
    font-weight: 500;
    font-family: var(--cf-font-body);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.landing-cta__button:hover {
    background-color: var(--cf-color-accent-dark);
    color: var(--cf-color-text-primary);
}

.landing-cta__button i { font-size: 20px; }


/* =========================================================
   LANDING PAGE FOOTER
   ========================================================= */

.landing-footer {
    padding: 16px 32px;
    flex-shrink: 0;
}

.landing-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-footer__inner > span {
    font-size: 11px;
    font-weight: 500;
    color: var(--cf-color-footer-text);
}

.landing-footer__links {
    display: flex;
    gap: 16px;
}

.landing-footer__links a {
    font-size: var(--cf-font-size-sm);
    color: var(--cf-color-text-primary);
    text-decoration: none;
}

.landing-footer__links a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .landing-footer__inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .landing-main {
        padding: 24px 16px;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {
    .uc-main {
        padding: 16px 16px 32px;
    }

    .uc-card__body,
    .stepper-card__body {
        padding: 24px 16px;
    }

    .uc-header__inner {
        padding: 12px 16px;
    }

    .uc-footer {
        padding: 16px;
    }
}