/* =====================================================================
   Portale Cittadini - restyling Junker Design System
   Da caricare SEMPRE dopo junker-components.css (CDN).
   Usa solo le variabili e i componenti di junker-components.css:
   nessun colore hardcoded, nessun import di font.
   ===================================================================== */


/* --- BASELINE ---------------------------------------------------- */

html, body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* portale web (desktop + mobile): manteniamo zoom e selezione testo,
   disabilitiamo solo il doppio tap */
body {
  touch-action: manipulation;
  background-color: var(--white);
}

input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

.myIn {
  padding-left: 12px;
  padding-right: 12px;
  max-width: 1240px;
  margin: 0 auto;
}

/* classi legacy ancora presenti nel markup */
.myClear {display: none;}
.hidden, .info_hidden {display: none !important;}
.invisible {visibility: hidden !important;}
a[onclick], .pointer {cursor: pointer;}

#contenitore_totale > form {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.j-main {
  flex: 1;
  padding: 28px 0 56px 0;
}

.contenuti {width: 100%;}

.j-page-title {margin-bottom: 16px;}


/* --- HERO (header comune / selezione zona) ----------------------- */

.j-hero {
  position: relative;
  color: var(--white);
  background-color: var(--primary-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.j-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--black-alpha-40) 0%, var(--black-alpha-70) 100%);
}

.j-hero-default {
  background-image: url(//junker.blob.core.windows.net/portalecittadini/default.jpg);
}

.j-hero h1, .j-hero h2, .j-hero h3 {color: var(--white);}

#header {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px 0 28px 0;
}

#header .logo {display: block; width: 120px;}
#header .logo img {width: 100%; height: auto;}

#info_header_cnt {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.logo_comune {
  width: auto;
  height: 110px;
  padding: 10px;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: 0 4px 16px var(--black-alpha-20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo_comune img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.info_comune {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info_comune h1 {font-size: 36px;}

.info_comune_zona {color: var(--white-alpha-90);}
.info_comune_zona span:empty {display: none;}
.info_comune_zona span:not(:empty) ~ span:not(:empty)::before {content: ' · ';}

.info_comune_azioni {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.info_comune_azioni .btn {justify-self: auto; align-self: auto; min-width: auto;}
.info_comune_azioni .cambia {gap: 6px;}
.info_comune_azioni .cambia .ji:before {background: var(--gray-900);}

/* hero a tutta altezza: home, selezione zona, errori */

.j-hero-full {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
}

.j-hero-full > .myIn {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.j-hero-full .form_area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0 64px 0;
}

.j-hero-full #info_header_cnt {align-items: center;}
.j-hero-default .info_comune {align-items: center; text-align: center;}
.j-hero-full .info_comune p {color: var(--white-alpha-90);}

.zona_card {
  background-color: var(--white);
  color: var(--white);
  border-radius: 8px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);
  border: 1px solid rgba(255, 255, 255, 0.39);
}

.zona_card label {margin-bottom: 6px;}

/* icona info nelle opzioni select2 della selezione zona */
.info_icon {
  float: right;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}

/* errore */

.j-error-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  color: var(--gray-900);
  text-align: center;
}

.j-error-card .popup-dialog_text {align-items: center;}
.j-error-card h2 {color: var(--gray-900);}


/* --- NAVIGAZIONE SEZIONI ----------------------------------------- */

#sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--white);
  border-bottom: 1px solid var(--gray-80);
  box-shadow: 0 2px 12px var(--black-alpha-10);
}

#menu {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}

#menu::-webkit-scrollbar {display: none;}

#menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}

/* voci nascoste lato server (HyperLink Visible=false) */
#menu li:not(:has(a)) {display: none;}

#menu li {scroll-snap-align: start; flex-shrink: 0;}

#menu li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 10px;
  border-radius: 50px;
  background-color: var(--gray-40);
  color: var(--gray-900);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

#menu li a .ji:before {background: var(--gray-700);}

#menu li a:hover {background-color: var(--primary-50); color: var(--primary-700);}
#menu li a:hover .ji:before {background: var(--primary-700);}

#menu li a.selected {background-color: var(--primary); color: var(--white);}
#menu li a.selected .ji:before {background: var(--white);}


/* --- SCHEDE INFORMATIVE (accordion) ------------------------------ */

#accordion_cnt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 20px 0;
}

.accordion_single {
  background-color: var(--white);
  border: 1px solid var(--gray-80);
  border-radius: 16px;
  box-shadow: 0 2px 8px var(--black-alpha-10);
  overflow: hidden;
}

button.accordion_title {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 0;
  background-color: var(--white);
  color: var(--gray-900);
  text-align: left;
  transition: background-color .2s ease;
}

button.accordion_title:hover {background-color: var(--gray-20);}
.accordion_single.active button.accordion_title {background-color: var(--primary-50);}

.accordion_title .ji {flex-shrink: 0; transition: transform .3s ease;}
.accordion_title .ji:before {background: var(--primary);}
.accordion_single.active .accordion_title .ji {transform: rotate(180deg);}

.accordion_panel_in {padding: 20px; font-size: 14px;}

.accordion_panel p {
		text-align: left !important;
		font-size: 14px;
	}


/* --- CONTENUTI HTML DAL CRUSCOTTO (schede, messaggi, modali) ----- */

.accordion_panel_in, .snippet, .legenda_item, .info_container, .single_info_content {
  overflow-wrap: anywhere;
}

.accordion_panel_in p, .legenda_item p, .info_container p, .single_info_content p {padding: 4px 0;}

.accordion_panel_in ul, .accordion_panel_in ol,
.legenda_item ul, .legenda_item ol,
.single_info_content ul, .single_info_content ol {padding: 4px 0 8px 22px;}

.accordion_panel_in ul, .legenda_item ul, .single_info_content ul {list-style: disc;}
.accordion_panel_in ol, .legenda_item ol, .single_info_content ol {list-style: decimal;}

.accordion_panel_in a, .snippet a, .legenda_item a, .info_container a, .single_info_content a {
  color: var(--primary-700);
  text-decoration: underline;
}

.accordion_panel_in img, .legenda_item img, .info_container img, .single_info_content img {
  height: auto;
  border-radius: var(--border-radius);
}

.accordion_panel_in table, .legenda_item table {width: 100%; border-collapse: collapse;}
.accordion_panel_in td, .accordion_panel_in th, .legenda_item td, .legenda_item th {padding: 6px; border-bottom: 1px solid var(--gray-80);}


/* --- MESSAGGI ---------------------------------------------------- */

.messaggio_single {
  background-color: var(--white);
  border: 1px solid var(--gray-80);
  border-radius: 16px;
  box-shadow: 0 2px 8px var(--black-alpha-10);
  padding: 20px;
}

.messaggio_single .data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* anteprima: altezza = esattamente 3 righe (line-height 1.5 x 3), così il taglio cade
   sempre tra una riga e l'altra; i margini interni sono multipli della riga */
.snippet {
  min-height: 4.5em;
  line-height: 1.5;
  overflow: hidden;
  color: var(--gray-800);
}

.snippet * {font-size: inherit; line-height: inherit; margin: 0; padding: 0;}
.snippet p + p, .snippet p + ul, .snippet ul + p {margin-top: 1.5em;}
.snippet ul, .snippet ol {padding-left: 1.5em;}

/* testo troncato: paragrafi senza spaziatura (più testo in anteprima) e sfumatura sull'ultima riga */
.snippet.is-clamped p + p, .snippet.is-clamped p + ul, .snippet.is-clamped ul + p {margin-top: 0;}

.snippet.is-clamped {
  -webkit-mask-image: linear-gradient(180deg, var(--black) 55%, var(--black-alpha-10) 100%);
  mask-image: linear-gradient(180deg, var(--black) 55%, var(--black-alpha-10) 100%);
}

/* testo che sta tutto nell'anteprima: nessuna altezza minima */
.snippet.is-short {min-height: 0;}

.messaggio_single .read_more_btn {margin-top: 12px; min-width: auto;}

.msg_allegati{display: flex; flex-direction: column; gap: 5px; margin-top: 1.5em; margin-bottom: 1.5em;}
.snippet .msg_allegato{margin-top: 0;}


/* --- PAGINE CON IFRAME (bacheca, ingombranti, compost, servizi) -- */

.j-frame {
  display: block;
  width: 100%;
  height: 850px;
  border: 1px solid var(--gray-80);
  border-radius: 16px;
  background-color: var(--white);
}


/* --- SELECT2 (selezione zona, cerca rifiuti, filtro mappa) ------- */

.select2-container {width: 100% !important; font-size: 16px;}

.select2-container--default .select2-selection--single {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 44px 0 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius);
  background-color: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--gray-900);
  line-height: 1.3;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {color: var(--gray-500);}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
  right: 10px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.select2-dropdown {
  border: 1px solid var(--gray-100);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--black-alpha-20);
  overflow: hidden;
}

.select2-container--open .select2-dropdown--below {margin-top: 6px; border-radius: 12px; border-top: 1px solid var(--gray-100);}
.select2-container--open .select2-dropdown--above {margin-top: -6px; border-radius: 12px; border-bottom: 1px solid var(--gray-100);}

.select2-search--dropdown {padding: 10px;}

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {border-color: var(--primary);}

.select2-container--default .select2-results > .select2-results__options {max-height: 320px;}

.select2-results__option {padding: 12px 14px; font-size: 15px;}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary-50);
  color: var(--gray-900);
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
  background-color: var(--gray-40);
  font-weight: 700;
}

/* select con icona Junker al posto della freccia */
.j-select-search, .form_mappa_filter {margin: 0;}
.j-select-search .select2-selection__arrow, .form_mappa_filter .select2-selection__arrow {display: none;}
.j-select-search > i, .form_mappa_filter > i {right: 14px; pointer-events: none;}
.j-select-search > i:before, .form_mappa_filter > i:before {background: var(--gray-500);}

#select_zona, #select_generico, #poi_filter {display: none;}


/* --- CERCA RIFIUTI ----------------------------------------------- */

.form_rifiuti {margin-bottom: 24px;}

.dett_rifiuto {
  background-color: var(--white);
  border: 1px solid var(--gray-80);
  border-radius: 20px;
  box-shadow: 0 4px 16px var(--black-alpha-10);
  overflow: hidden;
}

.nome_rifiuto h3 {
  padding: 18px 20px;
  background-color: var(--primary);
  color: var(--white);
}

.rifiuto_cnt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 16px 12px;
}

.rifiuto_cnt .dett_rifiuto {border: none; box-shadow: none; border-radius: 0;}

.categoria {margin: 8px 0 4px 0;}

.tit_categoria {
  display: inline-flex;
  margin: 12px 8px 6px 8px;
  padding: 6px 10px;
  border-radius: var(--border-radius);
  background-color: var(--secondary);
  color: var(--gray-900);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.singolo_rifiuto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-radius: 12px;
  transition: background-color .2s ease;
}

.singolo_rifiuto + .singolo_rifiuto {border-top: 1px solid var(--gray-60);}

.singolo_rifiuto.open_legenda, .singolo_rifiuto.is_link {cursor: pointer;}
.singolo_rifiuto.open_legenda:hover, .singolo_rifiuto.is_link:hover {background-color: var(--gray-20);}
.singolo_rifiuto.noinfo {cursor: default;}

.rifiuto_dett {flex-shrink: 0;}

.icona_rifiuto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}

.icona_rifiuto img {width: 100%; height: 100%; padding: 6px; object-fit: contain;}

/* conferimento a calendario / su mappa: forma diversa dal cerchio */
.icona_rifiuto.pin_calendario {border-radius: 12px;}
.icona_rifiuto.pin_mappa {border-radius: 50% 50% 50% 6px;}
.pin_calendario .binds, .pin_calendario .month, .pin_calendario .day {display: none;}

.parte_rifiuto {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.parte_rifiuto small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gray-600);
}

.singolo_rifiuto .info, .singolo_rifiuto .link_arrow {flex-shrink: 0;}
.singolo_rifiuto .link_arrow:before {background: var(--gray-400);}

.extra_info .singolo_rifiuto {display: block; cursor: default;}


/* --- CALENDARI: elementi comuni ---------------------------------- */

.strumenti_calendario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.tab_nav.calendario_switch {width: auto; flex: 1 1 360px; max-width: 520px;}
.calendario_switch li a {align-items: center; cursor: pointer;}
.calendario_switch li:not(.selected) a {color: var(--gray-600);}
.calendario_switch li:not(.selected) .ji:before {background: var(--gray-400);}

.strumenti_calendario .btn_stampa {justify-self: auto; align-self: auto;}

.header_cal_mensile, .header_cal_settimanale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.header_cal_mensile h1, .header_cal_settimanale h1 {
  font-size: 26px;
  text-align: center;
  text-transform: capitalize;
}

.freccia, .switch_month {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0 1px 5px 0 var(--black-alpha-20);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease;
}

.freccia:hover, .switch_month:hover {background-color: var(--primary-50);}
.freccia .ji:before, .switch_month .ji:before {background: var(--primary);}

.btn_print_left {visibility: hidden; margin-right: auto;}
.btn_print_right {margin-left: auto;}
.header_cal_mensile .btn, .header_cal_settimanale .btn {justify-self: auto; align-self: auto;}

/* icone rifiuto nei calendari (portale: *_noembed, embed/stampa: classi base) */
.icona_rifiuto_noembed {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background-color: var(--gray-200);
  position: relative;
  cursor: pointer;
}

.icona_rifiuto_noembed img, .conferimenti .icona_rifiuto img, .conferimenti_del_giorno .icona_rifiuto img {
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.conferimenti .icona_rifiuto, .conferimenti_del_giorno .icona_rifiuto {width: 36px; height: 36px; min-width: 36px; cursor: pointer;}

/* tooltip con nome del rifiuto (mensile / semestrale) */
.icona_rifiuto_noembed > span, .conferimenti .icona_rifiuto > span, .conferimenti_del_giorno .icona_rifiuto > span {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 6px 10px;
  border-radius: var(--border-radius);
  color: var(--white);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--black-alpha-20);
  pointer-events: none;
}

.icona_rifiuto_noembed > span .specs, .icona_rifiuto > span .specs {font-weight: 400;}

@media (hover: hover) {
  .icona_rifiuto_noembed:hover > span, .conferimenti .icona_rifiuto:hover > span, .conferimenti_del_giorno .icona_rifiuto:hover > span {display: block;}
}

/* tooltip anche da tastiera (Tab) e da tap su touch (l'icona riceve il focus) */
.icona_rifiuto_noembed:focus > span, .conferimenti .icona_rifiuto:focus > span, .conferimenti_del_giorno .icona_rifiuto:focus > span {display: block;}
.icona_rifiuto_noembed[tabindex], .icona_rifiuto[tabindex] {outline-offset: 1px;}

/* legenda */
.legenda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 24px 0 0 0;
}

.legenda_rifiuto {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--white);
}

.legenda_rifiuto img {width: 28px; height: 28px; flex-shrink: 0; object-fit: contain;}
.legenda_rifiuto span {display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.legenda_rifiuto strong {font-family: 'Bricolage Grotesque', serif; font-size: 16px; font-weight: 600;}
.legenda_rifiuto .specs {font-size: 13px; line-height: 1.35;}


/* --- CALENDARIO SETTIMANALE (v2 portale/embed/stampa + v1) -------- */

.calendario_settimanale_cnt, .settimana {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.singolo_giorno_noembed,
.calendario_settimanale_cnt .singolo_giorno,
.settimana .singolo_giorno {
  display: grid;
  grid-template-columns: 72px 1fr;
  background-color: var(--white);
  border: 1px solid var(--gray-80);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 2px 6px #0000000d;
}

.singolo_giorno_noembed .nome_giorno_noembed,
.calendario_settimanale_cnt .singolo_giorno .nome_giorno,
.settimana .singolo_giorno .nome_giorno {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 4px;
  background-color: var(--gray-40);
  border-right: 1px solid var(--gray-80);
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dett_giorno_noembed,
.calendario_settimanale_cnt .dett_giorno,
.settimana .dett_giorno {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  min-width: 0;
}

.numero_giorno_noembed, .calendario_settimanale_cnt .numero_giorno, .settimana .numero_giorno {
  flex-shrink: 0;
  width: 28px;
  padding-top: 4px;
  font-family: 'Bricolage Grotesque', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--gray-900);
}

/* oggi */
.singolo_giorno_noembed.singolo_giorno_oggi, .singolo_giorno.singolo_giorno_oggi, .settimana .singolo_giorno.oggi {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.singolo_giorno_noembed.singolo_giorno_oggi .nome_giorno_noembed,
.singolo_giorno.singolo_giorno_oggi .nome_giorno,
.settimana .singolo_giorno.oggi .nome_giorno {
  background-color: var(--primary);
  border-right-color: var(--primary);
  color: var(--white);
}

/* conferimenti del giorno */
.dett_giorno_noembed .conferimenti, .calendario_settimanale_cnt .conferimenti, .eventi_giorno {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 0;
}

.conferimento_s, .eventi_giorno .rifiuto_dett {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 5px;
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  background-color: var(--gray-20);
  max-width: none;
  margin: 0;
  text-align: left;
  border: 1px solid var(--gray-60);
}

.conferimento_s > :first-child, .eventi_giorno .rifiuto_dett > .icona_rifiuto {grid-row: span 2; width: 36px; height: 36px; min-width: 36px; cursor: default;}
.conferimento_s strong, .eventi_giorno .label_rifiuto {font-size: 14px; font-weight: 600; color: var(--gray-900);}
.conferimento_s strong + div, .eventi_giorno .desc_rifiuto {font-size: 12px; line-height: 1.35; color: var(--gray-600);}

.eventi_giorno .rifiuto_dett.open_legenda {cursor: pointer;}
.eventi_giorno .rifiuto_dett.open_legenda:hover {background-color: var(--primary-50);}
.eventi_giorno .icona_rifiuto img {padding: 5px;}


/* --- CALENDARIO MENSILE ------------------------------------------ */

.mensile {padding: 0;}

.lista_nomi_giorno, .giorni_mese {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.lista_nomi_giorno {margin-bottom: 6px;}

.lista_nomi_giorno > div {
  width: auto;
  padding: 4px;
  border: none;
  text-align: center;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.giorno_singolo {
  position: relative;
  min-height: 92px;
  padding: 8px;
  border: 1px solid var(--gray-80);
  border-radius: 12px;
  background-color: var(--white);
}

.giorno_singolo:has(> .giorno_numero[style*="none"]),
.giorno_singolo:has(> .giorno_numero:empty) {
  background-color: var(--gray-20);
  border-color: var(--gray-20);
}

.giorno_singolo span.giorno_numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.giorno_singolo span.giorno_numero.oggi_sel {background-color: var(--primary); color: var(--white);}

.giorno_singolo .conferimenti {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.giorno_singolo .icona_rifiuto_noembed, .giorno_singolo .icona_rifiuto {width: 30px; height: 30px; min-width: 30px;}
.giorno_singolo .icona_rifiuto img, .giorno_singolo .icona_rifiuto_noembed img {padding: 4px;}


/* --- CALENDARIO SEMESTRALE --------------------------------------- */

.mesi_cnt {
  display: grid;
  grid-template-columns: repeat(6, minmax(190px, 1fr));
  gap: 8px;
  padding: 0 0 6px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.mese {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-80);
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--white);
  scroll-snap-align: start;
}

.nome_mese {
  padding: 10px;
  background-color: var(--primary);
  color: var(--white);
  font-family: 'Bricolage Grotesque', serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.giorno_cnt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--gray-60);
}

.giorno_cnt:last-child {border-bottom: none;}
.giorno_cnt.curr_day {background-color: var(--primary-50);}

.num_giorno {min-width: 20px; font-size: 12px; font-weight: 700; color: var(--primary-700);}
.nom_giorno {min-width: 30px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--gray-500);}

.conferimenti_del_giorno {display: flex; justify-content: flex-end; gap: 2px; width: 100%;}

.conferimenti_del_giorno .icona_rifiuto_noembed, .conferimenti_del_giorno .icona_rifiuto {width: 26px; height: 26px; min-width: 26px;}
.conferimenti_del_giorno .icona_rifiuto_noembed img, .conferimenti_del_giorno .icona_rifiuto img {padding: 3px;}


/* --- CALENDARIO v1 (template page-calendar.html) ------------------ */

.azioni_cnt {display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px;}
.azioni_cnt .btn {justify-self: auto; align-self: auto;}

/* nel portale stampa e info del calendario v1 non sono disponibili */
.j-main #calendario_cnt .btn_stampa {display: none;}

.cal_settimanale {display: none;}

.month_cnt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.name_month {font-size: 26px; text-align: center;}

.info_cnt {display: flex; flex-direction: column; gap: 12px; margin-top: 24px;}

.single_info {
  padding: 20px;
  border: 1px solid var(--gray-80);
  border-radius: 16px;
  background-color: var(--white);
}

.single_info_title {margin-bottom: 8px;}


/* --- MAPPA ------------------------------------------------------- */

.form_mappa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form_mappa .input-field {margin: 0;}

#main_address_input {height: 52px; padding-left: 14px;}
#main_address_input:focus {border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100);}
.form_mappa_address > i:before {background: var(--gray-500);}

#map {
  width: 100%;
  height: 60vh;
  min-height: 420px;
  max-height: 640px;
  border: 1px solid var(--gray-80);
  border-radius: 20px;
  overflow: hidden;
}

#map img {-webkit-user-select: none; user-select: none;}

/* contenitore mappa: il dettaglio del punto si apre dal basso sopra la mappa */
.map_wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
   border: 1px solid var(--gray-60);
   box-shadow: 2px 2px 10px var(--black-alpha-10);
}

.map_wrap #map {border-radius: 20px;}

.bin_container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-height: 70%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 24px 20px;
  background-color: var(--white);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px var(--black-alpha-20);
  visibility: hidden;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1), visibility .3s;
}

.bin_container.is-active {visibility: visible; transform: translateY(0);}

/* maniglia del bottom sheet */
.bin_container::before {
  content: '';
  align-self: center;
  flex-shrink: 0;
  width: 40px;
  height: 4px;
  margin: -8px 0 -4px 0;
  border-radius: 4px;
  background-color: var(--gray-200);
}

.main_bin {display: flex; align-items: center; gap: 12px;}
.main_bin img {border-radius: 10px; flex-shrink: 0;}
.main_bin_label {flex: 1; min-width: 0; font-size: 20px; color: var(--gray-900);}
.bin_container_close {flex-shrink: 0; min-width: auto;}

.additional_bins {display: flex; flex-wrap: wrap; gap: 8px;}
.additional_bins:not(:has(.bin_img)) {display: none;}

.bin_img {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 50px;
  background-color: var(--gray-40);
}

.bin_img .icona_rifiuto {width: 32px; height: 32px;}
.bin_img .icona_rifiuto img {padding: 4px;}
.bin_label {font-size: 14px; font-weight: 500; color: var(--gray-900);}

.info_container:not(:has(p:not(:empty))) {display: none;}
.info_container p:empty {display: none;}

/* opzioni del filtro rifiuti */
.select_rifiuto {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.select_desc {flex: 1;}
.select_rifiuto img.select_img {width: 30px; height: 30px; padding: 4px; border-radius: 50%; flex-shrink: 0;}

.gm-style .gm-style-iw {padding: 10px 0 5px 0;}


/* --- SIMBOLI ----------------------------------------------------- */

.cerca_simbolo h5 {margin: 10px 0; font-size: 16px; color: var(--primary-700);}

.forme_cnt {display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0;}

.forma {
  padding: 10px 16px;
  border: 1px solid var(--gray-80);
  border-radius: 12px;
  cursor: pointer;
}

.forma svg {fill: var(--white); stroke: var(--gray-600); transition: fill .2s ease;}
.forma svg:hover {fill: var(--primary-50);}
.forma_sel {border-color: var(--primary); background-color: var(--primary-50);}
.forma_sel svg, .forma_sel svg:hover {fill: var(--primary); stroke: var(--primary-700);}
.forma.altro svg {fill: var(--gray-600); stroke-width: 0;}
.forma.altro .question {fill: var(--white); stroke-width: 1px;}
.forma.altro.forma_sel svg, .forma.altro.forma_sel .question {fill: var(--primary);}

.form_simboli input {margin-bottom: 20px;}

#risultati_simboli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.simbolo_item {
  padding: 12px;
  border: 1px solid var(--gray-80);
  border-radius: 12px;
  cursor: pointer;
}


/* --- MODALE (OpenLightbox in portale.js) ------------------------- */

body.j-modal-open {overflow: hidden;}

.j-modal .modal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 20px 32px 20px;
}

.j-modal .modal-title {padding-top: 0;}
.j-modal .modal-title #lightbox-close {margin-left: auto; flex-shrink: 0; min-width: auto;}

.legenda_item {color: var(--gray-800);}


/* --- FOOTER ------------------------------------------------------ */

#footer {
  margin-top: auto;
  padding: 40px 0 24px 0;
  background-color: var(--primary-600);
  color: var(--white);
}

.footer_app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--white-alpha-20);
}

.tit_app_footer {color: var(--white);}
.footer_app_text p {color: var(--white-alpha-80);}

.qr_code_cnt {display: flex; gap: 16px;}

.qr_code_item {display: flex; flex-direction: column; align-items: center; gap: 10px;}
.qr_code_item .store {height: 40px; width: auto;}
.qr_code_item .QRcode {width: 112px; height: 112px; padding: 6px; border-radius: 12px; background-color: var(--white);}

.footer_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 24px;
}

.footer_brand {display: flex; align-items: center; gap: 20px;}
#logo_footer img {width: 110px; height: auto;}

.social_icons {display: flex; gap: 8px;}

.social_ico_a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--white-alpha-10);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}

.social_ico_a:hover {background-color: var(--white-alpha-30);}
.social_ico {width: 18px; height: 18px; object-fit: contain;}

.footer_legal {text-align: right; color: var(--white-alpha-70);}
.footer_legal p {padding: 0;}
#site_menu_footer {margin-top: 6px;}
#site_menu_footer a {color: var(--white); text-decoration: underline;}


/* --- EMBED (calendari e mappa nei siti dei comuni) --------------- */

body.embed {padding: 16px;}

body.embed .info_comune {align-items: center; text-align: center; margin-bottom: 16px;}
body.embed .info_comune h1 {font-size: 24px; color: var(--primary-700);}
body.embed .info_comune p, body.embed .info_comune h2 {color: var(--gray-600);}


/* --- STAMPA (pagine /print) -------------------------------------- */

body.stampa {background-color: var(--gray-200); padding: 0;}

body.stampa .calendario_mensile, body.stampa .calendario_semestrale {
  display: block;
  width: 21cm;
  min-height: 29.3cm;
  margin: 0 auto .5cm auto;
  padding: .6cm;
  background-color: var(--white);
}

.head_a_tre {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.banner_junker img {width: 100%; max-width: 150px;}
.info_e_mesi {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.info_e_mesi .header_cal_mensile {margin: 0;}
.info_e_mesi .header_cal_mensile h1 {font-size: 22px;}
.info_e_mesi .info_comune {align-items: center; text-align: center;}
.info_e_mesi .info_comune h1 {font-size: 18px; color: var(--primary-700);}
.info_e_mesi .info_comune p {color: var(--gray-600);}

.logo_gestore {justify-self: end; max-width: 150px; max-height: 100px;}
.logo_gestore img {width: 100%; height: 100%; max-height: 100px; object-fit: contain;}

body.stampa .mesi_cnt {grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible;}
body.stampa .mese {border-radius: 8px;}
body.stampa .nome_mese {padding: 4px; font-size: 13px;}
body.stampa .giorno_cnt {min-height: 0; padding: 1px 4px; gap: 3px;}
body.stampa .num_giorno {min-width: 14px; font-size: 10px;}
body.stampa .nom_giorno {min-width: 20px; font-size: 9px;}
body.stampa .conferimenti_del_giorno .icona_rifiuto {width: 20px; height: 20px; min-width: 20px;}
body.stampa .conferimenti_del_giorno .icona_rifiuto img {padding: 2px;}
body.stampa .giorno_cnt.curr_day {background-color: transparent;}

body.stampa .giorno_singolo {min-height: 2.6cm;}
body.stampa .singolo_giorno .nome_giorno {background-color: var(--gray-20); color: var(--gray-600); border-right-color: var(--gray-80);}

body.stampa .legenda {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding-top: 5px;}
body.stampa .legenda_rifiuto {padding: 8px 10px; border-radius: 10px;}
body.stampa .legenda_rifiuto img {width: 30px; height: 30px;}
body.stampa .legenda_rifiuto strong {font-size: 13px;}
body.stampa .legenda_rifiuto .specs {font-size: 11px;}

body.stampa .icona_rifiuto > span {display: none !important;}

@media print {
  @page {size: auto; margin: 0;}

  html {-webkit-print-color-adjust: exact; print-color-adjust: exact;}

  body, body.stampa {background-color: var(--white);}
  body.stampa .calendario_mensile, body.stampa .calendario_semestrale {margin: 0; box-shadow: none;}

  .no-print, .freccia, .switch_month, .azioni_cnt, #sidebar, #footer, .strumenti_calendario,
  .btn_print_left, .btn_print_right {display: none !important;}
}


/* --- ACCESSIBILITA' ---------------------------------------------- */

/* focus visibile su tutti gli elementi interattivi (solo navigazione da tastiera) */
:focus-visible {
  outline: 3px solid var(--primary-700);
  outline-offset: 2px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {outline-offset: 0;}

/* su sfondi scuri (hero, footer, voce di menu selezionata) anello bianco */
.j-hero :focus-visible, #footer :focus-visible, #menu li a.selected:focus-visible {outline-color: var(--white);}

/* il contenitore principale riceve il focus dallo skip link: niente anello */
#main_content:focus {outline: none;}

/* link "vai al contenuto": visibile solo quando riceve il focus */
.skip_link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--border-radius);
  background-color: var(--gray-900);
  color: var(--white);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform .15s ease;
}

.skip_link:focus {transform: translateY(0);}

/* movimento ridotto: niente animazioni e transizioni */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- RESPONSIVE -------------------------------------------------- */

/* desktop largo: voci di menu su più righe, tablet/mobile scroll orizzontale */
@media screen and (max-width: 990px) {
  #menu ul {flex-wrap: nowrap;}
  #menu ul::after {content: ''; flex: 0 0 4px;}

  .form_mappa {grid-template-columns: 1fr;}
}

@media screen and (max-width: 760px) {

  .j-main {padding: 20px 0 40px 0;}

  #header {gap: 20px; padding: 16px 0 20px 0;}
  #header .logo {width: 96px;}

  #info_header_cnt {gap: 14px;}
  .logo_comune {width: auto; height: 110px; padding: 10px; border-radius: 8px;}
  .info_comune h1 {font-size: 26px;}
  .info_comune_zona {font-size: 14px;}

  .j-hero-full {min-height: 72vh;}
  .j-hero-full #info_header_cnt {flex-direction: column; align-items: flex-start; max-width: 95%; margin: 0 auto;}

  #menu ul {gap: 6px; padding: 10px 0;}
  #menu li a {padding: 8px 12px 8px 9px; font-size: 13px;}

  button.accordion_title {padding: 16px;}
  .accordion_panel_in {padding: 16px;}

  .messaggio_single {padding: 16px;}

  .j-frame {height: 75vh; min-height: 560px;}

  /* calendari */
  .strumenti_calendario {gap: 10px;}
  .tab_nav.calendario_switch {flex-basis: 100%; max-width: none;}
  .tab_nav.calendario_switch li a {padding: 10px 4px; font-size: 13px;}
  .strumenti_calendario .btn_stampa {margin-left: auto;}

  .header_cal_mensile h1, .header_cal_settimanale h1, .name_month {font-size: 20px;}
  .header_cal_mensile, .header_cal_settimanale {gap: 8px; justify-content: space-between;}
  .btn_print_left {display: none;}
  .btn_print_right {margin-left: 0;}
  .freccia, .switch_month {width: 36px; height: 36px;}

  .singolo_giorno_noembed, .calendario_settimanale_cnt .singolo_giorno, .settimana .singolo_giorno {grid-template-columns: 52px 1fr;}
  .dett_giorno_noembed, .calendario_settimanale_cnt .dett_giorno, .settimana .dett_giorno {gap: 10px; padding: 10px;}
  .numero_giorno_noembed, .calendario_settimanale_cnt .numero_giorno, .settimana .numero_giorno {width: 24px; font-size: 18px;}
  .dett_giorno_noembed .conferimenti, .calendario_settimanale_cnt .conferimenti, .eventi_giorno {grid-template-columns: 1fr;}

  .lista_nomi_giorno, .giorni_mese {gap: 3px;}
  .lista_nomi_giorno > div {font-size: 10px; padding: 2px 0;}
  .giorno_singolo {min-height: 64px; padding: 4px; border-radius: 8px;}
  .giorno_singolo span.giorno_numero {width: 22px; height: 22px; font-size: 12px;}
  .giorno_singolo .conferimenti {gap: 2px; margin-top: 3px;}
  .giorno_singolo .icona_rifiuto_noembed, .giorno_singolo .icona_rifiuto {width: 20px; height: 20px; min-width: 20px;}
  .giorno_singolo .icona_rifiuto img, .giorno_singolo .icona_rifiuto_noembed img {padding: 2px;}

  .mesi_cnt {grid-template-columns: repeat(6, minmax(78%, 1fr));}

  .legenda {grid-template-columns: 1fr;}

  /* cerca rifiuti */
  .rifiuto_cnt {padding: 6px 6px 12px 6px;}
  .parte_rifiuto {font-size: 15px;}

  /* mappa */
  #map {height: 55vh; min-height: 360px;}
  .map_wrap, .map_wrap #map {border-radius: 16px;}
  .bin_container {max-height: 80%; padding: 18px 16px 20px 16px; border-radius: 16px 16px 0 0;}
  .main_bin_label {font-size: 18px;}

  /* modale: bottom sheet (default Junker) */
  .j-modal .modal-content {max-height: 85vh;}

  /* footer */
  #footer {padding: 32px 0 24px 0; text-align: center;}
  .footer_app, .footer_info {flex-direction: column; justify-content: center;}
  .qr_code_item .QRcode {display: none;}
  .footer_brand {flex-direction: column; gap: 14px;}
  .footer_legal {text-align: center;}

  body.embed {padding: 12px;}
}

/* desktop: modale centrata invece del bottom sheet */
@media screen and (min-width: 761px) {
  .j-modal.modal-overlay {align-items: center; justify-content: center; padding: 40px 20px;}
  .j-modal .modal-content {
    width: 100%;
    max-height: 85vh;
    border-radius: 20px;
    padding: 24px 28px 28px 28px;
    transform: translateY(24px);
  }
  .j-modal.modal-overlay.is-active .modal-content {transform: translateY(0);}
}