:root {
            --gold: #ffd014;
            --mint: #6becae;
            --dark-bg: #111111;
            --card-bg: #1a1a1a;
            --input-bg: #222222;
            --border: #333333;
            --text-main: #ffffff;
            --text-muted: #888888;
            --radius: 8px;
            --ui-step: 42px;
        }

		*:focus, *:active {
			outline: none!important;
			box-shadow: none!important;
		}
        /* --- 2. GLOBAL & BACKGROUND --- */
        body.login {
            background-color: var(--dark-bg) !important;
            font-family: 'Alexandria', sans-serif !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* --- 3. THE CARD (Login Form) --- */
        #login {
            padding: 0;
            width: 100%;
            max-width: 400px;
        }

        .login form {
            background: var(--card-bg) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            box-shadow: none !important;
            padding: 30px !important;
        }

        .login label {
            color: var(--text-main) !important;
            font-weight: 500;
            margin-bottom: 8px;
        }

        /* --- 4. INPUTS --- */
        .login input[type="text"],
        .login input[type="password"],
        .login input[type="email"] {
            background: var(--input-bg) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            color: var(--text-main) !important;
            height: var(--ui-step) !important;
            box-shadow: none !important;
            transition: border-color 0.2s ease;
			direction: ltr!important;
			font-family: 'Alexandria', sans-serif !important;
        }

        .login input:focus {
            border-color: var(--gold) !important;
            outline: none !important;
        }

        /* --- 5. BUTTONS --- */
        .wp-core-ui .button-primary {
            background: var(--gold) !important;
            border: none !important;
            border-radius: var(--radius) !important;
            color: #000 !important;
            font-weight: 700 !important;
            height: var(--ui-step) !important;
            line-height: var(--ui-step) !important;
            padding: 0 24px !important;
            text-shadow: none !important;
            box-shadow: none !important;
            width: 100%;
            margin-top: 10px !important;
        }

        .wp-core-ui .button-primary:hover {
            background: var(--mint) !important;
            color: #000 !important;
        }

        /* --- 6. ALERTS & MESSAGES --- */
        
        .login .message, 
        .login .notice, 
        .login #login_error {
            background: var(--input-bg) !important;
            border-right: 4px solid var(--mint) !important;
            border-radius: var(--radius);
            color: var(--text-main) !important;
            border-top: none;
            border-right: none;
            border-bottom: none;
            box-shadow: none;
        }
        
        
        .privacy-policy-link {
            color: var(--mint)!important;
            text-decoration: none;
        }
        
        .login #login_error, .notice-error {
            border-left-color: #ff4d4d !important;
			color: #ff4d4d!important;
        }
        .notice {
            border-left: 0px!important;
        }
		
		.nsl-container-buttons {
			width: 100%;
		}
		.nsl-button {
			border-radius: var(--radius) !important;
		}

		input[type=checkbox], 
		input[type=radio] {
			appearance: none !important;
			-webkit-appearance: none !important;
			background: #444 !important;
			border: 2px solid #555 !important;
			height: 20px !important;
			width: 20px !important;
			cursor: pointer;
			position: relative;
			outline: none !important;
			box-shadow: none !important;
		}

		/* IMPORTANT: Kill the default WordPress Dashicon Tick */
		input[type=checkbox]:before, 
		input[type=radio]:before {
			display: none !important; 
			content: none !important;
		}

		/* Our Custom Gold Tick (Poll Style) */
		input[type=checkbox]:checked {
			background: #ffd014 !important;
			border-color: #ffd014 !important;
		}

		input[type=checkbox]:checked:after {
			content: "";
			position: absolute;
			display: block;
			left: 5px;
			top: 1px;
			width: 5px;
			height: 10px;
			border: solid #000; /* Black tick on gold background */
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}


        /* --- 7. LOGO --- */
        .login h1 a {
            background-image: none, url('/wp-content/uploads/assets/menaWhite.png');
            background-size: contain;
            width: 100%;
            height: 50px;
            margin-bottom: 30px auto;
        }

        /* --- 8. FOOTER LINKS --- */
        .login #nav a, 
        .login #backtoblog a {
            color: var(--text-muted) !important;
            transition: color 0.2s ease;
        }

        .login #nav a:hover, 
        .login #backtoblog a:hover {
            color: var(--gold) !important;
        }