/* === Warmth — customizer.css (DEMO-ONLY: stiluri switcher + watermark). Eliminat la build producție. === */
/* Design: mobile-first. Pattern „pastile + acordeon": familii = cercuri de culoare centrate,
   nuanțele familiei active apar în acordeonul de sub ele; apoi culoare proprie, font, emblemă. */

/* ---- buton flotant ---- */
.switcher{position:fixed;left:16px;bottom:16px;z-index:96;transition:z-index 0s}
.switcher.below-nav{z-index:80}
.sw-toggle{width:56px;height:56px;border-radius:50%;border:3px solid #fff;background:conic-gradient(from 0deg,#ff2d75,#ff9f1c,#2ec4b6,#3a86ff,#8338ec,#ff2d75);box-shadow:0 6px 24px rgba(131,56,236,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;animation:swpulse 2.6s ease-in-out infinite}
.sw-toggle svg{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
@keyframes swpulse{0%,100%{box-shadow:0 6px 24px rgba(131,56,236,.5),0 0 0 0 rgba(255,45,117,.45);transform:scale(1)}50%{box-shadow:0 6px 28px rgba(131,56,236,.6),0 0 0 12px rgba(255,45,117,0);transform:scale(1.06)}}
.sw-toggle:hover{transform:scale(1.08) rotate(8deg);animation-play-state:paused}

/* ---- panou ---- */
.sw-panel{position:absolute;bottom:68px;left:0;width:min(calc(100vw - 28px),300px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow,0 12px 40px rgba(0,0,0,.16));display:none;overflow:hidden}
.sw-panel.open{display:block}
.sw-close{position:absolute;top:.55rem;right:.55rem;z-index:2;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.sw-close svg{width:15px;height:15px}
.sw-scroll{padding:1.15rem 1.15rem 1.25rem;max-height:min(72vh,540px);overflow-y:auto}
.sw-label{font-family:var(--font-body);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-text-muted);margin:1.05rem 0 .55rem}
.sw-label:first-child{margin-top:0}
.bb-set-note{margin:.55rem 0 0;font-size:.74rem;line-height:1.45;color:#5C6273;background:#F3F1FA;border-left:3px solid #A85E3E;border-radius:0 7px 7px 0;padding:.5rem .65rem;max-width:520px}

/* ---- familii: cercuri de culoare, centrate ---- */
.sw-families{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}
.sw-fam{aspect-ratio:1;width:100%;max-width:36px;justify-self:center;border-radius:50%;border:2px solid transparent;padding:0;overflow:hidden;cursor:pointer;transition:transform var(--t,.2s),box-shadow var(--t,.2s);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sw-fam--dark{background:none}                 /* familia Dark Mode: iconiță SVG split-diagonal, nu swatch */
.sw-fam:hover{transform:scale(1.12)}
.sw-fam[aria-pressed="true"]{border-color:var(--color-surface);box-shadow:0 0 0 2px var(--color-text)}

/* ---- nuanțe: acordeon sub familia activă ---- */
.sw-shades{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-top:.7rem;padding:.6rem;background:var(--tint,color-mix(in srgb,var(--color-primary) 7%,var(--color-surface)));border:1px solid var(--color-border);border-radius:var(--radius,12px)}
.sw-pal{aspect-ratio:1;border-radius:calc(var(--radius,12px) - 4px);border:2px solid transparent;cursor:pointer;transition:transform var(--t,.2s)}
.sw-pal:hover{transform:scale(1.09)}
.sw-pal[aria-pressed="true"]{border-color:var(--color-text);box-shadow:0 0 0 2px var(--color-surface) inset}

/* ---- culoare proprie ---- */
.sw-custom{display:flex;align-items:center;gap:.6rem;margin-top:.2rem}
.sw-custom input[type=color]{width:34px;height:34px;border:1px solid var(--color-border);border-radius:var(--radius,12px);background:none;cursor:pointer;padding:2px;flex:0 0 auto}
.sw-custom label{font-size:.78rem;color:var(--color-text-muted)}

/* ---- font titluri ---- */
.sw-fonts{display:flex;flex-direction:column;gap:.35rem;max-height:188px;overflow-y:auto;padding-right:.25rem}
.sw-font{text-align:left;border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius,12px);padding:.45rem .7rem;cursor:pointer;font-size:1.15rem;color:var(--color-text);line-height:1.05;transition:border-color var(--t,.2s),background var(--t,.2s)}
.sw-font small{display:block;font-family:var(--font-body);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-top:.15rem}
.sw-font[aria-pressed="true"]{border-color:var(--color-primary);background:var(--tint,color-mix(in srgb,var(--color-primary) 7%,var(--color-surface)))}

/* ---- antet emblemă: titlu + toggle pe acelasi rand ---- */
.sw-emb-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.3rem .5rem;margin-bottom:.2rem}
.sw-emb-head .sw-label{margin:0}
.sw-vis{display:inline-flex;flex:0 0 auto;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:2px}
.sw-vis button{border:none;background:none;padding:.26rem .5rem;border-radius:999px;font-family:var(--font-body);font-size:.62rem;color:var(--color-text-muted);cursor:pointer;white-space:nowrap;transition:background var(--t,.2s),color var(--t,.2s)}
.sw-vis button[aria-pressed="true"]{background:var(--color-surface);color:var(--color-text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sw-hint{font-family:var(--font-body);font-size:.7rem;line-height:1.45;color:var(--color-text-muted);margin:-.05rem 0 .6rem;opacity:.85}

/* ---- embleme ---- */
.sw-emblems{display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;padding:.1rem .1rem .55rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.sw-emblems::-webkit-scrollbar{height:5px}
.sw-emblems::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}
.sw-emblem{flex:0 0 auto;width:64px;height:64px;border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius,12px);cursor:pointer;padding:4px;scroll-snap-align:start;transition:border-color var(--t,.2s),background var(--t,.2s)}
.sw-emblem svg{width:100%;height:100%;display:block}
.sw-emblem[aria-pressed="true"]{border-color:var(--color-primary);background:var(--tint,color-mix(in srgb,var(--color-primary) 7%,var(--color-surface)))}

/* ---- notă demo ---- */
.sw-note{font-family:var(--font-heading);font-style:italic;font-size:1.05rem;letter-spacing:.01em;color:var(--color-text-muted);padding:.95rem;text-align:center;border-top:1px solid var(--color-border);background:none}

/* Etichetă add-on (intenționat „din alt film": violet + font sistem) */
.addon-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:system-ui,-apple-system,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#8338ec;padding:.28rem .65rem;border-radius:6px;line-height:1.2}
.addon-badge svg{width:13px;height:13px}
.addon-note{font-family:system-ui,-apple-system,sans-serif;font-size:.72rem;color:#6b21a8;margin-top:.5rem;line-height:1.45}

/* ============ Watermark DEMO ============ */
.demo-wm{position:fixed;inset:0;pointer-events:none;z-index:130;overflow:hidden}
.demo-wm span{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-family:var(--font-heading);font-weight:500;font-size:clamp(3rem,12vw,9rem);color:color-mix(in srgb,var(--color-accent) 9%,transparent);letter-spacing:.1em;white-space:nowrap}

/* ---- atitudine + densitate + animatie ---- */
.sw-att{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.45rem}
.sw-att button{border:1px solid var(--color-border);background:var(--color-bg);border-radius:999px;padding:.42rem .5rem;font-family:var(--font-body);font-size:.7rem;color:var(--color-text-muted);cursor:pointer;transition:all var(--t,.2s)}
.sw-att button[aria-pressed="true"]{border-color:var(--color-primary);background:var(--tint,color-mix(in srgb,var(--color-primary) 10%,#fff));color:var(--color-text);font-weight:600}
/* ---- toggle add-on programari ---- */
.sw-addon-note{font-size:.62rem;color:var(--color-text-muted);margin:-.1rem 0 .4rem}




/* ============================================================================
   BANDA-TOP builder (DEMO-ONLY) — arhitectură nouă
   Bara: Domeniu + Template (coapte la generare) + Personalizează + Cumpără/Contact.
   Domeniu/Template → dropdown full-width (desktop) / full-page (mobil).
   Grup editabil → panou andocat-dreapta + reflow (desktop ≥1366) / acordeon din colț (mobil, intrare cerc pulsatoriu).
   ============================================================================ */
html.has-bb{--bb-h:52px;--bb-edit-w:clamp(300px,24vw,340px)}
html.has-bb body{padding-top:var(--bb-h);transition:padding-right .26s cubic-bezier(.4,0,.2,1)}
html.has-bb .site-header{top:var(--bb-h)}
html.has-bb .cat-nav-sec{top:calc(var(--bb-h) + 76px)}
@media(max-width:1024px){html.has-bb .nav-links{top:var(--bb-h)}}

/* --- Bara --- */
.bbar{position:fixed;top:0;left:0;right:0;height:var(--bb-h);z-index:250;
  font-family:'DM Sans',system-ui,sans-serif;color:#E7EAF0;
  background:linear-gradient(100deg,#3A1FB8 0%,#6D28D9 58%,#A21CAF 100%);box-shadow:0 3px 18px rgba(58,31,184,.34);
  border-bottom:1px solid rgba(255,255,255,.07)}
.bb-inner{position:relative;z-index:3;height:var(--bb-h);display:flex;align-items:center;gap:.55rem;padding:0 .85rem;max-width:1500px;margin:0 auto}
/* Sigla e LINK spre webid.ro (`#1405 §4`) — forma rămâne a unei sigle, nu a unui buton. */
.bb-brand{text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1;font-weight:700;font-size:.92rem;letter-spacing:.01em;color:#fff;padding-right:.2rem;flex:0 0 auto}
.bb-brand b{font-weight:800}
.bb-brand:hover b{text-decoration:underline;text-underline-offset:3px}
.bb-brand-tag{font-size:.535rem;font-weight:600;letter-spacing:.185em;text-transform:uppercase;color:#9AA0B4}

.bb-selectors{display:flex;align-items:center;gap:.4rem;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.bb-selectors::-webkit-scrollbar{display:none}
.bb-trigger{flex:0 0 auto;display:flex;align-items:center;gap:.4rem;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;
  padding:.32rem .6rem;color:#E7EAF0;line-height:1.1;transition:background .15s,border-color .15s}
.bb-trigger:hover{background:rgba(255,255,255,.12)}
.bb-trigger[aria-expanded="true"]{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.bb-t-label{display:block;font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:#9097A8}
.bb-t-val{display:block;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.bb-t-col{display:flex;flex-direction:column;text-align:left;gap:3px;line-height:1;min-width:0}
.bb-chev{width:14px;height:14px;flex:0 0 auto;color:#9097A8;transition:transform .2s}
.bb-trigger[aria-expanded="true"] .bb-chev{transform:rotate(180deg)}

.bb-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.bb-edit-trigger{display:inline-flex;align-items:center;gap:.42rem;cursor:pointer;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:9px;padding:.38rem .72rem;color:#fff;font-size:.8rem;font-weight:600;line-height:1;transition:background .15s,border-color .15s}
.bb-edit-trigger:hover{background:rgba(255,255,255,.18)}
.bb-edit-trigger[aria-expanded="true"]{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.42)}
.bb-edit-trigger svg{width:16px;height:16px;flex:0 0 auto}
.bb-offer{font-size:.74rem;font-weight:600;color:#fff;opacity:.92;white-space:nowrap;margin-right:.2rem}
.bb-offer-expired{opacity:.7;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.5)}
.bb-buy{background:#fff;color:#1A1F2B;font-weight:700;font-size:.8rem;padding:.32rem .6rem;border-radius:9px;text-decoration:none;white-space:nowrap;transition:transform .12s,box-shadow .15s}
.bb-buy:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.bb-buy-short{display:none}   /* desktop: „Cumpără acum"; mobil: doar „Cumpără" (vezi @760) */

/* --- Butoane noi în bandă: Editează ▾ (gated) + Opțiuni add-on (desktop) --- */
.bb-edit-menu-trigger,.bb-addon-trigger{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;border-radius:9px;font-size:.8rem;font-weight:600;line-height:1;color:#fff;white-space:nowrap;transition:background .15s,border-color .15s}
.bb-edit-menu-trigger{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:.38rem .5rem .38rem .66rem}
.bb-edit-menu-trigger:hover{background:rgba(255,255,255,.22)}
.bb-edit-menu-trigger[aria-expanded="true"]{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.46)}
.bb-edit-menu-trigger > svg:first-of-type{width:15px;height:15px;flex:0 0 auto}
.bb-edit-menu-trigger .bb-chev{width:13px;height:13px;color:#D9D5EE}
.bb-edit-menu-trigger[aria-expanded="true"] .bb-chev{transform:rotate(180deg)}
.bb-addon-trigger{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#E7EAF0;padding:.38rem .64rem}
.bb-addon-trigger:hover{background:rgba(255,255,255,.13)}
.bb-addon-trigger svg{width:15px;height:15px;flex:0 0 auto}
/* Gating: elementele care depind de window.WEBID_DEMO_BAR dispar când lipsește (clasă pe <html>) */
html.bb-no-demobar .bb-needs-bar{display:none !important}
/* A8-02: demo-ul unui client — fără selectoarele de fabrică Conținut/Template (butoane + panouri) */
html.bb-client [data-bb="domeniu"],html.bb-client [data-bb="template"],html.bb-client [data-bb-panel="domeniu"],html.bb-client [data-bb-panel="template"]{display:none !important}
/* ?pay=demo: toast (jos, centrat) — plata nu se face pe demo */
.bb-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);opacity:0;z-index:265;max-width:min(92vw,520px);background:#1E2230;color:#fff;font:500 .9rem/1.45 system-ui,-apple-system,sans-serif;padding:.8rem 1.1rem;border-radius:12px;box-shadow:0 18px 40px rgba(10,8,30,.4);transition:opacity .3s,transform .3s}
.bb-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* H-06: fereastra „nu folosi date reale" la «Trimite» pe demo-urile publice (peste bară și panouri) */
.bb-guard{position:fixed;inset:0;z-index:270;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(20,16,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bb-guard[hidden]{display:none}
.bb-guard-card{width:100%;max-width:460px;background:#FCFCFD;color:#1E2230;border-radius:18px;box-shadow:0 30px 70px rgba(10,8,30,.5);padding:1.4rem 1.5rem 1.3rem;font-family:system-ui,-apple-system,sans-serif}
.bb-guard-eyebrow{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5B3FE8;margin-bottom:.35rem}
.bb-guard-card h3{margin:0 0 .5rem;font:700 1.15rem/1.3 system-ui,-apple-system,sans-serif;color:#1E2230}
.bb-guard-card p{margin:0 0 1rem;font-size:.95rem;line-height:1.55;color:#3A3F4E}
.bb-guard-check{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;line-height:1.45;cursor:pointer;padding:.7rem .8rem;border:1px solid #E3E6EE;border-radius:12px;background:#F6F7FA}
.bb-guard-check input{margin:.2rem 0 0;width:1.05rem;height:1.05rem;flex:0 0 auto;accent-color:#5B3FE8}
.bb-guard-acts{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.1rem}
.bb-guard-acts button{font:600 .92rem system-ui,-apple-system,sans-serif;border-radius:999px;padding:.6rem 1.2rem;cursor:pointer;border:1px solid #D9DCE6;background:#fff;color:#1E2230}
.bb-guard-send{background:#5B3FE8 !important;border-color:#5B3FE8 !important;color:#fff !important}
.bb-guard-send:disabled{opacity:.45;cursor:not-allowed}

/* --- Cerc pulsatoriu (mobil) — intrarea în grupul editabil --- */
.bb-fab{display:none;position:fixed;top:calc(var(--bb-h) + 12px);right:max(14px,env(safe-area-inset-right));z-index:240;
  width:52px;height:52px;border-radius:50%;border:3px solid #fff;cursor:pointer;color:#fff;
  background:conic-gradient(from 20deg,#A21CAF,#6D28D9,#3A1FB8,#6D28D9,#A21CAF);
  box-shadow:0 7px 22px rgba(109,40,217,.5);align-items:center;justify-content:center}
.bb-fab svg{width:23px;height:23px;position:relative;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.38))}
.bb-fab-pulse{position:absolute;inset:-3px;border-radius:50%;background:rgba(162,28,175,.5);z-index:1;animation:bbFabPulse 2.6s ease-out infinite}
@keyframes bbFabPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.75);opacity:0}}

/* --- Backdrop + dropdown bază --- */
.bb-backdrop{position:fixed;left:0;right:0;top:var(--bb-h);bottom:0;z-index:1;background:transparent}
.bb-drop{position:fixed;top:var(--bb-h);left:0;right:0;z-index:2;
  background:#FCFCFD;color:#1E2230;border-bottom:1px solid #E2E4EA;
  box-shadow:0 18px 40px rgba(16,19,26,.22);
  display:flex;flex-direction:column;max-height:calc(100dvh - var(--bb-h))}
.bb-drop[hidden],.bb-backdrop[hidden]{display:none}
.bb-drop-head{padding:.7rem 1.4rem .5rem;border-bottom:1px solid #EEF0F4;flex:0 0 auto}
.bb-drop-head h3{margin:0 0 .25rem;font-family:'DM Sans',system-ui,sans-serif;font-size:1.02rem;font-weight:700;color:#171B26}
.bb-drop-head p{margin:0;font-size:.82rem;line-height:1.45;color:#5C6273;max-width:680px}
.bb-drop-scroll{overflow-y:auto;padding:.85rem 1.4rem 1.1rem;-webkit-overflow-scrolling:touch}
.bb-sub{margin:.9rem 0 .45rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#8A90A0;font-weight:600}
.bb-sub:first-child{margin-top:0}

/* --- Domenii --- */
.bb-domains{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.5rem}
@media(min-width:1000px){.bb-domains{grid-template-columns:repeat(9,minmax(0,1fr))}}  /* desktop: 9/rand -> toate 18 in 2 randuri (panoul .bb-drop e full-width) */
.bb-domain{text-align:left;cursor:pointer;background:#fff;border:1px solid #E4E6EC;border-radius:11px;padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s,background .15s}
.bb-domain:hover{border-color:#C7B0A6;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.bb-domain[aria-pressed="true"]{border-color:#A85E3E;background:#FBF4F0;box-shadow:0 0 0 1px #A85E3E inset}
.bb-dom-name{display:block;font-weight:600;font-size:.9rem;color:#20242F}
.bb-dom-desc{display:block;font-size:.76rem;color:#6A7080;margin-top:.12rem}

/* --- Template-uri --- */
.bb-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}
.bb-tpl{position:relative;text-align:left;cursor:pointer;background:#fff;border:1px solid #E4E6EC;border-radius:13px;padding:.65rem;transition:border-color .15s,box-shadow .15s}
.bb-tpl:hover:not(:disabled){border-color:#C7B0A6;box-shadow:0 4px 14px rgba(0,0,0,.07)}
.bb-tpl[aria-pressed="true"]{border-color:#A85E3E;box-shadow:0 0 0 1px #A85E3E inset}
.bb-tpl.is-soon{cursor:not-allowed;opacity:.72}
.bb-tpl-prev{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;height:84px;border-radius:9px;padding:.65rem .75rem;margin-bottom:.5rem;background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 14%,#fff),color-mix(in srgb,var(--c2) 30%,#fff));border:1px solid color-mix(in srgb,var(--c1) 18%,#e6e6e6)}
.bb-tpl-h{font-size:1.6rem;line-height:1;color:var(--c1);font-weight:600}
.bb-tpl-l1,.bb-tpl-l2{height:5px;border-radius:3px;background:color-mix(in srgb,var(--c1) 40%,#fff)}
.bb-tpl-l1{width:70%}.bb-tpl-l2{width:45%;background:color-mix(in srgb,var(--c2) 55%,#fff)}
.bb-tpl-name{display:block;font-weight:700;font-size:.9rem;color:#20242F}
.bb-tpl-desc{display:block;font-size:.76rem;color:#6A7080;margin-top:.12rem;line-height:1.4}
.bb-soon{display:inline-block;font-size:.58rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9A6B2E;background:#F6ECD9;border-radius:20px;padding:.1rem .5rem;vertical-align:middle;margin-left:.3rem}

/* ====================== PANOU EDITABIL (docked-right / acordeon) ====================== */
.bb-drop.bb-edit{left:auto;right:0;width:var(--bb-edit-w);bottom:0;max-height:none;
  background:rgba(252,252,253,.50);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:none;border-left:1px solid rgba(180,184,196,.5);box-shadow:-14px 0 40px rgba(16,19,26,.13)}
.bb-edit-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex:0 0 auto;
  padding:.55rem .95rem;border-bottom:1px solid rgba(225,228,235,.7);background:rgba(252,252,253,.50)}
.bb-edit-title{display:flex;flex-direction:column;line-height:1.18}
.bb-edit-title strong{font-size:.95rem;font-weight:700;color:#171B26}
.bb-edit-title span{font-size:.68rem;color:#8A90A0}
.bb-edit-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;cursor:pointer;background:#F1F2F5;border:1px solid #E4E6EC;border-radius:8px;color:#5C6273;transition:background .15s}
.bb-edit-close:hover{background:#E6E7EC}
.bb-edit-close svg{width:16px;height:16px}
.bb-edit-scroll{flex:1 1 auto;overflow-y:auto;padding:.1rem .85rem .5rem;-webkit-overflow-scrolling:touch}

.bb-edit-sec{padding:0;border-bottom:1px solid #F0F1F4}
.bb-edit-sec:last-of-type{border-bottom:none}
.bb-edit-head{display:flex;align-items:center;gap:.5rem;width:100%;background:none;border:none;cursor:default;padding:.42rem .1rem .3rem;text-align:left;color:#1E2230}
.bb-edit-k{font-weight:700;font-size:.85rem;flex:0 0 auto;display:inline-flex;align-items:center;gap:.42rem}
.bb-edit-v{display:none}                       /* valorile alese nu se mai afișează — doar numele opțiunii */
.bb-edit-chev{width:16px;height:16px;color:#A0A6B2;flex:0 0 auto;margin-left:auto;display:none;transition:transform .2s}
.bb-edit-swatch{width:15px;height:15px;border-radius:4px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.bb-edit-body{padding:.02rem .1rem .42rem}
.bb-edit-note{margin:0 0 .55rem;font-size:.73rem;line-height:1.4;color:#7A8090}

/* Culoare (compact) */
.bb-edit .bb-families,.bb-edit .bb-shades{display:flex;flex-wrap:wrap;gap:.42rem}
.bb-edit .bb-families .sw-fam{width:32px;height:32px;border-radius:7px;cursor:pointer;border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:0;transition:transform .12s}
.bb-edit .bb-shades .sw-pal{width:34px;height:34px;border-radius:7px;cursor:pointer;border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:0;transition:transform .12s}
.bb-edit .bb-families .sw-fam:hover,.bb-edit .bb-shades .sw-pal:hover{transform:scale(1.08)}
.bb-edit .bb-families .sw-fam[aria-pressed="true"],.bb-edit .bb-shades .sw-pal[aria-pressed="true"]{border-color:#1E2230;box-shadow:0 0 0 2px #fff inset,0 2px 7px rgba(0,0,0,.18)}
.bb-edit .bb-custom{display:flex;align-items:center;gap:.6rem;margin-top:.1rem}
.bb-edit .bb-custom input[type=color]{width:44px;height:38px;border:1px solid #DADCE3;border-radius:9px;background:#fff;cursor:pointer;padding:3px;flex:0 0 auto}
.bb-edit .bb-custom label{font-size:.76rem;color:#5C6273;line-height:1.35}

/* Atitudine (compact 2 col) */
.bb-att-grid{display:grid;grid-template-columns:1fr 1fr;gap:.42rem}
.bb-att{text-align:left;cursor:pointer;background:#fff;border:1px solid #E4E6EC;border-radius:10px;padding:.5rem .6rem;transition:border-color .15s,box-shadow .15s,background .15s}
.bb-att:hover{border-color:#C7B0A6}
.bb-att[aria-pressed="true"]{border-color:#A85E3E;background:#FBF4F0;box-shadow:0 0 0 1px #A85E3E inset}
.bb-att-name{display:block;font-weight:700;font-size:.84rem;color:#20242F}
.bb-att-desc{display:block;font-size:.69rem;color:#6A7080;margin-top:.08rem;line-height:1.3}

/* Font (listă; full-screen pe mobil) */
.bb-fonts{display:flex;flex-direction:column;gap:.32rem;max-height:300px;overflow-y:auto;padding-right:.2rem}
.bb-fonts .sw-font{text-align:left;cursor:pointer;background:#fff;border:1.5px solid #E4E6EC;border-radius:10px;padding:.5rem .72rem;color:#20242F;line-height:1.15;font-size:1.28rem;transition:border-color .15s,background .15s}
.bb-fonts .sw-font:hover{border-color:#C7B0A6}
.bb-fonts .sw-font[aria-pressed="true"]{border-color:#A85E3E;background:#FBF4F0;box-shadow:0 0 0 1px #A85E3E inset}
.bb-fonts .sw-font small{display:block;font-family:'DM Sans',system-ui,sans-serif;font-size:.66rem;font-weight:400;color:#7A8090;margin-top:.15rem;letter-spacing:0}

/* Toggles (Ornamente/Animație/Vizual/Programări) */
.bb-edit .sw-vis{display:flex;width:100%;background:#F1F2F5;border:1px solid #E2E4EA;border-radius:10px;padding:3px;gap:2px}
.bb-edit .sw-vis button{flex:1;cursor:pointer;border:0;background:transparent;border-radius:7px;padding:.42rem .3rem;font:inherit;font-size:.79rem;color:#4A4F5C;white-space:nowrap;transition:background .15s,color .15s}
.bb-edit .sw-vis button[aria-pressed="true"]{background:#fff;color:#A85E3E;box-shadow:0 1px 3px rgba(0,0,0,.1);font-weight:600}
.bb-set-tag{font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;background:#EDE6DF;color:#9A6B45;border-radius:5px;padding:.1rem .3rem;margin-left:.05rem;font-weight:700;vertical-align:middle}
.bb-set-note{margin:.5rem 0 0;font-size:.72rem;line-height:1.4;color:#5C6273;background:#F3F1FA;border-left:3px solid #A85E3E;border-radius:0 7px 7px 0;padding:.45rem .6rem}

/* --- Mini-meniu „Editează ▾" (desktop): ancorat dreapta sub bandă --- */
.bb-drop.bb-menu{left:auto;right:.85rem;width:min(264px,calc(100vw - 1.7rem));max-height:none;
  border:1px solid #E2E4EA;border-radius:13px;padding:.4rem;box-shadow:0 16px 40px rgba(16,19,26,.24)}
.bb-menu-link{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:9px;text-decoration:none;color:#1E2230;transition:background .14s}
.bb-menu-link:hover{background:#F3F1FA}
.bb-menu-link svg{width:19px;height:19px;flex:0 0 auto;color:#6D5BD0}
.bb-menu-col{display:flex;flex-direction:column;line-height:1.2}
.bb-menu-t{font-size:.86rem;font-weight:700}
.bb-menu-s{font-size:.71rem;color:#7A8090}

/* --- Footer de acțiuni în panoul ⚙ (MOBIL): add-on + Editează pagina + Editează site-ul --- */
.bb-panel-actions{display:none;flex-direction:column;gap:.5rem;margin:.75rem .1rem .2rem}
.bb-panel-act{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;border-radius:10px;padding:.6rem .75rem;text-decoration:none;cursor:pointer;border:1px solid transparent;font:inherit}
.bb-panel-act svg{width:18px;height:18px;flex:0 0 auto}
.bb-act-col{display:flex;flex-direction:column;line-height:1.2}
.bb-act-t{font-size:.85rem;font-weight:700}
.bb-act-s{font-size:.71rem;opacity:.85}
.bb-act-addon{background:#FBF1EC;border-color:#EAD4C8;color:#9A5A38}
.bb-act-addon:hover{background:#F7E8DF}
.bb-act-page{background:#EFEDFA;border-color:#DAD3F2;color:#4B33C7}
.bb-act-page:hover{background:#E7E2F6}
/* „Editează site-ul" = fostul .bb-allset (același look mov), fără marginea proprie în context */
.bb-allset{background:#ECEAF9;border-color:#D6CEF2;color:#4B33C7;transition:background .15s}
.bb-allset:hover{background:#E3DEF6}

/* Reflow desktop: panoul împinge site-ul la stânga DOAR când rămâne ≥1024px de conținut (≥1366px viewport) */
@media(min-width:1366px){html.bb-edit-open body{padding-right:var(--bb-edit-w)}html.bb-edit-open .bb-backdrop{pointer-events:none}}

/* ====================== OVERLAY „Opțiuni add-on" (modal) ====================== */
.bb-addon-overlay{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(20,16,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bb-addon-overlay[hidden]{display:none}
.bb-addon-card{width:100%;max-width:600px;max-height:calc(100dvh - 2.4rem);display:flex;flex-direction:column;
  background:#FCFCFD;color:#1E2230;border-radius:18px;box-shadow:0 30px 70px rgba(10,8,30,.5);overflow:hidden}
.bb-addon-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem .9rem;border-bottom:1px solid #EEF0F4;flex:0 0 auto}
.bb-addon-head h3{margin:0;font-family:'DM Sans',system-ui,sans-serif;font-size:1.12rem;font-weight:700;color:#171B26}
.bb-addon-head p{margin:.28rem 0 0;font-size:.82rem;line-height:1.45;color:#5C6273;max-width:440px}
.bb-addon-x{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#F1F2F5;border:1px solid #E4E6EC;color:#5C6273;cursor:pointer;transition:background .15s}
.bb-addon-x:hover{background:#E6E7EC}
.bb-addon-x svg{width:17px;height:17px}
.bb-addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:1.1rem 1.3rem 1.3rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bb-ao{display:flex;flex-direction:column;gap:.32rem;background:#fff;border:1px solid #E4E6EC;border-radius:13px;padding:.75rem .85rem}
.bb-ao-h{display:flex;align-items:center;gap:.5rem}
.bb-ao-ic{width:32px;height:32px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#EFEDFA;color:#5B45C7}
.bb-ao-ic svg{width:18px;height:18px}
.bb-ao-name{margin:0;font-size:.88rem;font-weight:700;color:#20242F;flex:1 1 auto}
.bb-ao-pill{font-size:.62rem;letter-spacing:.04em;font-weight:700;text-transform:uppercase;padding:.12rem .42rem;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.bb-ao-pill.is-on{background:#E1F2E9;color:#1E7A52}
.bb-ao-pill.is-off{background:#F3EAE2;color:#9A5A38}
.bb-ao-desc{margin:0;font-size:.76rem;line-height:1.42;color:#6A7080}
.bb-ao-price{font-size:.76rem;font-weight:700;color:#20242F}
.bb-ao-link{margin-top:.15rem;font-size:.78rem;font-weight:600;color:#5B45C7;text-decoration:none;display:inline-flex;align-items:center;gap:.28rem}
.bb-ao-link:hover{text-decoration:underline}
.bb-ao-link svg{width:14px;height:14px}
@media(max-width:600px){.bb-addon-grid{grid-template-columns:1fr;padding:.9rem 1rem 1.1rem}.bb-addon-head{padding:.95rem 1rem .8rem}.bb-addon-card{border-radius:15px}}

/* ====================== RESPONSIVE ====================== */
@media(max-width:760px){
  html.has-bb{--bb-h:48px}
  /* Sigla RĂMÂNE pe mobil: e singurul drum înapoi spre webid.ro (`#1405 §4`), iar locul vine chiar
     din butonul „Contact" scos la §1. Compactă: doar cuvântul, fără eticheta „generator". */
  .bb-brand{font-size:.78rem;padding-right:0}
  .bb-brand-tag{display:none}
  .bb-t-label{display:none}
  .bb-t-val{max-width:84px;font-size:11px}  /* mobil: font mic + taie cu „…" ca sa incapa si Cumpara + Contact */
  .bb-edit-trigger{display:none}            /* pe mobil intrarea e cercul pulsatoriu */
  .bb-edit-menu-trigger,.bb-addon-trigger{display:none}   /* editarea + add-on trec în panoul ⚙ */
  .bb-panel-actions{display:flex}           /* footer-ul de acțiuni din panou (mobil) */
  .bb-buy{font-size:11px}
  .bb-offer{display:none}                   /* mobil: n-are loc; oferta rămâne pe /porneste/ */
  .bb-buy-full{display:none}                        /* mobil: „Cumpără" scurt (ca sa nu taie selectorul Template/Warmth) */
  .bb-buy-short{display:inline}
  .bb-inner{gap:.4rem;padding:0 .6rem}
  .bb-fab{display:flex}
  .bbar.bb-open .bb-fab{display:none}

  /* Domeniu/Template = full-page */
  .bb-drop.bb-full{top:var(--bb-h);bottom:0;left:0;right:0;max-height:none;border-radius:0}
  .bb-drop-head{padding:.85rem 1rem .6rem}
  .bb-drop-scroll{padding:.9rem 1rem 1.3rem}
  .bb-domains,.bb-templates{grid-template-columns:1fr 1fr}
  .bb-domain{padding:.5rem .58rem;border-radius:9px}
  .bb-dom-name{font-size:.82rem}
  .bb-dom-desc{font-size:.69rem;margin-top:.05rem}
  .bb-buy{padding:.3rem .52rem;font-size:11px}

  /* Grup editabil = acordeon din colțul sus-dreapta (înălțime variabilă per opțiune) */
  .bb-drop.bb-edit{top:calc(var(--bb-h) + 8px);right:8px;left:auto;bottom:auto;
    width:min(80vw,288px);max-height:calc(100dvh - var(--bb-h) - 20px);height:auto;
    border:1px solid #E4E6EC;border-radius:16px;box-shadow:0 18px 44px rgba(16,19,26,.30);overflow:hidden}
  .bb-edit-scroll{padding:.12rem .58rem .5rem}
  .bb-edit-head{cursor:pointer;padding:.5rem .1rem}
  .bb-edit-chev{display:block}
  .bb-edit-sec .bb-edit-body{display:none}
  .bb-edit-sec.is-open .bb-edit-body{display:block}
  .bb-edit-sec.is-open > .bb-edit-head .bb-edit-chev{transform:rotate(180deg)}
  .bb-fonts{max-height:none}                /* Font: ocupă tot panoul (≈ full-screen) */
}
@media(max-width:460px){
  .bb-templates{grid-template-columns:1fr}
  .bb-att-grid{grid-template-columns:1fr 1fr}
  .bb-drop.bb-edit{right:6px;width:min(84vw,280px)}
}

/* ============================================================================
   DARK MODE — skin întunecat pe panoul Personalizează (.bb-edit), declanșat de
   html[data-theme="dark"] (setat în customizer.js după luminanța lui --color-bg).
   Bara-top (.bbar, gradient violet) e deja întunecată → neatinsă. Dropdownurile
   Domeniu/Template rămân deschise (alegeri de generare, nu „personalizează").
   ============================================================================ */
html[data-theme="dark"] .bb-drop.bb-edit{background:rgba(22,24,30,.74);border-left-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .bb-edit-bar{background:rgba(22,24,30,.55);border-bottom-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .bb-edit-title strong{color:#ECEEF2}
html[data-theme="dark"] .bb-edit-title span{color:#9097A4}
html[data-theme="dark"] .bb-edit-close{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#C5CAD2}
html[data-theme="dark"] .bb-edit-close:hover{background:rgba(255,255,255,.13)}
html[data-theme="dark"] .bb-edit-sec{border-bottom-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .bb-edit-head{color:#E6E8EC}
html[data-theme="dark"] .bb-edit-chev{color:#7E8694}
html[data-theme="dark"] .bb-sub{color:#878F9D}
html[data-theme="dark"] .bb-edit-note{color:#9AA0AC}
/* Culoare: ring-ul de selecție pe familii/nuanțe + inputul de culoare proprie */
html[data-theme="dark"] .bb-edit .bb-families .sw-fam[aria-pressed="true"],
html[data-theme="dark"] .bb-edit .bb-shades .sw-pal[aria-pressed="true"]{border-color:#F2EFEA;box-shadow:0 0 0 2px rgba(0,0,0,.55) inset,0 2px 7px rgba(0,0,0,.45)}
html[data-theme="dark"] .bb-edit .bb-custom input[type=color]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .bb-edit .bb-custom label{color:#9AA0AC}
/* Atitudine + Font: carduri */
html[data-theme="dark"] .bb-att,
html[data-theme="dark"] .bb-fonts .sw-font{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .bb-att:hover,
html[data-theme="dark"] .bb-fonts .sw-font:hover{border-color:rgba(255,255,255,.24)}
html[data-theme="dark"] .bb-att-name,
html[data-theme="dark"] .bb-fonts .sw-font{color:#E6E8EC}
html[data-theme="dark"] .bb-att-desc,
html[data-theme="dark"] .bb-fonts .sw-font small{color:#9097A4}
html[data-theme="dark"] .bb-att[aria-pressed="true"],
html[data-theme="dark"] .bb-fonts .sw-font[aria-pressed="true"]{border-color:#C77E5C;background:rgba(199,126,92,.18);box-shadow:0 0 0 1px #C77E5C inset}
/* Toggles (Ornamente/Animație/Vizual/Programări) */
html[data-theme="dark"] .bb-edit .sw-vis{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .bb-edit .sw-vis button{color:#AEB4BE}
html[data-theme="dark"] .bb-edit .sw-vis button[aria-pressed="true"]{background:#34373F;color:#E0A684;box-shadow:0 1px 3px rgba(0,0,0,.4)}
html[data-theme="dark"] .bb-set-tag{background:rgba(199,126,92,.22);color:#E0A684}
html[data-theme="dark"] .bb-set-note{background:rgba(255,255,255,.05);color:#AEB4BE;border-left-color:#C77E5C}
/* Footer acțiuni panou (mobil): „Editează site-ul" (allset) + Editează pagina + add-on */
html[data-theme="dark"] .bb-allset{background:rgba(124,108,217,.20);border-color:rgba(124,108,217,.40);color:#C9BEF2}
html[data-theme="dark"] .bb-allset:hover{background:rgba(124,108,217,.28)}
html[data-theme="dark"] .bb-act-page{background:rgba(124,108,217,.18);border-color:rgba(124,108,217,.36);color:#C9BEF2}
html[data-theme="dark"] .bb-act-page:hover{background:rgba(124,108,217,.26)}
html[data-theme="dark"] .bb-act-addon{background:rgba(199,126,92,.16);border-color:rgba(199,126,92,.32);color:#E0A684}
html[data-theme="dark"] .bb-act-addon:hover{background:rgba(199,126,92,.24)}

/* Mini-meniu „Editează ▾" */
html[data-theme="dark"] .bb-drop.bb-menu{background:rgba(22,24,30,.97);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .bb-menu-link{color:#E6E8EC}
html[data-theme="dark"] .bb-menu-link:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .bb-menu-link svg{color:#C0AEF2}
html[data-theme="dark"] .bb-menu-s{color:#9097A4}

/* Overlay „Opțiuni add-on" */
html[data-theme="dark"] .bb-addon-card{background:#1A1C22;color:#E6E8EC}
html[data-theme="dark"] .bb-addon-head{border-bottom-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .bb-addon-head h3{color:#ECEEF2}
html[data-theme="dark"] .bb-addon-head p{color:#9AA0AC}
html[data-theme="dark"] .bb-addon-x{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#C5CAD2}
html[data-theme="dark"] .bb-addon-x:hover{background:rgba(255,255,255,.13)}
html[data-theme="dark"] .bb-ao{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .bb-ao-name{color:#E6E8EC}
html[data-theme="dark"] .bb-ao-desc{color:#9097A4}
html[data-theme="dark"] .bb-ao-price{color:#E6E8EC}
html[data-theme="dark"] .bb-ao-ic{background:rgba(124,108,217,.22);color:#C0AEF2}
html[data-theme="dark"] .bb-ao-link{color:#C0AEF2}
html[data-theme="dark"] .bb-ao-pill.is-on{background:rgba(46,138,90,.24);color:#7FCBA1}
html[data-theme="dark"] .bb-ao-pill.is-off{background:rgba(199,126,92,.20);color:#E0A684}

/* ============ Watermark DEMO (rămâne neschimbat) ============ */

/* Nota TVA unica sub grila de add-on-uri (adaugata de CMS in topband.html; stilizata aici) — footnote muted, aliniat cu padding-ul grilei */
.bb-addon-tva{margin:0;padding:0 1.3rem 1.1rem;font-size:.73rem;line-height:1.4;color:#8A90A0}
@media(max-width:600px){.bb-addon-tva{padding:0 1rem .95rem}}
html[data-theme="dark"] .bb-addon-tva{color:#9097A4}
/* Pastila add-on ca switch (toggle live per add-on: booking/blog/plati/multilang) — reset de buton, restul din is-on/is-off */
.bb-ao-pill--btn{border:0;font:inherit;cursor:pointer}