/* ============================================================
   BizChat.io — premium auth screens (login / password reset /
   email verification). LIGHT theme: same clean white card the
   panel already uses, elevated with a soft brand-tinted backdrop,
   gentle entrance animations and a polished button.

   Scoped entirely to Filament's "simple" layout (.fi-simple-*),
   which only renders on these auth pages — nothing here can leak
   onto the dashboard or any other panel screen.
   ============================================================ */

@keyframes bz-auth-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(4%, -6%) scale(1.07); }
    66%  { transform: translate(-3%, 4%) scale(.95); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes bz-auth-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes bz-auth-pop {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes bz-auth-logo-in {
    0%   { opacity: 0; transform: scale(.65) rotate(-6deg); }
    60%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes bz-auth-shine {
    from { transform: translateX(-130%) skewX(-20deg); }
    to   { transform: translateX(230%) skewX(-20deg); }
}

/* ---------- backdrop: airy light gradient with soft brand blobs ---------- */
.fi-simple-layout {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #f4f8fd 0%, #eef3fa 45%, #f6f2fb 100%);
}

.bz-auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bz-auth-bg span {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35;
    animation: bz-auth-drift 26s ease-in-out infinite;
}
.bz-auth-bg span:nth-child(1) {
    width: 36vw; height: 36vw; top: -12vw; left: -8vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--bz-brand, #0b7fc6) 65%, #fff), transparent 70%);
    animation-duration: 28s;
}
.bz-auth-bg span:nth-child(2) {
    width: 30vw; height: 30vw; bottom: -12vw; right: -8vw;
    background: radial-gradient(circle, #c4b5fd, transparent 70%);
    animation-duration: 32s; animation-delay: -9s;
}
.bz-auth-bg span:nth-child(3) {
    width: 22vw; height: 22vw; bottom: 16vh; left: 6vw;
    background: radial-gradient(circle, #a5f3fc, transparent 70%);
    animation-duration: 22s; animation-delay: -5s; opacity: .28;
}

/* faint dot grid for texture — barely there, adds "designed" depth */
.fi-simple-layout::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(11,127,198,.08) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(75% 60% at 50% 25%, #000 0%, transparent 78%);
}
.fi-simple-main-ctn { position: relative; z-index: 1; }

/* ---------- the card: white, floating, premium shadow ---------- */
.fi-simple-main {
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,.85) !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 1px rgba(255,255,255,.9) inset,
        0 24px 70px -18px color-mix(in srgb, var(--bz-brand, #0b7fc6) 28%, rgba(15,23,42,.25)),
        0 6px 20px -8px rgba(15,23,42,.12) !important;
    animation: bz-auth-pop .55s .08s cubic-bezier(.22,.8,.36,1) both;
    transition: box-shadow .3s ease;
}
.fi-simple-main:hover {
    box-shadow:
        0 1px 1px rgba(255,255,255,.9) inset,
        0 30px 80px -18px color-mix(in srgb, var(--bz-brand, #0b7fc6) 34%, rgba(15,23,42,.28)),
        0 8px 24px -8px rgba(15,23,42,.14) !important;
}
/* a hairline brand gradient along the card's top edge — the "premium" signature */
.fi-simple-main {
    position: relative;
}
.fi-simple-main::before {
    content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, transparent, var(--bz-brand, #0b7fc6) 30%, #7c3aed 70%, transparent);
    opacity: .75;
}

/* ---------- logo + heading entrance ---------- */
.fi-simple-header { animation: bz-auth-fade-up .55s cubic-bezier(.22,.8,.36,1) both; }
.fi-simple-header img, .fi-simple-header svg {
    animation: bz-auth-logo-in .65s cubic-bezier(.22,.8,.36,1) both;
    filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--bz-brand, #0b7fc6) 30%, transparent));
}
.fi-simple-header-heading {
    letter-spacing: -.015em;
    animation: bz-auth-fade-up .55s .1s cubic-bezier(.22,.8,.36,1) both;
}
.fi-simple-header-subheading { animation: bz-auth-fade-up .55s .16s cubic-bezier(.22,.8,.36,1) both; }

/* the form itself drifts in a beat after the header */
.fi-simple-page form { animation: bz-auth-fade-up .55s .2s cubic-bezier(.22,.8,.36,1) both; }

/* ---------- inputs: calm resting state, lively brand focus ---------- */
.fi-simple-main .fi-input-wrp {
    border-radius: 12px !important;
    background: #fbfcfe !important;
    --tw-ring-color: rgba(15,23,42,.1) !important;
    transition: box-shadow .2s cubic-bezier(.22,.8,.36,1), background .2s, transform .15s;
}
.fi-simple-main .fi-input-wrp:hover { background: #fff !important; }
.fi-simple-main .fi-input-wrp:focus-within {
    background: #fff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bz-brand, #0b7fc6) 18%, transparent) !important;
    --tw-ring-color: var(--bz-brand, #0b7fc6) !important;
    transform: translateY(-1px);
}

/* ---------- submit button: gradient, lift, light sweep ---------- */
.fi-simple-main .fi-btn {
    position: relative; overflow: hidden;
    border-radius: 12px !important;
    transition: transform .15s cubic-bezier(.22,.8,.36,1), box-shadow .2s, filter .2s;
}
.fi-simple-main .fi-btn-color-primary {
    background: linear-gradient(120deg, var(--bz-brand, #0b7fc6), color-mix(in srgb, var(--bz-brand, #0b7fc6) 62%, #7c3aed)) !important;
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--bz-brand, #0b7fc6) 60%, transparent) !important;
    border: none !important;
}
.fi-simple-main .fi-btn::after {
    content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    pointer-events: none;
}
.fi-simple-main .fi-btn:hover::after { animation: bz-auth-shine .85s ease; }
.fi-simple-main .fi-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.fi-simple-main .fi-btn:active { transform: translateY(0) scale(.98); }

/* links (forgot password / register): brand colour + underline grow */
.fi-simple-main a:not(.fi-btn) { position: relative; font-weight: 600; }
.fi-simple-main a:not(.fi-btn)::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1.5px;
    background: currentColor; transition: right .2s cubic-bezier(.22,.8,.36,1);
}
.fi-simple-main a:not(.fi-btn):hover::after { right: 0; }

/* ---------- dark-mode users still get a coherent card ---------- */
.dark .fi-simple-layout { background: linear-gradient(160deg, #0d1524 0%, #0f172a 55%, #131126 100%); }
.dark .fi-simple-layout::before { background-image: radial-gradient(rgba(125,211,252,.07) 1px, transparent 1px); }
.dark .fi-simple-main {
    background: rgba(17,24,39,.82) !important;
    border-color: rgba(255,255,255,.08) !important;
}
.dark .fi-simple-main .fi-input-wrp { background: rgba(255,255,255,.04) !important; --tw-ring-color: rgba(255,255,255,.14) !important; }
.dark .fi-simple-main .fi-input-wrp:hover,
.dark .fi-simple-main .fi-input-wrp:focus-within { background: rgba(255,255,255,.07) !important; }

/* ---------- accessibility + small screens ---------- */
@media (prefers-reduced-motion: reduce) {
    .bz-auth-bg span, .fi-simple-header, .fi-simple-header img, .fi-simple-header svg,
    .fi-simple-header-heading, .fi-simple-header-subheading, .fi-simple-main,
    .fi-simple-page form, .fi-simple-main .fi-btn:hover::after { animation: none !important; }
}
@media (max-width: 480px) {
    .bz-auth-bg span { filter: blur(45px); }
    .fi-simple-main { border-radius: 16px !important; }
}