/* ================================================================
   FuelStation ERP — Custom Login Page
   TondeSoft Ltd | Ghana Fuel Station Management System
   Dark industrial + Ghana-flag accent aesthetic
   ================================================================ */

/* === reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === page === */
body.login {
    background: #070B14;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* === animated background grid === */
body.login::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(245,158,11,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,158,11,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridPan 25s linear infinite;
    z-index: 0;
}

/* === ambient glows === */
body.login::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(245,158,11,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 20%, rgba(6,95,70,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(220,38,38,0.04) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

@keyframes gridPan {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(48px, 48px); }
}

/* === floating fuel particles === */
.fserp-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.fserp-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: rgba(245,158,11,0.4);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}
.fserp-particle:nth-child(1)  { left:10%; animation-duration:18s; animation-delay:0s;   width:2px; height:2px; }
.fserp-particle:nth-child(2)  { left:25%; animation-duration:22s; animation-delay:3s;   opacity:.6; }
.fserp-particle:nth-child(3)  { left:40%; animation-duration:16s; animation-delay:1s;   width:4px; height:4px; background:rgba(16,185,129,0.3); }
.fserp-particle:nth-child(4)  { left:60%; animation-duration:20s; animation-delay:5s;   width:2px; height:2px; }
.fserp-particle:nth-child(5)  { left:75%; animation-duration:25s; animation-delay:2s;   background:rgba(16,185,129,0.3); }
.fserp-particle:nth-child(6)  { left:88%; animation-duration:19s; animation-delay:7s;   width:2px; height:2px; }
.fserp-particle:nth-child(7)  { left:50%; animation-duration:21s; animation-delay:4s;   width:3px; height:3px; }
.fserp-particle:nth-child(8)  { left:15%; animation-duration:17s; animation-delay:9s;   background:rgba(220,38,38,0.2); }
.fserp-particle:nth-child(9)  { left:68%; animation-duration:23s; animation-delay:6s;   width:2px; height:2px; }
.fserp-particle:nth-child(10) { left:33%; animation-duration:26s; animation-delay:11s;  background:rgba(245,158,11,0.2); }

@keyframes particleFloat {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* === login wrapper === */
#login, .login #login {
    width: 100% !important;
    max-width: 440px !important;
    padding: 0 !important;
    position: relative;
    z-index: 10;
}

/* === login card === */
#loginform,
#lostpasswordform,
#registerform {
    background: rgba(13,21,38,0.92) !important;
    border: 1px solid rgba(245,158,11,0.15) !important;
    border-radius: 20px !important;
    padding: 2.5rem 2.5rem 2rem !important;
    box-shadow:
        0 0 0 1px rgba(245,158,11,0.05),
        0 32px 64px rgba(0,0,0,0.6),
        0 0 80px rgba(245,158,11,0.04),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

/* card top-accent bar */
#loginform::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #065F46 0%,
        #F59E0B 33%,
        #DC2626 66%,
        #065F46 100%);
    background-size: 200% 100%;
    animation: flagBar 4s linear infinite;
}
@keyframes flagBar {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* === logo section === */
.fserp-login-logo {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(245,158,11,0.1);
}
.fserp-login-logo .logo-emblem {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 60%, #B45309 100%);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    box-shadow: 0 8px 32px rgba(245,158,11,0.35), 0 0 0 1px rgba(245,158,11,0.2);
    animation: emblemPulse 3s ease-in-out infinite;
    position: relative;
}
.fserp-login-logo .logo-emblem::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    border: 2px solid rgba(245,158,11,0.2);
    animation: ringPulse 3s ease-in-out infinite;
}
@keyframes emblemPulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(245,158,11,0.35), 0 0 0 1px rgba(245,158,11,0.2); }
    50%       { box-shadow: 0 8px 48px rgba(245,158,11,0.55), 0 0 0 1px rgba(245,158,11,0.4); }
}
@keyframes ringPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.05); }
}
.fserp-login-logo h1 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #F1F5F9 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 0.25rem !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    border: none !important;
}
.fserp-login-logo h1 span { color: #F59E0B; }
.fserp-login-logo p {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.fserp-login-logo .ghana-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(6,95,70,0.15);
    border: 1px solid rgba(6,95,70,0.3);
    color: #34D399;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-top: 0.5rem;
    letter-spacing: 0.04em;
}

/* === WP logo — completely removed === */
#login h1,
.login h1,
#login h1 a,
.login h1 a {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* === Remove all WP default meta links === */
#backtoblog,
#nav,
.login #backtoblog,
.login #nav,
#login_error + #nav {
    display: none !important;
}

/* === Hide WP default admin footer on login === */
.login #footer { display: none !important; }

/* === Strip any WP body class default styles leaking in === */
body.login { background: #070B14 !important; }

/* === form labels === */
.login label,
#loginform label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: block !important;
    margin-bottom: 0.4rem !important;
}

/* === form inputs === */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
#loginform input[type="text"],
#loginform input[type="password"] {
    background: rgba(7,11,20,0.8) !important;
    border: 1px solid rgba(30,45,61,0.8) !important;
    border-radius: 10px !important;
    color: #E2E8F0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    height: 46px !important;
    padding: 0 1rem !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    outline: none !important;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: rgba(245,158,11,0.5) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.1) !important;
    background: rgba(7,11,20,0.95) !important;
}
.login input[type="text"]::placeholder,
.login input[type="password"]::placeholder {
    color: #334155 !important;
}

/* password field wrapper with show/hide */
.fserp-pw-wrap {
    position: relative;
}
.fserp-pw-toggle {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748B;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.15s;
    z-index: 2;
}
.fserp-pw-toggle:hover { color: #F59E0B; }

/* === form rows === */
.login .input,
.forminput, .login p { margin-bottom: 1.125rem !important; }

/* === remember me ===
   WordPress core floats .forgetmenot left and .submit right onto the same
   row by default. Our flex override below removes the float on .forgetmenot
   but .submit was still floating right, so the two overlapped instead of
   stacking. Explicitly clear the float on both so Remember Me sits above
   the Log In button with clean spacing, not underneath it. */
.login .forgetmenot {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
}
.login .forgetmenot label {
    font-size: 0.78rem !important;
    color: #64748B !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}
.login input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #F59E0B !important;
    cursor: pointer !important;
}

/* === submit button === */
.login .button-primary,
#wp-submit,
input[type="submit"].button-primary {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #0A0E1A !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    height: 48px !important;
    width: 100% !important;
    cursor: pointer !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.3) !important;
    transition: all 0.2s !important;
    text-shadow: none !important;
    padding: 0 !important;
}
.login .button-primary:hover,
#wp-submit:hover {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%) !important;
    box-shadow: 0 6px 24px rgba(245,158,11,0.5) !important;
    transform: translateY(-1px) !important;
    color: #0A0E1A !important;
}
.login .button-primary:active,
#wp-submit:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.3) !important;
}

/* === submit row layout === */
#loginform .submit {
    margin-top: 0.5rem !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
}
#loginform .submit-row,
#loginform p.submit {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

/* === links === */
#nav, #backtoblog, .login #nav a, .login #backtoblog a {
    text-align: center !important;
    font-size: 0.78rem !important;
}
.login #nav a, .login #backtoblog a,
#nav a, #backtoblog a {
    color: #64748B !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
    color: #F59E0B !important;
}
#nav, #backtoblog {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
    text-align: center !important;
}

/* === error / notification messages === */
#login_error, .login .message, .login .notice {
    background: rgba(220,38,38,0.08) !important;
    border: 1px solid rgba(220,38,38,0.2) !important;
    border-left: 3px solid #DC2626 !important;
    border-radius: 10px !important;
    color: #FCA5A5 !important;
    font-size: 0.8rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
}
.login .message {
    background: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.2) !important;
    border-left-color: #10B981 !important;
    color: #6EE7B7 !important;
}

/* === footer info bar === */
.fserp-login-footer {
    text-align: center;
    margin-top: 1.5rem;
    position: relative;
    z-index: 10;
}
.fserp-login-footer p {
    font-size: 0.68rem;
    color: #334155;
    letter-spacing: 0.04em;
}
.fserp-login-footer p span { color: #F59E0B; }

/* === stats strip === */
.fserp-login-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.25rem;
    position: relative;
    z-index: 10;
}
.fserp-login-stat {
    text-align: center;
}
.fserp-login-stat .val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #F59E0B;
    display: block;
}
.fserp-login-stat .lbl {
    font-size: 0.6rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 0.1rem;
}

/* === loading state === */
.login-loading #wp-submit {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* === responsive === */
@media (max-width: 480px) {
    #login, .login #login { max-width: 100% !important; padding: 0 1rem !important; }
    #loginform { padding: 2rem 1.5rem 1.5rem !important; border-radius: 16px !important; }
    .fserp-login-logo .logo-emblem { width: 60px; height: 60px; font-size: 1.6rem; }
    .fserp-login-logo h1 { font-size: 1.25rem !important; }
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}