#sa-transizione-crocchette{
  --sa-blue:#2f6171;
  --sa-blue-dark:#244c59;
  --sa-teal:#6aa7b0;
  --sa-bg:#f4f9fa;
  --sa-soft:#eef6f7;
  --sa-warn:#fff6e6;
  --sa-border:#cfe1e5;
  --sa-text:#263238;
  font-family:inherit;
  color:var(--sa-text);
  line-height:1.6;
  max-width:100%;
  overflow:visible;
}

#sa-transizione-crocchette *{
  box-sizing:border-box;
}

#sa-transizione-crocchette .sa-tc-card{
  background:#fff;
  border:1px solid var(--sa-border);
  border-radius:18px;
  padding:1.2rem;
  box-shadow:0 8px 24px rgba(47,97,113,.08);
  margin:1.5rem 0;
}

#sa-transizione-crocchette h2{
  margin:0 0 .6rem;
  color:var(--sa-blue-dark);
  font-size:1.65rem;
  line-height:1.25;
}

#sa-transizione-crocchette h3{
  margin:1.4rem 0 .7rem;
  color:var(--sa-blue);
  font-size:1.2rem;
  line-height:1.35;
}

#sa-transizione-crocchette p{
  margin:0 0 .9rem;
}

#sa-transizione-crocchette .sa-tc-small-note{
  color:#5d6b70;
  font-size:.95rem;
}

#sa-transizione-crocchette .sa-tc-note{
  background:var(--sa-soft);
  border-left:5px solid var(--sa-teal);
  padding:.9rem 1rem;
  border-radius:12px;
  margin:1rem 0;
}

#sa-transizione-crocchette .sa-tc-warning{
  background:var(--sa-warn);
  border-left:5px solid #d59a3a;
  padding:.9rem 1rem;
  border-radius:12px;
  margin:1rem 0;
}

#sa-transizione-crocchette .sa-tc-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

#sa-transizione-crocchette .sa-tc-field{
  margin-bottom:.9rem;
}

#sa-transizione-crocchette .sa-tc-field label{
  display:block;
  font-weight:700;
  margin-bottom:.35rem;
  color:var(--sa-blue-dark);
  line-height:1.35;
}

#sa-transizione-crocchette .sa-tc-field small{
  display:block;
  margin-top:.3rem;
  color:#5d6b70;
  font-size:.88rem;
  line-height:1.45;
}

#sa-transizione-crocchette input,
#sa-transizione-crocchette select{
  width:100%;
  min-height:46px;
  padding:.72rem .8rem;
  border:1px solid var(--sa-border);
  border-radius:12px;
  background:#fff;
  font:inherit;
  color:var(--sa-text);
  line-height:1.35;
}

#sa-transizione-crocchette input:focus,
#sa-transizione-crocchette select:focus{
  outline:2px solid rgba(106,167,176,.35);
  border-color:var(--sa-teal);
}

#sa-transizione-crocchette .sa-tc-mode{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
  margin:1rem 0 1.2rem;
}

#sa-transizione-crocchette .sa-tc-mode-card{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  cursor:pointer;
  border:1px solid var(--sa-border);
  border-radius:14px;
  padding:.95rem;
  background:#fff;
  transition:all .2s ease;
}

#sa-transizione-crocchette .sa-tc-mode-card.is-selected{
  border-color:var(--sa-teal);
  background:var(--sa-soft);
  box-shadow:0 0 0 2px rgba(106,167,176,.18);
}

#sa-transizione-crocchette .sa-tc-mode-card input{
  width:auto;
  min-height:auto;
  margin-top:.25rem;
  flex:0 0 auto;
}

#sa-transizione-crocchette .sa-tc-mode-card span{
  display:block;
  line-height:1.45;
  min-width:0;
}

#sa-transizione-crocchette .sa-tc-mode-card strong{
  color:var(--sa-blue-dark);
}

#sa-transizione-crocchette .sa-tc-panel{
  display:none;
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--sa-border);
  border-radius:16px;
  background:#fbfdfd;
}

#sa-transizione-crocchette .sa-tc-panel.is-open{
  display:block;
}

#sa-transizione-crocchette .sa-tc-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

#sa-transizione-crocchette button{
  border:none;
  border-radius:999px;
  padding:.8rem 1.15rem;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  line-height:1.25;
}

#sa-transizione-crocchette .sa-tc-primary{
  background:var(--sa-blue);
  color:#fff;
}

#sa-transizione-crocchette .sa-tc-primary:hover{
  background:var(--sa-blue-dark);
}

#sa-transizione-crocchette .sa-tc-secondary{
  background:#e7f1f3;
  color:var(--sa-blue-dark);
}

#sa-transizione-crocchette .sa-tc-error{
  display:none;
  background:#fdecec;
  border-left:5px solid #c84a4a;
  padding:.9rem 1rem;
  border-radius:12px;
  margin:1rem 0;
  color:#6b1f1f;
}

#sa-transizione-crocchette .sa-tc-result{
  margin-top:1.3rem;
  display:none;
}

#sa-transizione-crocchette .sa-tc-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem;
  margin:1rem 0;
}

#sa-transizione-crocchette .sa-tc-box{
  background:var(--sa-bg);
  border:1px solid var(--sa-border);
  border-radius:14px;
  padding:.9rem;
}

#sa-transizione-crocchette .sa-tc-box span{
  display:block;
  font-size:.9rem;
  color:#5d6b70;
  line-height:1.35;
}

#sa-transizione-crocchette .sa-tc-box strong{
  display:block;
  font-size:1.18rem;
  color:var(--sa-blue-dark);
  margin-top:.2rem;
  line-height:1.25;
}

#sa-transizione-crocchette .sa-tc-range-box{
  background:#edf7f1;
  border-color:#b9d9c6;
}

#sa-transizione-crocchette .sa-tc-formula{
  background:#f7f9fa;
  border:1px solid var(--sa-border);
  border-radius:12px;
  padding:.85rem 1rem;
  margin:1rem 0;
  font-size:.98rem;
  line-height:1.65;
}

#sa-transizione-crocchette .sa-tc-table-wrap{
  overflow-x:auto;
  margin-top:1rem;
  border:1px solid var(--sa-border);
  border-radius:14px;
}

#sa-transizione-crocchette table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
  background:#fff;
}

#sa-transizione-crocchette th,
#sa-transizione-crocchette td{
  padding:.75rem;
  border-bottom:1px solid #e5eef1;
  text-align:left;
  vertical-align:top;
  line-height:1.45;
}

#sa-transizione-crocchette th{
  background:var(--sa-soft);
  color:var(--sa-blue-dark);
  font-weight:800;
}

#sa-transizione-crocchette tr:last-child td{
  border-bottom:none;
}

@media(max-width:760px){
  #sa-transizione-crocchette .sa-tc-card{
    padding:.85rem;
    border-radius:14px;
    margin:1rem 0;
  }

  #sa-transizione-crocchette .sa-tc-grid,
  #sa-transizione-crocchette .sa-tc-mode,
  #sa-transizione-crocchette .sa-tc-summary{
    grid-template-columns:1fr;
  }

  #sa-transizione-crocchette .sa-tc-panel{
    padding:.85rem;
  }

  #sa-transizione-crocchette h2{
    font-size:1.32rem;
  }

  #sa-transizione-crocchette h3{
    font-size:1.08rem;
  }

  #sa-transizione-crocchette input,
  #sa-transizione-crocchette select{
    font-size:16px;
  }

  #sa-transizione-crocchette .sa-tc-buttons{
    flex-direction:column;
  }

  #sa-transizione-crocchette button{
    width:100%;
  }

  #sa-transizione-crocchette .sa-tc-table-wrap{
    border:none;
    overflow:visible;
  }

  #sa-transizione-crocchette table{
    min-width:0!important;
    width:100%!important;
    border-collapse:separate;
    border-spacing:0;
  }

  #sa-transizione-crocchette thead{
    display:none;
  }

  #sa-transizione-crocchette table,
  #sa-transizione-crocchette tbody,
  #sa-transizione-crocchette tr,
  #sa-transizione-crocchette td{
    display:block;
    width:100%;
  }

  #sa-transizione-crocchette tr{
    background:#fff;
    border:1px solid var(--sa-border);
    border-radius:14px;
    margin-bottom:.9rem;
    padding:.65rem;
  }

  #sa-transizione-crocchette td{
    border-bottom:1px solid #e5eef1;
    padding:.55rem .25rem;
  }

  #sa-transizione-crocchette td:last-child{
    border-bottom:none;
  }

  #sa-transizione-crocchette td::before{
    content:attr(data-label);
    display:block;
    font-weight:700;
    color:var(--sa-blue-dark);
    margin-bottom:.15rem;
    font-size:.88rem;
  }
}