/* ic-prov-pill-refine.css — Night-3 refinement pill provincia (2026-05-26)
   Migliora: padding asimmetrico (icona a sx, freccia a dx senza touch del testo),
   ombra e bordo più moderni, hover stato, gradient soft sull'icona container,
   chevron animato. Override puntuale, niente !important salvo necessità di specificity. */

html body #provPills .prov-pill-wrap.prov-pill-wrap,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap {
  background: #ffffff !important;
  border: 1px solid #E4E7ED !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(11,35,64,0.04), 0 4px 14px rgba(11,35,64,0.04) !important;
  overflow: hidden !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease !important;
}

html body #provPills .prov-pill-wrap.prov-pill-wrap:hover,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap:hover {
  border-color: #C9D1DD !important;
  box-shadow: 0 2px 4px rgba(11,35,64,0.05), 0 10px 28px rgba(11,35,64,0.08) !important;
  transform: translateY(-1px) !important;
}

html body #provPills .prov-pill-wrap[open].prov-pill-wrap,
html body .prov-pills .prov-pill-wrap[open].prov-pill-wrap {
  border-color: #B0BCCC !important;
  box-shadow: 0 4px 6px rgba(11,35,64,0.06), 0 16px 38px rgba(11,35,64,0.10) !important;
}

/* SUMMARY — grid template raffinato:
   - icona 60px (leggermente più contenuta)
   - gap 16px tra icona e testo
   - testo flex column
   - gap 22px tra testo e freccia (RESPIRO!) → evita "Trani" che tocca la freccia
   - freccia 22px
   - padding 14px 22px 14px 14px → meno sinistra (cerchio + testo più a sx), più destra */
html body #provPills .prov-pill-wrap > summary.prov-pill,
html body .prov-pills .prov-pill-wrap > summary.prov-pill {
  grid-template-columns: 60px 1fr 22px !important;
  gap: 16px !important;
  padding: 14px 22px 14px 14px !important;
  align-items: center !important;
}

/* Padding-right extra sul container del testo: distanza fissa minima dalla freccia */
html body #provPills .prov-pill-wrap > summary.prov-pill > .prov-pill__text,
html body .prov-pills .prov-pill-wrap > summary.prov-pill > .prov-pill__text {
  padding-right: 8px !important;
  min-width: 0 !important;
}

/* Icona container: gradient soft + ombra interna sottile */
html body #provPills .prov-pill__icon,
html body .prov-pills .prov-pill__icon {
  width: 60px !important; height: 60px !important;
  background: linear-gradient(135deg, #F6F7FA 0%, #ECEFF4 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(11,35,64,0.04), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

html body #provPills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__icon,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__icon {
  background: linear-gradient(135deg, #EEF1F6 0%, #E2E6EE 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(11,35,64,0.06), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

html body #provPills .prov-pill__icon img,
html body #provPills .prov-pill__icon svg,
html body .prov-pills .prov-pill__icon img,
html body .prov-pills .prov-pill__icon svg {
  width: 44px !important; height: 44px !important;
  display: block !important;
}

/* Tipografia raffinata */
html body #provPills .prov-pill__name,
html body .prov-pills .prov-pill__name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0B2340 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em !important;
  /* Auto-shrink se necessario per parole molto lunghe (Barletta/Andria/Trani) */
  overflow-wrap: anywhere !important;
}

html body #provPills .prov-pill__meta,
html body .prov-pills .prov-pill__meta {
  font-size: 13.5px !important;
  color: #6B7585 !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  margin-top: 2px !important;
}

/* Chevron: 22px, slide-right animato sull'hover */
html body #provPills .prov-pill__chev,
html body .prov-pills .prov-pill__chev {
  width: 22px !important; height: 22px !important;
  stroke: #5B6779 !important;
  stroke-width: 2.6 !important;
  fill: none !important;
  flex-shrink: 0 !important;
  transition: transform .2s ease, stroke .2s ease !important;
}

html body #provPills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__chev,
html body .prov-pills .prov-pill-wrap.prov-pill-wrap:hover .prov-pill__chev {
  stroke: #0B2340 !important;
  transform: translateX(2px) !important;
}

/* Quando details è aperto, freccia ruota di 90° (apre verso il basso) */
html body #provPills .prov-pill-wrap[open] .prov-pill__chev,
html body .prov-pills .prov-pill-wrap[open] .prov-pill__chev {
  transform: rotate(90deg) !important;
  stroke: #0B2340 !important;
}

/* Focus visibile a11y */
html body #provPills .prov-pill-wrap > summary.prov-pill:focus-visible,
html body .prov-pills .prov-pill-wrap > summary.prov-pill:focus-visible {
  outline: 3px solid #A47A2A !important;
  outline-offset: 3px !important;
  border-radius: 18px !important;
}

/* Reduced motion: nessuna transizione fluttuante */
@media (prefers-reduced-motion: reduce) {
  html body #provPills .prov-pill-wrap,
  html body #provPills .prov-pill__icon,
  html body #provPills .prov-pill__chev,
  html body .prov-pills .prov-pill-wrap,
  html body .prov-pills .prov-pill__icon,
  html body .prov-pills .prov-pill__chev { transition: none !important; }
  html body #provPills .prov-pill-wrap:hover,
  html body .prov-pills .prov-pill-wrap:hover { transform: none !important; }
}

/* Mobile: padding più compatto, icona leggermente più piccola */
@media (max-width: 480px) {
  html body #provPills .prov-pill-wrap > summary.prov-pill,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill {
    grid-template-columns: 52px 1fr 20px !important;
    gap: 12px !important;
    padding: 12px 18px 12px 12px !important;
  }
  html body #provPills .prov-pill__icon,
  html body .prov-pills .prov-pill__icon {
    width: 52px !important; height: 52px !important;
    padding: 8px !important;
  }
  html body #provPills .prov-pill__icon img,
  html body #provPills .prov-pill__icon svg,
  html body .prov-pills .prov-pill__icon img,
  html body .prov-pills .prov-pill__icon svg {
    width: 36px !important; height: 36px !important;
  }
  html body #provPills .prov-pill__name,
  html body .prov-pills .prov-pill__name { font-size: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2 — Allineamento a sinistra + no-wrap su Barletta/Andria/Trani
   Data: 2026-05-26
   ═══════════════════════════════════════════════════════════════════ */

/* Riduci padding-left per spostare icona/testo verso il bordo sinistro */
html body #provPills .prov-pill-wrap > summary.prov-pill,
html body .prov-pills .prov-pill-wrap > summary.prov-pill {
  padding: 14px 16px 14px 10px !important;
  gap: 12px !important;
  grid-template-columns: 60px 1fr 22px !important;
}

/* Forza nome provincia su singola riga — niente più "Tra/ni" spezzato */
html body #provPills .prov-pill__name,
html body .prov-pills .prov-pill__name {
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

/* BAT (Barletta/Andria/Trani) è il nome più lungo: font scalato per evitare ellissi */
html body #provPills .prov-pill-wrap[data-prov="BT"] .prov-pill__name,
html body .prov-pills .prov-pill-wrap[data-prov="BT"] .prov-pill__name {
  font-size: 16.5px !important;
  letter-spacing: -0.02em !important;
}

/* Allineamento esplicito testo a sinistra (override eventuale center inherit) */
html body #provPills .prov-pill__text,
html body .prov-pills .prov-pill__text {
  text-align: left !important;
  padding-right: 4px !important;
}

/* Mobile: lascia spazio ulteriormente ridotto a sinistra */
@media (max-width: 640px) {
  html body #provPills .prov-pill-wrap > summary.prov-pill,
  html body .prov-pills .prov-pill-wrap > summary.prov-pill {
    padding: 12px 14px 12px 8px !important;
    gap: 10px !important;
    grid-template-columns: 52px 1fr 20px !important;
  }
  html body #provPills .prov-pill__icon,
  html body .prov-pills .prov-pill__icon {
    width: 52px !important; height: 52px !important;
  }
  html body #provPills .prov-pill-wrap[data-prov="BT"] .prov-pill__name,
  html body .prov-pills .prov-pill-wrap[data-prov="BT"] .prov-pill__name {
    font-size: 14.5px !important;
  }
}