:root {
  font-size: 62.5%;
  line-height: 1.5;

  --swui-metrics-space: 8px;
  --swui-metrics-indent: 8px;
  --swui-font-primary: "Stena Sans", "Open Sans", Arial, sans-serif;

  --action-primary-color: var(--modern-red);
  --action-primary-color-hover: var(--sjobod);
  --action-primary-color-active: var(--modern-red);
  --action-primary-color-focus: var(--modern-red);

  --core-blue: #004a93;
  --modern-red: rgb(234, 20, 61);
  --snackskal: #fcb4cd;
  --snackskal-light: #fce1db;
  --sjobod: rgb(176, 15, 46);
  --tang: #80091b;
  --modern-blue: #1178df;
  --himmel: #b4d4f9;
  --himmel-light: #cae2fb;
  --himmel-lighter: #e1edfd;
  --hav: rgb(26, 90, 154);
  --mussla: #122f66;
  --sand: rgb(250, 246, 235);
  --modern-green: rgb(116, 179, 70);
  --moln: rgb(255, 255, 255);
  --tjara: rgb(51, 51, 51);
  --sand-dark-10: rgba(155, 147, 123, 0.1);
  --sand-dark-20: rgba(155, 147, 123, 0.2);
  --sand-dark: rgba(155, 147, 123);
  --hav-30: rgba(26, 90, 154, 0.3);
  --molnigare: rgb(250, 250, 248);
  --black: #000000;
  --silver: #949494;
  --silver-light: #c9c9c9;
  --silver-lighter: #f4f4f4;
  --silver-dark: #6b6b6b;
  --silver-ui: #ebebeb;
  --efp-premium: #e7ae2f;
  --efp-flexi: var(--hav);
  --efp-economy: var(--sjobod);
}

body {
  background: var(--silver-lighter);
  color: var(--tjara);
  margin: 0;
}

.pageHeaderRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: white;
}

.stenaIcon {
  width: 150px;
}

.contentWrapper {
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    padding: calc(var(--swui-metrics-indent) * 3) calc(var(--swui-metrics-indent) * 2) 0;
    max-width: 576px;
    display: flex;
    flex-direction: column;

    @media (max-width: 768px) {
      max-width: unset;
    }
  }
}

.heading {
  font-weight: bold;
  margin: 0;
  font-size: 3.0rem;
  font-family: var(--swui-font-primary);
  letter-spacing: 0;

  & h1 {
    font-size: 2.8rem;
  }

  & h2 {
    font-size: 2.4rem;
  }

  & h3 {
    font-size: 2.0rem;
  }

  & h4 {
    font-size: 1.8rem;
  }

  & h5 {
    font-size: 1.6rem;
  }

  & h6 {
    font-size: 1.4rem;
  }
}

.line {
  height: 1px;
  background-color: var(--silver-ui);
}

.separator {
  height: 8px;

  &.x2 {
    height: 16px;
  }

  &.x3 {
    height: 24px;
  }

  &.x6 {
    height: 48px;
  }
}

p,
.text {
  font-size: 1.6rem;
  font-family: var(--swui-font-primary);
  color: var(--tjara);
  margin: 0;

  &.smaller {
    font-size: 1.2rem;
  }

  &.small {
    font-size: 1.4rem;
  }

  &.large {
    font-size: 1.8rem;
  }
}

a {
  font-size: 1.6rem;
  font-family: var(--swui-font-primary);
  color: var(--core-blue);
}

.row {
  display: flex;
  flex-direction: row;

  &.spaceBetween {
    justify-content: space-between;
  }

  &.center {
    justify-content: center;
  }

  &.alignCenter {
    align-items: center;
  }
}


.buttonRow {
  display: flex;
  flex-direction: row-reverse;
  gap: calc(var(--swui-metrics-indent) * 3);

  @media (max-width: 768px) {
    flex-direction: column;
    width: 100%;
  }

  .button {
    flex: 1;
  }
}


.gap2 {
  gap: 16px;
}

hr {
  border: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  background: var(--silver-light)
}

ul {
  display: flex;
  flex-direction: column;
  gap: calc(var(--swui-metrics-indent) * 2);
  padding: 0;
  margin: 0;
}

.box {
  display: flex;
  
  &.column {
    flex-direction: column;
  } 
}

.box ul {
  text-align: left;
  gap: calc(var(--swui-metrics-indent));
}

.iconWithText {
  gap: 16px;
  align-items: center;
}

.circledIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 99px;

  background: var(--silver-lighter);

  &.white {
    background: white;
  }
}

.button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;

  @media (max-width: 768px) {
    width: 100%;
  }

  .text {
    white-space: nowrap;
  }

  .buttonIcon {
    height: 2.0rem;

    &.left {
      padding-right: 8px;
    }

    &.right {
      padding-left: 8px;
    }
  }

  &.medium {
    font-size: 1.6rem;
    min-height: 40px;
    padding: 8px 24px;
  }

  &.large {
    font-size: 1.8rem;
    min-height: 48px;
    padding: 8px 24px;
  }

  &.primary {

    border: 0;
    background: var(--action-primary-color);

    & span {
      color: white;
    }

    &:hover {
      background: var(--action-primary-color-hover);
    }

    &:active {
      background: var(--action-primary-color-active);
    }

    &:focus {
      background: var(--action-primary-color-focus);
    }
  }

  &.secondary {
    color: var(--core-blue);
    border: 1px solid var(--silver-light);
    background: var(--moln);

    &:hover {
      background: var(--molnigare);
    }

    &:active {
      background: var(--molnigare);
    }

    &:focus {
      background: var(--molnigare);
    }
  }

  &.footer {
    color: var(--tjara);
    background: var(--moln);
    border: 1px solid var(--silver-light);
    gap: 16px;
    min-height: 40px;
    border-radius: 999px;

    & span {
      font-size: 1.6rem;
      font-weight: 400;
    }

    .buttonIcon {
      border-radius: 50%;
      color: var(--hav);
      padding: var(--swui-metrics-space);
      background: var(--silver-lighter);
    }

    &:hover {
      background: var(--molnigare);
    }

    &:active {
      background: var(--molnigare);
    }

    &:focus {
      background: var(--molnigare);
    }
  }

  &.flat {
    color: var(--core-blue);
    border: none;
    background: transparent;

    &:hover {
      background: var(--himmel);
    }

    &:active {
      background: var(--himmel);
    }

    &:focus {
      background: var(--himmel);
    }
  }


}

.focusOutline {
  --outline-color: var(--hav);
  --outline-radius: 99px;
  --outline-width: 3px;
  --outline-offset: -1px;

  /* border: 2px + offset: 1px */
  --sum-offset: calc(var(--outline-width) + var(--outline-offset));
  --total-offset: calc(0px - var(--sum-offset));

  position: relative;
  border-radius: var(--outline-radius);

  &:focus-visible::before {
    content: "";
    position: absolute;
    top: var(--total-offset);
    right: var(--total-offset);
    bottom: var(--total-offset);
    left: var(--total-offset);
    border: var(--outline-width) solid var(--outline-color);
    border-radius: var(--outline-radius);
  }
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 16px;

  .content {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    max-width: 576px;

    @media (max-width: 768px) {
      max-width: unset;
    }

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