/* ============================================================
   Login page enhancements (Index.html only).
   Scoped to .login-card / login ids so it can't affect other
   pages that also include indexStyle.css.
   ============================================================ */

/* ===== Cairo Arabic font (self-hosted) for the login screen in RTL ===== */
@font-face { font-family: 'Cairo'; font-weight: 400; font-display: swap;
  src: url('../fonts/cairo/cairo-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: 'Cairo'; font-weight: 600; font-display: swap;
  src: url('../fonts/cairo/cairo-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family: 'Cairo'; font-weight: 700; font-display: swap;
  src: url('../fonts/cairo/cairo-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; }

html[dir="rtl"] body,
html[dir="rtl"] .right-container,
html[dir="rtl"] .right-container h1,
html[dir="rtl"] .right-container h2,
html[dir="rtl"] .right-container p,
html[dir="rtl"] .login-card input,
html[dir="rtl"] .login-card .input-button,
html[dir="rtl"] #loginLangSwitch { font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; }

/* Center the form block within its column, lifted to vertical middle */
.right-container {
  margin: 0 auto !important;
  max-width: 360px;
  padding: 11vh 12px 0 12px;
}
.right-container h2 { font-size: 32px; letter-spacing: .5px; opacity: .96; }
#loginHello { font-size: 42px !important; margin-top: 6px !important; margin-bottom: 2px !important; }
#loginSub  { font-size: 15px; opacity: .92; margin-bottom: 20px !important; }

/* Card grouping username + password + button */
.login-card {
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  background: #fff;
}

.login-card .input-username,
.login-card .input-password {
  width: 100% !important;
  height: 56px !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 16px 0 46px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #182141 !important;
  background-color: #fff;
  box-shadow: none !important;
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 17px 17px;
}
.login-card .input-username { border-bottom: 1px solid #eef1f6 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a97a3'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.6-9 6v2h18v-2c0-3.4-4-6-9-6z'/%3E%3C/svg%3E"); }
.login-card .input-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a97a3'%3E%3Cpath d='M17 9V7a5 5 0 00-10 0v2H5v13h14V9h-2zM9 7a3 3 0 016 0v2H9V7z'/%3E%3C/svg%3E"); }
.login-card .input-username::placeholder,
.login-card .input-password::placeholder { font-size: 14px !important; color: #9aa7b2 !important; font-weight: 400; }
.login-card .input-username:focus,
.login-card .input-password:focus { background-color: #fbfdff; box-shadow: inset 3px 0 0 #ff8c8c !important; }

.login-card .input-button {
  width: 100% !important;
  height: 56px;
  margin-top: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff9a8c, #ff6f91) !important;
  color: #fff;
  font-size: 16px !important; font-weight: 600; letter-spacing: .4px;
  box-shadow: none;
  transition: filter .15s, transform .06s;
}
.login-card .input-button:hover  { filter: brightness(1.06); color: #fff; }
.login-card .input-button:active { transform: translateY(1px); box-shadow: none; }

.input-forgot { display: block; margin-top: 18px !important; font-size: 13px; opacity: .9; }
.input-forgot:hover { opacity: 1; }

/* ---- Language switch (markup also carries inline styles as a cache fallback) ---- */
#loginLangSwitch { position: fixed; top: 22px; right: 28px; z-index: 9999; }
#loginLangSwitch .lopt.active { background: #fff; color: #3aa0d8; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* ---- RTL adjustments for login ---- */
html[dir="rtl"] .right-container { text-align: right; }
html[dir="rtl"] .login-card .input-username,
html[dir="rtl"] .login-card .input-password {
  padding: 0 46px 0 16px !important;
  background-position: right 16px center;
  text-align: right;
}
html[dir="rtl"] .login-card .input-username:focus,
html[dir="rtl"] .login-card .input-password:focus { box-shadow: inset -3px 0 0 #ff8c8c !important; }