/* =========================================================
   myPATCH Preventivi - mpp.css (UNIFICATO)
   - Stile form (vecchio)
   - Stile intro mp-quote-box (vecchio)
   - Zoom con Font Awesome + Lightbox + X grossa
   - Spinner loading (vecchio)
   ========================================================= */

.mpp-wrap{max-width:1100px;margin:0 auto;padding:18px 12px;font-family:Arial, sans-serif;}
.mpp-card{background:#fff;border-radius:14px;box-shadow:0 6px 22px rgba(0,0,0,.08);overflow:hidden;border:1px solid rgba(0,0,0,.08);}
.mpp-head{padding:18px 18px 10px;border-bottom:1px solid rgba(0,0,0,.06);}
.mpp-title{font-size:22px;font-weight:800;color:#111;}
.mpp-sub{margin-top:6px;color:#556;line-height:1.35}

.mpp-intro{margin-bottom:14px;}

.mpp-step{padding:16px 18px 10px;}
.mpp-step-title{font-weight:800;margin-bottom:10px;}

.mpp-models{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.mpp-model{
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  padding:10px;
  background:#fafafa;
  text-align:left;
  cursor:pointer;
  transition:.15s;
  position: relative;
}
.mpp-model:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.08);}
.mpp-model.is-active{outline:2px solid #383e31;background:#f3f5f1;}

.mpp-model-imgwrap{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  position: relative; /* serve allo zoom */
}
.mpp-model-img{width:100%;height:100%;object-fit:cover;display:block;}
.mpp-model-imgplaceholder{font-weight:800;color:#777;font-size:12px;}

.mpp-model-name{
  font-weight:900;
  color:#111;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.2px;
  margin-bottom:4px;
}
.mpp-model-min{font-size:12px;color:#566;}

.mpp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 18px 14px;}
.mpp-field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:#111;}
.mpp-field input,.mpp-field select,.mpp-field textarea{width:100%;border:1px solid rgba(0,0,0,.18);border-radius:10px;padding:10px 10px;font-size:14px;}
.mpp-field-full{grid-column:1/-1;}
.mpp-help{display:block;margin-top:6px;color:#667;font-size:12px;}

.mpp-summary{padding:0 18px 14px;}
.mpp-summary-inner{border:1px dashed rgba(0,0,0,.2);border-radius:12px;padding:12px;background:#fbfbfd;}
.mpp-summary-title{font-weight:900;margin-bottom:6px;}
.mpp-summary-row{margin:4px 0;color:#223;}

.mpp-actions{display:flex;align-items:center;gap:12px;padding:12px 18px 18px;}
.mpp-btn{border:0;border-radius:12px;padding:12px 16px;background:#383e31;color:#fff;font-weight:800;cursor:pointer;position:relative;}
.mpp-btn:hover{filter:brightness(1.05);}
.mpp-msg{font-size:13px;color:#444;}
.mpp-msg.is-error{color:#b00020;font-weight:700;}
.mpp-msg.is-ok{color:#1b6b2a;font-weight:700;}

@media (max-width: 900px){
  .mpp-models{grid-template-columns:repeat(2,1fr);}
  .mpp-grid{grid-template-columns:1fr;}
}

/* =========================================================
   INTRO BOX (mp-quote-box)
   ========================================================= */
.mp-quote-box{
  font-family: Arial, sans-serif;
  color:#1f2a37;
  font-size:0.95em;
  background:#fff;
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  margin:0 0 18px 0;
}

.mp-quote-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.mp-quote-title{
  margin:0;
  font-size:1.2em;
  font-weight:900;
  color:#111;
  display:flex;
  align-items:center;
  gap:10px;
}

.mp-quote-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  background:#0b5ed7;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  font-weight:900;
  border:1px solid rgba(11,94,215,0.35);
  box-shadow:0 6px 14px rgba(11,94,215,0.18);
  white-space:nowrap;
}
.mp-quote-btn:hover{ filter:brightness(0.98); }

.mp-quote-desc{
  margin:0 0 12px 0;
  line-height:1.55;
  color:#374151;
}

.mp-quote-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.mp-card{
  border-radius:12px;
  padding:12px;
  border:1px solid rgba(0,0,0,0.08);
  background:#f8fafc;
}

.mp-card h4{
  margin:0 0 6px 0;
  font-size:1.02em;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:8px;
  color:#111;
}

.mp-card p{
  margin:0;
  line-height:1.5;
  color:#1f2a37;
}

.mp-card--info{ background:#e6f7ff; border-color:rgba(41,128,185,0.18); }
.mp-card--warn{ background:#fff7ed; border-color:rgba(245,158,11,0.22); }
.mp-card--danger{ background:#ffebee; border-color:rgba(229,57,53,0.20); }

.mp-price-title{
  font-weight:900;
  margin:0 0 8px 0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#111;
}

.mp-table{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.mp-table-head, .mp-table-row{
  display:flex;
  gap:10px;
  padding:10px 12px;
  align-items:center;
}

.mp-table-head{
  background:#111827;
  color:#fff;
  font-weight:900;
}

.mp-table-row{
  border-top:1px solid rgba(0,0,0,0.06);
}

.mp-col-type{ flex:1; font-weight:800; }
.mp-col-price{ width:120px; text-align:right; font-weight:900; }

.mp-note{
  margin-top:8px;
  font-size:0.9em;
  color:#6b7280;
  line-height:1.4;
}

.mp-ok{
  background:#ecfdf5;
  border:1px solid rgba(16,185,129,0.22);
  border-radius:12px;
  padding:12px;
  color:#064e3b;
}

.mp-ok-title{
  margin:0 0 6px 0;
  font-size:1.02em;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:8px;
  color:#065f46;
}

.mp-ico-blue{ color:#0b5ed7; }
.mp-ico-green{ color:#10b981; }
.mp-ico-info{ color:#2980b9; }
.mp-ico-warn{ color:#f59e0b; }
.mp-ico-danger{ color:#e53935; }

@media (max-width: 820px){
  .mp-quote-cards{ grid-template-columns:1fr; }
  .mp-quote-btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  /* se vuoi mantenere lo spostamento: ok, ma è "aggressivo".
     Lasciato come nel tuo vecchio per non rompere layout mobile. */
  .mpp-intro {position: relative; top: -40px !important}
}
.mp-full{ margin-top:10px; }
.mp-price-block{ background:transparent; }

/* =========================================================
   ZOOM (Font Awesome) + LIGHTBOX + X grossa centrata
   ========================================================= */
.mpp-zoom{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,24,39,.82);
  color:#fff;
  cursor:pointer;
  z-index:2;
  user-select:none;
  transition:transform .12s ease, background .12s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.mpp-zoom i{font-size:15px;line-height:1;}
.mpp-zoom:hover{transform:scale(1.06);background:rgba(17,24,39,.92);}
.mpp-zoom:focus{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;}

.mpp-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.mpp-lightbox.is-open{display:flex;}
.mpp-lightbox-inner{
  position:relative;
  max-width:min(980px,96vw);
  max-height:90vh;
}
.mpp-lightbox-img{
  display:block;
  max-width:100%;
  max-height:90vh;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}

/* X grossa centrata in cerchio */
.mpp-lightbox-close{
  position:absolute;
  top:-18px;
  right:-18px;
  width:52px;
  height:52px;
  border-radius:999px;
  border:none;
  background:rgba(17,24,39,.92);
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.mpp-lightbox-close i{font-size:26px;line-height:1;}
.mpp-lightbox-close:hover{transform:scale(1.04);}

/* =========================================================
   Loading state + spinner (come tuo vecchio)
   ========================================================= */
.mpp-btn.is-loading {
  opacity: 0.85;
  pointer-events: none;
}
.mpp-btn .mpp-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: rgba(255,255,255,1);
  border-radius: 50%;
  animation: mppSpin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 10px;
}
.mpp-btn.is-loading .mpp-spinner { display: inline-block; }
@keyframes mppSpin { to { transform: rotate(360deg); } }