@font-face {
  font-family: "FS Albert Bold";
  src: url("fonts/FSAlbert-Bold.woff2") format("woff2"),
    url("fonts/FSAlbert-Bold.ttf") format("truetype");
  font-display: swap;
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "FS Albert Regular";
  src: url("fonts/FSAlbert-Regular.woff2") format("woff2"),
    url("fonts/FSAlbert-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
:root {
  --color-orange: #ff7800;
  --color-invalid: #da2702;
  --font-sm: 13px;
  --font-m: 15px;
  /* Height of the keyboard overlapping the page; kept up to date by
     keyboard-inset.js. See the .keyboard-aware-footer block at the bottom. */
  --keyboard-inset: 0px;
}

body {
  font-family: "FS Albert Regular", sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}

.lang-button {
  color: var(--color-orange);
  font-size: var(--font-sm);
  cursor: pointer;
}

/* Android WebView focuses a <button> on tap while iOS does not, so Bootstrap's
   blue focus ring (box-shadow) stayed on the button after every press on
   Android only. Drop it here and give keyboard users a brand-coloured ring
   below instead. */
.btn:focus,
.btn:hover,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

.btn:focus-visible {
  outline: 2px solid var(--color-orange) !important;
  outline-offset: 2px;
}

.btn {
  border-radius: 16px;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
}

.btn-primary {
  border: none !important;
}

.btn-primary:disabled {
  background-color: #f1f1f1 !important;
  color: #636363;
  font-family: "FS Albert Regular";
  font-weight: 800;
  opacity: 1;
}

.card-title {
  font-weight: 700;
  color: #212121;
  font-size: 24px;
}

.form-label {
  font-size: var(--font-sm) !important;
  color: #8e8e8e;
}

.form-control:focus {
  box-shadow: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
}

.min-vh-100 {
  min-height: 100vh; /* fallback for browsers without dvh support */
  min-height: 100dvh; /* dynamic viewport height so the bottom button isn't cut off by the mobile URL bar */
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.mt-auto {
  margin-top: auto;
}

.error-message-feedback-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-invalid);
}
[dir="rtl"] .back-button {
  transform: rotate(180deg);
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  background-image: none;
}

.back-button svg {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  margin-top: 5px;
  padding-top: 0px;
}
.back-button {
  color: black;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Non-mobile clients host these pages in a shell that provides its own
   navigation, so the back button is hidden on every screen. The button is only
   hidden, never removed from the DOM, because each page's script binds a click
   listener to it without a null check.
   The nav bar collapses with it — left alone it would be an empty 40px strip
   with a stray divider — but keeps a small gap above the content. !important is
   needed to beat Bootstrap's .p-2 utility and the .dark-theme nav rules, which
   are loaded after this file. */
.non-mobile-client .back-button {
  display: none;
}

.non-mobile-client .navigation {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 0 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.lottie-container {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}
#continueBtn {
  position: relative;
  min-height: 54px;
}
@media screen and (max-height: 500px) {
  .btn-consent-wrapper {
    display: none !important;
  }
  .btn-container {
    display: none !important;
  }
}

/* Keyboard-aware bottom action button.
   While the soft keyboard is up, keyboard-inset.js sets .keyboard-open on
   <html> and reports the covered height in --keyboard-inset. The footer is
   then taken out of the flow and pinned just above the keyboard, so the
   Continue button stays tappable while the heading, description and inputs
   above it stay exactly where they were. Everything is scoped to the mobile
   layout; the >=768px card layout keeps its in-flow button.
   The display rules also re-show the footer that the max-height rule above
   hides once the keyboard has shortened the viewport. */
@media (max-width: 767.98px) {
  /* Give the page enough scrollable room to clear both the keyboard and the
     pinned bar. Padding alone moves nothing — it just means anything the bar
     overlaps (the OTP boxes on a short screen) can still be scrolled up into
     view instead of being stuck underneath it. */
  html.keyboard-open body {
    padding-bottom: calc(var(--keyboard-inset) + var(--footer-height, 0px));
  }

  html.keyboard-open .keyboard-aware-footer {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1030;
    margin: 0 !important;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(calc(-1 * var(--keyboard-inset)));
  }

  /* Pages that nest .btn-container inside the footer (password,
     email-verification) — the footer owns the padding and chrome now, so the
     inner wrapper must not add a second copy or translate a second time. */
  html.keyboard-open .keyboard-aware-footer .btn-container {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  html.keyboard-open body.dark-theme .keyboard-aware-footer {
    background-color: #000000;
    box-shadow: none;
  }
}