/* Auth page overrides (loaded only on auth pages) */
body.auth-page {
  padding-top: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
  /* subtle brand-friendly gradient background */
  background: linear-gradient(180deg, #f6f7fb 0%, #f3f5f8 40%, #eef2f6 100%);
  color: #0b1220;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui;
}

/* Hide common header/logo selectors used across templates so the auth page is clean */
body.auth-page .w3l-headers-9,
body.auth-page header,
body.auth-page .header,
body.auth-page .navbar,
body.auth-page .logo,
body.auth-page .w3l-headers-9 .logo,
body.auth-page .w3l-headers-9 .logo img,
body.auth-page .topbar,
body.auth-page #logo,
body.auth-page .right-img-9,
body.auth-page .brand,
body.auth-page .navbar-brand {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Remove any residual top padding added globally for a fixed header */
body.auth-page { padding-top: 0 !important; }

/* UI polish for auth card and controls */
.auth-container {
  padding: 36px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 24px);
}

.auth-card {
  max-width: 540px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(2,6,23,0.14);
  /* soft glass surface */
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.92));
  border: 1px solid rgba(11,20,32,0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.auth-form-section { padding: 42px 36px; }
.auth-header h1 { font-size: 1.9rem; color: #071026; margin-bottom: 6px; }
.auth-header p { color: #495867; margin-top: 6px; font-size: 0.98rem; }

/* Ensure auth page's own logo (if present) cannot grow unbounded */
.auth-logo img,
.auth-header .auth-logo img {
  max-width: 120px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
}

/* CTA refinements */
.auth-btn { padding: 12px 18px; font-weight: 700; letter-spacing: 0.2px; border-radius: 10px; }
.auth-btn:focus { outline: 3px solid rgba(206,17,38,0.12); }

/* Social buttons - branded colors */
.btn-social { background: rgba(0,0,0,0.03); transition: transform 160ms ease, box-shadow 160ms ease; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; margin-right:10px; }
.btn-social .fa { font-size: 18px; }
.btn-social[aria-label*="Google"] { background: #fff; color: #DB4437; border: 1px solid rgba(0,0,0,0.06); }
.btn-social[aria-label*="Facebook"] { background: #1877F2; color: #fff; border: 1px solid rgba(0,0,0,0.06); }
.btn-social:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(2,6,23,0.08); }

/* Inputs and floating label tweaks */
.form-input { position: relative; }
.form-input input { border-radius: 10px; height: 44px; padding: 10px 14px 10px 56px; padding-right: 56px; width: 100%; box-sizing: border-box; font-size: 15px; }
.form-input .fa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(11,20,32,0.36); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; pointer-events: none; line-height: 1; }
.form-input .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(11,20,32,0.46); border-radius: 6px; }
.floating-label { color: rgba(0,0,0,0.55); position: absolute; left: 56px; top: 12px; pointer-events: none; transition: transform 180ms ease, font-size 180ms ease, color 180ms ease; transform-origin: left top; }
.form-input input:focus + .floating-label,
.form-input input:not(:placeholder-shown) + .floating-label {
  transform: translateY(-20px) scale(0.88);
  font-size: 0.82rem;
  color: rgba(7,16,38,0.8);
}

@media (max-width: 480px) {
  .auth-form-section { padding: 28px 20px; }
  .auth-header h1 { font-size: 1.5rem; }
}

/* --- Extra polish: focus, validation, animations, toasts --- */
:root {
  --auth-primary: #CE1126; /* brand red */
  --auth-accent: #ff5a66;
  --card-bg: #ffffff;
  --muted: #6b7280;
}

.auth-card { background: var(--card-bg); transform-origin: center center; animation: authAppear 420ms cubic-bezier(.2,.9,.3,1) both; }
@keyframes authAppear { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity:1; transform: translateY(0) scale(1); } }

/* Inputs */
.form-input input { border: 1px solid rgba(16,24,40,0.06); transition: box-shadow 180ms ease, border-color 180ms ease, background 160ms ease; }
.form-input input:focus { border-color: rgba(206,17,38,0.9); box-shadow: 0 8px 22px rgba(14,20,30,0.06); }
.form-input input:invalid { box-shadow: 0 6px 18px rgba(230,50,50,0.06); }

/* Floating label tweaks when invalid */
.form-input input:invalid + .floating-label { color: #b91c1c; }

/* Password strength indicator */
.pw-strength { height: 6px; border-radius: 6px; background: rgba(15,23,42,0.04); margin-top: 8px; overflow: hidden; }
.pw-strength > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #f97316, var(--auth-primary)); transition: width 260ms ease; }

/* Small error shake animation for invalid submission */
.shake { animation: shakeX 360ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeX { 0% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 75% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

/* Toast / inline success */
.auth-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; background: rgba(11,20,32,0.96); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(2,6,23,0.45); opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; z-index: 9999; }
.auth-toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); pointer-events: auto; }

/* Button: subtle press feedback and stronger gradient */
.auth-btn { background: linear-gradient(90deg, var(--auth-primary) 0%, var(--auth-accent) 100%); box-shadow: 0 12px 30px rgba(206,17,38,0.12); color: #fff; }
.auth-btn:active { transform: translateY(1px) scale(.997); }

/* focus-visible for accessibility */
.auth-btn:focus-visible, .form-input input:focus-visible { outline: 3px solid rgba(206,17,38,0.14); outline-offset: 2px; }

/* small responsive adjustments */
@media (max-width: 420px) {
  .auth-card { margin: 8px; }
  .auth-form-section { padding: 22px; }
}

.auth-links p { margin-top: 14px; }

/* Small spacing for auth form actions (login / forgot password) */
.form-actions a { margin-right: 12px; color: var(--auth-primary); text-decoration: none; }

/* Small variant of auth button for inline use on signup page */
.auth-btn-small { padding: 6px 10px; font-size: 0.9rem; display: inline-block; vertical-align: middle; margin-left: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--auth-primary), var(--auth-accent)); color: white; text-decoration: none; }

/* Ensure any large site logos/images are constrained on auth pages */
body.auth-page img[src*="mzad app logo"],
body.auth-page img[alt*="Mzad"] {
  max-width: 160px !important;
  max-height: 160px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Specific auth-logo sizing (auth card's logo) */
.auth-logo img {
  width: 96px !important;
  height: 96px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* small separator and center social row */
.auth-links .social-row { display:flex; align-items:center; justify-content:center; margin-top:8px; }
.auth-decoration { display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0 18px 0; }
.auth-decoration .decoration-line { height:2px; width:36px; background: linear-gradient(90deg, rgba(11,20,32,0.06), rgba(11,20,32,0.02)); border-radius:2px; }
.auth-decoration .decoration-dot { width:10px; height:10px; border-radius:50%; background: var(--auth-primary); box-shadow: 0 6px 18px rgba(206,17,38,0.12); }

/* responsive tweaks */
@media (max-width: 520px) {
  .auth-card { margin: 10px; }
  .auth-form-section { padding: 26px; }
  .form-input input { padding-left: 40px; padding-right: 40px; height: 44px; }
  .auth-logo img { width: 80px !important; height: 80px !important; }
}

/* Make sure auth card sits above any large background elements */
.auth-container { position: relative; z-index: 1001; }
.auth-card { position: relative; z-index: 1002; }

/* RTL support: flip icon/label/toggle positions when page direction is RTL
   Works when <html dir="rtl"> or when body has class 'rtl' (some apps toggle a class).
*/
body[dir="rtl"] .form-input .fa,
body.rtl .form-input .fa {
  right: 12px;
  left: auto;
}

body[dir="rtl"] .form-input input,
body.rtl .form-input input {
  padding-left: 14px; /* text padding on the left in RTL */
  padding-right: 48px; /* reserve space on the right for icon/toggle */
}

body[dir="rtl"] .form-input .password-toggle,
body.rtl .form-input .password-toggle {
  left: 10px;
  right: auto;
}

body[dir="rtl"] .floating-label,
body.rtl .floating-label {
  right: 48px;
  left: auto;
  transform-origin: right top;
}

/* Ensure small-screen RTL adjustments as well */
@media (max-width: 520px) {
  body[dir="rtl"] .form-input input,
  body.rtl .form-input input {
    padding-left: 12px;
    padding-right: 40px;
  }
  body[dir="rtl"] .floating-label,
  body.rtl .floating-label {
    right: 40px;
  }
}

/* Extra: hide any page-level large logo selectors as a fallback */
body.auth-page .logo img,
body.auth-page .right-img-9 img,
body.auth-page .header .logo img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}