/* Minimal Premium -- ported from the supplied elvis-minimal-login.html reference.
   Fully self-contained: every rule is scoped under .login-minimal so this file can be edited
   without any risk of affecting Split or FullScreen, and vice versa.
   Properties with an exact Bootstrap utility equivalent (flex/position/text-align/w-100/h-100/
   rounded-circle/pe-none) are applied as classes on the elements in _LoginLayoutMinimal.cshtml
   instead of being redeclared here -- anything with a custom value (spacing, colors, breakpoints)
   stays in this file. */
/* The gradient lives on <body>, not .login-minimal itself -- body always spans the page's full
   scrollable content height by definition, so this can never fall short the way a height on
   .login-minimal (auto-sized by its grid content) could if that box ever comes up short of the
   true page height. :has() is supported by every evergreen browser; login-page.css gives body.login-page
   a plain fallback color for anything that doesn't. */
body.login-page:has(.login-minimal) {
    background:
        radial-gradient(circle at 13% 18%, rgba(127, 93, 247, .15), transparent 24%),
        radial-gradient(circle at 85% 82%, rgba(72, 197, 168, .09), transparent 25%),
        linear-gradient(135deg, #faf9ff 0%, #fff 52%, #f9fbfb 100%);
    background-attachment: fixed;
}

.login-minimal {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    color: #15213f;
}

.login-minimal .o1 {
    width: 260px;
    height: 260px;
    left: -90px;
    top: -80px;
    border: 1px solid rgba(121, 92, 238, .10);
    box-shadow: inset 0 0 0 55px rgba(121, 92, 238, .025);
}

.login-minimal .o2 {
    width: 240px;
    height: 240px;
    right: -80px;
    bottom: -70px;
    border: 1px solid rgba(42, 179, 142, .12);
    box-shadow: inset 0 0 0 45px rgba(42, 179, 142, .025);
}

.login-minimal .grain {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(#b7bed4 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(135deg, black, transparent 54%, black);
    -webkit-mask-image: linear-gradient(135deg, black, transparent 54%, black);
}

.login-minimal .minimal-card {
    z-index: 2;
    width: min(92%, 460px);
    margin: 40px 0;
    padding: 32px 34px 30px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 22px;
    background: rgba(255, 255, 255, .80);
    backdrop-filter: blur(24px);
    box-shadow: 0 28px 70px rgba(38, 43, 88, .11);
}

.login-minimal .brand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.03em;
    color: #152143;
}

.login-minimal .logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, #7d61ef, #ab71ef);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 18px rgba(119, 91, 225, .18);
}

.login-minimal .logo i {
    font-size: 20px;
}

/* Same fix as login-fullscreen.css's .brand-mark-logo -- a real logo drops the boxed/badge look
   (that's only right for the icon fallback) and sizes to a fixed, nominal width with height:auto so
   it stays proportional to its own source dimensions instead of stretching into a fixed square. */
.login-minimal .logo.logo-img {
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

/* Same max-height cap as login-split.css's .logo-slot-logo img -- a portrait/near-square logo
   scaled to width:150px alone could render tall enough to crowd "Welcome back" below it. */
.login-minimal .logo-img img {
    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.login-minimal h1 {
    font-size: 31px;
    letter-spacing: -.04em;
    margin: 26px 0 8px;
}

.login-minimal .sub {
    color: #76829a;
    margin: 0 0 30px;
    font-size: 14px;
}

.login-minimal .field {
    margin-bottom: 16px;
}

.login-minimal .label {
    font-size: 13px;
    font-weight: 700;
    color: #22304c;
    margin-bottom: 8px;
}

.login-minimal .input {
    height: 50px;
    border: 1px solid #dde2eb;
    border-radius: 11px;
    background: rgba(255, 255, 255, .94);
    padding: 0 12px;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(38, 48, 80, .035);
}

.login-minimal .input > i {
    font-size: 17px;
    color: #7a879d;
    flex: none;
}

.login-minimal .input input {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: #24314e;
}

.login-minimal .input input::placeholder {
    color: #8b96aa;
}

.login-minimal .eye {
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #7a879d;
    padding: 4px;
    cursor: pointer;
}

.login-minimal .eye i {
    font-size: 17px;
}

.login-minimal .forgot-row {
    margin: 7px 0 19px;
}

.login-minimal .forgot-row a {
    font-size: 13px;
    color: #6755e8;
    text-decoration: none;
    font-weight: 700;
}

.login-minimal .cta {
    height: 50px;
    border: 0;
    border-radius: 11px;
    background: #6a55e8;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--login-font-family, "Inter", sans-serif);
    box-shadow: 0 10px 22px rgba(106, 85, 232, .16);
    cursor: pointer;
}

.login-minimal .cta:hover {
    background: #5f4bdb;
}

.login-minimal .contact {
    color: #7c879a;
    font-size: 12px;
    margin: 18px 0 0;
}

.login-minimal .contact a {
    color: #6755e8;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 620px) {
    .login-minimal {
        height: auto;
        min-height: 100vh;
        padding: 30px 0;
    }

    .login-minimal .minimal-card {
        margin: 18px 0;
    }
}