/* Helium Balloon Builder — front-end */
.hbb-app { --hbb-accent:#e6447a; --hbb-accent2:#7c4dff; --hbb-ink:#222; --hbb-line:#eceef2; --hbb-bg:#fff; --hbb-radius:14px; color:var(--hbb-ink); max-width:1180px; margin-left:auto; margin-right:auto; }
.hbb-app *{ box-sizing:border-box; }
.hbb-loading{ padding:32px; text-align:center; color:#888; }
.hbb-wrap{ display:flex; gap:24px; align-items:flex-start; }
.hbb-left{ flex:1 1 auto; min-width:0; }
.hbb-right{ flex:0 0 360px; position:sticky; top:16px; background:var(--hbb-bg); border:1px solid var(--hbb-line); border-radius:var(--hbb-radius); padding:18px; box-shadow:0 8px 30px rgba(20,20,50,.06); }

/* tabs */
.hbb-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hbb-tab{ border:1px solid var(--hbb-line); background:#fafafe; color:#444; padding:9px 16px; border-radius:999px; cursor:pointer; font-weight:600; font-size:14px; transition:.15s; }
.hbb-tab:hover{ border-color:var(--hbb-accent); color:var(--hbb-accent); }
.hbb-tab.is-active{ background:linear-gradient(135deg,var(--hbb-accent),var(--hbb-accent2)); color:#fff; border-color:transparent; }

/* search */
.hbb-searchrow{ margin-bottom:14px; }
.hbb-search{ width:100%; max-width:320px; padding:10px 14px; border:1px solid var(--hbb-line); border-radius:10px; font-size:14px; }
.hbb-search:focus{ outline:none; border-color:var(--hbb-accent); }

/* grid */
.hbb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.hbb-card{ border:1px solid var(--hbb-line); border-radius:var(--hbb-radius); padding:10px; background:#fff; display:flex; flex-direction:column; transition:.15s; position:relative; }
.hbb-card:hover{ box-shadow:0 6px 20px rgba(20,20,50,.08); transform:translateY(-2px); }
.hbb-card.is-added{ outline:2px solid var(--hbb-accent); }
.hbb-card-img{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px; background:#f7f7fb; }
.hbb-card-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.hbb-card-name{ font-size:13px; line-height:1.3; margin:8px 0 4px; min-height:34px; }
.hbb-card-price{ font-weight:700; color:var(--hbb-accent); margin-bottom:8px; }
.hbb-add{ margin-top:auto; border:none; background:var(--hbb-accent); color:#fff; padding:9px; border-radius:9px; cursor:pointer; font-weight:600; transition:.15s; }
.hbb-add:hover{ filter:brightness(1.07); }
.hbb-add.is-disabled,.hbb-add:disabled{ background:#e7e7ee; color:#9a9aa6; cursor:not-allowed; font-size:12px; }
.hbb-more{ display:block; margin:18px auto 0; padding:10px 22px; border:1px solid var(--hbb-line); background:#fff; border-radius:999px; cursor:pointer; font-weight:600; }
.hbb-empty{ color:#999; padding:24px 4px; }

/* right panel */
.hbb-h3{ margin:0 0 12px; font-size:18px; }
.hbb-preview{ position:relative; min-height:120px; background:linear-gradient(180deg,#fbfbff,#f4f4fb); border-radius:12px; padding:10px; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.hbb-preview-empty{ color:#aaa; font-size:13px; margin:auto; }
.hbb-chip{ position:relative; width:54px; height:54px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.12); animation:hbb-pop .25s ease; }
.hbb-chip img{ width:100%; height:100%; object-fit:contain; }
.hbb-chip-qty{ position:absolute; right:-2px; bottom:-2px; background:var(--hbb-accent2); color:#fff; font-size:11px; font-weight:700; border-radius:999px; padding:1px 6px; }
@keyframes hbb-pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }

.hbb-list{ margin:14px 0; max-height:280px; overflow:auto; }
.hbb-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--hbb-line); }
.hbb-row-img{ width:42px; height:42px; object-fit:contain; border-radius:8px; background:#f7f7fb; flex:0 0 auto; }
.hbb-row-info{ flex:1 1 auto; min-width:0; }
.hbb-row-name{ font-size:13px; line-height:1.25; }
.hbb-row-price{ font-size:12px; color:#888; }
.hbb-qty{ display:flex; align-items:center; gap:4px; }
.hbb-step{ width:26px; height:26px; border:1px solid var(--hbb-line); background:#fff; border-radius:7px; cursor:pointer; font-size:16px; line-height:1; }
.hbb-step:hover{ border-color:var(--hbb-accent); color:var(--hbb-accent); }
.hbb-qty-val{ min-width:22px; text-align:center; font-weight:600; font-size:13px; }
.hbb-remove{ border:none; background:none; color:#bbb; font-size:20px; cursor:pointer; line-height:1; }
.hbb-remove:hover{ color:#e23; }

.hbb-opts{ margin:12px 0; display:flex; flex-direction:column; gap:10px; }
.hbb-opt{ display:flex; align-items:center; gap:8px; font-size:14px; }
.hbb-opt-label{ display:block; font-size:13px; color:#666; margin-bottom:4px; }
.hbb-pers{ width:100%; padding:9px 12px; border:1px solid var(--hbb-line); border-radius:9px; font-size:14px; }
.hbb-pers:focus{ outline:none; border-color:var(--hbb-accent); }
.hbb-opts label.hbb-opt:has(.hbb-pers){ flex-direction:column; align-items:stretch; }

.hbb-total{ display:flex; justify-content:space-between; align-items:baseline; margin:10px 0; padding-top:12px; border-top:2px dashed var(--hbb-line); }
.hbb-total-label{ font-size:15px; color:#555; }
.hbb-total-val{ font-size:24px; font-weight:800; color:var(--hbb-ink); }
.hbb-order{ width:100%; border:none; background:linear-gradient(135deg,var(--hbb-accent),var(--hbb-accent2)); color:#fff; padding:14px; border-radius:11px; font-size:16px; font-weight:700; cursor:pointer; transition:.15s; }
.hbb-order:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.hbb-order:disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none; }
.hbb-msg{ margin-top:10px; font-size:13px; min-height:18px; }
.hbb-msg.is-error{ color:#d3334e; }
.hbb-msg.is-ok{ color:#2a8a4a; }

/* quick order (paketi) */
.hbb-quick{ margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--hbb-line); }
.hbb-quick-title{ font-size:19px; font-weight:800; margin-bottom:12px; }
.hbb-quick-occ{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.hbb-occ-btn{ display:flex; align-items:center; gap:9px; border:2px solid var(--hbb-line); background:#fff; padding:12px 22px; border-radius:14px; cursor:pointer; font-size:16px; font-weight:700; transition:.15s; }
.hbb-occ-btn:hover{ border-color:var(--hbb-accent); }
.hbb-occ-btn.is-active{ border-color:var(--hbb-accent); background:linear-gradient(135deg,#fff,#fff5f9); }
.hbb-occ-icon{ font-size:22px; line-height:1; }
.hbb-quick-tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.hbb-tier{ border:1px solid var(--hbb-line); border-radius:14px; padding:16px; text-align:center; background:#fff; transition:.15s; }
.hbb-tier:hover{ box-shadow:0 6px 18px rgba(20,20,50,.08); }
.hbb-tier-name{ font-weight:800; font-size:17px; margin-bottom:10px; }
.hbb-tier-prev{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px; min-height:48px; margin-bottom:8px; }
.hbb-tier-prev img{ width:44px; height:44px; object-fit:contain; border-radius:50%; background:#f7f7fb; }
.hbb-tier-meta{ font-size:12px; color:#999; margin-bottom:6px; }
.hbb-tier-price{ font-size:22px; font-weight:800; color:var(--hbb-accent); margin-bottom:12px; }
.hbb-tier-btn{ width:100%; border:none; background:linear-gradient(135deg,var(--hbb-accent),var(--hbb-accent2)); color:#fff; padding:11px; border-radius:10px; font-weight:700; cursor:pointer; }
.hbb-tier-btn:hover{ filter:brightness(1.06); }

/* responsive */
@media (max-width:820px){
	.hbb-wrap{ flex-direction:column; }
	.hbb-right{ position:static; width:100%; flex-basis:auto; }
}