html.wb-lego-batman {
  * { box-sizing: border-box; }

  /* Freeze Scrolling */
  &.frozen {
    overflow: hidden;
  }

  &:root {
    --theme-page-color-background: #000;
    --ui-text-highlighted: #fff;
    --ui-text: #D6AB00;

    --theme-primary-accent: #D6AB00;
    --theme-secondary-accent: #081943;

    --theme-error-color: #A61919;

    --theme-form-input-background: #D6AB00;
    --theme-form-input-foreground: #000;
    --theme-form-input-border: 1px solid rgba(0, 0, 0, 0.2);

    --theme-form-select-option-color: #D6AB00;
    --theme-form-select-option-color-hover: #c49b00;

    --theme-button-color-text: #000;

    --theme-font-family: 'URWDIN', sans-serif;
    --theme-font-family-headline: 'CCUltimatum', sans-serif;
    --theme-font-family-headline-heavy: 'CCUltimatumHeavy', sans-serif;

    --theme-font-line-height-80: 80%;
    --theme-font-line-height-85: 85%;
    --theme-text-transformation: uppercase;

    --theme-page-max-width: 1920px;
    --theme-container-max-width: 87pc;
  }

  & body {
    background: var(--theme-page-color-background);
    color: #D6AB00;
    font-family: var(--theme-font-family);

    & .container {
      width: 100%;
      max-width: var(--theme-container-max-width);
      margin: 0 auto;
    }

    /* Only hide aria-hidden on the landing page, not inside the modal */
    & #content [aria-hidden] {
      display: none;
    }

    /* ── Native HTML form elements (gold bg, black text) ── */
    & :where(input, textarea, select) {
      background-color: var(--theme-form-input-background) !important;
      border: 1px solid rgba(0, 0, 0, 0.2) !important;
      border-radius: 2px !important;
      padding: 8px 20px !important;
      width: 100%;
      min-height: 54px;
      font-family: var(--theme-font-family);
      font-size: 1rem;
      color: var(--theme-form-input-foreground);

      &::placeholder {
        color: rgba(0, 0, 0, 0.5);
      }

      /* Date input calendar icon — black on gold bg */
      &::-webkit-calendar-picker-indicator {
        filter: invert(0);
      }

      &:focus-visible {
        outline: 2px solid #000;
      }
    }

    /* ── Nuxt UI component overrides (gold bg, black text) ── */
    & .UInput,
    & .UTextarea,
    & .USelectMenu {
      --ui-bg: #D6AB00;
      --ui-text-highlighted: #000;
      --ui-text-dimmed: rgba(0, 0, 0, 0.5);
      --ui-border-accented: rgba(0, 0, 0, 0.2);
      --ui-bg-elevated: #c49b00;
      --ui-border-inverted: #000;
    }

    /* ── Form field labels (stay white on dark background) ── */
    & .UFormField {
      --ui-text: #fff;
      --ui-text-muted: rgba(255, 255, 255, 0.5);
      --ui-error: #ff4444;
    }

    /* ── Nuxt UI Checkbox overrides ── */
    & .UCheckbox {
      --ui-border-accented: rgba(214, 171, 0, 0.4);
      --ui-bg: rgba(214, 171, 0, 0.15);
      --ui-text: #fff;
      --ui-primary: #D6AB00;
      gap: 0.5rem;

      & [data-state="checked"] {
        color: #000 !important;
      }
    }

    /* ── Nuxt UI Radio Group overrides ── */
    & .URadioGroup {
      --ui-border-accented: rgba(214, 171, 0, 0.4);
      --ui-bg: rgba(214, 171, 0, 0.15);
      --ui-text: #fff;
      --ui-primary: #D6AB00;
    }

    /* ── Social selector: Add button + badges ── */
    & .BaseFormSocialSelector {
      --ui-bg: #D6AB00;
      --ui-text-highlighted: #000;
      --ui-text-dimmed: rgba(0, 0, 0, 0.5);
      --ui-border-accented: rgba(0, 0, 0, 0.2);
      --ui-bg-elevated: #c49b00;
      --ui-border-inverted: #000;
      --ui-primary: #D6AB00;
    }

    /* ── Custom UISelect component overrides ── */
    & .ui-select-trigger {
      background: #D6AB00 !important;
      border-color: rgba(0, 0, 0, 0.2) !important;
      border-radius: 2px !important;
      color: #000 !important;
      min-height: 54px !important;
    }

    & .ui-select-trigger:hover:not(.ui-select-trigger--disabled) {
      border-color: rgba(0, 0, 0, 0.4) !important;
    }

    & .ui-select-trigger:focus,
    & .ui-select-trigger--open {
      border-color: #000 !important;
      box-shadow: none !important;
    }

    & .ui-select-display {
      color: #000 !important;
    }

    & .ui-select-placeholder {
      color: rgba(0, 0, 0, 0.5) !important;
    }

    & .ui-select-chevron,
    & .ui-select-clear {
      color: rgba(0, 0, 0, 0.6) !important;
    }

    & .ui-select-dropdown {
      background: #D6AB00 !important;
      border-color: rgba(0, 0, 0, 0.2) !important;
      border-radius: 2px !important;
    }

    & .ui-select-search-wrapper {
      border-color: rgba(0, 0, 0, 0.15) !important;
    }

    & .ui-select-search-input {
      background: #c49b00 !important;
      color: #000 !important;
      border-color: rgba(0, 0, 0, 0.2) !important;
      border-radius: 2px !important;

      &::placeholder {
        color: rgba(0, 0, 0, 0.5) !important;
      }

      &:focus {
        border-color: #000 !important;
        box-shadow: none !important;
      }
    }

    & .ui-select-search-icon {
      color: rgba(0, 0, 0, 0.5) !important;
    }

    & .ui-select-option {
      color: #000 !important;
    }

    & .ui-select-option:hover {
      background: #c49b00 !important;
    }

    & .ui-select-option--selected {
      background: rgba(0, 0, 0, 0.1) !important;
      color: #000 !important;
    }

    & .ui-select-option--focused {
      background: #c49b00 !important;
      color: #000 !important;
    }

    & .ui-select-option-check {
      color: #000 !important;
    }

    & .ui-select-no-results {
      color: rgba(0, 0, 0, 0.6) !important;
    }

    & .ui-select-tag {
      background: rgba(0, 0, 0, 0.15) !important;
      color: #000 !important;
      border-radius: 2px !important;
    }

    & .ui-select-tag-remove {
      color: #000 !important;
    }

    & .ui-select-tag-remove:hover {
      background: rgba(0, 0, 0, 0.2) !important;
    }

    & .ui-select-tag-overflow {
      background: rgba(0, 0, 0, 0.1) !important;
      color: #000 !important;
    }

    /* ── Multiselect (vue-multiselect) ── */
    & .multiselect {
      background-color: var(--theme-form-input-background) !important;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      position: relative;
      width: 100%;
      min-height: 54px;

      & .multiselect__select {
        display: inline-block;
        height: 54px;
        width: 54px;
        transition: none;

        &::before {
          border-color: #000 transparent transparent;
        }
      }

      & .multiselect__tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-height: 54px;
        margin: 0;
        padding-block: 0 !important;
        background: none;
        border: none;

        & .chips {
          min-height: 54px;
          padding-block: 8px;

          & .chip {
            background-color: rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 2px;
            color: #000;
            gap: 8px;
            font-size: 0.875rem;
            padding: 8px;

            & i {
              color: #000;
            }

            &:hover {
              background-color: rgba(0, 0, 0, 0.25);
            }
          }
        }

        & .multiselect__input {
          background: none !important;
          border: none !important;
          height: 100%;
          min-height: unset;
          color: #000;

          &::placeholder {
            color: rgba(0, 0, 0, 0.5);
          }
        }
      }

      & .multiselect__content-wrapper {
        background-color: #D6AB00;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        z-index: 1;

        & li {
          background-color: #D6AB00;
          color: #000;
          padding: 10px 20px;

          & > span {
            background: none;

            &::after {
              display: none;
            }
          }

          &:hover,
          &:has(.multiselect__option--highlight) {
            background-color: #c49b00;
          }
        }
      }
    }

  }
}

/* ── CCUltimatum (headlines, buttons, nav) ── */

@font-face {
  font-family: 'CCUltimatum';
  src: url('/fonts/wb-lego-batman/CCUltimatum/CCUltimatum-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CCUltimatum';
  src: url('/fonts/wb-lego-batman/CCUltimatum/CCUltimatumVF-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── CCUltimatumHeavy (heavy display headlines) ── */

@font-face {
  font-family: 'CCUltimatumHeavy';
  src: url('/fonts/wb-lego-batman/CCUltimatum/CCUltimatumHeavy.woff2') format('woff2');
  font-weight: 875;
  font-style: normal;
  font-display: swap;
}

/* ── URWDIN (body, UI text) ── */

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'URWDIN';
  src: url('/fonts/wb-lego-batman/URWDIN/URWDIN-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ── Select dropdown portal (rendered outside .UForm via Reka/Radix popper) ── */
html.wb-lego-batman [data-reka-popper-content-wrapper] {
  --ui-bg: #D6AB00;
  --ui-border: rgba(0, 0, 0, 0.2);
  --ui-text: #000;
  --ui-text-highlighted: #000;
  --ui-text-dimmed: rgba(0, 0, 0, 0.5);
  --ui-text-muted: rgba(0, 0, 0, 0.5);
  --ui-bg-elevated: #c49b00;

  & input {
    background-color: #c49b00 !important;
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;

    &::placeholder {
      color: rgba(0, 0, 0, 0.5) !important;
    }
  }
}

/* ── Social selector: Add button height match ── */
html.wb-lego-batman .BaseFormSocialSelector button {
  min-height: 54px !important;
  border-radius: 2px !important;
}

/*
 * ── Layered button & link styles ──
 * In @layer base so Tailwind utilities (rounded-full, !bg-[...], !text-white)
 * can override these. Fixes stepper dots, social submit buttons, etc.
 */
@layer base {
  html.wb-lego-batman body a,
  html.wb-lego-batman body button {
    transition: none;
  }

  html.wb-lego-batman body a {
    color: #D6AB00;
    text-decoration: underline;
  }

  html.wb-lego-batman body button:not(.nui) {
    align-items: center;
    background: #D6AB00;
    border: none;
    border-radius: 2px;
    color: #000;
    cursor: pointer;
    display: flex;
    font-family: 'CCUltimatum', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.25;
    justify-content: center;
    padding: 12px 24px;
    text-decoration: none;
    text-transform: uppercase;
    gap: 8px;
  }

  html.wb-lego-batman body button:not(.nui):hover:not(:disabled) {
    background: #FFD900;
  }

  html.wb-lego-batman body button:not(.nui):disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}

/* Badge override (must be in @layer to beat Tailwind's !important) */
@layer utilities {
  html.wb-lego-batman .BaseFormSocialSelector .UBadge {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(214, 171, 0, 0.4) !important;
    border-radius: 2px !important;
    color: #fff !important;
    padding: 0.375rem 0.75rem !important;
  }

  /* ── Form error/alert boxes for dark background ── */
  html.wb-lego-batman .UFormError div {
    background-color: rgba(220, 38, 38, 0.15) !important;
    border-color: #dc2626 !important;
    color: #fca5a5 !important;
  }

  html.wb-lego-batman [role="alert"] {
    background-color: rgba(234, 179, 8, 0.15) !important;
    border-color: #D6AB00 !important;
    color: #fde68a !important;
  }

  html.wb-lego-batman .success-message {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #86efac !important;
  }
}

/* Dashboard: shared background */
html.wb-lego-batman .lb-dashboard-wrapper {
  background-color: #000;
  background-image:
    radial-gradient(ellipse at top right, rgba(8, 25, 67, 0.3) 0%, transparent 50%);
  position: relative;
}

html.wb-lego-batman .lb-dashboard-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/wb-lego-batman/backgrounds/BAT_SYMBOL.png') no-repeat center center;
  background-size: cover;
  opacity: 0.2;
  pointer-events: none;
}

/* Dashboard: override branded layout max-width */
html.wb-lego-batman #layout .inner {
  max-width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}