/**
 * The hosted login. Page chrome follows the getflights.com website (navy band,
 * tinted page, 20px card); controls follow ember-ui (Getflights Pro, Atlas).
 * Dark mode follows the device setting, with the website's dark palette.
 */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/rubik-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/rubik-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/rubik-latin-600-normal.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --gf-page: #f5f6ff;
  --gf-band: #242b66;
  --gf-route: #5a63a8;
  --gf-surface: #ffffff;
  --gf-tint: #f5f6ff;
  --gf-line: #e1e4f8;
  --gf-line-soft: #e6e8f7;
  --gf-text: #242b66;
  --gf-muted: #4a5185;
  --gf-on-band: #d3d7f5;
  --gf-blue: #2d41f4;
  --gf-blue-hover: #1a2bc4;
  --gf-blue-50: #eef0ff;
  --gf-fill: #2d41f4;
  --gf-fill-hover: #1a2bc4;
  --gf-input: #ffffff;
  --gf-input-border: #d5d8e2;
  --gf-input-border-hover: #a3a9b8;
  --gf-placeholder: #6b7280;
  --gf-neutral: #4a5185;
  --gf-danger: #c0262d;
  --gf-danger-50: #fdeeee;
  --gf-warning: #8a3a07;
  --gf-warning-50: #fff4e8;
  --gf-success: #0b6a33;
  --gf-success-50: #e3f6ea;
  --gf-strength-weak: #e5484d;
  --gf-strength-strong: #18a058;
  --gf-focus: rgb(45 65 244 / 50%);
  --gf-card-shadow: 0 24px 48px -24px rgb(36 43 102 / 25%), 0 0 0 1px rgb(36 43 102 / 6%);

  --gf-font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gf-mono: "JetBrains Mono", ui-monospace, monospace;
  --gf-radius-control: 0.375rem;
  --gf-radius-box: 0.75rem;
  --gf-radius-card: 1.25rem;
  --gf-control-height: 3rem;
  --gf-transition: 200ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gf-page: #0c1029;
    --gf-band: #1b2150;
    --gf-route: #353d84;
    --gf-surface: #151a3f;
    --gf-tint: #11163a;
    --gf-line: #262d5e;
    --gf-line-soft: #1e2552;
    --gf-text: #eef0ff;
    --gf-muted: #aab0dc;
    --gf-blue: #8794ff;
    --gf-blue-hover: #aeb7ff;
    --gf-blue-50: #1f2766;
    --gf-input: #151a3f;
    --gf-input-border: #3a4280;
    --gf-input-border-hover: #5a63a8;
    --gf-placeholder: #959cc9;
    --gf-neutral: #aab0dc;
    --gf-danger: #ff7a7f;
    --gf-danger-50: #3a1418;
    --gf-warning: #ffb27f;
    --gf-warning-50: #3a2212;
    --gf-success: #7fe0a6;
    --gf-success-50: #0f3324;
    --gf-strength-weak: #ff6b70;
    --gf-strength-strong: #4cc38a;
    --gf-focus: rgb(135 148 255 / 55%);
    --gf-card-shadow: 0 24px 48px -24px rgb(0 0 0 / 70%), 0 0 0 1px #262d5e;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gf-transition: 0ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.gf-body {
  margin: 0;
  background: var(--gf-page);
  color: var(--gf-text);
  font-family: var(--gf-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--gf-blue);
}

a:hover {
  color: var(--gf-blue-hover);
}

:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--gf-focus);
  border-radius: var(--gf-radius-control);
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.visually-hidden.focusable:focus {
  position: fixed !important;
  z-index: 10;
  top: 0.5rem;
  left: 0.5rem;
  clip: auto;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  background: var(--gf-band);
  color: #ffffff;
}

/* Page */

.gf-auth {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.gf-auth__band {
  position: absolute;
  inset: 0 0 auto;
  height: 12.5rem;
  background: var(--gf-band);
}

.gf-auth__route {
  display: none;
}

.gf-auth__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1rem;
}

.gf-auth__logo {
  display: block;
  width: auto;
  height: 1.5rem;
}

.gf-auth__languages {
  display: flex;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.gf-auth__languages a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  color: var(--gf-on-band);
  text-decoration: none;
}

.gf-auth__languages a:hover {
  color: #ffffff;
}

.gf-auth__languages a[aria-current="true"] {
  min-height: 2rem;
  align-self: center;
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
  font-weight: 500;
}

.gf-auth__main {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 1rem 0;
}

.gf-auth__secure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

.gf-auth__secure svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

.gf-auth__footer {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.25rem 1rem 1.75rem;
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

@media (min-width: 48em) {
  .gf-auth__band {
    height: 21.25rem;
  }

  .gf-auth__route {
    display: block;
    width: 100%;
    height: 100%;
  }

  .gf-auth__route path {
    fill: none;
    stroke: var(--gf-route);
    stroke-width: 2;
    stroke-dasharray: 2 10;
    stroke-linecap: round;
  }

  .gf-auth__header {
    padding: 2rem 3rem;
  }

  .gf-auth__logo {
    height: 1.8125rem;
  }

  .gf-auth__main {
    padding-top: 1.25rem;
  }
}

/* Card */

.gf-card {
  width: 100%;
  max-width: 27.5rem;
  overflow: hidden;
  border-radius: var(--gf-radius-card);
  background: var(--gf-surface);
  box-shadow: var(--gf-card-shadow);
}

.gf-card:has(.gf-consent) {
  max-width: 32.5rem;
}

.gf-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 1.75rem;
}

.gf-card__body > * {
  margin-top: 0;
  margin-bottom: 0;
}

.gf-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gf-line);
  background: var(--gf-tint);
  color: var(--gf-muted);
  font-size: 0.875rem;
}

.gf-card__footer a {
  font-weight: 500;
}

@media (min-width: 48em) {
  .gf-card__body {
    gap: 1.5rem;
    padding: 2.25rem 2.5rem 2rem;
  }

  .gf-card__footer {
    padding: 1.125rem 2.5rem;
  }
}

/* Headings and text */

.gf-card h1,
.gf-title {
  margin: 0;
  color: var(--gf-text);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
}

@media (min-width: 48em) {
  .gf-card h1,
  .gf-title {
    font-size: 1.75rem;
  }
}

.gf-lead,
.gf-form > p,
.gf-form .form-item + p {
  margin: 0;
  color: var(--gf-muted);
  font-size: 0.9375rem;
}

.gf-eyebrow {
  margin: 0 0 -0.75rem;
  color: var(--gf-blue);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The application the user logs in to */

.gf-client {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gf-line);
  border-radius: var(--gf-radius-box);
  background: var(--gf-tint);
}

.gf-client__logo {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.gf-client__logo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gf-fill);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}

.gf-client__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.gf-client__label {
  color: var(--gf-muted);
  font-size: 0.75rem;
}

.gf-client__name {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two-factor progress */

.gf-steps {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gf-steps__step {
  flex-grow: 1;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--gf-line);
}

.gf-steps__step--done,
.gf-steps__step--current {
  background: var(--gf-fill);
}

/* Forms */

.gf-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.gf-form > div,
.gf-form .form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
}

.form-item label,
.fieldset-legend {
  color: var(--gf-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.form-required::after {
  content: " *";
  color: var(--gf-danger);
}

.form-item .description {
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

input.form-text,
input.form-email,
input.form-password,
input.form-tel,
input.form-number {
  width: 100%;
  min-height: var(--gf-control-height);
  margin: 0;
  padding: 0 1rem;
  border: 1px solid var(--gf-input-border);
  border-radius: var(--gf-radius-control);
  background: var(--gf-input);
  color: var(--gf-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--gf-transition), box-shadow var(--gf-transition);
}

input.form-text:hover,
input.form-email:hover,
input.form-password:hover {
  border-color: var(--gf-input-border-hover);
}

input.form-text:focus,
input.form-email:focus,
input.form-password:focus,
input.form-tel:focus,
input.form-number:focus {
  border-color: var(--gf-fill);
  outline: 0;
  box-shadow: 0 0 0 3px var(--gf-focus);
}

input::placeholder {
  color: var(--gf-placeholder);
  opacity: 1;
}

input.error {
  border-color: var(--gf-danger);
}

.form-item--error-message {
  color: var(--gf-danger);
  font-size: 0.8125rem;
}

input.gf-code-input {
  min-height: 3.5rem;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
}

.form-type-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.form-type-checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--gf-fill);
}

.form-type-checkbox label {
  font-size: 0.875rem;
  font-weight: 400;
}

.gf-form__forgot {
  align-self: flex-end;
  margin-top: -0.625rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.gf-form__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  text-decoration: none;
}

.gf-form__back::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.gf-form__note {
  margin: 0;
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

.gf-form__note--center {
  text-align: center;
}

/* Password field with its show/hide button (js/auth.js) */

.gf-password {
  position: relative;
  display: block;
}

.gf-password input.form-password {
  padding-right: 3rem;
}

.gf-password__toggle {
  position: absolute;
  /* Centred on the input, which is always first in the wrapper: core's
     password script may append its strength meter and match message after it,
     so the middle of the wrapper is not the middle of the input. */
  top: calc(var(--gf-control-height) / 2);
  right: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gf-neutral);
  cursor: pointer;
  transform: translateY(-50%);
}

.gf-password__toggle:hover {
  background: var(--gf-blue-50);
}

.gf-password__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* Password strength meter of the set-new-password form (core user.js). Core
   sets the indicator's width to the strength, 0 to 100; js/auth.js copies that
   into --gf-strength, which blends the colour from red through amber (the
   oklch midpoint) to green at a perfect password. */

.password-strength__meter {
  height: 0.375rem;
  margin-top: 0.625rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--gf-line);
}

.password-strength__indicator {
  --gf-strength: 0;
  height: 100%;
  border-radius: inherit;
  background-color: color-mix(in oklch, var(--gf-strength-weak), var(--gf-strength-strong) calc(var(--gf-strength) * 1%));
  transition: width 300ms ease-out, background-color 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .password-strength__indicator {
    transition: none;
  }
}

.password-strength__title,
.password-confirm-message {
  margin-top: 0.375rem;
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

/* Buttons */

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
}

.button,
input.form-submit,
button.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--gf-control-height);
  margin: 0;
  padding: 0 1.5rem;
  border: 1px solid var(--gf-fill);
  border-radius: var(--gf-radius-control);
  background: var(--gf-fill);
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--gf-transition), border-color var(--gf-transition), box-shadow var(--gf-transition);
  -webkit-appearance: none;
  appearance: none;
}

.button:hover,
input.form-submit:hover,
button.form-submit:hover {
  border-color: var(--gf-fill-hover);
  background: var(--gf-fill-hover);
  color: #ffffff;
}

.button:focus-visible,
input.form-submit:focus-visible {
  box-shadow: 0 0 0 3px var(--gf-focus);
}

.button--secondary,
input.form-submit.button--secondary {
  border-color: var(--gf-neutral);
  background: transparent;
  color: var(--gf-neutral);
}

.button--secondary:hover,
input.form-submit.button--secondary:hover {
  border-color: var(--gf-neutral);
  background: var(--gf-blue-50);
  color: var(--gf-text);
}

.button:disabled,
input.form-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* A submit button while its form is being sent (js/auth.js): a spinner
   before the label, and no more hover or click. These rules come after the
   button rules: those set the `background` shorthand at the same specificity,
   which would reset the spinner's repeat, size and position and tile it
   across the button. */

.button.is-busy,
input.form-submit.is-busy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  /* The spinner (1.25rem), a 0.5rem gap and the label are centred as one
     group: the padding moves the label right by half the spinner and gap,
     and the spinner sits half the label and gap left of the centre.
     --gf-busy-label-width is the label's width, measured by js/auth.js. */
  padding-left: calc(1.5rem + 1.75rem);
  background-repeat: no-repeat;
  background-position: calc(50% - (0.5rem + var(--gf-busy-label-width, 5rem)) / 2) 50%;
  background-size: 1.25rem;
  cursor: progress;
}

.button--secondary.is-busy,
input.form-submit.button--secondary.is-busy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5185' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .button--secondary.is-busy,
  input.form-submit.button--secondary.is-busy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab0dc' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
  }
}

.button[aria-disabled="true"],
input.form-submit[aria-disabled="true"] {
  pointer-events: none;
}

.button[aria-disabled="true"]:not(.is-busy),
input.form-submit[aria-disabled="true"]:not(.is-busy) {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .button.is-busy,
  input.form-submit.is-busy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9'/%3E%3C/svg%3E");
  }

  .button--secondary.is-busy,
  input.form-submit.button--secondary.is-busy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5185' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9'/%3E%3C/svg%3E");
  }
}

@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) {
  .button--secondary.is-busy,
  input.form-submit.button--secondary.is-busy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab0dc' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.3'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9'/%3E%3C/svg%3E");
  }
}

/* Passkeys */

.passkey-login {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.passkey-login[hidden] {
  display: none;
}

.passkey-login__or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

.passkey-login__or::before,
.passkey-login__or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--gf-line);
}

.passkey-login__button::before,
[data-passkey-create]::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  background: currentColor;
  -webkit-mask: var(--gf-passkey-icon) center / contain no-repeat;
  mask: var(--gf-passkey-icon) center / contain no-repeat;
}

:root {
  --gf-passkey-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,20V18C3,15.79 6.58,14 11,14C11.96,14 12.88,14.09 13.73,14.24C13.27,14.97 13,15.82 13,16.75C13,17.89 13.42,18.94 14.11,19.75L14,20H3M11,4A4,4 0 0,1 15,8A4,4 0 0,1 11,12A4,4 0 0,1 7,8A4,4 0 0,1 11,4M18.5,13.5A3,3 0 0,1 21.5,16.5C21.5,17.73 20.76,18.79 19.7,19.25L20.5,20.5L19.5,21.5L20.5,22.5L19,24L17.5,22.5V19.25C16.44,18.79 15.5,17.73 15.5,16.5A3,3 0 0,1 18.5,13.5M18.5,15A1,1 0 0,0 17.5,16A1,1 0 0,0 18.5,17A1,1 0 0,0 19.5,16A1,1 0 0,0 18.5,15Z'/%3E%3C/svg%3E");
}

/* Alerts (Drupal messages) */

.gf-alert {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--gf-radius-control);
  background: var(--gf-tone-50);
  color: var(--gf-tone);
  font-size: 0.875rem;
  line-height: 1.43;
}

.gf-alert--danger {
  --gf-tone: var(--gf-danger);
  --gf-tone-50: var(--gf-danger-50);
}

.gf-alert--warning {
  --gf-tone: var(--gf-warning);
  --gf-tone-50: var(--gf-warning-50);
}

.gf-alert--success {
  --gf-tone: var(--gf-success);
  --gf-tone-50: var(--gf-success-50);
}

.gf-alert--info {
  --gf-tone: var(--gf-blue);
  --gf-tone-50: var(--gf-blue-50);
}

.gf-alert__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.gf-alert__content ul {
  margin: 0;
  padding-left: 1rem;
}

.gf-alert a {
  color: inherit;
  font-weight: 500;
}

[data-drupal-messages] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Two-factor: other methods */

.gf-form fieldset,
.gf-form details {
  margin: 0;
  padding: 0.875rem 0 0;
  border: 0;
  border-top: 1px solid var(--gf-line);
  color: var(--gf-muted);
  font-size: 0.875rem;
}

.gf-form fieldset legend {
  padding: 0 0.5rem 0 0;
  font-size: 0.875rem;
}

.gf-form fieldset ul {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.gf-form fieldset li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Consent */

.gf-consent-apps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
}

.gf-consent-apps__app,
.gf-consent-apps__getflights {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  object-fit: cover;
}

.gf-consent-apps__app--initial {
  border: 1px solid var(--gf-line);
  background: var(--gf-blue-50);
  color: var(--gf-text);
  font-size: 1.25rem;
  font-weight: 600;
}

.gf-consent-apps__link {
  width: 3.5rem;
  border-top: 2px dotted var(--gf-route);
}

.gf-consent-apps__getflights {
  background: var(--gf-fill);
}

.gf-consent-apps__getflights svg {
  width: 1.625rem;
  height: 1.625rem;
  fill: #ffffff;
}

.gf-card:has(.gf-consent) h1 {
  text-align: center;
}

.gf-consent > p {
  text-align: center;
}

.gf-scopes,
.gf-consent .item-list {
  overflow: hidden;
  border: 1px solid var(--gf-line);
  border-radius: var(--gf-radius-box);
}

.gf-consent .item-list h3 {
  margin: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gf-line);
  background: var(--gf-tint);
  font-size: 0.8125rem;
  font-weight: 500;
}

.gf-consent .item-list ul {
  margin: 0;
  padding: 0.25rem 1rem;
  list-style: none;
}

.gf-consent .item-list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.875rem;
  border-bottom: 1px solid var(--gf-line-soft);
  color: var(--gf-muted);
  font-size: 0.8125rem;
}

.gf-consent .item-list li:last-child {
  border-bottom: 0;
}

.gf-consent .item-list li::before {
  content: "";
  position: absolute;
  top: 0.9375rem;
  left: 0.25rem;
  width: 0.625rem;
  height: 0.3125rem;
  border-bottom: 2px solid var(--gf-success);
  border-left: 2px solid var(--gf-success);
  transform: rotate(-45deg);
}

.gf-consent .item-list strong {
  display: block;
  color: var(--gf-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.gf-consent .form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Result pages (errors) */

.gf-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.gf-result > * {
  margin: 0;
}

.gf-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
}

.gf-result--error .gf-result__icon {
  background: var(--gf-danger-50);
  color: var(--gf-danger);
}

.gf-result__icon svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: currentColor;
}

.gf-result__code {
  color: var(--gf-muted);
  font-family: var(--gf-mono);
  font-size: 0.75rem;
}

.gf-button--block {
  width: 100%;
}