@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* =====================================================
   SmartLift / Gearless Login Theme
   نسخة خضراء مستوحاة من هوية النظام مع كحلي وأبيض ولمسات صفراء
   ===================================================== */
:root {
    --sys-primary: #10b981;
    --sys-primary-2: #22c55e;
    --sys-primary-dark: #0f8a56;
    --sys-navy: #101b2d;
    --sys-navy-2: #15243a;
    --sys-green: #12b981;
    --sys-green-2: #0aa36d;
    --sys-yellow: #f6c145;
    --sys-bg: #f4f8fc;
    --sys-card: rgba(255, 255, 255, .92);
    --sys-card-strong: #ffffff;
    --sys-border: rgba(16, 185, 129, .18);
    --sys-text: #102033;
    --sys-muted: #617286;
    --sys-shadow: 0 28px 70px rgba(16, 27, 45, .22);
    --sys-glow-blue: rgba(16, 185, 129, .28);
    --sys-glow-green: rgba(18, 185, 129, .22);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--sys-bg);
    overflow-x: hidden;
}

.d-none { display: none !important; }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.member-login-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 42px 20px;
    isolation: isolate;
    background:
        radial-gradient(circle at 83% 14%, rgba(16, 185, 129, .18), transparent 28%),
        radial-gradient(circle at 16% 86%, rgba(18, 185, 129, .14), transparent 28%),
        linear-gradient(135deg, #f6fcf8 0%, #edf8f1 34%, #e2f5ea 64%, #f8fcf7 100%);
}

.member-login-page::before {
    content: "";
    position: absolute;
    inset: -24%;
    background:
        linear-gradient(115deg, transparent 0 40%, rgba(16,185,129,.08) 45%, transparent 52% 100%),
        repeating-linear-gradient(135deg, rgba(16,185,129,.06) 0 1px, transparent 1px 66px);
    transform: rotate(-6deg);
    animation: slowPan 12s linear infinite alternate;
    z-index: -4;
}

.member-login-page::after {
    content: "";
    position: absolute;
    inset: auto -9% -22% auto;
    width: 680px;
    height: 680px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(16,185,129,.18), rgba(18,185,129,.12));
    filter: blur(3px);
    z-index: -3;
    animation: floatShape 8s ease-in-out infinite alternate;
}

.login-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

.ambient-shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(5px);
    opacity: .55;
    animation: floatShape 7s ease-in-out infinite alternate;
}
.shape-1 {
    width: 360px;
    height: 360px;
    right: 9%;
    top: 7%;
    background: radial-gradient(circle, rgba(16,185,129,.18), rgba(16,185,129,.04), transparent 68%);
}
.shape-2 {
    width: 320px;
    height: 320px;
    left: 7%;
    bottom: 8%;
    background: radial-gradient(circle, rgba(16,27,45,.13), rgba(16,185,129,.05), transparent 70%);
    animation-delay: 1.2s;
}
.shape-3 {
    width: 190px;
    height: 190px;
    left: 28%;
    top: 16%;
    background: radial-gradient(circle, rgba(18,185,129,.20), rgba(18,185,129,.04), transparent 72%);
    animation-delay: 2.1s;
}

.ambient-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--sys-primary);
    box-shadow: 0 0 24px rgba(16,185,129,.35);
    animation: dotDrift 6.5s ease-in-out infinite;
}
.dot-1 { right: 16%; bottom: 23%; opacity: .42; }
.dot-2 { right: 31%; top: 22%; animation-delay: .7s; background: var(--sys-yellow); opacity: .68; }
.dot-3 { left: 19%; top: 31%; animation-delay: 1.4s; background: var(--sys-green); opacity: .72; }
.dot-4 { left: 27%; bottom: 20%; animation-delay: 2.2s; background: var(--sys-primary-dark); opacity: .38; }

.ambient-line {
    position: absolute;
    width: 190px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,.24), transparent);
    transform: rotate(-18deg);
    animation: lineSlide 5.5s ease-in-out infinite alternate;
}
.line-1 { right: 7%; bottom: 38%; }
.line-2 { left: 8%; top: 30%; animation-delay: 1.5s; }

.member-login-wrap {
    width: min(430px, 100%);
    position: relative;
    padding-top: 76px;
    text-align: center;
    animation: wrapEnter .8s cubic-bezier(.2,.9,.2,1) both;
}

.brand-avatar {
    position: absolute;
    top: 0;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translateX(-50%);
    z-index: 5;
    display: grid;
    place-items: center;
    animation: avatarFloat 4s ease-in-out infinite alternate;
}
.avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: conic-gradient(from 90deg, var(--sys-primary), #ffffff, var(--sys-green), var(--sys-yellow), var(--sys-primary));
    box-shadow: 0 18px 40px rgba(16, 185, 129, .23), 0 0 0 10px rgba(255,255,255,.45);
    animation: ringSpin 10s linear infinite;
}
.avatar-inner {
    width: 136px;
    height: 136px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 35% 24%, rgba(255,255,255,.98), rgba(255,255,255,.88) 38%, rgba(235,247,255,.94) 70%),
        #fff;
    border: 4px solid rgba(255,255,255,.72);
    box-shadow: inset 0 0 34px rgba(16,185,129,.10), 0 8px 22px rgba(16,27,45,.16);
    overflow: hidden;
    position: relative;
}
.avatar-inner::after {
    content: "";
    position: absolute;
    inset: auto 20px 16px;
    height: 35px;
    border-radius: 50% 50% 42% 42%;
    background: rgba(16,185,129,.07);
}
.avatar-inner img {
    position: relative;
    z-index: 1;
    max-width: 104px;
    max-height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(16, 185, 129, .16));
}

.member-login-card {
    position: relative;
    min-height: 548px;
    padding: 114px 36px 34px;
    border-radius: 34px;
    overflow: hidden;
    color: var(--sys-text);
    background:
        linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,255,255,.88)),
        linear-gradient(150deg, rgba(16,185,129,.08), rgba(18,185,129,.05));
    border: 1px solid var(--sys-border);
    box-shadow: var(--sys-shadow);
    backdrop-filter: blur(18px);
}
.member-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 8%, rgba(16,185,129,.18), transparent 24%),
        radial-gradient(circle at 14% 96%, rgba(18,185,129,.14), transparent 35%);
    pointer-events: none;
}
.member-login-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, var(--sys-primary), var(--sys-green), var(--sys-yellow));
    opacity: .95;
}
.card-sheen {
    position: absolute;
    inset: -40% -70%;
    background: linear-gradient(115deg, transparent 39%, rgba(255,255,255,.72), transparent 58%);
    transform: translateX(-42%) rotate(9deg);
    animation: sheenMove 5.5s ease-in-out infinite;
    pointer-events: none;
}

.member-login-header,
.member-login-form {
    position: relative;
    z-index: 2;
}
.system-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #eefaf4;
    border: 1px solid rgba(16,185,129,.16);
    color: var(--sys-primary-dark);
    font-weight: 900;
    font-size: 12px;
    margin-bottom: 11px;
    box-shadow: 0 8px 18px rgba(16,185,129,.07);
}
.member-login-header h1 {
    margin: 0;
    font-size: 31px;
    font-weight: 900;
    letter-spacing: -.3px;
    color: var(--sys-navy);
}
.member-login-header p {
    margin: 8px 0 27px;
    color: var(--sys-muted);
    font-size: 14px;
    font-weight: 800;
}

.login-validation {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 107, 107, .11);
    border: 1px solid rgba(255, 107, 107, .24);
    color: #b4232b;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}
.login-validation ul { margin: 0; padding-right: 18px; }

.member-field { margin-bottom: 18px; }
.member-input {
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 18px;
    border: 1.5px solid #d7eadf;
    background: #f7fcf9;
    padding: 0 17px;
    color: var(--sys-text);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.member-input i {
    font-size: 18px;
    color: var(--sys-primary);
}
.member-input input {
    width: 100%;
    height: 56px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sys-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}
.member-input input::placeholder {
    color: #71867d;
    opacity: 1;
    font-weight: 700;
}
.member-input.is-focused {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: var(--sys-primary);
    box-shadow: 0 15px 30px rgba(16,185,129,.13), 0 0 0 5px rgba(16,185,129,.10);
}
.toggle-pass {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #ecfbf4;
    color: var(--sys-primary);
    cursor: pointer;
    transition: .2s ease;
}
.toggle-pass:hover { background: #daf7e8; transform: scale(1.05); }
.member-error {
    display: block;
    text-align: right;
    margin: 7px 5px 0;
    color: #c12a2a;
    font-size: 12px;
    font-weight: 800;
}

.member-login-btn {
    width: 80%;
    min-height: 58px;
    border: 0;
    border-radius: 999px;
    margin: 15px auto 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--sys-primary), var(--sys-primary-dark));
    color: #ffffff;
    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .2px;
    text-transform: none;
    box-shadow: 0 17px 36px rgba(16,185,129,.24);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    position: relative;
    overflow: hidden;
}
.member-login-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform: translateX(120%);
    transition: transform .55s ease;
}
.member-login-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 45px rgba(16,185,129,.34);
    background: linear-gradient(135deg, var(--sys-primary-2), var(--sys-primary));
}
.member-login-btn:hover::before { transform: translateX(-120%); }
.member-login-btn:disabled { cursor: wait; opacity: .86; transform: none; }
.spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.32);
    border-top-color: #ffffff;
    animation: spin .75s linear infinite;
}

.member-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    color: var(--sys-muted);
    font-weight: 800;
    margin-top: 8px;
}
.remember-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.remember-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.fake-check {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 2px solid #c9e2d4;
    display: grid;
    place-items: center;
    color: #fff;
    background: #fff;
    transition: .2s ease;
}
.fake-check i { opacity: 0; transform: scale(.6); transition: .2s ease; }
.remember-check input:checked + .fake-check {
    background: var(--sys-primary);
    border-color: var(--sys-primary);
    box-shadow: 0 10px 20px rgba(16,185,129,.18);
}
.remember-check input:checked + .fake-check i { opacity: 1; transform: scale(1); }
.forgot-link {
    color: var(--sys-primary-dark);
    text-decoration: none;
    font-weight: 900;
    transition: .2s ease;
}
.forgot-link:hover { color: var(--sys-primary); transform: translateY(-1px); }

.member-login-bottom {
    color: var(--sys-muted);
    margin-top: 28px;
    font-size: 15px;
    font-weight: 800;
    animation: fadeUp .9s .25s both;
}
.member-login-bottom strong {
    color: var(--sys-primary-dark);
    font-weight: 900;
}

.has-errors .member-login-card { animation: shake .45s ease; }

@media (max-width: 520px) {
    .member-login-page { padding: 26px 14px; }
    .member-login-wrap { padding-top: 66px; }
    .brand-avatar { width: 128px; height: 128px; }
    .avatar-inner { width: 116px; height: 116px; }
    .avatar-inner img { max-width: 88px; max-height: 64px; }
    .member-login-card { min-height: auto; padding: 92px 22px 26px; border-radius: 30px; }
    .member-login-header h1 { font-size: 25px; }
    .member-login-btn { width: 100%; font-size: 18px; }
    .member-options { flex-direction: column; gap: 14px; }
}

@keyframes wrapEnter {
    from { opacity: 0; transform: translateY(26px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes avatarFloat {
    from { transform: translateX(-50%) translateY(0); }
    to { transform: translateX(-50%) translateY(-9px); }
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes sheenMove {
    0%, 45% { transform: translateX(62%) rotate(9deg); opacity: 0; }
    55% { opacity: .78; }
    100% { transform: translateX(-62%) rotate(9deg); opacity: 0; }
}
@keyframes slowPan {
    from { transform: translateX(-1%) rotate(-6deg); }
    to { transform: translateX(1%) rotate(-6deg); }
}
@keyframes floatShape {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(22px,-24px,0) scale(1.05); }
}
@keyframes dotDrift {
    0%,100% { transform: translateY(0); opacity: .35; }
    50% { transform: translateY(-22px); opacity: .9; }
}
@keyframes lineSlide {
    from { transform: translateX(-18px) rotate(-18deg); opacity: .14; }
    to { transform: translateX(18px) rotate(-18deg); opacity: .5; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(4px); }
}