/* Ring alert appearance. Loaded after style.css. Does not change dismiss timing. */
#alerts-wrapper{
  position:fixed;
  top:calc(var(--nav-h, 76px) + 12px);
  right:auto;
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  width:min(420px, calc(100vw - 24px));
  z-index:2000;
  margin:0;
}
.dashboard #alerts-wrapper{top:84px;bottom:auto}
body.call #alerts-wrapper,
body.calling #alerts-wrapper,
body.call-not-available #alerts-wrapper,
body.call-hud-on #alerts-wrapper{
  top:auto;
  bottom:calc(128px + env(safe-area-inset-bottom, 0px));
  left:12px;
  transform:none;
  width:min(340px, calc(100vw - 24px));
}
body.postcall-on #alerts-wrapper{
  top:auto;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  left:12px;
  right:auto;
  transform:none;
  width:min(340px, calc(100vw - 24px));
}
@media (orientation: portrait) and (min-width: 360px) and (min-height: 700px){
  body.call-hud-on:not(.postcall-on) #alerts-wrapper{
    top:52px;
    bottom:auto;
    left:12px;
    right:auto;
    transform:none;
    width:min(250px, calc(100vw - 148px));
  }
}
#alerts .alert.alert-held{display:none !important}
#alerts .alert.is-scroll .alert-text{min-height:0}
#alerts .alert.is-scroll .alert-copy{
  max-height:var(--racf-copy-max, 8rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
#alerts .alert,
#alerts .alerts{
  display:flex;
  align-items:flex-start;
  gap:12px;
  float:none;
  clear:none;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 0 10px 0 !important;
  padding:8px 8px 8px 8px !important;
  background:#fff;
  color:#17384b;
  border:0;
  border-radius:28px;
  box-shadow:0 12px 30px rgba(14,156,180,.18), 0 0 0 1px rgba(23,56,75,.07);
  overflow:visible;
  font-family:Inter, system-ui, "Segoe UI", sans-serif;
  line-height:1.4;
}
#alerts .alert-icon{
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
  flex:none;
  color:inherit !important;
  background:transparent;
}
#alerts .alert-ring{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fdeceb;
  color:#b42318 !important;
  box-shadow:inset 0 0 0 3px #b42318;
  font-size:18px;
}
#alerts .alert.success .alert-ring{background:#e7f5ee;color:#12704a !important;box-shadow:inset 0 0 0 3px #12704a}
#alerts .alert.warning .alert-ring{background:#fff3d9;color:#8a5300 !important;box-shadow:inset 0 0 0 3px #8a5300}
#alerts .alert.info .alert-ring{background:#e3f5f8;color:#0a6a79 !important;box-shadow:inset 0 0 0 3px #0a6a79}
#alerts .alert.error,
#alerts .alert.danger,
#alerts .alert.success,
#alerts .alert.info,
#alerts .alert.warning{
  background:#fff;
  color:#17384b;
}
#alerts .alert-text{
  display:block;
  flex:1;
  min-width:0;
  padding:4px 0 4px 0;
  overflow:visible;
}
#alerts .alert-kicker{
  display:block;
  font-weight:800;
  font-size:.6875rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.2;
  color:#b42318;
}
#alerts .alert.success .alert-kicker{color:#12704a}
#alerts .alert.warning .alert-kicker{color:#8a5300}
#alerts .alert.info .alert-kicker{color:#0a6a79}
#alerts .alert-copy{
  display:block;
  margin-top:2px;
  font-weight:600;
  font-size:.9375rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
#alerts .alert.error .alert-text a,
#alerts .alert.danger .alert-text a,
#alerts .alert.success .alert-text a,
#alerts .alert.warning .alert-text a,
#alerts .alert.info .alert-text a,
#alerts .alert-copy a{
  color:#0a6a79;
  font-weight:800;
  text-underline-offset:2px;
}
#alerts .alert-close{
  display:grid;
  place-items:center;
  flex:none;
  width:34px;
  height:34px;
  margin:0;
  padding:0;
  border-radius:50%;
  background:transparent !important;
  color:#4f6170 !important;
  float:none;
  font-size:16px;
}
#alerts .alert-close:hover{background:#eef3f6;color:#17384b}
@media (max-width:520px){
  #alerts .alert-copy a{
    display:inline-flex;
    margin-top:8px;
  }
}
@media (prefers-reduced-motion:no-preference){
  #alerts .alert{animation:racfRingIn .24s ease-out both}
  @keyframes racfRingIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* Persistent bootstrap alerts already rendered in the page. */
.alert.alert-danger,
.alert.alert-success,
.alert.alert-warning,
.alert.alert-info{
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#17384b;
  background:#fff;
  border:0;
  border-radius:22px;
  box-shadow:0 8px 22px rgba(23,56,75,.08), 0 0 0 1px rgba(23,56,75,.07);
  font-family:Inter, system-ui, "Segoe UI", sans-serif;
  font-weight:600;
}
.alert.alert-danger::before,
.alert.alert-success::before,
.alert.alert-warning::before,
.alert.alert-info::before{
  content:"";
  flex:none;
  width:36px;
  height:36px;
  border-radius:50%;
  box-shadow:inset 0 0 0 3px currentColor;
}
.alert.alert-danger{color:#17384b}
.alert.alert-danger::before{background:#fdeceb;color:#b42318}
.alert.alert-success::before{background:#e7f5ee;color:#12704a}
.alert.alert-warning::before{background:#fff3d9;color:#8a5300}
.alert.alert-info::before{background:#e3f5f8;color:#0a6a79}

/* Field errors. Hidden state stays hidden. */
.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.invalid-feedback.d-block{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
  padding:10px 12px;
  background:#fdeceb;
  color:#8f1d14;
  border-radius:16px;
  font-weight:600;
  font-size:.875rem;
  line-height:1.4;
}
.was-validated .form-control:invalid ~ .invalid-feedback::before,
.form-control.is-invalid ~ .invalid-feedback::before,
.invalid-feedback.d-block::before{
  content:"";
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='%23b42318' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:inset 0 0 0 3px #b42318;
}

/* Existing wallet note. The link is the current action. */
.pc-section-note:has(a){
  display:block;
  background:#fff;
  color:#17384b;
  border-radius:22px;
  padding:14px;
  box-shadow:0 0 0 1px #efd396, 0 8px 22px rgba(138,83,0,.10);
  font-family:Inter, system-ui, "Segoe UI", sans-serif;
  font-weight:600;
}
.pc-section-note a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:4px 0 0;
  color:#032026;
  background:#13b5cc;
  border-radius:999px;
  padding:8px 16px;
  font-weight:800;
  letter-spacing:.04em;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.8125rem;
  vertical-align:middle;
}
.pc-section-note a:hover{background:#2fc7de;color:#032026}