/* Onboarding portal — styles shared by the GoWifi captive portal and the GoClub landing page. */

/* Nunito, self-hosted. The member is inside the walled garden until this journey
   ends, so Google Fonts is unreachable at exactly the moment the page loads. One
   variable file per subset covers weights 400–900. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy-900: #121E33;
  --navy-800: #1A2A44;
  --navy-700: #243658;
  --magenta-700: #9B1F7C;
  --magenta-600: #B91C92;
  --magenta-500: #D42AA5;
  --magenta-100: #FBE8F4;
  --teal-500:   #2DD4BF;
  --teal-600:   #14B8A6;
  --ink:        #1A2A44;
  --ink-muted:  #5A6B85;
  --line:       #E6E9F0;
  --line-strong:#C9D0DE;
  --bg:         #F5F3F7;
  --bg-card:    #FFFFFF;
  --error:      #DC2626;
  --success:    #059669;
  --radius-lg:  20px;
  --radius-md:  14px;
  --radius-sm:  10px;
  --shadow-card: 0 12px 40px -12px rgba(26, 42, 68, 0.18), 0 2px 6px rgba(26, 42, 68, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.page { position: relative; min-height: 100vh; }
.page:before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 300px;
  background:
    radial-gradient(1000px 320px at 85% -20%, rgba(212, 42, 165, 0.35), rgba(212, 42, 165, 0) 60%),
    radial-gradient(800px 280px at 10% -10%, rgba(45, 212, 191, 0.22), rgba(45, 212, 191, 0) 65%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px 40px 20px;
}

.topbar { padding: 4px 4px 18px 4px; text-align: center; }
.topbar .logo { display: inline-block; height: 64px; width: auto; vertical-align: middle; }

.mall-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 5px 10px 5px 9px;
  background: #F7F8FB;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy-800);
  max-width: 100%;
}
.eyebrow-row {
  display: block;
  margin-bottom: 12px;
  line-height: 1.1;
  text-align: center;
}
.eyebrow-row .eyebrow { margin-bottom: 0; vertical-align: middle; }
@media (max-width: 380px) {
  .mall-pill { display: inline-block; margin-left: 0; margin-top: 8px; }
  .eyebrow-row .eyebrow { display: inline-block; }
}
.mall-pill .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}
.mall-pill b { font-weight: 900; letter-spacing: 0.1px; }

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-header {
  padding: 26px 24px 18px 24px;
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--magenta-600);
  background: var(--magenta-100);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
h1.title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
h1.title .wave { display: inline-block; -webkit-animation: wave 2.2s ease-in-out infinite; animation: wave 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@-webkit-keyframes wave { 0%,60%,100% { -webkit-transform: rotate(0); } 10% { -webkit-transform: rotate(14deg);} 20% { -webkit-transform: rotate(-8deg);} 30%{-webkit-transform: rotate(14deg);} 40%{-webkit-transform: rotate(-4deg);} 50%{-webkit-transform: rotate(10deg);} }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(14deg);} 20% { transform: rotate(-8deg);} 30%{transform: rotate(14deg);} 40%{transform: rotate(-4deg);} 50%{transform: rotate(10deg);} }
.subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
}

.steps-badge { display: block; margin-top: 14px; text-align: center; }
.steps-badge .dots { display: inline-block; vertical-align: middle; }
.steps-badge .dots span {
  display: inline-block;
  width: 28px; height: 5px;
  border-radius: 999px;
  background: var(--line);
  margin-right: 5px;
  vertical-align: middle;
  transition: background-color 260ms ease;
}
.steps-badge .dots span.active { background: var(--magenta-600); }
.steps-badge .dots span.done { background: var(--teal-500); }
.steps-badge .label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.steps-badge .label b { color: var(--navy-800); }

form { margin: 0; }
.form-body { padding: 18px 24px 0 24px; }

.field { display: block; margin: 0 0 14px 0; }
/* `display: block` above outranks the browser default for [hidden], so a hidden
   field needs this to actually stay hidden. */
.field[hidden] { display: none; }
.field label.fl {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.field .required { color: var(--magenta-600); margin-left: 2px; }
.field .hint {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 4px 0 0 0;
}

.text-input, .select-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy-800);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.text-input:focus, .select-input:focus {
  outline: none;
  border-color: var(--magenta-600);
  box-shadow: 0 0 0 3px rgba(185, 28, 146, 0.18);
}
.text-input::-webkit-input-placeholder { color: #9AA5BC; }
.text-input::-moz-placeholder { color: #9AA5BC; opacity: 1; }
.text-input:-ms-input-placeholder { color: #9AA5BC; }

.row2 { display: block; margin: 0 -6px; }
.row2:after { content: ""; display: table; clear: both; }
.row2 .col { float: left; width: 50%; padding: 0 6px; }
@media (max-width: 420px) {
  .row2 .col { float: none; width: 100%; padding: 0; }
}

.idtype-toggle {
  display: inline-block;
  background: #F0F2F7;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 8px;
}
.idtype-toggle button {
  display: inline-block;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.idtype-toggle button.active {
  background: #fff;
  color: var(--navy-800);
  box-shadow: 0 2px 6px rgba(26,42,68,0.12);
}

.mobile-wrap { position: relative; display: block; }
.mobile-wrap .prefix {
  position: absolute;
  top: 0; left: 0;
  width: 70px;
  height: 100%;
  border-right: 1.5px solid var(--line-strong);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
  display: block;
  line-height: 50px;
  text-align: center;
  pointer-events: none;
}
.mobile-wrap .prefix .flag {
  display: inline-block;
  width: 20px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  line-height: 0;
}
.mobile-wrap .prefix .flag svg,
.mobile-wrap .prefix .flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mobile-wrap .text-input { padding-left: 82px; }
/* The verified number is shown back, not asked for again, so it reads as settled
   rather than as an empty field the member still has to fill in. */
.mobile-wrap .text-input[readonly] {
  background: #F4F5F8;
  color: var(--ink-muted);
  border-color: var(--line);
  cursor: default;
  padding-right: 40px;
}
.mobile-wrap .text-input[readonly]:focus {
  border-color: var(--line);
  box-shadow: none;
}
.mobile-wrap .locked {
  display: none;
  position: absolute;
  top: 50%;
  right: 14px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
.mobile-wrap .text-input[readonly] ~ .locked { display: block; }
.whatsapp-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-600);
}
.whatsapp-note .wa {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--teal-500);
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  margin-right: 5px;
  vertical-align: -2px;
}

.consent {
  display: block;
  background: #FAFAFC;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 4px;
}
.consent + .consent { margin-top: 8px; }
.consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.consent label {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
  font-weight: 600;
  cursor: pointer;
}
.consent label:before {
  content: "";
  position: absolute;
  top: 1px; left: 0;
  width: 20px; height: 20px;
  border: 2px solid var(--line-strong);
  background: #fff;
  border-radius: 6px;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.consent label:after {
  content: "";
  position: absolute;
  top: 6px; left: 5px;
  width: 11px; height: 6px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  -webkit-transform: rotate(-45deg) scale(0);
          transform: rotate(-45deg) scale(0);
  transition: transform 160ms ease;
}
.consent input:checked + label:before {
  border-color: var(--magenta-600);
  background: var(--magenta-600);
}
.consent input:checked + label:after {
  -webkit-transform: rotate(-45deg) scale(1);
          transform: rotate(-45deg) scale(1);
}
.consent label a { color: var(--magenta-600); font-weight: 800; text-decoration: none; }
.consent label a:hover { text-decoration: underline; }

.field.has-error .text-input,
.field.has-error .select-input { border-color: var(--error); }
.field.has-error .mobile-wrap .prefix { border-right-color: var(--error); }
.error-msg {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--error);
}
.field.has-error .error-msg,
.q.has-error .error-msg { display: block; }
.error-msg:before {
  content: "!";
  display: inline-block;
  width: 14px; height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-weight: 900;
  font-size: 10px;
  margin-right: 5px;
  vertical-align: 1px;
}

.welcome {
  display: block;
  padding: 18px 20px;
  margin: 0 24px 8px 24px;
  background: linear-gradient(135deg, #FBE8F4 0%, #EDF8F5 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(185, 28, 146, 0.12);
  position: relative;
  overflow: hidden;
}
.welcome:before {
  content: "";
  position: absolute;
  top: -30px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(185,28,146,0.12), transparent 70%);
}
.welcome .avatar {
  display: inline-block;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.welcome .text {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 58px);
}
.welcome .hi {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--magenta-600);
  margin-bottom: 2px;
}
.welcome .who {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--navy-800);
  line-height: 1.2;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.questions { padding: 4px 24px 0 24px; }
.q { padding: 20px 0 20px 0; border-bottom: 1px dashed var(--line); }
.q:last-child { border-bottom: none; }
.q .num-row { display: block; margin-bottom: 10px; }
.q .num {
  display: inline-block;
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  background: var(--navy-800);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.q .num .slash { opacity: 0.5; margin: 0 2px; }
.q label.q-label {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.q .required { color: var(--magenta-600); margin-left: 2px; }
.q .hint {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  margin: -2px 0 12px 0;
}

.options { display: block; margin: 0; padding: 0; list-style: none; }
.options li { display: block; margin: 0 0 10px 0; }
.options .opt {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  padding: 13px 16px 13px 46px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-800);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.options .opt:hover { border-color: var(--magenta-500); background: #FFFCFE; }
.options input[type="radio"],
.options input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.options .opt:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -10px;
  width: 20px; height: 20px;
  border: 2px solid var(--line-strong);
  background: #fff;
  border-radius: 50%;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.options.multi .opt:before { border-radius: 6px; }
.options .opt:after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -4px;
  width: 8px; height: 8px;
  background: transparent;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: background-color 160ms ease, transform 160ms ease;
}
.options.multi .opt:after {
  left: 18px;
  top: 50%;
  margin-top: -6px;
  width: 12px; height: 7px;
  background: transparent;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  -webkit-transform: rotate(-45deg) scale(0);
          transform: rotate(-45deg) scale(0);
  border-radius: 0;
}
.options input:checked + .opt {
  border-color: var(--magenta-600);
  background: var(--magenta-100);
  box-shadow: 0 0 0 3px rgba(185, 28, 146, 0.10);
}
.options input:checked + .opt:before {
  border-color: var(--magenta-600);
  background: var(--magenta-600);
}
.options input:checked + .opt:after {
  background: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.options.multi input:checked + .opt:after {
  background: transparent;
  -webkit-transform: rotate(-45deg) scale(1);
          transform: rotate(-45deg) scale(1);
}
.options input:focus + .opt {
  outline: none;
  box-shadow: 0 0 0 3px rgba(185, 28, 146, 0.22);
}

.card-footer {
  padding: 18px 24px 22px 24px;
  background: #FAFAFC;
  border-top: 1px solid var(--line);
}
.btn {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  border-radius: var(--radius-md);
  padding: 15px 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
}
.btn-primary {
  background: var(--magenta-600);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(185, 28, 146, 0.55);
}
.btn-primary:hover { background: var(--magenta-700); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: #C9D0DE;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}
.btn .arrow { display: inline-block; margin-left: 6px; transition: transform 160ms ease; }
.btn-primary:not(:disabled):hover .arrow { -webkit-transform: translateX(3px); transform: translateX(3px); }
.btn-secondary {
  background: #fff;
  color: var(--navy-800);
  border: 1.5px solid var(--line-strong);
}
.btn-secondary:hover { border-color: var(--magenta-600); color: var(--magenta-600); }

.footnote {
  margin: 12px 0 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.footnote a { color: var(--magenta-600); text-decoration: none; font-weight: 700; }
.footnote a:hover { text-decoration: underline; }

.brand-footer {
  margin-top: 18px;
  text-align: center;
  color: #C9D0DE;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.brand-footer .gothrive {
  display: inline-block;
  height: 22px;
  width: 22px;
  vertical-align: middle;
  margin: 0 0 0 4px;
  border-radius: 50%;
  object-fit: cover;
}

.thanks { text-align: center; padding: 38px 28px 28px 28px; }
.thanks .mark {
  display: inline-block;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FBE8F4 0%, #F7D8EC 100%);
  position: relative;
  margin-bottom: 16px;
  -webkit-animation: pop 520ms cubic-bezier(.18,.89,.32,1.28) both;
          animation: pop 520ms cubic-bezier(.18,.89,.32,1.28) both;
}
.thanks .mark img {
  width: 68px; height: 68px;
  position: absolute;
  top: 50%; left: 50%;
  margin: -34px 0 0 -34px;
  display: block;
}
.thanks h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 8px 0;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.thanks p.lead {
  margin: 0 auto 20px auto;
  max-width: 360px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}
@-webkit-keyframes pop { 0% { -webkit-transform: scale(.4); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 380px) {
  .shell { padding: 20px 14px 32px 14px; }
  .card-header { padding: 22px 18px 14px 18px; }
  .form-body, .questions { padding-left: 18px; padding-right: 18px; }
  .welcome { margin-left: 18px; margin-right: 18px; }
  .card-footer { padding: 16px 18px 20px 18px; }
  h1.title { font-size: 22px; }
}
@media (min-width: 720px) {
  .shell { padding-top: 44px; padding-bottom: 56px; }
  .topbar .logo { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    -webkit-animation-duration: 0.001ms !important;
            animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* POPIA perks modal */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
body.modal-open { overflow: hidden; }
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 30, 51, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  animation: modalFade 220ms ease forwards;
}
.modal-sheet {
  position: absolute;
  left: 50%; top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: calc(100% - 24px);
  max-width: 380px;
  max-height: calc(100vh - 32px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(10, 15, 30, 0.55), 0 8px 20px -6px rgba(10, 15, 30, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalPop 320ms cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes modalFade { to { opacity: 1; } }
@keyframes modalPop {
  from { opacity: 0; -webkit-transform: translate(-50%, -46%) scale(.94); transform: translate(-50%, -46%) scale(.94); }
  to   { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
}
.modal-hero {
  position: relative;
  padding: 28px 24px 18px 24px;
  background:
    radial-gradient(600px 200px at 80% -40%, rgba(212,42,165,0.45), rgba(212,42,165,0) 65%),
    radial-gradient(500px 200px at 10% 120%, rgba(45,212,191,0.30), rgba(45,212,191,0) 65%),
    linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
  overflow: hidden;
}
.modal-hero .sparkles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 75% 20%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(2px 2px at 85% 70%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,0.45), transparent 50%);
  pointer-events: none;
}
.modal-hero .gift {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--magenta-500) 0%, var(--magenta-700) 100%);
  box-shadow: 0 10px 24px -8px rgba(212, 42, 165, 0.7);
  font-size: 28px;
  margin-bottom: 14px;
}
.modal-hero .gift:after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px dashed rgba(255,255,255,0.35);
  animation: giftSpin 14s linear infinite;
}
@keyframes giftSpin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.modal-hero h3 {
  position: relative;
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
}
.modal-hero p {
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
.modal-body { padding: 18px 24px 8px 24px; overflow-y: auto; }
.perks-list { list-style: none; padding: 0; margin: 0; }
.perks-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--navy-800);
  font-weight: 600;
}
.perks-list li + li { border-top: 1px dashed var(--line); }
.perks-list .ico {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--magenta-100);
  color: var(--magenta-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}
.perks-list .ico.teal { background: rgba(45, 212, 191, 0.18); color: var(--teal-600); }
.perks-list .ico.navy { background: rgba(26, 42, 68, 0.08); color: var(--navy-800); }
.perks-list small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
}
.modal-foot {
  padding: 14px 20px 18px 20px;
  background: #FAFAFC;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-foot .btn { width: 100%; }
.modal-foot .btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
  border: none;
  letter-spacing: 0.2px;
}
.modal-foot .btn-ghost:hover { color: var(--navy-800); text-decoration: underline; }
.modal-foot .finetext {
  text-align: center;
  font-size: 11px;
  color: var(--ink-muted);
  margin: 2px 0 0 0;
  line-height: 1.5;
}
.modal-foot .finetext a { color: var(--magenta-600); font-weight: 700; text-decoration: none; }

/* Full-screen loading overlay (first load of each page) */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(212, 42, 165, 0.38), rgba(212, 42, 165, 0) 60%),
    radial-gradient(700px 320px at 10% 110%, rgba(45, 212, 191, 0.26), rgba(45, 212, 191, 0) 65%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  transition: opacity 380ms ease;
  -webkit-tap-highlight-color: transparent;
}
.loader.is-leaving { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; padding: 0 24px; max-width: 340px; }
.loader-logo {
  display: block;
  margin: 0 auto 20px auto;
  height: 72px;
  width: auto;
  -webkit-animation: loaderPulse 1.8s ease-in-out infinite;
          animation: loaderPulse 1.8s ease-in-out infinite;
}
.loader-title { font-size: 16px; font-weight: 800; letter-spacing: 0.5px; margin: 0 0 6px 0; color: #fff; }
.loader-sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
  min-height: 20px;
  transition: opacity 240ms ease;
}
.loader-track {
  position: relative;
  display: block;
  width: 200px;
  height: 4px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.loader-bar {
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, var(--teal-500), var(--magenta-500));
  border-radius: 999px;
  -webkit-animation: loaderSlide 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
          animation: loaderSlide 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
.loader-dots {
  display: inline-block;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.loader-dots b {
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 1px;
  background: var(--teal-500);
  border-radius: 50%;
  vertical-align: 2px;
  -webkit-animation: loaderDot 1.2s ease-in-out infinite;
          animation: loaderDot 1.2s ease-in-out infinite;
}
.loader-dots b:nth-child(2) { -webkit-animation-delay: 160ms; animation-delay: 160ms; }
.loader-dots b:nth-child(3) { -webkit-animation-delay: 320ms; animation-delay: 320ms; }
@-webkit-keyframes loaderPulse { 0%, 100% { -webkit-transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.04); opacity: 0.88; } }
@keyframes loaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.88; } }
@-webkit-keyframes loaderSlide { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes loaderSlide { 0% { left: -40%; } 100% { left: 100%; } }
@-webkit-keyframes loaderDot { 0%, 80%, 100% { -webkit-transform: scale(0.6); opacity: 0.5; } 40% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes loaderDot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .loader-logo, .loader-bar, .loader-dots b { -webkit-animation: none !important; animation: none !important; }
}

/* Confirmation screen: where to go next, now that the journey ends here rather
   than handing the member on anywhere automatically. Rendered by _Partners.cshtml. */
.next-up {
  display: block;
  background: #FAFAFC;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 0;
  text-align: left;
}
.next-up .nu-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
  text-align: center;
}
.next-up .nu-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
.next-up .nu-link {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.next-up .nu-link:hover {
  border-color: var(--magenta-600);
  box-shadow: 0 8px 18px -10px rgba(185, 28, 146, 0.55);
}
.next-up .nu-link:active { transform: translateY(1px); }
.next-up .nu-link img {
  display: block;
  max-width: 100%;
  height: 30px;
  width: auto;
  object-fit: contain;
}
/* Shown only when the logo file fails to load, so the link is never nameless. */
.next-up .nu-fallback {
  display: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
}
.next-up .nu-host {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.next-up .nu-link:hover .nu-host { color: var(--magenta-600); }

/* Server-rendered messages above a form (Backend refusals, expired attempts). */
.banner {
  margin: 16px 26px 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}
.banner.bad { background: #FEF2F2; color: var(--error); }
.banner.info { background: var(--magenta-100); color: var(--magenta-700); }

/* The verified number on Details is shown back, not asked again: a static box that
   sits in the input's place without being one. */
.mobile-wrap .text-input.is-static {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  background: #F7F8FB;
  color: var(--ink);
  cursor: default;
}

/* Option descriptions under a label, when a question supplies them. */
.options .opt small.opt-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Multiple small forms stacked as text links in the verify step. */
.verify-actions form { margin: 0; }

/* Interstitial after the router's redirect: the loader screen, with the form that
   creates the session (visible only as a button when JavaScript is off). */
.begin-form { margin: 22px 0 0; }
.begin-form .btn { max-width: 260px; margin: 0 auto; }

/* Development-only affordances are visibly out of place on purpose. */
.dev-tools button {
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: 999px;
  padding: 5px 12px !important;
}
.dev-preset { border-top: 1px dashed var(--line); }
.dev-preset:first-of-type { border-top: 0; }
.dev-preset-title { margin: 0 0 4px; font-size: 16px; color: var(--navy-800); }
.dev-preset .hint { display: block; margin: 0 0 14px; font-size: 13px; color: var(--ink-muted); }
.dev-preset .field { margin-bottom: 12px; }
.dev-preset .btn { margin-top: 6px; }

/* Thank-you: the partner tiles, then an optional plain link (the Wi-Fi login URL the
   router asked for) that the member can follow if they want to. */
.thanks .next-up { margin-bottom: 16px; }
.thanks .text-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--magenta-600);
  text-decoration: none;
}
.thanks .text-link:hover { text-decoration: underline; }