:root {
  --rq-mfe-bg: #f7faf9;
  --rq-mfe-surface: #ffffff;
  --rq-mfe-text: #17212b;
  --rq-mfe-muted: #5b6774;
  --rq-mfe-primary: #087f72;
  --rq-mfe-primary-dark: #075f57;
  --rq-mfe-border: #d9e4e1;
}

html[lang="fa"],
html[lang="fa"] body {
  direction: rtl;
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(8, 127, 114, .10), transparent 26rem),
    linear-gradient(180deg, #ffffff 0%, var(--rq-mfe-bg) 100%);
  color: var(--rq-mfe-text);
  font-family: Vazirmatn, IRANSans, Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

#root {
  direction: rtl;
  min-height: 100vh;
}

.btn,
button,
[role="button"] {
  border-radius: 8px;
  letter-spacing: 0;
}

.btn-primary,
button[type="submit"] {
  background-color: var(--rq-mfe-primary);
  border-color: var(--rq-mfe-primary);
}

.btn-primary:hover,
.btn-primary:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
  background-color: var(--rq-mfe-primary-dark);
  border-color: var(--rq-mfe-primary-dark);
}

input,
select,
textarea {
  direction: rtl;
  text-align: right;
}

input[type="email"],
input[name*="email" i],
input[name*="username" i],
input[name*="password" i],
input[autocomplete="email"],
input[autocomplete="username"],
input[autocomplete="current-password"],
input[autocomplete="new-password"] {
  direction: ltr;
  text-align: left;
}

.form-control,
.pgn__form-control {
  border-color: var(--rq-mfe-border);
  border-radius: 8px;
}

.form-control:focus,
.pgn__form-control:focus {
  border-color: var(--rq-mfe-primary);
  box-shadow: 0 0 0 .2rem rgba(8, 127, 114, .18);
}

.alert,
.pgn__alert {
  direction: rtl;
  text-align: right;
}

.dropdown-menu {
  direction: rtl;
  text-align: right;
}

.rq-mfe-brand-strip {
  align-items: center;
  background: #102033;
  color: #fff;
  display: flex;
  gap: 12px;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  text-align: center;
}

.rq-mfe-brand-mark {
  background: var(--rq-mfe-primary);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px;
}

.rq-mfe-brand-title {
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .rq-mfe-brand-strip {
    align-items: flex-start;
    flex-direction: column;
  }
}