/* =========================================================
   LANDING PAGE — ADDITIONS
   Da accodare a pub_index-2.css.
   ========================================================= */

/* --- Trust strip sotto la CTA dell'hero --- */
.vh-land-trust {
  margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  font-size: 1.08rem;
  color: #6b6570;
}
.vh-land-trust i { color: var(--vh-primary); margin-right: 4px; }
.vh-land-trust-sep { color: #d8cfe0; }

/* --- Add-widget: bottone rotondo dentro il campo, a destra --- */
.vh-add-widget .input-group {
  position: relative;
  display: block;
  border: 1px solid var(--vh-primary);
  border-radius: var(--vh-radius-full);
  background: #fff;
  overflow: visible;
}
.vh-add-widget .input-group input {
  width: 100%;
  border: none;
  border-radius: var(--vh-radius-full);
  padding: 12px 58px 12px 20px;
  font-family: 'Poppins', sans-serif;
}
.vh-add-widget .input-group input:focus { box-shadow: none; outline: none; }
.vh-add-widget .btn-add {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--vh-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vh-add-widget .btn-add:hover { background: var(--vh-quaternary); }
.vh-add-widget .btn-add:disabled { opacity: .5; cursor: not-allowed; }

/* --- Card bookmark in preview: una per riga --- */
.vh-land-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vh-land-cards .vh-bookmark-card { padding: 16px 18px; }

/* --- Badge scudo inline dopo il titolo --- */
.vh-badge-inline {
  font-size: .68rem;
  padding: 2px 10px;
  flex-shrink: 0;
}

/* --- Badge di stato riutilizzabili --- */
.vh-badge-safe, .vh-badge-warn, .vh-badge-danger {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--vh-radius-full); padding: 4px 12px;
  font-size: .78rem; font-weight: 700;
}
.vh-badge-safe   { background: rgba(27,209,58,.10); color: #12872a; }
.vh-badge-warn   { background: rgba(243,185,24,.14); color: #7a5f06; }
.vh-badge-danger { background: rgba(196,37,45,.10); color: var(--vh-danger); }

/* --- Sezione con sfondo leggermente diverso --- */
.vh-land-section-alt {
  background: linear-gradient(180deg, rgba(135,52,172,.03), transparent 60%);
}

/* --- Badge "Novità" / "AI" sopra i titoli di sezione --- */
.vh-land-badge-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vh-primary);
  background: rgba(135,52,172,.08);
  border: 1px solid rgba(135,52,172,.18);
  border-radius: var(--vh-radius-full);
  padding: 5px 14px;
  margin-bottom: 14px;
}
.vh-land-badge-new.vh-badge-ai {
  color: #b026ff;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(135deg, #ff2bd6 0%, #b026ff 25%, #ff5ea8 45%, #ffd23f 70%, #2b8bff 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* --- Feature card compatte (griglia a 4 per le categorie) --- */
.vh-land-feature-compact { padding: 26px 22px; }
.vh-land-feature-compact .vh-land-feature-icon {
  width: 50px; height: 50px; font-size: 1.4rem; margin-bottom: 14px;
}
.vh-land-feature-compact h4 { font-size: 1.05rem; }
.vh-land-feature-compact p { font-size: .9rem; }

.vh-land-feature-icon.vh-icon-danger {
  background: linear-gradient(135deg, rgba(196,37,45,.10), rgba(196,37,45,.16));
  color: var(--vh-danger);
}
.vh-land-feature-icon.vh-icon-ai {
  background: linear-gradient(135deg, rgba(255,43,214,.12), rgba(176,38,255,.16));
  color: #b026ff;
}

.vh-land-feature-tall { padding: 34px 30px; }

/* =========================================================
   SEZIONE SICUREZZA
   ========================================================= */
.vh-land-security-section { padding-top: 30px; }

.vh-land-security-card {
  position: relative;
  border-radius: 28px;
  padding: 52px 40px;
  background:
    radial-gradient(circle at 8% 12%, rgba(196,37,45,.05), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(135,52,172,.06), transparent 45%),
    #fdfaff;
  border: 1px solid rgba(135,52,172,.14);
  box-shadow: 0 24px 60px rgba(135,52,172,.10);
  overflow: hidden;
}

.vh-land-security-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.vh-land-security-head h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: #20131f;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.vh-land-security-head p { color: #6b6570; font-size: 1.02rem; line-height: 1.6; margin: 0; }

.vh-land-badge-security {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vh-danger);
  background: rgba(196,37,45,.08);
  border: 1px solid rgba(196,37,45,.18);
  border-radius: var(--vh-radius-full);
  padding: 6px 16px;
  margin-bottom: 18px;
}

.vh-land-security-modes { max-width: 900px; margin: 0 auto; }
.vh-land-security-mode {
  background: #fff;
  border: 1px solid rgba(135,52,172,.10);
  border-radius: var(--vh-radius);
  padding: 26px 24px;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vh-land-security-mode:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(135,52,172,.12);
}
.vh-land-security-mode-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--vh-primary), var(--vh-quaternary));
  color: #fff;
}
.vh-land-security-mode h4 { font-size: 1.1rem; font-weight: 700; color: #2b2b2b; margin-bottom: 8px; }
.vh-land-security-mode p { font-size: .92rem; color: #6f6a75; line-height: 1.6; margin: 0; }

.vh-land-security-legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.vh-tutorial-gallery {
  position: relative;
  max-width: 1058px;
  margin: 0 auto;
  padding: 0 70px;
}

.vh-tutorial-gallery-frame {
  min-height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}



.vh-tutorial-gallery-control {
  top: 50%;
  bottom: auto;
  width: 46px;
  height: 46px;
  margin: 0 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--vh-primary);
  color: #fff;
  font-size: 1.35rem;
  opacity: 1;
  box-shadow: 0 8px 20px rgba(135,52,172,.24);
  transition: background .2s ease, transform .2s ease;
}

.vh-tutorial-gallery-control:hover,
.vh-tutorial-gallery-control:focus {
  background: var(--vh-quaternary);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}

.vh-hero-gallery-mobile { margin: 20px 0; text-align: center; }
.vh-hero-gallery-mobile-image { max-width: 100%; height: auto; border-radius: 14px; }

@media (max-width: 767px) {
  .vh-land-security-card { padding: 36px 22px; }
  .vh-tutorial-gallery { max-width: 100%; padding: 0 4px; }
  .vh-tutorial-gallery-frame { min-height: 550px; }
  .vh-tutorial-gallery-image { max-height: 550px; border-radius: 14px; }
  .vh-tutorial-gallery-control { width: 38px; height: 38px; margin: 0 5px; font-size: 1.1rem; }
}

/* =========================================================
   FAQ ACCORDION — rounded-pill violetto, tutti i bordi visibili
   ========================================================= */
.vh-faq-accordion {
  --vh-faq-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238734ac' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

/* Reset Bootstrap: ogni item deve avere tutti i bordi e border-radius indipendente */
.vh-faq-accordion .accordion-item {
  border: 1px solid rgba(135, 52, 172, .25) !important;
  border-radius: 50px !important;
  margin-bottom: 10px;
  overflow: hidden;
}

/* Il primo e l'ultimo NON devono perdere i bordi o il radius */
.vh-faq-accordion .accordion-item:first-of-type,
.vh-faq-accordion .accordion-item:last-of-type {
  border-radius: 50px !important;
}
.vh-faq-accordion .accordion-item:first-of-type .accordion-button,
.vh-faq-accordion .accordion-item:last-of-type .accordion-button {
  border-radius: 50px;
}

/* Bottone chiuso */
.vh-faq-accordion .accordion-button {
  border-radius: 50px;
  font-weight: 600;
  color: #2b2b2b;
  background: #fff;
  box-shadow: none !important;
  padding: 18px 26px;
  transition: background .25s ease, color .25s ease;
}
.vh-faq-accordion .accordion-button::after {
  background-image: var(--vh-faq-accordion-btn-icon);
}
.vh-faq-accordion .accordion-button:hover {
  background: rgba(135, 52, 172, .04);
}

/* Bottone aperto — sfondo viola, angoli superiori arrotondati */
.vh-faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--vh-primary), var(--vh-quaternary));
  color: #fff;
  border-radius: 50px 50px 0 0;
  box-shadow: none !important;
}
.vh-faq-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

/* Body — angoli inferiori arrotondati */
.vh-faq-accordion .accordion-body {
  color: #555;
  padding: 18px 26px 22px;
  line-height: 1.7;
  border-radius: 0 0 50px 50px;
}

/* L'ultimo accordion-body quando visibile mantiene il bordo inferiore arrotondato */
.vh-faq-accordion .accordion-collapse.show + .accordion-body,
.vh-faq-accordion .accordion-collapse.collapsing + .accordion-body {
  border-radius: 0 0 50px 50px;
}

/* Item aperto: bordo violetto pieno + glow */
.vh-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--vh-primary) !important;
  box-shadow: 0 0 0 3px rgba(135, 52, 172, .12);
}