/*
 * mrAG Modern Auth 1.2.0 — sign-in card, modal and overlays.
 * The account panel lives in account.css and loads only where it renders.
 *
 * Fonts are inherited from the theme. Weights are limited to 400 / 500 / 600.
 * `!important` is used only on form controls and buttons: theme and Elementor
 * kit rules (.elementor-kit-N input:not(...):not(...)) outrank any sane selector.
 */

/* ---------- Tokens: light ---------- */
.mrag-mauth,
.mrag-mauth-modal,
.mrag-mauth-account,
.mrag-mauth-overlay,
.mrag-mauth-orderpay-autoredirect {
  --mma-ink: #15171c;
  --mma-muted: #586174;
  --mma-faint: #7f8898;
  --mma-surface: rgba(255, 255, 255, .62);
  --mma-grain: .11;
  --mma-surface-solid: #ffffff;
  --mma-surface-modal: rgba(255, 255, 255, .5);
  --mma-edge: rgba(255, 255, 255, .72);
  --mma-glint: rgba(255, 255, 255, .34);
  --mma-line: rgba(16, 24, 40, .09);
  --mma-line-strong: rgba(16, 24, 40, .18);
  --mma-field: rgba(16, 24, 40, .04);
  --mma-field-hover: rgba(16, 24, 40, .065);
  --mma-sheen: rgba(255, 255, 255, .5);
  --mma-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 20px 50px -18px rgba(16, 24, 40, .22);
  --mma-backdrop: rgba(20, 23, 31, .34);
  --mma-success: #0f9d62;
  --mma-success-rgb: 15, 157, 98;
  --mma-danger: #d6362c;
  --mma-danger-rgb: 214, 54, 44;
  --mma-warn: #a86a12;
  --mma-warn-rgb: 200, 132, 20;
  --mma-info: #2458c5;
  --mma-info-rgb: 36, 88, 197;
  --mma-accent-hover: var(--mrag-mauth-primary-hover, var(--mma-accent));
  --mma-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* ---------- Tokens: dark (forced, system, or site-detected) ---------- */
.mrag-mauth-theme--dark,
.mrag-mauth-theme--auto.is-dark {
  --mma-ink: #f1f2f4;
  --mma-muted: #a4aab7;
  --mma-faint: #747b89;
  --mma-surface: rgba(27, 29, 37, .6);
  --mma-grain: .2;
  --mma-surface-solid: #191b22;
  --mma-surface-modal: rgba(24, 26, 33, .5);
  --mma-edge: rgba(255, 255, 255, .16);
  --mma-glint: rgba(255, 255, 255, .07);
  --mma-line: rgba(255, 255, 255, .1);
  --mma-line-strong: rgba(255, 255, 255, .2);
  --mma-field: rgba(255, 255, 255, .06);
  --mma-field-hover: rgba(255, 255, 255, .095);
  --mma-sheen: rgba(255, 255, 255, .07);
  --mma-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
  --mma-backdrop: rgba(4, 5, 8, .5);
  --mma-success: #3fd999;
  --mma-success-rgb: 63, 217, 153;
  --mma-danger: #ff7268;
  --mma-danger-rgb: 255, 114, 104;
  --mma-warn: #f2b84b;
  --mma-warn-rgb: 242, 184, 75;
  --mma-info: #8ab4ff;
  --mma-info-rgb: 138, 180, 255;
  --mma-accent-hover: var(--mma-accent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .mrag-mauth-theme--auto {
    --mma-ink: #f1f2f4;
    --mma-muted: #a4aab7;
    --mma-faint: #747b89;
    --mma-surface: rgba(27, 29, 37, .6);
    --mma-grain: .2;
    --mma-surface-solid: #191b22;
    --mma-surface-modal: rgba(24, 26, 33, .5);
    --mma-edge: rgba(255, 255, 255, .16);
    --mma-glint: rgba(255, 255, 255, .07);
    --mma-line: rgba(255, 255, 255, .1);
    --mma-line-strong: rgba(255, 255, 255, .2);
    --mma-field: rgba(255, 255, 255, .06);
    --mma-field-hover: rgba(255, 255, 255, .095);
    --mma-sheen: rgba(255, 255, 255, .07);
    --mma-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 28px 60px -20px rgba(0, 0, 0, .7);
    --mma-backdrop: rgba(4, 5, 8, .5);
    --mma-success: #3fd999;
    --mma-success-rgb: 63, 217, 153;
    --mma-danger: #ff7268;
    --mma-danger-rgb: 255, 114, 104;
    --mma-warn: #f2b84b;
    --mma-warn-rgb: 242, 184, 75;
    --mma-info: #8ab4ff;
    --mma-info-rgb: 138, 180, 255;
    --mma-accent-hover: var(--mma-accent);
    color-scheme: dark;
  }
}

/* ---------- Card ---------- */
.mrag-mauth {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  box-sizing: border-box;
  color: var(--mma-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.mrag-mauth *,
.mrag-mauth *::before,
.mrag-mauth *::after { box-sizing: border-box; }

/* A soft tint of the brand colour behind the glass, so there is something to blur. */
.mrag-mauth::before {
  content: "";
  position: absolute;
  inset: 6% -4% -4% -4%;
  z-index: 0;
  border-radius: 40%;
  background:
    radial-gradient(60% 55% at 22% 18%, rgba(var(--mma-accent-rgb), .2), transparent 70%),
    radial-gradient(55% 60% at 82% 88%, rgba(var(--mma-accent-rgb), .12), transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}
.mrag-mauth-surface--solid.mrag-mauth::before,
.mrag-mauth-verify::before,
.mrag-mauth-modal .mrag-mauth::before { display: none; }

.mrag-mauth__card {
  position: relative;
  z-index: 1;
  padding: 30px 26px 26px;
  border: 1px solid var(--mma-edge);
  border-radius: var(--mma-radius, 24px);
  /* Glass: the page shows through, heavily blurred; a soft glint falls from the top corner. */
  background: linear-gradient(140deg, var(--mma-glint), transparent 44%), var(--mma-surface);
  box-shadow: var(--mma-shadow), inset 0 1px 0 var(--mma-sheen);
  -webkit-backdrop-filter: blur(26px) saturate(1.8) brightness(1.16);
  backdrop-filter: blur(26px) saturate(1.8) brightness(1.16);
  isolation: isolate;
}
/* Fine grain over the blur: this is what makes the glass read as frosted, not glossy. */
.mrag-mauth__card::after,
.mrag-mauth-account__side::after,
.mrag-mauth-account__content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--mma-grain, .11);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.mrag-mauth-surface--solid .mrag-mauth__card::after,
.mrag-mauth-surface--solid .mrag-mauth-account__side::after,
.mrag-mauth-surface--solid .mrag-mauth-account__content::after,
.mrag-mauth-verify .mrag-mauth__card::after { display: none; }
.mrag-mauth-modal .mrag-mauth__card { background: linear-gradient(140deg, var(--mma-glint), transparent 44%), var(--mma-surface-modal); }
.mrag-mauth-surface--solid .mrag-mauth__card {
  border-color: var(--mma-line);
  background: var(--mma-surface-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mrag-mauth__card,
  .mrag-mauth-modal .mrag-mauth__card { border-color: var(--mma-line); background: var(--mma-surface-solid); }
}

.mrag-mauth__brand {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border: 1px solid var(--mma-line);
  border-radius: 16px;
  background: var(--mma-field);
  color: var(--mma-ink);
}
.mrag-mauth__brand--icon { color: var(--mma-accent); background: rgba(var(--mma-accent-rgb), .09); border-color: rgba(var(--mma-accent-rgb), .16); }
.mrag-mauth__brand .mrag-mauth-icon { width: 24px; height: 24px; }
.mrag-mauth__brand--logo { width: auto; height: auto; margin-bottom: 12px; border: 0; border-radius: 0; background: none; }
/* The site icon is shown as uploaded: no corners, shadow, hover or motion of its own. */
.mrag-mauth .mrag-mauth__logo { display: block; width: auto !important; max-width: 132px !important; height: 60px !important; margin: 0; border: 0 !important; border-radius: 0 !important; object-fit: contain; box-shadow: none !important; filter: none !important; transform: none !important; transition: none !important; }

.mrag-mauth__head { margin: 0 0 20px; text-align: center; }
.mrag-mauth .mrag-mauth__title {
  margin: 0 0 4px;
  padding: 0;
  color: var(--mma-ink);
  font-family: inherit;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.mrag-mauth .mrag-mauth__subtitle { margin: 0; color: var(--mma-muted); font-size: 13.5px; font-weight: 400; line-height: 1.8; }

/* ---------- Tabs (segmented) ---------- */
.mrag-mauth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: var(--mma-radius-sm, 14px);
  background: var(--mma-field);
}
.mrag-mauth__tabs[hidden] { display: none !important; }
.mrag-mauth .mrag-mauth__tab {
  height: 38px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: calc(var(--mma-radius-sm, 14px) - 4px) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mma-muted) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .2s var(--mma-ease), color .2s var(--mma-ease), box-shadow .2s var(--mma-ease);
}
.mrag-mauth .mrag-mauth__tab:hover { color: var(--mma-ink) !important; }
.mrag-mauth .mrag-mauth__tab.is-active {
  background: var(--mma-surface-solid) !important;
  color: var(--mma-ink) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px var(--mma-line) !important;
}

/* ---------- Notice ---------- */
.mrag-mauth__notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(var(--mma-info-rgb), .1);
  color: var(--mma-info);
  font-size: 13.5px;
  line-height: 1.8;
  text-align: start;
  animation: mmaRise .26s var(--mma-ease) both;
}
.mrag-mauth__notice[hidden] { display: none !important; }
.mrag-mauth__notice::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-top: .68em;
  border-radius: 50%;
  background: currentColor;
}
.mrag-mauth__notice.is-success { background: rgba(var(--mma-success-rgb), .11); color: var(--mma-success); }
.mrag-mauth__notice.is-error { background: rgba(var(--mma-danger-rgb), .1); color: var(--mma-danger); }
.mrag-mauth__notice.is-warning { background: rgba(var(--mma-warn-rgb), .14); color: var(--mma-warn); }

/* ---------- Steps ---------- */
.mrag-mauth__form { margin: 0; padding: 0; }
.mrag-mauth__step { display: none; }
.mrag-mauth__step.is-active { display: grid; gap: 12px; }
.mrag-mauth__step.is-active > * { animation: mmaRise .26s var(--mma-ease) backwards; }
.mrag-mauth__step.is-active > :nth-child(2) { animation-delay: 35ms; }
.mrag-mauth__step.is-active > :nth-child(3) { animation-delay: 70ms; }
.mrag-mauth__step.is-active > :nth-child(4) { animation-delay: 105ms; }
.mrag-mauth__step.is-active > :nth-child(n+5) { animation-delay: 140ms; }
.mrag-mauth__step.is-active > .mrag-mauth-otp-hidden { animation: none; }

/* ---------- Fields ---------- */
.mrag-mauth-field { position: relative; display: block; margin: 0; }
.mrag-mauth-field__icon {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  color: var(--mma-faint);
  pointer-events: none;
  transition: color .2s var(--mma-ease);
}
.mrag-mauth-field:focus-within .mrag-mauth-field__icon { color: var(--mma-accent); }
.mrag-mauth .mrag-mauth-field input {
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  padding-inline-start: 46px !important;
  border: 1px solid var(--mma-line) !important;
  border-radius: var(--mma-radius-sm, 14px) !important;
  background: var(--mma-field) !important;
  box-shadow: none !important;
  color: var(--mma-ink) !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: start !important;
  outline: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--mma-ease), background-color .2s var(--mma-ease), box-shadow .2s var(--mma-ease);
}
.mrag-mauth .mrag-mauth-field input::placeholder { color: var(--mma-faint) !important; opacity: 1 !important; font-weight: 400 !important; }
.mrag-mauth .mrag-mauth-field input:hover { background: var(--mma-field-hover) !important; }
.mrag-mauth .mrag-mauth-field input:focus {
  border-color: var(--mma-accent) !important;
  background: var(--mma-surface-solid) !important;
  box-shadow: 0 0 0 4px rgba(var(--mma-accent-rgb), .14) !important;
}
/* Latin digits typed in an RTL form stay next to the icon instead of jumping to the far side. */
.mrag-mauth[dir="rtl"] .mrag-mauth-field input[dir="ltr"] { text-align: right !important; padding: 0 46px 0 16px !important; }
.mrag-mauth[dir="rtl"] .mrag-mauth-field input[dir="ltr"]::placeholder { direction: rtl; }
.mrag-mauth .mrag-mauth-field input[type="tel"],
.mrag-mauth .mrag-mauth-field--code input { font-variant-numeric: tabular-nums; letter-spacing: .03em !important; }
.mrag-mauth .mrag-mauth-field--password input { padding-inline-end: 48px !important; }
.mrag-mauth .mrag-mauth-field--code input,
.mrag-mauth[dir="rtl"] .mrag-mauth-field--code input[dir="ltr"] { padding: 0 16px !important; text-align: center !important; font-size: 18px !important; letter-spacing: .35em !important; }
.mrag-mauth .mrag-mauth-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--mma-ink);
  box-shadow: 0 0 0 1000px var(--mma-surface-solid) inset !important;
  caret-color: var(--mma-ink);
}

.mrag-mauth .mrag-mauth-eye {
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-end: 6px !important;
  display: grid !important;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  margin: auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mma-faint) !important;
  cursor: pointer;
  transition: color .18s var(--mma-ease), background-color .18s var(--mma-ease);
}
.mrag-mauth .mrag-mauth-eye:hover { color: var(--mma-ink) !important; background: var(--mma-field) !important; }
.mrag-mauth .mrag-mauth-eye .mrag-mauth-icon--eye-off,
.mrag-mauth .mrag-mauth-eye.is-visible .mrag-mauth-icon--eye { display: none; }
.mrag-mauth .mrag-mauth-eye.is-visible .mrag-mauth-icon--eye-off { display: block; }

.mrag-mauth-otp-hidden,
.mrag-mauth-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%);
}

/* ---------- Buttons ---------- */
.mrag-mauth .mrag-mauth-btn,
.mrag-mauth-account .mrag-mauth-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  height: 50px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: var(--mma-radius-sm, 14px) !important;
  background: var(--mma-accent) !important;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .1), 0 8px 20px -10px rgba(var(--mma-accent-rgb), .6) !important;
  color: var(--mma-on-accent) !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s var(--mma-ease), box-shadow .2s var(--mma-ease), transform .12s var(--mma-ease), opacity .2s var(--mma-ease);
}
.mrag-mauth .mrag-mauth-btn:hover,
.mrag-mauth-account .mrag-mauth-btn:hover {
  background: var(--mma-accent-hover) !important;
  background-image: linear-gradient(rgba(127, 127, 127, .16), rgba(127, 127, 127, .16)) !important;
  color: var(--mma-on-accent) !important;
}
.mrag-mauth .mrag-mauth-btn:active { transform: scale(.985); }
.mrag-mauth .mrag-mauth-btn:focus-visible,
.mrag-mauth .mrag-mauth-link-btn:focus-visible,
.mrag-mauth .mrag-mauth-chip:focus-visible,
.mrag-mauth .mrag-mauth__tab:focus-visible,
.mrag-mauth .mrag-mauth-eye:focus-visible,
.mrag-mauth-modal__close:focus-visible {
  outline: 2px solid var(--mma-accent) !important;
  outline-offset: 2px !important;
}
.mrag-mauth .mrag-mauth-btn[disabled] { cursor: default; opacity: .6; }
.mrag-mauth .mrag-mauth-btn.is-loading { pointer-events: none; opacity: 1; color: transparent !important; }
.mrag-mauth .mrag-mauth-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  color: var(--mma-on-accent);
  background: currentColor;
  box-shadow: -14px 0 0 currentColor, 14px 0 0 currentColor;
  animation: mmaDots .9s ease-in-out infinite;
}
.mrag-mauth .mrag-mauth-btn--ghost.is-loading::after { color: var(--mma-ink); }
/* A soft light that crosses the main button on hover. */
.mrag-mauth .mrag-mauth-btn:not(.mrag-mauth-btn--ghost) { overflow: hidden; }
.mrag-mauth .mrag-mauth-btn:not(.mrag-mauth-btn--ghost)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.mrag-mauth .mrag-mauth-btn:not(.mrag-mauth-btn--ghost):hover::before { transform: translateX(120%); transition: transform .7s var(--mma-ease); }
.mrag-mauth .mrag-mauth-btn--ghost,
.mrag-mauth-account .mrag-mauth-btn--ghost {
  border: 1px solid var(--mma-line) !important;
  background: var(--mma-field) !important;
  box-shadow: none !important;
  color: var(--mma-ink) !important;
}
.mrag-mauth .mrag-mauth-btn--ghost:hover,
.mrag-mauth-account .mrag-mauth-btn--ghost:hover { background: var(--mma-field-hover) !important; background-image: none !important; color: var(--mma-ink) !important; }
.mrag-mauth .mrag-mauth-btn--inline,
.mrag-mauth-account .mrag-mauth-btn--inline { width: auto !important; height: 42px !important; padding: 0 20px !important; }

.mrag-mauth .mrag-mauth-link-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mma-muted) !important;
  font: inherit !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color .18s var(--mma-ease);
}
.mrag-mauth .mrag-mauth-link-btn:hover { color: var(--mma-ink) !important; background: transparent !important; }
.mrag-mauth .mrag-mauth-link-btn[disabled] { color: var(--mma-faint) !important; cursor: default; }
.mrag-mauth__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: -2px; }
.mrag-mauth__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mrag-mauth .mrag-mauth-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  width: auto !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--mma-line) !important;
  border-radius: 999px !important;
  background: var(--mma-field) !important;
  box-shadow: none !important;
  color: var(--mma-muted) !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s var(--mma-ease), border-color .18s var(--mma-ease);
}
.mrag-mauth .mrag-mauth-chip:hover { color: var(--mma-ink) !important; border-color: var(--mma-line-strong) !important; background: var(--mma-field) !important; }
.mrag-mauth .mrag-mauth-chip .mrag-mauth-icon { width: 13px; height: 13px; }

/* ---------- OTP ---------- */
.mrag-mauth-sent { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 2px; text-align: center; }
.mrag-mauth .mrag-mauth__hint { margin: 0; color: var(--mma-muted); font-size: 13.5px; line-height: 1.8; }

.mrag-mauth-otp { position: relative; margin: 2px 0 4px; }
.mrag-mauth-otp-boxes { display: flex; justify-content: center; gap: 8px; direction: ltr; }
.mrag-mauth .mrag-mauth-otp-box {
  flex: 1 1 0;
  width: 0 !important;
  max-width: 50px !important;
  min-width: 0 !important;
  height: 54px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--mma-line) !important;
  border-radius: 13px !important;
  background: var(--mma-field) !important;
  box-shadow: none !important;
  color: var(--mma-ink) !important;
  caret-color: var(--mma-accent);
  font: inherit !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  text-align: center !important;
  outline: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s var(--mma-ease), background-color .18s var(--mma-ease), box-shadow .18s var(--mma-ease), transform .18s var(--mma-ease);
}
.mrag-mauth .mrag-mauth-otp-box.is-filled { border-color: var(--mma-line-strong) !important; background: var(--mma-surface-solid) !important; }
.mrag-mauth .mrag-mauth-otp-box:focus {
  border-color: var(--mma-accent) !important;
  background: var(--mma-surface-solid) !important;
  box-shadow: 0 0 0 4px rgba(var(--mma-accent-rgb), .14) !important;
  transform: translateY(-1px);
}

/* Checking the code: a quiet ripple runs across the boxes. */
.mrag-mauth-otp.is-verifying .mrag-mauth-otp-box { pointer-events: none; animation: mmaOtpWave .9s var(--mma-ease) infinite; animation-delay: calc(var(--i, 0) * 70ms); }

/* Wrong code: one shake, red outline, then the boxes are cleared by the script. */
.mrag-mauth-otp.is-error .mrag-mauth-otp-boxes { animation: mmaShake .42s var(--mma-ease); }
.mrag-mauth-otp.is-error .mrag-mauth-otp-box { border-color: var(--mma-danger) !important; background: rgba(var(--mma-danger-rgb), .07) !important; box-shadow: none !important; }

/* Accepted: the digits turn green, gather to the centre and become a tick. */
.mrag-mauth-otp-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--mma-success);
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}
.mrag-mauth-otp-check svg { width: 54px; height: 54px; overflow: visible; }
.mrag-mauth-otp-check__ring { fill: rgba(var(--mma-success-rgb), .12); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 158; stroke-dashoffset: 158; transform: rotate(-90deg); transform-origin: 28px 28px; }
.mrag-mauth-otp-check__tick { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 32; }
.mrag-mauth-otp.is-success .mrag-mauth-otp-box {
  pointer-events: none;
  border-color: var(--mma-success) !important;
  background: rgba(var(--mma-success-rgb), .12) !important;
  box-shadow: none !important;
  color: var(--mma-success) !important;
  animation: mmaOtpGather .36s var(--mma-ease) forwards;
  animation-delay: calc(var(--i, 0) * 20ms);
}
.mrag-mauth-otp.is-success .mrag-mauth-otp-check { animation: mmaCheckIn .36s cubic-bezier(.3, 1.6, .5, 1) .2s forwards; }
.mrag-mauth-otp.is-success .mrag-mauth-otp-check__ring { animation: mmaDraw .34s var(--mma-ease) .22s forwards; }
.mrag-mauth-otp.is-success .mrag-mauth-otp-check__tick { animation: mmaDraw .22s var(--mma-ease) .42s forwards; }
.mrag-mauth-otp.is-success .mrag-mauth-otp-check::before {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(var(--mma-success-rgb), .35);
  animation: mmaHalo .6s ease-out .36s forwards;
}
/* A few sparks leave the tick as it lands. */
.mrag-mauth-otp.is-success .mrag-mauth-otp-check::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  animation: mmaSparks .62s ease-out .4s forwards;
}
.mrag-mauth__step.is-done .mrag-mauth-btn,
.mrag-mauth__step.is-done .mrag-mauth__links,
.mrag-mauth__step.is-done .mrag-mauth-chip,
.mrag-mauth__step.is-done .mrag-mauth-field { opacity: 0; visibility: hidden; transition: opacity .25s var(--mma-ease), visibility 0s .25s; }
.mrag-mauth__step.is-done .mrag-mauth__hint { color: var(--mma-success); font-weight: 500; }

/* ---------- Verify / change phone (signed-in) ---------- */
.mrag-mauth.mrag-mauth-verify { max-width: 520px; margin-inline: 0; }
.mrag-mauth-verify .mrag-mauth__card { padding: 20px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mma-surface-solid); }
.mrag-mauth-verify .mrag-mauth__head { margin-bottom: 14px; text-align: start; }
.mrag-mauth-verify .mrag-mauth__title { font-size: 16px; }
.mrag-mauth-verify .mrag-mauth-sent { flex-direction: row; justify-content: space-between; text-align: start; }
.mrag-mauth-verify details > summary { list-style: none; }
.mrag-mauth-verify details > summary::-webkit-details-marker { display: none; }
.mrag-mauth-verify__summary { display: flex; align-items: center; gap: 10px; color: var(--mma-ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.mrag-mauth-verify__summary > span { flex: 1; }
.mrag-mauth-verify__summary .mrag-mauth-icon { color: var(--mma-muted); }
.mrag-mauth-verify .mrag-mauth-verify__caret { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s var(--mma-ease); }
.mrag-mauth-verify details[open] .mrag-mauth-verify__caret { transform: rotate(-90deg); }
.mrag-mauth-verify details[open] > summary { margin-bottom: 10px; }
.mrag-mauth-verify details .mrag-mauth__subtitle { margin: 0 0 14px; }
.mrag-mauth-checkout-verify { width: min(100%, 540px); margin: 24px auto; }
.mrag-mauth-checkout-verify .mrag-mauth.mrag-mauth-verify { margin-inline: auto; }

.mrag-mauth--logged-success .mrag-mauth__card { animation: mmaRise .3s var(--mma-ease) both; }

/* ---------- Modal ---------- */
.mrag-mauth-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mrag-mauth-modal.is-open { display: flex; }
.mrag-mauth-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--mma-backdrop);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: mmaFade .22s ease both;
}
.mrag-mauth-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  margin: auto;
  outline: 0;
  /* Only the position animates here. Fading this wrapper would switch the
     card's backdrop blur off until the fade ended, so the card fades itself. */
  animation: mmaSettle .3s cubic-bezier(.25, 1.25, .5, 1) both;
  transition: transform .2s var(--mma-ease);
}
.mrag-mauth-modal .mrag-mauth__card,
.mrag-mauth-modal .mrag-mauth-modal__close { animation: mmaFade .2s ease both; }
.mrag-mauth-modal.is-closing .mrag-mauth-modal__dialog { animation: mmaLeave .17s ease-in both; }
.mrag-mauth-modal.is-closing .mrag-mauth__card,
.mrag-mauth-modal.is-closing .mrag-mauth-modal__close,
.mrag-mauth-modal.is-closing .mrag-mauth-modal__backdrop { animation: mmaFadeOut .17s ease-in both; }
.mrag-mauth-modal .mrag-mauth-modal__close {
  position: absolute !important;
  z-index: 3;
  inset-block-start: 12px !important;
  inset-inline-start: 12px !important;
  display: grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--mma-field) !important;
  box-shadow: none !important;
  color: var(--mma-muted) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: color .18s var(--mma-ease), background-color .18s var(--mma-ease), transform .18s var(--mma-ease);
}
.mrag-mauth-modal .mrag-mauth-modal__close:hover { color: var(--mma-ink) !important; background: var(--mma-field-hover) !important; transform: rotate(90deg); }
.mrag-mauth-modal__close .mrag-mauth-icon { width: 16px; height: 16px; }
html.mrag-mauth-modal-open { overflow: hidden; }

/* ---------- Full-page overlays (redirect after sign-in, payment hand-off) ---------- */
.mrag-mauth-redirect-overlay,
.mrag-mauth-orderpay-autoredirect {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--mma-backdrop);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--mma-ink);
  font-family: inherit;
}
.mrag-mauth-redirect-overlay { opacity: 0; transition: opacity .22s ease; }
.mrag-mauth-redirect-overlay.is-visible { opacity: 1; }
.mrag-mauth-redirect-overlay__box,
.mrag-mauth-orderpay-autoredirect__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(340px, 92vw);
  padding: 30px 24px;
  border: 1px solid var(--mma-edge);
  border-radius: var(--mma-radius, 24px);
  background: linear-gradient(140deg, var(--mma-glint), transparent 44%), var(--mma-surface);
  box-shadow: var(--mma-shadow), inset 0 1px 0 var(--mma-sheen);
  color: var(--mma-ink);
  text-align: center;
}
.mrag-mauth-redirect-overlay__spinner,
.mrag-mauth-orderpay-autoredirect__spinner {
  position: relative;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--mma-accent-rgb), 0) 0 20%, var(--mma-accent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: mmaSpin .85s linear infinite;
}
.mrag-mauth-redirect-overlay__box,
.mrag-mauth-orderpay-autoredirect__box { position: relative; animation: mmaPop .28s cubic-bezier(.25, 1.25, .5, 1) both; }
.mrag-mauth-redirect-overlay__box::before,
.mrag-mauth-orderpay-autoredirect__box::before {
  content: "";
  position: absolute;
  top: 47px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: 0 0 0 -6px;
  border-radius: 50%;
  background: var(--mma-accent);
  animation: mmaBreathe 1.1s ease-in-out infinite;
}
.mrag-mauth-redirect-overlay__box strong { animation: mmaRise .3s var(--mma-ease) .08s both; }
.mrag-mauth-redirect-overlay__box em { animation: mmaRise .3s var(--mma-ease) .14s both; }
.mrag-mauth-redirect-overlay__box strong,
.mrag-mauth-orderpay-autoredirect__box strong { font-size: 16px; font-weight: 600; line-height: 1.7; }
.mrag-mauth-redirect-overlay__box em,
.mrag-mauth-orderpay-autoredirect__box em { color: var(--mma-muted); font-size: 13px; font-style: normal; }
.mrag-mauth-orderpay-autoredirect__manual,
.mrag-mauth-orderpay-autoredirect__ghost {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin-top: 8px !important;
  padding: 11px 22px !important;
  border: 0 !important;
  border-radius: var(--mma-radius-sm, 14px) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}
.mrag-mauth-orderpay-autoredirect__manual { background: var(--mma-accent) !important; color: var(--mma-on-accent) !important; }
.mrag-mauth-orderpay-autoredirect__ghost { background: var(--mma-field) !important; color: var(--mma-ink) !important; }
.mrag-mauth-orderpay-autoredirect__manual:hover,
.mrag-mauth-orderpay-autoredirect__ghost:hover { opacity: .9 !important; transform: none !important; }

/* ---------- WooCommerce placements ---------- */
.mrag-mauth-wc-auth-wrap,
.mrag-mauth-checkout-auth { max-width: 520px; margin: 0 auto 28px; }
body.mrag-mauth-replace-wc.woocommerce-account #customer_login { display: none !important; }

body.mrag-mauth-checkout-auth-active.woocommerce-checkout .entry-title,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .page-title,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .entry-header,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-breadcrumb,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-form-login-toggle,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout form.checkout,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-notices-wrapper:empty,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-NoticeGroup:empty,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .mrag-mauth-checkout-auth + .woocommerce-info,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .mrag-mauth-checkout-auth + p,
body.mrag-mauth-checkout-auth-active .entry-title,
body.mrag-mauth-checkout-auth-active .page-title,
body.mrag-mauth-checkout-auth-active .entry-header,
body.mrag-mauth-checkout-auth-active .woocommerce-products-header,
body.mrag-mauth-checkout-auth-active .wp-block-post-title,
body.mrag-mauth-checkout-auth-active main h1,
body.mrag-mauth-checkout-auth-active .site-main h1,
body.mrag-mauth-checkout-auth-active .elementor-widget-heading .elementor-heading-title,
body.mrag-mauth-checkout-auth-active .elementor-page-title,
body.mrag-mauth-checkout-auth-active .woocommerce > h1,
body.mrag-mauth-checkout-auth-active .woocommerce > h2:first-child,
body.woocommerce-order-pay .entry-title,
body.woocommerce-order-pay .page-title { display: none !important; }

body.mrag-mauth-checkout-auth-active .mrag-mauth-checkout-auth {
  width: min(100%, 540px);
  max-width: 540px;
  margin: 42px auto 54px !important;
  padding-inline: 12px;
  box-sizing: border-box;
}
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-error,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-message,
body.mrag-mauth-checkout-auth-active.woocommerce-checkout .woocommerce-info { max-width: 540px; margin: 16px auto !important; border-radius: 14px; }

/* ---------- Motion ---------- */
@keyframes mmaRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mmaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmaPop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mmaSpin { to { transform: rotate(360deg); } }
@keyframes mmaShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes mmaOtpWave { 0%, 100% { border-color: var(--mma-line-strong); } 40% { border-color: var(--mma-accent); box-shadow: 0 0 0 3px rgba(var(--mma-accent-rgb), .12); } }
@keyframes mmaOtpGather {
  0% { transform: none; opacity: 1; }
  35% { transform: translateY(-3px) scale(1.04); opacity: 1; }
  100% { transform: translateX(var(--dx, 0px)) scale(.35); opacity: 0; }
}
@keyframes mmaCheckIn { to { opacity: 1; transform: none; } }
@keyframes mmaDraw { to { stroke-dashoffset: 0; } }
@keyframes mmaHalo { to { box-shadow: 0 0 0 18px rgba(var(--mma-success-rgb), 0); } }

/* ---------- Polish: entrance, tabs, field feedback, resend, "code sent" mark ---------- */

/* The tint behind the card drifts very slowly, so the frosted glass feels alive. */
.mrag-mauth::before { animation: mmaDrift 16s ease-in-out infinite alternate; }

/* One entrance per card: logo, title, form rise in turn. Replays each time the modal opens. */
.mrag-mauth__card > .mrag-mauth__brand { animation: mmaLogoIn .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.mrag-mauth__card > .mrag-mauth__brand--logo { animation: mmaFade .3s ease both; }
.mrag-mauth__card > .mrag-mauth__head { animation: mmaRise .34s var(--mma-ease) .06s both; }
.mrag-mauth__card > .mrag-mauth__tabs { animation: mmaRise .34s var(--mma-ease) .1s both; }

/* Tabs: one pill that slides between the two choices. */
@supports selector(:has(*)) {
  .mrag-mauth__tabs { position: relative; }
  .mrag-mauth__tabs::before {
    content: "";
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 4px;
    width: calc(50% - 6px);
    border-radius: calc(var(--mma-radius-sm, 14px) - 4px);
    background: var(--mma-surface-solid);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px var(--mma-line);
    transition: transform .28s cubic-bezier(.3, 1.25, .5, 1);
  }
  .mrag-mauth__tabs:has(.mrag-mauth__tab:last-child.is-active)::before { transform: translateX(calc(100% + 4px)); }
  .mrag-mauth[dir="rtl"] .mrag-mauth__tabs:has(.mrag-mauth__tab:last-child.is-active)::before { transform: translateX(calc(-100% - 4px)); }
  .mrag-mauth .mrag-mauth__tab { position: relative; z-index: 1; }
  .mrag-mauth .mrag-mauth__tab.is-active { background: transparent !important; box-shadow: none !important; }
}

/* Field feedback: the icon nods on focus; a valid number earns a tick. */
.mrag-mauth-field:focus-within .mrag-mauth-field__icon .mrag-mauth-icon { animation: mmaNod .4s var(--mma-ease); }
.mrag-mauth-field__ok {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  color: var(--mma-success);
  opacity: 0;
  transform: scale(.3) rotate(-30deg);
  transition: opacity .2s var(--mma-ease), transform .32s cubic-bezier(.3, 1.7, .5, 1);
  pointer-events: none;
}
.mrag-mauth-field__ok .mrag-mauth-icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(var(--mma-success-rgb), .14); stroke-width: 2.4; }
.mrag-mauth-field.is-valid .mrag-mauth-field__ok { opacity: 1; transform: none; }
.mrag-mauth .mrag-mauth-field--phone input { padding-inline-end: 44px !important; }
.mrag-mauth[dir="rtl"] .mrag-mauth-field--phone input[dir="ltr"] { padding: 0 46px 0 44px !important; }
.mrag-mauth .mrag-mauth-eye .mrag-mauth-icon { animation: mmaBlink .26s var(--mma-ease); }

/* OTP: boxes arrive one after another; each typed digit lands with a small bounce. */
.mrag-mauth-otp.is-entering .mrag-mauth-otp-box { animation: mmaBoxIn .36s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(60ms + var(--i, 0) * 38ms); }
.mrag-mauth .mrag-mauth-otp-box.is-pop { animation: mmaDigit .24s cubic-bezier(.3, 1.8, .5, 1); }

/* "Code sent": a small plane glides off along a curve and leaves a tick behind. */
.mrag-mauth-sent__line { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; }
.mrag-mauth-sent__mark { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--mma-success-rgb), .14); color: var(--mma-success); }
.mrag-mauth-sent__tick { display: grid; }
.mrag-mauth-sent__tick .mrag-mauth-icon { width: 12px; height: 12px; stroke-width: 2.6; }
.mrag-mauth-sent__flight { position: absolute; inset-block-start: 50%; left: 50%; width: 0; height: 0; transform: scaleX(-1); pointer-events: none; }
/* The plane leaves towards the outer edge, away from the sentence beside it. */
.mrag-mauth[dir="rtl"] .mrag-mauth-sent__flight { transform: none; }
.mrag-mauth-sent__plane { position: absolute; top: 0; left: 0; display: grid; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; }
.mrag-mauth-sent__plane .mrag-mauth-icon { width: 16px; height: 16px; transform: rotate(45deg); }
.mrag-mauth-sent__trail { position: absolute; top: -50px; left: 0; overflow: visible; opacity: 0; }
.mrag-mauth-sent__trail path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: .22 1; stroke-dashoffset: .22; }
.mrag-mauth-sent__mark.is-flying { animation: mmaSentBadge 1.5s var(--mma-ease) both; }
.mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__tick { animation: mmaSentTick 1.5s cubic-bezier(.3, 1.5, .5, 1) both; }
.mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__plane { animation: mmaGlideFallback 1.25s cubic-bezier(.45, .05, .3, 1) both; }
.mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__trail { animation: mmaTrailFade 1.25s ease-out .05s both; }
.mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__trail path { animation: mmaTrail 1.25s cubic-bezier(.45, .05, .3, 1) .05s both; }
@supports (offset-path: path("M0 0")) {
  .mrag-mauth-sent__plane { margin: 0; offset-path: path("M0 0 C 16 -5 42 -16 64 -46"); offset-rotate: auto; offset-distance: 0%; }
  .mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__plane { animation-name: mmaGlide; }
}
.mrag-mauth__step.is-done .mrag-mauth-sent__mark { display: none; }

/* Resend: a ring drains with the countdown; when it is time, the arrow wakes up. */
.mrag-mauth .mrag-mauth-resend { gap: 8px; }
.mrag-mauth-resend__dial { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.mrag-mauth-resend__dial .mrag-mauth-icon { width: 12px; height: 12px; stroke-width: 2.2; transition: transform .3s var(--mma-ease); }
.mrag-mauth-resend__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.mrag-mauth-resend__ring circle { stroke: var(--mma-line-strong); stroke-width: 1.5; }
.mrag-mauth-resend__ring .mrag-mauth-resend__bar {
  stroke: var(--mma-accent);
  stroke-linecap: round;
  stroke-dasharray: 66;
  stroke-dashoffset: calc(66 * (1 - var(--p, 0)));
  transition: stroke-dashoffset 1s linear;
}
.mrag-mauth-resend:not(.is-counting) .mrag-mauth-resend__ring { opacity: 0; transition: opacity .3s var(--mma-ease); }
.mrag-mauth-resend:not([disabled]) { color: var(--mma-ink) !important; }
.mrag-mauth-resend:not([disabled]) .mrag-mauth-resend__dial { color: var(--mma-accent); }
.mrag-mauth-resend:not([disabled]) .mrag-mauth-resend__dial .mrag-mauth-icon { width: 17px; height: 17px; stroke-width: 1.8; }
.mrag-mauth-resend.is-ready .mrag-mauth-resend__dial .mrag-mauth-icon { animation: mmaWake .7s cubic-bezier(.3, 1.6, .5, 1); }
.mrag-mauth-resend:not([disabled]):hover .mrag-mauth-resend__dial .mrag-mauth-icon { transform: rotate(-70deg); }
.mrag-mauth-resend.is-loading .mrag-mauth-resend__dial { color: var(--mma-accent); }
.mrag-mauth-resend.is-loading .mrag-mauth-resend__dial .mrag-mauth-icon { width: 17px; height: 17px; stroke-width: 1.8; animation: mmaSpin .6s linear infinite reverse; }

@keyframes mmaDots { 0%, 100% { transform: scale(.7); opacity: .45; box-shadow: -14px 0 0 currentColor, 14px 0 0 currentColor; } 33% { transform: scale(1); opacity: 1; box-shadow: -14px -5px 0 currentColor, 14px 0 0 currentColor; } 66% { transform: scale(.85); opacity: .8; box-shadow: -14px 0 0 currentColor, 14px -5px 0 currentColor; } }
@keyframes mmaDrift { from { transform: translate3d(-2%, 0, 0) rotate(0deg) scale(1); } to { transform: translate3d(3%, -3%, 0) rotate(8deg) scale(1.08); } }
@keyframes mmaLogoIn { from { opacity: 0; transform: translateY(8px) scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes mmaNod { 0%, 100% { transform: none; } 40% { transform: translateY(-2px) rotate(-8deg); } 70% { transform: translateY(1px) rotate(4deg); } }
@keyframes mmaBlink { from { transform: scaleY(.2); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes mmaBoxIn { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes mmaDigit { 0% { transform: scale(.88); } 60% { transform: scale(1.07) translateY(-2px); } 100% { transform: none; } }
@keyframes mmaGlide { 0% { offset-distance: 0%; opacity: 0; transform: scale(.5); } 14% { opacity: 1; transform: scale(1); } 68% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; transform: scale(.72); } }
@keyframes mmaGlideFallback { 0% { opacity: 0; transform: translate(0, 0) rotate(-6deg) scale(.5); } 14% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; transform: translate(60px, -44px) rotate(-40deg) scale(.72); } }
@keyframes mmaTrail { from { stroke-dashoffset: .22; } to { stroke-dashoffset: -1; } }
@keyframes mmaTrailFade { 0% { opacity: 0; } 20% { opacity: .5; } 70% { opacity: .35; } 100% { opacity: 0; } }
@keyframes mmaSentBadge { 0%, 52% { background-color: rgba(var(--mma-success-rgb), 0); box-shadow: 0 0 0 0 rgba(var(--mma-success-rgb), 0); } 66% { background-color: rgba(var(--mma-success-rgb), .14); box-shadow: 0 0 0 0 rgba(var(--mma-success-rgb), .28); } 100% { background-color: rgba(var(--mma-success-rgb), .14); box-shadow: 0 0 0 7px rgba(var(--mma-success-rgb), 0); } }
@keyframes mmaSentTick { 0%, 52% { opacity: 0; transform: scale(.3) rotate(-20deg); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes mmaWake { 0% { transform: rotate(0) scale(.6); } 55% { transform: rotate(-200deg) scale(1.25); } 100% { transform: rotate(-360deg) scale(1); } }
@keyframes mmaSparks {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--mma-success-rgb), .9), 0 0 0 0 rgba(var(--mma-accent-rgb), .7), 0 0 0 0 rgba(var(--mma-success-rgb), .9), 0 0 0 0 rgba(var(--mma-warn-rgb), .9), 0 0 0 0 rgba(var(--mma-success-rgb), .9), 0 0 0 0 rgba(var(--mma-accent-rgb), .7), 0 0 0 0 rgba(var(--mma-success-rgb), .9), 0 0 0 0 rgba(var(--mma-warn-rgb), .9); }
  100% { opacity: 0; box-shadow: 0 -46px 0 -1px rgba(var(--mma-success-rgb), .9), 34px -32px 0 -1px rgba(var(--mma-accent-rgb), .7), 48px 2px 0 -1px rgba(var(--mma-success-rgb), .9), 32px 34px 0 -1px rgba(var(--mma-warn-rgb), .9), 0 46px 0 -1px rgba(var(--mma-success-rgb), .9), -34px 32px 0 -1px rgba(var(--mma-accent-rgb), .7), -48px -2px 0 -1px rgba(var(--mma-success-rgb), .9), -32px -34px 0 -1px rgba(var(--mma-warn-rgb), .9); }
}
@keyframes mmaBreathe { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes mmaSettle { from { transform: translateY(14px) scale(.97); } to { transform: none; } }
@keyframes mmaLeave { to { transform: translateY(8px) scale(.97); } }
@keyframes mmaFadeOut { to { opacity: 0; } }

@media (max-width: 480px) {
  .mrag-mauth__card { padding: 26px 18px 20px; }
  .mrag-mauth-otp-boxes { gap: 6px; }
  .mrag-mauth .mrag-mauth-otp-box { height: 50px !important; font-size: 19px !important; border-radius: 12px !important; }
  .mrag-mauth .mrag-mauth-field input,
  .mrag-mauth .mrag-mauth-otp-box { font-size: 16px !important; } /* stops iOS zooming into the field */
  body.mrag-mauth-checkout-auth-active .mrag-mauth-checkout-auth { margin: 24px auto 36px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mrag-mauth *,
  .mrag-mauth-modal *,
  .mrag-mauth-redirect-overlay * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .mrag-mauth-otp.is-success .mrag-mauth-otp-box { animation: none; opacity: 0; }
  .mrag-mauth-otp.is-success .mrag-mauth-otp-check { animation: none; opacity: 1; transform: none; }
  .mrag-mauth-otp.is-success .mrag-mauth-otp-check__ring,
  .mrag-mauth-otp.is-success .mrag-mauth-otp-check__tick { animation: none; stroke-dashoffset: 0; }
  .mrag-mauth-redirect-overlay__spinner,
  .mrag-mauth-orderpay-autoredirect__spinner,
  .mrag-mauth .mrag-mauth-btn.is-loading::after,
  .mrag-mauth-resend.is-loading .mrag-mauth-resend__dial .mrag-mauth-icon { animation-duration: 1.2s !important; }
  .mrag-mauth::before,
  .mrag-mauth-redirect-overlay__box::before,
  .mrag-mauth-orderpay-autoredirect__box::before,
  .mrag-mauth-sent__mark.is-flying,
  .mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__tick,
  .mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__plane,
  .mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__trail,
  .mrag-mauth-sent__mark.is-flying .mrag-mauth-sent__trail path,
  .mrag-mauth-otp.is-success .mrag-mauth-otp-check::after { animation: none !important; }
  .mrag-mauth-resend__ring .mrag-mauth-resend__bar { transition: none; }
}