/* =============================================
   CARTANTS - auth.css
   Sign In / Sign Up — floating card on gradient
   ============================================= */

/* ── Body ── */
.cartants-auth-body {
    margin: 0; padding: 0;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Full page gradient bg — Figma: rgba(81,93,169,0.5) over white ── */
.signin-bg {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    box-sizing: border-box;
    background:
        linear-gradient(0deg, rgba(81,93,169,0.45), rgba(81,93,169,0.45)),
        linear-gradient(135deg, #d4d8f0 0%, #e8e4f5 40%, #c8cce8 100%);
}

/* ── Floating card — Figma: 1240x858, radius 32, glass ── */
.signin-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1100px;
    min-height: 720px;
    background: rgba(254,254,254,0.25);
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 24px 80px rgba(13,35,172,0.18);
}

/* ════ LEFT PANEL ════════════════════════════ */
.signin-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
    gap: 28px;
    flex: 0 0 520px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-sizing: border-box;
}

/* Logo */
.auth-logo {
    align-self: flex-start;
    text-decoration: none;
    display: block;
}
.auth-logo img {
    height: 36px; width: auto;
    display: block; object-fit: contain;
}

/* Form wrap */
.signin-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 440px;
}

/* Header */
.auth-form-header { text-align: center; }
.auth-form-header__title {
    font-weight: 700; font-size: 20px;
    line-height: 28px; color: #222747; margin: 0 0 6px;
}
.auth-form-header__sub {
    font-size: 13px; color: #3D4470; margin: 0;
}
.auth-link {
    color: #7661B4; font-weight: 600;
    text-decoration: none; transition: color 0.15s;
}
.auth-link:hover { color: #0D23AC; }

/* Messages */
.auth-error {
    padding: 10px 14px;
    background: rgba(220,38,38,0.07);
    border: 1px solid rgba(220,38,38,0.2);
    border-radius: 10px;
    font-size: 12px; color: #B91C1C; text-align: center;
}
.auth-success {
    padding: 10px 14px;
    background: rgba(22,163,74,0.07);
    border: 1px solid rgba(22,163,74,0.2);
    border-radius: 10px;
    font-size: 12px; color: #15803D; text-align: center;
}

/* Form */
.auth-form {
    display: flex; flex-direction: column; gap: 12px;
    width: 100%;
}

/* Input — Figma: bg #F9F9FC border #DCDCE2 radius 16 */
.auth-input {
    width: 100%; height: 42px;
    padding: 10px 14px;
    background: #F9F9FC;
    border: 1px solid #DCDCE2;
    border-radius: 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px; color: #222747;
    outline: none; box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}
.auth-input:focus { border-color: #7661B4; background: #fff; }
.auth-input::placeholder { color: #AFB4D7; font-size: 13px; }

/* Password wrap */
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap .auth-input { padding-right: 40px; }
.auth-eye {
    position: absolute; right: 12px;
    background: none; border: none; cursor: pointer;
    padding: 0; display: flex; align-items: center;
}

.auth-row-end { display: flex; justify-content: flex-end; }
.auth-forgot {
    font-size: 11px; font-weight: 500;
    color: #7661B4; text-decoration: none;
    transition: color 0.15s;
}
.auth-forgot:hover { color: #0D23AC; }

/* Buttons */
.auth-btn {
    display: flex; justify-content: center;
    align-items: center; gap: 8px;
    width: 100%; height: 44px;
    border-radius: 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; font-size: 14px;
    cursor: pointer; text-decoration: none;
    border: none; transition: transform 0.15s ease;
    box-sizing: border-box;
}
.auth-btn:hover { transform: translateY(-1px); }

.auth-btn--primary {
    background: linear-gradient(107.49deg, #7661B4 7.25%, #0D23AC 95.34%);
    color: #fff !important; box-shadow: none;
    margin-top: 4px;
}
.auth-btn--primary:hover { color: #fff !important; }

/* Social — Figma: border #515DA9 */
.auth-btn--social {
    background: #fff;
    border: 1.5px solid #515DA9 !important;
    color: #222747 !important; font-size: 13px;
}
.auth-btn--social:hover { background: #F8F9FF; color: #222747 !important; }
.auth-btn--social svg { flex-shrink: 0; }

/* Divider */
.auth-divider {
    display: flex; align-items: center;
    gap: 10px; width: 100%;
}
.auth-divider::before,
.auth-divider::after {
    content: ''; flex: 1; height: 1px; background: #DCDCE2;
}
.auth-divider span {
    font-size: 12px; font-weight: 500; color: #222747;
}

/* Social group */
.auth-social { display: flex; flex-direction: column; gap: 10px; width: 100%; }


/* ════ RIGHT PANEL ═══════════════════════════ */
.signin-right {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
}

.signin-right__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    display: block;
}

.signin-right__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(13,35,172,0.75) 0%,
        rgba(118,97,180,0.4) 50%,
        rgba(81,93,169,0.15) 100%
    );
    z-index: 1;
}

.signin-right__content {
    position: relative; z-index: 2;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

/* Rectangle accent + title in same row */
.signin-right__text-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.signin-right__rect {
    width: 6px;
    height: 56px;
    object-fit: fill;
    flex-shrink: 0;
    border-radius: 4px;
    display: block;
}

.signin-right__title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 32px;
    line-height: 40px; color: #fff; margin: 0;
}

.signin-right__desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; font-size: 15px;
    line-height: 22px; color: rgba(255,255,255,0.90);
    margin: 0; max-width: 320px;
}


/* ════ ROLE SELECTOR (signup) ════════════════ */
.auth-roles {
    display: flex; flex-direction: row;
    gap: 10px; width: 100%;
}
.auth-role-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px; padding: 12px 8px;
    border: 1.5px solid #DCDCE2; border-radius: 14px;
    cursor: pointer; background: #F9F9FC;
    transition: all 0.15s; text-align: center;
}
.auth-role-tab input[type="radio"] { display: none; }
.auth-role-tab:has(input:checked) {
    border-color: #7661B4;
    background: rgba(118,97,180,0.06);
}
.auth-role-tab__icon { font-size: 20px; }
.auth-role-tab__name {
    font-weight: 600; font-size: 11px; color: #2D335D;
}
.auth-role-tab__desc {
    font-weight: 400; font-size: 9px;
    color: #8A92C5; line-height: 13px;
}

/* Step dots */
.auth-steps {
    display: flex; align-items: center;
    gap: 6px; justify-content: center; width: 100%;
}
.auth-step-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #DCDCE2; transition: all 0.2s;
}
.auth-step-dot.is-active {
    background: linear-gradient(107.49deg,#7661B4 7.25%,#0D23AC 95.34%);
    width: 20px; border-radius: 4px;
}
.auth-step-dot.is-done { background: #7661B4; }

/* Labels */
.auth-label {
    font-weight: 600; font-size: 11px;
    color: #2D335D; display: block; margin-bottom: 4px;
}

/* Field */
.auth-field { display: flex; flex-direction: column; gap: 4px; }

/* Two col grid */
.auth-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}


/* ════ RESPONSIVE ════════════════════════════ */
@media(max-width:900px){
    .signin-right { display: none; }
    .signin-left  { flex: 1; max-width: 100%; }
    .signin-card  { max-width: 520px; margin: 0 auto; min-height: auto; }
}
@media(max-width:560px){
    .signin-left  { padding: 36px 28px; }
    .signin-bg    { padding: 20px 16px; }
}


/* ════ SIGNUP SPECIFIC ═══════════════════════ */

.signup-card { min-height: 680px; }
.signup-left {
    justify-content: flex-start;
    padding: 32px 48px;
    gap: 0;
    overflow-y: auto;
}

.signup-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    animation: stepFade 0.25s ease both;
}
@keyframes stepFade { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }

/* Step nav */
.signup-step-nav {
    display: flex; justify-content: space-between;
    align-items: center; width: 100%;
}
.signup-back {
    font-family:'Montserrat',sans-serif;
    font-size:13px; font-weight:600;
    color:#7661B4; background:none; border:none;
    cursor:pointer; text-decoration:none;
    transition:color 0.15s;
}
.signup-back:hover { color:#0D23AC; }
.signup-step-label {
    font-family:'Montserrat',sans-serif;
    font-size:12px; font-weight:600;
    color:#7661B4;
}

/* Progress bar */
.signup-progress {
    width:100%; height:4px;
    background:#EEEFF6; border-radius:4px;
    overflow:hidden; margin-bottom:4px;
}
.signup-progress__bar {
    height:100%;
    background:linear-gradient(90deg,#7661B4,#0D23AC);
    border-radius:4px;
    transition:width 0.4s ease;
}

/* Heading */
.signup-heading h1 {
    font-family:'Montserrat',sans-serif;
    font-weight:600; font-size:22px;
    line-height:30px; color:#1a1a2e;
    margin:0;
}
.signup-heading p {
    font-family:'Montserrat',sans-serif;
    font-size:13px; color:#3D4470;
    margin:4px 0 0;
}
.signup-heading--onboard { margin-bottom:8px; }
.onboard-label {
    font-size:12px; font-weight:500;
    color:#7661B4; display:block; margin-bottom:4px;
}
.signup-heading--center { text-align:center; }
.signup-heading--center h1 { font-size:20px; }

/* Fields */
.signup-fields { display:flex; flex-direction:column; gap:12px; width:100%; }
.signup-field  { display:flex; flex-direction:column; gap:4px; }
.signup-field label {
    font-family:'Montserrat',sans-serif;
    font-size:11px; font-weight:600; color:#2D335D;
}
.field-optional { font-weight:400; color:#8A92C5; }
.field-error {
    font-size:11px; color:#C0392B;
    display:none; margin-top:2px;
}
.auth-input.is-error { border-color:#C0392B !important; }

/* Select */
.auth-select {
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23AFB4D7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:36px;
    cursor:pointer;
}

/* Password strength */
.password-strength {
    width:100%; height:3px;
    background:#EEEFF6; border-radius:3px;
    overflow:hidden; margin-top:4px;
}
#pw-bar { height:100%; width:0; border-radius:3px; transition:width 0.3s,background 0.3s; }

/* Skills */
.skills-wrap { display:flex; flex-direction:column; gap:6px; }
.skills-tags { display:flex; flex-wrap:wrap; gap:6px; }
.skill-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px;
    background:rgba(118,97,180,0.1);
    border:1px solid rgba(118,97,180,0.3);
    border-radius:20px;
    font-size:11px; font-weight:500; color:#3A4278;
}
.skill-tag button {
    background:none; border:none; cursor:pointer;
    color:#7661B4; font-size:13px; padding:0; line-height:1;
}

/* Onboarding card */
.onboard-card {
    display:flex; flex-direction:row;
    align-items:flex-start; gap:12px;
    padding:16px; width:100%;
    background:#fff; border:1px solid #EEEFF6;
    border-radius:16px;
    box-shadow:0 2px 12px rgba(13,35,172,0.06);
}
.onboard-card__icon {
    width:36px; height:36px;
    background:rgba(118,97,180,0.1);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0;
}
.onboard-card__text strong {
    font-family:'Montserrat',sans-serif;
    font-weight:600; font-size:13px;
    color:#222747; display:block; margin-bottom:4px;
}
.onboard-card__text p {
    font-family:'Montserrat',sans-serif;
    font-size:12px; color:#3D4470; margin:0; line-height:18px;
}

/* Onboarding footer */
.onboard-footer {
    display:flex; justify-content:space-between;
    align-items:center; width:100%;
}
.onboard-dots { display:flex; gap:6px; align-items:center; }
.onboard-dot {
    width:8px; height:8px; border-radius:50%;
    background:#DCDCE2; transition:all 0.2s;
}
.onboard-dot.is-active {
    background:linear-gradient(90deg,#7661B4,#0D23AC);
    width:20px; border-radius:4px;
}
.onboard-note {
    font-size:10px; color:#8A92C5;
    font-family:'Montserrat',sans-serif;
}

/* Onboard buttons */
.onboard-btns { display:flex; gap:12px; width:100%; }
.auth-btn--outline-dark {
    background:transparent;
    border:1.5px solid #DCDCE2 !important;
    color:#222747 !important;
}

/* First action grid (step 4) */
.first-action-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:12px; width:100%;
}
.first-action-card {
    display:flex; flex-direction:column;
    gap:6px; padding:16px 14px;
    border:1.5px solid #EEEFF6; border-radius:16px;
    background:#fff; text-decoration:none;
    transition:all 0.15s; cursor:pointer;
}
.first-action-card:hover {
    border-color:#7661B4;
    background:rgba(118,97,180,0.04);
    transform:translateY(-2px);
}
.first-action-card__icon {
    width:36px; height:36px;
    background:rgba(118,97,180,0.12);
    border-radius:10px;
    display:flex; align-items:center;
    justify-content:center; font-size:18px;
}
.first-action-card strong {
    font-family:'Montserrat',sans-serif;
    font-weight:600; font-size:12px; color:#222747;
}
.first-action-card span {
    font-family:'Montserrat',sans-serif;
    font-size:10px; color:#8A92C5; line-height:14px;
}

/* Quiz CTA box */
.quiz-cta-box {
    width:100%; padding:16px;
    background:#fff; border:1px solid #EEEFF6;
    border-radius:16px; text-align:center;
    display:flex; flex-direction:column;
    align-items:center; gap:6px;
}
.quiz-cta-box__title {
    font-family:'Montserrat',sans-serif;
    font-weight:600; font-size:13px; color:#222747; margin:0;
}
.quiz-cta-box__desc {
    font-family:'Montserrat',sans-serif;
    font-size:11px; color:#8A92C5; margin:0;
}
.quiz-btn {
    width:auto !important; height:36px !important;
    padding:8px 20px !important; font-size:12px !important;
    background:transparent !important;
    border:1.5px solid #7661B4 !important;
    background-image:linear-gradient(107.49deg,#7661B4 7.25%,#0D23AC 95.34%) !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    background-clip:text !important;
}

.skip-home {
    font-family:'Montserrat',sans-serif;
    font-size:13px; color:#7661B4;
    text-decoration:none; text-align:center;
    font-weight:500; transition:color 0.15s;
}
.skip-home:hover { color:#0D23AC; }

.auth-bottom-link {
    font-family:'Montserrat',sans-serif;
    font-size:12px; color:#3D4470;
    text-align:center; margin:0;
}

/* Wide card for step 4 */
.signup-card--wide {
    max-width:900px !important;
}
.signup-card--wide .signup-left {
    flex:1 !important; max-width:100% !important;
}