/* ====================================================================
   investor-auth.css  —  Investor Portal Login / Signup
   Mirrors the StartupGatewayFE (Founder portal) design exactly.
   All classes are prefixed with "ia-" to avoid Bootstrap collisions.
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* ── Reset for auth pages ─────────────────────────────────────────── */
.ia-page {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    background: #F8F9FA;
    color: #111827;
}

/* ── Full-screen wrapper ──────────────────────────────────────────── */
.ia-wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.ia-signup-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* ── Left branding panel ──────────────────────────────────────────── */
.ia-left {
    width: 50%;
    position: relative;
    flex-shrink: 0;
    height: 100%;
}

.ia-signup-wrapper .ia-left {
    height: 100vh;
    position: sticky;
    top: 0;
}

.ia-left-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ia-left-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 15%;
    background: linear-gradient(
        to bottom,
        rgba(10, 8, 80, 0.88) 0%,
        rgba(10, 8, 80, 0.50) 40%,
        rgba(10, 8, 80, 0.50) 60%,
        rgba(10, 8, 80, 0.88) 100%
    );
}

.ia-logo { width: 160px; position: relative; z-index: 10; }

.ia-tagline {
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 300;
    margin-top: 12px;
    position: relative;
    z-index: 10;
    letter-spacing: 0.05em;
}

/* ── Right form panel ─────────────────────────────────────────────── */
.ia-right {
    background-color: #F8F9FA;
    width: 50%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100vh;
}

.ia-form-outer {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}


.ia-form-inner { width: 100%; max-width: 448px; }

/* ── Mobile header (hidden on desktop) ───────────────────────────── */
.ia-mobile-header {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    background: #181679;
}

.ia-mobile-logo { width: 144px; }

/* ── Toast ────────────────────────────────────────────────────────── */
.ia-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: #16a34a;
    color: #fff;
    font-size: 0.875rem;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* ── Form spacing helpers ─────────────────────────────────────────── */
.ia-space-y-1 > * + * { margin-top:  4px; }
.ia-space-y-4 > * + * { margin-top: 16px; }
.ia-space-y-6 > * + * { margin-top: 24px; }
.ia-mt-1 { margin-top:  4px; }
.ia-mt-2 { margin-top:  8px; }
.ia-mt-3 { margin-top: 12px; }
.ia-mt-4 { margin-top: 16px; }
.ia-mt-6 { margin-top: 24px; }
.ia-mb-6 { margin-bottom: 24px; }
.ia-w-full { width: 100%; }
.ia-flex { display: flex; }
.ia-justify-end { justify-content: flex-end; }

/* ── Labels ───────────────────────────────────────────────────────── */
.ia-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

/* ── Text inputs ──────────────────────────────────────────────────── */
.ia-input {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #111827;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.ia-input::placeholder { color: #9ca3af; }

.ia-input:focus {
    border-color: #181679;
    box-shadow: 0 0 0 2px rgba(24,22,121,.2);
}

.ia-input.ia-field-error  { border-color: #ef4444; }
.ia-input.ia-field-error:focus { box-shadow: 0 0 0 2px rgba(239,68,68,.2); }

/* ── Textarea ─────────────────────────────────────────────────────── */
.ia-textarea {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #111827;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ia-textarea::placeholder { color: #9ca3af; }

.ia-textarea:focus {
    border-color: #181679;
    box-shadow: 0 0 0 2px rgba(24,22,121,.2);
}

.ia-textarea.ia-field-error { border-color: #ef4444; }

/* ── Select ───────────────────────────────────────────────────────── */
.ia-select {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E")
        no-repeat right 12px center / 16px;
    padding: 0 36px 0 12px;
    font-size: 0.875rem;
    color: #111827;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.ia-select:focus {
    border-color: #181679;
    box-shadow: 0 0 0 2px rgba(24,22,121,.2);
}

.ia-select.ia-field-error { border-color: #ef4444; }

/* ── Password wrapper ─────────────────────────────────────────────── */
.ia-pw-wrap { position: relative; }
.ia-pw-wrap .ia-input { padding-right: 40px; }

.ia-pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.ia-pw-toggle:hover { color: #374151; }

/* ── Phone input ──────────────────────────────────────────────────── */
.ia-phone-wrap {
    display: flex;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.ia-phone-wrap:focus-within {
    border-color: #181679;
    box-shadow: 0 0 0 2px rgba(24,22,121,.2);
}

.ia-phone-wrap.ia-field-error { border-color: #ef4444; }

.ia-phone-country {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    border-top: none; border-bottom: none; border-left: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    font-family: inherit;
    white-space: nowrap;
    position: relative;
    min-width: 80px;
}

.ia-phone-country-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    font-size: 0.875rem;
}

.ia-phone-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: 0.875rem;
    color: #111827;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

.ia-phone-input::placeholder { color: #9ca3af; }

/* ── 2-column grid ────────────────────────────────────────────────── */
.ia-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Error message ────────────────────────────────────────────────── */
.ia-error-msg {
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 4px;
}

/* ── Server error box ─────────────────────────────────────────────── */
.ia-server-error {
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #b91c1c;
}

/* ── Primary button ───────────────────────────────────────────────── */
.ia-btn-primary {
    display: block;
    width: 100%;
    height: 48px;
    background-color: #181679;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}

.ia-btn-primary:hover    { opacity: .9; }
.ia-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ── Google button ────────────────────────────────────────────────── */
.ia-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}

.ia-btn-google:hover { background: #e5e7eb; }

/* ── Back button ──────────────────────────────────────────────────── */
.ia-btn-back {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
    padding: 8px 0;
    font-family: inherit;
    transition: color .15s;
}

.ia-btn-back:hover { color: #374151; }

/* ── OR divider ───────────────────────────────────────────────────── */
.ia-divider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ia-divider-line  { flex: 1; height: 1px; background: #e5e7eb; }
.ia-divider-text  { font-size: 0.75rem; font-weight: 500; color: #9ca3af; }

/* ── Typography ───────────────────────────────────────────────────── */
.ia-heading    { font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; }
.ia-subheading { font-size: 0.875rem; color: #6b7280; margin-top: 4px; }
.ia-step-heading  { font-size: 1.5rem;  font-weight: 700; color: #111827; margin: 0; }
.ia-step-subtitle { font-size: 0.875rem; color: #6b7280; margin-top: 4px; }

.ia-text-center   { text-align: center; }
.ia-text-sm   { font-size: 0.875rem; }
.ia-text-xs   { font-size: 0.75rem; }
.ia-text-gray { color: #6b7280; }

.ia-link {
    color: #181679;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.875rem;
}
.ia-link:hover { text-decoration: underline; color: #181679; }

.ia-link-light {
    color: #181679;
    font-weight: 500;
    text-decoration: none;
    font-size: 0.875rem;
}
.ia-link-light:hover { text-decoration: underline; color: #181679; }

/* ── Stepper ──────────────────────────────────────────────────────── */
.ia-stepper {
    display: flex;
    margin-bottom: 24px;
}

.ia-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ia-step-bar {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    margin-bottom: 8px;
    transition: background-color .3s;
}

.ia-step-bar.s-active  { background-color: #181679; }
.ia-step-bar.s-done    { background-color: #4f8df7; }
.ia-step-bar.s-pending { background-color: #e5e7eb; }

.ia-step-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ia-step-label.s-active  { color: #181679; }
.ia-step-label.s-done    { color: #4f8df7; }
.ia-step-label.s-pending { color: #9ca3af; }

/* ── Email verification confirmation ──────────────────────────────── */
.ia-verify-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 0;
    gap: 16px;
}

.ia-verify-icon-outer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #e8eaf6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ia-verify-icon-inner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #181679;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ia-verify-checklist { width: 100%; display: flex; flex-direction: column; gap: 8px; }

.ia-verify-checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
}

.ia-verify-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #181679;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

/* ── Footer ───────────────────────────────────────────────────────── */
.ia-footer {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.ia-footer-text {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── Loading spinner ──────────────────────────────────────────────── */
.ia-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ia-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

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

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ia-left              { display: none !important; }
    .ia-right             { width: 100% !important; height: auto !important; min-height: 100vh; }
    .ia-signup-wrapper .ia-right { width: 100% !important; }
    .ia-mobile-header     { display: flex; }
    .ia-form-outer        { padding: 24px 16px; }
    .ia-grid-2            { grid-template-columns: 1fr; }
    .ia-wrapper           { height: auto; min-height: 100vh; }
    .ia-signup-wrapper    { flex-direction: column; }
}

/* ── Investor portal header avatar ────────────────────────────────── */
.ia-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 0 20px;
}

.ia-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #181679;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    padding: 0;
    transition: opacity .15s;
}

.ia-avatar:hover { opacity: .85; }

.ia-avatar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 140px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    border: 1px solid #e5e7eb;
    z-index: 9999;
    overflow: hidden;
}

.ia-avatar-dropdown--open { display: block; }

.ia-avatar-dropdown a {
    display: block;
    padding: 10px 16px;
    font-size: 1.25rem;
    color: #374151;
    text-decoration: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background .12s;
}

.ia-avatar-dropdown a:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}