/* 
# Copyright (c) 2026 Nokia. All rights reserved.
# This program contains proprietary information which is a trade secret
# of Nokia and also is protected as an unpublished work under applicable
# Copyright laws. Recipient is to retain this program in confidence and
# is not permitted to use or make copies thereof other than as permitted
# in a written agreement with Nokia.
*/

.main-container,
.blend,
#firebaseui-container {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.main-container .mdl-card,
#firebaseui-container .mdl-card {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

#tenant-header.heading-center {
  font-size: 1.5rem !important;
  color: #fff !important;
  text-align: right !important;
}

.main-container {
  margin-left: 30% !important;
  margin-right: 2rem !important;
}

.main-container [data-id="email-form"],
#firebaseui-container [data-id="email-form"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
}

.main-container [data-id="email-input-row"],
#firebaseui-container [data-id="email-input-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.main-container [data-id="redirect-status"],
#firebaseui-container [data-id="redirect-status"] {
  text-align: right !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 200px !important;
  min-width: 0 !important;
}

#idp-step,
#loading-page {
  font-size: 1.5rem !important;
}

.main-container [data-id="error-slot"],
#firebaseui-container [data-id="error-slot"] {
  min-height: 2em !important;
  width: 100% !important;
  max-width: min(420px, 92vw) !important;
  min-width: 0 !important;
  text-align: right !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.main-container [data-id="error"],
#firebaseui-container [data-id="error"] {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  max-width: min(420px, 92vw) !important;
  min-width: 0 !important;
}

.main-container input,
#firebaseui-container input,
.main-container input[type="email"],
#firebaseui-container input[type="email"],
.main-container input[type="text"],
#firebaseui-container input[type="text"] {
  background: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

.main-container input::placeholder,
#firebaseui-container input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.main-container button,
#firebaseui-container button,
.main-container [class*="button"],
#firebaseui-container [class*="button"] {
  background: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
}

.main-container button:hover,
#firebaseui-container button:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
}

.main-container [data-id="email-input"],
#firebaseui-container [data-id="email-input"],
input[data-id="email-input"] {
  font-size: 1.125rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  flex: 1 !important;
  min-width: 180px !important;
  max-width: 280px !important;
}

.main-container [data-id="email-input"]::placeholder,
#firebaseui-container [data-id="email-input"]::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.main-container [data-id="continue-btn"],
#firebaseui-container [data-id="continue-btn"] {
  background: #000 !important;
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}

.main-container [data-id="continue-btn"]:hover,
#firebaseui-container [data-id="continue-btn"]:hover {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

[data-id="continue-btn"] {
  font-size: 0 !important;
  min-width: 2.5em !important;
}

[data-id="continue-btn"]::after {
  content: '→' !important;
  font-size: 1.25rem !important;
  display: inline-block !important;
}

[data-id="tos-privacy-footer"] {
  max-width: 200px !important;
  min-width: 0 !important;
}

/* IAP variant runs on the dark Nokia gradient — the previous deep-blue
   `rgba(35, 2, 247, 0.9)` was effectively invisible against the
   background. Match the rest of the white-on-dark theme: same translucent
   white as every other secondary link in this file (back buttons, "Use a
   different sign-in method", etc.) and brighten on hover / keyboard focus
   so the affordance is obvious. */
[data-id="tos-privacy-footer"] a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
}

[data-id="tos-privacy-footer"] a:hover,
[data-id="tos-privacy-footer"] a:focus {
  color: #fff !important;
}

/* Auth method picker overrides for the IAP sign-in (white-on-dark theme). */
.main-container [data-id="auth-method-picker"],
#firebaseui-container [data-id="auth-method-picker"] {
  align-items: flex-end !important;
  max-width: min(420px, 92vw) !important;
  margin-left: auto !important;
}

.main-container [data-id="auth-method-list"] button,
#firebaseui-container [data-id="auth-method-list"] button {
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

.main-container [data-id="auth-method-list"] button:hover,
#firebaseui-container [data-id="auth-method-list"] button:hover {
  background: rgba(0, 0, 0, 0.5) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Phone OTP overrides — right-aligned to match email-first layout. */
.main-container [data-id="phone-otp-form"],
#firebaseui-container [data-id="phone-otp-form"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
}

.main-container [data-id="phone-input-row"],
.main-container [data-id="otp-input-row"],
#firebaseui-container [data-id="phone-input-row"],
#firebaseui-container [data-id="otp-input-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.main-container [data-id="phone-input"],
.main-container [data-id="otp-input"],
#firebaseui-container [data-id="phone-input"],
#firebaseui-container [data-id="otp-input"] {
  font-size: 1.125rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  flex: 1 !important;
  min-width: 180px !important;
  max-width: 280px !important;
}

.main-container [data-id="phone-input"]::placeholder,
.main-container [data-id="otp-input"]::placeholder,
#firebaseui-container [data-id="phone-input"]::placeholder,
#firebaseui-container [data-id="otp-input"]::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.main-container [data-id="phone-send-btn"],
.main-container [data-id="phone-verify-btn"],
.main-container [data-id="phone-resend-btn"],
#firebaseui-container [data-id="phone-send-btn"],
#firebaseui-container [data-id="phone-verify-btn"],
#firebaseui-container [data-id="phone-resend-btn"] {
  background: #000 !important;
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}

.main-container [data-id="phone-send-btn"]:hover,
.main-container [data-id="phone-verify-btn"]:hover,
.main-container [data-id="phone-resend-btn"]:hover,
#firebaseui-container [data-id="phone-send-btn"]:hover,
#firebaseui-container [data-id="phone-verify-btn"]:hover,
#firebaseui-container [data-id="phone-resend-btn"]:hover {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

.main-container [data-id="phone-back-btn"],
#firebaseui-container [data-id="phone-back-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

.main-container [data-id="recaptcha-container"],
#firebaseui-container [data-id="recaptcha-container"] {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Email-link overrides — right-aligned to match email-first layout. */
.main-container [data-id="email-link-form"],
#firebaseui-container [data-id="email-link-form"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
}

.main-container [data-id="email-link-input-row"],
#firebaseui-container [data-id="email-link-input-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.main-container [data-id="email-link-input"],
#firebaseui-container [data-id="email-link-input"] {
  font-size: 1.125rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  flex: 1 !important;
  min-width: 180px !important;
  max-width: 280px !important;
}

.main-container [data-id="email-link-input"]::placeholder,
#firebaseui-container [data-id="email-link-input"]::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.main-container [data-id="email-link-send-btn"],
#firebaseui-container [data-id="email-link-send-btn"] {
  background: #000 !important;
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}

.main-container [data-id="email-link-send-btn"]:hover,
#firebaseui-container [data-id="email-link-send-btn"]:hover {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

.main-container [data-id="email-link-status"],
#firebaseui-container [data-id="email-link-status"] {
  text-align: right !important;
  max-width: min(420px, 92vw) !important;
  color: #fff !important;
}

.main-container [data-id="email-link-back-btn"],
#firebaseui-container [data-id="email-link-back-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

/* --- Access-request form (Option D: visible CAPTCHA gate) -------------- */

.main-container [data-id="access-request-form"],
#firebaseui-container [data-id="access-request-form"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  max-width: min(420px, 92vw) !important;
  margin-left: auto !important;
  text-align: left !important;
  color: #fff !important;
}

.main-container [data-id="access-request-title"],
#firebaseui-container [data-id="access-request-title"] {
  margin: 0 !important;
  font-size: 1rem !important;
  text-align: right !important;
}

.main-container [data-id="access-request-intro"],
#firebaseui-container [data-id="access-request-intro"] {
  margin: 0 0 0.5rem 0 !important;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: right !important;
}

/* Read-only "Submitting access request for: <email>" chip. Same dark
   background pattern used by inputs and the separator so it sits on the
   photo backdrop legibly. The bold email value gets the same #fff +
   shadow treatment as the form labels. */
.main-container [data-id="access-request-email-display"],
#firebaseui-container [data-id="access-request-email-display"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  text-align: right !important;
  font-size: 0.85rem !important;
  color: #fff !important;
}

.main-container [data-id="access-request-email-display-row"],
#firebaseui-container [data-id="access-request-email-display-row"] {
  word-break: break-all !important;
}

.main-container [data-id="access-request-email-display-label"],
#firebaseui-container [data-id="access-request-email-display-label"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

.main-container [data-id="access-request-email-display-value"],
#firebaseui-container [data-id="access-request-email-display-value"] {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.main-container [data-id="access-request-email-display-hint"],
#firebaseui-container [data-id="access-request-email-display-hint"] {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Label + input pairs inside the access-request form. Attribute-prefix
   selectors keep the rule list short and pick up any new identity field
   automatically (first-name / last-name / company / country).
   The labels sit directly on the photo backdrop (no input-style "chip"
   underneath), so we use pure white + a soft drop-shadow — same trick
   the page title relies on — to keep them legible when the backdrop
   has bright cyan/light patches. */
.main-container [data-id="access-request-form"] label[data-id^="access-request-"][data-id$="-label"],
#firebaseui-container [data-id="access-request-form"] label[data-id^="access-request-"][data-id$="-label"] {
  font-size: 0.8rem !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  margin: 0 !important;
}

.main-container [data-id="access-request-form"] input[data-id^="access-request-"][data-id$="-input"],
.main-container [data-id="access-request-form"] textarea[data-id^="access-request-"][data-id$="-input"],
#firebaseui-container [data-id="access-request-form"] input[data-id^="access-request-"][data-id$="-input"],
#firebaseui-container [data-id="access-request-form"] textarea[data-id^="access-request-"][data-id$="-input"] {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  font-family: inherit !important;
}

.main-container [data-id="access-request-reason-input"],
#firebaseui-container [data-id="access-request-reason-input"] {
  resize: vertical !important;
}

/* Match the reason textarea's placeholder colour to the four identity
   inputs. The global `.main-container input::placeholder` rule already
   gives inputs `rgba(255, 255, 255, 0.7)`, but it doesn't target
   <textarea>, so the reason field would otherwise fall back to the
   browser default (a slightly darker grey) and look inconsistent. */
.main-container [data-id="access-request-form"] textarea::placeholder,
#firebaseui-container [data-id="access-request-form"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Two-column rows: first/last name, company/country. Grid so columns are
   width-equal regardless of placeholder length; stacks below 480px. */
.main-container [data-id="access-request-form"] .access-request-field-row,
#firebaseui-container [data-id="access-request-form"] .access-request-field-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
}

.main-container [data-id="access-request-form"] .access-request-field-col,
#firebaseui-container [data-id="access-request-form"] .access-request-field-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  /* Allow the input to shrink to its grid track — without this, long
     placeholders force the column wider than its share. */
  min-width: 0 !important;
}

@media (max-width: 480px) {
  .main-container [data-id="access-request-form"] .access-request-field-row,
  #firebaseui-container [data-id="access-request-form"] .access-request-field-row {
    grid-template-columns: 1fr !important;
  }
}

.main-container [data-id="access-request-captcha-slot"],
#firebaseui-container [data-id="access-request-captcha-slot"] {
  /* reCAPTCHA renders an iframe with light background; align right to match
     the rest of the right-aligned IAP layout but keep the widget itself
     left-aligned within its container. */
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 0.5rem !important;
}

.main-container [data-id="access-request-nav-row"],
#firebaseui-container [data-id="access-request-nav-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 0.25rem !important;
}

.main-container [data-id="access-request-back-btn"],
#firebaseui-container [data-id="access-request-back-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

.main-container [data-id="access-request-status"],
#firebaseui-container [data-id="access-request-status"] {
  text-align: right !important;
  color: #fff !important;
}

.main-container [data-id="access-request-error"],
#firebaseui-container [data-id="access-request-error"] {
  color: #ffb4b4 !important;
  text-align: right !important;
  margin: 0 !important;
}

/* --- Email-OTP (Phase 3) ----------------------------------------------- */

.main-container [data-id="email-otp-form"],
#firebaseui-container [data-id="email-otp-form"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
}

.main-container [data-id="email-otp-input-row"],
.main-container [data-id="email-otp-code-row"],
#firebaseui-container [data-id="email-otp-input-row"],
#firebaseui-container [data-id="email-otp-code-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.main-container [data-id="email-otp-input"],
.main-container [data-id="email-otp-code-input"],
#firebaseui-container [data-id="email-otp-input"],
#firebaseui-container [data-id="email-otp-code-input"] {
  font-size: 1.125rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  flex: 1 !important;
  min-width: 180px !important;
  max-width: 280px !important;
}

.main-container [data-id="email-otp-code-input"],
#firebaseui-container [data-id="email-otp-code-input"] {
  letter-spacing: 0.25em !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

.main-container [data-id="email-otp-input"]::placeholder,
.main-container [data-id="email-otp-code-input"]::placeholder,
#firebaseui-container [data-id="email-otp-input"]::placeholder,
#firebaseui-container [data-id="email-otp-code-input"]::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.main-container [data-id="email-otp-send-btn"],
.main-container [data-id="email-otp-verify-btn"],
#firebaseui-container [data-id="email-otp-send-btn"],
#firebaseui-container [data-id="email-otp-verify-btn"] {
  background: #000 !important;
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
}

.main-container [data-id="email-otp-send-btn"]:hover,
.main-container [data-id="email-otp-verify-btn"]:hover,
#firebaseui-container [data-id="email-otp-send-btn"]:hover,
#firebaseui-container [data-id="email-otp-verify-btn"]:hover {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

.main-container [data-id="email-otp-status"],
#firebaseui-container [data-id="email-otp-status"] {
  text-align: right !important;
  max-width: min(420px, 92vw) !important;
  color: #fff !important;
}

.main-container [data-id="email-otp-code-label"],
#firebaseui-container [data-id="email-otp-code-label"] {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  text-align: right !important;
}

.main-container [data-id="email-otp-resend-btn"],
.main-container [data-id="email-otp-back-btn"],
#firebaseui-container [data-id="email-otp-resend-btn"],
#firebaseui-container [data-id="email-otp-back-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

/* Persistence hint above the method list — same drop-shadow treatment we
   use on access-request labels so the line stays legible against the
   photo backdrop. Right-aligned to match the rest of the IAP layout. */
.main-container [data-id="auth-method-picker-hint"],
#firebaseui-container [data-id="auth-method-picker-hint"] {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.8rem !important;
  margin: 0 0 0.5rem 0 !important;
  text-align: right !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* The preferred-method outline uses the brand purple so it stands out
   against the dark photographic background without competing with the
   error red. */
.main-container [data-id="auth-method-list"] button.is-preferred,
#firebaseui-container [data-id="auth-method-list"] button.is-preferred {
  outline: 2px solid rgba(255, 255, 255, 0.85) !important;
  outline-offset: 2px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
}

/* --- OTP one-box-per-digit input (IAP layout) -------------------------- */

.main-container [data-id="otp-input-cells"],
#firebaseui-container [data-id="otp-input-cells"] {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: flex-end !important;
}

.main-container [data-id="otp-input-cells"] input,
#firebaseui-container [data-id="otp-input-cells"] input {
  width: 2.5rem !important;
  height: 3rem !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  background: rgba(0, 0, 0, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 4px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 2.5rem !important;
  box-sizing: border-box !important;
}

.main-container [data-id="otp-input-cells"].is-invalid input,
#firebaseui-container [data-id="otp-input-cells"].is-invalid input {
  border-color: #ffb4b4 !important;
}

/* --- Email-link wait panel (IAP) --------------------------------------- */

.main-container [data-id="email-link-wait"],
#firebaseui-container [data-id="email-link-wait"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  text-align: right !important;
  max-width: min(420px, 92vw) !important;
  margin-left: auto !important;
  color: #fff !important;
}

.main-container [data-id="email-link-wait-title"],
#firebaseui-container [data-id="email-link-wait-title"] {
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.main-container [data-id="email-link-wait-sent-to"],
.main-container [data-id="email-link-wait-instructions"],
#firebaseui-container [data-id="email-link-wait-sent-to"],
#firebaseui-container [data-id="email-link-wait-instructions"] {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.main-container [data-id="email-link-wait-actions"],
#firebaseui-container [data-id="email-link-wait-actions"] {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  margin-top: 0.25rem !important;
}

.main-container [data-id="email-link-resend-btn"],
#firebaseui-container [data-id="email-link-resend-btn"] {
  background: #000 !important;
  background-color: #000 !important;
  border: 1px solid #000 !important;
  color: #fff !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: 4px !important;
}

.main-container [data-id="email-link-resend-btn"]:hover:not(:disabled),
#firebaseui-container [data-id="email-link-resend-btn"]:hover:not(:disabled) {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
}

.main-container [data-id="email-link-resend-btn"]:disabled,
#firebaseui-container [data-id="email-link-resend-btn"]:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

.main-container [data-id="email-link-change-email-btn"],
#firebaseui-container [data-id="email-link-change-email-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

/* --- Access-request confirmation ("what happens next") ----------------- */

.main-container [data-id="access-request-done"],
#firebaseui-container [data-id="access-request-done"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  text-align: right !important;
  max-width: min(420px, 92vw) !important;
  margin-left: auto !important;
  color: #fff !important;
}

.main-container [data-id="access-request-done-title"],
#firebaseui-container [data-id="access-request-done-title"] {
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

/* Confirmation copy ("what happens next") sits directly on the photo
   backdrop, just like the form labels — same `#fff` + soft drop-shadow
   treatment so it stays legible on any bright patch. The <strong> wrap
   around the user's email gets the shadow too via inheritance. */
.main-container [data-id="access-request-done-intro"],
#firebaseui-container [data-id="access-request-done-intro"] {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.main-container [data-id="access-request-done-list"],
#firebaseui-container [data-id="access-request-done-list"] {
  margin: 0 !important;
  padding: 0 !important;
  list-style-position: inside !important;
  font-size: 0.9rem !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* SSO-required panel — wrapped in a distinct callout card so the user
   recognises this as "you need to do something different" rather than
   another regular form field. The card uses a darker translucent
   background + soft border (same materials as the email chip / access-
   request-email-display) so it sits naturally on the photo backdrop
   while clearly separating itself from the surrounding labels.
   Right-aligned to match the rest of the IAP layout. */
.main-container [data-id="sso-required-panel"],
#firebaseui-container [data-id="sso-required-panel"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  margin: 0.5rem 0 !important;
  padding: 0.85rem 0.95rem !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  /* Subtle accent on the trailing edge (right side, since the layout is
     right-aligned) so the panel reads as a deliberate callout. Kept thin
     and translucent to avoid clashing with the photo backdrop. */
  box-shadow: inset -3px 0 0 0 rgba(255, 255, 255, 0.35) !important;
  text-align: right !important;
}

.main-container [data-id="sso-required-title"],
#firebaseui-container [data-id="sso-required-title"] {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  text-align: right !important;
}

/* Email chip lives INSIDE the card now, so it doesn't need its own dark
   background — that would just stack one translucent layer on top of
   another. Use a lighter inner-card treatment so the chip still reads as
   a distinct "this is the email we resolved" element. */
.main-container [data-id="sso-required-email"],
#firebaseui-container [data-id="sso-required-email"] {
  padding: 0.4rem 0.6rem !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.85rem !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  word-break: break-all !important;
  text-align: right !important;
}

.main-container [data-id="sso-required-body"],
#firebaseui-container [data-id="sso-required-body"] {
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  text-align: right !important;
}

.main-container [data-id="sso-required-actions"],
#firebaseui-container [data-id="sso-required-actions"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  margin-top: 0.25rem !important;
  text-align: right !important;
}

.main-container [data-id="access-request-done-actions"],
#firebaseui-container [data-id="access-request-done-actions"] {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 0.5rem !important;
}

.main-container [data-id="access-request-done-back-btn"],
#firebaseui-container [data-id="access-request-done-back-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

/* --- SAML email form: "Use a different sign-in method" nav row -------- */

.main-container [data-id="email-saml-nav-row"],
#firebaseui-container [data-id="email-saml-nav-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 0.25rem !important;
}

.main-container [data-id="email-saml-back-btn"],
#firebaseui-container [data-id="email-saml-back-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

/* The wait-panel picker link sits next to Resend / Use a different email,
   so the layout adapts to a wrapping flex row when the third button bumps
   the line over a comfortable width. */
.main-container [data-id="email-link-wait-actions"],
#firebaseui-container [data-id="email-link-wait-actions"] {
  flex-wrap: wrap !important;
}

.main-container [data-id="email-link-wait-picker-btn"],
#firebaseui-container [data-id="email-link-wait-picker-btn"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

/* --- Driver top-level nav rows ("Use a different sign-in method") ------- */

.main-container [data-id="email-link-nav-row"],
#firebaseui-container [data-id="email-link-nav-row"],
.main-container [data-id="email-otp-nav-row"],
#firebaseui-container [data-id="email-otp-nav-row"] {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 0.25rem !important;
}

/* --- Generic "secondary" button override (matches common.css `.secondary`) - */

.main-container button.secondary,
#firebaseui-container button.secondary {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline !important;
  padding: 0 !important;
}

#separator {
  width: fit-content !important;
  margin-left: auto !important;
}

#separator .separator {
  padding: 0.5rem 1rem !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 6px !important;
  width: fit-content !important;
}

#separator .separator::before,
#separator .separator::after {
  display: none !important;
}

#logo {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)) !important;
}