@import url('../card-network-challenges/assets/fonts/fonts.css');

/* The checkout keeps its original styling. These tokens belong only to overlays. */
[id='3dsModal'], .loading-panel {
  --text:#1e294d;
  --muted:#62718a;
  --line:#dbe2f0;
  --white:#fff;
  --blue:#1434cb;
  --blue-dark:#0f27a0;
  --blue-soft:#eaf0ff;
  font-family:'IBM Plex Sans',sans-serif;
  font-synthesis:none;
  color:var(--text);
  line-height:1.45;
}
[id='3dsModal'] {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-items:safe center !important;
  background:rgb(20 32 64 / 32%) !important;
}
[id='3dsContent'] {
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-direction:column;
  width:min(100%,440px);
  max-width:440px;
  min-width:0;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-x:hidden;
  overflow-y:auto;
}
.three-ds-challenge-shell {
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:440px;
  height:min(720px,calc(100vh - 32px));
  height:min(720px,calc(100dvh - 32px));
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  min-height:0;
  flex:0 0 auto;
  overflow:auto;
  background:transparent;
}
[id='3dsChallengeIframe'] {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  flex:1 1 auto;
  border:0;
  overflow:auto;
  background:transparent;
}
.payment-result-shell {
  width:100%;
  max-width:440px;
  height:min(390px,calc(100vh - 32px));
  height:min(390px,calc(100dvh - 32px));
  overflow:auto;
  border-radius:5px;
  background:transparent;
  box-shadow:0 12px 30px -22px #1e306040;
}
.payment-result-shell iframe { background:transparent; }
/* Only the challenge card paints a surface; the surrounding frame stays clear. */
[id='3dsContent'],
[id='3dsContent'] .three-ds-challenge-shell,
[id='3dsContent'] [id='3dsChallengeIframe'] {
  background:transparent !important;
}
.loading-panel {
  position:relative;
  width:min(100%,440px);
  min-height:352px;
  padding:43px 30px 32px 105px;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--white);
  box-shadow:0 12px 30px -22px #1e306040;
}
.loading-panel::before {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:76px;
  border-inline-start:3px solid var(--blue);
  border-inline-end:1px solid var(--line);
  border-radius:4px 0 0 4px;
  background:var(--blue-soft);
}
html[dir='rtl'] .loading-panel::before { left:auto; right:0; border-radius:0 4px 4px 0; }
.loading-panel .loading-content { justify-items:start; text-align:start; }
.loading-panel h1 { color:var(--text); font-size:22px; font-weight:500; letter-spacing:-.025em; }
.loading-panel .loading-message { color:var(--muted); font-size:12px; }
.loading-panel .eyebrow { font:10px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.loading-panel .spinner { margin-inline:0; }
@media(max-width:480px) {
  .loading-panel { padding-inline-start:85px; padding-inline-end:21px; }
  .loading-panel::before { width:64px; }
}
@media(max-width:360px) {
  .loading-panel { padding-inline-start:65px; padding-inline-end:17px; }
  .loading-panel::before { width:48px; }
}