:root {
  --breadcrumbs-wrapper-height: 3.75rem;
}

section.section.store-locator {
  padding-block: calc(var(--spacing-lg) + var(--breadcrumbs-wrapper-height))
    var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: relative;

  .container {
    max-width: var(--max-section-grid-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-md);
    position: relative;
    padding-inline: var(--spacing-side);
  }

  .store-locator-map {
    /* Imposta la variabile CSS dal data-attribute */
    --radius-label: attr(data-radius-label string);
    --results-label: attr(data-results-label string);
    --search-label: attr(data-search-label string, "Cerca");

    /* Soluzione alternativa per browser che non supportano attr() con valori string in CSS */
    &[data-radius-label] {
      --radius-label: attr(data-radius-label);
    }

    &[data-results-label] {
      --results-label: attr(data-results-label);
    }

    &[data-search-label] {
      --search-label: attr(data-search-label);
    }

    #wpsl-wrap {
      display: grid;
      grid-template-columns: 1.5fr 2.5fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "search search"
        "list map";
      gap: var(--spacing-md);

      @media screen and (max-width: 64rem) {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 1fr;
        grid-template-areas:
          "search"
          "map"
          "list";
      }

      /* padding: var(--spacing-md); */
      div.wpsl-search.wpsl-clearfix {
        grid-area: search;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        background-color: transparent;
        padding: unset;

        @media screen and (max-width: 64rem) {
          flex-direction: column;
          padding-inline: var(--spacing-xs);
          max-width: calc(100dvw - var(--spacing-side-mobile) * 2);
        }
      }

      #wpsl-search-wrap form {
        display: flex;
        gap: var(--spacing-sm);

        @media screen and (max-width: 64rem) {
          flex-direction: column;
        }
      }

      .wpsl-input {
        position: relative;
        width: fit-content;
        margin-right: var(--spacing-md);

        @media screen and (max-width: 64rem) {
          margin-right: unset;
          width: 100%;
        }

        #wpsl-search-input {
          width: 100%;
          padding: 0.75rem 0.75rem 0.75rem 2.5rem;
          /* Aumentato padding a sinistra per l'icona */
          border: none;
          border-bottom: 1px solid #bbbbbb;
          border-radius: 0;
          background-color: transparent;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 13.5622L10.5873 10.1494C11.1912 9.34973 11.5493 8.35402 11.5493 7.27467C11.5493 4.63769 9.41165 2.5 6.77467 2.5C4.13769 2.5 2 4.63769 2 7.27467C2 9.91165 4.13769 12.0493 6.77467 12.0493C7.85402 12.0493 8.84973 11.6912 9.64943 11.0873L13.0622 14.5L14 13.5622ZM10.223 7.27467C10.223 9.17915 8.67915 10.723 6.77467 10.723C4.87018 10.723 3.32629 9.17915 3.32629 7.27467C3.32629 5.37018 4.87018 3.82629 6.77467 3.82629C8.67915 3.82629 10.223 5.37018 10.223 7.27467Z' fill='%23212121'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: 0.75rem center;
          background-size: 16px 17px;
          height: 3rem;
          outline: none;
          transition: border ease-in-out 0.3s;

          &:hover {
            box-shadow: none;
            border: 1px solid var(--black);
          }
        }

        label {
          position: absolute;
          left: 2.5rem;
          /* Spostato per allinearsi con il testo dopo l'icona */
          top: 50%;
          white-space: nowrap;
          transform: translateY(-50%);
          transition: opacity 0.3s ease, visibility 0.3s ease;
          pointer-events: none;
          color: #757575;
          font-size: 0;
          /* Nascondiamo completamente il testo originale */
        }

        /* Utilizziamo ::after per visualizzare SOLO il testo personalizzato */
        label::after {
          content: var(--search-label, "Cerca per città/ CAP");
          font-size: 1rem;
          /* Ripristiniamo la dimensione del testo per il nostro contenuto */
        }

        /* Nascondiamo il testo originale della label e qualsiasi suo contenuto */
        label > * {
          display: none;
        }

        /* Utilizziamo selettori che mirano alla struttura DOM corretta */
        /* Quando l'input è in focus */
        &:has(#wpsl-search-input:focus) label {
          opacity: 0;
          visibility: hidden;
        }

        /* Quando l'input contiene testo */
        &:has(#wpsl-search-input:not(:placeholder-shown)) label {
          opacity: 0;
          visibility: hidden;
        }

        /* Fallback per browser che non supportano :has() */
        #wpsl-search-input:focus {
          & ~ div label,
          & + label,
          & ~ label {
            opacity: 0;
            visibility: hidden;
          }
        }

        /* Per browser più vecchi, aggiungiamo un placeholder e lo nascondiamo */
        #wpsl-search-input {
          &::placeholder {
            color: transparent;
          }
        }
      }

      .wpsl-search-btn-wrap {
        @media screen and (max-width: 64rem) {
          display: flex;
          width: 100%;
          margin: 0 auto;
        }
      }

      #wpsl-search-btn {
        all: unset;
        align-items: center;
        backdrop-filter: blur(0.25rem);
        border: 1px solid;
        border-radius: var(--button-outline-radius);
        color: inherit;
        display: inline-flex;
        font-family: var(--font-family-default);
        font-size: var(--font-size-label-desktop-xxl);
        font-weight: 500;
        gap: 0.625rem;
        /* 10px */
        justify-content: center;
        cursor: pointer;
        line-height: var(--line-height-label-desktop-xxl);
        margin: unset;
        padding: 1rem 1.5rem;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        width: max-content;
        border-color: var(--black);
        color: var(--black);
        text-align: center;

        @media screen and (max-width: 64rem) {
          font-size: var(--font-size-label-tablet-xxl);
          line-height: var(--line-height-label-tablet-xxl);
          width: 100%;
        }

        @media screen and (max-width: 48rem) {
          font-size: var(--font-size-label-mobile-xxxl);
          line-height: var(--line-height-label-mobile-xxxl);
          width: 100%;
        }

        &:hover {
          backdrop-filter: blur(0.5rem);
          background-color: inherit;
          color: inherit;
          transform: scale(1.015);
        }
      }

      #wpsl-radius {
        .wpsl-selected-item::before {
          content: var(--radius-label);
        }
      }

      #wpsl-results {
        .wpsl-selected-item::before {
          content: var(--results-label);
        }
      }

      .wpsl-select-wrap {
        display: flex;
        gap: var(--spacing-sm);

        @media screen and (max-width: 48rem) {
          width: 100%;
          flex-direction: column;
        }
      }

      #wpsl-results,
      #wpsl-radius {
        position: relative;
        max-width: 19rem;
        width: 100%;
        height: 3rem;

        @media screen and (max-width: 64rem) {
          max-width: 100%;
        }

        label {
          display: none;
          /* Nascondiamo la label originale */
        }

        .wpsl-dropdown {
          width: 100%;
          height: 100%;
          border: unset;
          background: transparent;

          .wpsl-selected-item {
            border-bottom: 1px solid #bbbbbb;
            border-radius: 0;
          }

          div {
            background-color: #f9f9f9;
            border: unset;
            left: 0;
            right: 0;
            border-radius: var(--spacing-sm);
            border-top-left-radius: unset;
            border-top-right-radius: unset;
          }

          &.wpsl-active,
          &:hover {
            box-shadow: none;

            .wpsl-selected-item {
              border: 1px solid var(--black);
              transition: border ease-in-out 0.3s;
            }
          }

          /* Stile per il dropdown aperto */
          & > div > ul {
            width: 100%;
            margin-top: 0.25rem;
            /* border: 1px solid var(--Grey-Grey-2, #e0e0e0); */
            border: 1px solid var(--black);
            border-radius: var(--spacing-sm);
            border-top-left-radius: unset;
            border-top-right-radius: unset;
            background: transparent;
            z-index: 10;

            & > li {
              padding: 0.5rem 0.75rem;

              &:hover {
                background-color: var(--Grey-Grey-2, #e0e0e0);
              }
            }
          }
        }

        .wpsl-active .wpsl-selected-item:after {
          transform: translateY(-50%) rotate(180deg);
        }

        .wpsl-selected-item {
          display: flex;
          align-items: center;
          height: 3rem;
          padding-left: 0.75rem;
          font-weight: bold;

          &::before {
            font-weight: normal;
            margin-right: 0.5rem;
          }

          &:after {
            all: unset;
            content: "";
            position: absolute;
            right: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            pointer-events: none;
            transition: transform 0.3s ease;
            margin-inline-start: var(--spacing-xxs);
          }
        }
      }

      #wpsl-result-list {
        grid-area: list;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        background-color: transparent;
        border-radius: var(--spacing-sm);
        width: 100%;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 4rem;
          pointer-events: none;
          /* Permette di interagire con gli elementi sottostanti */
          background: linear-gradient(180deg, transparent 10%, #f9f9f9 100%);
          z-index: 2;
        }

        #wpsl-stores {
          position: relative;

          > ul {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            flex: 1 0 0;
            align-self: stretch;
            padding-inline-end: 0.5rem;
            padding-block-end: 4rem;

            li {
              cursor: pointer;
              display: flex;
              padding: 1.25rem 1.5rem;
              flex-direction: column;
              align-items: flex-start;
              gap: 0.5rem;
              align-self: stretch;
              border-radius: 0.25rem;
              border: 2px solid #e4e7ea;
              background: #f8f8f8;
              /* aspect-ratio: 4; */
              overflow: visible;
              transition: all 0.2s ease-in-out;

              &:hover {
                border-radius: 0.25rem;
                border: 2px solid #67766c;
                background: #f3f3f3;
                box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.1);
              }

              @media screen and (max-width: 28rem) {
                max-width: calc(100dvw - var(--spacing-side-mobile) * 2);
              }

              /* @media screen and (max-width: 36rem) {
                max-width: 20rem;
              } */
            }
          }
        }
      }
    }

    #wpsl-gmap {
      width: 100%;
    }
  }

  &.is-agent {
    #wpsl-gmap {
      display: none !important;
    }

    #wpsl-wrap {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "search"
        "list";
    }

    div#wpsl-stores {
      ul {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)) !important;
        grid-template-rows: auto !important;
        gap: var(--spacing-md) !important;
      }
    }
  }

  @media screen and (max-width: 48rem) {
    padding-inline: var(--spacing-side-mobile);
  }

  @media screen and (max-width: 64rem) {
    #wpsl-gmap {
      display: none !important;
    }

    #wpsl-wrap {
      grid-template-columns: 1fr !important;
      grid-template-rows: auto 1fr !important;
      grid-template-areas:
        "search"
        "list" !important;
    }

    div#wpsl-stores {
      ul {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)) !important;
        grid-template-rows: auto !important;
        gap: var(--spacing-md) !important;
      }
    }
  }

  .breadcrumbs-gradient-wrapper {
    .store-locator-breadcrumbs-container {
      width: 100%;
      display: flex;
      max-width: var(--max-section-grid-width);
      margin: 0 auto;
      padding: 0 var(--spacing-side);

      @media screen and (max-width: 48rem) {
        padding: 0 var(--spacing-side-mobile);
      }
    }

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100dvw;
    background: linear-gradient(180deg, #69796e 0%, #908d73 100%),
      lightgray 50% / cover no-repeat;
    background-blend-mode: multiply, normal;
    height: var(--breadcrumbs-wrapper-height);
    display: flex;
    align-items: center;

    .breadcrumb-separator {
      color: var(--white);
    }
  }
}

div.wpsl-info-window,
div.wpsl-store-location {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);

  .wpsl-store-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

    h4.store-title {
      color: #67766c;
    }

    p.wpsl-address {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-xxs);
      margin: unset;

      /* Aggiungi virgola dopo ogni span tranne l'ultimo */
      span:not(:last-child)::after {
        content: ",";
        margin-left: -0.1rem;
        /* Correzione per l'allineamento visivo */
      }
    }
  }

  .wpsl-contact-details {
    display: flex;
    justify-content: space-between;
    margin: unset;
    flex-direction: column;
    gap: var(--spacing-xxs);

    &:empty {
      display: none;
    }

    span#email.email,
    span#phone.phone {
      display: flex !important;
      gap: var(--spacing-xs);
      /* justify-content: space-between; */
      color: #67766c;
      line-height: normal;
      letter-spacing: -0.0075rem;
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
      justify-content: flex-start;
    }
  }
}

div.wpsl-info-window {
  div.wpsl-store-location {
    min-width: 220px;

    .wpsl-store-head {
      p.wpsl-address {
        max-width: 200px;
      }
    }
  }
}

.gm-style {
  .gm-style-iw-d {
    overflow: visible !important;
  }

  .gm-style-iw-c {
    /* border: 2px solid transparent;
    &:hover {
      border: 2px solid #67766c;
    } */
  }

  .gm-style-iw-tc::after {
  }
}

/* Selettori specifici per garantire compatibilità */
section.section.store-locator
  .store-locator-map[data-radius-label]
  #wpsl-wrap
  #wpsl-radius
  .wpsl-selected-item::before {
  content: attr(data-radius-label) ": ";
}

/* Approccio alternativo che utilizza una trasmissione del valore tramite il DOM */
section.section.store-locator .store-locator-map[data-radius-label] {
  /* Imposta uno stile personalizzato per il contenitore con data-radius-label */
}

section.section.store-locator
  .store-locator-map[data-radius-label]
  #wpsl-wrap
  #wpsl-radius
  .wpsl-selected-item::before {
  content: attr(data-radius-label, "In un raggio di") ": ";
}

.gf-store-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.gf-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #757575;
  /* animation: gf-spin 1s linear infinite; */
  animation: gf-spin 1s linear infinite;
}

@keyframes gf-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}