/**
 * Login / Register standalone pages (entry-shell, no router)
 * Fixes stretched flex items, RTL clashes, and global button rules affecting the navbar.
 */

body.auth-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  box-sizing: border-box;
  /* Keep the whole shell LTR — i18n no longer sets html[dir=rtl] on these pages */
  direction: ltr !important;
  unicode-bidi: isolate;
  /* Page backdrop — branding primary/text come from :root via applySiteBranding */
  background: linear-gradient(135deg, #141414 0%, #1a1a1a 100%);
  background-color: #141414;
}

/* Persian locale: use Ravi (loaded by i18n) without enabling global RTL on body */
html[lang='fa'] body.auth-page {
  font-family: var(--font-family-persian);
}

/* Prevent any RTL interference on auth pages */
body.auth-page * {
  direction: ltr;
}

body.auth-page .auth-card,
body.auth-page .auth-card * {
  direction: ltr;
  text-align: left;
}

/*
 * FA locale on auth: mirror navbar only (matches rtl.css intent) without body.rtl /
 * document dir=rtl, which broke flex, forms, and buttons after i18n ran.
 */
html[lang='fa'] body.auth-page .navbar-container {
  flex-direction: row-reverse;
}

html[lang='fa'] body.auth-page .navbar-nav {
  flex-direction: row-reverse;
}

html[lang='fa'] body.auth-page .navbar-actions {
  flex-direction: row-reverse;
}

html[lang='fa'] body.auth-page .navbar-nav a.active::after {
  left: auto;
  right: 0;
}

html[lang='fa'] body.auth-page .language-switcher select {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-md);
}

html[lang='fa'] body.auth-page .language-switcher::after {
  left: var(--spacing-sm);
  right: auto;
}

html[lang='fa'] body.auth-page .dropdown-menu {
  left: 0;
  right: auto;
}

html[lang='fa'] body.auth-page .dropdown-item {
  text-align: right;
}

body.auth-page *,
body.auth-page *::before,
body.auth-page *::after {
  box-sizing: border-box;
}

/*
 * Main: full viewport column under fixed navbar — border-box so min-height + padding
 * don’t fight layout-main’s generic rule (calc(100vh - 68px)) and clip/crowd the card.
 */
body.auth-page.layout-main > main#main-content.auth-main {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important;
  padding-left: max(1rem, env(safe-area-inset-left)) !important;
  padding-right: max(1rem, env(safe-area-inset-right)) !important;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  isolation: isolate;
  direction: ltr !important;
}

body.auth-page.layout-main > main#main-content.auth-main > .auth-card {
  width: 100% !important;
  max-width: 28rem !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  position: relative;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

body.auth-page.layout-main > main#main-content.auth-main > .auth-card.auth-card--wide {
  max-width: 31.25rem !important;
}

/* Navbar actions: never full-width stretched buttons */
body.auth-page .navbar .btn,
body.auth-page .navbar button {
  width: auto !important;
  min-width: unset;
  max-width: none;
  flex: 0 0 auto;
}

body.auth-page .navbar-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* Card inputs: prevent flex overflow “stretch” glitches */
.auth-card .auth-field input,
.auth-card .auth-field input[type="email"],
.auth-card .auth-field input[type="password"],
.auth-card .auth-field input[type="text"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Remember / links row — RTL-safe */
.auth-card .auth-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.auth-card .auth-meta-row > * {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.auth-card .auth-meta-row a {
  white-space: nowrap;
}

/* Primary submit: full width of card only */
.auth-card .auth-submit {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* All buttons inside auth-card stay within card bounds */
.auth-card .btn,
.auth-card button {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Nuclear option: force containment of all auth-card content */
.auth-card,
.auth-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.auth-card {
  contain: layout style !important;
  overflow: hidden !important;
}

/* Specific overrides for common problems */
body.auth-page .auth-card .btn,
body.auth-page .auth-card button,
body.auth-page .auth-card input,
body.auth-page .auth-card .auth-field {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.auth-page .auth-card .auth-submit {
  width: 100% !important;
}

/* Password toggle: don’t stretch */
.auth-card .auth-password-wrap {
  position: relative;
}

.auth-card .auth-password-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 0.75rem;
  width: auto !important;
  min-width: 2.5rem;
  padding: 0.25rem 0.5rem;
}

/* Card stays LTR so email/password align predictably; undo rtl.css .btn row-reverse inside card */
body.rtl.auth-page .auth-card {
  direction: ltr;
  text-align: left;
}

body.rtl.auth-page .auth-card label,
body.rtl.auth-page .auth-card h1,
body.rtl.auth-page .auth-card h2,
body.rtl.auth-page .auth-card p {
  text-align: left;
}

body.rtl.auth-page .auth-card .btn {
  flex-direction: row;
}

/* Scoped hover — do not affect navbar buttons */
.auth-card .auth-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.auth-card .auth-submit:active:not(:disabled) {
  transform: translateY(0);
}

@media (max-width: 480px) {
  body.auth-page.layout-main > main#main-content.auth-main {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  body.auth-page.layout-main > main#main-content.auth-main > .auth-card {
    padding: 2.5rem 1.25rem !important;
  }
}

/* Language switcher: fixed bar at bottom (login/register), same components as main footer */
body.auth-page .site-footer-lang {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  margin: 0;
  padding: 14px 18px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

body.auth-page .site-footer-lang .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

body.auth-page.layout-main:has(.site-footer-lang) > main#main-content.auth-main {
  padding-bottom: calc(1.5rem + 58px + env(safe-area-inset-bottom, 0px)) !important;
}

html[lang='fa'] body.auth-page .site-footer-lang .language-switcher select {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-md);
}

html[lang='fa'] body.auth-page .site-footer-lang .language-switcher::after {
  left: var(--spacing-sm);
  right: auto;
}