/* ============================================
   TV Image - Frontend Styles
   Premium Dark Theme Web TV
   ============================================ */

/* --- CSS Variables template1 --- */ 

:root {
      --red:       #9B1B2A;
      --red-light: #C0263A;
      --red-dark:  #6e1220;
      --blue:      #2B5BA8;
      --blue-light:#3a70c8;
      /* DARK (default) */
      --bg:        #111214;
      --surface:   #18191d;
      --surface2:  #1f2026;
      --border:    #2c2d33;
      --text:      #F5F2EE;
      --muted:     #7c7a77;
      --logo-badge-bg:     #ffffff;
      --logo-badge-radius: 10px;
      --font-head: 'Playfair Display', serif;
      --font-body: 'DM Sans', sans-serif;
      --font-brand:'Dancing Script', cursive;
      --radius:    5px;
      --tr:        0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    }

    /* ── LIGHT MODE ── */
    html.light {
      --bg:        #F7F5F2;
      --surface:   #EDEAE5;
      --surface2:  #E4E0DA;
      --border:    #D0CBC3;
      --text:      #1A1714;
      --muted:     #888078;
      --logo-badge-bg: transparent;
    }

    /* Smooth theme transition on all elements */
    *, *::before, *::after {
      transition:
        background-color 0.4s ease,
        border-color     0.4s ease,
        color            0.4s ease,
        box-shadow       0.4s ease !important;
    }
    /* But keep transform/opacity transitions fast for interactions */
    .fade-up, .video-card, .photo-card, .nav-link, .btn-tvi, .btn-nav,
    .feed-item, .play-btn, .photo-wrap img {
      transition:
        background-color 0.4s ease,
        border-color     0.4s ease,
        color            0.4s ease,
        box-shadow       0.4s ease,
        opacity          0.65s ease,
        transform        0.35s cubic-bezier(0.25,0.46,0.45,0.94),
        filter           0.65s ease,
        padding-left     0.35s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    }

    html { scroll-behavior: smooth; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.7;
      overflow-x: hidden;
    }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

    h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; }



    /* ══════════════════════════════════════════
       NAVBAR — trasparente, sfondo solo allo scroll
    ══════════════════════════════════════════ */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 0.75rem 0;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: padding var(--tr), background var(--tr), border-color var(--tr), box-shadow var(--tr);
    }
    #navbar.scrolled {
      padding: 0.5rem 0;
      background: rgba(var(--navbar-scroll-rgb), 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    }
    /* Colore base per lo sfondo scroll, diverso per dark/light */
    :root { --navbar-scroll-rgb: 17,18,20; }
    html.light { --navbar-scroll-rgb: 247,245,242; }

    /* Logo — usa sempre logo1.png (trasparente) */
    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      text-decoration: none;
    }
    .logo-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--logo-badge-bg, #ffffff);
      border-radius: var(--logo-badge-radius, 10px);
      padding: 5px 10px;
      transition: background var(--tr), border-radius var(--tr);
    }
    .brand-logo-img {
       height: clamp(50px, 12vw, 100px); /* minimo 50px, massimo 144px, proporzionale alla larghezza viewport */
      width: auto;
      object-fit: contain;
      display: block;
      transition: height var(--tr);
    }
    #navbar.scrolled .brand-logo-img { height: 34px; }
    #navbar.scrolled .logo-badge     { padding: 4px 8px; }

    /* Footer logo */
    .footer-logo-img {
      height: 58px;
      width: auto;
      object-fit: contain;
      margin-bottom: 1rem;
      display: block;
    }

    /* Nav links */
    .nav-link {
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted) !important;
      padding: 0.45rem 0.9rem !important;
      transition: color var(--tr);
      position: relative;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0.9rem; right: 0.9rem;
      height: 1px;
      background: var(--red-light);
      transform: scaleX(0);
      transition: transform var(--tr);
    }
    .nav-link:hover,
    .nav-link.active { color: var(--text) !important; }
    .nav-link:hover::after,
    .nav-link.active::after { transform: scaleX(1); }

    /* Btn CTA navbar */
    .btn-nav {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.45rem 1.1rem;
      border-radius: var(--radius);
      border: 1px solid var(--red);
      color: var(--text);
      background: transparent;
      text-decoration: none;
      transition: var(--tr);
    }
    .btn-nav:hover { background: var(--red); color: #fff; }

    /* ── THEME TOGGLE ── */
    #theme-toggle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--tr);
      flex-shrink: 0;
    }
    #theme-toggle:hover {
      border-color: var(--red-light);
      color: var(--red-light);
      background: rgba(155,27,42,0.08);
    }
    /* Icon swap */
    #theme-toggle .icon-dark  { display: block; }
    #theme-toggle .icon-light { display: none; }
    html.light #theme-toggle .icon-dark  { display: none; }
    html.light #theme-toggle .icon-light { display: block; }

    /* ── CVD TOGGLE NAVBAR ── */
    #cvd-btn-wrap { position: relative; flex-shrink: 0; }

    #cvd-toggle {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: 1rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: var(--tr);
      flex-shrink: 0;
    }
    #cvd-toggle:hover,
    #cvd-toggle.cvd-on {
      border-color: var(--blue-light);
      color: var(--blue-light);
      background: rgba(43,91,168,0.1);
    }

    #cvd-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 0.6rem;
      display: none;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 180px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      z-index: 2000;
    }
    #cvd-dropdown.open { display: flex; }

    .cvd-dd-label {
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0.2rem 0.5rem 0.4rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0.15rem;
    }
    .cvd-dd-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.45rem 0.6rem;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 0.78rem;
      cursor: pointer;
      transition: background var(--tr), color var(--tr);
      text-align: left;
      width: 100%;
    }
    .cvd-dd-item:hover { background: var(--surface2); }
    .cvd-dd-item.active {
      background: rgba(43,91,168,0.12);
      color: var(--blue-light);
    }
    .cvd-dd-dots { display: flex; gap: 3px; flex-shrink: 0; }
    .cvd-dd-dot  { width: 8px; height: 8px; border-radius: 50%; }
    .cvd-dd-name { flex: 1; }
    .cvd-dd-check { font-size: 0.7rem; color: var(--blue-light); opacity: 0; }
    .cvd-dd-item.active .cvd-dd-check { opacity: 1; }

    /* Light mode: home gradient adapt */
    html.light #home::before {
      background:
        radial-gradient(ellipse 55% 55% at 20% 60%, rgba(155,27,42,0.06) 0%, transparent 65%),
        radial-gradient(ellipse 45% 45% at 80% 30%, rgba(43,91,168,0.05) 0%, transparent 60%);
    }
    /* Light mode: video placeholder */
    html.light .video-placeholder {
      background: linear-gradient(160deg, #e8e4de 0%, #dedad4 100%);
    }
    html.light .video-placeholder::before,
    html.light .video-placeholder::after {
      background: repeating-linear-gradient(90deg,
        transparent 0, transparent 10px,
        rgba(0,0,0,0.07) 10px, rgba(0,0,0,0.07) 14px
      );
    }
    html.light .video-placeholder-label { color: var(--muted); }
    /* Light mode: lightbox */
    html.light #lightbox { background: rgba(247,245,242,0.95); }

    /* ══════════════════════════════════════════
       BUTTONS
    ══════════════════════════════════════════ */
    .btn-tvi {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.75rem 1.7rem;
      border-radius: var(--radius);
      font-size: 0.76rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: var(--tr);
    }
    .btn-tvi-red {
      background: var(--red);
      color: #fff;
    }
    .btn-tvi-red:hover {
      background: var(--red-light);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(155,27,42,0.4);
    }
    .btn-tvi-outline {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn-tvi-outline:hover {
      border-color: var(--blue);
      color: var(--blue-light);
      background: rgba(43,91,168,0.08);
    }

    /* ══════════════════════════════════════════
       HOME
    ══════════════════════════════════════════ */
    #home {
      min-height: 100vh;
      padding-top: clamp(60px, 10vw, 144px); /* min, dinamico, max */
      position: relative;
      display: flex;
      align-items: stretch;
    }
    #home::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 55% at 20% 60%, rgba(155,27,42,0.09) 0%, transparent 65%),
        radial-gradient(ellipse 45% 45% at 80% 30%, rgba(43,91,168,0.07) 0%, transparent 60%);
      pointer-events: none;
    }

    .home-left {
      padding: 5rem 3.5rem 5rem 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .home-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--blue-light);
      margin-bottom: 1.4rem;
    }
    .home-eyebrow i { font-size: 0.9rem; }
    .home-left h1 {
      font-size: 1.5em; 
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }
    .home-left h1 .script {
      font-family: var(--font-brand);
      font-size: 1.15em;
      color: var(--red-light);
      display: block;
    }
    .home-left p {
      font-size: 0.98rem;
      max-width: 440px;
      margin-bottom: 2.5rem;
    }

    /* Stat badges */
    .home-stats {
      display: flex;
      gap: 2rem;
      margin-bottom: 2.5rem;
    }
    .stat-item { display: flex; flex-direction: column; }
    .stat-num {
      font-family: var(--font-head);
      font-size: 1.8rem;
      font-weight: 900;
      color: var(--text);
      line-height: 1;
    }
    .stat-num span { color: var(--red-light); }
    .stat-label {
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.2rem;
    }

    /* Vertical divider */
    .home-divider {
      width: 1px;
      background: var(--border);
      align-self: stretch;
      flex-shrink: 0;
    }

    /* Feed avvisi */
    .home-right {
      padding: 0rem 0 0rem 3.5rem;
      display: flex;
      flex-direction: column;
    }
    .feed-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 1.5rem;
    }
    .feed-title {
      font-size: 1.10rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--red);
    }
    .live-dot {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--red-light);
    }
    .live-dot::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--red-light);
      border-radius: 50%;
      animation: blink 1.4s ease-in-out infinite;
    }
    @keyframes blink {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.3; transform:scale(1.4); }
    }

    .feed-scroll {
      flex: 1;
      overflow-y: auto;
      max-height: 1800px;
      padding-right: 0.0rem;
    }
    .feed-item {
      padding: 0rem 0;
      border-bottom: 1px solid var(--border);
      transition: padding-left var(--tr);
    }
    .feed-item:last-child { border-bottom: none; }
    .feed-item:hover { padding-left: 0.0rem; }
    .feed-item-date {
      font-size: 0.72rem;
      color: var(--muted);
      letter-spacing: 0.06em;
      margin-bottom: 0.3rem;
    }
    .feed-item-title {
      font-family: var(--font-head);
      font-size: 1.52rem;
      margin-bottom: 0.3rem;
      line-height: 1.3;
    }
    .feed-item-body {
      font-size: 0.9rem;
      
      line-height: 1.5;
    }
    .feed-tag {
      display: inline-block;
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.12rem 0.45rem;
      border-radius: 2px;
      margin-bottom: 0.35rem;
    }
    .tag-news   { background: rgba(155,27,42,0.18); color: #d94454; }
    .tag-evento { background: rgba(43,91,168,0.18);  color: #6a9de8; }
    .tag-avviso { background: rgba(245,242,238,0.07); color: var(--muted); }

    /* ══════════════════════════════════════════
       SEZIONI GENERALI
    ══════════════════════════════════════════ */
    section { padding: 5.5rem 0; }
    .section-title {
      font-size: clamp(1.8rem, 2.8vw, 2.6rem);
      margin-bottom: 0.4rem;
    }
    .section-subtitle {
      color: var(--muted);
      font-size: 0.93rem;
      margin-bottom: 3rem;
    }

    /* ══════════════════════════════════════════
       VIDEO
    ══════════════════════════════════════════ */
    #servizi { background: var(--surface); }

    .video-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: var(--tr);
      height: 100%;
    }
    .video-card:hover {
      border-color: var(--red);
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,27,42,0.15);
    }
    .video-wrapper {
      position: relative;
      padding-top: 56.25%;
      background: #0d0d0f;
      overflow: hidden;
    }
    .video-wrapper iframe,
    .video-wrapper video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    .video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, #14141a 0%, #0e0e12 100%);
      gap: 0.7rem;
      cursor: pointer;
    }
    /* Filmstrip decoration */
    .video-placeholder::before,
    .video-placeholder::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 18px;
      background: repeating-linear-gradient(90deg,
        transparent 0, transparent 10px,
        rgba(255,255,255,0.06) 10px, rgba(255,255,255,0.06) 14px
      );
    }
    .video-placeholder::before { top: 0; }
    .video-placeholder::after  { bottom: 0; }

    .play-btn {
      width: 58px; height: 58px;
      border-radius: 50%;
      background: var(--red);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: #fff;
      transition: var(--tr);
      box-shadow: 0 0 0 0 rgba(155,27,42,0.5);
    }
    .video-placeholder:hover .play-btn {
      transform: scale(1.1);
      box-shadow: 0 0 0 12px rgba(155,27,42,0.15);
    }
    .video-placeholder-label {
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .video-card-body { padding: 1.2rem 1.4rem 1.5rem; }
    .video-number {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blue-light);
      margin-bottom: 0.45rem;
    }
    .video-card-title {
      font-family: var(--font-head);
      font-size: 1.5rem;
      margin-bottom: 0.4rem;
      line-height: 1.3;
    }
    .video-card-desc {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.55;
    }

/* ══════════════════════════════════════════
       SEGNALAZIONI
    ══════════════════════════════════════════ */    
	.segnala-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: var(--tr);
      cursor: pointer;
      height: 100%;
    }

	.segnala-card-body {
      padding: 1rem 1.2rem 1.25rem;
      background: var(--surface2);
    }
    .segnala-card-title {
      font-family: var(--font-head);
      font-size: 1.52rem;
      margin-bottom: 0.3rem;
	  line-height: 1.3;
    }
/* ══════════════════════════════════════════
       GALLERY
    ══════════════════════════════════════════ */
    #gallery { background: var(--bg); }

    .photo-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: var(--tr);
      cursor: pointer;
      height: 100%;
    }
    .photo-card:hover {
      border-color: var(--blue);
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(43,91,168,0.2);
    }
    .photo-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: #0d0e10;
    }
    .photo-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.65s ease, filter 0.65s ease;
      filter: saturate(0.8) brightness(0.88);
    }
    .photo-card:hover .photo-wrap img {
      transform: scale(1.06);
      filter: saturate(1) brightness(1);
    }
    .photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(43,91,168,0.5) 0%, transparent 55%);
      opacity: 0;
      transition: var(--tr);
      display: flex;
      align-items: flex-end;
      padding: 1rem;
    }
    .photo-card:hover .photo-overlay { opacity: 1; }
    .photo-overlay-icon { font-size: 1.3rem; color: #fff; }
    .photo-card-body {
      padding: 1rem 1.2rem 1.25rem;
      background: var(--surface2);
    }
    .photo-card-title {
      font-family: var(--font-head);
      font-size: 1.30rem;
      margin-bottom: 0.3rem;
    }
    .photo-card-caption {
      font-size: 0.90rem;
    }

    /* ══════════════════════════════════════════
       LIGHTBOX
    ══════════════════════════════════════════ */
    #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.93);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }
    #lightbox.open { display: flex; }
    #lightbox img {
      max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: var(--radius);
      box-shadow: 0 30px 80px rgba(0,0,0,0.9);
    }
    #lightbox-close {
      position: absolute;
      top: 1.5rem; right: 1.5rem;
      font-size: 1.5rem;
      color: var(--muted);
      cursor: pointer;
      background: none;
      border: none;
      transition: color var(--tr);
    }
    #lightbox-close:hover { color: var(--text); }

    /* ══════════════════════════════════════════
       CONTATTI
    ══════════════════════════════════════════ */
    #contatti-section { background: var(--surface); }

    .contact-info-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2.5rem;
      height: 100%;
    }
    .contact-info-item {
      display: flex;
      gap: 1.1rem;
      align-items: flex-start;
      padding: 1.1rem 0;
      border-bottom: 1px solid var(--border);
    }
    .contact-info-item:last-of-type { border-bottom: none; }
    .contact-icon {
      width: 42px; height: 42px;
      border-radius: var(--radius);
      background: rgba(155,27,42,0.1);
      border: 1px solid rgba(155,27,42,0.2);
      display: flex; align-items: center; justify-content: center;
      color: var(--red-light);
      font-size: 1rem;
      flex-shrink: 0;
      transition: var(--tr);
    }
    .contact-info-item:hover .contact-icon {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
    }
    .contact-info-label {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.2rem;
    }
    .contact-info-value {
      font-size: 0.9rem;
      color: var(--text);
    }
    .contact-info-value a {
      color: var(--text);
      text-decoration: none;
      transition: color var(--tr);
    }
    .contact-info-value a:hover { color: var(--red-light); }

    /* Map embed */
    .contact-map {
      margin-top: 1.5rem;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      height: 180px;
    }
    .contact-map iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      filter: grayscale(30%) contrast(1.05);
      transition: filter var(--tr);
    }
    html.light .contact-map iframe { filter: none; }

    /* Form */
    .contact-form-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2.5rem;
      height: 100%;
    }
    .form-group { margin-bottom: 1.25rem; }
    .form-label-tvi {
      display: block;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }
    .form-control-tvi {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 0.88rem;
      padding: 0.7rem 1rem;
      outline: none;
      transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
      resize: none;
    }
    .form-control-tvi::placeholder { color: var(--muted); }
    .form-control-tvi:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(155,27,42,0.12);
      background: var(--surface2);
    }
    .form-control-tvi:focus::placeholder { color: transparent; }
    select.form-control-tvi { cursor: pointer; }
    select.form-control-tvi option { background: var(--surface); }

    /* Checkbox privacy */
    .privacy-check {
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      margin-bottom: 1.5rem;
    }
    .privacy-check input[type="checkbox"] {
      width: 16px; height: 16px;
      accent-color: var(--red);
      margin-top: 0.2rem;
      flex-shrink: 0;
      cursor: pointer;
    }
    .privacy-check label {
      font-size: 0.78rem;
      color: var(--muted);
      line-height: 1.5;
      cursor: pointer;
    }
    .privacy-check label a { color: var(--red-light); text-decoration: none; }
    .privacy-check label a:hover { text-decoration: underline; }

    /* Submit feedback */
    .form-success {
      display: none;
      text-align: center;
      padding: 2.5rem 1rem;
    }
    .form-success-icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: rgba(43,91,168,0.12);
      border: 1px solid rgba(43,91,168,0.25);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
      color: var(--blue-light);
      margin: 0 auto 1.25rem;
    }
    .form-success h4 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }
    .form-success p {
      font-size: 0.85rem;
      color: var(--muted);
    }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    footer {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 4rem 0 2rem;
    }
    .footer-desc { font-size: 0.85rem; max-width: 280px; }
    .footer-heading {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--blue-light);
      margin-bottom: 1.1rem;
    }
    .footer-links { list-style: none; padding: 0; }
    .footer-links li { margin-bottom: 0.5rem; }
    .footer-links a {
      color: var(--black);
      text-decoration: none;
      font-size: 0.83rem;
      transition: color var(--tr);
    }
    .footer-links a:hover { color: var(--text); }
    .footer-bottom {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .footer-copy { font-size: 0.90rem; color: var(--black); }
    .footer-copy a { color: var(--black); text-decoration: none; }
    .footer-copy a:hover { color: var(--text); }
    .footer-social { display: flex; gap: 0.6rem; }
    .footer-social a {
      width: 34px; height: 34px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
      color: var(--muted);
      font-size: 0.88rem;
      text-decoration: none;
      transition: var(--tr);
    }
    .footer-social a:hover {
      border-color: var(--red);
      color: var(--red-light);
    }

.footer-credit {
  width: 100%;
  text-align: center;
  font-size: 0.80rem;
  color: var(--muted);
}

    /* ══════════════════════════════════════════
       ANIMATIONS
    ══════════════════════════════════════════ */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .fade-up:nth-child(2) { transition-delay: 0.12s; }
    .fade-up:nth-child(3) { transition-delay: 0.24s; }

    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    @media (max-width: 767px) {
      .home-left { padding: 3rem 0 2rem; }
      .home-right { padding: 0 0 0; }
      .home-divider { display: none; }
      .feed-scroll { max-height: 300px; }
      .home-stats { gap: 1.5rem; }
    }
    /* ══════════════════════════════════════════
       COLOR PANEL
    ══════════════════════════════════════════ */
    #color-panel-toggle {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1100;
      width: 40px;
      height: 80px;
      background: var(--red);
      border: none;
      border-radius: 6px 0 0 6px;
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      box-shadow: -3px 0 16px rgba(0,0,0,0.3);
      transition: background var(--tr), transform var(--tr);
    }
    #color-panel-toggle:hover { background: var(--red-light); }
    #color-panel-toggle span {
      font-size: 0.48rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      line-height: 1;
    }

    #color-panel {
      position: fixed;
      top: 0; right: 0;
      width: 300px;
      height: 100vh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: 1200;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 40px rgba(0,0,0,0.35);
    }
    #color-panel.open { transform: translateX(0); }

    #color-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 1190;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    #color-panel-overlay.open { opacity: 1; pointer-events: all; }

    .cp-header {
      padding: 1.4rem 1.5rem 1.2rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .cp-title {
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 700;
    }
    .cp-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: 0.95rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: var(--tr);
    }
    .cp-close:hover { border-color: var(--red); color: var(--red-light); }

    .cp-body {
      padding: 1.2rem 1.5rem;
      flex: 1;
      overflow-y: auto;
    }

    .cp-section-title {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 1.2rem 0 0.8rem;
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--border);
    }
    .cp-section-title:first-child { margin-top: 0; }

    .cp-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.85rem;
      gap: 0.75rem;
    }
    .cp-label {
      font-size: 0.8rem;
      color: var(--text);
      flex: 1;
      line-height: 1.3;
    }
    .cp-label small {
      display: block;
      font-size: 0.65rem;
      color: var(--muted);
      margin-top: 0.1rem;
    }

    /* Color swatch + input */
    .cp-swatch-wrap {
      position: relative;
      width: 40px;
      height: 32px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      flex-shrink: 0;
      cursor: pointer;
      transition: border-color var(--tr);
    }
    .cp-swatch-wrap:hover { border-color: var(--red-light); }
    .cp-swatch-wrap input[type="color"] {
      position: absolute;
      inset: -4px;
      width: calc(100% + 8px);
      height: calc(100% + 8px);
      border: none;
      padding: 0;
      cursor: pointer;
      background: none;
    }

    /* Preset palette chips */
    .cp-presets {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-bottom: 1rem;
    }
    .cp-preset-chip {
      display: flex;
      gap: 2px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color var(--tr), transform var(--tr);
    }
    .cp-preset-chip:hover { transform: scale(1.08); }
    .cp-preset-chip.active { border-color: var(--text); }
    .cp-preset-chip span {
      display: block;
      width: 18px;
      height: 18px;
    }

    /* Reset button */
    .cp-reset {
      width: 100%;
      padding: 0.6rem;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: var(--tr);
      margin-top: 0.5rem;
    }
    .cp-reset:hover { border-color: var(--red); color: var(--red-light); }

    .cp-footer {
      padding: 1rem 1.5rem 1.5rem;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }

    /* ══════════════════════════════════════════
       MODALITÀ DALTONISMO
       Il filtro va su #page-content (NON su body),
       così il pannello palette resta sempre accessibile.
    ══════════════════════════════════════════ */
    #page-content { transition: filter 0.4s ease; }
    body.cvd-protanopia    #page-content { filter: url(#cvd-protanopia);    }
    body.cvd-deuteranopia  #page-content { filter: url(#cvd-deuteranopia);  }
    body.cvd-tritanopia    #page-content { filter: url(#cvd-tritanopia);    }
    body.cvd-achromatopsia #page-content { filter: url(#cvd-achromatopsia); }
    body.cvd-high-contrast #page-content { filter: contrast(1.6) saturate(0); }

    /* Chips modalità accessibilità */
    .cvd-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .cvd-chip {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      padding: 0.6rem 0.4rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color var(--tr), background var(--tr);
      background: transparent;
      color: var(--text);
      font-family: var(--font-body);
      text-align: center;
    }
    .cvd-chip:hover    { border-color: var(--blue-light); }
    .cvd-chip.active   { border-color: var(--blue); background: rgba(43,91,168,0.12); }
    .cvd-chip-dots     { display: flex; gap: 3px; }
    .cvd-chip-dot      { width: 10px; height: 10px; border-radius: 50%; }
    .cvd-chip-label    { font-size: 0.68rem; font-weight: 500; line-height: 1.2; }
    .cvd-chip-sublabel { font-size: 0.58rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   ALERTS  —  alert-success / alert-danger / alert-warning / alert-info
   ═══════════════════════════════════════════════════════════════ */
 
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  animation: alertFadeIn 0.3s ease;
}
 
/* Icona automatica via ::before */
.alert::before {
  font-family: "Bootstrap Icons";        /* richiede bootstrap-icons */
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
 
/* ── Varianti ──────────────────────────────────────────────── */
 
.alert-success {
  background: #d8f5e9;
  border-color: #a3e6c5;
  color: #1a6640;
}
.alert-success::before {
  content: "\F26A";                      /* bi-check-circle-fill */
  color: #28a865;
}
 
.alert-danger {
  background: #fde8e8;
  border-color: #f5b8b8;
  color: #7a1c1c;
}
.alert-danger::before {
  content: "\F333";                      /* bi-x-circle-fill */
  color: #e03131;
}
 
.alert-warning {
  background: #fff4cc;
  border-color: #ffe08a;
  color: #6b4c00;
}
.alert-warning::before {
  content: "\F33B";                      /* bi-exclamation-triangle-fill */
  color: #f59f00;
}
 
.alert-info {
  background: #e0f0ff;
  border-color: #a5d0f5;
  color: #0c3a6b;
}
.alert-info::before {
  content: "\F431";                      /* bi-info-circle-fill */
  color: #1971c2;
}

/* ── Dismissibile ──────────────────────────────────────────── */
 
.alert-dismissible {
  padding-right: 2.8rem;
  position: relative;
}
 
.alert-dismissible .btn-close-alert {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.2s;
  padding: 0;
}
 
.alert-dismissible .btn-close-alert:hover {
  opacity: 1;
}
 
/* ── Errori inline sui campi ───────────────────────────────── */
 
span.error,
.field-error {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: #e03131;
}
 
span.error::before,
.field-error::before {
  font-family: "Bootstrap Icons";
  content: "\F33B  ";                    /* bi-exclamation-triangle-fill */
}

/* ── Form Success State ─────────────────────────────────── */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 1rem;
}

.form-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #d8f5e9;
  color: #28a865;
  font-size: 2rem;
}

.form-success h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading, #1a1a1a);
  margin: 0;
}

.form-success p {
  font-size: 0.95rem;
  color: var(--muted, #666);
  margin: 0;
}
 
/* ── Animazione entrata ────────────────────────────────────── */
 
@keyframes alertFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
/* ── Auto-dismiss (opzionale, attivato via JS) ─────────────── */

.input-error {
  border-color: #e03131 !important;
}
 
.alert.fade-out {
  animation: alertFadeOut 0.4s ease forwards;
}
 
@keyframes alertFadeOut {
  to {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
  }
}

/* Tablet */
@media (max-width: 1024px) {
    .brand-logo-img {
        height: 100px;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .brand-logo-img {
        height: 70px;
    }
}