/* ═══════════════════════════════════════════════════
   AUTH PAGES — CYBERPUNK REDESIGN
   Matches dashboard / wallet design system
   Covers: login, register, forgot password, reset
═══════════════════════════════════════════════════ */

/* ── FULL-SCREEN WRAPPER ── */
.login-container,
.register-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
    background: var(--black);
}

/* animated background orbs */
.login-container::before,
.register-container::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 600px 500px at 20% 30%, rgba(0,71,255,0.12), transparent 70%),
        radial-gradient(ellipse 400px 400px at 80% 70%, rgba(0,245,255,0.07), transparent 70%);
    pointer-events: none; z-index: 0;
    animation: orb-drift 12s ease-in-out infinite alternate;
}
@keyframes orb-drift {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(30px,-20px) scale(1.05); }
}

/* ── CARD ── */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: 0 0 0 1px var(--border), 0 30px 80px rgba(0,0,0,0.5) !important;
    position: relative; z-index: 1;
    animation: card-in 0.5s cubic-bezier(0.22,1,0.36,1) both;
    overflow: visible !important;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* top accent line */
.card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
    pointer-events: none;
    z-index: 2;
}

/* bottom-right corner notch */
.card::after {
    content: '';
    position: absolute; bottom: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 18px 18px;
    border-color: transparent transparent var(--border) transparent;
    pointer-events: none;
}

/* ── CARD HEADER ── */
.card-header {
    background: var(--surface2) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1.75rem 2rem !important;
    position: relative;
}
.card-header::after {
    content: '';
    position: absolute; bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,245,255,0.25), transparent);
}
.card-header h2,
.card-header h3,
.card-header h4 {
    color: #fff !important;
    font-family: 'Orbitron', monospace !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* ── CARD BODY ── */
.card-body {
    padding: 1.75rem 2rem 2rem !important;
    background: var(--surface) !important;
}

/* ── LABELS ── */
.form-label,
.col-form-label {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.52rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--text-dim) !important;
    margin-bottom: 0.45rem !important;
    display: block;
}

/* ── FORM CONTROLS ── */
.form-control {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    color: #fff !important;
    padding: 0.65rem 0.9rem !important;
    border-radius: 0 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
}
.form-control:focus {
    background: rgba(1,21,53,0.9) !important;
    border-color: var(--cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(0,245,255,0.12), inset 0 0 20px rgba(0,245,255,0.03) !important;
}
.form-control::placeholder {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
}

/* ── CHECKBOX ── */
.form-check-input {
    width: 16px !important; height: 16px !important;
    background: var(--surface2) !important;
    border: 1px solid var(--border-bright) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    transition: all 0.2s !important;
    flex-shrink: 0;
}
.form-check-input:checked {
    background: var(--cyan) !important;
    border-color: var(--cyan) !important;
}
.form-check-input:checked::after {
    content: '✓';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    color: var(--black); font-size: 0.62rem; font-weight: 900; line-height: 1;
}
.form-check-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    color: var(--text-dim) !important;
    cursor: pointer;
}

/* ── BUTTONS ── */
.btn-primary {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
    color: var(--black) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.8rem 1.5rem !important;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transition: all 0.3s !important;
    position: relative; overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0; transition: opacity 0.3s;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
    box-shadow: var(--glow-cyan) !important;
    transform: translateY(-2px) !important;
    color: var(--black) !important;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0) !important; }

/* ── LINKS ── */
.btn-link {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.58rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: color 0.2s !important;
}
.btn-link:hover {
    color: var(--cyan) !important;
    text-decoration: none !important;
}

/* ── VALIDATION ── */
.invalid-feedback {
    font-family: 'Orbitron', monospace !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.5px !important;
    color: var(--danger) !important;
    margin-top: 0.35rem !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.is-invalid {
    border-color: var(--danger) !important;
}
.is-invalid:focus {
    box-shadow: 0 0 0 2px rgba(248,113,113,0.15) !important;
}

/* ── ALERTS ── */
.alert {
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1.25rem !important;
    border: 1px solid !important;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.alert-success {
    background: rgba(52,211,153,0.06) !important;
    border-color: rgba(52,211,153,0.4) !important;
    border-left: 3px solid #34d399 !important;
    color: #34d399 !important;
}
.alert-danger {
    background: rgba(248,113,113,0.06) !important;
    border-color: rgba(248,113,113,0.4) !important;
    border-left: 3px solid var(--danger) !important;
    color: var(--danger) !important;
}
.alert-warning {
    background: rgba(251,191,36,0.06) !important;
    border-color: rgba(251,191,36,0.4) !important;
    border-left: 3px solid var(--warning) !important;
    color: var(--warning) !important;
}
.alert-info {
    background: rgba(0,245,255,0.05) !important;
    border-color: rgba(0,245,255,0.3) !important;
    border-left: 3px solid var(--cyan) !important;
    color: var(--cyan) !important;
}

/* ── INPUT GROUP ── */
.input-group .input-group-text {
    background: var(--surface2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--cyan) !important;
    font-size: 0.9rem;
}
.input-group .form-control {
    border-left: none !important;
}
.input-group .form-control:focus {
    border-color: var(--cyan) !important;
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
    .text-md-end { text-align: left !important; }
    .card-body   { padding: 1.25rem !important; }
    .card-header { padding: 1.25rem !important; }
    .card-header h2,
    .card-header h3 { font-size: 0.9rem !important; letter-spacing: 2px !important; }
}
@media(max-width:480px){
    .login-container,
    .register-container { padding: 1rem 0.75rem; align-items: flex-start; padding-top: 3rem; }
}