/* Shared styles for login + signup auth pages */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito:wght@400;600;700&display=swap');

/* Layout override — allow scroll but keep compact */
body.tm-layout-auth { background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 50%, #E0F2FE 100%) !important; min-height: 100vh; align-content: flex-start !important; padding: 24px 0 !important; }
body.tm-layout-auth .tm-layout-auth__panel { max-width: 440px; width: 100%; padding: 0; }

/* Card */
.auth-card { background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(131, 27, 238, 0.08), 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }

/* Header — compact */
.auth-header { background: linear-gradient(135deg, #831BEE 0%, #6B15C5 40%, #4F46E5 100%); padding: 20px 28px 18px; text-align: center; position: relative; overflow: hidden; }
.auth-header::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.auth-header::after { content: ''; position: absolute; bottom: -30px; left: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.04); }
.auth-header a { position: relative; z-index: 1; }
.auth-header img { height: 32px; margin-bottom: 8px; position: relative; z-index: 1; display: inline-block; }
.auth-header h2 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: white; margin: 0; position: relative; z-index: 1; }
.auth-header p { font-family: 'Nunito', sans-serif; color: rgba(255,255,255,0.7); font-size: 12px; margin: 2px 0 0; position: relative; z-index: 1; }

/* Body — tighter padding */
.auth-body { padding: 20px 28px 20px; }

/* Form fields — compact */
.auth-field { margin-bottom: 12px; }
.auth-field label.auth-label { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 4px; display: block; }
.auth-field .form-control, .auth-field input.login-input, .auth-field input.input-tm, .auth-field input.phone-input {
    font-family: 'Nunito', sans-serif !important; font-size: 13px !important; padding: 9px 12px !important;
    border: 1.5px solid #E5E7EB !important; border-radius: 10px !important; background: #FAFAFA !important;
    transition: all 0.2s !important; color: #1E293B !important; width: 100% !important;
}
.auth-field .form-control:focus, .auth-field input.login-input:focus, .auth-field input:focus {
    border-color: #831BEE !important; background: white !important;
    box-shadow: 0 0 0 3px rgba(131, 27, 238, 0.1) !important; outline: none !important;
}
.auth-field .has-error .form-control, .auth-field .has-error input { border-color: #EF4444 !important; }
.auth-field .invalid-feedback, .auth-field .help-block { font-size: 11px; color: #EF4444; margin-top: 3px; display: block; }
.auth-field .iti { width: 100% !important; }
.auth-field .iti input { border-radius: 10px !important; }

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

/* Divider */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.auth-divider hr { flex: 1; border: none; border-top: 1px solid #E5E7EB; margin: 0; }
.auth-divider span { font-family: 'Nunito', sans-serif; font-size: 11px; color: #9CA3AF; font-weight: 600; }

/* Google button */
.auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 9px 16px; border: 1.5px solid #E5E7EB; border-radius: 10px; font-family: 'Nunito', sans-serif;
    font-size: 13px; font-weight: 700; color: #374151; background: white; cursor: pointer; transition: all 0.2s; text-decoration: none !important; }
.auth-google-btn:hover { border-color: #D1D5DB; background: #F9FAFB; color: #374151; text-decoration: none; }

/* Primary button */
.auth-submit-btn { width: 100%; padding: 10px 20px; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif;
    font-size: 14px; font-weight: 700; color: white; cursor: pointer; transition: all 0.2s;
    background: linear-gradient(135deg, #831BEE, #6B15C5); box-shadow: 0 4px 14px rgba(131, 27, 238, 0.3); }
.auth-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(131, 27, 238, 0.4); }
.auth-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Footer */
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #F3F4F6; }
.auth-footer a { font-family: 'Nunito', sans-serif; font-size: 10px; color: #9CA3AF; text-decoration: none; }
.auth-footer a:hover { color: #831BEE; }
.auth-footer .sep { width: 3px; height: 3px; border-radius: 50%; background: #D1D5DB; }

/* Switch link */
.auth-switch { font-family: 'Nunito', sans-serif; font-size: 12px; color: #64748B; text-align: center; margin-top: 12px; }
.auth-switch a { color: #831BEE; font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Password toggle */
.auth-password-wrap { position: relative; }
.auth-password-wrap .toggle-pwd { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9CA3AF; font-size: 16px; padding: 0; line-height: 1; }
.auth-password-wrap .toggle-pwd:hover { color: #6B7280; }

/* Remember me */
.auth-remember { font-family: 'Nunito', sans-serif; font-size: 12px; color: #64748B; display: flex; align-items: center; gap: 6px; }
.auth-remember input[type="checkbox"] { width: 15px; height: 15px; border-radius: 4px; accent-color: #831BEE; }

/* Forgot password */
.auth-forgot { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; color: #831BEE; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; color: #6B15C5; }

/* Alert messages */
.auth-alert { font-family: 'Nunito', sans-serif; font-size: 12px; padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; }
.auth-alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.auth-alert-error { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

/* OTP */
.auth-otp-btn { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; color: #831BEE; background: #F5F3FF;
    border: 1px solid #DDD6FE; border-radius: 8px; padding: 5px 12px; cursor: pointer; transition: all 0.2s; margin-top: 6px; }
.auth-otp-btn:hover { background: #EDE9FE; border-color: #C4B5FD; }
.auth-otp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-otp-row { display: flex; gap: 8px; margin-top: 8px; }
.auth-otp-row input { flex: 1; font-family: 'Nunito', sans-serif !important; font-size: 15px !important; text-align: center;
    letter-spacing: 8px; padding: 7px 10px !important; border: 1.5px solid #E5E7EB !important; border-radius: 10px !important; }
.auth-otp-row input:focus { border-color: #831BEE !important; box-shadow: 0 0 0 3px rgba(131,27,238,0.1) !important; }
.auth-otp-verify { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700; color: white; background: #059669;
    border: none; border-radius: 10px; padding: 7px 16px; cursor: pointer; white-space: nowrap; }
.auth-otp-verify:hover { background: #047857; }
.auth-otp-verify:disabled { opacity: 0.5; }
.auth-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'Nunito', sans-serif;
    font-size: 11px; font-weight: 700; color: #059669; background: #D1FAE5; padding: 3px 10px; border-radius: 100px; margin-top: 6px; }

/* User type pills */
.auth-type-group { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.auth-type-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 100px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 1.5px solid #E2E8F0; color: #64748B; background: white; }
.auth-type-pill:hover { border-color: #C4B5FD; color: #831BEE; }
.auth-type-pill.active { border-color: #831BEE; background: #F5F3FF; color: #831BEE; }
.auth-type-pill.disabled { opacity: 0.4; cursor: not-allowed; }
.auth-type-pill .dot { width: 7px; height: 7px; border-radius: 50%; border: 2px solid currentColor; flex-shrink: 0; }
.auth-type-pill.active .dot { background: #831BEE; border-color: #831BEE; }

/* Hide reCAPTCHA v3 badge */
.grecaptcha-badge { visibility: hidden !important; }

/* Watch video */
.auth-video-link { position: absolute; top: 12px; right: 16px; z-index: 2; display: flex; align-items: center; gap: 4px;
    font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.8); text-decoration: none; }
.auth-video-link:hover { color: white; }
.auth-video-link svg { width: 14px; height: 14px; }