body {
  hyphens: none;
}

/* Load custom TheWaveSans font family. */
@font-face {
  font-family: 'TheWaveSans';
  src: url('../../fonts/TheWaveSans-Regular.woff2') format('woff2'),
    url('../../fonts/TheWaveSans-Regular.woff') format('woff'),
    url('../../fonts/TheWaveSans-Regular.eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheWaveSans';
  src: url('../../fonts/TheWaveSans-Bold.woff2') format('woff2'),
    url('../../fonts/TheWaveSans-Bold.woff') format('woff'),
    url('../../fonts/TheWaveSans-Bold.eot');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Font */
  --font-sans: 'TheWaveSans', sans-serif;

  /* Additional gray to ensure contrast on the light gray background */
  --color--gray-40: hsl(var(--color--gray-hue), var(--color--gray-saturation), 40%);

  /* tokens for country themes */
  --color-white: #fff;
  --color-black: #000;
  --color-primary-black: #373737;
  --color-primary: #0032A0;
  /* text */
  --color-primary-light: #03C3F8;
  --color--primary-60: #03C3F8;
  /* list bullets */
  --color-secondary: #0F55F5;
  /* cards bg */
  --color-secondary-light: #EFF4FF;
  /* disclaimer box bg */
  --color-accent: #FFA902;
  --color--gold: #FFA902;
  /* tag uncomplete bg */
  --color-accent-complete: #50E69B;
  /* tag complete bg */
  --color--red: #BA1321;
  /* required */
  --color-inactive: #818181;
  /* inactive */
  --color-inactive-text: #cdcdcd;
  /* gray bg box strong text */
  --color-filled-form-input: #F0F0F0;
  /* form field filled bg  */
  --interaction-hover: linear-gradient(90deg, #0032A0 0.11%, #0F56F5 99.86%);
  /* hovers */
  --color-table-bg: #B7CCFC;
  /* pdf upload bg color */

  /* FONTS */
  --fs-60: clamp(1.75rem, 0.6024590163934427rem + 2.622950819672131vw, 3.75rem);
  --fs-56: clamp(2rem, 0.39655172413793105rem + 2.586206896551724vw, 3.5rem);
  --fs-45: clamp(1.5rem, 0.625rem + 1.8229166666666665vw, 2.8125rem);
  --fs-36: clamp(1.5rem, 1.069672131147541rem + 0.983606557377049vw, 2.25rem);
  --fs-32: clamp(1.5rem, 0.9666307857911733rem + 0.8611410118406888vw, 2rem);
  --fs-24: clamp(1.25rem, 1.1065573770491803rem + 0.32786885245901637vw, 1.5rem);
  --fs-20: clamp(1.125rem, 0.9027777777777778rem + 0.4629629629629629vw, 1.25rem);
}

.fs-60 {
  font-size: var(--fs-60);
}

.fs-56 {
  font-size: var(--fs-56);
}

.fs-45 {
  font-size: var(--fs-45);
}

.fs-36 {
  font-size: var(--fs-36);
}

.fs-32 {
  font-size: var(--fs-32);
  line-height: 1.4;
}

.fs-24 {
  font-size: var(--fs-24);
  font-weight: 700;
}

.fs-20 {
  font-size: var(--fs-20);
}

.fs-18 {
  font-size: 18px;
}

.text-blue {
  color: var(--color-primary);
}

.pt-16 {
  padding-top: 16px;
}

.pt-24 {
  padding-top: 24px;
}

a {
  &:focus {
    outline: 0;
    outline-offset: 0;
  }
}

h2 {
  margin-block: unset;
  margin-bottom: 24px;
}

p {
  font-size: 18px;
  margin: 0;
  margin-bottom: 16px;
}

.app-required label:after {
  content: '*';
  color: var(--color--red);
}

.region.region--hero:has(:nth-child(1)) {
  margin-bottom: 64px;
}

.region--below-hero:has(:nth-child(1):not(.hidden)) {
  margin-bottom: 32px;
}

.region--below-hero:has(:nth-child(2)) {
  >*:not(:last-child):not(.hidden) {
    margin-bottom: 32px;
  }
}


.blue-bg-hero {
  background: transparent linear-gradient(260deg, #50E69B -5%, #0F56F5 35%, #0032A0 80%) 0% 0% no-repeat padding-box;
  position: relative;
  overflow: hidden;
  padding-block: 8rem;

  .container {
    position: relative;
  }

  .bg-wave {
    position: absolute;
    top: 50%;
    transform: translate(50%, -48%);
    width: 150%;
    right: 50%;
    max-width: unset;
  }

  h1 {
    margin: 0;
    font-size: var(--fs-56);
    line-height: 1.125;
    color: var(--color-white);
    position: relative;
    z-index: 1;

    .page-title__step {
      font-size: var(--fs-20);
      display: block;
    }

  }
}

/* Disclaimer Box */
.bg-box,
.bg-box-small,
.paragraphs-features__delete-confirmation__message {
  padding: 32px 24px;
  background-color: var(--color-secondary-light);
  border-radius: 12px;
  border: 1px solid var(--color-table-bg);
}

.bg-box-can-close {
  position: relative;
  padding: 18px 24px 32px 24px;
}

.bg-box-can-close .box-title{
  margin-bottom:24px;
  font-weight:bold;
  font-size: 20px;
}

  .bg-box-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-primary);
    padding: 4px 8px;
  }

  .bg-box-small,
  .paragraphs-features__delete-confirmation__message {
    padding: 16px 24px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M6.25447 6.38452H7.75447V11H6.25447V6.38452ZM8.00446 4.5C8.00446 5.05227 7.55674 5.5 7.00446 5.5C6.45219 5.5 6.00446 5.05227 6.00446 4.5C6.00446 3.94772 6.45219 3.5 7.00446 3.5C7.55674 3.5 8.00446 3.94772 8.00446 4.5ZM13.8249 9.10898C13.4246 11.5193 11.5193 13.4246 9.10896 13.8249C8.40598 13.9416 7.70298 14 7.00001 14C6.297 14 5.59403 13.9416 4.89103 13.8249C2.48075 13.4246 0.575412 11.5193 0.175118 9.10898C-0.0583725 7.70301 -0.0583725 6.297 0.175118 4.89102C0.575418 2.48074 2.48075 0.575445 4.89103 0.175145C5.59394 0.05838 6.2971 0 7.00001 0C7.61057 0 8.22092 0.044005 8.83149 0.13208C11.4572 0.510775 13.4892 2.54284 13.8679 5.16852C14.0574 6.48199 14.043 7.79547 13.8249 9.10898ZM12.3833 5.38263C12.0993 3.41406 10.5859 1.90063 8.61738 1.61673C8.08042 1.53927 7.53629 1.5 7.00025 1.5C6.38242 1.5 5.75544 1.55212 5.13679 1.65484C3.35078 1.95147 1.95148 3.35077 1.65485 5.13678C1.44953 6.37311 1.44953 7.62689 1.65485 8.86322C1.95148 10.6492 3.35078 12.0485 5.13679 12.3451C5.7555 12.4479 6.38239 12.5 7.00001 12.5C7.61762 12.5 8.24448 12.4479 8.8632 12.3451C10.6492 12.0485 12.0485 10.6492 12.3451 8.86322C12.537 7.70819 12.5498 6.53717 12.3833 5.38263Z' fill='%230032A0'/></svg>");
    background-repeat: no-repeat;
    background-position: 24px center;
    background-size: 14px;
    padding-left: 54px;
    line-height: 1.4;

    p {
      margin: 0;
      color: var(--color-primary);
    }
  }

  ul.blue-marker-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    line-height: 1.4;

    li {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        min-width: 8px;
        min-height: 8px;
        max-width: 8px;
        max-height: 8px;
        margin: 0.7ch 1ch 0 -2ch;
        border-radius: 50%;
        background-color: var(--color-primary-light);
      }

      p {
        display: inline;
      }

    }
  }

  .d-none {
    display: none;
  }

  /* Main Block Aside and Form */
  .steps-progress-wrapper {
    background: #fff;
    width: 100%;
    padding-bottom: 24px;
    box-shadow: 0 6px 6px rgba(255, 255, 255, 0.7);
    z-index: 2;
  }

  .steps-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    color: var(--color-primary);

    .steps-percent {
      font-weight: 700;
    }
  }

  .steps-progress-bar {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 999px;
    overflow: hidden;
  }

  .steps-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width .3s ease;
  }

  .user-application-nodes-block {
    .steps-item {
      padding: 24px;
      background: transparent;
      border-radius: 12px;
      border: 1px solid var(--color-secondary);
      color: var(--color-primary);
      min-height: 153px;
      display: flex;

      &::before {
        content: unset;
      }

      a {
        width: 100%;
        text-decoration: none;
        color: var(--color-primary);

        &:hover {
          .steps-edit {
            color: var(--color-secondary);

            svg {
              fill: var(--color-primary);
            }
          }
        }

        &:focus,
        &:focus-visible {
          outline: none;
        }
      }

      .steps {
        display: flex;
        flex: 1;
        gap: 16px;
        height: 100%;
      }

      .step-number {
        width: 48px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        background: transparent;
        color: var(--color-primary);
      }

      .steps-content {
        display: grid;
        grid-template-columns: 1fr auto;
        row-gap: 24px;
        column-gap: 16px;
        width: 100%;
        height: 100%;
        font-size: var(--fs-20);
        font-weight: 400;
        line-height: 1.35;
      }

      .steps-title {
        grid-column: 1 / -1;
      }

      .steps-edit {
        color: var(--color-primary);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.25;
        text-decoration: none;
        display: inline-flex;
        gap: 8px;
        transition: color .3s ease;
        align-self: end;

        span {
          border-bottom: 2px solid var(--color-primary);
        }
      }

      .steps-progress {
        justify-self: end;
        align-self: end;
        background: var(--color-accent);
        padding: 4px 10px;
        border: 1px solid var(--color-black);
        border-radius: 56px;
        color: var(--color-black);
        font-size: 12px;
        line-height: 1.59;
        font-weight: 400;

        &.completed {
          background: var(--color-accent-complete);
          border-color: var(--color-primary);
          color: var(--color-primary);
        }
      }

      &.active {
        background: var(--color-secondary);
        color: var(--color-white);

        a {
          color: var(--color-white);
          pointer-events: none;
        }

        .step-number {
          border: 1px solid var(--color-white);
          background: var(--color-white);
        }

        .steps-edit {
          opacity: 0;
        }
      }
    }

    .steps-item+.steps-item {
      margin-top: 24px;
    }
  }

  .step-submit-application {
    padding: 24px;
    background: var(--color-inactive);
    border-radius: 12px;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    position: relative;


    a {
      display: flex;
      justify-content: space-between;
      text-decoration: none;
      color: var(--color-inactive-text);
      font-size: var(--fs-20);
      line-height: 1.25;
      pointer-events: none;
    }

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

      a {
        color: var(--color-white);
        pointer-events: all;

        &:before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }


    }
  }

  @media (min-width:992.000001px) {

    #block-drupal-cms-olivero-userapplicationstepsblock,
    #block-drupal-cms-olivero-userapplicationstepsblock>div,
    .user-application-nodes-block {
      height: 100%;
    }

    .steps-progress-wrapper {
      position: sticky;
      top: 12px;
      box-shadow: 0 10px 18px 2px rgba(255, 255, 255, 0.8);
    }

    .steps-progress-wrapper:before {
      content: '';
      position: absolute;
      height: 12px;
      top: 0;
      left: 0;
      right: 0;
      transform: translateY(-100%);
      background: var(--color-white);
    }

    .steps-item.active {
      position: sticky;
      top: 82px;
      z-index: 2;
      box-shadow: 0 10px 20px 2px rgba(255, 255, 255, 0.9);
    }

    .step-submit-application {
      position: sticky;
      top: 262px;
    }

  }

  .main-with-sidebar {
    display: flex;
    justify-content: center;
    gap: 62px;
  }

  .main-with-sidebar .site-main {
    max-width: none;
  }


  .region.region--sidebar {
    max-width: 384px;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 128px;
  }

  .site-main {
    max-width: 720px;
    margin-left: auto;
    width: 100%;
  }

  .messages {
    background-color: var(--color-white);
    border-radius: 12px;
    color: var(--color-black);
    border: 1px solid var(--color-primary);
    border-bottom-width: 4px;

    a {
      color: var(--color-black);
    }
  }

  .messages--error {
    border-color: var(--color--red);
  }

  .messages--warning {
    border-color: var(--color-accent);
  }

  .messages--status {
    border-color: var(--color--green);
  }

  .messages--info {
    border-color: var(--color-primary-light);
  }

  .messages__content {
    color: var(--color-primary-black);
  }

  @media (max-width: 992px) {
    .blue-bg-hero {
      padding-block: 6rem;
    }

    .user-application-nodes-block {

      .js-steps-item-wrapper {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 16px;
        margin-bottom: -16px;
      }

      .steps-item {
        margin-top: 0 !important;
        padding: 18px;
        min-width: 180px;
        max-width: 180px;

        .steps {
          flex-direction: column;
        }

        .step-number {
          width: 32px;
          height: 32px;
        }

        .steps-edit {
          display: none;
        }
      }

    }

    .main-with-sidebar {
      flex-direction: column;
      gap: 0;
    }

    .region.region--sidebar {
      margin-bottom: 34px;
    }

    .region.region--sidebar,
    .site-main {
      max-width: 100%;
    }
  }

  @media (max-width: 768px) {
    .blue-bg-hero {
      padding-block: 4rem;
    }

    .bg-wave {
      width: 350%;
    }
  }

  /* HOMEPAGE */
  .page-content {
    margin-block: 64px;
  }

  .homepage-title {
    color: var(--color-primary);
    font-size: var(--fs-45);
    line-height: 1.1;
    width: 60%;
    margin: 0 0 24px;
    text-align: left;
  }

  .page-text {
    --arrow-color: var(--color-accent-complete);
    padding-left: 150px;
    position: relative;

    p {
      color: var(--color-primary);
    }
  }

  .page-arrow {
    position: absolute;
    left: 40px;
    top: 0;
    width: 80px;
    height: auto;
    color: var(--arrow-color);
  }

  .page-link {
    margin-top: 24px;

    a {
      color: var(--color-primary);
      display: flex;
      gap: 8px;
      font-size: 20px;
      font-weight: 600;
    }
  }

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

    .page-text {
      padding-left: 90px;
    }

    .page-arrow {
      width: 78px;
      left: 0;
    }
  }

  @media (max-width: 480px) {
    .page-text {
      padding-left: 0;
    }

    .page-arrow {
      display: none;
    }
  }

  /* Login/Register Block */
  .block__login {
    background-color: #F7F4EF;
    padding: 50px 0 80px;
  }

  .login-register {
    padding-inline: 150px;
  }

  .registration-terms--participation {
    margin-bottom: 24px;
  }

  @media (max-width: 768px) {
    .login-register {
      padding-inline: 80px;
    }
  }

  @media (max-width: 480px) {
    .login-register {
      padding-inline: 0;
    }
  }

  .login-register-tlt {
    color: var(--color-primary);
    font-size: var(--fs-32);
    line-height: 35.7143px;
    line-height: clamp(35.7143px, 22.8571px + 1.2345vw, 45.7143px);
    font-weight: 700;
  }

  .login-actions {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 40px;

    .button {
      min-width: 333px;
      justify-content: center;
      margin-inline-end: 0;
    }
  }

  @media (max-width: 991px) {
    .login-actions {
      flex-direction: column;

      .button {
        min-width: 100%;
      }
    }
  }

  /* More Info Block */
  .block__more-info {
    background: transparent linear-gradient(260deg, #50E69B -5%, #0F56F5 35%, #0032A0 80%) 0% 0% no-repeat padding-box;
    min-height: 366px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    .container {
      position: relative;
      min-height: 366px;
      width: 100%;
      display: flex;
      align-items: center;
    }
  }

  .bg-wave--more-info {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -48%);
    width: 150%;
    height: auto;
    max-width: none;
    pointer-events: none;
  }

  .contact-icon--more-info {
    display: none;
    pointer-events: none;
  }

  @media (min-width: 992px) {
    .contact-icon--more-info {
      display: block;
      position: absolute;
      top: 50%;
      left: 75%;
      right: auto;
      transform: translate(-50%, -50%);
      width: clamp(140px, 12vw, 184px);
      height: auto;
      z-index: 1;
    }
  }

  @media (max-width: 768px) {
    .bg-wave--more-info {
      width: 350%;
    }
  }

  .more-info {
    max-width: 480px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;

    span {
      display: inline-block;
      margin-bottom: 40px;
      color: var(--color-white);
      font-size: var(--fs-24);
      font-weight: bold;
    }
  }

  .more-info-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;

    .button {
      min-width: 193px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 400;
    }
  }

  @media (max-width: 991px) {
    .more-info {
      max-width: 100%;

      span {
        text-align: center;
      }
    }

    .more-info-actions {
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .more-info-actions {
      gap: 24px;

      .button {
        width: 100%;
        margin: 0;
      }
    }
  }

  /* FAQS */
  .faqs-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .faq {
    cursor: pointer;
  }

  .faq-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    p {
      margin: 0 0 15px;
      color: var(--color-primary);
      font-size: 18px;
      font-weight: 700;
      transition: color .3s ease;
    }

    a {
      color: var(--color-primary);
    }

    &::after {
      content: "+";
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid var(--color-primary);
      color: var(--color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      transition: transform 0.3s ease, border-color .3s ease, color .3s ease;
      flex-shrink: 0;
    }
  }

  .faq-text {
    color: var(--color-black);
    margin: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.35s ease, opacity 0.25s ease;

    a {
      color: var(--color-black);
    }
  }

  .faq.is-open {
    .faq-title {

      p,
      a {
        color: var(--color-secondary);
      }
    }

    .faq-title::after {
      transform: rotate(45deg);
      border-color: var(--color-secondary);
      color: var(--color-secondary);
    }

    .faq-text {
      opacity: 1;
    }
  }


  .node--type-front-page {
    >img {
      display: block;
      margin: 0 auto;
    }
  }




  .ui-dialog .ui-dialog-titlebar {
    background: var(--color-primary);
    padding: 18px;
    border-radius: 6px;
    border: 0;
  }

  .ui-dialog .ui-dialog-titlebar h1 {
    color: #fff;
  }

  .ui-dialog-titlebar-close {
    margin-right: 10px !important;
  }

  .ui-dialog .ui-dialog-content {
    padding: 20px;
  }

  .ui-widget-content p {
    text-align: center;
  }


  .ui-dialog {
    & .ui-dialog-buttonpane {
      & .ui-dialog-buttonset {
        display: flex;
        float: none;
        flex-direction: column;
        gap: 12px;
      }
    }
  }


  .ui-dialog-buttonset button {
    display: flex;
    flex-direction: column;
  }

  /* Make the button area look intentional */
  .ui-dialog .ui-dialog-buttonpane {
    padding: 16px 24px 20px;
  }

  .ui-dialog .ui-dialog-buttonset {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    width: 100%;
  }

  /* Consistent sizing */
  .ui-dialog .ui-dialog-buttonset .ui-button {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font-weight: 600;
  }

  /* Secondary: outline/neutral */
  .ui-dialog .ui-dialog-buttonset .button:not(.button--primary):not(.button--danger) {
    background: #fff;
    border: 2px solid currentColor;
    /* keeps your existing blue */
  }

  /* Danger: reduce emphasis (text-like) */
  .ui-dialog .ui-dialog-buttonset .button--danger {
    background: transparent;
    border: 0;
    min-height: 40px;
    /* smaller to reduce weight */
    padding: 8px 10px;
    box-shadow: none;
    text-decoration: underline;
    align-self: center;
    /* visually separates it */
    width: auto;
    /* prevents it looking like a big CTA */
  }

  /* Optional: add breathing room before the discard action */
  .ui-dialog .ui-dialog-buttonset .button--danger {
    margin-top: 6px;
  }


  #email-confirmer-response .form-boolean-group {
    padding-top: 30px;
  }

  #email-confirmer-response #edit-actions {
    justify-content: flex-start;
  }

  #email-confirmer-user-email-change-cancel #edit-actions {
    margin-top: 30px;
    justify-content: flex-start;
    gap: 16px;
  }

  #user-pass-reset #edit-pass>.form-item__label {
    font-size: var(--fs-24);
    margin-bottom: 28px;
  }


  #user-pass-reset>p:nth-child(2) {
    display: none;
  }


  .user-register-form.user-form [id^='edit-pass--description'] {
    display: none;
  }