/* ===== HOMESPA LOGIN THEME (Purple tone like SPA home) ===== */

:root {
    --hx1: #a21caf;
    --hx2: #8b5cf6;
    --hx3: #6d28d9;
    --ink: #0f172a;
    --muted: rgba(15,23,42,.60);
    --bd: rgba(15,23,42,.10);
    --card: rgba(255,255,255,.92);
    --shadow: 0 18px 45px rgba(2,6,23,.18);
    --shadow2: 0 12px 28px rgba(2,6,23,.10);
}

html, body {
    height: 100%;
}

body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(900px 420px at 10% 0%, rgba(255,255,255,.22), transparent 60%), radial-gradient(650px 380px at 90% 10%, rgba(255,255,255,.18), transparent 55%), linear-gradient(180deg, var(--hx1), var(--hx2));
    color: var(--ink);
}

/* container + card */
.login-container {
    filter: drop-shadow(0 18px 45px rgba(2,6,23,.18));
}

.card {
    background: var(--card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: var(--shadow);
}

.card-body {
    background: rgba(255,255,255,.92);
}

/* header (top block) */
.login-header {
    position: relative;
    background: radial-gradient(900px 360px at 20% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(180deg, var(--hx1), var(--hx2));
}

    .login-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.85));
        opacity: .85;
    }

    .login-header h1 {
        letter-spacing: .3px;
    }

    .login-header p {
        opacity: .88;
    }

/* inputs + icons */
.form-label {
    color: rgba(255,255,255,.0); /* keep bootstrap default, we override below for forms */
}

#loginForm .form-label,
#registerForm .form-label {
    color: rgba(15,23,42,.72);
}

.form-control {
    border-radius: 14px !important;
    border: 2px solid rgba(15,23,42,.10) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    padding: 10px 12px 10px 40px; /* left icon space */
    font-weight: 600;
    color: rgba(15,23,42,.90);
}

    .form-control::placeholder {
        color: rgba(15,23,42,.45);
        font-weight: 600;
    }

/* icon position */
.position-relative .input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    opacity: .75;
}

/* focus style */
.form-control:focus {
    border-color: rgba(162,28,175,.55) !important;
    box-shadow: 0 0 0 4px rgba(162,28,175,.12) !important;
    transform: translateY(-1px);
}

/* JS adds .focused on parent */
.position-relative.focused .input-icon {
    color: var(--hx1);
    opacity: 1;
}

/* invalid/valid */
.is-invalid {
    border-color: rgba(239,68,68,.55) !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important;
}

.is-valid {
    border-color: rgba(34,197,94,.55) !important;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}

/* checkboxes */
.form-check-input {
    border-color: rgba(15,23,42,.25);
}

    .form-check-input:checked {
        background-color: var(--hx1);
        border-color: var(--hx1);
        box-shadow: 0 0 0 4px rgba(162,28,175,.12);
    }

.form-check-label {
    color: rgba(15,23,42,.70);
    font-weight: 600;
}

/* links */
a {
    color: var(--hx1);
}

    a:hover {
        color: var(--hx3);
    }

/* buttons */
.btn {
    border-radius: 14px !important;
    font-weight: 800;
    letter-spacing: .2px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-primary {
    border: 0 !important;
    background: linear-gradient(90deg, var(--hx1), var(--hx2)) !important;
    box-shadow: 0 14px 30px rgba(162,28,175,.25);
}

    .btn-primary:hover {
        filter: brightness(1.02);
        transform: translateY(-1px);
        box-shadow: 0 18px 40px rgba(162,28,175,.28);
    }

.btn-success {
    border: 0 !important;
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
    box-shadow: 0 14px 30px rgba(22,163,74,.22);
}

    .btn-success:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 40px rgba(22,163,74,.26);
    }

/* subtle separators */
.border-top {
    border-top: 1px solid rgba(15,23,42,.10) !important;
}

/* register helper note */
#registerForm .text-danger.small {
    color: rgba(162,28,175,.85) !important;
    font-weight: 700;
}

/* spacing & mobile */
@media (max-width: 576px) {
    body {
        padding: 12px !important;
    }

    .login-container {
        max-width: 420px !important;
    }

    .card {
        border-radius: 18px !important;
    }

    .card-body {
        padding: 16px !important;
    }

    .login-header {
        padding: 18px !important;
    }

    .form-control {
        padding: 11px 12px 11px 40px;
    }
}

/* Nice small glow at bottom */
.card::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, rgba(162,28,175,.0), rgba(162,28,175,.35), rgba(162,28,175,.0));
}