/* =====================================================================
   FibraMap - Autocompletamento censito + risultati copertura
   Estende styles-fibramap; usa gli stessi token di :root
   ===================================================================== */

/* ---- Campo combobox ---- */
.address-field { position: relative; transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.address-field.is-valid { border-color: #23a06b; box-shadow: 0 0 0 3px rgba(35,160,107,.10); }
.address-field.is-valid::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  background: #23a06b; border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.address-field.has-error { border-color: #e0483d; box-shadow: 0 0 0 3px rgba(224,72,61,.10); }
.address-field.has-error::before {
  content: attr(data-error); position: absolute; left: 2px; top: calc(100% + 6px); z-index: 5;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; color: #d23a2f; white-space: nowrap;
}
/* lascia spazio sotto la riga di ricerca cosi' il messaggio di errore
   non si sovrappone alla nota "Verifica gratuita" */
.search-card .search-note { margin-top: 26px; }
.address-field.is-disabled { opacity: .5; background: #f4f7fb; }
.address-field.is-disabled input { cursor: not-allowed; }
.address-field.is-loading::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
  border: 2px solid rgba(26,75,230,.25); border-top-color: var(--blue); border-radius: 50%;
  animation: acSpin .7s linear infinite;
}
@keyframes acSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* ---- Lista suggerimenti ---- */
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #dbe6f4; border-radius: 11px;
  box-shadow: 0 20px 44px rgba(21,68,124,.16);
  max-height: 288px; overflow-y: auto; text-align: left;
}
.ac-list[hidden] { display: none; }
.ac-list-num { min-width: 150px; }
.ac-item {
  display: flex; align-items: baseline; gap: 9px; padding: 10px 12px; border-radius: 7px;
  cursor: pointer; font-size: 14px; color: #243a58; line-height: 1.25;
}
.ac-item:hover, .ac-item.is-active { background: var(--pale); }
.ac-item .ac-main { font-weight: 600; }
.ac-item .ac-sub { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #8a98ad; text-transform: uppercase; }
.ac-empty { padding: 12px; font-size: 13px; color: #9aa7b8; }

/* ---- Sezione risultati ---- */
.coverage-results-section { background: #f6f9fd; border-top: 1px solid #e6eef8; }
.coverage-results-section[hidden] { display: none; }
.coverage-results-inner { max-width: 1180px; margin: 0 auto; padding: 78px 28px 96px; }

.cov-head { margin-bottom: 34px; }
.cov-head h2 { margin: 12px 0 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -1.6px; color: var(--ink); }
.cov-addr { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: #40597e; }
.cov-msg { max-width: 620px; color: #62748c; line-height: 1.7; font-size: 15px; }
.cov-retry { margin-top: 22px; height: 46px; padding: 0 24px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .05em; cursor: pointer; }
.cov-retry:hover { background: #123fcb; }

/* Le schede stanno su una sola riga (fino a 4). Con meno schede si allargano
   fino a un massimo, senza diventare sproporzionate. */
.cov-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.cov-grid > .cov-card { flex: 1 1 218px; min-width: 0; max-width: 330px; }
.cov-grid-muted { margin-top: 16px; }

.cov-card { position: relative; padding: 22px 22px 18px; background: #fff; border: 1px solid #e2e9f2; border-radius: 14px; display: flex; flex-direction: column; min-height: 216px; transition: transform .18s ease, box-shadow .18s ease; }
.cov-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(39,68,103,.10); }
.cov-card.is-off { opacity: .72; }
.cov-card.t-ftth { border-top: 3px solid var(--blue); }
.cov-card.t-fttc { border-top: 3px solid #2c8ce0; }
.cov-card.t-fwa  { border-top: 3px solid #17a9c9; }
.cov-card.t-ded  { border-top: 3px solid var(--ink); }
.cov-card.t-dsl, .cov-card.t-eth { border-top: 3px solid #9aa7b8; }

.cov-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.cov-glyph { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #eaf4ff; color: var(--blue); font-size: 16px; font-weight: 850; letter-spacing: -1.5px; }
.t-ded .cov-glyph { background: var(--ink); color: #fff; }
.t-fwa .cov-glyph { background: #e6f7fb; color: #0f8fac; }
.cov-pill { border-radius: 20px; padding: 5px 10px; font-size: 9px; letter-spacing: .07em; font-weight: 850; text-transform: uppercase; }
.cov-pill.ok { color: #0b8a5b; background: #e8f8f1; }
.cov-pill.off { color: #8a7412; background: #fbf4e2; }

.cov-card h3 { margin: 2px 0 6px; font-size: 20px; letter-spacing: -.5px; color: var(--ink); }
.cov-speed { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--ink); margin-bottom: 14px; }
.cov-speed small { font-size: 12px; font-weight: 700; color: #8a98ad; letter-spacing: 0; }

.cov-tiers { margin: -8px 0 14px; font-size: 12px; font-weight: 600; color: #5b6c85; line-height: 1.4; }

.cov-meta { margin: 0 0 14px; display: flex; flex-direction: column; gap: 7px; }
.cov-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.3; }
.cov-meta dt { color: #8a98ad; font-weight: 600; }
.cov-meta dd { margin: 0; color: #3d5170; font-weight: 700; text-align: right; }

.cov-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #eef2f7; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cov-tag { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: #9aa7b8; }
.cov-sel { font-size: 10px; font-weight: 850; letter-spacing: .05em; color: #23a06b; background: #e8f8f1; border-radius: 6px; padding: 4px 8px; }

.cov-other { margin-top: 30px; }
.cov-other summary { cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: #5b6c85; padding: 10px 0; list-style: none; }
.cov-other summary::-webkit-details-marker { display: none; }
.cov-other summary::before { content: "+ "; color: var(--blue); }
.cov-other[open] summary::before { content: "– "; }

.cov-skeleton { display: flex; flex-wrap: wrap; gap: 16px; }
.cov-skeleton span { flex: 1 1 218px; max-width: 330px; }
.cov-skeleton span { height: 216px; border-radius: 14px; background: linear-gradient(100deg, #eef3fa 30%, #f7fafd 50%, #eef3fa 70%); background-size: 200% 100%; animation: covShimmer 1.15s ease-in-out infinite; }
@keyframes covShimmer { to { background-position: -200% 0; } }

.search-row button.is-loading { position: relative; color: transparent; }
.search-row button.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(16,34,63,.3); border-top-color: var(--ink); border-radius: 50%; animation: acSpin2 .7s linear infinite;
}
@keyframes acSpin2 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cov-skeleton span, .address-field.is-loading::after, .search-row button.is-loading::after { animation: none; }
}

@media (max-width: 900px) {
  .cov-grid > .cov-card, .cov-skeleton span { flex-basis: calc(50% - 8px); max-width: none; }
}

@media (max-width: 700px) {
  .coverage-results-inner { padding: 56px 18px 70px; }
  .cov-grid > .cov-card, .cov-skeleton span { flex-basis: 100%; max-width: none; }
  .address-field.has-error::before { white-space: normal; }
}


/* ---- Piè di pagina: testo più leggibile, in grigio con link in evidenza ---- */
footer p { font-size: 13px; color: #6b7a90; line-height: 1.55; }
footer .footer-copy a { color: var(--blue); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; }
footer .footer-copy a:hover { color: #123fcb; }
@media (max-width: 700px) {
  footer p { font-size: 13.5px; }
}