/* =========================================================
   📦 1) TABLE ORIZZONTALE (mobile)
   - Scrolling orizzontale con snap su colonne
   ========================================================= */
@media (max-width: 768px) {
  .my-horizontal-table {
    display: flex !important;
    flex-direction: column;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .my-horizontal-table .nectar-hor-list-item.has_border_animation.multiple-columns {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
  }

  .my-horizontal-table .nectar-hor-list-item.has_border_animation.multiple-columns > .nectar-list-item {
    flex: 0 0 150px !important;
    min-width: 150px !important;
    white-space: normal !important;
    scroll-snap-align: start;
  }

  .my-horizontal-table::-webkit-scrollbar { display: none; }
}

/* =========================================================
   🎛️ 2) TOGGLE / UI MINORI
   ========================================================= */
.toggle.extra-color-1.open {
  background-color: #fff;
  border-radius: 20px;
  transition: background-color .3s ease, color .3s ease;
}

/* =========================================================
   🔎 3) BLOCCO RICERCA RIPETIZIONI (z-index & popover)
   ========================================================= */
#search-block { position: relative; z-index: 999999 !important; }
#search-block .popover { position: fixed !important; z-index: 1000000 !important; }

/* =========================================================
   ✂️ 4) EXCERPT (toggle + bottone locale)
   ========================================================= */
.excerpt-box { overflow: hidden; transition: max-height .5s ease; position: relative; }
.excerpt-toggle { display: inline-block; margin-top: 10px; color: #152148; font-weight: 500; cursor: pointer; }
.excerpt-toggle:hover { color: #1f2d66; }

/* Bottone solo all’interno di .excerpt-box */
.excerpt-box .nectar-button { background-color: #172146 !important; color: #fff !important; border: none; }
.excerpt-box .nectar-button:hover { background-color: #1f2d66 !important; color: #fff !important; }

/* =========================================================
   🧱 5) NASCONDI HEADER/FEATURED MEDIA SU ALCUNE PAGINE
   - CPT SEO generator (single + archive)
   ========================================================= */
body.single-nw_seo_page .featured-media-under-header,
body.post-type-archive-nw_seo_page .featured-media-under-header { display: none !important; }

/* =========================================================
   🧱 6) CPT "CARRIERA" - NASCONDI HEADER + SISTEMA PADDING
   ========================================================= */
body.post-type-archive-carriera .featured-media-under-header,
body.post-type-archive-carriera #page-header-bg,
body.post-type-archive-carriera #single-below-header,
body.single-carriera .featured-media-under-header,
body.single-carriera #page-header-bg,
body.single-carriera #single-below-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.post-type-archive-carriera .container-wrap,
body.single-carriera .container-wrap { padding-top: 0 !important; }

/* =========================================================
   🔕 7) NASCONDI FLOATING SOCIAL IN CARRIERE/CARRIERA
   - include fallback per classi simili
   ========================================================= */
html body.tax-carriere div.nectar-social.fixed,
html body.taxonomy-carriere div.nectar-social.fixed,
html body.post-type-archive-carriera div.nectar-social.fixed,
html body.single-carriera div.nectar-social.fixed,
html body[class*="tax-carriere"] div.nectar-social.fixed,
html body[class*="taxonomy-carriere"] div.nectar-social.fixed,
html body[class*="tax-carriera"] div.nectar-social.fixed,
html body[class*="taxonomy-carriera"] div.nectar-social.fixed,
html body.tax div.nectar-social.fixed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important; height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important; padding: 0 !important;
}
.nsg-adjacent-links { display: none; }

/* =========================================================
   🦊 8) HERO RIPETIZIONI (titolo dinamico)
   ========================================================= */
.hero-title-ripetizioni {
  text-align: center;
  font-size: clamp(1.8rem, 4.5vw, 3.6rem);
  line-height: 1.1;
  margin-inline: auto;
  max-width: 90%;
}
.hero-title-ripetizioni .token-location,
.hero-title-ripetizioni .token-search {
  color: #379ce1;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
  display: inline-block;
}
.hero-title-ripetizioni .per-block { white-space: nowrap; }

@media (max-width: 768px) {
  .hero-title-ripetizioni {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    max-width: 22ch;
  }
}

/* =========================================================
   🪜 9) BLOCCO 3 STEP (ripetizioni)
   ========================================================= */
.step-section { background:#fff; padding:10px; }
.step-section h2 { text-align:center; color:#152148; margin-bottom:40px; font-size:44px; }
.steps-wrapper { display:flex; justify-content:space-between; gap:30px; width:100%; margin:0 auto; flex-wrap:wrap; }
.step-box { background:#EBF5FC; border-radius:10px; padding:40px 25px; flex:1; min-width:280px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; }
.step-icon { background:#fff; border:2px solid #2f80ed; color:#2f80ed; font-weight:700; font-size:20px; width:40px; height:40px; border-radius:50%; display:flex; justify-content:center; align-items:center; margin-bottom:20px; }
.step-box h3 { margin-bottom:10px; color:#152148; font-size:18px; }
.step-box p { color:#152148; font-size:16px; line-height:1.5; }

@media (max-width:767px){
  .steps-wrapper { flex-direction:column; gap:30px; }
  .step-box { align-items:center; text-align:center; }
  .step-icon { margin-bottom:15px; }
  .step-box h3 { font-size:17px; }
}

/* =========================================================
   ⭐ 10) TRUSTPILOT CARDS – VERSIONE BACKUP FUNZIONANTE
   (static, no JS – grid desktop + horizontal scroll)
   ========================================================= */
.tpc{
  --tp-line:#E6EEF7; --tp-text:#0F172A; --tp-muted:#475569;
  --tp-star:#00B67A; --tp-star-empty:#CFE3FF;
  --tp-gap:16px; --tp-radius:16px; --tp-pad-x:16px;
  --tp-shadow:0 6px 18px rgba(0,0,0,.08);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:transparent; border-radius:20px; padding:18px 12px 28px;
}
@media (max-width:640px){ .tpc{ --tp-pad-x:10px; } }

.tpc-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 8px 12px; border-bottom:1px solid var(--tp-line); margin-bottom:12px; gap:12px; }
.tpc-brand{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tpc-logo{ width:22px; height:22px; flex:0 0 22px; }
.tpc-word{ font-weight:700; letter-spacing:.2px; color:var(--tp-text); }
.tpc-meta{ color:var(--tp-muted); font-size:14px; }

.tpc-stars{ display:inline-flex; gap:4px; vertical-align:middle; }
.tpc-stars--small .tpc-star{ width:14px; height:14px; }
.tpc-star{ width:18px; height:18px; }
.tpc-star.filled path{ fill:var(--tp-star); }
.tpc-star.empty path{ fill:none; stroke:var(--tp-star-empty); stroke-width:1.6; }

/* griglia carte (desktop) */
.tpc-viewport{ margin-top:14px; padding-inline: var(--tp-pad-x); }
.tpc-track{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:var(--tp-gap); padding:0; margin:0; list-style:none; }
@media (max-width:1100px){ .tpc-track{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .tpc-track{ grid-template-columns: 1fr; } }

.tpc .tpc-track > li{ list-style:none; margin:0; position:relative; }

.tpc-card{
  background:#fff; border:1px solid var(--tp-line);
  border-radius:var(--tp-radius); padding:16px; box-shadow:var(--tp-shadow);
  min-height:180px;
}

.tpc-rating{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.tpc-badge{ display:inline-flex; align-items:center; gap:6px; background:#F0FFF6; color:#0B7A4B; border:1px solid #C8F3DC; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; }
.tpc-badge .tpc-badge-star{ width:14px; height:14px; color:var(--tp-star); }

.tpc-title{ font-weight:700; color:var(--tp-text); margin:0 0 8px; font-size:16px; }
.tpc-title a{ color:inherit; text-decoration:none; position:relative; z-index:1; }
.tpc-title a:hover{ text-decoration:underline; }

.tpc-text{ color:var(--tp-muted); font-size:14px; line-height:1.5; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

.tpc-user{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tpc-user .name{ font-weight:600; color:var(--tp-text); }
.tpc-user .date{ color:#64748B; font-size:12px; }

/* ===== Override: layout orizzontale scrollabile senza JS ===== */

/* il viewport diventa scrollabile in orizzontale */
.tpc-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--tp-pad-x);
  padding-bottom: 8px;
  scroll-snap-type: x proximity;   /* snap dolce */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* la track diventa una riga unica */
.tpc-track{
  display: flex !important;
  flex-wrap: nowrap;
  gap: var(--tp-gap);
  padding: 0;
  margin: 0;
  list-style: none;
  will-change: transform;
  touch-action: pan-x;
}

/* 4 card visibili su desktop, il resto prosegue in orizzontale */
.tpc-card{
  flex: 0 0 calc((100% - var(--tp-gap) * 3) / 4);
  scroll-snap-align: start;
}

/* breakpoint come prima: 2 su tablet, 1 su mobile */
@media (max-width:1100px){
  .tpc-card{ flex-basis: calc((100% - var(--tp-gap)) / 2); }
}
@media (max-width:640px){
  .tpc-card{ flex-basis: 100%; }
}

/* (opzionale) stile scrollbar discreto su WebKit */
.tpc-viewport::-webkit-scrollbar{ height: 10px; }
.tpc-viewport::-webkit-scrollbar-track{ background: #f2f6ff; border-radius: 999px; }
.tpc-viewport::-webkit-scrollbar-thumb{ background: #cfe3ff; border-radius: 999px; }
.tpc-viewport::-webkit-scrollbar-thumb:hover{ background: #9ec9ff; }

/* ===== Nascondi scrollbar ma lascia lo scroll attivo ===== */
.tpc-viewport{
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge legacy */
  -ms-overflow-style: none;
}
/* Chrome, Safari, Edge (Blink/WebKit) */
.tpc-viewport::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

/* =========================================================
   🎨 11) RICOLORAZIONE LINK (row specifica)
   - Target Row ID: recolor-links-extra1
   ========================================================= */
#recolor-links-extra1 {
  --nectar-accent-color: var(--nectar-extra-color-1);
  --nectar-accent-color-hover: var(--nectar-extra-color-1);
}
body #recolor-links-extra1 :where(a):not(.nectar-button):not(.button) {
  color: var(--nectar-extra-color-1) !important;
  text-decoration: none;
  transition: color .3s ease;
}
body #recolor-links-extra1 :where(a):not(.nectar-button):not(.button):hover,
body #recolor-links-extra1 :where(a):not(.nectar-button):not(.button):focus,
body #recolor-links-extra1 :where(a):not(.nectar-button):not(.button):visited {
  color: var(--nectar-extra-color-1) !important;
}
#recolor-links-extra1 .nectar-underline,
#recolor-links-extra1 .nectar-underline:before,
#recolor-links-extra1 .nectar-underline:after {
  background-color: var(--nectar-extra-color-1) !important;
  border-color: var(--nectar-extra-color-1) !important;
}
#recolor-links-extra1 a svg { color: var(--nectar-extra-color-1) !important; }
#recolor-links-extra1 a svg path { fill: currentColor !important; stroke: currentColor !important; }
#recolor-links-extra1 a.nectar-button,
#recolor-links-extra1 a.button { color: inherit !important; }

/* =========================================================
   🧰 12) FIX DIMENSIONE BOTTONI TEMA (large/medium)
   - ereditano tipografia dal tema
   ========================================================= */
html body .nectar-button.large,
html body .nectar-button.medium { font-size: inherit; line-height: inherit; }

/* =========================================================
   🚀 13) CTA SALIENT – VERSIONE FINALE STABILE (con esclusione)
   - Usa .no-override su .nectar-cta per NON applicare lo stile giallo
   ========================================================= */

/* Reset wrapper e livelli intermedi (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override),
html body .nectar-cta:not(.no-override)[class*="hover_color_"],
html body .nectar-cta:not(.no-override)[class*="border_radius_"],
html body .nectar-cta:not(.no-override) .link_wrap,
html body .nectar-cta:not(.no-override) .link_wrap > *:not(a) {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Disattiva overlay/pseudo-elementi blu (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override)::before,
html body .nectar-cta:not(.no-override)::after,
html body .nectar-cta:not(.no-override) .link_wrap::before,
html body .nectar-cta:not(.no-override) .link_wrap::after,
html body .nectar-cta:not(.no-override) a.link_text::before,
html body .nectar-cta:not(.no-override) a.link_text::after {
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Bottone effettivo (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override) a.link_text {
  position: relative !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;

  background-color: var(--nectar-accent-color) !important;
  color: var(--nectar-font-color, var(--nectar-text-color, #222)) !important;

  font-family: "Bricolage Grotesque", Bricolage, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important; font-size: 18px !important; line-height: 1.2 !important;

  padding: 16px 28px !important; border: 0 !important; border-radius: 12px !important;
  box-shadow: none !important; text-shadow: none !important; text-decoration: none !important;

  overflow: hidden !important; /* clip overlay */
  transition: background-color .25s ease !important; transform: none !important;
  cursor: pointer;
}

/* Stati (hover/focus/active) – SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override) a.link_text:hover,
html body .nectar-cta:not(.no-override) a.link_text:focus,
html body .nectar-cta:not(.no-override) a.link_text:active {
  background-color: var(--nectar-extra-color-3) !important;
  color: var(--nectar-font-color, var(--nectar-text-color, #222)) !important;
  border-radius: 12px !important;
  box-shadow: none !important; text-shadow: none !important; transform: none !important;
}

/* Outline accessibile (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override) a.link_text:focus {
  outline: 2px solid var(--nectar-extra-color-3) !important;
  outline-offset: 3px !important;
}

/* Testo interno (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override) a.link_text .text,
html body .nectar-cta:not(.no-override) a.link_text span {
  color: inherit !important; font: inherit !important; line-height: inherit !important; text-shadow: none !important;
}

/* Spegne link blu globali sull’anchor CTA (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override) a.link_text,
html body .nectar-cta:not(.no-override) a.link_text:hover {
  text-decoration: none !important;
  color: var(--nectar-font-color, var(--nectar-text-color, #222)) !important;
}

/* Extra sicurezza: nessun bg sul wrapper in hover (SOLO se NON ha .no-override) */
html body .nectar-cta:not(.no-override) .link_wrap:hover {
  background: transparent !important; color: transparent !important;
  border: 0 !important; border-radius: 12px !important;
}

/* =========================================================
   ⛔️ Modalità “no-override”
   - NIENTE giallo, niente forzature: eredita gli stili del contesto
   ========================================================= */

/* Link "pulito" quando la CTA è esclusa */
html body .nectar-cta.no-override a.link_text,
html body .nectar-cta.no-override a.link_text:hover,
html body .nectar-cta.no-override a.link_text:focus,
html body .nectar-cta.no-override a.link_text:active {
  background: none !important;
  color: inherit !important;               /* ← niente giallo */
  text-decoration: underline !important;   /* aspetto link/testuale */
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font: inherit !important;
}

/*==== PIE CHART CHIPS SU HERO */
/* Nascondi il valore */
.pie-chart .vc_pie_chart_value {
  display: none !important;
}

/* Limite globale al wrapper del pie */
.pie-chart .vc_pie_wrapper {
  max-width: 48px !important;
  max-height: 48px !important;
}

/* Fix mobile: blocca tutto a 48×48 e resetta trasformazioni */
@media (max-width: 767.98px) {
  .pie-chart .wpb_wrapper,
  .pie-chart .vc_pie_wrapper {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Layer interni del pie (in WPBakery spesso hanno width/height inline) */
  .pie-chart .vc_pie_chart,
  .pie-chart .vc_pie_chart_back,
  .pie-chart .vc_pie_chart_value {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    line-height: 48px !important; /* evita “spinte” verticali */
    box-sizing: border-box !important;
  }

  /* Canvas: sovrascrive gli attributi width/height inline */
  .pie-chart .vc_pie_chart canvas,
  .pie-chart canvas[width],
  .pie-chart canvas[height] {
    width: 100% !important;   /* => 48px perché il parent è 48 */
    height: 100% !important;  /* idem */
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
  }
}