@import url("../../scripts/libs/ds/components/atoms/tag/tag.css");

/*
 * Reserved heights for quote tool layout (CLS).
 * Referenced by header navigation (via var fallbacks), preventivatore skeleton, and block styles.
 */
:root {
  --quote-tool-desktop-wrapper-min-height: 13.5rem;
  --quote-tool-desktop-box-min-height: 22.5rem;
}

@media (width < 1200px) {
  :root {
    --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);
  }

  @media (width < 768px) {
    :root {
      --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);
    }
  }

  @media (width < 480px) {
    :root {
      --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);
    }
  }

  @media (width < 390px), (height <= 700px) {
    :root {
      --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);
    }
  }
}

.quote-tool-cont {
  box-sizing: border-box;
  width: 100%;
  padding: var(--Quote-Tool-Full-Quote-Tool-Padding, 1rem);
  border-radius: var(--Quote-Tool-Radius, 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--Quote-Tool-Gap-D-Ds-Tp, 1.5rem);
  background-color: var(--Quote-Tool-Full-Quote-Tool-Background, #F9F9F7);

  & .full-quote-cont {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  & [role="tabpanel"] {
    min-width: 0;
  }

  & .options-list-visible {
    background-color: var(--Quote-Tool-Full-Quote-Tool-Background, #F9F9F7);
  }

  & .preventivatore-skeleton {
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: none;
  }

  & #quote-panel-left:not([hidden]),
  & #quote-panel-center:not([hidden]),
  #quote-panel-right:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--Quote-Tool-Gap-D-Ds-Tp, 1.5rem);

    @media (width >= 1200px) {
      & .quote-tool-root-container {
        min-height: var(--quote-tool-desktop-wrapper-min-height, 13.5rem);
      }
    }
  }

  & .panel-title {
    font: var(--Subtitle-Manrope);
  }

  & .panel-left-desc {
    font: var(--Body-Base);
  }

  & .quote-tool-carousel-container {
    max-width: 100%;
    overflow: visible;

    & .scroll-indicator {
      margin-top: 1.5rem;

      & .left-icon-button, .right-icon-button {
        display: none;
      }

      & .expanding-dots {
        left: 50%;
        transform: translate(-50%);

        & .third-dot {
          left: 1.5rem;
        }
      }
    }
  }

  /*
   * Floating labels — Figma "Label Input Field / Type=Primary"
   * Quote-tool background is Primary Fixed; overrides Secondary from inputs.css.
   */
  & .input-container {
    &.has-value > label,
    .input:is(input, textarea):not(:placeholder-shown) + label,
    .input:is(input, textarea):focus + label {
      top: 0;
      transform: translateY(-50%);
      font: var(--Body-Extra-Small);
      padding: var(--Label-Input-Fields-Vertical-Padding, 0)
        var(--Input-Fields-Label-Padding, 4px);
      background-color: var(
        --Label-Input-Fields-Primary-Background,
        #f9f9f7
      );
      border-radius: var(--Label-Input-Fields-Radius, 4px);
      color: var(--Label-Input-Fields-Primary-Text, #001c35);
    }
  }

  & .info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    align-self: stretch;

    & .full-quote-recupera-preventivo-form {
      display: flex;
      align-items: flex-start;
      gap: var(--Quote-Tool-Horizontal-Gap, 0.5rem);
      align-self: stretch;

      & .input-main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Input-Fields-Vertical-Gap, 0.25rem);
        flex: 1 0 0;
      }
    }
  }

  & .quote-tool-container-cards {
    display: flex;
    align-items: flex-start;
    gap: var(--Quote-Tool-Full-Quote-Tool-Card-Gap, 0.5rem);
    align-self: stretch;
    overflow: visible;

    & .quote-tool-cards-slide {
      max-width: 25rem;
      flex-shrink: unset;
    }

    & .quote-tool-card {
      display: flex;
      padding: var(--Card-Quote-Tool-Card-Padding, 1.5rem);
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      align-self: stretch;
      border-radius: var(--Card-Quote-Tool-Card-Radius, 1rem);
      background: var(--Card-Quote-Tool-Card-Summary-Background, #FFF);
      box-shadow: var(--Drop-Shadow-100);

      & .quote-tool-card-content {
        font: var(--Body-Base);

        h1, h2, h3, h4, h5, h6 {
          font: var(--Single-Line-Body-Link);
          margin-bottom: 0.25rem;
        }
      }

      & .button-group {
        width: 100%;

        & .btn {
          width: 100%;
        }
      }
    }

    & .quote-tool-bundle-card {
      display: flex;
      padding: var(--Card-Quote-Tool-Card-Padding, 1.5rem);
      flex-direction: column;
      align-items: flex-start;
      gap: var(--Card-Quote-Tool-Card-Bundle-Gap, 1rem);
      align-self: stretch;
      border-radius: var(--Card-Quote-Tool-Card-Radius, 1rem);
      border: var(--Stroke-100-1, 1px) solid var(--Card-Quote-Tool-Card-Bundle-Border, #DFE2E5);
      background: var(--Card-Quote-Tool-Card-Bundle-Background, rgb(17 17 17 / 0%));

      & .quote-tool-bundle-card-text-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Card-Quote-Tool-Card-Text-Gap, 0.25rem);
        align-self: stretch;

        & .quote-tool-bundle-card-label {
          color: var(--Card-Quote-Tool-Card-Bundle-Secondary-Text, #63727D);
          font: var(--Overline);
        }

        & .quote-tool-bundle-card-title {
          align-self: stretch;
          color: var(--Card-Quote-Tool-Card-Text, #001C35);
          font: var(--Single-Line-Body-Link);
        }

        & .quote-tool-bundle-card-desc {
          align-self: stretch;
          color: var(--Card-Quote-Tool-Card-Text, #001C35);
          font: var(--Body-Base);
        }
      }

      & .quote-tool-bundle-card-category-cont {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Card-Bundle-Card-Gap-Category-Strip, 0.5rem);
        align-self: stretch;
      }

      & .quote-tool-bundle-card-note {
        color: var(--Card-Quote-Tool-Card-Bundle-Secondary-Text, #63727D);
        font: var(--Body-Small);
        align-self: stretch;
      }
    }
  }
}

/* Mobile */
@media (width < 1200px) {
  .quote-tool-cont {
    width: 100%;
    max-width: 100%;
    overflow: clip visible;

    & .switch-text-cont {
      max-width: 100%;
      overflow: hidden;
    }

    & #quote-panel-left:not([hidden]),
    & #quote-panel-center:not([hidden]),
    & #quote-panel-right:not([hidden]) {
      gap: var(--Quote-Tool-Gap-M, 1.25rem);
    }

    & .quote-tool-root-container {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      min-height: var(--quote-tool-mobile-wrapper-min-height, 18.75rem);
    }

    & .quote-tool-root-container > div {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: inherit;
    }

    & .preventivatore-skeleton {
      display: flex;
      flex-direction: column;
      flex: 0 1 auto;
      align-items: stretch;
      min-height: 0;
      max-height: none;
      padding: 0;
      margin: 0;
      overflow: visible;
      gap: var(--Quote-Tool-Info-Gap, 1.25rem);
    }

    & .preventivatore-skeleton .skeleton-category-list {
      flex: 0 0 auto;
      flex-wrap: nowrap;
      gap: var(--Quote-Tool-Full-Quote-Tool-Category-Gap-M, 0.25rem);
      margin-bottom: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    & .preventivatore-skeleton .skeleton-category-list::-webkit-scrollbar {
      display: none;
    }

    & .preventivatore-skeleton .skeleton-category {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: var(--Navigation-Pill-Gap, 0.5rem);
      width: auto;
      min-width: 6.5rem;
      height: auto;
      min-height: var(--Space-450-24, 1.5rem);
      padding: var(--Navigation-Pill-Vertical-Padding, 0.5rem)
        var(--Navigation-Pill-Horizontal-Padding, 0.625rem);
      border: var(--border-width-thin, 1px) solid var(--Category-Tabs-Quote-Tool-Default-Border, #001c35);
      border-radius: var(--Navigation-Pill-Radius, 9999px);
      background: var(--Category-Tabs-Quote-Tool-Default-Background, #f9f9f7);
    }

    & .preventivatore-skeleton .skeleton-category:nth-child(n + 5) {
      display: none;
    }

    & .preventivatore-skeleton .skeleton-category-active {
      min-width: 7.25rem;
      border-color: var(--Category-Tabs-Quote-Tool-Selected-Border, #001c35);
      background: var(--Category-Tabs-Quote-Tool-Selected-Background, #001c35);
    }

    & .preventivatore-skeleton .skeleton-category-icon {
      flex: 0 0 1rem;
      width: 1rem;
      height: 1rem;
      border-radius: 9999px;
      background-color: #eef0f2;
    }

    & .preventivatore-skeleton .skeleton-category-text {
      flex: 0 0 3.25rem;
      width: 3.25rem;
      height: 0.75rem;
      border-radius: 0.25rem;
      background-color: #eef0f2;
    }

    & .preventivatore-skeleton .skeleton-category-active .skeleton-category-icon,
    & .preventivatore-skeleton .skeleton-category-active .skeleton-category-text {
      background-color: rgb(255 255 255 / 28%);
    }

    & .preventivatore-skeleton .skeleton-form-stack {
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
      justify-content: flex-start;
      gap: var(--Quote-Tool-Vertical-Gap, 1rem);
      margin-bottom: 0;
    }

    & .preventivatore-skeleton .skeleton-form-field-group {
      display: flex;
      flex-direction: column;
      gap: var(--Quote-Tool-Vertical-Gap, 1rem);
      width: 100%;
    }

    & .preventivatore-skeleton .skeleton-field-select,
    & .preventivatore-skeleton .skeleton-field-text,
    & .preventivatore-skeleton .skeleton-cta {
      width: 100%;
    }

    & .preventivatore-skeleton .skeleton-field,
    & .preventivatore-skeleton .skeleton-cta {
      width: 100%;
      height: var(--Input-Fields-Text-Field-Height, 3rem);
      flex: 0 0 auto;
    }

    & .preventivatore-skeleton .skeleton-field-select {
      border-color: var(--Input-Fields-Enabled-Border, #9aa5ad);
    }

    & .preventivatore-skeleton .skeleton-cta {
      margin-top: 0;
      border: 0;
      background: var(--Button-Accent-Default-Background, #0303f5);
    }

    & .preventivatore-skeleton .skeleton-checkbox-row {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.5rem;
      align-self: flex-start;
      padding-left: 1.5rem;
    }

    & .preventivatore-skeleton .skeleton-checkbox {
      flex: 0 0 1.25rem;
      width: 1.25rem;
      height: 1.25rem;
      border: 1px solid var(--Input-Fields-Enabled-Border, #9aa5ad);
      border-radius: 0.25rem;
      background: #f9f9f7;
    }

    & .preventivatore-skeleton .skeleton-checkbox-label {
      width: 7.5rem;
      height: 0.75rem;
      border-radius: 0.25rem;
    }

    & .preventivatore-skeleton .skeleton-footer-links {
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
      align-items: center;
      gap: var(--Quote-Tool-Gap-M, 1.25rem);
      align-self: stretch;
      margin-top: 0;
      margin-bottom: 0;
    }

    & .preventivatore-skeleton .skeleton-link {
      width: 9.5rem;
      height: 0.875rem;
      border-radius: 0.25rem;
    }

    & .preventivatore-skeleton .skeleton-link-short {
      width: 11.5rem;
    }

    & .preventivatore-skeleton .skeleton-privacy.skeleton-desktop-only {
      display: none;
    }

    & .quote-tool-container-cards {
      & .quote-tool-cards-slide {
        width: 100%;
        max-width: 100%;
        flex-shrink: 0;
      }
    }
  }
}


/* Desktop */
@media (width >= 1200px) {
  .quote-tool-cont {
    & .quote-tool-root-container {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: var(--quote-tool-desktop-wrapper-min-height, 13.5rem);
    }

    & .quote-tool-root-container > div {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: inherit;
    }

    & .preventivatore-skeleton {
      display: flex;
      flex-direction: column;
      flex: 0 1 auto;
      align-items: stretch;
      min-height: var(--quote-tool-desktop-wrapper-min-height, 13.5rem);
      max-height: none;
      padding: 0;
      margin: 0;
      overflow: visible;
      gap: var(--Quote-Tool-Info-Gap, 1.25rem);
    }

    & .preventivatore-skeleton .skeleton-category-list {
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: var(--Quote-Tool-Full-Quote-Tool-Category-Gap-M, 0.25rem)
        var(--Quote-Tool-Full-Quote-Tool-Category-Gap, 0.5rem);
      margin-bottom: 0;
      overflow: visible;
    }

    & .preventivatore-skeleton .skeleton-category {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: var(--Navigation-Pill-Gap, 0.25rem);
      width: auto;
      min-height: 2.5rem;
      padding: var(--Navigation-Pill-Vertical-Padding, 0.5rem)
        var(--Navigation-Pill-Horizontal-Padding, 0.625rem);
      border: var(--border-width-thin, 1px) solid var(--Category-Tabs-Quote-Tool-Default-Border, #001c35);
      border-radius: var(--Navigation-Pill-Radius, 9999px);
      background: var(--Category-Tabs-Quote-Tool-Default-Background, #f9f9f7);
    }

    & .preventivatore-skeleton .skeleton-category-active {
      border-color: var(--Category-Tabs-Quote-Tool-Selected-Border, #001c35);
      background: var(--Category-Tabs-Quote-Tool-Selected-Background, #001c35);
    }

    & .preventivatore-skeleton .skeleton-category-icon {
      flex: 0 0 1rem;
      width: 1rem;
      height: 1rem;
      border-radius: 9999px;
      background-color: #eef0f2;
    }

    & .preventivatore-skeleton .skeleton-category-text {
      flex: 0 0 3.25rem;
      width: 3.25rem;
      height: 0.75rem;
      border-radius: 0.25rem;
      background-color: #eef0f2;
    }

    & .preventivatore-skeleton .skeleton-category-text-medium {
      flex-basis: 4rem;
      width: 4rem;
    }

    & .preventivatore-skeleton .skeleton-category-text-wide {
      flex-basis: 5.25rem;
      width: 5.25rem;
    }

    & .preventivatore-skeleton .skeleton-category-active .skeleton-category-icon,
    & .preventivatore-skeleton .skeleton-category-active .skeleton-category-text {
      background-color: rgb(255 255 255 / 28%);
    }

    & .preventivatore-skeleton .skeleton-form-stack {
      display: flex;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: flex-start;
      gap: var(--Quote-Tool-Horizontal-Gap, 0.5rem);
      margin-bottom: 0;
    }

    & .preventivatore-skeleton .skeleton-form-field-group {
      display: flex;
      flex: 1 0 0;
      flex-direction: column;
      gap: var(--Input-Fields-Vertical-Gap, 0.25rem);
      min-width: 0;
    }

    & .preventivatore-skeleton .skeleton-field-select,
    & .preventivatore-skeleton .skeleton-form-field-group {
      flex: 1 0 0;
      width: auto;
      min-width: 0;
    }

    & .preventivatore-skeleton .skeleton-field-text {
      width: 100%;
    }

    & .preventivatore-skeleton .skeleton-field,
    & .preventivatore-skeleton .skeleton-cta {
      height: var(--Input-Fields-Text-Field-Height, 3rem);
    }

    & .preventivatore-skeleton .skeleton-field-select {
      border-color: var(--Input-Fields-Enabled-Border, #9aa5ad);
    }

    & .preventivatore-skeleton .skeleton-checkbox-row {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.5rem;
      align-self: flex-start;
      padding-left: 1.5rem;
    }

    & .preventivatore-skeleton .skeleton-cta {
      flex: 0 0 14rem;
      width: 14rem;
      margin-top: 0;
      border: 0;
      background: var(--Button-Accent-Default-Background, #0303f5);
    }

    & .preventivatore-skeleton .skeleton-footer-links {
      display: flex;
      flex: 0 0 auto;
      flex-direction: row;
      align-items: center;
      align-self: flex-start;
      gap: var(--Quote-Tool-Gap-D-Ds-Tp, 1.5rem);
      margin: 0;
    }

    & .preventivatore-skeleton .skeleton-footer-links .skeleton-link:first-child {
      display: none;
    }

    & .preventivatore-skeleton .skeleton-footer-links .skeleton-link-short {
      width: 11.5rem;
      height: 0.875rem;
    }
  }
}


/* Mobile */
@media (width < 768px) {
  .quote-tool-cont {
    padding: var(--Quote-Tool-Full-Quote-Tool-Padding, 1rem);
    gap: var(--Quote-Tool-Gap-M, 1.25rem);
    border-radius: var(--Quote-Tool-Radius, 1rem);

    & .full-quote-cont {
      flex: 1 1 auto;
      min-height: 0;
    }

    & #quote-panel-left:not([hidden]) {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: var(--Quote-Tool-Gap-M, 1.25rem);
      min-height: 0;
    }

    & #quote-panel-left > .quote-tool-root-container {
      flex: 1 1 auto;
      min-height: var(--quote-tool-mobile-wrapper-min-height, 18.75rem);
    }

    & #quote-panel-left > .panel-left-desc {
      display: none;
    }
  }

  .quote-tool-cont .panel-title {
    font: var(--Text-Styles-Heading-Fixed);
  }
}

/* Header quote tool: keep React mount on the same footprint as the skeleton */
@media (width < 1200px) {
  .header-box-container .quote-tool-root-container .preventivatore-skeleton {
    min-height: var(--quote-tool-mobile-wrapper-min-height, 18.75rem);
    max-height: none;
    margin: 0;
    padding: 0;
  }
}

@media (width >= 1200px) {
  .header-box-container .quote-tool-root-container .preventivatore-skeleton {
    min-height: var(--quote-tool-desktop-wrapper-min-height, 13.5rem);
    max-height: none;
    margin: 0;
    padding: 0;
  }

  .header-box-container:is(.is-open, .is-closing):has(.quote-tool-cont) {
    --quote-tool-desktop-wrapper-min-height: 13.5rem;
  }

  .header-box-container:is(.is-open, .is-closing)
    .header-box-wrapper
    .quote-tool-cont
    .quote-tool-root-container
    > div {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    min-height: var(--quote-tool-desktop-wrapper-min-height, 13.5rem);
  }
}

@media (width < 1200px) {
  .header-box-container:is(.is-open, .is-closing) .header-box-wrapper .quote-tool-cont {
    overflow: visible;
  }

  .header-box-container:is(.is-open, .is-closing)
    .header-box-wrapper
    .quote-tool-cont
    .quote-tool-root-container
    > div {
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    min-height: var(--quote-tool-mobile-wrapper-min-height, 18.75rem);
  }
}

/* Author styles */
:is(.adobe-ue-preview, .adobe-ue-edit) .quote-tool-cont {
  & .full-quote-cont {
    display: flex;
    margin: auto;
    gap: 4rem;
    min-height: 35rem;
  }
}