/*
 * Quote Modal (Category) — A11Y + UX
 */

/* Root container */
.bpc-modal {
  border: 0;
  background: transparent;
  max-width: none;
  width: 100%;
  margin: 0;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top, 20px) 16px env(safe-area-inset-bottom, 20px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;

  /* Contain overscroll to prevent scrolling the page under the modal */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Ensure the modal uses the full viewport height with dvh fallback */
  min-height: 100dvh;
  min-height: 100vh;
}

body.bpc-modal-open .bpc-modal {
  opacity: 1;
  visibility: visible;
}

.bpc-modal[hidden] {
  display: none;
}

/* Native <dialog> backdrop */
.bpc-modal::backdrop {
  background: rgba(17, 17, 17, 0.6);
  /* Applichiamo lo stesso livello di blur dei modali appuntamento
     per uniformare l'estetica generale. */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* Overlay */
.bpc-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(17, 17, 17, 0.6);
  /* Uniformiamo l'effetto blur al modale appuntamenti: 12px anziché 8px */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* Disable blur on overlay for small screens to reduce paint cost */
@media (max-width: 768px) {
  .bpc-modal::backdrop,
  .bpc-modal__overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Dialog (Desktop) */
.bpc-modal__dialog {
  position: relative;
  z-index: 1;
  /* Allinea la larghezza al modale appuntamenti */
  width: min(760px, 94vw);
  /* Use dynamic viewport height (dvh) first with fallback */
  max-height: calc(100dvh - 40px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  padding: 28px 24px;
  box-sizing: border-box;
  transform: scale(0.95);
  /* Mantiene transizione coerente con il modale appuntamenti */
  transition: transform 0.3s ease;
}

body.bpc-modal-open .bpc-modal__dialog {
  transform: scale(1);
}

.bpc-modal__handle {
  display: none;
}

/* Dialog (Mobile Bottom Sheet) */
@media (max-width: 768px) {
  .bpc-modal {
    align-items: flex-end;
    padding: 0;
  }
  
  .bpc-modal__dialog {
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }

  body.bpc-modal-open .bpc-modal__dialog {
    transform: translateY(0);
  }

  .bpc-modal__handle {
    display: block;
    width: 40px;
    height: 5px;
    background-color: #e5e5ea;
    border-radius: 10px;
    margin: -10px auto 20px auto;
  }
}

/*
 * Pulsante di chiusura — uniformato allo stile delle modali di appuntamento.
 */
.bpc-modal__close {
  position: absolute;
  /* Include safe-area insets for devices with notch/dynamic island */
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #f3f4f6;
  /* Aumentiamo la dimensione del carattere e la line-height per centrare meglio la «×»
     e riflettere il design del pulsante di chiusura delle modali di appuntamento. */
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Non impostiamo un colore esplicito: lasciamo che erediti dal contesto
     per una coerenza cromatica con il resto del sito. */
  color: inherit;
  transition: background 0.2s;
}

.bpc-modal__close:hover {
  background: #e5e7eb;
}

/* ====================================================================
 * Accessibilità: rispetto delle preferenze di riduzione movimento
 * Disattiviamo transizioni e animazioni per gli utenti che hanno attivato
 * 'prefers-reduced-motion'.
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bpc-modal,
  .bpc-modal__dialog,
  .bpc-modal__overlay,
  .bpc-modal::backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* Header */
.bpc-modal__title {
  /* Mantenere margini più compatti come nelle modali di appuntamento */
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: #1d1d1f;
  padding-right: 40px;
}

.bpc-modal__intro {
  /* Riduciamo il margine inferiore per uniformarlo alle modali di appuntamento */
  margin: 0 0 18px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  /* Testo leggermente più tenue per seguire lo stile delle note nei modali di appuntamento */
  opacity: 0.8;
}

/* Form layout helpers */
.bpc-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .bpc-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bpc-field {
  /* Riduciamo lo spazio verticale tra i campi per un layout più compatto */
  margin-bottom: 12px;
}

.bpc-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
  color: #1d1d1f;
}

/* Stile Input e Textarea (Apple Style) */
.bpc-field input[type="text"],
.bpc-field input[type="email"],
.bpc-field input[type="tel"],
.bpc-field textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 12px 14px;
  font-size: 15px;
  outline: 0;
  background-color: #f9fafb;
  color: #111827;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bpc-field textarea {
  resize: vertical;
}

.bpc-field input:focus,
.bpc-field textarea:focus {
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .15);
}

/* -------------------------------------------------------------------------
 * Override autofill: su alcuni browser (Safari/iOS) i campi compilati
 * automaticamente assumono uno sfondo bluastro; forziamo il background
 * al colore previsto (bianco) per mantenere coerenza di design.
 * ---------------------------------------------------------------------- */
.bpc-field input:-webkit-autofill,
.bpc-field select:-webkit-autofill,
.bpc-field textarea:-webkit-autofill {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
}

.bpc-form-file input[type="file"] {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

/* Checkbox Privacy */
.bpc-privacy-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 24px;
  line-height: 1.4;
  color: #444;
}

.bpc-privacy-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #0a84ff;
  cursor: pointer;
}

/* Bottone Submit */
.bpc-modal__submit {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0a84ff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.bpc-modal__submit:hover {
  background: #0071e3;
}

/* Feedback */
.bpc-modal__feedback {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.bpc-modal__feedback--success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.bpc-modal__feedback--error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~            QUOTE MODAL - UI UNIFICATA (PRODOTTI)             ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bpc-modal .bpc-modal__dialog {
  /* Allineiamo il design del modale categorie a quello degli appuntamenti:
     bordi più morbidi, larghezza massima ridotta e ombra più lieve. */
  border-radius: 22px;
  background: #fff;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 16px 60px rgba(0,0,0,.18);
}

.bpc-modal__header { padding-bottom: 10px; }
.bpc-modal__title { letter-spacing: -0.02em; }
.bpc-modal__intro { margin-top: 6px; }

.bpc-modal__meta {
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 12px;
  margin: 12px 0 14px;
}

.bpc-meta-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 8px 6px;
}
.bpc-meta-row + .bpc-meta-row { border-top: 1px solid rgba(0,0,0,.06); }

.bpc-meta-txt strong { font-weight: 700; margin-right: 6px; }
.bpc-meta-link { margin-left: 10px; font-weight: 700; text-decoration: none; }

.bpc-meta-ok {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 8px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-weight: 600;
}

/* ICONS (SVG INLINE) */
.bpc-meta-ico {
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center;
}

.bpc-ico-pin  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/%3E%3C/svg%3E"); }
.bpc-ico-cal  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 15H5V10h14zm0-11H5V6h14z'/%3E%3C/svg%3E"); }
.bpc-ico-bag  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3v15H4V7zm2 0h6V6a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); }
.bpc-ico-check{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }

/* INPUT ICON STYLE (COME APPUNTAMENTO) */
.bpc-field { position: relative; }
.bpc-field::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 40px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  opacity: .9;
}

.bpc-field input,
.bpc-field textarea {
  padding-left: 44px;
  border-radius: 14px;
}

.bpc-field.icon-user::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.33 0-8 2.17-8 5v1h16v-1c0-2.83-3.67-5-8-5z'/%3E%3C/svg%3E"); }
.bpc-field.icon-phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.72 11.72 0 0 0 3.68.59 1 1 0 0 1 1 1V21a1 1 0 0 1-1 1A17 17 0 0 1 3 8a1 1 0 0 1 1-1h3.47a1 1 0 0 1 1 1 11.72 11.72 0 0 0 .59 3.68 1 1 0 0 1-.24 1.01z'/%3E%3C/svg%3E"); }
.bpc-field.icon-mail::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); }
.bpc-field.icon-city::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z'/%3E%3C/svg%3E"); }
.bpc-field.icon-device::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M17 1H7a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm-5 21a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 12 22z'/%3E%3C/svg%3E"); }
.bpc-field.icon-serial::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M4 4h16v4H4zm0 6h10v4H4zm0 6h16v4H4z'/%3E%3C/svg%3E"); }
.bpc-field.icon-note::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%236e6e73'%3E%3Cpath d='M4 4h16v16H4zM6 8h12v2H6zm0 4h12v2H6z'/%3E%3C/svg%3E"); }

/* MOBILE: PIU COMPATTO */
@media (max-width: 520px) {
  .bpc-modal .bpc-modal__dialog { border-radius: 20px; }
  .bpc-modal__meta { padding: 10px; }
}