#edit-wizard-left {
  width: 100%;
  max-width: 800px;

  padding: 0;
  > legend {
    display: none;
  }

  details {
    display: block;
    width: 100%;
    padding: 0 0.5rem;
    padding-top: 0;
    margin: 0;
    margin-bottom: 0.5rem;

    /* Elementi nascosti */
    input[type="radio"],
    .ajax-progress-throbber {
      display: none;
    }

    /* Cursor */
    &:not([wizard-init="false"]) summary,
    .list-label,
    .list-value,
    .list-value-container {
        cursor: default;
    }

    /* Summary */
    summary {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem 0;
      --summary-row-h: 22px; /* altezza di riferimento per l'allineamento verticale rispetto alla prima riga */

      .summary {
        display: none !important;
      }

      /* Nascondo marker */
      &::marker {
        content: "";
        display: none;
      }

      /* Label */
      .list-label {
        /* centra verticalmente rispetto alla prima riga */
        display: flex;
        align-items: center;
        height: var(--summary-row-h);
        flex: 0 0 140px;
        font-weight: 700;
        text-transform: uppercase;
      }

      /* Value */
      .list-value-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1;
        gap: 0.25rem;
        max-width: 540px;

        .list-label-row {
          display: flex;
          align-items: center;
          justify-content: start;
          min-height: var(--summary-row-h);
          gap: 0.25rem;
        }
      }

      /* Pulsante Modifica | Chiudi */
      .list-action {
        /* centra verticalmente rispetto alla prima riga */
        display: flex;
        align-items: center;
        justify-content: end;
        min-height: var(--summary-row-h);
        flex: 0 0 80px;

        .details-action-wrapper {
          --color: #fff !important;
          --background-color: #2D64AD !important;

          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.25rem;
          width: auto;
          padding: 0.25rem 0.5rem;
          margin-top: -2px;

          font-size: 0.8rem;

          color: var(--color);
          background-color: var(--background-color);

          -moz-border-radius: 0.35rem;
          -webkit-border-radius: 0.35rem;
          border-radius: 0.35rem;

          span {
            margin-top: 2px;
          }

          i.fa-pencil-alt {
            font-size: 0.7rem;
          }
        }
      }
    }

    /* Content */
    .wrapper {
      display: flex;
      align-items: start;
      justify-content: start;
      width: 100%;

      .content {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 1.5rem 0;
        width: 100%;
        padding: 0.5rem;
        padding-bottom: 0.75rem;
        margin-bottom: 0.5rem; /* per creare lo spazio grigio anche sotto quando il details è aperto */
        background-color: #fff;

        .wizard-options {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 2rem 1rem;
          width: 100%;
          text-align: center;

          .form-item {
            margin: 0;

            &:not(.checked) {
              cursor: pointer;
            }

            .form-item-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              gap: 0.5rem 0;
              width: 100%;
              padding: 0.5rem 1rem;

              .wizard-label-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.5rem 0;
                width: 100%;

                p {
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }

    /* Details Open */
    &[open] {
      background-color: #d4d4d4;

      .wrapper {
        background-color: #d4d4d4;
      }
    }
  }


  .wizard-details-subtitle,
  .wizard-details-subtitle p {
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
  }
}

/* Solo Desktop */
body.is-desktop {
  #edit-wizard-left {
    details {
      /* Hover sui summary non aperti */
      &:not([wizard-init="false"]):not([open]):hover {
        background-color: #555;

        summary {
          --color: #fff;
        }
      }

      /* Hover su pulsante .list-action */
      .list-action {
        .details-action-wrapper:hover {
          opacity: 0.7;
          cursor: pointer;
        }
      }

      /* Hover sulle options */
      .wizard-options .form-item:not(.checked) .form-item-wrapper:hover,
      .wizard-options-product-5 .form-item:not(.checked):hover {
        background-color: #fff2d6;

        &,
        * {
          cursor: pointer;
        }
      }
    }
  }

  /* Versione modalità "right" */
  .newcom-wizard-form[data-wizard-right-mode="right"] #edit-wizard-left {
    margin-bottom: 50px;
  }
}

/* Solo Mobile */
body.is-mobile {
  .block-newcom-wizard form {
    #edit-wizard-left {
      font-size: 1rem;

      details {
        padding: 0 0.35rem;

        /* Summary */
        summary {
          justify-content: space-between;
          flex-wrap: wrap;

          .list-label {
            order: 1
          }

          .list-action {
            order: 2;
          }

          .list-value-container {
            display: none;
            width: 100%;
            order: 3;

            .list-label-row {
              height: auto;
            }
          }
        }

        /* Content */
        .content {
          .wizard-options {
            flex-wrap: wrap;
            align-items: start;
            justify-content: center;
            gap: 1rem 0.5rem;

            .form-item {
              width: 30%;

              .form-item-wrapper {
                font-size: 0.9rem;
                padding: 0.5rem 0.5rem;
              }
            }
          }
        }
      }
    }

    /* Form Inizializzato */
    &.initialized {
      #edit-wizard-left {
        details {
          summary {
            .list-value-container {
              display: flex !important;
            }
          }
        }
      }
    }
  }
}