/* All4eBikes -- configuratorul de pe prima pagina (hero RO), 2026-09-24.
   Sursa: content/_theme/a4e-home-configurator.css. Deploy: scripts/16_deploy_home_configurator.py.
   Toate clasele sunt .a4c-*, distincte de hero-ul vechi (.a4e-heroD__*).
   Layout-ul de telefon e comandat de un container query pe .a4c, nu de viewport. */

.a4c{container-type:inline-size;position:relative;background:#08212e;color:#eaf6fb;font-family:Poppins,system-ui,sans-serif;overflow:clip}
.a4c *{box-sizing:border-box}
.a4c::before{content:"";position:absolute;inset:0;background:var(--a4c-bg) center 42%/cover no-repeat;opacity:.32;pointer-events:none}
.a4c::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,#08212e 30%,rgba(8,33,46,.72) 62%,rgba(8,33,46,.55));pointer-events:none}
.a4c-in{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:48px 32px 52px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
.a4c-l{display:flex;flex-direction:column;gap:20px;min-width:0}
.a4c .a4c-h1{margin:0;font-size:clamp(30px,3.6cqi,48px);font-weight:800;line-height:1.06;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.a4c .a4c-h1 em{font-style:normal;color:#12a8e0}
.a4c-sub{margin:-6px 0 0;color:#b4d3e0;font-size:15px;line-height:1.5}
.a4c-prog{display:flex;gap:6px}
.a4c-prog span{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18);transition:background .25s}
.a4c-prog span.a4c-on{background:#12a8e0}
.a4c-steps{display:grid;gap:20px}
.a4c-q{font-weight:600;font-size:15px;margin-bottom:8px;color:#fff}
.a4c-q label{cursor:default}
.a4c-q small{display:block;font-weight:400;color:#9fc3d3;font-size:12px}
.a4c-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a4c-opts.a4c-w3{grid-template-columns:repeat(3,1fr)}
.a4c .a4c-opt{min-height:54px;margin:0;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);color:#eaf6fb;border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;font:500 12px/1.35 Poppins,sans-serif;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.a4c .a4c-opt b{display:block;font-size:15px;font-weight:600;color:inherit}
.a4c .a4c-opt small{color:#9fc3d3;font-size:12px}
.a4c .a4c-opt:hover{border-color:#12a8e0}
.a4c .a4c-opt[aria-pressed="true"]{background:#12a8e0;border-color:#12a8e0;color:#fff}
.a4c .a4c-opt[aria-pressed="true"] small{color:#e4f7ff}
.a4c .a4c-opt:disabled{opacity:.4;cursor:not-allowed;border-style:dashed}
.a4c button:focus-visible,.a4c a:focus-visible,.a4c input:focus-visible{outline:2px solid #b8f24a;outline-offset:2px}
/* pasul 1: slider de putere */
.a4c-pw{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 6px}
.a4c-watt{display:flex;align-items:baseline;gap:4px;color:#fff;line-height:.9}
.a4c-watt b{font-size:clamp(52px,6cqi,72px);font-weight:800;letter-spacing:-.04em}
.a4c-watt span{font-size:22px;font-weight:700;color:#12a8e0}
.a4c-fit{font-size:13px;font-weight:600;color:#eaf6fb;background:rgba(18,168,224,.18);border:1px solid rgba(18,168,224,.45);border-radius:999px;padding:5px 12px}
.a4c .a4c-prange{-webkit-appearance:none;appearance:none;width:100%;height:10px;margin:10px 0 0;border-radius:6px;background:linear-gradient(90deg,#12a8e0 var(--p,40%),rgba(255,255,255,.18) var(--p,40%));cursor:pointer;touch-action:pan-y}
.a4c .a4c-prange::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:7px solid #12a8e0;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:grab}
.a4c .a4c-prange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:7px solid #12a8e0;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:grab}
.a4c .a4c-prange::-moz-range-track{background:transparent}
.a4c-ticks{display:flex;justify-content:space-between;margin:6px -6px 0}
.a4c .a4c-ticks button{background:none;border:0;margin:0;padding:8px 6px;min-height:36px;font:600 12px Poppins,sans-serif;color:#9fc3d3;cursor:pointer;border-radius:8px}
.a4c .a4c-ticks button[aria-pressed="true"]{color:#fff}
.a4c .a4c-ticks button:hover{color:#fff}
.a4c-meters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.a4c-meters>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px}
.a4c-meters small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9fc3d3}
.a4c-meters b{display:block;font-size:18px;font-weight:800;color:#fff;margin:2px 0 6px}
.a4c-meters i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.a4c-meters em{display:block;height:100%;background:#12a8e0;border-radius:3px;transition:width .3s}
.a4c-hint{font-size:12px;color:#f6c778;margin-top:6px}
.a4c-hint:empty{display:none}
.a4c-km{display:flex;align-items:baseline;gap:6px;color:#fff}
.a4c-km b{font-size:34px;font-weight:800;line-height:1}
.a4c .a4c-range{width:100%;height:32px;margin:0;accent-color:#12a8e0;cursor:pointer}
.a4c-nav{display:none}
.a4c .a4c-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 0;padding:0;list-style:none;font-size:13px;color:#b4d3e0}
.a4c .a4c-trust li{margin:0;padding:0}
.a4c .a4c-trust li::before{content:"\2713  ";color:#12a8e0;font-weight:700}

/* pachetul */
.a4c-r{background:#fff;color:#0d1b24;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);min-width:0}
.a4c .a4c-r-h{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#0a7fb0;border:0;padding:0}
.a4c .a4c-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;background:#f7fafc;border:1px solid #dde7ed;border-radius:14px;padding:10px 14px 10px 10px;color:#0d1b24;text-decoration:none;transition:box-shadow .3s,border-color .2s}
.a4c .a4c-item:hover{border-color:#12a8e0}
.a4c .a4c-item img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:#fff}
.a4c .a4c-item b{font-size:14px;display:block;line-height:1.3;font-weight:600}
.a4c .a4c-item small{color:#5b6d78;font-size:12px;display:block;line-height:1.4}
.a4c-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:2px 6px;margin-top:4px}
.a4c-tag.a4c-ok{background:#e1f6ea;color:#177a4b}
.a4c-tag.a4c-warn{background:#ffe7e3;color:#b0402c}
.a4c-pr{text-align:right;white-space:nowrap}
.a4c .a4c-pr b{font-size:15px;font-weight:800}
.a4c-pr s{display:block;color:#8a9aa3;font-size:11px}
.a4c-flash{animation:a4cFlash .6s ease}
@keyframes a4cFlash{0%{box-shadow:0 0 0 0 rgba(18,168,224,.9)}100%{box-shadow:0 0 0 10px rgba(18,168,224,0)}}
.a4c .a4c-link{background:none;border:0;padding:4px 0;margin:0;font:600 13px Poppins,sans-serif;color:#0a7fb0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.a4c-alt{display:grid;gap:6px}
.a4c-alt[hidden]{display:none}
.a4c .a4c-alt button{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;background:#fff;border:1px solid #dde7ed;border-radius:10px;padding:6px 10px 6px 6px;margin:0;font:500 13px Poppins,sans-serif;color:#0d1b24;cursor:pointer;min-height:52px}
.a4c .a4c-alt button img{width:40px;height:40px;object-fit:contain}
.a4c .a4c-alt button small{display:block;color:#5b6d78;font-size:11px}
.a4c .a4c-alt button[aria-pressed="true"]{border-color:#12a8e0;box-shadow:0 0 0 1px #12a8e0}
.a4c .a4c-incl,.a4c .a4c-note,.a4c .a4c-est{margin:0}
.a4c-incl{font-size:12px;color:#3c525e;border:1px dashed #c7d6de;border-radius:12px;padding:10px 12px;line-height:1.5}
.a4c-note{font-size:12px;color:#5b4a2a;background:#fff6e5;border:1px solid #f3d9a8;border-radius:12px;padding:9px 12px;line-height:1.5}
.a4c-incl b,.a4c-note b{color:#0d1b24}
.a4c-total{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px dashed #c7d6de;padding-top:14px;margin-top:4px}
.a4c-total small{color:#5b6d78;font-size:12px;display:block}
.a4c-sum{font-size:28px;font-weight:800;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.a4c-save{font-size:12px;color:#177a4b;font-weight:600}
.a4c .a4c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;margin:0;cursor:pointer;font:600 15px Poppins,sans-serif;min-height:52px;padding:0 24px;border-radius:12px;background:#12a8e0;color:#fff;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.a4c .a4c-btn:hover{background:#0f98cc;box-shadow:0 10px 24px -10px rgba(18,168,224,.9)}
.a4c .a4c-btn:disabled{opacity:.7;cursor:progress}
.a4c .a4c-btn.a4c-sec{background:transparent;border:1.5px solid rgba(255,255,255,.3);color:#eaf6fb}
.a4c-est{font-size:11px;color:#7d909a;line-height:1.4}

/* ---------- telefon / latime mica ---------- */
@container (max-width:760px){
	.a4c-in{grid-template-columns:1fr;gap:18px;padding:22px 14px 18px}
	.a4c-l{gap:14px;padding:0 4px}
	.a4c .a4c-h1{font-size:28px}
	.a4c-sub{font-size:14px}
	.a4c-steps{display:block;min-height:0}
	.a4c-step{display:none}
	.a4c-step.a4c-cur{display:block;animation:a4cIn .25s ease}
	.a4c .a4c-opt{min-height:60px}
	.a4c .a4c-ticks button{font-size:11px;padding:8px 2px}
	.a4c-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
	.a4c .a4c-nav .a4c-btn{min-height:48px;font-size:14px;padding:0 18px}
	.a4c-cnt{font-size:12px;color:#9fc3d3}
	.a4c .a4c-trust{display:none}
	.a4c-r{padding:18px 14px 0;border-radius:18px;scroll-margin-top:118px} /* sub header-ul fix de ~106px */
	.a4c .a4c-item{grid-template-columns:58px minmax(0,1fr) auto;padding:8px 10px 8px 8px}
	.a4c .a4c-item img{width:58px;height:58px}
	.a4c .a4c-item b{font-size:13px}
	.a4c-total{position:sticky;bottom:0;z-index:5;margin:6px -14px 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #dde7ed;border-radius:0 0 18px 18px;box-shadow:0 -10px 24px -14px rgba(8,33,46,.35)}
	/* butonul WhatsApp (.floating-wpp, fix, 56px, dreapta jos) ar acoperi butonul de cos */
	.a4c-total{padding-right:70px}
	.a4c-sum{font-size:22px}
	.a4c .a4c-total .a4c-btn{padding:0 16px;font-size:14px}
}
@container (max-width:360px){
	.a4c .a4c-total .a4c-btn{padding:0 12px;font-size:13px}
	.a4c-sum{font-size:20px}
}
@keyframes a4cIn{from{opacity:.3;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.a4c *{animation:none!important;transition:none!important}}

/* ---------- anunt montaj Bucuresti (2026-10-02, varianta 4): banda jos pe desktop, sus pe telefon ---------- */
.a4c-stack{position:relative;z-index:1;display:flex;flex-direction:column}
.a4c-mb{width:100%;max-width:1320px;margin:0 auto 44px;padding:0 32px}
.a4c-mb-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;border-radius:20px;padding:16px 18px 16px 16px;background:linear-gradient(110deg,#12a8e0 0%,#0f98cc 40%,#0a7fb0 100%);color:#04202c;box-shadow:0 24px 50px -24px rgba(18,168,224,.8)}
.a4c-mb-thumb{width:120px;height:76px;border-radius:12px;background:var(--a4c-bg) center 45%/cover no-repeat;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.a4c .a4c-mb-t{margin:0;font-size:20px;font-weight:800;line-height:1.25;color:#04202c}
.a4c-mb-new{display:inline-block;background:#08212e;color:#b8f24a;font-size:11.5px;font-weight:800;letter-spacing:.06em;border-radius:6px;padding:3px 8px;vertical-align:3px;margin-right:8px}
.a4c .a4c-mb-d{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:#06303f;font-weight:500}
.a4c-mb-act{display:flex;align-items:center;gap:14px}
.a4c .a4c-mb-lnk{display:inline-flex;align-items:center;gap:6px;color:#04202c;font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap}
.a4c .a4c-mb-lnk:hover{color:#fff}
.a4c .a4c-mb-wa{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;background:#25d366;color:#06261a;font-weight:700;font-size:14px;line-height:1.2;padding:12px 18px;border-radius:12px;text-decoration:none;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(6,38,26,.6);transition:transform .15s}
.a4c .a4c-mb-wa:hover{color:#06261a;transform:translateY(-1px)}
@container (max-width:760px){
	.a4c-mb{order:-1;margin:18px auto 0;padding:0 14px}
	.a4c-mb-in{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
	.a4c-mb-thumb{display:none}
	.a4c .a4c-mb-t{font-size:17px}
	.a4c-mb-act{justify-content:space-between}
}