/* Zoppellaro – stili aggiunti al sito esportato da Duda */

:root {
  --zop-blue: #003477;
  --zop-blue-dark: #00265a;
  --zop-cyan: #05b0e0;
  --zop-cyan-dark: #0390b8;
  --zop-text: #1d2733;
  --zop-muted: #5b6878;
  --zop-bg: #ffffff;
  --zop-bg-soft: #f3f6fa;
  --zop-line: #dbe3ec;
}

/* ---------- Pulsante "Area riservata" nel menu ---------- */
.zop-area-li { display: flex !important; align-items: center; }
.dmLinksMenu .zop-area-btn,
.unifiednav .zop-area-btn,
a.zop-area-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-left: 14px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  background: var(--zop-cyan) !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 52, 119, .25);
  transition: background-color .2s ease, transform .2s ease;
}
a.zop-area-btn:hover,
a.zop-area-btn:focus-visible {
  background: var(--zop-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
a.zop-area-btn:focus-visible { outline: 3px solid var(--zop-cyan); outline-offset: 2px; }
a.zop-area-btn::before,
a.zop-area-btn::after { display: none !important; }
a.zop-area-btn .nav-item-text { color: #fff !important; padding: 0 !important; }
a.zop-area-btn .nav-item-text::after { display: none !important; }
.zop-area-ico { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* nel menu a cassetto (mobile) il pulsante occupa la riga */
.hamburger-drawer .zop-area-li,
.layout-drawer .zop-area-li { padding: 14px 20px !important; }
.hamburger-drawer a.zop-area-btn,
.layout-drawer a.zop-area-btn {
  margin-left: 0 !important;
  width: 100%;
  justify-content: center;
  padding: 13px 18px !important;
  font-size: 16px !important;
}

/* pulsante fluttuante su mobile (in basso a sinistra, non copre logo e menu) */
a.zop-area-pill {
  position: fixed;
  left: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  padding: 11px 16px !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--zop-cyan);
  color: #fff !important;
  font: 700 13px/1 'Lato', 'ZopLato', Arial, sans-serif;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 52, 119, .3);
}
a.zop-area-pill .zop-area-ico { width: 13px; height: 13px; }

/* ---------- Animazioni Duda disattivate: il contenuto è sempre visibile ---------- */
#dm [data-anim-desktop],
#dm [data-anim-tablet],
#dm [data-anim-mobile],
#dm [data-anim-extended],
#dm .hasAnimations [data-anim-desktop],
#dm .photoGalleryThumbs.animated {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

/* ---------- Navbar: sfondo pieno quando si scorre ---------- */
/* sempre blu pieno (anche in cima alla pagina), con una linea che la stacca dal contenuto */
#dm .dmHeaderContainer,
#dm .dmHeaderContainer #hcontainer,
#dm .dmHeaderContainer .dmHeader {
  background-color: var(--zop-header-bg, #0d3f8c) !important;
}
#dm .dmHeaderContainer {
  border-bottom: 3px solid var(--zop-cyan);
  box-shadow: 0 2px 14px rgba(0, 20, 50, .22);
}
/* il contenuto parte sotto la barra invece di finirci dietro */
html.zop-header-solid #dm .dmBody { padding-top: var(--zop-header-h, 0px) !important; }
html.zop-header-solid #dm .stickyHeaderSpacer { display: none !important; }
/* barra compatta: niente spazio vuoto sotto il menu */
#dm .dmHeaderContainer .dmRespRow.dmDefaultListContentRow,
#dm .dmHeaderContainer .dmRespRow.dmDefaultListContentRow > .dmRespColsWrapper > .dmRespCol {
  padding-top: 26px !important;
  padding-bottom: 14px !important;
  min-height: 0 !important;
}
#dm .dmHeaderContainer .dmRespRow.dmDefaultListContentRow > .dmRespColsWrapper { align-items: center; display: flex; }
/* durante lo scorrimento ancora più bassa */
#dm .dmHeaderContainer.zop-scrolled .dmRespRow.dmDefaultListContentRow,
#dm .dmHeaderContainer.zop-scrolled .dmRespRow.dmDefaultListContentRow > .dmRespColsWrapper > .dmRespCol {
  padding-top: 18px !important;
  padding-bottom: 8px !important;
}
#dm .dmHeaderContainer.zop-scrolled .dmDefaultListContentRow .imageWidget {
  height: auto !important;
  max-height: 72px;
}
#dm .dmHeaderContainer.zop-scrolled .dmDefaultListContentRow .imageWidget img {
  max-height: 72px;
  width: auto !important;
  height: auto !important;
}
.dmHeaderContainer { transition: background-color .25s ease, box-shadow .25s ease; }

/* ---------- Lingue disattivate: con una sola lingua il selettore sparisce ---------- */
html[data-zop-langs="it"] .multilingualWidget,
html[data-zop-langs="it"] .defaultMultilingualExtensionRow { display: none !important; }

/* ---------- Barra email/telefono spostata nel footer ---------- */
a.zop-contact-link { color: inherit !important; text-decoration: none !important; display: block; }
a.zop-contact-link:hover { text-decoration: underline !important; }

/* ---------- Home: foto rotonde (Azienda / Referenze / Prodotti / News) ---------- */
#dm .zop-icon-row .dmRespCol {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
#dm .zop-icon-row .imageWidget {
  width: 280px !important;
  max-width: 100%;
  height: auto !important;
  margin: 0 auto !important;
  float: none !important;
  left: auto !important;
  right: auto !important;
}
#dm .zop-icon-row .imageWidget img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}
#dm .zop-icon-row .dmButtonLink {
  width: 200px !important;
  max-width: 100%;
  margin: 22px auto 0 !important;
  float: none !important;
}

/* ---------- Slider della home (sostituisce il runtime Duda) ---------- */
#dm .zop-slider .slides > li {
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--zop-fade, 600ms) ease, visibility 0s linear var(--zop-fade, 600ms);
}
#dm .zop-slider .slides > li.flex-active-slide {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity var(--zop-fade, 600ms) ease;
}
#dm .zop-slider .slides > li > img,
#dm .zop-slider .slides > li > a > img {
  display: block !important;   /* Duda nasconde le foto dalla 2ª slide in poi */
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1;
}
#dm .zop-slider .slides > li.flex-active-slide .slide-inner {
  visibility: visible;
}
#dm .zop-slider .slides > li .slide-inner {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;   /* Duda imposta 70%: il testo risultava spostato a sinistra */
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;   /* in basso: in alto c'è l'header trasparente */
  padding: 0 80px 56px;
  text-align: center;
  z-index: 3;
}
#dm .zop-slider .slides > li .text-wrapper {
  position: static !important;
  transform: none !important;
  max-width: 900px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
@media (max-width: 767px) {
  #dm .zop-slider .slides > li .slide-inner { padding: 0 56px 28px; }
}
#dm .zop-slider .slide-button-invisible { display: none !important; }
.zop-slider-nav button {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s;
}
.zop-slider-nav button:hover { background: rgba(0, 52, 119, .85); }
.zop-slider-nav button:focus-visible { outline: 3px solid var(--zop-cyan); outline-offset: 2px; }
.zop-slider-nav svg { width: 26px; height: 26px; fill: currentColor; }
.zop-slider-nav .zop-prev { left: 16px; }
.zop-slider-nav .zop-next { right: 16px; }
@media (prefers-reduced-motion: reduce) {
  #dm .zop-slider .slides > li, #dm .zop-slider .slide-inner { transition: none !important; animation: none !important; }
}

/* ---------- Menu mobile: sottomenu ---------- */
.layout-drawer .zop-has-sub > ul.zop-sub { display: none !important; }
.layout-drawer .zop-has-sub.zop-sub-open > ul.zop-sub { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; max-height: none !important; }
/* il pulsante fluttuante si nasconde quando il menu è aperto (nel menu c'è già) */
.layout-drawer_open ~ .zop-area-pill,
body:has(.layout-drawer_open) .zop-area-pill { display: none; }

/* ---------- Foto a schermo intero ---------- */
.zop-lb {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px;
  background: rgba(5, 15, 30, .92);
}
.zop-lb[hidden] { display: none; }
.zop-lb figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.zop-lb img { display: block; max-width: 100%; max-height: calc(100vh - 140px); margin: 0 auto; border-radius: 4px; }
.zop-lb figcaption { margin-top: 12px; color: #fff; font: 700 16px/1.4 'Lato', 'ZopLato', Arial, sans-serif; letter-spacing: .03em; }
.zop-lb button {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zop-lb button:hover { background: rgba(255, 255, 255, .25); }
.zop-lb button:focus-visible { outline: 3px solid var(--zop-cyan); }
.zop-lb svg { width: 28px; height: 28px; fill: currentColor; }
.zop-lb-close { top: 12px; right: 12px; font-size: 32px; line-height: 1; }
.zop-lb-prev { left: 10px; top: 50%; margin-top: -24px; }
.zop-lb-next { right: 10px; top: 50%; margin-top: -24px; }
@media (max-width: 600px) {
  .zop-lb { padding: 56px 8px; }
  .zop-lb-prev, .zop-lb-next { top: auto; bottom: 10px; margin: 0; }
  .zop-lb-prev { left: calc(50% - 58px); }
  .zop-lb-next { right: calc(50% - 58px); }
}

/* ---------- Form contatti ---------- */
.dmform .zop-invalid input,
.dmform .zop-invalid textarea { border-color: #c62828 !important; box-shadow: 0 0 0 1px #c62828 !important; }
.dmform .zop-invalid .contact-checkable-container,
.dmform .zop-invalid .optinwrapper { outline: 2px solid #c62828; outline-offset: 3px; border-radius: 3px; }
.zop-form-msg { margin: 12px 0 0; font-size: 15px; color: #c62828; text-align: left; }
.zop-form-msg.is-info { color: var(--zop-blue); }
.zop-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.dmform-error a { color: inherit; text-decoration: underline; }

/* ---------- Mappa caricata su consenso ---------- */
.zop-map-wrap { position: relative; }
.zop-map-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: var(--zop-bg-soft);
  border: 1px solid var(--zop-line);
  color: var(--zop-text);
  font: 400 15px/1.5 'Lato', 'ZopLato', Arial, sans-serif;
  text-align: center;
}
.zop-map-ph p { margin: 0; max-width: 460px; }

/* ---------- Banner cookie ---------- */
.zop-cc {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--zop-text);
  box-shadow: 0 8px 30px rgba(0, 20, 50, .25);
  font: 400 14.5px/1.5 'Lato', 'ZopLato', Arial, sans-serif;
}
.zop-cc p { margin: 0 0 12px; }
.zop-cc a { color: var(--zop-blue); text-decoration: underline; }
.zop-cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 18px;
  border: 2px solid var(--zop-blue);
  border-radius: 999px;
  background: var(--zop-blue);
  color: #fff !important;
  font: 700 14px/1.1 'Lato', 'ZopLato', Arial, sans-serif;
  text-decoration: none !important;
  cursor: pointer;
}
.zop-btn:hover { background: var(--zop-blue-dark); border-color: var(--zop-blue-dark); }
.zop-btn.is-ghost { background: transparent; color: var(--zop-blue) !important; }
.zop-btn.is-ghost:hover { background: var(--zop-bg-soft); }
.zop-btn.is-area { background: var(--zop-cyan); border-color: var(--zop-cyan); }
.zop-btn.is-area:hover { background: var(--zop-blue); border-color: var(--zop-blue); }
.zop-btn:focus-visible { outline: 3px solid var(--zop-cyan); outline-offset: 2px; }

/* ---------- Pagine semplici (404, note legali, privacy) ---------- */
@font-face { font-family: 'ZopLato'; font-weight: 400; font-display: swap; src: url(/Resources/files/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'); }
@font-face { font-family: 'ZopLato'; font-weight: 700; font-display: swap; src: url(/Resources/files/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2'); }
@font-face { font-family: 'ZopLato'; font-weight: 900; font-display: swap; src: url(/Resources/files/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2'); }

body.zop-simple {
  margin: 0;
  background: var(--zop-bg);
  color: var(--zop-text);
  font: 400 17px/1.65 'ZopLato', 'Lato', 'ZopLato', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.zop-simple *, .zop-simple *::before, .zop-simple *::after { box-sizing: border-box; }
.zop-simple a { color: var(--zop-blue); }
.zop-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.zop-top { border-bottom: 1px solid var(--zop-line); background: #fff; }
.zop-top .zop-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.zop-logo img { display: block; height: 52px; width: auto; }
.zop-topnav { display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; }
.zop-topnav a { font-weight: 700; font-size: 15px; letter-spacing: .02em; text-decoration: none; color: var(--zop-blue); text-transform: uppercase; }
.zop-topnav a:hover { color: var(--zop-cyan-dark); }
.zop-topnav a.zop-btn { text-transform: none; letter-spacing: 0; }
.zop-topnav a.zop-btn.is-area { color: #fff; }

.zop-main { padding: 56px 0 72px; }
.zop-main h1 { margin: 0 0 18px; color: var(--zop-blue); font-size: clamp(30px, 5vw, 44px); line-height: 1.15; font-weight: 900; }
.zop-main h2 { margin: 40px 0 10px; color: var(--zop-blue); font-size: 23px; line-height: 1.3; }
.zop-main h3 { margin: 26px 0 6px; font-size: 18px; }
.zop-main p, .zop-main li { max-width: 72ch; }
.zop-main ul { padding-left: 1.2em; }
.zop-updated { color: var(--zop-muted); font-size: 15px; }
.zop-table { width: 100%; max-width: 900px; border-collapse: collapse; margin: 12px 0 8px; font-size: 15px; }
.zop-table th, .zop-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--zop-line); }
.zop-table th { background: var(--zop-bg-soft); }
.zop-table-wrap { overflow-x: auto; }

.zop-404 { display: grid; gap: 28px; align-items: center; }
.zop-404-code { font-size: clamp(84px, 18vw, 150px); font-weight: 900; line-height: 1; color: var(--zop-cyan); letter-spacing: -.03em; }
.zop-404 .zop-lead { font-size: 19px; color: var(--zop-muted); margin: 0 0 26px; }
.zop-404-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.zop-404-alt { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--zop-line); color: var(--zop-muted); font-size: 15px; }
.zop-404-alt a { margin-right: 14px; }
@media (min-width: 820px) {
  .zop-404 { grid-template-columns: auto 1fr; gap: 56px; }
}
[data-zop-l] { display: none; }
html[data-zop-show="it"] [data-zop-l="it"],
html[data-zop-show="en-gb"] [data-zop-l="en-gb"],
html[data-zop-show="de"] [data-zop-l="de"],
html[data-zop-show="es"] [data-zop-l="es"] { display: revert; }

.zop-foot { background: var(--zop-blue); color: #dfe8f4; font-size: 15px; }
.zop-foot .zop-wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }
.zop-foot a { color: #fff; }
.zop-foot p { margin: 0; }