/*
  Dependency chain: auth-sms-subscribe-gate.js shows the phone-entry status UI,
  then allows login/register or the START SMS gate after server SMS status is
  known without changing the root website.
*/
:root[data-hf-auth-sms-subscribe-gate],
:root[data-hf-auth-sms-subscribe-gate] body {
  overflow-y: auto !important;
}

#hf-auth-sms-subscribe-gate-host {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top) + .9rem)
    max(1rem, env(safe-area-inset-right) + 1rem)
    max(5rem, env(safe-area-inset-bottom) + 4.5rem)
    max(1rem, env(safe-area-inset-left) + 1rem);
  overflow-y: auto;
  background: rgba(11, 20, 40, .92);
  -webkit-overflow-scrolling: touch;
}

.hf-auth-sms-subscribe-gate {
  display: grid;
  gap: .82rem;
  width: min(100%, 33rem);
  margin: auto 0;
  padding: clamp(1rem, 4vw, 1.35rem);
  border: 1px solid rgba(143, 184, 255, .72);
  border-radius: var(--hf-ui-panel-radius, 8px);
  background: linear-gradient(180deg, #284f86 0%, #234579 100%);
  color: var(--hf-ui-text, #f8fbff);
  box-shadow: var(--hf-ui-panel-shadow, 0 18px 55px rgba(8, 18, 46, .28));
}

.hf-auth-sms-subscribe-gate h2,
.hf-auth-sms-subscribe-gate p {
  margin: 0;
}

.hf-auth-sms-subscribe-gate h2 {
  color: #f8fbff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.45rem, 7vw, 2.08rem);
  line-height: 1.06;
  text-align: center;
}

.hf-auth-sms-subscribe-gate .hf-auth-brand {
  display: grid;
  justify-items: center;
  gap: .36rem;
  width: 100%;
  margin: 0 0 .05rem;
}

.hf-auth-sms-subscribe-gate .hf-auth-brand__image {
  display: block;
  width: min(13.2rem, 56vw);
  height: auto;
  aspect-ratio: 560 / 403;
  object-fit: cover;
  border: 2px solid rgba(255, 215, 160, .56);
  border-radius: 8px;
  background: rgba(5, 12, 26, .42);
  box-shadow: 0 12px 28px rgba(7, 18, 43, .24);
}

.hf-auth-sms-subscribe-gate .hf-auth-brand__slogan {
  color: #ffd7a0;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.hf-auth-sms-subscribe-gate--checking {
  justify-items: center;
  max-width: 24rem;
  text-align: center;
}

.hf-auth-sms-subscribe-gate--checking .hf-auth-brand__image {
  width: min(11.6rem, 54vw);
}

.hf-auth-sms-subscribe-gate__spinner {
  width: 2.45rem;
  height: 2.45rem;
  border: .28rem solid rgba(229, 242, 255, .34);
  border-top-color: #ffb329;
  border-radius: 999px;
  animation: hf-auth-sms-spin .82s linear infinite;
}

@keyframes hf-auth-sms-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-auth-sms-subscribe-gate__spinner {
    animation: none;
  }
}

.hf-auth-sms-subscribe-gate__topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .88rem;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.hf-auth-sms-subscribe-gate__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 8rem);
  min-height: 2.08rem;
  padding: var(--hf-ui-pill-padding-block-start, .18rem) var(--hf-ui-pill-padding-inline, .56rem) var(--hf-ui-pill-padding-block-end, .2rem);
  border: 1px solid rgba(147, 215, 160, .54);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--hf-ui-forest, #236f44) 0%, var(--hf-ui-forest-dark, #124f31) 100%);
  color: var(--hf-ui-forest-text, #ecffe7);
  font-size: var(--hf-ui-pill-font-size, .72rem);
  font-weight: 850;
  line-height: var(--hf-ui-pill-line-height, 1);
  text-align: center;
  text-transform: uppercase;
}

.hf-auth-sms-subscribe-gate__status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 9.45rem);
  min-height: 2.08rem;
  padding: var(--hf-ui-pill-padding-block-start, .18rem) var(--hf-ui-pill-padding-inline, .56rem) var(--hf-ui-pill-padding-block-end, .2rem);
  border-radius: 999px;
  font-size: var(--hf-ui-pill-font-size, .72rem);
  font-weight: 900;
  line-height: var(--hf-ui-pill-line-height, 1);
  text-align: center;
  text-transform: uppercase;
}

.hf-auth-sms-subscribe-gate__status-pill--inactive {
  border: 1px solid var(--hf-ui-red-border, #8f3c49);
  background: var(--hf-ui-red-dark, #4f131f);
  color: #ffffff;
}

.hf-auth-sms-subscribe-gate__status-pill--active {
  border: 1px solid #87d5b7;
  background: #0c7653;
  color: #ffffff;
}

.hf-auth-sms-subscribe-gate__intro {
  justify-self: center;
  color: #e4f0ff;
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.35;
  max-width: 28rem;
  text-align: center;
}

.hf-auth-sms-subscribe-gate__number-card {
  display: grid;
  gap: .62rem;
  justify-items: stretch;
  min-height: 8.7rem;
  padding: .98rem .78rem;
  border: 1px solid rgba(190, 219, 247, .92);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--hf-ui-baby-blue, #78add4) 0%, #5b96c4 100%);
  color: #10205d;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}

.hf-auth-sms-subscribe-gate__number-label,
.hf-auth-sms-subscribe-gate__number-help {
  color: #10205d !important;
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.hf-auth-sms-subscribe-gate__number-help {
  color: #28416f !important;
  font-weight: 750;
}

.hf-auth-sms-subscribe-gate__number-link {
  display: block;
  padding: .96rem .86rem;
  border: 1px solid rgba(151, 181, 255, .82);
  border-radius: 8px;
  background: #1d347b;
  color: #ffffff !important;
  font-size: clamp(1.3rem, 7vw, 1.9rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: 0 2px 0 rgba(8, 17, 48, .26);
}

.hf-auth-sms-subscribe-gate__steps {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: .78rem .78rem .78rem 2.05rem;
  border: 1px solid rgba(205, 226, 255, .38);
  border-radius: 8px;
  background: rgba(205, 226, 255, .13);
  color: #e2f0ff;
}

.hf-auth-sms-subscribe-gate__steps li {
  padding-left: .1rem;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.32;
}

.hf-auth-sms-subscribe-gate__note {
  color: #d8e9ff;
  font-size: .94rem;
  line-height: 1.42;
}

.hf-auth-sms-subscribe-gate__status {
  padding: .7rem .78rem;
  border: 1px solid rgba(190, 219, 247, .36);
  border-radius: 8px;
  background: rgba(190, 219, 247, .16);
  color: #e5f2ff !important;
  font-size: .94rem;
  font-weight: 760;
  line-height: 1.32;
  text-align: center;
}

.hf-auth-sms-subscribe-gate__status--error {
  border-color: rgba(201, 87, 95, .72);
  background: rgba(109, 31, 44, .62);
}

.hf-auth-sms-subscribe-gate__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .48rem;
  padding-bottom: .3rem;
}

.hf-auth-sms-subscribe-gate__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .62rem;
  width: 100%;
  min-height: 3rem;
  padding: .82rem 1rem;
  border: 1px solid var(--hf-ui-orange-border, #d98600);
  border-radius: var(--hf-ui-panel-radius, 8px);
  background: var(--hf-ui-orange, #ffb329);
  color: #17203a;
  font: 850 .98rem/1.15 var(--hf-ui-font, Arial, Helvetica, sans-serif);
  text-align: center;
}

.hf-auth-sms-subscribe-gate__button--secondary {
  border-color: rgba(255, 255, 255, .26);
  background: #2e286f;
  color: #ffffff;
}

.hf-auth-sms-subscribe-gate__button:disabled {
  cursor: wait;
  opacity: .9;
}

.hf-auth-sms-subscribe-gate__button--checking {
  background: #ffc247;
}

.hf-auth-sms-subscribe-gate__button-spinner {
  display: inline-block;
  width: 1.18rem;
  height: 1.18rem;
  border: .18rem solid rgba(23, 32, 58, .3);
  border-top-color: #17203a;
  border-radius: 999px;
  animation: hf-auth-sms-spin .82s linear infinite;
}

.hf-auth-sms-subscribe-gate__action-note {
  color: rgba(229, 242, 255, .86);
  font-size: .82rem;
  font-weight: 720;
  line-height: 1.3;
  text-align: center;
}

.hf-auth-sms-subscribe-gate__action-note--warning {
  padding: .55rem .65rem;
  border: 1px solid rgba(201, 87, 95, .72);
  border-radius: 8px;
  background: rgba(109, 31, 44, .62);
}