/* =========================================================================
   Konfigurátor LED panelu — živý náhled (jen na produktu, kde je zapnutý).
   Načítá se přes inc/led-config.php; @font-face pro fonty náhledu doplňuje
   PHP inline (soubory jsou v assets/fonts/, žádné externí requesty).
   ========================================================================= */

.dm-led{display:flex;flex-direction:column;gap:18px;margin:0 0 20px}

/* ---------- náhledová scéna ---------- */
.dm-led-stage{background:#0b0b0d;border:1px solid #1c1c20;border-radius:16px;overflow:hidden}
.dm-led-scene{--dm-pad:22px;position:relative;aspect-ratio:16/9;padding:var(--dm-pad);
  background:radial-gradient(120% 90% at 50% 18%,#191a20 0%,#0b0b0d 62%,#050506 100%)}
.dm-led-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 105%,rgba(255,255,255,.045),transparent 70%)}

/* Akrylový panel.
   POZOR: žádný procentuální padding — procenta se počítají ze šířky RODIČE, ne
   panelu, takže na širokém sloupci panel nafoukly a rozbily výpočet velikosti
   textu. Vnitřní rezervu drží JS (text max 42 % výšky a 88 % šířky panelu). */
/* Panel je ABSOLUTNĚ pozicovaný, a to schválně: jako prvek v toku se roztahoval
   podle dlouhého textu (až na 518 px místo 456 — flexový `min-width:auto`, který
   nešlo spolehlivě přebít). Výpočet velikosti pak počítal s nafouklou šířkou
   a text skončil nalepený na hranách. Absolutní prvek bere šířku VÝHRADNĚ
   od rodiče, takže je stabilní bez ohledu na obsah. */
.dm-led-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - var(--dm-pad) * 2);max-width:520px;aspect-ratio:100/34;border-radius:10px;
  background:linear-gradient(160deg,#141418 0%,#0c0c0f 55%,#101014 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.dm-led-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}

/* zář odražená do okolí */
.dm-led-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:190%;
  pointer-events:none;border-radius:50%;opacity:.30;filter:blur(46px);
  background:radial-gradient(closest-side,var(--dm-glow,#ff2020),transparent 72%)}

/* ŠÍŘKA SE NENASTAVUJE: element se smrští na obsah, takže scrollWidth v JS měří
   skutečný text, ne kontejner (jinak by se smyčka „zmenši, ať se vejde" nikdy
   nezastavila a font spadl na minimum). Vystředí ho .dm-led-panel. */
.dm-led-art{display:flex;align-items:center;justify-content:center;column-gap:.24em;
  color:var(--dm-core,#ffe2e2);white-space:nowrap;line-height:1.05;
  text-shadow:0 0 2px #fff, 0 0 7px var(--dm-glow,#ff2020), 0 0 16px var(--dm-glow,#ff2020),
              0 0 34px var(--dm-glow,#ff2020), 0 0 62px var(--dm-glow,#ff2020)}
/* Rozměr, mezeru i svislý posun dopočítává JS z metrik fontu a z getBBox()
   skutečné kresby (viz sizeIcon) — ikona pak stojí v pásmu verzálek jako na
   opravdové samolepce. align-self:center je jen výchozí poloha, ze které JS
   měří; baseline by naopak výškou ikony posouval celý řádek s textem. */
.dm-led-ico{flex:0 0 auto;display:flex;align-self:center;
  filter:drop-shadow(0 0 5px var(--dm-glow,#ff2020)) drop-shadow(0 0 14px var(--dm-glow,#ff2020)) drop-shadow(0 0 30px var(--dm-glow,#ff2020))}
/* POZOR: [hidden] musí přebít display:flex — jinak po skryté ikoně zůstane
   prázdný flex prvek i s gapem a text se opticky posune doprava. */
.dm-led-ico[hidden]{display:none}
.dm-led-ico svg{display:block;width:100%;height:100%}
.dm-led-txt{display:inline-block}
.dm-led-txt:empty::before{content:attr(data-ph);opacity:.42}

/* režimy svícení */
@keyframes dmLedSlow{0%,44%{opacity:1}52%,96%{opacity:.14}100%{opacity:1}}
@keyframes dmLedFast{0%,38%{opacity:1}50%,88%{opacity:.12}100%{opacity:1}}
.dm-led-stage.is-slow .dm-led-art,.dm-led-stage.is-slow .dm-led-halo{animation:dmLedSlow 2.1s steps(1,end) infinite}
.dm-led-stage.is-fast .dm-led-art,.dm-led-stage.is-fast .dm-led-halo{animation:dmLedFast .62s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){
  .dm-led-stage.is-slow .dm-led-art,.dm-led-stage.is-fast .dm-led-art,
  .dm-led-stage.is-slow .dm-led-halo,.dm-led-stage.is-fast .dm-led-halo{animation:none}
}

/* lišta pod scénou */
.dm-led-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-top:1px solid #1c1c20;background:#0e0e11}
.dm-led-modes{display:flex;gap:6px;flex-wrap:wrap}
.dm-led-modes button{border:1px solid #26262c;background:#141418;color:#a7a2b0;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:99px;transition:.15s}
.dm-led-modes button:hover{border-color:#3a3a44;color:#e9e6f0}
.dm-led-modes button[aria-pressed="true"]{background:#fff;color:#0d0d0d;border-color:#fff}
.dm-led-dims{font-size:11px;color:#6f6a7a;letter-spacing:.04em}

/* ---------- ovládání ---------- */
.dm-led-ctl{display:flex;flex-direction:column;gap:16px}
.dm-led-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 8px}
.dm-led-req{color:var(--red)}

.dm-led-inputrow{position:relative}
.dm-led-inputrow input{width:100%;border:1.5px solid var(--border-btn);border-radius:var(--r-sm);background:#fff;
  color:var(--black);font-family:var(--font-body);font-size:15px;padding:14px 66px 14px 15px;outline:0;
  transition:border-color .15s;min-height:0}
.dm-led-inputrow input:focus{border-color:var(--black);box-shadow:none}
.dm-led-count{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums;pointer-events:none}
.dm-led-count.is-warn{color:var(--red);font-weight:600}

/* dlaždice fontů — ukazují ZÁKAZNÍKŮV text */
.dm-led-fonts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-led-fonts button{position:relative;border:1.5px solid var(--border);background:#101014;border-radius:12px;
  cursor:pointer;padding:0;overflow:hidden;transition:border-color .15s,transform .15s}
.dm-led-fonts button:hover{border-color:#bdb6ad;transform:translateY(-1px)}
.dm-led-fonts button[aria-pressed="true"]{border-color:var(--red);box-shadow:0 4px 16px rgba(190,35,24,.16)}
.dm-led-fprev{height:46px;display:flex;align-items:center;justify-content:center;padding:0 8px;
  color:var(--dm-core,#ffe2e2);white-space:nowrap;overflow:hidden;
  text-shadow:0 0 4px var(--dm-glow,#ff2020),0 0 12px var(--dm-glow,#ff2020)}
.dm-led-fname{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);background:#fff;padding:5px 6px;border-top:1px solid var(--border)}
.dm-led-fonts button[aria-pressed="true"] .dm-led-fname{color:var(--red)}

/* ikony */
.dm-led-icons{display:flex;flex-wrap:wrap;gap:8px}
.dm-led-icons button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--border);background:#fff;
  border-radius:99px;padding:8px 14px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;
  font-weight:600;color:var(--black);transition:.15s}
.dm-led-icons button:hover{border-color:#bdb6ad}
.dm-led-icons button[aria-pressed="true"]{border-color:var(--red);background:var(--bundle-bg);color:var(--red)}
.dm-led-icons svg{width:16px;height:16px}

/* barvy */
.dm-led-colors{display:flex;gap:10px;flex-wrap:wrap}
.dm-led-colors button{width:44px;height:44px;border-radius:50%;cursor:pointer;position:relative;padding:0;
  border:2px solid transparent;background:#0b0b0d;transition:transform .15s}
.dm-led-colors button:hover{transform:translateY(-2px)}
.dm-led-colors button span{position:absolute;inset:6px;border-radius:50%;background:var(--dm-sw);
  box-shadow:0 0 10px var(--dm-sw),0 0 22px var(--dm-sw)}
.dm-led-colors button[aria-pressed="true"]{border-color:var(--black)}

/* rekapitulace voleb */
.dm-led-summary{margin:0;font-size:12.5px;line-height:1.7;color:var(--text-2);
  background:var(--surface-2);border-radius:var(--r-sm);padding:11px 14px}
.dm-led-summary b{color:var(--black);font-weight:600}

@media (max-width:520px){
  .dm-led-fonts{grid-template-columns:repeat(2,1fr)}
  .dm-led-scene{--dm-pad:16px} /* šířku panelu dopočítá calc() z této proměnné */
}

/* =========================================================================
   REŽIM „SAMOLEPKA NA SKLO" (.dm-led.is-sticker)
   Nesvítí — barva je barva řezané fólie, ne záře. Náhled proto ukazuje sklo
   auta; přepínačem lze zkusit tmavé i světlé, protože bílá fólie na tónovaném
   okně vypadá úplně jinak než černá na světlém.
   ========================================================================= */
.dm-led.is-sticker .dm-led-stage{background:#14181d;border-color:#232a31}

/* sklo: tmavé (výchozí) */
.dm-led.is-sticker .dm-led-scene{
  background:linear-gradient(168deg,#39424c 0%,#232a32 42%,#161b21 100%)}
/* sklo: světlé */
.dm-led.is-sticker .dm-led-stage.is-light .dm-led-scene{
  background:linear-gradient(168deg,#e9edf1 0%,#cfd6dd 45%,#b3bcc6 100%)}
/* odlesk oblohy přes sklo */
.dm-led.is-sticker .dm-led-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(114deg,transparent 34%,rgba(255,255,255,.13) 44%,rgba(255,255,255,.03) 52%,transparent 60%)}

/* plocha, na kterou je fólie nalepená — žádný rám ani stín panelu */
.dm-led.is-sticker .dm-led-panel{
  background:none;border:0;box-shadow:none;border-radius:0}
.dm-led.is-sticker .dm-led-panel::before{content:none}

/* samotná fólie: plná barva, bez záře; jemný stín = dojem nalepení na sklo */
.dm-led.is-sticker .dm-led-art{
  color:var(--dm-core,#fff);
  text-shadow:0 1px 2px rgba(0,0,0,.28)}
.dm-led.is-sticker .dm-led-ico{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
/* světlé sklo → stín změkčit, ať tmavá fólie nevypadá špinavě */
.dm-led.is-sticker .dm-led-stage.is-light .dm-led-art{text-shadow:0 1px 2px rgba(0,0,0,.16)}
.dm-led.is-sticker .dm-led-stage.is-light .dm-led-ico{filter:drop-shadow(0 1px 2px rgba(0,0,0,.16))}

/* Dlaždice fontů: stejný podklad jako sklo v náhledu. Bez toho by tmavá fólie
   byla na tmavé dlaždici nečitelná (JS přepíná .is-glass-light podle přepínače). */
.dm-led.is-sticker .dm-led-fonts button{background:#2b333c}
.dm-led.is-sticker.is-glass-light .dm-led-fonts button{background:#dfe4e9}
.dm-led.is-sticker .dm-led-fprev{color:var(--dm-core,#fff);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.dm-led.is-sticker.is-glass-light .dm-led-fprev{text-shadow:0 1px 2px rgba(0,0,0,.14)}

/* vzorník fólií: bílá potřebuje obrys, ať je na bílém pozadí vidět */
.dm-led.is-sticker .dm-led-colors button{background:#e8eaec}
.dm-led.is-sticker .dm-led-colors button span{box-shadow:inset 0 0 0 1px rgba(13,13,13,.16)}