main > .section > div.preventivatore-wrapper {
  margin-bottom: var(--spacing-md, 1.5rem);
  max-width: 100%;
  padding: 0;
}

main > .section > div.preventivatore-wrapper:has(.quote-in-page) {
  margin-inline: auto;
  max-width: var(--Layout-Page-Width, 90rem);
  padding-inline: var(--Layout-Section-Margin-Horizontal-Padding, 4rem);
  padding-block: var(--Layout-Section-Vertical-Padding, 4rem);
}

main > .section > div.fragment-wrapper:has(.quote-in-page) {
  padding-inline: var(--Layout-Section-Margin-Horizontal-Padding, 4rem);
  padding-block: var(--Layout-Section-Vertical-Padding, 4rem);
}

main > .section > div.fragment-wrapper > div.fragment.block.preventivatore-container:has(.quote-in-page) {
  margin-inline: auto;
  max-width: var(--Layout-Page-Width, 90rem);
}

.quote-in-page {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--Quote-Tool-Radius, 1rem);
  background: var(--Quote-Tool-Single-Quote-Tool-Background, #FFF);
  box-shadow: var(--Drop-Shadow-100, 2px 2px 8px 0 rgb(0 0 0 / 8%));
  padding: var(--Quote-Tool-Single-Quote-Tool-Padding, 1.5rem);

  /* The category tabs are rendered inside the React widget. Flatten those
     wrappers so the authored promo can sit between the tabs and the form. */
  /* stylelint-disable selector-class-pattern */
  & > #preventivatore-root-container,
  & .tpd-preventivatore.variant-category,
  & .tpd-preventivatore__container {
    display: contents;
  }

  & > .single-quote-tool-text {
    order: 1;
  }

  & .tpd-preventivatore__category-tabs-container {
    order: 2;
    width: 100%;
  }

  &:not(.quote-text-align-left) .tpd-preventivatore__category-tabs {
    justify-content: center;
  }

  & > .single-quote-tool-tab-group {
    order: 3;
  }

  & .tpd-preventivatore__form-wrapper {
    order: 4;
    width: 100%;
    margin-top: var(--Quote-Tool-Info-Gap, 1.25rem);
  }

  & .variant-link-container {
    order: 5;
    width: 100%;
    margin-top: var(--Quote-Tool-Gap-M, 1.25rem);
  }

  & .single-quote-tool-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Quote-Tool-Text-Gap, 0.5rem);
    padding-bottom: var(--Quote-Tool-Gap-D-Ds-Tp, 1.5rem);
    text-align: center;

    & .title {
      align-self: stretch;
      color: var(--Quote-Tool-Text, #001C35);
      font: var(--Subtitle-Manrope);
      letter-spacing: -0.02rem;
    }

    & .description {
      align-self: stretch;
      color: var(--Quote-Tool-Text, #001C35);
      font: var(--Body-Base);
    }
  }

  &.quote-text-align-left .single-quote-tool-text {
    text-align: left;
  }

  & .single-quote-tool-tab-group {
    color: var(--Quote-Tool-Text, #001C35);
    font: var(--Body-Base);
    margin-bottom: var(--Quote-Tool-Info-Gap, 1.25rem);
  }

  &:has(.tpd-preventivatore__category-tabs-container) > .single-quote-tool-tab-group {
    margin-top: var(--Quote-Tool-Gap-M, 1.25rem);
    margin-bottom: 0;
  }
  /* stylelint-enable selector-class-pattern */
}

@media (width >= 768px) {
  .quote-in-page .variant-link-container {
    margin-top: var(--Quote-Tool-Gap-D-Ds-Tp, 1.5rem);
  }

  /* stylelint-disable-next-line selector-class-pattern */
  .quote-in-page:has(.tpd-preventivatore__category-tabs-container) > .single-quote-tool-tab-group {
    margin-top: var(--Quote-Tool-Gap-D-Ds-Tp, 1.5rem);
  }
}

@media (width >= 1200px) {
  .quote-in-page .variant-link-container {
    margin-top: 0;
  }
}

@media (width < 768px) {
  .quote-in-page {
    padding: var(--Quote-Tool-Single-Quote-Tool-Vertical-Padding-M-2, 1.25rem) var(--Quote-Tool-Single-Quote-Tool-Horizontal-Padding-M, 1rem);
  }

  .quote-in-page .single-quote-tool-text {
    padding-bottom: var(--Quote-Tool-Gap-M, 1.25rem);

    & .title {
      font: var(--Text-Styles-Heading-Fixed);
      letter-spacing: -0.015rem;
    }
  }
}

.preventivatore-skeleton {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-width-content, 90rem);
  min-height: 20rem;
  max-height: 95vh;
  overflow: hidden;
  margin: 0 auto var(--spacing-md, 1.5rem);
  padding: 1rem;
}

/* Author mode keeps the skeleton in place of the React widget. Without an
   explicit order it stays at 0 and the authored texts render below it. */
.quote-in-page > .preventivatore-skeleton {
  order: 6;
}

.preventivatore-skeleton .skeleton-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
  border-radius: 9999px;
  background: #dfe2e5;
}

.preventivatore-skeleton .skeleton-switch-pill {
  height: 2rem;
  border-radius: 9999px;
}

.preventivatore-skeleton .skeleton-switch-pill-active {
  width: 9.5rem;
  background: #f9f9f7;
}

.preventivatore-skeleton .skeleton-switch-pill-secondary {
  width: 10.5rem;
}

.preventivatore-skeleton .skeleton-heading {
  margin-bottom: 1rem;
}

.preventivatore-skeleton .skeleton-title {
  width: min(34rem, 82%);
  height: 2rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
}

.preventivatore-skeleton .skeleton-description {
  width: min(40rem, 88%);
  height: 1.125rem;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
}

.preventivatore-skeleton .skeleton-description-short {
  width: min(26rem, 62%);
  margin-bottom: 0;
}

.preventivatore-skeleton .skeleton-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.quote-in-page:not(.quote-text-align-left) .skeleton-category-list {
  justify-content: center;
}

.preventivatore-skeleton .skeleton-category {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: var(--border-width-thin, 1px) solid #001c35;
  border-radius: 9999px;
  background: #f9f9f7;
}

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

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

.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-form-stack {
  display: grid;
  grid-template-columns: minmax(16rem, 1.05fr) minmax(16rem, 1fr) minmax(15rem, 0.7fr);
  gap: 0.5rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.preventivatore-skeleton .skeleton-form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

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

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

.preventivatore-skeleton .skeleton-cta {
  grid-column: 3;
  grid-row: 1;
  height: 3rem;
  border-radius: 9999px;
  background: var(--Button-Accent-Default-Background, #0303f5);
}

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

.preventivatore-skeleton .skeleton-footer-links {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.preventivatore-skeleton .skeleton-privacy.skeleton-desktop-only {
  grid-column: 1 / -1;
  width: 9rem;
  height: 1rem;
  border-radius: 0.25rem;
}

.preventivatore-skeleton .skeleton-form-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1.05fr) minmax(16rem, 1fr) minmax(15rem, 0.7fr);
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.preventivatore-skeleton .skeleton-field {
  position: relative;
  height: 3rem;
  border: var(--border-width-thin, 1px) solid #9aa5ad;
  border-radius: 9999px;
  background: #f9f9f7;
}

.preventivatore-skeleton .skeleton-floating-label {
  position: absolute;
  top: -0.55rem;
  left: 1.25rem;
  width: 7rem;
  height: 0.875rem;
  border-radius: 0.25rem;
  background: #f9f9f7;
}

.preventivatore-skeleton .skeleton-select-value {
  width: 50%;
  height: 1rem;
  margin: 1rem 0 0 1.5rem;
  border-radius: 0.375rem;
}

.preventivatore-skeleton .skeleton-category-active {
  border-color: #001c35;
  background: #001c35;
}

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

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

.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 {
  width: 9rem;
  height: 1rem;
  border-radius: 0.25rem;
}

.preventivatore-skeleton .skeleton-switch-pill-secondary,
.preventivatore-skeleton .skeleton-title,
.preventivatore-skeleton .skeleton-description,
.preventivatore-skeleton .skeleton-category-icon,
.preventivatore-skeleton .skeleton-category-text,
.preventivatore-skeleton .skeleton-field,
.preventivatore-skeleton .skeleton-select-value,
.preventivatore-skeleton .skeleton-floating-label,
.preventivatore-skeleton .skeleton-privacy,
.preventivatore-skeleton .skeleton-checkbox,
.preventivatore-skeleton .skeleton-checkbox-label,
.preventivatore-skeleton .skeleton-link {
  position: relative;
  overflow: hidden;
  background-color: #eef0f2;
}

.preventivatore-skeleton .skeleton-category-active,
.preventivatore-skeleton .skeleton-cta {
  position: relative;
  overflow: hidden;
}

.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-switch-pill-secondary::before,
.preventivatore-skeleton .skeleton-title::before,
.preventivatore-skeleton .skeleton-description::before,
.preventivatore-skeleton .skeleton-category-icon::before,
.preventivatore-skeleton .skeleton-category-text::before,
.preventivatore-skeleton .skeleton-field::before,
.preventivatore-skeleton .skeleton-select-value::before,
.preventivatore-skeleton .skeleton-floating-label::before,
.preventivatore-skeleton .skeleton-privacy::before,
.preventivatore-skeleton .skeleton-checkbox::before,
.preventivatore-skeleton .skeleton-checkbox-label::before,
.preventivatore-skeleton .skeleton-link::before,
.preventivatore-skeleton .skeleton-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent);
  animation: preventivatore-skeleton-shimmer 1.5s infinite;
  will-change: transform;
}

.preventivatore-skeleton.editor-mode {
  position: relative;
}

.preventivatore-skeleton .ups-editor-badge {
  display: inline-flex;
  margin-top: 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: #001c35;
  color: #fff;
  font-size: 0.75rem;
}

.preventivatore-skeleton.is-hiding {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

.quote-tool-root-container:has(.preventivatore-skeleton) {
  position: relative;
  min-height: var(--quote-tool-mobile-wrapper-min-height, 20rem);
}

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

.quote-tool-root-container.preventivatore-revealed {
  position: relative;
}

.quote-tool-root-container.preventivatore-revealed > [id] {
  width: 100%;
}

@media (width <= 768px) {
  .quote-tool-cont .preventivatore-skeleton {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: var(--quote-tool-mobile-wrapper-min-height, 18.75rem);
    max-height: none;
    padding: 0;
    margin: 0;
    gap: var(--Quote-Tool-Info-Gap, 1.25rem);
  }

  .preventivatore.block > .preventivatore-skeleton {
    display: flex;
    flex-direction: column;
    min-height: min(800px, calc(100vh - 144px));
    padding: 1rem;
  }

  .preventivatore-skeleton .skeleton-switch {
    width: 100%;
    margin-bottom: 1.75rem;
  }

  .preventivatore-skeleton .skeleton-switch-pill {
    flex: 1;
  }

  .preventivatore-skeleton .skeleton-title {
    height: 1.75rem;
    width: 82%;
    margin-bottom: 1.5rem;
  }

  .preventivatore-skeleton .skeleton-description {
    width: 86%;
    margin-bottom: 0.625rem;
  }

  .preventivatore-skeleton .skeleton-description-short {
    width: 66%;
    margin-bottom: 0;
  }

  .preventivatore-skeleton .skeleton-category-list {
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: 0;
  }

  .preventivatore-skeleton .skeleton-category {
    flex: 0 0 auto;
    min-width: 6.5rem;
  }

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

  .quote-tool-cont .preventivatore-skeleton .skeleton-form-stack {
    flex: 0 0 auto;
  }

  .preventivatore-skeleton .skeleton-field-select,
  .preventivatore-skeleton .skeleton-field-text,
  .preventivatore-skeleton .skeleton-cta {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .preventivatore-skeleton .skeleton-checkbox-row {
    display: flex;
  }

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

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

  .preventivatore-skeleton .skeleton-form-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .preventivatore-skeleton .skeleton-field,
  .preventivatore-skeleton .skeleton-cta {
    height: 3rem;
  }

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

  .preventivatore-skeleton .skeleton-privacy {
    align-self: center;
    margin-top: auto;
    margin-bottom: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preventivatore-skeleton .skeleton-switch-pill-secondary::before,
  .preventivatore-skeleton .skeleton-title::before,
  .preventivatore-skeleton .skeleton-description::before,
  .preventivatore-skeleton .skeleton-category-icon::before,
  .preventivatore-skeleton .skeleton-category-text::before,
  .preventivatore-skeleton .skeleton-field::before,
  .preventivatore-skeleton .skeleton-select-value::before,
  .preventivatore-skeleton .skeleton-floating-label::before,
  .preventivatore-skeleton .skeleton-privacy::before,
  .preventivatore-skeleton .skeleton-checkbox::before,
  .preventivatore-skeleton .skeleton-checkbox-label::before,
  .preventivatore-skeleton .skeleton-link::before,
  .preventivatore-skeleton .skeleton-cta::before {
    animation: none;
  }
}

@keyframes preventivatore-skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}