/* ============================================================================
   iOS 27 · Liquid Glass sign-in page (round 56) — auth/login.php only (body.ios27-login)
   System By Harees KR | 0773 207 160 | harees@fashionbug.lk
   ============================================================================ */
body.ios27-login {
    --g: 45;
    --i-blue: #0A84FF; --i-green: #30D158; --i-red: #FF453A; --i-orange: #FF9F0A; --i-purple: #BF5AF2; --i-teal: #64D2FF; --i-pink: #FF375F;
    --glass-a: calc(.05 + var(--g) * .0026); --glass-b: calc(.02 + var(--g) * .0014);
    --glass-blur: calc(16px + var(--g) * .22px); --glass-tint: calc(var(--g) * .0016);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -.011em; background: #05060b; color: rgb(255 255 255 / .96);
}
.ios27-wallpaper { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ios27-wallpaper i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .62; animation: iosDrift 32s ease-in-out infinite alternate; will-change: transform; }
.ios27-wallpaper i:nth-child(1) { width: 620px; height: 620px; left: 8%; top: -14%; background: radial-gradient(circle, var(--i-blue), transparent 68%); }
.ios27-wallpaper i:nth-child(2) { width: 560px; height: 560px; right: 4%; top: 10%; background: radial-gradient(circle, var(--i-purple), transparent 68%); animation-duration: 38s; animation-delay: -8s; opacity: .52; }
.ios27-wallpaper i:nth-child(3) { width: 520px; height: 520px; left: 32%; bottom: -18%; background: radial-gradient(circle, var(--i-teal), transparent 68%); animation-duration: 44s; animation-delay: -14s; opacity: .42; }
.ios27-wallpaper i:nth-child(4) { width: 440px; height: 440px; left: -6%; bottom: 6%; background: radial-gradient(circle, var(--i-pink), transparent 68%); animation-duration: 36s; animation-delay: -20s; opacity: .34; }
@keyframes iosDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px,40px,0) scale(1.12); } }
@keyframes iosRise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

body.ios27-login .login-wrap { position: relative; z-index: 1; background: none; min-height: 100vh; min-height: 100dvh; }
body.ios27-login .login-card {
    position: relative; max-width: 410px; padding: 34px 32px 26px; border: 0; border-radius: 36px; text-align: center;
    background:
        radial-gradient(120% 80% at 0% 0%, rgb(140 175 255 / var(--glass-tint)) 0%, transparent 62%),
        linear-gradient(155deg, rgb(255 255 255 / calc(var(--glass-a) + .03)) 0%, rgb(255 255 255 / var(--glass-b)) 62%);
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 8px)) saturate(190%) brightness(1.06); backdrop-filter: blur(calc(var(--glass-blur) + 8px)) saturate(190%) brightness(1.06);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), inset 0 0 0 .5px rgb(255 255 255 / .22), inset 0 -20px 36px -24px rgb(255 255 255 / .14), 0 40px 90px -30px rgb(0 0 0 / .85), 0 3px 12px rgb(0 0 0 / .25);
    animation: iosRise .8s cubic-bezier(.2,.8,.2,1) both;
}
body.ios27-login .login-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(140deg, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 64%, rgb(255 255 255 / .28) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
body.ios27-login .login-card .brand-logo-img { height: 46px; margin: 0 auto 14px; filter: drop-shadow(0 6px 22px rgb(255 69 58 / .45)); animation: none; }
.lg-title { margin: 0 0 4px; font-size: 28px; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(180deg, #fff 30%, rgb(255 255 255 / .7)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lg-sub { margin: 0 0 24px; font-size: 13px; color: rgb(235 235 245 / .62); }
body.ios27-login form { text-align: left; }
body.ios27-login label { color: rgb(235 235 245 / .62); font-size: 12px; font-weight: 600; margin: 0 0 6px 6px; }
body.ios27-login .form-row { margin-bottom: 14px; }
body.ios27-login input[type=text], body.ios27-login input[type=password] {
    width: 100%; background: rgb(255 255 255 / .10); border: 0; color: #fff; border-radius: 999px; padding: 13px 18px; font-size: 15px; font-family: inherit;
    box-shadow: inset 0 .5px 0 rgb(255 255 255 / .3), inset 0 0 0 .5px rgb(255 255 255 / .14);
    transition: box-shadow .2s ease, background .2s ease;
}
body.ios27-login input::placeholder { color: rgb(235 235 245 / .38); }
body.ios27-login input:focus { outline: none; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1.5px var(--i-blue), 0 0 0 5px rgb(10 132 255 / .24); border: 0; }
body.ios27-login input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px rgb(40 50 80 / .9) inset; caret-color: #fff; }
.lg-pw { position: relative; }
.lg-pw input { padding-right: 52px !important; }
.lg-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; font-size: 15px; color: #fff; opacity: .6; background: transparent; transition: background .2s ease, opacity .2s ease; }
.lg-eye:hover { background: rgb(255 255 255 / .12); opacity: 1; }
.lg-eye.on { background: rgb(10 132 255 / .4); opacity: 1; }
body.ios27-login .btn-primary { margin-top: 8px; padding: 14px 18px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #fff; cursor: pointer;
    background: linear-gradient(160deg, #4aa8ff, #0A84FF 55%, #0066d6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 12px 28px -8px rgb(10 132 255 / .7); transition: transform .3s cubic-bezier(.2,.9,.25,1.2), box-shadow .25s ease, filter .2s ease; }
body.ios27-login .btn-primary:hover { transform: translateY(-2px) scale(1.01); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 18px 34px -8px rgb(10 132 255 / .85); opacity: 1; }
body.ios27-login .btn-primary:active { transform: scale(.98); }
body.ios27-login .alert-box { margin: 0 0 16px; padding: 11px 16px; border: 0; border-radius: 18px; font-size: 13px; font-weight: 600; text-align: left; background: rgb(255 69 58 / .2); color: #ff9b94; box-shadow: inset 0 .5px 0 rgb(255 255 255 / .3); animation: lgShake .4s ease; }
@keyframes lgShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.lg-foot { margin-top: 22px; font-size: 11.5px; color: rgb(235 235 245 / .42); }
.lg-foot strong { color: rgb(255 255 255 / .75); }
@media (max-width: 480px) { body.ios27-login .login-card { padding: 28px 22px 22px; border-radius: 32px; } .lg-title { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .ios27-wallpaper i, body.ios27-login .login-card, body.ios27-login .alert-box { animation: none; } }