/* ====== GE FBT – FRONTEND (compact + modern animations) ====== */
.ge-fbt-wrapper {
  --ge-fbt-radius: 10px;
  --ge-fbt-shadow: 0 3px 14px rgba(0,0,0,.05);
  --ge-fbt-border: 1px solid rgba(0,0,0,.06);
  --ge-fbt-gap: 10px;
  --ge-fbt-accent: #111;
  --ge-fbt-green: #afcb20;
  margin: 10px 0 8px;
  padding: 8px;
  border: var(--ge-fbt-border);
  border-radius: var(--ge-fbt-radius);
  background: #fff;
  box-shadow: var(--ge-fbt-shadow);
}

.ge-fbt-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.ge-fbt-head-tight { margin-bottom: 2px; }
.ge-fbt-title { margin: 0; font-weight: 900; letter-spacing: -0.01em; text-align: center; }
.ge-fbt-title-center { text-align: center; width: 100%; }
.ge-fbt-title-xl { font-size: 1.5rem; }

.ge-fbt-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ge-fbt-ctl {
  border: 1px solid #eee; background: #fff; border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: .78rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ge-fbt-ctl:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }

/* === GRID → FLEX за центриране на елементите === */
.ge-fbt-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--ge-fbt-gap);
}

.ge-fbt-grid-compact .ge-fbt-card { max-width: 230px; }

/* Всеки item е „карта“ с фиксирана базова ширина — центрира се автоматично */
.ge-fbt-item {
  position: relative;
  width: auto;
  display: flex;
  justify-content: center;
  transform: translateY(5px);
  opacity: 0;
  flex: 0 1 230px;
}

.ge-fbt-reveal-in { transform: translateY(0); opacity: 1; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease; }

/* Toggle: PLUS → green CHECK (SVG stroke) */
.ge-fbt-toggle {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  border: 1px solid #e2e2e2; background: #fff; border-radius: 12px;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .24s ease, border-color .24s ease;
  overflow: hidden;
}
.ge-fbt-toggle:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }

.ge-fbt-toggle-ring { position: absolute; inset: -1px; border-radius: 12px; opacity: 0; pointer-events: none; }

/* PLUS */
.ge-fbt-toggle-ico { position: relative; width: 16px; height: 16px; display: inline-block; z-index: 1; transform-origin: 50% 50%; }
.ge-fbt-toggle-ico::before,
.ge-fbt-toggle-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(1); background: #666; border-radius: 1px;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.ge-fbt-toggle-ico::before { width: 12px; height: 2px; }
.ge-fbt-toggle-ico::after  { width: 2px;  height: 12px; }

/* CHECK SVG */
.ge-fbt-check-svg { position: absolute; width: 16px; height: 16px; z-index: 1; pointer-events: none; }
.ge-fbt-check-svg path{
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
}
.ge-fbt-check-svg path.draw{
  animation:
    ge-fbt-check-draw .36s cubic-bezier(.2,.8,.3,1.2) forwards .02s,
    ge-fbt-check-snap .36s cubic-bezier(.2,1.1,.2,1) forwards .02s;
}
.ge-fbt-check-svg path.erase{ animation: ge-fbt-check-erase .22s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes ge-fbt-check-draw{ to{ stroke-dashoffset:0; } }
@keyframes ge-fbt-check-erase{ to{ stroke-dashoffset:22; } }
@keyframes ge-fbt-check-snap{ 0%{ transform:scale(1);} 70%{transform:scale(1.08);} 100%{ transform:scale(1);} }

/* ON */
.ge-fbt-selected { background: var(--ge-fbt-green); border-color: var(--ge-fbt-green); }
.ge-fbt-selected .ge-fbt-toggle-ico::before,
.ge-fbt-selected .ge-fbt-toggle-ico::after { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
.ge-fbt-selected.ge-fbt-halo { animation: ge-fbt-pop .18s ease; }
@keyframes ge-fbt-pop { 0% { transform: scale(1); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* halo */
.ge-fbt-selected.ge-fbt-halo { box-shadow: 0 0 0 0 rgba(175,203,32,.0); }
.ge-fbt-selected.ge-fbt-halo { animation: ge-fbt-halo .42s ease; }
@keyframes ge-fbt-halo {
  0% { box-shadow: 0 0 0 0 rgba(175,203,32, .0); }
  40% { box-shadow: 0 0 0 8px rgba(175,203,32, .22); }
  100% { box-shadow: 0 0 0 0 rgba(175,203,32, .0); }
}

/* UNSELECT */
.ge-fbt-unselect .ge-fbt-toggle-ico { animation: ge-fbt-plus-back .22s cubic-bezier(.2,.9,.3,1.2); }
.ge-fbt-unselect .ge-fbt-toggle-ico::before,
.ge-fbt-unselect .ge-fbt-toggle-ico::after{
  opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important;
}
@keyframes ge-fbt-plus-back { 0%{transform:scale(.88);} 60%{transform:scale(1.06);} 100%{transform:scale(1);} }

/* Ripple */
.ge-fbt-ripple { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); opacity: 0; transform: scale(1); pointer-events: none; z-index: 2; }
.ge-fbt-ripple.run { animation: ge-fbt-ripple .6s ease; }
@keyframes ge-fbt-ripple { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(14); } }

/* Card */
.ge-fbt-card {
  width: 100%; max-width: 280px; border: 1px solid #eef1f4; border-radius: 12px; overflow: hidden; background: #fff;
  transition: transform .16s ease, box-shadow .16s ease; will-change: transform;
}
.ge-fbt-card-compact { max-width: 230px; }
.ge-fbt-item.ge-fbt-on .ge-fbt-card, .ge-fbt-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

.ge-fbt-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(180deg, #fafafa, #f3f5f7); }
.ge-fbt-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Ping micro */
@keyframes ge-fbt-ping { 0%{ box-shadow:0 0 0 0 rgba(175,203,32,.0);} 50%{ box-shadow:0 0 0 8px rgba(175,203,32,.18);} 100%{ box-shadow:0 0 0 0 rgba(175,203,32,.0);} }
.ge-fbt-ping { animation: ge-fbt-ping .7s ease; }

.ge-fbt-body { padding: 6px 6px 9px; }
.ge-fbt-body-tight { padding: 6px 6px 9px; }

.ge-fbt-name { margin: 0 0 4px; line-height: 1.22; text-align: center; }
.ge-fbt-name a { display: inline-block; font-size: .96rem; font-weight: 900; letter-spacing: .1px; color: #111; text-decoration: none; }
.ge-fbt-name a:hover { color: #000; }

/* Price */
.ge-fbt-price-wrap { display:flex; justify-content:center; align-items:center; margin: 2px 0 6px; }
.ge-fbt-price { font-weight: 800; text-align:center; line-height:1.2; }
.ge-fbt-price .price,
.ge-fbt-price del,
.ge-fbt-price ins { font-size: .95rem; }
.ge-fbt-price del { opacity:.6; margin-right:6px; }
.ge-fbt-price ins { text-decoration:none; }

/* Qty */
.ge-fbt-qty { display: inline-flex; align-items: center; gap: 6px; justify-content: center; width: 100%; }
.ge-fbt-qty-compact { margin: 2px 0 2px; }
.ge-fbt-step {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e4e4e4; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: 16px; line-height: 1;
}
.ge-fbt-step:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.06); background: #fcfcfc; }
.ge-fbt-qty-input {
  width: 50px; text-align: center; border: none; outline: none; font-weight: 900; font-size: .95rem; background: #f6f7f9; color: #111;
  padding: 4px 6px; border-radius: 8px; letter-spacing: .2px;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.ge-fbt-qty-input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(175,203,32,.2) inset; }
.ge-fbt-qty-input::-webkit-outer-spin-button,
.ge-fbt-qty-input::-webkit-inner-spin_button { -webkit-appearance: none; margin: 0; }
.ge-fbt-qty-anim { transform: scale(1.05); }

.ge-fbt-qty-error { min-height: 14px; font-size: .78rem; color: #c62828; opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; text-align:center; }
.ge-fbt-qty-error-on { opacity: 1; transform: translateY(0); }

/* Variations – compact */
.ge-fbt-variations { margin-top: 3px; }
.ge-fbt-collapsible { max-height: 0; overflow: hidden; transition: max-height .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease; opacity: 0; }
.ge-fbt-open { max-height: 480px; opacity: 1; }

.ge-fbt-attr { margin-bottom: 5px; }
.ge-fbt-attr-label { display: block; font-size: .78rem; margin-bottom: 3px; opacity: .8; text-align: center; }
.ge-fbt-attr-select-wrap { position: relative; }
.ge-fbt-attr-select {
  appearance: none; width: 100%; border: 1px solid #e7e7e7; border-radius: 8px; font-size: .88rem; background: #fff; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ge-fbt-attr-select:focus { border-color: #c9c9c9; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.ge-fbt-attr-chevron {
  content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #999; pointer-events: none;
}

/* Actions */
.ge-fbt-actions-only { display: flex; align-items: center; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.ge-fbt-actions-compact { margin-top: 4px; }
.ge-fbt-button-add { margin-top: 20px;
  border: none; border-radius: 999px; padding: 8px 12px; font-weight: 900; font-size: .9rem; cursor: pointer;
  background: #afcb20; color: #fff; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.ge-fbt-button-add:hover { transform: translateY(-1px); }
.ge-fbt-button-add.ge-fbt-loading { opacity: .7; pointer-events: none; }
.ge-fbt-button-add.ge-fbt-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Inline added feedback */
.ge-fbt-inline-added {
  min-width: 0; font-size: .88rem; color: #111; opacity: 0; transform: translateY(6px);
  filter: blur(2px); transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.ge-fbt-inline-added.on { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Hide native checkbox */
.ge-fbt-select { position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; pointer-events:none !important; }

/* ====== ADMIN Product Data Tab ====== */
#ge_fbt_product_data .ge-fbt-admin-wrap { padding: 10px 10px 6px; }
#ge_fbt_product_data .ge-fbt-admin-head h3 { margin-top: 0; }
#ge_fbt_product_data .ge-fbt-admin-search-wrap { display: flex; gap: 8px; align-items: center; margin: 8px 0 10px; }
#ge_fbt_product_data .ge-fbt-admin-search { flex: 1; }

#ge-fbt-admin-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
@media (max-width: 1100px){ #ge-fbt-admin-list { grid-template-columns: 1fr; } }

.ge-fbt-admin-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.ge-fbt-admin-drag { cursor: move; font-weight: 700; color: #888; }
.ge-fbt-admin-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 7px; background: #f4f4f4; }
.ge-fbt-admin-name { flex: 1; }
.ge-fbt-admin-remove { color: #cc0000; font-size: 15px; }
.ge-fbt-admin-empty { opacity: .7; font-style: italic; margin: 4px 0 0; }

/* Респонсив подсигуряване: под 420px картите да са на цял ред */
@media (max-width: 420px) {
  .ge-fbt-item { flex-basis: 100%; }
}