:root {
      --primary: #ffd200;
      --secondary: #ffd200;
      --bg: #fcf7f7;
      --text: #222;
      --radius: 12px;
      --shadow: 0 6px 18px rgba(0,0,0,0.20);
    }
     .card {
     /* background: none; */
     width: 100%;
     margin: 0 auto;
     /* padding: 2rem; */
     position: relative;
     animation: fadeIn 0.4s 
ease-in-out;
}
     

    .title {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color:#000;
    }
.meta { display:none; visibility:hidden }
.titleinfo {background:#fff;width:auto;padding: 10px 20px;color:#000;display: table;font-weight: 600;font-size: 20px;border-radius: 30px;text-transform: uppercase;margin: auto;}
    .progress {
      height: 4px;
      background: #000;
      border-radius: 6px;
      margin-bottom: 1.5rem;
      overflow: hidden;
    }
    .progress span {
      display: block;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      transition: width 0.3s ease;
    }

    .contenitoreform {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.2rem;
      margin-bottom:20px;
    }
.sr { gap:20px }
    .field {
      position: relative;
      display: flex;
      flex-direction: column;
      padding-top: 20px;
    }

   .field input, .field select {
    padding: 12px 16px;
    border: 1px solid #eee;
    outline: none;
    font-size: 1rem;
    background: #f5f5f5;
     border-radius:8px;
    transition: border 0.25s;
  
 
}
.reviews-track{
  overflow-x:auto; /* se non c’è overflow, non scorre comunque */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}

.reviews-track.is-scrollable{
  cursor: grab;
  user-select: none;
}

.reviews-track.is-scrollable.is-dragging{
  cursor: grabbing;
}

.review-card{
  user-select: text;
  scroll-snap-align: start;
}

    .field input:focus,
    .field select:focus {
      border-color: var(--primary);
    }
.field label {
    position: relative;
    font-size: 1rem;
    /* color: #000; */
    font-weight:bold;
    pointer-events: none;
    transition: 0.2s;
    text-align: left;
    /* background: #fff; */
    width: auto;
    display: flex;
    margin: 8px 0;
}
    

   

    .actions {
      margin-top: 1.5rem;
      text-align: center;
    }

    .actions button {
      background: linear-gradient(90deg, #3e5fff, #3e5fff);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      padding: 0.9rem 2rem;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .actions button:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    /* Animazioni */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
/* ===== LOADER OVERLAY ===== */
 
    /* Responsive */
    @media (max-width: 480px) {
      .card {
        /* padding: 1.2rem; */
      }
      .title {
        font-size: 1.2rem;
      }
      .actions button {
        width: 100%;
      }
    }
    @media (min-width: 480px) and (max-width: 1024px) {
  .card {
    padding: 1.8rem;
  }
  .title {
    font-size: 1.3rem;
  }
  .contenitoreform {
    grid-template-columns: 1fr 1fr; /* due colonne */
    gap: 1rem 1.5rem;
  }
  .actions button {
    width: auto; /* non full width come su mobile */
    min-width: 200px;
  }
}
.summary div { font-weight:bold; font-size:16px; }
.summary .label { font-weight:400; font-size:18px; }
.summary {display: flex;flex-direction: column;gap: 5px;}
.ghost{ background: transparent; border:1px solid rgba(255,255,255,.25); color:#e9f1ff; box-shadow:none; }

  /* ===== LOADER OVERLAY ===== */
  .overlay{
    position:fixed; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px;
    background: rgba(10,14,26,.72); backdrop-filter: blur(4px); z-index:50;
  }
  .gear{
    width:80px; height:80px; position:relative; filter: drop-shadow(0 6px 18px rgba(124,242,255,.25));
    animation: pop .4s ease both;
  }
  @keyframes pop{ from{ transform: scale(.85); opacity:.3;} to{ transform: scale(1); opacity:1;} }
  .spin{ animation: spin 1.1s linear infinite; transform-origin: 50% 50%; }
  @keyframes spin{ to{ transform: rotate(360deg);} }
  .loader-text{color: #ffffff;font-weight:600;letter-spacing:.3px;}
  .bar{ width:min(360px, 70vw); height:10px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
  .bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--acc), var(--acc2), var(--acc3)); animation: load 4s ease forwards; }
  @keyframes load{ to{ width:100%; } }
  .modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:60;
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(3px);
  }
  .modal .box{
    width:min(760px, 92vw);
    /* border-radius:18px; */
    padding:22px 22px 18px;
    background: #fff;
    /* border:1px solid rgba(255,255,255,.18); */
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    animation: rise .4s ease both;
    margin: 15vh auto;
    color: #000;
  }
  .modal h3{ margin:4px 0 10px; font-size: clamp(20px, 2.4vw, 28px); display: block; }
  .modal p{color: #000000;margin:0 0 8px;}
@media (max-width: 1024px) {
    .contenitoreform {
      gap:0 !important;
      margin-bottom:0px;
    }