/* Start custom CSS for html, class: .elementor-element-077b08e */.sf-app { font-family: 'Inter', sans-serif; padding-bottom: 50px; }

.sf-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:#0f6cff;color:#fff;
  font-size:18px;font-weight:700;border-radius:12px;
}
.sf-icons button,.sf-icons a{
  background:#fff;color:#0f6cff;border:none;padding:6px 12px;
  margin-left:6px;border-radius:8px;cursor:pointer;font-weight:600;
}

.sf-search-box{padding:15px;}
.sf-search-box input{
  width:100%;padding:14px;border-radius:10px;border:1px solid #ccc;
  font-size:16px;
}

.sf-banner img{width:100%;border-radius:14px;margin-top:10px;}

.sf-section-title{
  margin:18px 0 8px;font-size:19px;font-weight:700;
}

.sf-categories{
  display:flex;overflow-x:auto;gap:12px;padding:6px;
}
.sf-cat{
  background:#e9f1ff;padding:10px 16px;border-radius:20px;
  font-weight:600;white-space:nowrap;cursor:pointer;
}

.sf-products{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px;padding:10px;
}
.sf-product{
  background:#fff;padding:12px;border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.07);
  text-align:center;
}
.sf-product img{width:100px;height:100px;object-fit:contain;}
.sf-title{font-weight:600;margin-top:6px;}
.sf-price{color:#0f6cff;margin:4px 0;font-weight:700;}
.sf-add{
  background:#0f6cff;color:#fff;border:none;padding:8px 14px;
  border-radius:8px;cursor:pointer;
}

.sf-resep{
  background:#fff;padding:20px;margin:20px;border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.sf-upload-btn{
  background:#08b88b;color:#fff;padding:10px 18px;border:none;
  border-radius:8px;margin-top:10px;cursor:pointer;
}

.sf-consult{
  position:fixed;bottom:20px;right:20px;
  background:#25d366;color:#fff;padding:12px 20px;
  border-radius:30px;font-size:16px;font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.2);text-decoration:none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-136bdf7 */.sf-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.sf-popup.show {
  display: flex;
  animation: fadeIn .2s ease-out;
}

.sf-popup-box {
  background: #fff;
  width: 90%;
  max-width: 380px;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  animation: popIn .25s ease-out;
}

.sf-popup-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 18px;
  text-align: center;
}

.sf-popup-box input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 15px;
}

#sf-login-submit {
  width: 100%;
  padding: 12px;
  background: #0f6cff;
  color: #fff;
  border: none;
  font-size: 17px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 15px;
}

.sf-popup-links {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.sf-popup-links a {
  color: #0f6cff;
  text-decoration: none;
}

.sf-popup-close {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border: none;
  background: #f1f1f1;
  border-radius: 10px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {opacity: 0;} to {opacity: 1;}
}

@keyframes popIn {
  from {transform: scale(.85);} to {transform: scale(1);}
}/* End custom CSS */