/*
 * WooCommerce — Product block: FAQ (CSS)
 *
 */

/*
 * ------------------------------------------------------------------
 *  FAQ ACCORDION STYLES (PRODUCT PAGE)
 *
 *  In precedenza queste regole erano contenute nel file "faq-accordion.css"
 *  ed erano caricate soltanto sulle pagine prodotto. Ora sono integrate
 *  qui per semplificare la gestione degli stili e ridurre richieste
 *  addizionali. Le classi sono prefissate con .bspc-faq-accordion
 *  per evitare conflitti con gli altri componenti FAQ.
 */

.bspc-faq-accordion {
  /* Rimosso margin verticale: la spaziatura tra questa sezione e le altre
     è ora gestita in product.css. Il padding resta per il distacco interno. */
  padding: 2rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  /* Border-radius e shadow uniformi con gli altri blocchi */
  border-radius: var(--bspc-radius-large, 18px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/*
 * Nota: l'elemento <h3> non è più utilizzato come titolo nella
 * sezione FAQ della pagina prodotto; il markup genera invece un
 * <h2 class="faq-title">. Per evitare conflitti e duplicazioni,
 * rimuoviamo lo stile generico sull'header h3 e stiliamo
 * direttamente la classe .faq-title più sotto.
 */

/* Stile nascosto: manteniamo la definizione commentata per riferimento */
/*
.bspc-faq-accordion h3 {
  margin: 0 0 1.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--bspc-text-primary, #1d1d1f);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
*/

/*
 * Nascondi qualsiasi icona .faq-icon presente nel markup. In passato
 * l'icona era annidata in un elemento <h3>, ma ora il markup usa
 * <h2 class="faq-title"> senza icone. Pertanto un'unica regola
 * generica è sufficiente per nasconderle tutte.
 */
.bspc-faq-accordion .faq-icon {
  display: none;
}

/* Titolo del FAQ con testo a gradiente.  Utilizziamo la classe dedicata
 * .faq-title applicata dall'HTML per evitare di interferire con altri
 * titoli generici. Il fallback garantisce la visibilità del testo
 * qualora il supporto alle proprietà di clipping non fosse disponibile. */
/*
 * Titolo FAQ
 * Utilizziamo la classe .faq-title applicata dal markup per stilarlo
 * in modo coerente con il design Apple. Il gradiente crea un effetto
 * premium mentre il fallback assicura la leggibilità.
 */
.bspc-faq-accordion .faq-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background: linear-gradient(90deg, var(--bspc-blue-primary, #0071e3), #7928ca);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--bspc-blue-primary, #0071e3);
}

.bspc-faq-accordion .faq-item {
  padding: 1rem 0;
  border-top: 1px solid #e5e5ea;
}
.bspc-faq-accordion .faq-item:first-of-type {
  border-top: none;
}

.bspc-faq-accordion .faq-question {
  position: relative;
  display: block;
  width: 100%;
  padding-right: 1.75rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--bspc-text-primary, #1d1d1f);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  outline: none;
  /* Target minimo di 44px per il tap su mobile */
  min-height: 44px;
}

.bspc-faq-accordion .faq-question::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0.6rem;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--bspc-blue-primary, #0071e3);
  border-bottom: 2px solid var(--bspc-blue-primary, #0071e3);
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.bspc-faq-accordion .faq-question.active::after,
.bspc-faq-accordion .faq-question[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.bspc-faq-accordion .faq-answer {

  margin-top: 0.5rem;
  color: var(--bspc-text-secondary, #6b6b6f);
  font-size: 0.95rem;
  line-height: 1.6;
}
.bspc-faq-accordion .faq-answer p:last-child {
  margin-bottom: 0;
}

/*
 * La sezione .faq-cta è stata rimossa nel markup del prodotto. Le
 * regole originali vengono conservate commentate come riferimento.
 *
 * .bspc-faq-accordion .faq-cta {
 *   margin-top: 2.5rem;
 *   padding: 2rem 1.5rem;
 *   background: linear-gradient(135deg, #0071e3, #00c3ff);
 *   border-radius: 20px;
 *   color: #ffffff;
 *   text-align: center;
 * }
 * .bspc-faq-accordion .faq-cta h4 {
 *   margin: 0 0 0.5rem;
 *   font-size: 1.4rem;
 *   font-weight: 700;
 * }
 * .bspc-faq-accordion .faq-cta p {
 *   margin: 0 0 1.5rem;
 *   font-size: 1rem;
 *   color: rgba(255, 255, 255, 0.9);
 * }
 * .bspc-faq-accordion .faq-cta .faq-cta-button {
 *   display: inline-block;
 *   padding: 0.75rem 1.5rem;
 *   font-size: 1rem;
 *   font-weight: 600;
 *   border-radius: 12px;
 *   background-color: rgba(255, 255, 255, 0.15);
 *   color: #ffffff;
 *   border: 2px solid rgba(255, 255, 255, 0.6);
 *   text-decoration: none;
 *   transition: background-color 0.2s ease, transform 0.15s ease;
 * }
 * .bspc-faq-accordion .faq-cta .faq-cta-button:hover,
 * .bspc-faq-accordion .faq-cta .faq-cta-button:focus-visible {
 *   background-color: rgba(255, 255, 255, 0.25);
 *   transform: translateY(-2px);
 *   outline: none;
 * }
 */

@media (max-width: 768px) {
  /*
   * In precedenza su mobile venivano riassegnati padding e font-size
   * anche per elementi non più presenti (es. h3 e .faq-cta). Per evitare
   * conflitti e duplicazioni lasciamo solo il padding responsivo della
   * sezione principale. Altre dimensioni vengono gestite dalla regola
   * desktop o dal markup.
   */
  .bspc-faq-accordion {
    padding: 1.5rem 1rem;
  }
}

/*
 * Collegamento "Mostra tutte le FAQ" (footer della sezione FAQ)
 */
.bspc-faq-accordion .faq-more-link {
  margin-top: 2rem;
  text-align: center;
}
.bspc-faq-accordion .faq-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: var(--bspc-radius-medium, 16px);
  background: var(--bspc-blue-primary, #0071e3);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.15);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  min-width: 180px;
}
.bspc-faq-accordion .faq-more-btn:hover,
.bspc-faq-accordion .faq-more-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.25);
  outline: none;
}
@media (max-width: 768px) {
  .bspc-faq-accordion .faq-more-btn {
    width: 100%;
    min-width: 0;
  }
}