/* ============================================================================
   LIQUID GLASS — auth pages (login, forgot/reset password, register, otp).
   LIGHT variant. Pure CSS override, scoped under .auth-bg so ONLY auth screens
   are affected.

   TO REVERT COMPLETELY:
     1. delete this file (public/liquid-glass-auth.css)
     2. remove the single <link ... liquid-glass-auth.css> line from
        resources/views/layouts/auth.blade.php
   No markup, routes, controllers, or business logic are touched.
   ============================================================================ */

/* ---- Soft pastel colour field behind the glass ------------------------------ */
.auth-bg {
    position: relative;
    min-height: 100vh;
    background: #eef1ff;
    overflow: hidden;
}
.auth-bg::before {
    content: "";
    position: fixed;
    inset: -20vmax;
    z-index: 0;
    background:
        radial-gradient(42vmax 42vmax at 15% 15%, #c7b6ff 0%, transparent 62%),
        radial-gradient(40vmax 40vmax at 85% 20%, #b6e6ff 0%, transparent 62%),
        radial-gradient(38vmax 38vmax at 30% 90%, #ffc9de 0%, transparent 62%),
        radial-gradient(32vmax 32vmax at 80% 85%, #c2f5e4 0%, transparent 62%);
    filter: blur(45px) saturate(125%);
    animation: lg-drift 26s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes lg-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-4vmax, -3vmax) scale(1.1); }
}
/* keep all real content above the colour field */
.auth-bg .container-fuild,
.auth-bg .row,
.auth-bg form { position: relative; z-index: 2; }

/* ---- The glass card (bright frosting) --------------------------------------- */
.auth-bg .card {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 24px !important;
    box-shadow:
        0 10px 34px rgba(80, 90, 160, 0.22),
        0 2px 8px rgba(80, 90, 160, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    overflow: hidden;
    position: relative;
}
/* slow light sheen sweeping across the surface */
.auth-bg .card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.45) 48%,
        rgba(255,255,255,0) 66%);
    transform: translateX(-120%);
    animation: lg-sheen 7s ease-in-out infinite;
}
@keyframes lg-sheen {
    0%, 60% { transform: translateX(-120%); }
    100%    { transform: translateX(120%); }
}

/* ---- Typography on the glass (dark for contrast) ---------------------------- */
.auth-bg .card-body h5,
.auth-bg .form-label,
.auth-bg .form-check-label { color: #242a52 !important; }
.auth-bg .card-body p      { color: rgba(36, 42, 82, 0.66) !important; }
.auth-bg a                 { color: #6a4ff0 !important; }
.auth-bg a:hover           { color: #4b2fd6 !important; }

/* ---- Inputs as bright frosted "wells" --------------------------------------- */
.auth-bg .input-group {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-bg .input-group:focus-within {
    border-color: rgba(123, 92, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.25);
}
.auth-bg .input-group-text {
    background: transparent !important;
    border: 0 !important;
    color: rgba(36, 42, 82, 0.6) !important;
}
.auth-bg .form-control {
    background: transparent !important;
    border: 0 !important;
    color: #242a52 !important;
    box-shadow: none !important;
}
.auth-bg .form-control::placeholder { color: rgba(36, 42, 82, 0.45) !important; }
.auth-bg .toggle-password { color: rgba(36, 42, 82, 0.6) !important; }

/* ---- Checkbox --------------------------------------------------------------- */
.auth-bg .form-check-input {
    background-color: rgba(255, 255, 255, 0.7);
    border-color: rgba(123, 92, 255, 0.45);
}
.auth-bg .form-check-input:checked {
    background-color: #7b5cff;
    border-color: #7b5cff;
}

/* ---- Primary button (keeps existing gradient, adds glass depth) -------------- */
.auth-bg .btn.bg-primary-gradient {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 8px 22px rgba(123, 92, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transition: transform .15s, filter .2s, box-shadow .2s;
}
.auth-bg .btn.bg-primary-gradient:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* ---- Flash / validation alerts: light glass --------------------------------- */
.auth-bg .alert {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    color: #242a52 !important;
    border-radius: 14px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ---- Respect reduced-motion preference -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-bg::before,
    .auth-bg .card::before { animation: none; }
}