:root {
    --postajji-yellow: #ffd600;
    --ink: #111111;
    --ink-2: #343a40; /* secondary text */
    --surface: #ffffff;
    --surface-2: #f8f9fa;
}

html[dir="ltr"] body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
html[dir="rtl"] body { font-family: "Readex Pro", "Tajawal", "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

body {
    background: linear-gradient(135deg, #ffffff, var(--surface-2));
    color: var(--ink);
}
a{
    color: #000;
}

/* Split row reverses direction in RTL */
.split-row { display: flex; }
html[dir="rtl"] .split-row { flex-direction: row-reverse; }

/* Visual side */
.visual-side { min-height: 100vh; }
.img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlay-gradient { position: absolute; inset: 0; background: linear-gradient(225deg, rgba(0,0,0,.55), rgba(0,0,0,.15), rgba(0,0,0,0)); }

.brand-badge { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; gap: 10px; }
html[dir="rtl"] .brand-badge { left: auto; right: 24px; }

.logo-mark { width: 40px; height: 40px; position: relative; }
.logo-mark.sm { width: 28px; height: 28px; }

.brand-text { color: #fff; font-weight: 700; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Form side */
.form-side { background: var(--surface); }
.form-label { font-weight: 600; color: var(--ink-2); }
.form-control:focus { box-shadow: 0 0 0 .25rem rgba(255,214,0,.25); border-color: var(--postajji-yellow); }

.btn-postajji { background: var(--postajji-yellow); font-size: 16px; color: #000; font-weight: 700; border: none; box-shadow: 0 6px 18px rgba(255,214,0,.35); }
.btn-postajji:hover { filter: brightness(0.98); }
.btn-postajji:active { transform: translateY(1px); }

/* Password eye icon (simple) */
#toggle-password { border-color: #e5e7eb; }
#toggle-password:hover { background: #f6f7f8; }

/* Utilities */
.min-vh-100 { min-height: 100vh; }

/* Mobile tweaks */
@media (max-width: 991.98px) {
    .form-side { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
}
.form-control-lg, .form-control{
    font-size: 1rem !important;
    padding: .7rem 1rem;
}