/**
 * Official "Sign in with UAE PASS" button on the login / register forms.
 *
 * Pill SVG assets per the button guidelines: Active at rest, Focus on
 * hover/focus, Pressed on click, Disabled when disabled. Language-aware:
 * English by default, Arabic under html[lang="ar"].
 */
/* Hide the visible "Error message" heading (Gin shows it; keep it for screen
   readers only, matching the frontend theme) on the UAE PASS login/register pages. */
.messages__header .messages__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.uae-pass {
  display: flex;
  justify-content: center;
  /* Clear space around the button (>= 1/10 of its height per guidelines). */
  margin: 0.5rem 0 1.5rem;
}

/* "Or" divider shown above the UAEPASS button. */
.uae-pass-or {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  color: #888;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uae-pass-or::before,
.uae-pass-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dde1e7;
}

.uae-pass-or span {
  padding: 0 0.75rem;
}

.uae-pass__btn {
  display: block;
  /* Full width to match the "Next" button. The Pill SVG scales uniformly
     (aspect ratio locked) and stays crisp at any size. */
  width: 100%;
  aspect-ratio: 264 / 50;
  background: url('../images/EN/Pill/Active.svg') center / contain no-repeat;
  /* Pill variant = fully rounded (matches any focus outline to the shape). */
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}

.uae-pass__btn:hover,
.uae-pass__btn:focus {
  background-image: url('../images/EN/Pill/Focus.svg');
}

.uae-pass__btn:active {
  background-image: url('../images/EN/Pill/Pressed.svg');
}

.uae-pass__btn.is-disabled,
.uae-pass__btn[aria-disabled="true"] {
  background-image: url('../images/EN/Pill/Disabled.svg');
  pointer-events: none;
  cursor: not-allowed;
}

/* Arabic assets (same full-width button, Arabic artwork + ratio). */
html[lang="ar"] .uae-pass__btn {
  aspect-ratio: 304 / 50;
  background-image: url('../images/AR/Pill/Active.svg');
}

html[lang="ar"] .uae-pass__btn:hover,
html[lang="ar"] .uae-pass__btn:focus {
  background-image: url('../images/AR/Pill/Focus.svg');
}

html[lang="ar"] .uae-pass__btn:active {
  background-image: url('../images/AR/Pill/Pressed.svg');
}

html[lang="ar"] .uae-pass__btn.is-disabled,
html[lang="ar"] .uae-pass__btn[aria-disabled="true"] {
  background-image: url('../images/AR/Pill/Disabled.svg');
}