/* ============================================================
   SERVELIO_CATALOG_UI_FINAL_V1
   ============================================================ */

.scuf-starter-hidden{
  display:none !important;
}

.scuf-applied{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:18px 0;
  padding:16px 18px;
  border:1px solid #bbf7d0;
  border-radius:16px;
  background:#f0fdf4;
}

.scuf-applied-main{
  display:flex;
  align-items:center;
  gap:13px;
}

.scuf-check{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#16a34a;
  color:#fff;
  font-size:21px;
  font-weight:900;
}

.scuf-applied strong{
  display:block;
  color:#14532d;
  font-size:15px;
  font-weight:800;
}

.scuf-applied span{
  display:block;
  margin-top:3px;
  color:#4b6353;
  font-size:13px;
  line-height:1.4;
}

.scuf-template-toggle{
  flex:0 0 auto;
  border:1px solid #bbf7d0;
  border-radius:10px;
  background:#fff;
  color:#166534;
  padding:9px 12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.scuf-template-toggle:hover{
  background:#dcfce7;
}

.scuf-mod-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.scuf-mod-actions button{
  border:0;
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.scuf-edit{
  background:#eef2f7;
  color:#0f172a;
}

.scuf-edit:hover{
  background:#e2e8f0;
}

.scuf-delete{
  background:#fee2e2;
  color:#b91c1c;
}

.scuf-delete:hover{
  background:#fecaca;
}

@media(max-width:700px){

  .scuf-applied{
    align-items:flex-start;
    flex-direction:column;
  }

  .scuf-template-toggle{
    margin-left:51px;
  }

}