html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   SPLASH SCREEN (Pages/Index.cshtml)
   Class-scoped to avoid colliding with other pages.
   ============================================================ */
.splash-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px); /* leaves room for navbar + footer */
  padding: 20px;
}

.splash-frame {
  width: 390px;
  height: 760px;
  max-height: calc(100vh - 160px);
  border-radius: 24px;
  box-shadow: 0 30px 70px -10px rgba(20, 22, 31, 0.35),
              0 8px 30px rgba(20, 22, 31, 0.15);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, #0D518B 0%, #082F56 70%, #051D38 100%);
  color: #fff;
}

.splash-frame::after {
  /* subtle warm glow in the corner, echoing the prototype */
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(185, 147, 0, 0.35), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}

.splash-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

.splash-mark {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #B99300; /* gold */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px rgba(185, 147, 0, 0.4);
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 42px;
  color: #fff;
  line-height: 1;
}

.splash-wordmark {
  font-family: Georgia, serif;
  font-size: 32px;
  letter-spacing: 0.04em;
  color: #fff;
}

.splash-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}

.splash-spinner-wrap {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.splash-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #B99300; /* gold */
  border-radius: 50%;
  animation: splash-spin 0.9s linear infinite;
}

@keyframes splash-spin {
  to { transform: rotate(360deg); }
}

/* Mobile: full-bleed, no frame chrome */
@media (max-width: 480px) {
  .splash-stage {
    padding: 0;
    min-height: calc(100vh - 140px);
  }
  .splash-frame {
    width: 100%;
    height: calc(100vh - 140px);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   LANGUAGE PICKER (Pages/Shared/_Language.cshtml)
   .lang-stage mirrors .splash-stage's outer-frame geometry.
   ============================================================ */
.lang-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 20px;
}

.lang-frame {
  width: 390px;
  height: 760px;
  max-height: calc(100vh - 160px);
  border-radius: 24px;
  background: #FAFAF7;
  box-shadow: 0 30px 70px -10px rgba(20, 22, 31, 0.35),
              0 8px 30px rgba(20, 22, 31, 0.15);
  padding: 60px 28px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lang-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0D518B; /* royal */
  margin-bottom: 12px;
}

.lang-h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #14161F; /* ink */
  margin: 0 0 12px;
}

.lang-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5A5E72; /* ink-3 */
  margin: 0 0 24px;
}

.lang-picks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lang-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1.5px solid #E5E6EC;
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

.lang-pick:hover {
  background: #F1F2F6;
}

.lang-pick--selected,
.lang-pick--selected:hover {
  background: #F4EFE2; /* gold-soft */
  border-color: #B99300; /* gold */
}

.lang-pick .nat {
  font-size: 17px;
  font-weight: 600;
  color: #14161F;
  line-height: 1.2;
}

.lang-pick .en {
  font-size: 12px;
  color: #9296A8; /* ink-4 */
  margin-top: 2px;
}

.lang-pick .chev {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #9296A8;
}

@media (max-width: 480px) {
  .lang-stage {
    padding: 0;
    min-height: calc(100vh - 140px);
  }
  .lang-frame {
    width: 100%;
    height: calc(100vh - 140px);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   WELCOME SCREEN (Pages/Shared/_Welcome.cshtml)
   Hero (dark) + bullets (light) + actions (CTAs).
   ============================================================ */
.welcome-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 20px;
}

.welcome-frame {
  width: 390px;
  height: 760px;
  max-height: calc(100vh - 160px);
  border-radius: 24px;
  background: #FAFAF7;
  box-shadow: 0 30px 70px -10px rgba(20, 22, 31, 0.35),
              0 8px 30px rgba(20, 22, 31, 0.15);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hero */
.welcome-hero {
  position: relative;
  padding: 28px 22px 24px;
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(0,166,195,0.18), transparent 60%),
    linear-gradient(160deg, #0D518B 0%, #134070 60%, #08294C 100%);
  color: #fff;
  overflow: hidden;
}

.welcome-hero::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(185,147,0,0.35), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}

.welcome-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 70px;
  position: relative;
  z-index: 2;
}

.welcome-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #B99300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  line-height: 1;
}

.welcome-word {
  font-family: Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #fff;
}

.welcome-illus {
  position: absolute;
  top: 70px;
  right: -20px;
  width: 180px;
  opacity: 0.92;
  z-index: 0;
  pointer-events: none;
}

.welcome-h1 {
  position: relative;
  z-index: 2;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

.welcome-body {
  position: relative;
  z-index: 2;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Bullets */
.welcome-bullets {
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.welcome-bullet {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.welcome-bullet-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: #F4EFE2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.welcome-bullet-icon svg {
  width: 22px;
  height: 22px;
  fill: #8E7200;
}

.welcome-bullet-text strong {
  display: block;
  color: #14161F;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.welcome-bullet-text span {
  display: block;
  color: #5A5E72;
  font-size: 13px;
  line-height: 1.5;
}

/* Actions */
.welcome-actions {
  padding: 14px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.welcome-cta {
  width: 100%;
  border: none;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
  color: #fff;
}

.welcome-cta svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 18px;
}

.welcome-cta:active {
  transform: scale(.98);
}

.welcome-cta--telegram {
  background: #229ED9;
  box-shadow: 0 6px 18px rgba(34, 158, 217, 0.30);
}

.welcome-cta--telegram:hover {
  background: #1B8DC4;
}

.welcome-cta-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  background: #1F7A4D;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 18px;
}

.welcome-cta--facebook {
  background: #1877F2;
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.30);
}

.welcome-cta--facebook:hover {
  background: #0F62D9;
}

.welcome-why {
  text-align: center;
  font-size: 12px;
  color: #9296A8;
  margin: 12px 0 6px;
}

.welcome-why-link {
  color: #0D518B;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.welcome-why-link:focus {
  outline: 2px solid #0D518B;
  outline-offset: 2px;
}

.welcome-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #9296A8;
  text-transform: lowercase;
  margin: 8px 0 4px;
}

.welcome-or::before,
.welcome-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E5E6EC;
}

.welcome-have {
  background: transparent;
  border: none;
  color: #0D518B;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

.welcome-have:hover {
  color: #082F56;
}

/* Mobile: full-bleed, no frame chrome */
@media (max-width: 480px) {
  .welcome-stage {
    padding: 0;
    min-height: calc(100vh - 140px);
  }
  .welcome-frame {
    width: 100%;
    height: calc(100vh - 140px);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   WELCOME BACK BUTTON (top-left of .welcome-hero)
   ============================================================ */
.welcome-back {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}

.welcome-back:hover {
  background: rgba(255, 255, 255, 0.20);
}

.welcome-back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.welcome-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   AUTH SUCCESS SCREEN (Pages/Shared/_AuthSuccess.cshtml)
   Green-tinted celebratory frame; check + welcome + verified chip + CTA.
   ============================================================ */
.auth-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 20px;
}

.auth-frame {
  width: 390px;
  height: 760px;
  max-height: calc(100vh - 160px);
  border-radius: 24px;
  background:
    radial-gradient(600px 400px at 50% 30%, rgba(31, 122, 77, 0.18), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, #E5F4EC 100%);
  box-shadow: 0 30px 70px -10px rgba(20, 22, 31, 0.35),
              0 8px 30px rgba(20, 22, 31, 0.15);
  padding: 40px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.auth-check-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1F7A4D; /* ok green */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(31, 122, 77, 0.4);
}

.auth-check-circle svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}

.auth-h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #14161F;
  margin: 0 0 12px;
}

.auth-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5A5E72;
  margin: 0 0 18px;
  max-width: 280px;
}

.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #F4EFE2; /* gold-soft */
  border-radius: 999px;
  font-size: 12px;
  color: #14161F;
  font-weight: 500;
  margin-bottom: 22px;
}

.auth-chip-tick {
  color: #1F7A4D;
  font-weight: 700;
  font-size: 13px;
}

.auth-chip-icon {
  width: 14px;
  height: 14px;
  fill: #229ED9; /* Telegram blue */
}

.auth-chip-text {
  color: #14161F;
}

.auth-continue {
  width: 100%;
  max-width: 320px;
  border: none;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  background: #B99300; /* gold */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(185, 147, 0, 0.30);
  transition: background .15s ease, transform .08s ease;
  margin-top: auto;
}

.auth-continue:hover {
  background: #8E7200;
}

.auth-continue:active {
  transform: scale(.98);
}

/* Mobile: full-bleed, no frame chrome */
@media (max-width: 480px) {
  .auth-stage {
    padding: 0;
    min-height: calc(100vh - 140px);
  }
  .auth-frame {
    width: 100%;
    height: calc(100vh - 140px);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   SIGNUP — Personal Details (Pages/Shared/_SignUp.cshtml)
   White frame, top-aligned content, scrollable inside the 760-tall device.
   ============================================================ */
.signup-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 20px;
}

.signup-frame {
  width: 390px;
  height: 760px;
  max-height: calc(100vh - 160px);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 30px 70px -10px rgba(20, 22, 31, 0.35),
              0 8px 30px rgba(20, 22, 31, 0.15);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.signup-topnav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 6px;
}

.signup-spacer { flex: 1; }

.signup-save-exit {
  background: transparent;
  border: none;
  color: #0D518B;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
}

.signup-save-exit:hover { color: #082F56; }

/* Override welcome-back's white-on-dark styling for the white signup frame. */
.signup-stage .welcome-back {
  position: static;
  background: rgba(20, 22, 31, 0.05);
  color: #2E3140;
}

.signup-stage .welcome-back:hover {
  background: rgba(20, 22, 31, 0.10);
}

.signup-stage .welcome-back svg {
  stroke: currentColor;
}

.signup-progress {
  display: flex;
  gap: 2px;
  padding: 6px 22px 4px;
}

.signup-progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #E5E6EC;
}

.signup-progress-step--current {
  background: linear-gradient(90deg, #B99300 0%, #8E7200 100%);
}

.signup-content {
  padding: 18px 22px 8px;
  display: flex;
  flex-direction: column;
}

.signup-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #F4EFE2;
  border-radius: 999px;
  font-size: 12px;
  color: #14161F;
  font-weight: 500;
  margin-bottom: 14px;
}

.signup-chip-tick {
  color: #1F7A4D;
  font-weight: 700;
  font-size: 13px;
}

.signup-chip-icon {
  width: 14px;
  height: 14px;
  fill: #229ED9;
}

.signup-chip-text { color: #14161F; }

.signup-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0D518B;
  margin-bottom: 10px;
}

.signup-h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #14161F;
  margin: 0 0 8px;
}

.signup-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5A5E72;
  margin: 0 0 14px;
}

.signup-field { margin-top: 12px; }

.signup-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #2E3140;
  margin-bottom: 6px;
}

.signup-input,
.signup-select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #E5E6EC;
  border-radius: 12px;
  font-size: 15px;
  background: #fff;
  color: #14161F;
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.signup-input:focus,
.signup-select:focus {
  outline: none;
  border-color: #0D518B;
  box-shadow: 0 0 0 4px rgba(13, 81, 139, 0.12);
}

.signup-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235A5E72'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 38px;
}

.signup-err {
  font-size: 12.5px;
  color: #B42318;
  margin-top: 4px;
  font-weight: 500;
  display: none;
}

.signup-field--invalid .signup-err { display: block; }
.signup-field--invalid .signup-input,
.signup-field--invalid .signup-select { border-color: #B42318; }

.signup-segmented {
  display: flex;
  background: #F1F2F6;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.signup-segmented input { display: none; }

.signup-segmented label {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #5A5E72;
  border-radius: 8px;
  cursor: pointer;
  margin: 0;
  transition: background .12s ease, color .12s ease;
}

.signup-segmented input:checked + label {
  background: #fff;
  color: #14161F;
  box-shadow: 0 1px 2px rgba(20, 22, 31, 0.06);
}

.signup-actions {
  padding: 12px 22px 22px;
  margin-top: auto;
}

.signup-continue {
  width: 100%;
  border: none;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  background: #B99300;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(185, 147, 0, 0.30);
  transition: background .15s ease, transform .08s ease, opacity .15s ease;
}

.signup-continue:hover:not(:disabled) { background: #8E7200; }

.signup-continue:active:not(:disabled) { transform: scale(.98); }

.signup-continue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Mobile: full-bleed, no frame chrome */
@media (max-width: 480px) {
  .signup-stage {
    padding: 0;
    min-height: calc(100vh - 140px);
  }
  .signup-frame {
    width: 100%;
    height: calc(100vh - 140px);
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}