/* login.css - Updated for RTL/LTR support */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

/* =====================================================
   DESIGN TOKENS - DARK THEME ONLY
   ===================================================== */
:root {
    /* slate */
    --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
    --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
    --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617;

    --emerald-50:  #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7;
    --emerald-400: #34d399; --emerald-500: #22c55e; --emerald-600: #16a34a; --emerald-700: #15803d;
    --emerald-800: #166534; --emerald-900: #14532d; --emerald-950: #052e16;

    --green-100:#dcfce7; --green-600:#16a34a; --green-900:#14532d;
    --teal-50:#f0fdfa;   --teal-100:#ccfbf1;  --teal-400:#2dd4bf;
    --teal-600:#0d9488;  --teal-900:#134e4a;
    --cyan-100:#cffafe;  --cyan-900:#164e63;
    --amber-400:#fbbf24;
    --red-500:#ef4444;
    --orange-400:#fb923c;

    /* surface (dark theme defaults) */
    --bg:            var(--slate-900);
    --fg:            #f1f5f9;
    --card-bg:       rgba(15,23,42,0.3);
    --card-border:   rgba(51,65,85,0.60);
    --feature-bg:    rgba(30,41,59,0.3);
    --feature-border:rgba(51,65,85,0.50);
    --input-bg:      transparent; /*var(--slate-800)*/
    --input-border:  var(--slate-700);
    --input-focus-border: rgba(74,222,128,0.30);
    --input-focus-bg:     rgba(100,116,139,0.10);
    --input-text:    var(--emerald-500);
    --label:         var(--slate-300);
    --muted:         var(--slate-400);
    --muted-2:       var(--slate-300);
    --placeholder:   var(--slate-400);
    --badge-bg:      rgba(30,41,59,0.50);
    --grid-line:     rgba(255,255,255,0.03);
    --bg-grad:       linear-gradient(180deg, #070c15, var(--slate-900) 65%, #060a10);
/*    --glow:          radial-gradient(circle at 70% 30%, rgba(16,185,129,0.30) 0%, rgba(0,0,0,0) 70%);*/
    

    /* toast engine vars */
    --toast-bg:#111a2c;
    --toast-bg-2:#0d1526;
    --toast-border-clr:#1e2a41;
    --toast-title-clr:#eaf0fb;
    --toast-message-clr:#7d8bab;
    --toast-close-btn-clr:#4c5872;
    --toast-close-btn-clr-hover:#7d8bab;
    --toast-close-btn-bg-hover: rgba(255,255,255,.06);
    --toast-green: var(--emerald-500);
    --toast-green-dim:rgba(31,206,122,.14);
    --toast-red: var(--red-500);
    --toast-red-dim:rgba(242,92,92,.14);
    --toast-orange: var(--amber-500);
    --toast-orange-dim:rgba(247,165,49,.14);
    --toast-blue: var(--blue-500);
    --toast-blue-dim:rgba(77,141,255,.14);
    --toast-progress-transform-origin: left;
    --toast-progress-degree: 90deg;
}


@media (max-width: 767px)
{
    :root{
        --card-bg:       rgba(15,23,42,0.5);
    }
}


[dir="rtl"]{
    --toast-progress-transform-origin: right;
    --toast-progress-degree: 270deg;
}

/* =====================================================
   RESET / BASE
   ===================================================== */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input { font-family: inherit; }

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

/* =====================================================
   BACKGROUND LAYERS
   ===================================================== */
.bg-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bg-gradient, .bg-grid, .bg-glow { position: absolute; inset: 0; }
.bg-gradient { background: var(--bg-grad); }
.bg-grid {
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
}
.bg-glow { background: var(--glow); }

/* =====================================================
   PAGE LAYOUT
   ===================================================== */
.page {
    position: relative; z-index: 10;
    height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1rem 1rem;
}
@media (min-width: 640px) { .page { padding: 1.5rem; } }
@media (min-width: 1024px){ .page { padding: 1.5rem 2rem; } }

.page-inner { width: 100%; max-width: 80rem; margin: 0 auto; max-height: 100%; }

.layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
}
@media (min-width: 768px)  { .layout-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }
@media (min-width: 1024px) { .layout-grid { gap: 2.5rem; } }
@media (min-width: 1280px) { .layout-grid { gap: 4rem; } }

/* =====================================================
   BRANDING (LEFT) — hidden on mobile
   ===================================================== */
.branding { display: none; }
@media (min-width: 768px) {
    .branding {
        display: flex; flex-direction: column; align-items: flex-start;
        text-align: start; gap: 0.75rem;
    }
}
@media (min-width: 1024px) { .branding { gap: 1rem; } }

.brand-logo {
    width: 4rem; height: 4rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
}
@media (min-width: 768px) { .brand-logo { width: 5rem; height: 5rem; } }

.brand-headline { display: flex; flex-direction: column; gap: 0.25rem; }

.brand-title {
    font-size: 2.25rem; line-height: 1.25;
    font-weight: 800; font-style: italic;
    letter-spacing: -0.025em;
    margin: 0;
}
.brand-title-grad {
    background: linear-gradient(to right, var(--emerald-500), var(--emerald-700), var(--emerald-900));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-inline-end: 8px;
}
.brand-title-sub {
/*    margin-inline-start: 0.5rem;*/
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    color: #e2e8f0;
}

.brand-tagline {
    margin: 0;
    font-size: 0.875rem;
    color: var(--slate-400);
    max-width: 28rem;
}

/* feature grid */
.features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%; max-width: 32rem;
}
.feature-card {
    background: var(--feature-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--feature-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 1024px) { .feature-card { padding: 1rem; } }

.feature-icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.icon-emerald-green {
    background: #1c2740;
    color: #e5e9f0;
}
.icon-teal-cyan {
    background: #1c2740;
    color: #e5e9f0;
}
.icon-emerald-teal {
    background: #1c2740;
    color: #e5e9f0;
}
.icon-green-emerald {
    background: #1c2740;
    color: #e5e9f0;
}

.feature-title { margin: 0 0 2px; font-size: 0.875rem; font-weight: 600; color: #fff; }
.feature-desc { margin: 0; font-size: 10px; color: var(--slate-400); }

/* trust */
.trust {
    display: flex;
    align-items: center;
/*    gap: 0.75rem;*/
    padding-top: 0.25rem;
}
.avatars { display: flex; }
.avatars .trusted-brand {
    background: var(--emerald-500);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    position: relative;
    box-shadow: 0 0 0 1px var(--slate-800);
    cursor: default;
    transition: transform 0.1s ease-in-out;
}
.avatars .trusted-brand:nth-child(1){ z-index:1; }
.avatars .trusted-brand:nth-child(2){ z-index:2; inset-inline-start: -7px; }
.avatars .trusted-brand:nth-child(3){ z-index:3; inset-inline-start: -14px; }
.avatars .trusted-brand:hover{ z-index:4; transform: scale(1.2); }
.avatars img {
    width: 2rem; height: 2rem; border-radius: 9999px;
    border: 2px solid var(--slate-800);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin-inline-start: -0.5rem;
}
.avatars img:first-child { margin-inline-start: 0; }
.trust-text { font-size: 0.875rem; color: var(--slate-400); }
.trust-strong { font-weight: 600; color: var(--slate-400); }

/* =====================================================
   LOGIN SIDE (RIGHT)
   ===================================================== */
.login-side { display: flex; flex-direction: column; align-items: center; width: 100%; }
.login-wrap { width: 100%; max-width: 28rem; margin: 0 auto; }
@media (min-width: 768px) { .login-wrap { margin: 0; } }

/* card */
.login-card {
    background: var(--card-bg);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    padding: 1.25rem;
    border: 1px solid var(--card-border);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}
@media (min-width: 640px) { .login-card { padding: 1.5rem; } }
.login-card:hover { transform: translateY(-3px); box-shadow: 0 25px 40px -12px rgba(0,0,0,0.20); }

.card-header { text-align: center; margin-bottom: 1rem; }
.card-header-pill {
    display: inline-flex; padding: 0.5rem;
    background: linear-gradient(to right, rgba(6,78,59,0.30), rgba(20,83,45,0.30));
    border-radius: 1rem; margin-bottom: 0.75rem;
}
.card-header-icon {
    width: 2.5rem; height: 2.5rem;
    background: linear-gradient(to bottom right, var(--emerald-600), var(--green-600));
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
}
.card-header-icon img{
    display: none !important;
}

@media (max-width: 767px)
{
    .card-header-pill {
        background: transparent !important;
    }
    .card-header-icon {
        width: 5rem;
        height: 5rem;
        background: transparent !important;
    }
    .card-header-icon i{
        display: none !important;
    }
    .card-header-icon img{
        display: block !important;
    }
}

.card-header-icon i { color: #fff; font-size: 0.875rem; }
.card-title {
    margin: 0; font-size: 1.5rem; font-weight: 700;
    color: #fff;
}
@media (min-width: 640px) { .card-title { font-size: 1.875rem; } }
.card-subtitle {
    margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--slate-400);
}

/* form */
.login-form { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.field-pb { padding-bottom: 0.5rem; }
.field-pt { padding-top: 0.5rem; }
.field-label {
    display: block; font-size: 0.875rem; font-weight: 600;
    color: var(--label); margin-bottom: 0.375rem;
}
.field-control { position: relative; }
.field-icon {
    position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
    padding-inline-start: 0.875rem;
    display: flex; align-items: center;
    pointer-events: none;
}
.field-icon i { color: var(--slate-400); font-size: 0.875rem; }
.field-input {
    width: 100%; font-size: 0.875rem;
    padding-block: 0.75rem;
    padding-inline: 2.5rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.75rem;
    color: var(--input-text);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    outline: none;
}
.field-input::placeholder { color: var(--placeholder); }
.field-input:focus {
    border-color: var(--input-focus-border);
    background: var(--input-focus-bg);
}
.field-input-pe { padding-inline-end: 3rem; }
.field-toggle {
    position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
    padding-inline-end: 0.75rem;
    display: flex; align-items: center;
    background: none;
}
.field-toggle:focus { outline: none; }
.field-toggle i { color: var(--slate-400); font-size: 0.875rem; cursor: pointer; }
.field-toggle i:hover { color: var(--emerald-400); }

/* error text injected by JS */
.error-text {
    display: block; position: absolute;
    color: var(--red-500); font-size: 0.75rem; margin-top: 0.25rem;
}

/* forgot */
.forgot-row { display: flex; align-items: center; justify-content: flex-end; }
.forgot-link {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--slate-400);
}
.forgot-link:hover { color: var(--emerald-600); }

/* submit */
.submit-wrap { position: relative; }
.submit-btn {
    display: block; width: 100%;
    background: linear-gradient(to right, var(--emerald-600), var(--emerald-700));
    color: #fff;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700; font-size: 1rem;
    text-align: center;
}
.submit-state { background: linear-gradient(to right, var(--slate-700), var(--slate-700)); }
@media (min-width: 640px) { .submit-btn { font-size: 1.125rem; } }
.submit-btn i { margin-inline-end: 0.5rem; }

[dir="rtl"] .submit-btn i {
    transform: scaleX(-1);
    display: inline-block;   /* required for transform to work on inline elements */
}

/* security badge */
.security-badge {
    margin-top: 1rem;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem; color: var(--slate-400);
    background: var(--badge-bg);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
}
.security-badge i { color: var(--emerald-500); font-size: 0.75rem; }















/* ----------  BEGIN::TOAST STYLE  ---------- */

#toast-region{
  position:fixed;
  top:20px;
  inset-inline-end:20px;
  display:flex;
  flex-direction:column;
  align-items:right;
  gap:12px;
  z-index:999999;
  pointer-events:none;
  width:min(420px, calc(100vw - 32px));
}

.toast{
  --accent:var(--toast-green);
  --accent-dim:var(--toast-green-dim);
  position:relative;
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%),
    linear-gradient(155deg,var(--toast-bg),var(--toast-bg-2));
  border:1px solid var(--toast-border-clr);
  border-radius:5px;
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(10px);
  overflow:hidden;
  pointer-events:auto;
  cursor:pointer;
  opacity:0;
  transform:translateY(-16px) scale(.96);
  transition:opacity .32s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1), max-height .28s ease, margin .28s ease, padding .28s ease;
}

.toast::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}

.toast.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.toast.leaving{
  opacity:0;
  transform:translateY(-10px) scale(.97);
  max-height:0;
  margin-top:-12px;
  padding-top:0;
  padding-bottom:0;
}

.toast[data-type="success"]{ --accent:var(--toast-green); --accent-dim:var(--toast-green-dim); }
.toast[data-type="error"]{ --accent:var(--toast-red); --accent-dim:var(--toast-red-dim); }
.toast[data-type="warning"]{ --accent:var(--toast-orange); --accent-dim:var(--toast-orange-dim); }
.toast[data-type="info"]{ --accent:var(--toast-blue); --accent-dim:var(--toast-blue-dim); }

.toast-icon{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);
  color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-dim);
  margin-inline-end: 5px;
}
.toast-icon svg{ width:18px; height:18px; }

.toast-body{
  flex:1;
  min-width:0;
  padding-top:1px;
}
.toast-title{
  font-size:13.5px;
  font-weight:700;
  color:var(--toast-title-clr);
  margin:0 0 2px;
  letter-spacing:-.01em;
}
.toast-msg{
  font-size:12.5px;
  color:var(--toast-message-clr);
  line-height:1.5;
  margin:0;
}

.toast-close{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:none;
  color:var(--toast-close-btn-clr);
  cursor:pointer;
  opacity:0;
  transform:scale(.85);
  transition:opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}
.toast:hover .toast-close{ opacity:1; transform:scale(1); }
.toast-close:hover{
    background:var(--toast-close-btn-bg-hover);
    color:var(--toast-close-btn-clr-hover);
}
.toast-close svg{ width:12px; height:12px; }

.toast-progress-track{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2.5px;
  background:rgba(255,255,255,.05);
}
.toast-progress-fill{
    height:100%;
    width:100%;
    background: linear-gradient(
        var(--toast-progress-degree),
        var(--accent),
        color-mix(in srgb, var(--accent) 60%, white)
    );
    box-shadow:0 0 8px var(--accent);
    transform-origin: var(--toast-progress-transform-origin);
    will-change:transform;
}

.toast-hover-tag{
  position:absolute;
  top:8px; right:34px;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:.06em;
  color:var(--accent);
  background:var(--accent-dim);
  padding:2px 6px;
  border-radius:5px;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
  text-transform:uppercase;
}
.toast.paused .toast-hover-tag{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .toast, .toast-progress-fill, .toast-close{ transition:none !important; }
}
/* ----------  CLOSE::TOAST STYLE  ---------- */