.main-container,
.main-container-homes {
  margin-inline: auto;
}

.main-container {
  max-width: 760px;
  padding-top: var(--spacing-1400);
}

.main-container:has(sds-row#error-401) { 
  --column-justify-content: center; 
  padding-top: var(--spacing-none); 
}

.main-container-homes {
  max-width: 896px;
}

.main-header {
  --row-padding: var(--spacing-600) var(--spacing-800) var(--spacing-none);
}

.column-justify-center {
  --column-justify-content: center;
  padding-top: var(--spacing-none);
}

body {
  background-color: var(--background-secondary);
}

body.homes {
  background-image: url("/assets/bg-pattern-e631d72d.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

.input-text-center {
  text-align: center;
}

.input-text-center::placeholder {
  text-align: center;
}

body:not(.homes) {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
      /* Dots at intersections */
      radial-gradient(circle at 30px 30px,
        var(--background-accent-4-default) 4px,
        transparent 4px),
      /* Vertical lines */
      repeating-linear-gradient(90deg,
        transparent 0,
        transparent 29px,
        var(--background-accent-4-default) 29px,
        var(--background-accent-4-default) 31px,
        transparent 31px,
        transparent 60px),
      /* Horizontal lines */
      repeating-linear-gradient(0deg,
        transparent 0,
        transparent 29px,
        var(--background-accent-4-default) 29px,
        var(--background-accent-4-default) 31px,
        transparent 31px,
        transparent 60px);
    background-size: 60px 60px;
    pointer-events: none;
  }
}

rmv-widget {
  --widget-border-radius: var(--radius-sm);
}

.questionnaire-header {
  --image-container-margin: -85px -40px -15px -20px;
  --card-padding: var(--spacing-600) var(--spacing-none) var(--spacing-600) var(--spacing-900);
  --card-background-color: var(--background-brand);

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      var(--background-transparent-default) 0%,
      rgba(255, 255, 255, 0.12) 40%,
      var(--background-brand) 99%,
      var(--background-transparent-default) 100%);
    pointer-events: none;
    border-radius: inherit;
  }
}

.demo-heading {
  --column-padding: var(--spacing-1600) var(--spacing-none) var(--spacing-1000) var(--spacing-none);

  sds-image {
    --image-container-height: 82px;
    --image-container-width: 80px;
  }
}

.search-row-padding {
  --row-padding: var(--spacing-none) var(--spacing-none) var(--spacing-400) var(--spacing-none);
}

.demo-card {
  height: 84px;
}

.sticky-footer {
  margin-top: var(--spacing-800);
  position: sticky;
  bottom: 0;
  width: 100%;

  @media only screen and (max-width: 575px) {
    >sds-row:first-of-type {
      --row-gap: var(--spacing-200);
      flex-direction: column;
    }

    sds-row {
      justify-content: center;
    }
  }
}

.questionnaire-result {
  --column-gap: var(--spacing-400);
}

.questionnaire-result-content-column {
  --column-padding: var(--spacing-1100) var(--spacing-900);
}

.questionnaire-result-image {
  --image-container-margin: -70px -60px 0px 5px;
  --image-container-width: 400px;
  --image-container-height: 300px;
}

.main-header.sticky-header sds-divider[direction="vertical"] {
  display: none;
}

.main-header.sticky-header {
  position: sticky;
  top: -71px;
  z-index: 3;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.main-header.sticky-header--with-transition {
  transition: top 0.25s var(--animation-smooth-ease),
    background 0.25s var(--animation-smooth-ease),
    border-color 0.25s var(--animation-smooth-ease),
    box-shadow 0.25s var(--animation-smooth-ease),
    padding 0.25s var(--animation-smooth-ease);
}

.main-header.sticky-header--visible {
  top: 0;
  background: var(--background-default);
  border-bottom: var(--width-default) solid var(--border-default);
  box-shadow: var(--elevation-secondary-offset-x) var(--elevation-secondary-offset-y) var(--elevation-secondary-blur) var(--elevation-secondary-spread) var(--elevation-secondary-color);
  --row-padding: var(--spacing-none) var(--spacing-500);
}

.main-header.sticky-header.sticky-header--visible sds-divider[direction="vertical"] {
  display: inline-flex;
}

.scenario-selector {
  --column-padding: var(--spacing-600) var(--spacing-900);
}

.scenario-details {
  --column-padding: var(--spacing-600) var(--spacing-900) var(--spacing-900) var(--spacing-900);
}

@media only screen and (min-width: 576px) {
  .demo-heading {
    --column-padding: var(--spacing-1900) var(--spacing-none) var(--spacing-1200) var(--spacing-none);

    sds-image {
      --image-container-height: 124px;
      --image-container-width: 120px;
    }
  }

  .search-row-padding {
    --row-padding: var(--spacing-none) var(--spacing-none) var(--spacing-800) var(--spacing-none);
  }

  .demo-card {
    height: 104px;
  }
}

@media only screen and (min-width: 768px) {
  .demo-heading {
    --column-padding: var(--spacing-2300) var(--spacing-none) var(--spacing-1400) var(--spacing-none);
  }
}

@media only screen and (max-width: 767px) {
  .main-header {
    --row-padding: var(--spacing-500) var(--spacing-500) var(--spacing-none);
  }

  .switch-grow {
    --row-flex-wrap: nowrap;
    --row-flex-grow: 1;
  }

  .questionnaire-result {
    sds-row {
      --row-flex-wrap: wrap;
    }

    --button-width: 100%;
    --button-host-width: 100%;
    --column-gap: var(--spacing-1700);
  }

  .questionnaire-result-row {
    --row-flex-direction: column-reverse;
    --row-align-items: center;
    --row-flex-wrap: wrap;
  }

  .questionnaire-result-content-column {
    --content-text-align: center;
    --column-align-items: center;
    --column-padding: var(--spacing-500);
  }

  .questionnaire-result-image {
    --image-container-margin: -45px 0 0 25px;
    --image-container-width: 280px;
    --image-container-height: 210px;
  }

  .questionnaire-header-row {
    --row-flex-direction: column-reverse;
    --row-align-items: center;
    --row-flex-wrap: wrap;
  }

  .questionnaire-header-text-column {
    --content-text-align: center;
    --column-align-items: center;
    --column-padding: var(--spacing-600) var(--spacing-400) var(--spacing-600) var(--spacing-400);
  }

  .questionnaire-header-image {
    --image-container-margin: -50px -40px -15px -20px;
    --image-container-width: 300px;
    --image-container-height: 200px;
  }

  .questionnaire-header {
    --card-padding: 0;
  }

  .scenario-selector {
    --column-padding: var(--spacing-400)
  }

  .scenario-details {
    --column-padding: var(--spacing-400);
  }
}