/* ======================================== */
/* auth.css - Extracted from blade      */
/* ======================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; min-height: 100vh; display: flex; background: #f0f2f5; }

/* Left panel — branding */
.auth-left {
    flex: 0 0 44%; display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: linear-gradient(135deg, #024A57 0%, #04A5B5 50%, #06D6A0 100%);
    padding: 60px 48px; position: relative; overflow: hidden;
}
.auth-left::before {
    content: ''; position: absolute; top: -120px; right: -120px; width: 400px; height: 400px;
    border-radius: 50%; background: rgba(255,255,255,0.05);
}
.auth-left::after {
    content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px;
    border-radius: 50%; background: rgba(255,255,255,0.04);
}
.auth-brand { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: 2px; z-index: 1; }
.auth-tagline { color: rgba(255,255,255,0.8); font-size: 1rem; margin-top: 12px; text-align: center; line-height: 1.5; z-index: 1; }
.auth-features { list-style: none; margin-top: 40px; z-index: 1; }
.auth-features li { color: rgba(255,255,255,0.85); font-size: 0.88rem; padding: 8px 0; display: flex; align-items: center; gap: 10px; }
.auth-features li::before { content: '✓'; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.15); align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }

/* Right panel — form */
.auth-right {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 48px 32px;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card-header { margin-bottom: 28px; }
.auth-card-title { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; }
.auth-card-sub { font-size: 0.88rem; color: #888; margin-top: 6px; }

/* Form */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: #555; margin-bottom: 6px; }
.form-input {
    width: 100%; padding: 12px 16px; border: 1.5px solid #e0e0e0; border-radius: 12px;
    font-size: 0.9rem; color: #1a1a1a; outline: none; transition: all 0.15s;
    font-family: 'Inter', sans-serif;
}
.form-input:focus { border-color: #04A5B5; box-shadow: 0 0 0 3px rgba(4,165,181,0.1); }
.form-input::placeholder { color: #bbb; }
.form-input.error { border-color: #ef4444; }

.form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #666; cursor: pointer; }
.form-check input { width: 16px; height: 16px; accent-color: #04A5B5; cursor: pointer; }
.form-link { font-size: 0.82rem; color: #04A5B5; text-decoration: none; font-weight: 600; }
.form-link:hover { text-decoration: underline; }

.btn-submit {
    width: 100%; padding: 13px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, #024A57, #04A5B5); color: #fff;
    font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
    font-family: 'Inter', sans-serif;
}
.btn-submit:hover { opacity: 0.92; }

.form-footer { text-align: center; margin-top: 24px; font-size: 0.85rem; color: #888; }
.form-footer a { color: #04A5B5; font-weight: 600; text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: 10px; font-size: 0.84rem; margin-bottom: 18px; }
.alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; }

/* Phone input prefix */
.phone-wrap { display: flex; gap: 0; }
.phone-prefix {
    padding: 12px 14px; border: 1.5px solid #e0e0e0; border-right: none; border-radius: 12px 0 0 12px;
    background: #f8f8f8; font-size: 0.9rem; color: #555; font-weight: 600; white-space: nowrap;
}
.phone-wrap .form-input { border-radius: 0 12px 12px 0; }

/* Back to home */
.back-home { position: absolute; top: 24px; left: 24px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.82rem; display: flex; align-items: center; gap: 6px; z-index: 2; }
.back-home:hover { color: #fff; }

/* Password toggle */
.pass-wrap { position: relative; }
.pass-wrap .form-input { padding-right: 44px; }
.pass-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #999; padding: 4px; }
.pass-toggle:hover { color: #555; }

/* Responsive */
@media (max-width: 768px) {
    body { flex-direction: column; }
    .auth-left { flex: none; padding: 40px 24px; min-height: auto; }
    .auth-features { display: none; }
    .auth-right { padding: 32px 20px; }
}/* User type selection grid */
.utype-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.utype-opt {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 14px 10px; border: 1.5px solid #e0e0e0; border-radius: 12px;
    cursor: pointer; transition: all .2s; position: relative; background: #fff;
}
.utype-opt:hover { border-color: #04A5B5; background: #f8fdfe; }
.utype-opt.active { border-color: #04A5B5; background: rgba(4,165,181,.06); box-shadow: 0 0 0 3px rgba(4,165,181,.1); }
.utype-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.utype-icon { font-size: 1.3rem; margin-bottom: 4px; }
.utype-name { font-size: .78rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.utype-desc { font-size: .65rem; color: #999; line-height: 1.3; margin-top: 2px; }

@media (max-width: 480px) {
    .utype-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .utype-opt { padding: 10px 6px; }
}