.pill-button .elementor-button {
  border-radius: 9999px;
  font-weight: 700;
  padding: 10px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.pill-panel{
  --display: none;                 
  display: var(--display);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 12px;
  padding: 0;
  transition : all 0.3s ease;                     
      
}
.pill-panel.is-open{
  --display: flex;                
  max-height: 1000px;              
  opacity: 1;
  padding: 16px 20px;
}

.ff-threshold-source{
  --display: none;           
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 12px;
  padding: 0;
  transition: all 0.3s ease;
}

.ff-threshold-source.is-open{
  --display: flex;           
  max-height: 1000px;      
  opacity: 1;
  padding: 16px 20px;      
}

.ff-reference{
  --display: none;           
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 12px;
  padding: 0;
  transition: all 0.3s ease;
}

.ff-reference.is-open{
  --display: flex;           
  max-height: 1000px;      
  opacity: 1;
  padding: 16px 20px;      
}
/* Hidden 
.elementor .elementor-element-55164be.pill-panel {
  --display: none;         
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
}*/

/* When opened (e.g., via JS toggle) *
.elementor .elementor-element-55164be.pill-panel.is-open {
  --display: flex;          
  max-height: 1000px;       
  opacity: 1;
}*/

.tp-firefly {
  font-size: 16px;
  line-height: 1.5;
}

.tp-firefly table {
  width: 100%;
  border-collapse: collapse;
}
.tp-firefly thead th {
  font-weight: 700;
  padding: 14px 10px;
  border-bottom: 3px solid #000;
}
.tp-firefly td, .tp-firefly th {
  padding: 14px 10px;
  border-bottom: 1px solid #222; 
  vertical-align: middle;
}

.tp-firefly td:first-child {
  font-weight: 700;
}

.tablepress .column-4 span {
  display: inline-block ;
  margin-right: 1px;
  white-space: nowrap;
}

.tablepress .column-4 br {
  display: none; 
}

.ff-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;     
}
.ff-badge.g { background:#43a047; color:#fff; }   
.ff-badge.y { background:#fdd835; color:#111; }
.ff-badge.o { background:#ff9800; color:#111;}  
.ff-badge.r { background:#e53935; color:#fff; }

.ff-badge.bad { background-color: #e53935; }       
.ff-badge.moderate { background-color: #fdd835; color: #000; } 
.ff-badge.good { background-color: #43a047; }

.ff-badge.poor { background-color: #673ab7; }        
.ff-badge.unsat { background-color: #e53935; }       
.ff-badge.fair { background-color: #ff9800; }        
.ff-badge.good { background-color: #ffc107; color: #000; } 
.ff-badge.excellent { background-color: #4caf50; }   

.ff-badge.poor { background-color: #ea3135; }           
.ff-badge.unsat { background-color: #ff7525; }          
.ff-badge.needs { background-color: #bbd3aa; color:#000; } 
.ff-badge.fair { background-color: #ffd326; color:#000; }  
.ff-badge.good { background-color: #9bdc53; color:#000; }  
.ff-badge.excellent { background-color: #37c437; }     
.ff-dot {
  display:inline-block;
  width:6px; height:6px;
  background:#111;
  border-radius:50%;
  margin: 0 6px;
  transform: translateY(-2px);
}

.tp-firefly td:last-child {
  color:#222;
}

@media (max-width: 768px) {
  .tp-firefly thead { display: none; }  
  .tp-firefly tr { display:block; padding:12px 0; }
  .tp-firefly td { display:block; padding:8px 0; border-bottom: none; }
  .tp-firefly td + td { border-top: 1px dashed #ddd; } 
}

/* -------------------------------------------------------------*/
/* product configuration table */
/* -------------------------------------------------------------*/
.ff-configs {
  width:100%; border-collapse:collapse; font-size:13px;
}
.ff-configs th, .ff-configs td {
  border: 1px solid #ddd; 
  border-left: none;  
  border-right: none; 
  padding: .7rem .8rem; 
  vertical-align: middle;
}
.ff-configs thead th { background:#e9f6ff; font-weight:700; text-align: left; }
.ff-configs tbody tr:nth-child(even) { background:#fafafa; }
.ff-configs td.price { background:#fff8c4; font-weight:700; text-align:right; }

.ff-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  font-weight: 400;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  line-height: 1;
  transition: all 0.25s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.ff-btn::after{
  content: "↘";
  display: inline-block;
  margin-left: 6px;
  color: #fff;
  transition: color .18s ease, transform .18s ease;
}

.ff-btn:hover {
  background: #000;
  color: #CAC607 !important; 
  transform: translateY(-1px);
}
.ff-btn:hover::after {
  color: #CAC607;           
  transform: translateY(-1px);
}
.ff-configs td.price {
  background: transparent; 
}
.ff-configs td.price:not(:has(.ff-btn)) {
  background: #fff8c4;   
}
/* -------------------------------------------------------------*/