/* HYTEL – Redesign SOLO CSS (desktop) */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800&display=swap');

:root{
  --blue-600:#0b6cfb; --blue-700:#0a5fe0; --blue-050:#f2f7ff;
  --bg:#f7f9fc; --card:#ffffff; --ink:#0f172a; --muted:#5b6474; --line:#e6ebf2;
  --ok-bg:#eaf7ed; --ok-bd:#c7eacb; --ok-tx:#166534;
  --shadow-xs:0 3px 10px rgba(13,23,45,.06);
  --shadow-sm:0 8px 24px rgba(13,23,45,.08);
  --radius:14px;
}

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hytel-vc.container{ max-width:1100px; }
.brand-logo-img{ width:56px; height:auto; }
.page-title{ margin:0; font-weight:800; font-size:2.05rem; letter-spacing:.2px; }
.hytel-vc .text-muted{ color:var(--muted)!important; }

/* Card generiche */
.hytel-vc .card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow-xs);
}
.hytel-vc .card .card-body{ padding:2rem; }
.hytel-vc .card-title{
  margin:0 0 1rem;
  font-size:.95rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#6a7383;
}

/* ===== Form sinistro ===== */
.field-underline{ margin-bottom:1.5rem; }
.form-label-underline{
  display:block; font-size:.83rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#7a8393; margin-bottom:.4rem;
}
.form-control-underline{
  width:100%; background:transparent; border:none; border-bottom:2px solid var(--line); border-radius:0;
  padding:.7rem .1rem .6rem; font-size:1.05rem; color:var(--ink);
  outline:none; transition:border-color .18s ease, box-shadow .18s ease;
}
.form-control-underline::placeholder{ color:#a3adba; }
.form-control-underline:focus{ border-color:var(--blue-600); box-shadow:0 8px 0 -6px var(--blue-600); }

/* Autocomplete */
.sugg-box{ position:relative; }
.sugg-box.show{ display:block; }
.sugg-box:not(.show){ display:none; }
.sugg-box .sugg-item{
  background:#fff; border:1px solid var(--line); border-top:none; padding:.65rem .9rem; cursor:pointer;
  font-weight:800; text-transform:uppercase; color:var(--blue-600); letter-spacing:.02em;
}
.sugg-box .sugg-item:hover, .sugg-box .sugg-item.active{ background:#e9f1ff; }

/* Bottone verifica */
.btn-verify{ border-radius:12px; box-shadow:var(--shadow-xs); }
.btn-verify:focus{ outline:2px solid transparent; box-shadow:0 0 0 4px rgba(11,108,251,.25); }

/* ===== CTA ===== */
.cta-title{ font-weight:900; font-size:1.1rem; margin:0 0 1rem; color:#0b285c; }
.cta-buttons{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.btn-cta{
  display:flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1rem .9rem; border:1px solid var(--line); border-radius:12px;
  background:#f9fbff; color:#0b1a35; font-weight:800; text-decoration:none;
  box-shadow:var(--shadow-xs);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); background:#fff; }
.btn-cta .cta-icn{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
.btn-cta-mail .cta-icn{ background:#eaf1ff; color:var(--blue-600); }
.btn-cta-wa   .cta-icn{ background:#e7fff6; color:#17a07a; }
.btn-cta-call .cta-icn{ background:#0f172a; color:#fff; }

/* ===== Pannello esito a destra ===== */
.result-panel{
  background:#EEF4FF;               /* azzurrino morbido */
  border:1px solid #D8E3FF;
  box-shadow:var(--shadow-sm);
}
/* badge header (quello a destra del titolo) nascosto come da design */
.result-panel .results-header .pill{ display:none !important; }
#status{ color:var(--muted); }

/* >>> MODIFICA 1: nascondi titolo e riga "Verifica completata." dopo l'esito */
.result-panel:has(#summary .summary-card) .results-header,
.result-panel:has(#summary .summary-card) #status{
  display:none !important;
}

/* Pill generiche (usate nel riepilogo) */
.pill{ border-radius:999px; padding:.38rem .9rem; font-size:.8rem; font-weight:900; background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-tx); }
.pill.bad{ background:#ffeceb; border-color:#ffcbc7; color:#9a1e1e; }
.pill.warn{ background:#fff7e6; border-color:#ffe0a3; color:#8a5700; }

/* --- Summary header: Complimenti + badge tech + Disponibile --- */
.summary-card{ border:1px solid #dfe9ff; border-radius:var(--radius); background:#ffffff; box-shadow:var(--shadow-xs); }
.summary-header{ display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; margin-bottom:.25rem; min-width:0; }
.summary-title{ margin:0; font-size:1.45rem; font-weight:900; letter-spacing:.2px; color:#0b57d0; line-height:1.2; display:flex; align-items:center; }
.summary-sub{ color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-header .status-badge{ margin-left:auto; padding:.22rem .60rem; font-size:.78rem; }

/* Badge tecnologia (varianti) */
.tech-badge{ display:inline-flex; align-items:center; padding:.28rem .65rem; border-radius:999px; font-weight:900; font-size:.78rem; border:1px solid #d5e5ff; background:#eef5ff; color:#123d8b; }
.tech-badge.tech-ftth{ border-color:#eadcff; background:#f5efff; color:#6b21a8; }
.tech-badge.tech-evdsl{ border-color:#d5e5ff; background:#eef5ff; color:#123d8b; }
.tech-badge.tech-vdsl { border-color:#d5e5ff; background:#eef5ff; color:#123d8b; }
.tech-badge.tech-fwa  { border-color:#ffe3c9; background:#fff3e7; color:#8a3a0c; }
.tech-badge.tech-adsl { border-color:#e5e7eb; background:#f5f6f7; color:#374151; }

/* Infografiche */
.infographic{ display:block; }
.offer-card{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:1.6rem; text-align:center; box-shadow:var(--shadow-xs); }
.offer-sep{ border:none; border-top:4px solid #eef2f7; margin:.5rem 0 1.1rem; }
.offer-card.offer-ftth{ border-top:5px solid #6b46c1; }
.offer-card.offer-radio{ border-top:5px solid #dd6b20; }
.offer-title{ font-size:1.28rem; font-weight:900; margin:.2rem 0 .8rem; color:#1e293b; letter-spacing:.3px; }
.offer-circle{ width:170px; height:170px; border-radius:50%; margin:.2rem auto 1rem; display:grid; place-items:center; border:12px solid rgba(11,108,251,.16); background:linear-gradient(180deg,#f1f6ff 0%, #fff 100%); box-shadow: inset 0 8px 24px rgba(11,108,251,.06); }
.offer-circle span{ font-weight:900; font-size:1.1rem; color:#0b1a35; }
.offer-pricewrap{ margin:1rem 0 .45rem; }
.offer-start{ display:block; font-size:.95rem; color:#6c7b8c; }
.offer-price{ display:block; font-weight:900; font-size:3rem; line-height:1.06; color:#0b1120; letter-spacing:-.5px; }

/* >>> MODIFICA 2: Attivazione/Durata più piccoli, bold e su una riga */
.offer-foot{
  display:flex; gap:1.1rem; justify-content:center; align-items:center;
  color:#556070; font-size:.95rem;
}
.offer-foot p{
  position:relative; padding-left:32px; margin:0; line-height:1.4;
  font-weight:800;          /* bold */
  font-size:.90rem;         /* un po' più piccolo */
  white-space:nowrap;       /* niente a capo */
}
/* icone via CSS (già presenti) – le rimpiccioliamo un filo per non spezzare la linea */
.offer-foot p::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scale(.9);
  width:22px; height:22px; border-radius:6px; background:#eef3ff; box-shadow:inset 0 0 0 1px #dfe7ff;
  mask-size:16px 16px; -webkit-mask-size:16px 16px; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-position:center; -webkit-mask-position:center; background-color:#5a6b86;
}
/* carta */
.offer-foot p:first-child::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2' ry='2'/><line x1='2' y1='10' x2='22' y2='10'/><line x1='6' y1='16' x2='8' y2='16'/><line x1='10' y1='16' x2='14' y2='16'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2' ry='2'/><line x1='2' y1='10' x2='22' y2='10'/><line x1='6' y1='16' x2='8' y2='16'/><line x1='10' y1='16' x2='14' y2='16'/></svg>");
}
/* calendario */
.offer-foot p:last-child::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

/* Extra rame, dettagli, shimmer (immutati) */
.best-extra{ margin-top:.95rem; }
.best-extra-inner{ border:1px dashed var(--line); border-radius:14px; padding:1rem; background:#fff; }
.chip{ padding:.25rem .65rem; border-radius:999px; font-weight:900; font-size:.77rem; border:1px solid #d5e5ff; background:#eef5ff; color:#123d8b; }
.chip-accent{ border-color:#ffd8b9; background:#fff6ec; color:#8a3a0c; }
.best-title{ font-size:1.02rem; font-weight:800; color:#0b1a35; }
.best-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-top:.55rem; }
.metric{ border:1px solid var(--line); border-radius:12px; padding:.8rem .85rem; background:#fff; }
.metric-k{ font-size:.82rem; color:#6b7280; }
.metric-v{ font-weight:900; font-size:1.08rem; color:#101828; }

#result .soft-card{ border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:.8rem; box-shadow:var(--shadow-xs); }

.details-toggle-wrap{ text-align:center; }
#toggle-details{ color:var(--blue-600); font-weight:900; }
#toggle-details:hover{ text-decoration:underline; }

/* CTA shimmer */
.cta-section.show{ animation:ctaFade .28s ease-out both; }
@keyframes ctaFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.cta-shimmer{ border:1px solid var(--line); border-radius:14px; padding:1rem; background:#fff; }
.shimmer-line{ height:16px; border-radius:8px; background:linear-gradient(90deg,#eff4fa,#e9eef5,#eff4fa); background-size:200% 100%; animation:shimmer 1.1s infinite linear; }
.shimmer-title{ width:58%; margin-bottom:.9rem; }
.shimmer-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.shimmer-btn{ height:50px; border-radius:12px; background:linear-gradient(90deg,#eff4fa,#e9eef5,#eff4fa); background-size:200% 100%; animation:shimmer 1.1s infinite linear; }
@keyframes shimmer{ 0%{background-position:0% 0} 100%{background-position:200% 0} }

/* Consenti il ritorno a capo solo alla seconda voce (Durata minima) */
.offer-foot{
  flex-wrap: wrap;           /* permette di andare a capo quando serve */
  column-gap: 1rem;          /* spazio orizzontale tra le voci */
  row-gap: .35rem;           /* spazio verticale quando va a capo */
}

.offer-foot p{
  white-space: nowrap;       /* di default restano su una riga */
}

/* Eccezione: "Durata minima" può andare a capo se necessario */
.offer-foot p:last-child{
  white-space: normal;       /* consenti wrapping */
  max-width: 100%;
  word-break: break-word;
}

/* Nascondi il toggle "Mostra informazioni aggiuntive" ovunque */
.details-toggle-wrap,
#toggle-details{
  display: none !important;
}

/* Nascondi il logo a sinistra del titolo */
.hytel-vc .brand-logo-img{
  display: none !important;
}

/* Riduci lo spazio orizzontale lasciato dal logo */
.hytel-vc > .d-flex.align-items-center.gap-3{
  gap: .5rem !important;   /* prima era 1rem (gap-3) */
}

.hytel-vc .hytel-logo2 {
  display: block;
  max-width: 300px;    /* non supera mai 140px */
  height: auto;        /* mantiene proporzioni */
  margin: 0 0 1rem 0;
}