/* ==========================================================================
   Modale "lascia una recensione" — aperto dal pulsante "Review" della pagina prodotto.
   Markup + JS in mu-plugins/pmc-product-reviews-modal.php: dentro il modale va SOLO
   il form (#respond), spostato non duplicato; l'elenco delle recensioni resta in pagina.
   Auto-caricato dal loader ricorsivo Impreza. Scope: .pmc-review-modal.
   Token (come checkout/mini-cart):
     Dark charcoal #080707 · Charcoal #3F3A35 · Light charcoal #766F67
     Ashes (bordo) #DCD4CD · Crema #F9F1E3 · Stelle #F5B301 (come rating store header)
   ========================================================================== */

/* Elenco recensioni in pagina: nascosto. La classe la mette il JS dopo aver
   spostato il form nel modale (senza JS resta tutto visibile). */
.pmc-reviews-hidden { display: none !important; }

.pmc-review-modal {
  --pmc-rm-dark: #080707;
  --pmc-rm-charcoal: #3f3a35;
  --pmc-rm-light: #766f67;
  --pmc-rm-ashes: #dcd4cd;
  --pmc-rm-cream: #f9f1e3;
  --pmc-rm-star: #f5b301;
  --pmc-rm-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --pmc-rm-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pmc-review-modal[hidden] { display: none; }

.pmc-review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 7, .5);
}
html.pmc-review-modal-open { overflow: hidden; }

.pmc-review-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  border-radius: 24px;
  background: var(--pmc-rm-cream);
  font-family: var(--pmc-rm-sans);
  color: var(--pmc-rm-charcoal);
}

/* ---- Close × ---- */
.pmc-review-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pmc-rm-dark);
  cursor: pointer;
  box-shadow: none !important;
}
.pmc-review-modal__close:hover { background: rgba(8, 7, 7, .06); }

/* ---- Contenitore form: il tema lo disegna come card bianca, qui è trasparente
        perché la card è già il modale ---- */
.pmc-review-modal #respond,
.pmc-review-modal .comment-respond {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Titolo "Be the first to review …" / "Leave a Reply" */
.pmc-review-modal .comment-reply-title {
  display: block;
  margin: 0 40px 24px 0;
  font-family: var(--pmc-rm-serif);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--pmc-rm-dark);
}
.pmc-review-modal .comment-reply-title small { display: block; margin-top: 4px; font-size: 14px; }

.pmc-review-modal .comment-notes,
.pmc-review-modal .comment-form-cookies-consent label,
.pmc-review-modal .woocommerce-verification-required {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pmc-rm-light);
}
.pmc-review-modal .woocommerce-verification-required { margin: 0; }

.pmc-review-modal .comment-form p { margin: 0 0 20px; }
.pmc-review-modal .comment-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pmc-rm-charcoal);
}
.pmc-review-modal .comment-form .required { color: var(--pmc-rm-light); }

/* ---- Stelle gialle ----
   Quale stella è piena e quale vuota lo decide il tema/WooCommerce cambiando
   glifo su p.stars a::before (classi .selected/.active): qui si dà il colore.

   Impreza (common/css/plugins/woocommerce.css) rimette `color: inherit` su
   `.no-touch .woocommerce .stars a:hover`, `.stars > span:hover a` e
   `.stars a:hover ~ a` / `.stars a.active ~ a`: in hover le stelle tornavano
   quindi al colore del testo (nere). Serve coprire quegli stessi stati, con
   !important perché il prefisso `.no-touch` alza la specificità del tema.
   L'opacità .5 che il tema mette sulle stelle dopo quella puntata resta: sono
   comunque gialle, solo più tenui. */
.pmc-review-modal .comment-form-rating .stars {
  margin: 0 0 4px;
  font-size: 22px;
  color: var(--pmc-rm-star) !important; /* così anche `inherit` cade sul giallo */
}
.pmc-review-modal .comment-form-rating .stars span,
.pmc-review-modal .comment-form-rating .stars a,
.pmc-review-modal .comment-form-rating .stars a:hover,
.pmc-review-modal .comment-form-rating .stars a:focus,
.pmc-review-modal .comment-form-rating .stars a.active,
.pmc-review-modal .comment-form-rating .stars > span:hover a,
.pmc-review-modal .comment-form-rating .stars a:hover ~ a,
.pmc-review-modal .comment-form-rating .stars a.active ~ a,
.pmc-review-modal .comment-form-rating .stars.selected a,
.pmc-review-modal .comment-form-rating .stars.selected a.active,
.pmc-review-modal .comment-form-rating .stars.selected a:not(.active) {
  color: var(--pmc-rm-star) !important;
}

/* ---- Campi: stessi bordi/raggi del checkout (Ashes 1px, radius 12px, fondo bianco).
        Altezza fissata: senza questa il tema Impreza gonfia gli input. ---- */
.pmc-review-modal .comment-form input[type="text"],
.pmc-review-modal .comment-form input[type="email"],
.pmc-review-modal .comment-form input[type="url"] {
  width: 100%;
  height: 48px;
  padding: 0 16px !important;
  border: 1px solid var(--pmc-rm-ashes) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-family: var(--pmc-rm-sans);
  font-size: 16px;
  line-height: 1.4 !important;
  color: var(--pmc-rm-dark) !important;
  box-shadow: none !important;
}
.pmc-review-modal .comment-form textarea {
  width: 100%;
  min-height: 128px;
  padding: 12px 16px !important;
  border: 1px solid var(--pmc-rm-ashes) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-family: var(--pmc-rm-sans);
  font-size: 16px;
  line-height: 1.4 !important;
  color: var(--pmc-rm-dark) !important;
  resize: vertical;
  box-shadow: none !important;
}
.pmc-review-modal .comment-form input:focus,
.pmc-review-modal .comment-form textarea:focus {
  border: 1px solid var(--pmc-rm-dark) !important;
  outline: none !important;
}
.pmc-review-modal .comment-form ::placeholder { color: var(--pmc-rm-light); }

/* ---- Submit: il JS sostituisce l'<input> con un <button.w-btn.us-btn-style_1>,
        quindi eredita il pulsante primario del tema (fondo, bordo a gradiente,
        hover). Qui solo dimensioni e allineamento. ---- */
.pmc-review-modal .comment-form .form-submit { margin: 24px 0 0; }
.pmc-review-modal .pmc-review-submit {
  min-width: 160px;
  cursor: pointer;
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .pmc-review-modal { padding: 12px; }
  .pmc-review-modal__box {
    max-height: 92vh;
    padding: 32px 20px 24px;
    border-radius: 20px;
  }
  .pmc-review-modal__close { top: 12px; right: 12px; }
  .pmc-review-modal .comment-reply-title { font-size: 20px; margin-right: 32px; }
  .pmc-review-modal .pmc-review-submit { width: 100%; }
}