:root{
  --bf-bg:#16a6a0;
  --bf-primary:#17a6a0;
  --bf-primary-dark:#0f7f7c;
  --bf-primary-soft:#e9f7f6;
  --bf-body:#1d232a;
  --bf-muted:#7b8694;
  --bf-line:#edf0f2;
  --bf-soft:#f7f9fa;
  --bf-soft-2:#fafbfc;
  --bf-card:#ffffff;
  --bf-mint:#d9f4f0;
  --bf-blush:#f8e0db;
  --bf-lilac:#ebdcf5;
  --bf-softgold:#f7eed1;
  --bf-danger-soft:#fde6ea;
  --bf-success-soft:#e8f7ea;
  --bf-radius-2xl:26px;
  --bf-radius-xl:22px;
  --bf-radius-lg:18px;
  --bf-radius-md:14px;
  --bf-radius-sm:10px;
  --bf-topbar-h:84px;
  --bf-sidebar-w:220px;
  --bf-right-w:332px;
  --bf-shadow:0 10px 28px rgba(18,47,54,.08);
  --bf-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--bf-font);
  color:var(--bf-body);
  /*background:var(--bf-bg);*/
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }
img{ max-width:100%; display:block; }

/*.bf-shell{
  min-height:100vh;
  padding:42px;
  background:var(--bf-bg);
}*/
.bf-app{
  /*height:calc(100vh - 84px);*/
  height:calc(100vh);

  min-height:760px;
  background:#fff;
  /*border-radius:var(--bf-radius-2xl);*/
  overflow:hidden;
  box-shadow:var(--bf-shadow);
}
.bf-topbar{
  height:var(--bf-topbar-h);
  border-bottom:1px solid var(--bf-line);
  display:grid;
  grid-template-columns:var(--bf-sidebar-w) 1fr var(--bf-right-w);
  align-items:center;
  background:#fff;
}
.bf-topbar-brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 26px;
  height:100%;
}
.bf-topbar-brand img{ width:30px; height:auto;}
.bf-topbar-center{
  padding:0 28px;
  display:flex;
  align-items:center;
  height:100%;
}
.bf-topbar-actions{
  height:100%;
  padding:0 28px 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.bf-search{
  position:relative;
  width:100%;
  max-width:470px;
}
.bf-search i{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#9aa3ad;
  font-size:17px;
}
.bf-search input{
  width:100%;
  height:38px;
  border:1px solid #e4e8ec;
  background:#fbfbfc;
  border-radius:10px;
  padding:0 16px 0 42px;
  font-size:13px;
  color:var(--bf-body);
  outline:none;
}
.bf-search input::placeholder{ color:#a4adb7; }

.bf-icon-circle{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid #e4e8ec;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#7b8694;
  background:#fff;
  font-size:18px;
  flex:0 0 auto;
}
.bf-user-chip{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.bf-user-chip img{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
}
.bf-user-name{ font-size:15px; font-weight:600; line-height:1.2; }
.bf-user-role{ font-size:12px; color:var(--bf-muted); margin-top:3px; }

.bf-body{
  height:calc(100% - var(--bf-topbar-h));
  display:grid;
  grid-template-columns:var(--bf-sidebar-w) 1fr var(--bf-right-w);
  background:#fff;
}
.bf-sidebar{
  border-right:1px solid var(--bf-line);
  background:#fff;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:auto;
}
.bf-sidebar-scroll{
  min-height:100%;
  display:flex;
  flex-direction:column;
  padding:18px 14px 18px;
}
.bf-nav{ display:flex; flex-direction:column; gap:5px; }
.bf-nav-section{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#a0a7b0;
  padding:10px 14px 6px;
}
.bf-nav-item{
  height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  font-size:14px;
  color:#1e252c;
  transition:background .2s ease, color .2s ease;
}
.bf-nav-item i{
  font-size:17px;
  color:#838d98;
  width:18px;
  text-align:center;
}
.bf-nav-item:hover{ background:#f7f9fa; }
.bf-nav-item.active{
  background:#f5f8f8;
  color:#11181f;
}
.bf-nav-item.active i{ color:var(--bf-primary); }
.bf-sidebar-bottom{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.bf-main{
  min-width:0;
  background:#fff;
  overflow:auto;
}
.bf-main-scroll{
  min-height:100%;
  padding:18px 28px 28px;
}
.bf-right{
  border-left:1px solid var(--bf-line);
  background:#fbfcfc;
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.bf-right-scroll{
  flex:1;
  overflow:auto;
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.bf-panel{
  border:1px solid #eef1f3;
  background:#fff;
  border-radius:18px;
  padding:18px;
}
.bf-panel-title{
  margin:0;
  font-size:15px;
  font-weight:700;
}
.bf-panel-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--bf-muted);
  line-height:1.6;
}
.bf-line{
  height:1px;
  background:var(--bf-line);
  margin:14px 0;
}
.bf-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.bf-list-head span{
  color:#66707a;
  font-size:12px;
  font-weight:700;
}
.bf-order-detail-head,
.bf-profile-mini{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.bf-order-detail-icons{
  display:flex;
  gap:12px;
  font-size:16px;
  color:#88919c;
}
.bf-order-detail-subrow{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:#66707a;
}
.bf-item-list,
.bf-summary-list,
.bf-mini-list,
.bf-help-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bf-item-row,
.bf-summary-row,
.bf-mini-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:start;
  font-size:13px;
}
.bf-item-qty{
  color:#96a0aa;
  min-width:28px;
}
.bf-item-name{
  color:#48515a;
  line-height:1.5;
}
.bf-item-price,
.bf-summary-row strong{
  font-weight:700;
}
.bf-summary-row{
  grid-template-columns:1fr auto;
  color:#5b6771;
}
.bf-summary-row strong,
.bf-total strong{ color:#101821; }
.bf-total{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed #d9dee4;
}
.bf-method-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.bf-method-btn{
  min-width:84px;
  height:38px;
  border:1px solid #dde3e8;
  border-radius:10px;
  background:#fff;
  color:#6f7983;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  cursor:pointer;
}
.bf-method-btn.active{
  border-color:var(--bf-primary);
  color:var(--bf-primary);
  background:#f3fbfb;
}
.bf-right-footer{
  margin-top:auto;
  display:flex;
  gap:12px;
}
.bf-btn{
  height:46px;
  border:1px solid #dde3e8;
  background:#fff;
  color:#48515a;
  border-radius:12px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  cursor:pointer;
}
.bf-btn-primary{
  flex:1;
  background:var(--bf-primary);
  border-color:var(--bf-primary);
  color:#fff;
}
.bf-btn-primary:hover{ background:var(--bf-primary-dark); }
.bf-btn-soft{
  background:#f2fbfa;
  border-color:#d7efed;
  color:var(--bf-primary-dark);
}
.bf-btn.w-100{ width:100%; }

.bf-section{
  margin-bottom:22px;
}
.bf-section:last-child{ margin-bottom:0; }
.bf-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.bf-page-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#151d25;
}
.bf-page-kicker{
  font-size:12px;
  color:#8d97a1;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  margin-bottom:6px;
}
.bf-section-subtitle{
  font-size:13px;
  color:#7b8694;
  line-height:1.6;
  margin:4px 0 0;
}
.bf-inline-actions{ display:flex; align-items:center; gap:10px; }
.bf-nav-arrow{
  width:34px; height:34px;
  border:1px solid #dfe5ea;
  background:#fff;
  color:#74808a;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bf-divider{
  height:1px;
  background:var(--bf-line);
  margin:18px 0;
}
.bf-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.bf-chip{
  height:36px;
  border-radius:999px;
  border:1px solid #dde3e8;
  background:#fff;
  color:#55616c;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  cursor:pointer;
  transition:.18s ease;
}
.bf-chip.active,
.bf-chip.is-on{
  color:var(--bf-primary-dark);
  border-color:#49b9b4;
  background:#f3fbfb;
}
.bf-chip-badge{
  min-width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  padding:0 7px;
}
.badge-teal{ background:#d9f4f0; color:#117a76; }
.badge-orange{ background:#f9e3d7; color:#d46b34; }
.badge-purple{ background:#eadff7; color:#7b47b8; }
.badge-green{ background:#e2f5e3; color:#2f7d3f; }
.badge-red{ background:#fde6ea; color:#ca3a5b; }
.badge-gray{ background:#eef2f5; color:#6d7882; }

.bf-filter-hint{
  margin-top:10px;
  color:#78848f;
  font-size:13px;
}
.bf-order-slider{ position:relative; }
.bf-order-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.bf-order-card{
  padding:16px 18px;
  border-radius:18px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.18s ease;
}
.bf-order-card:hover,
.bf-order-card.active{
  border-color:#b8dedb;
  box-shadow:0 12px 24px rgba(22,42,50,.08);
}
.bf-order-card.mint{ background:var(--bf-mint); }
.bf-order-card.blush{ background:var(--bf-blush); }
.bf-order-card.lilac{ background:var(--bf-lilac); }
.bf-order-card.softgold{ background:var(--bf-softgold); }
.bf-order-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bf-order-title{ font-size:14px; font-weight:700; }
.bf-order-table{ font-size:14px; font-weight:700; color:#37414a; }
.bf-order-item-count{
  margin-top:12px;
  font-size:14px;
  font-weight:700;
  color:#1d242b;
}
.bf-order-target{
  margin-top:8px;
  font-size:13px;
  color:#49525c;
}
.bf-order-meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bf-order-time{ font-size:13px; color:#55606a; }
.bf-order-status,
.bf-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.status-kitchen,
.bf-status-sedang-proses{
  background:#0f7f7c;
  color:#fff;
}
.status-wait,
.bf-status-belum-bayar{
  background:#ef6c2b;
  color:#fff;
}
.status-ready,
.bf-status-selesai{
  background:#7a39b4;
  color:#fff;
}
.bf-status-batal{
  background:#ea526f;
  color:#fff;
}
.bf-status-default{
  background:#ebeff2;
  color:#5d6872;
}
.bf-order-next{
  position:absolute;
  right:-17px;
  top:50%;
  transform:translateY(-50%);
}

.bf-grid-2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
.bf-target-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.bf-target-card,
.bf-article-card,
.bf-stat-card,
.bf-compact-card,
.bf-blog-card,
.bf-setting-card,
.bf-help-card,
.bf-form-card,
.bf-service-card{
  border:1px solid #edf0f2;
  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 18px rgba(22,22,22,.05);
}
.bf-target-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  cursor:pointer;
  transition:.18s ease;
}
.bf-target-card.active{
  border-color:#5ec3bd;
  box-shadow:0 12px 26px rgba(22,63,70,.09);
}
.bf-target-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.bf-target-icon,
.bf-list-icon,
.bf-circle-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid #ebeff2;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.bf-target-icon img,
.bf-list-icon img{
  width:22px;
  height:22px;
  object-fit:contain;
}
.bf-target-title{
  font-weight:700;
  line-height:1.35;
  word-break:break-word;
}
.bf-target-sub{
  margin-top:4px;
  font-size:12px;
  color:#7c8792;
}
.bf-target-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bf-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  border-radius:999px;
  background:#f7f9fb;
  color:#61707c;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
}
.bf-target-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
}
.bf-link-btn{
  color:var(--bf-primary-dark);
  font-size:13px;
  font-weight:700;
}
.bf-text-link{
  color:var(--bf-primary-dark);
  font-weight:700;
  font-size:13px;
}

.bf-service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.bf-service-card{
  overflow:hidden;
  transition:.18s ease;
}
.bf-service-card:hover,
.bf-service-card.active{
  border-color:#5ec3bd;
  box-shadow:0 12px 26px rgba(22,63,70,.09);
}
.bf-service-media{
  height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f7f9fa;
  border-bottom:1px solid #edf0f2;
}
.bf-service-thumb{
  width:72px;
  height:72px;
  object-fit:contain;
}
.bf-service-body{
  padding:14px;
}
.bf-service-meta{
  color:#8a949e;
  font-size:12px;
  margin-bottom:8px;
}
.bf-service-title{
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  min-height:44px;
}
.bf-service-desc{
  font-size:12px;
  line-height:1.6;
  color:#6f7b86;
  margin-top:8px;
  min-height:58px;
}
.bf-service-footer{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.bf-price{
  font-size:12px;
  color:#7d8791;
}
.bf-price strong{
  display:block;
  color:#0f1720;
  font-size:22px;
  line-height:1.1;
  margin-bottom:2px;
}
.bf-service-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.bf-mini-chip{
  min-height:28px;
  border-radius:999px;
  border:1px solid #e3e8ec;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  color:#5d6771;
  background:#fff;
}
.bf-add-btn{
  min-width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid #17a6a0;
  background:#17a6a0;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.bf-add-btn.is-added{
  background:#e9f7f6;
  color:#147b77;
}
.bf-row-list{
  display:grid;
  gap:12px;
}
.bf-list-product{
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 8px 18px rgba(22,22,22,.05);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#fff;
}
.bf-list-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.bf-list-content{
  min-width:0;
}
.bf-list-title{
  font-weight:800;
  font-size:14px;
  line-height:1.3;
}
.bf-list-desc{
  margin-top:2px;
  color:#6f7b86;
  font-size:12px;
}
.bf-list-price{
  font-weight:700;
  color:#202832;
  white-space:nowrap;
}
.bf-platform-block{
  border:1px solid #edf0f2;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(22,22,22,.05);
  margin-bottom:18px;
}
.bf-platform-head{
  padding:16px 18px;
  border-bottom:1px solid #eef2f4;
  background:#fcfdfd;
}
.bf-platform-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.bf-platform-ico{
  width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid #ebeff2;display:flex;align-items:center;justify-content:center;
}
.bf-platform-ico img{ width:22px;height:22px;object-fit:contain; }
.bf-platform-title{ font-weight:800; }
.bf-platform-count{ margin-top:3px; font-size:12px; color:#7c8792; }
.bf-platform-body{ padding:16px; display:grid; gap:14px; }
.bf-tag-card{
  border:1px solid #edf0f2;
  border-radius:16px;
  background:#fff;
}
.bf-tag-head{
  padding:12px 14px;
  border-bottom:1px solid #eef2f4;
  font-size:13px;
  font-weight:800;
  color:#1c252d;
}
.bf-tag-body{
  padding:14px;
}

.bf-dashboard-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px;
}
.bf-stat-card{
  padding:16px;
}
.bf-stat-label{
  color:#8a95a0;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.bf-stat-value{
  margin-top:8px;
  font-size:24px;
  font-weight:800;
}
.bf-stat-note{
  margin-top:6px;
  font-size:12px;
  color:#6f7b86;
}

.bf-blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.bf-blog-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bf-blog-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:#7c8792;
  font-size:12px;
}
.bf-blog-title{
  font-size:16px;
  font-weight:800;
  line-height:1.4;
}
.bf-blog-excerpt{
  font-size:13px;
  color:#687580;
  line-height:1.7;
}
.bf-empty{
  border:1px dashed #d7dde3;
  border-radius:16px;
  padding:20px;
  text-align:center;
  color:#78848f;
  background:#fbfcfd;
}
.bf-trans-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bf-trans-item{
  border:1px solid #edf0f2;
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 18px rgba(22,22,22,.05);
  cursor:pointer;
  transition:.18s ease;
}
.bf-trans-item:hover,
.bf-trans-item.active{
  border-color:#5ec3bd;
  box-shadow:0 12px 26px rgba(22,63,70,.09);
}
.bf-trans-top,
.bf-trans-mid,
.bf-trans-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.bf-trans-invoice{
  font-weight:800;
  font-size:14px;
}
.bf-trans-date{
  font-size:12px;
  color:#7c8792;
}
.bf-trans-mid{
  margin-top:14px;
  align-items:flex-start;
}
.bf-trans-title{
  font-size:15px;
  font-weight:700;
  line-height:1.4;
}
.bf-trans-price{
  margin-top:4px;
  font-size:18px;
  font-weight:800;
}
.bf-platform-icon{
  width:42px;height:42px;border-radius:14px;border:1px solid #ebeff2;padding:10px;background:#fff;flex:0 0 auto;
}
.bf-trans-bottom{
  margin-top:14px;
}
.bf-buy-again{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:999px;
  background:#e9f7f6;
  color:#116d6a;
  font-size:12px;
  font-weight:800;
  padding:0 12px;
}
.is-hidden{ display:none !important; }

.bf-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.bf-form-card{
  padding:18px;
}
.bf-form-group{ margin-bottom:14px; }
.bf-form-group:last-child{ margin-bottom:0; }
.bf-label{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:#2c3640;
}
.bf-input,
.bf-select,
.bf-textarea{
  width:100%;
  border:1px solid #dde3e8;
  background:#fff;
  border-radius:12px;
  min-height:44px;
  padding:0 14px;
  color:#202832;
  outline:none;
}
.bf-input[readonly]{
  background:#f5f7f8;
  color:#7c8792;
}
.bf-textarea{
  min-height:110px;
  padding:12px 14px;
  resize:vertical;
}
.bf-form-actions{
  display:flex;
  gap:12px;
  margin-top:18px;
}
.bf-setting-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.bf-setting-card{
  padding:18px;
}
.bf-setting-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.bf-setting-title{
  font-size:15px;
  font-weight:800;
}
.bf-setting-desc{
  font-size:13px;
  color:#6f7b86;
  line-height:1.7;
}
.bf-switch-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.bf-switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.bf-switch{
  width:48px;
  height:28px;
  background:#e4eaee;
  border-radius:999px;
  position:relative;
}
.bf-switch::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border-radius:50%;
  background:#fff;
  top:3px;left:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.bf-switch.is-on{ background:#bfe7e5; }
.bf-switch.is-on::after{ left:23px; }
.bf-help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.bf-help-card{
  padding:18px;
}
.bf-help-item{
  padding:12px 0;
  border-bottom:1px solid #eef2f4;
}
.bf-help-item:last-child{ border-bottom:0; padding-bottom:0; }
.bf-help-cat{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-radius:999px;
  padding:4px 10px;
  background:#f4f6f8;
  color:#62707c;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.bf-help-title{
  margin-top:10px;
  font-size:15px;
  font-weight:800;
  line-height:1.45;
}
.bf-help-excerpt{
  margin-top:6px;
  font-size:13px;
  color:#6f7b86;
  line-height:1.7;
}
.bf-main-banner{
  border:1px solid #e8edee;
  background:linear-gradient(135deg,#f6fbfb,#ffffff);
  border-radius:22px;
  padding:22px;
  margin-bottom:18px;
}
.bf-banner-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:center;
}
.bf-banner-title{
  font-size:28px;
  font-weight:800;
  line-height:1.2;
  margin:0;
}
.bf-banner-desc{
  margin-top:12px;
  font-size:14px;
  line-height:1.8;
  color:#61707c;
}
.bf-banner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.bf-banner-side{
  border:1px solid #edf0f2;
  border-radius:18px;
  background:#fff;
  padding:18px;
}
.bf-filter-stack{
  display:grid;
  gap:16px;
}
.bf-filter-group{
  border:1px solid #edf0f2;
  background:#fff;
  border-radius:18px;
  padding:16px;
}
.bf-filter-group-title{
  font-size:13px;
  font-weight:800;
  color:#1c252d;
  margin-bottom:12px;
}
.bf-selected-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.bf-selected-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  border-radius:999px;
  background:#edf9f8;
  color:#166f6b;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
}
.bf-selected-pill button{
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:0;
}
.bf-pos-summary{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bf-pos-item{
  display:grid;
  grid-template-columns:44px 1fr auto auto;
  gap:10px;
  align-items:center;
}
.bf-pos-item .bf-list-icon{
  width:40px;height:40px;border-radius:12px;
}
.bf-pos-title{
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.bf-pos-meta{
  margin-top:4px;
  font-size:12px;
  color:#78848f;
}
.bf-remove-btn{
  width:28px;height:28px;border:1px solid #e1e6ea;border-radius:50%;background:#fff;color:#7d8892;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.bf-pos-empty{
  padding:18px;
  border:1px dashed #d8dde3;
  border-radius:16px;
  color:#7b8694;
  text-align:center;
  font-size:13px;
}
.bf-mini-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.bf-mini-stat{
  border:1px solid #eef2f4;
  border-radius:14px;
  padding:14px;
  background:#fff;
}
.bf-mini-label{
  color:#7c8792;
  font-size:12px;
  font-weight:700;
}
.bf-mini-value{
  margin-top:8px;
  font-weight:800;
  font-size:20px;
}
.bf-mobile-bar{ display:none; }
.bf-mobile-toggle{
  width:42px;height:42px;border-radius:50%;border:1px solid #e4e8ec;background:#fff;color:#72808a;font-size:20px;display:inline-flex;align-items:center;justify-content:center;
}
.bf-right-note{
  color:#6f7b86;
  font-size:13px;
  line-height:1.7;
}

@media (max-width: 1399px){
  :root{
    --bf-sidebar-w:204px;
    --bf-right-w:300px;
  }
  .bf-service-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bf-blog-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1199px){
  .bf-shell{ padding:20px; }
  .bf-app{ height:calc(100vh - 40px); }
  .bf-body{
    grid-template-columns:var(--bf-sidebar-w) 1fr;
  }
  .bf-topbar{
    grid-template-columns:var(--bf-sidebar-w) 1fr 1fr;
  }
  .bf-right{
    display:none;
  }
  .bf-order-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bf-target-grid,
  .bf-help-grid,
  .bf-grid-2,
  .bf-form-grid,
  .bf-setting-grid,
  .bf-banner-grid,
  .bf-dashboard-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 991px){
  body{ overflow:auto; }
  .bf-shell{ padding:0; min-height:0; }
  .bf-app{
    min-height:100vh;
    height:auto;
    border-radius:0;
  }
  .bf-topbar{
    grid-template-columns:1fr;
    height:auto;
    padding:14px 16px;
    gap:12px;
    position:sticky;
    top:0;
    z-index:30;
  }
  .bf-topbar-brand,
  .bf-topbar-center,
  .bf-topbar-actions{
    padding:0;
  }
  .bf-topbar-brand{ justify-content:space-between; }
  .bf-mobile-bar{ display:block; }
  .bf-topbar-actions{ justify-content:flex-start; }
  .bf-body{
    grid-template-columns:1fr;
    height:auto;
    display:block;
  }
  .bf-sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:280px;
    transform:translateX(-100%);
    transition:transform .2s ease;
    z-index:60;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  .bf-sidebar.is-open{ transform:translateX(0); }
  .bf-main,
  .bf-right{ overflow:visible; }
  .bf-main-scroll{ padding:18px 16px 28px; }
  .bf-right{
    display:block;
    border-left:0;
    border-top:1px solid var(--bf-line);
  }
  .bf-service-grid,
  .bf-dashboard-stats,
  .bf-target-grid,
  .bf-blog-grid,
  .bf-help-grid,
  .bf-form-grid,
  .bf-setting-grid,
  .bf-grid-2,
  .bf-banner-grid{ grid-template-columns:1fr; }
}
@media (max-width: 575px){
  .bf-order-grid{ grid-template-columns:1fr; }
  .bf-list-product{ flex-direction:column; align-items:stretch; }
  .bf-list-price{ white-space:normal; }
  .bf-pos-item{ grid-template-columns:40px 1fr auto; }
  .bf-pos-item .bf-remove-btn{ grid-column:3; }
  .bf-pos-item .bf-list-price{ grid-column:2 / 4; }
}

/* ============================================================
   Member Topbar Mobile v2
   ============================================================ */

   .bf-desktop-brand-link {
    display: inline-flex;
    align-items: center;
  }

  .bf-desktop-brand-logo {
    display: block;
    max-width: 158px;
    height: auto;
  }

  .bf-mobile-logo-link {
    display: none;
  }

  .bf-search-trigger {
    cursor: pointer;
  }

  .bf-search-trigger input {
    pointer-events: none;
  }

  .bf-user-menu-trigger {
    border: 0;
    cursor: pointer;
  }

  .bf-user-avatar-ring {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 2px;
    border-radius: 999px;
    isolation: isolate;
    overflow: hidden;
  }

  .bf-user-avatar-ring::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(
      from 0deg,
      var(--bfz-primary, #7943f5),
      var(--bfz-secondary, #df488c),
      rgba(255, 255, 255, 0.92),
      var(--bfz-primary, #7943f5)
    );
    animation: bfAvatarRingRotate 3.2s linear infinite;
  }

  .bf-user-avatar-ring img {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #ffffff;
    border-radius: inherit;
    object-fit: cover;
    background: #ffffff;
  }

  @keyframes bfAvatarRingRotate {
    to {
      transform: rotate(360deg);
    }
  }

/* Search Offcanvas Top */

.bf-search-canvas {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.bf-search-canvas[hidden] {
  display: none !important;
}

body.bf-search-canvas-open .bf-search-canvas {
  pointer-events: auto;
  opacity: 1;
}

.bf-search-canvas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 20, 40, 0.46);
  backdrop-filter: blur(8px);
}

.bf-search-canvas-panel {
  position: relative;
  z-index: 2;
  width: min(100% - 28px, 680px);
  max-height: calc(100dvh - 28px);
  margin: 14px auto 0;
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(121, 67, 245, 0.16);
  border-radius: 28px;
  background:
  radial-gradient(circle at 10% 0%, rgba(223, 72, 140, 0.08), transparent 26%),
  radial-gradient(circle at 88% 0%, rgba(121, 67, 245, 0.12), transparent 30%),
  #ffffff;
  transform: translateY(-26px);
  transition: transform 0.24s ease;
}

body.bf-search-canvas-open .bf-search-canvas-panel {
  transform: translateY(0);
}

.bf-search-canvas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bf-search-canvas-kicker {
  margin-bottom: 4px;
  color: var(--bfz-primary, #7943f5);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bf-search-canvas-head h3 {
  margin: 0;
  color: var(--bfz-text, #191428);
  font-size: 1.32rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.bf-search-canvas-close {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(121, 67, 245, 0.14);
  border-radius: 999px;
  color: var(--bfz-muted, #777286);
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.bf-search-canvas-form {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  margin-bottom: 22px;
  border: 1px solid rgba(121, 67, 245, 0.24);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
}

.bf-search-canvas-form i {
  display: grid;
  place-items: center;
  color: var(--bfz-primary, #7943f5);
  font-size: 1.05rem;
}

.bf-search-canvas-form input {
  width: 100%;
  height: 52px;
  border: 0;
  outline: 0;
  color: var(--bfz-text, #191428);
  background: transparent;
  font-size: 0.94rem;
  font-weight: 700;
}

.bf-search-canvas-form button {
  height: 40px;
  margin-right: 6px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--bfz-primary, #7943f5), var(--bfz-primary-dark, #5b2ee8));
  font-size: 0.84rem;
  font-weight: 950;
  cursor: pointer;
}

.bf-search-canvas-section-title {
  margin-bottom: 12px;
  color: var(--bfz-muted, #777286);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bf-search-result-list {
  display: grid;
  gap: 12px;
}

.bf-search-result-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(121, 67, 245, 0.10);
  border-radius: 20px;
  background: rgba(248, 246, 255, 0.64);
  transition: 0.18s ease;
}

.bf-search-result-item:hover {
  border-color: rgba(121, 67, 245, 0.22);
  background: #ffffff;
}

.bf-search-result-item img,
.bf-search-result-thumb {
  display: grid;
  place-items: center;
  width: 78px;
  height: 58px;
  border-radius: 15px;
  object-fit: cover;
  color: var(--bfz-primary, #7943f5);
  background: rgba(121, 67, 245, 0.10);
}

.bf-search-result-copy {
  min-width: 0;
}

.bf-search-result-copy strong {
  display: block;
  overflow: hidden;
  color: var(--bfz-primary, #7943f5);
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bf-search-result-copy small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  color: var(--bfz-muted, #777286);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bf-search-empty {
  padding: 16px;
  border: 1px dashed rgba(121, 67, 245, 0.20);
  border-radius: 18px;
  color: var(--bfz-muted, #777286);
  background: rgba(248, 246, 255, 0.70);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

/* Mobile topbar */

@media (max-width: 991.98px) {
  .bf-topbar-v2 .bf-topbar-brand {
    padding: 0;
  }

  .bf-topbar-v2 .bf-mobile-bar {
    display: block;
  }

  .bf-mobile-logo-link {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    /*background: rgba(121, 67, 245, 0.08);*/
  }

  .bf-mobile-logo-link img {
    width: 31px;
    height: 31px;
    object-fit: contain;
  }

  .bf-desktop-brand-link {
    display: none !important;
  }

  .bf-topbar-v2 .bf-topbar-center {
    padding-left: 12px;
    padding-right: 12px;
  }

  .bf-topbar-v2 .bf-search {
    width: 100%;
  }

  .bf-topbar-v2 .bf-icon-circle {
    display: none !important;
  }

  .bf-topbar-v2 .bf-user-chip {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .bf-topbar-v2 .bf-user-chip > div {
    display: none !important;
  }

  .bf-topbar-v2 .bf-user-avatar-ring {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 575.98px) {
  .bf-search-canvas-panel {
    width: calc(100% - 22px);
    margin-top: 11px;
    padding: 18px;
    border-radius: 24px;
  }

  .bf-search-canvas-form {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .bf-search-canvas-form button {
    grid-column: 1 / -1;
    width: calc(100% - 12px);
    margin: 0 6px 6px;
  }

  .bf-search-result-item {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .bf-search-result-item img,
  .bf-search-result-thumb {
    width: 74px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-user-avatar-ring::before {
    animation: none !important;
  }
}