/* Mobile / tablet header navigation (width < 1200px) */

@media (width < 1200px) {
  .body-header-overlay::before {
    z-index: var(--z-index-header-overlay);
  }

  .header-navigation-section .navigation-pill-container {
    position: fixed;
    width: max-content !important;
    left: 50%;
    bottom: var(--Header-Vertical-Padding, 24px);
    transform: translateX(-50%);
    z-index: var(--z-index-header-navigation);
    box-shadow: var(--Drop-Shadow-100);
  }

  .body-header-overlay .header-navigation-section .navigation-pill-container {
    z-index: var(--z-index-header-navigation);
  }

  .section.header-logo-container,
  .section.header-navigation-section-container,
  .section.header-utilities-section-container {
    padding-block: var(--Header-Vertical-Padding, 16px);
    padding: var(--Header-Vertical-Padding, 16px) var(--Header-Horizontal-Padding-M-Tp, 16px);
  }

  .header-sticky-gradient::before {
    content: none;
    opacity: 0;
  }

  .header-navigation-section-wrapper {
    width: unset;
    position: unset;
    margin: unset;
    padding: var(--Header-Vertical-Padding-Tp-M, 16px) var(--Header-Horizontal-Padding-M-Tp, 16px);
    display: block;
    transform: unset;

    &:has(.header-box-container.is-open),
    &:has(.header-box-container.is-closing) {
      z-index: var(--z-index-header-dropdown);
    }
  }

  .navigation-pill-container .navigation-pill-wrapper:nth-child(n+3) {
    display: none;
  }

  body[data-section='aziende'] .navigation-pill-container .navigation-pill-wrapper:nth-child(n+2) {
    display: none;
  }

  .header-navigation-section .navigation-pill-container:has(.header-box-container.is-open .quote-tool-cont) {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0;
  }

  .header-navigation-section
    .navigation-pill-container:has(.header-box-container.is-open .quote-tool-cont)
    > .navigation-pill-wrapper {
    display: none;
  }

  .header-box-content {
    display: flex;
    background-color: transparent;
    padding: unset;
    border-radius: unset;
    width: 100%;
  }

  .header-box-content .header-box-wrapper {
    background-color: var(--Quote-Tool-Full-Quote-Tool-Background, #F9F9F7);
    border-radius: var(--Quote-Tool-Radius, 16px);
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;

    &:has(> .item-menu-wrapper) {
      display: flex;
      flex-flow: column nowrap;
      padding: 0 var(--Navigation-Menu-Widget-Horizontal-Padding, 1rem);
      justify-content: flex-start;
      align-items: flex-start;
      align-self: stretch;
      background-color: var(--Category-Menu-Navigation-Background, var(--Background-Neutral-Subtle-Fixed, #f9f9f7));
      border-radius: unset;
      gap: var(--Navigation-Menu-Widget-Gap-Link, 1.5rem);
      overflow-y: clip;

      & > .item-menu-wrapper {
        display: flex;
        order: 1;
      }

      & > .highlight-list-menu-wrapper {
        display: flex;
        order: 2;
        align-self: flex-start;
        flex: 0 0 33%;
      }

      & > .category-link-button-wrapper {
        order: 3;
        flex: 0 0 100%;
      }

      & .item-menu-cont {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Navigation-Menu-Widget-Gap-Link, 1.5rem);

        & .item-menu-container {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: var(--Navigation-Menu-Widget-Gap-Link, 1.5rem);

          & .item-menu-content {
            & .item-menu-title {
              font: var(--Subtitle-Manrope-Fixed);
              letter-spacing: -0.015rem;
              text-decoration-line: none;
              text-decoration-style: unset;
            }

            & .item-menu-text { display: none; }
          }
        }
      }

      @media (width < 768px) {
        gap: var(--Nav-Link-List-Content-Gap, 1.5rem);

        & .item-menu-cont {
          gap: var(--Nav-Link-List-Content-Gap, 1.5rem);

          & .item-menu-container {
            gap: var(--Nav-Link-List-Content-Gap, 1.5rem);

            & .item-menu-content .item-menu-title {
              font: var(--Heading-Fixed);
              letter-spacing: -0.015rem;
            }
          }
        }
      }
    }
  }

  .header-box-container {
    display: flex;
    flex-direction: column;
    gap: var(--Header-Vertical-Gap-M, 8px);
    align-items: center;
    bottom: 120%;
    top: unset;
    left: 50%;
    transform: translateX(-50%);
    width: min(30.625rem, calc(100vw - 2rem));

    &:not(.is-open, .is-closing) {
      max-height: 0;
      min-height: 0;
      height: 0;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      pointer-events: none;

      .header-box-content,
      .header-box-wrapper,
      .quote-tool-cont {
        max-height: 0;
        min-height: 0;
        overflow: hidden;
        opacity: 0;
      }
    }

    @media (width < 768px) {
      width: calc(100vw - 2rem);
    }

    @media (768px <= width) and (orientation: landscape) {
      &.is-open:is(.is-homepage-quote-tool, :has(.quote-tool-cont)) {
        width: min(52.5rem, calc(100vw - 2rem));
      }
    }

    button.un-close-btn {
      flex: 0 0 auto;
      align-self: center;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid var(--Icon-Button-Secondary-Default-Border);
      border-radius: var(--Header-Radius);
      background: var(--Header-Background);
      padding: var(--P04, 4px);
      margin: 0;
      height: unset;
      width: unset;
      position: unset;

      span {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: unset;
        font-size: var(--Icon-S);
        background: var(--Icon-Button-Secondary-Default-Background);
        border-radius: var(--Button-Radius-Default, 24px);
        padding: var(--Space-250-12);
        height: var(--Icon-Button-Dimentions);
        width: var(--Icon-Button-Dimentions);
      }
    }

    &.is-closing {
      min-height: 0 !important;
      max-height: none !important;
      gap: 0;
      pointer-events: none;
      transition: height 0.45s ease, opacity 0.45s ease;

      .header-box-content {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden;
        transition: opacity 0.45s ease;
      }

      .header-box-wrapper {
        min-height: 0 !important;
        max-height: none !important;
      }

      button.un-close-btn {
        display: none !important;
      }
    }

    &:is(.is-open, .is-closing) {
      visibility: visible;
      pointer-events: auto;

      &:is(.is-homepage-quote-tool, :has(.quote-tool-cont)) {
        --quote-tool-mobile-box-min-height: min(22.5rem, calc(100dvh - 9rem));
        --quote-tool-mobile-wrapper-min-height: min(18.75rem, calc(100dvh - 9rem - 3.5rem));
        --quote-tool-mobile-wrapper-max-height: calc(100dvh - 9rem - 3.5rem);

        height: auto;
        min-height: var(--quote-tool-mobile-box-min-height);
        max-height: calc(100dvh - 9rem);

        .header-box-content {
          flex: 1 1 auto;
          height: auto;
          min-height: 0;
          max-height: none;
          overflow: hidden;

          .header-box-wrapper {
            flex: 1 1 auto;
            min-height: var(--quote-tool-mobile-wrapper-min-height);
            max-height: var(--quote-tool-mobile-wrapper-max-height);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
          }

          .quote-tool-cont {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: var(--quote-tool-mobile-wrapper-min-height);
            overflow: clip visible;
          }

          .quote-tool-cont .switch-text-cont,
          .quote-tool-cont .panel-title {
            flex: 0 0 auto;
          }

          .quote-tool-cont .full-quote-cont,
          .quote-tool-cont #quote-panel-left:not([hidden]) {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
          }

          .quote-tool-cont .quote-tool-root-container {
            flex: 1 1 auto;
            min-height: 0;
          }
        }

        @media (width < 768px) {
          --quote-tool-mobile-box-min-height: min(28.75rem, calc(100dvh - 7rem));
          --quote-tool-mobile-wrapper-min-height: min(25rem, calc(100dvh - 7rem - 3rem));
          --quote-tool-mobile-wrapper-max-height: calc(100dvh - 7rem - 3rem);

          min-height: var(--quote-tool-mobile-box-min-height);
          max-height: calc(100dvh - 7rem);
          transform: translateX(-50%);
        }

        /* iPhone Pro Max (~430px) and similar large phones */
        @media (width < 480px) {
          --quote-tool-mobile-box-min-height: min(31.25rem, calc(100dvh - 6rem));
          --quote-tool-mobile-wrapper-min-height: min(25.5rem, calc(100dvh - 6rem - 2.875rem));
          --quote-tool-mobile-wrapper-max-height: calc(100dvh - 6rem - 2.875rem);

          min-height: var(--quote-tool-mobile-box-min-height);
          max-height: calc(100dvh - 6rem);
        }

        @media (width < 390px), (height <= 700px) {
          --quote-tool-mobile-box-min-height: min(30rem, calc(100dvh - 5.5rem));
          --quote-tool-mobile-wrapper-min-height: min(24.25rem, calc(100dvh - 5.5rem - 2.75rem));
          --quote-tool-mobile-wrapper-max-height: calc(100dvh - 5.5rem);

          min-height: var(--quote-tool-mobile-box-min-height);
          max-height: calc(100dvh - 2rem);
        }
      }

      &:not(:is(:has(.quote-tool-cont), :has(.contact-tool)), .is-homepage-quote-tool) {
        height: min(50rem, calc(100vh - 9rem));
        min-height: min(50rem, calc(100vh - 9rem));
      }

      &:has(.contact-tool) {
        max-height: calc(100dvh - 9rem);

        .header-box-content {
          flex: 1 1 auto;
          min-height: 0;
          overflow: hidden;

          .header-box-wrapper {
            flex: 1 1 auto;
            min-height: 0;
            max-height: calc(100dvh - 9rem - 3.5rem);
            overflow-y: auto;
          }
        }

        @media (width < 768px) {
          max-height: calc(100dvh - 7rem);

          .header-box-content .header-box-wrapper {
            max-height: calc(100dvh - 7rem - 3rem);
          }
        }

        @media (width < 390px), (height <= 700px) {
          max-height: calc(100dvh - 2rem);

          .header-box-content .header-box-wrapper {
            max-height: calc(100dvh - 5.5rem);
          }
        }
      }

      &:not(:has(.quote-tool-cont), .is-homepage-quote-tool) .header-box-content {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;

        .header-box-wrapper {
          flex: 1 1 auto;
          min-height: 0;
        }
      }

      &:is(.is-homepage-quote-tool, :has(.quote-tool-cont)).is-homepage-quote-tool:not(:has(.quote-tool-cont)) .header-box-content .header-box-wrapper {
        flex: 1 1 auto;
        min-height: var(--quote-tool-mobile-wrapper-min-height);
        max-height: var(--quote-tool-mobile-wrapper-max-height);
      }
    }
  }

  .header-box-container:not(.is-open) button.un-close-btn {
    display: none !important;
  }

  .aziende-background .header-box-container button.un-close-btn {
    background: rgb(0 28 53 / 75%);
  }

  .second-pill-right-icon {
    display: block !important;
    opacity: 1 !important;
  }

  .mobile-nav-hidden-pills {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: var(--Navigation-Menu-Widget-Gap-Link, 24px);
    align-items: flex-start;
    width: 100%;

    .mobile-nav-item {
      width: 100%;

      .navigation-pill {
        padding: 0;
        background: none;
        width: unset;
        height: unset;
      }

      button.navigation-pill {
        display: flex;
        justify-content: space-between;
        width: 100%;
        color: var(--Nav-Link-List-Text, #001C35);
        font: var(--Subtitle-Manrope);
      }

      a.navigation-pill {
        display: flex;
        justify-content: space-between;
        width: 100%;
        color: var(--Link-Button-Link-Default-Text, #001C35);
        font: var(--Single-Line-Body-Link);
        padding: 0;
      }

      & span.icon.icon-small {
        font-size: var(--Icon-M);
      }
    }
  }

  .section.header-logo-container.header-navigation-section-container.header-mobile-sticky {
    position: fixed;
    z-index: var(--z-index-header-navigation);
    padding-top: var(--Header-Vertical-Padding-Tp-M, 16px);
    background: linear-gradient(180deg, var(--Unipol-Azure-Blue-800, rgb(0 28 53 / 80%)) 0%, var(--Core-Null-000, rgb(17 17 17 / 0%)) 100%);
  }

  .header-hamburger-overlay .section.header-logo-container.header-navigation-section-container.header-mobile-sticky {
    background: var(--Header-Background-Container-Privati, #001C35);

    &[data-unipol-header-color="header-aziende-background"] {
      background: var(--Unipol-Grayscale-700, #63727D);
    }
  }

  .header-logo-wrapper,
  .header-utilities-section-wrapper {
    opacity: 1;
    transition: transform 550ms ease, opacity 450ms ease;
  }

  .header-mobile-sticky .header-logo-wrapper,
  .header-mobile-sticky .header-utilities-section-wrapper {
    transform: none;
    opacity: 1;
  }
}

@media (width < 768px) {
  .mobile-nav-hidden-pills {
    .mobile-nav-item {
      a.navigation-pill {
        display: flex;
        justify-content: space-between;
        width: 100%;
        color: var(--Link-Button-Link-Default-Text, #001C35);
        font: var(--Single-Line-Body-Link);
        padding: 0;
      }

      & span.icon.icon-small {
        font-size: var(--Icon-S);
      }

      button.navigation-pill {
        & span.icon {
          font-size: var(--Icon-S);
        }
      }
    }
  }
}