/* Original dark auth cards + white typing boxes (black text) */

.auth-shell {
  padding-top: 2.25rem;
  padding-bottom: 3rem;
}

/* Login / register: same blue gradient family as MFA */
.auth-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 28px;
  overflow: visible !important;
  background:
    radial-gradient(circle at top right, rgba(113, 245, 109, 0.2), transparent 28%),
    linear-gradient(160deg, #0f2348, #12315d 52%, #1d76ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 56px rgba(8, 20, 48, 0.32);
  color: #f5fbff;
}

.auth-card h1 {
  color: #ffffff !important;
}

.auth-card > p,
.auth-card .auth-footer-note {
  color: rgba(236, 247, 255, 0.84) !important;
}

.auth-card .eyebrow {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #d8efff !important;
}

.auth-card a {
  color: #71f56d;
  font-weight: 600;
}

.auth-card a:hover {
  color: #2fd9ff;
}

/* MFA: restore original dark gradient */
.mfa-card,
.mfa-card--compact {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 28px;
  overflow: visible !important;
  background:
    radial-gradient(circle at top right, rgba(113, 245, 109, 0.2), transparent 28%),
    linear-gradient(160deg, #0f2348, #12315d 52%, #1d76ff 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 28px 56px rgba(8, 20, 48, 0.32) !important;
  color: #f5fbff !important;
}

.mfa-card--compact {
  max-width: 720px;
}

.mfa-card h1,
.mfa-card h2,
.mfa-card strong,
.mfa-card dt {
  color: #ffffff !important;
}

.mfa-card > p,
.mfa-card p,
.mfa-card dd,
.mfa-card small,
.mfa-card .mfa-help {
  color: rgba(236, 247, 255, 0.84) !important;
}

.mfa-card .eyebrow {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #d8efff !important;
}

.mfa-panel {
  padding: 1.15rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f5fbff !important;
}

.mfa-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 1.25rem;
}

.mfa-inline-meta span {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.mfa-secret {
  display: block;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(10, 24, 49, 0.78) !important;
  color: #71f56d !important;
  border: 0 !important;
  word-break: break-all;
}

.mfa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 720px) {
  .mfa-grid {
    grid-template-columns: 1fr;
  }
}

/* Light form well on dark cards */
.auth-card .form-card,
.auth-card .form-card--flat,
.mfa-card .form-card,
.mfa-card .form-card--flat,
.mfa-form,
.form-card.mfa-form {
  margin-top: 1.25rem;
  padding: 1.15rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.55);
  overflow: visible !important;
}

.auth-card label span,
.mfa-card label span,
.mfa-form label span {
  color: #0f1111 !important;
  font-weight: 600;
}

/* Universal typing boxes: white field, black text */
.auth-shell input[type="email"],
.auth-shell input[type="password"],
.auth-shell input[type="text"],
.auth-shell input[type="number"],
.auth-shell input[type="search"],
.auth-shell input[type="tel"],
.auth-shell input[name="code"],
.auth-shell textarea,
.auth-card input,
.mfa-card input,
.mfa-form input,
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="text"],
.form-card input[type="number"],
.form-card input[type="search"],
.form-card input[type="tel"],
.form-card input[name="code"],
.form-card textarea,
.form-card--market input[type="email"],
.form-card--market input[type="password"],
.form-card--market input[type="text"],
.form-card--market input[type="number"],
.form-card--market input[type="tel"],
.form-card--market textarea,
.control-panel input[type="email"],
.control-panel input[type="password"],
.control-panel input[type="text"],
.control-panel input[type="number"],
.control-panel textarea,
.checkout-market input[type="email"],
.checkout-market input[type="password"],
.checkout-market input[type="text"],
.checkout-market input[type="number"],
.checkout-market input[type="tel"],
.checkout-market textarea {
  box-sizing: border-box !important;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px !important;
  line-height: 1.25 !important;
  font-size: 1rem !important;
  color: #0f1111 !important;
  -webkit-text-fill-color: #0f1111 !important;
  caret-color: #0f1111 !important;
  background: #ffffff !important;
  border: 1px solid #888c8c !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.auth-shell input[name="code"],
.mfa-form input[name="code"],
.mfa-card input[name="code"] {
  min-height: 52px;
  height: 52px;
  font-size: 1.25rem !important;
  letter-spacing: 0.2em;
}

.auth-shell input::placeholder,
.auth-shell textarea::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder,
.mfa-form input::placeholder,
.checkout-market input::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

.auth-shell input:focus,
.auth-shell textarea:focus,
.form-card input:focus,
.form-card textarea:focus,
.mfa-form input:focus,
.checkout-market input:focus,
.control-panel input:focus,
.control-panel textarea:focus {
  outline: none;
  border-color: #007185 !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 133, 0.2) !important;
}

.auth-shell input:-webkit-autofill,
.auth-shell input:-webkit-autofill:hover,
.auth-shell input:-webkit-autofill:focus,
.form-card input:-webkit-autofill,
.form-card input:-webkit-autofill:focus,
.mfa-form input:-webkit-autofill,
.checkout-market input:-webkit-autofill,
.control-panel input:-webkit-autofill {
  -webkit-text-fill-color: #0f1111 !important;
  caret-color: #0f1111 !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* MFA setup URI textarea stays readable on dark panel */
.mfa-uri textarea {
  background: #ffffff !important;
  color: #0f1111 !important;
  -webkit-text-fill-color: #0f1111 !important;
  border: 1px solid #888c8c !important;
}

/* === Fix Continue shopping overlapping heading text (2026-09-19) === */
.section-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.section-heading > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.section-heading .section-lede,
.section-heading p {
    max-width: 62ch;
}

.section-heading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    align-self: flex-start;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin-top: 0.15rem;
}

/* Order confirmation: put actions under the lede so they never cover copy */
.section-heading--stacked {
    flex-direction: column;
    align-items: flex-start;
}

.section-heading--stacked .section-heading__actions {
    margin-top: 0.35rem;
}

.empty-state {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
    padding: 2rem;
    overflow: visible !important;
}

.empty-state p {
    margin: 0;
    max-width: 48ch;
}

.empty-state .button {
    position: relative;
    z-index: 1;
    margin-top: 0;
}