/* Ukázka SmartPubu (3. 11. 2026): snímek s očíslovanými ukazateli, vedle tip od postavičky a vysvětlivky, listuje se Další / Zpět */
.spd-otevreno, .spd-otevreno body { overflow: hidden; }
.spd { position: fixed; inset: 0; z-index: 2000; background: rgba(14, 18, 12, .82); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; }
.spd[hidden] { display: none; }
.spd-panel { width: 100%; height: 100%; max-width: 1920px; background: #f6f7f1; color: #1f2a1a; border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); font-family: "Segoe UI", system-ui, sans-serif; }
.spd-hlava { display: flex; align-items: center; gap: 16px; padding: 12px 14px 10px 22px; border-bottom: 1px solid #e1e6d6; }
.spd-nazev { margin: 0; font-size: 15px; color: #5b6653; white-space: nowrap; }
.spd-nazev b { color: #1f2a1a; font-weight: 600; }
.spd-kap { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.spd-kap button { font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid #d8dfcb; background: #fff; color: #33402b; cursor: pointer; }
.spd-kap button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef2e6; font-size: 13px; }
.spd-kap button[aria-selected="true"] { background: #4a7d10; border-color: #4a7d10; color: #fff; }
.spd-kap button[aria-selected="true"] span { background: rgba(255, 255, 255, .22); }
.spd-zavrit { width: 42px; height: 42px; border-radius: 12px; border: 1px solid #d8dfcb; background: #fff; font: 400 26px/1 system-ui, sans-serif; color: #33402b; cursor: pointer; flex: none; }
.spd-telo { flex: 1; min-height: 0; display: flex; }
.spd-scena { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 14px; position: relative; }
.spd-ram { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(31, 42, 26, .16); }
.spd-ram[hidden] { display: none; }
.spd-ram img { display: block; width: 100%; height: 100%; border-radius: 12px; }
.spd-ram.spd-prechod img { animation: spd-prolnuti .45s ease-out; }
@keyframes spd-prolnuti { from { opacity: .3; } to { opacity: 1; } }
.spd-body { position: absolute; inset: 0; }
.spd-cislo { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: #e8590c; color: #fff; font: 700 14px/24px "Segoe UI", system-ui, sans-serif; text-align: center; cursor: default; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .15s; }
.spd-ram.spd-prechod .spd-cislo { animation: spd-cislo .4s ease-out backwards; }
.spd-cislo:nth-child(2) { animation-delay: .08s !important; } .spd-cislo:nth-child(3) { animation-delay: .16s !important; } .spd-cislo:nth-child(4) { animation-delay: .24s !important; }
.spd-cislo:nth-child(5) { animation-delay: .32s !important; } .spd-cislo:nth-child(6) { animation-delay: .4s !important; } .spd-cislo:nth-child(7) { animation-delay: .48s !important; } .spd-cislo:nth-child(8) { animation-delay: .56s !important; }
@keyframes spd-cislo { from { transform: scale(0); } to { transform: scale(1); } }
.spd-cislo.je { transform: scale(1.35); background: #4a7d10; z-index: 2; }
.spd-cislo:focus-visible, .spd-tl:focus-visible, .spd-kap button:focus-visible, .spd-zavrit:focus-visible { outline: 3px solid #9fd34a; outline-offset: 2px; }
.spd-bok { flex: none; width: 360px; overflow-y: auto; padding: 16px 18px 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.spd-bok[hidden] { display: none; }
.spd-krok { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #4a7d10; font-weight: 600; }
.spd-bok h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; text-wrap: balance; }
.spd-tip { display: flex; gap: 12px; align-items: flex-end; margin: 4px 0 6px; }
.spd-tip img { width: 64px; height: auto; flex: none; }
.spd-tip p { margin: 0; background: #fff; border: 1px solid #dde5cf; border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 14.5px; line-height: 1.45; color: #2f3a28; box-shadow: 0 2px 8px rgba(31, 42, 26, .08); }
.spd-seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spd-seznam li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #e6ebdc; font-size: 14px; line-height: 1.4; }
.spd-seznam li.je { border-color: #4a7d10; background: #eef5e4; }
.spd-c { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8590c; color: #fff; font-weight: 700; font-size: 13px; }
.spd-seznam li.je .spd-c { background: #4a7d10; }
.spd-seznam b { font-weight: 600; }
.spd-p { color: #4b5743; }
.spd-pata { display: flex; align-items: center; gap: 20px; padding: 10px 22px 14px; border-top: 1px solid #e1e6d6; background: #fff; }
.spd-pocet { flex: 1; margin: 0; font-size: 14px; color: #5b6653; }
.spd-ovl { display: flex; gap: 10px; flex: none; }
.spd-tl { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid #d8dfcb; background: #fff; color: #1f2a1a; font: 600 15px/1 "Segoe UI", system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.spd-tl:disabled { opacity: .4; cursor: default; }
.spd-tl--hl { background: #4a7d10; border-color: #4a7d10; color: #fff; min-width: 140px; }
.spd-pruh { height: 4px; background: #e6ecdd; } .spd-pruh i { display: block; height: 100%; width: 0; background: #4a7d10; transition: width .3s; }
.spd-konec { max-width: 640px; text-align: left; padding: 10px; }
.spd-konec[hidden] { display: none; }
.spd-konec-nad { margin: 0; color: #4a7d10; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.spd-konec h2 { margin: 6px 0 10px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; font-weight: 700; }
.spd-konec-text { margin: 0 0 16px; font-size: 17px; color: #4b5743; }
.spd-konec ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.spd-konec li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.4; } .spd-konec li b { color: #4a7d10; }
.spd-konec-tl { display: flex; gap: 10px; flex-wrap: wrap; }
/* shrnutí na telefonu: body pod sebou jako kartičky, tlačítka přes celou šířku */
@media (max-width: 560px) {
  .spd-konec { padding: 6px 16px 14px; box-sizing: border-box; width: 100%; }
  .spd-konec h2 { font-size: 26px; }
  .spd-konec-text { font-size: 16px; line-height: 1.45; }
  .spd-konec ul { gap: 8px; margin-bottom: 18px; }
  .spd-konec li { grid-template-columns: 1fr; gap: 2px; padding: 10px 14px; background: #fff; border: 1px solid #e1e6d6; border-left: 4px solid #4a7d10; border-radius: 10px; font-size: 15px; }
  .spd-konec li b { font-size: 15px; }
  .spd-konec-tl { flex-direction: column; }
  .spd-konec-tl .spd-tl { width: 100%; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .spd-ram.spd-prechod img, .spd-ram.spd-prechod .spd-cislo { animation: none; } }
/* užší obrazovka: vysvětlivky pod obrázkem */
@media (max-width: 1100px) {
  .spd-telo { flex-direction: column; overflow-y: auto; }
  .spd-scena { flex: none; }
  .spd-bok { width: auto; overflow: visible; padding: 0 16px 14px; }
}
@media (max-width: 760px) {
  .spd { padding: 0; }
  .spd-panel { border-radius: 0; }
  .spd-hlava { flex-wrap: wrap; padding: calc(8px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .spd-nazev { flex: 1; }
  .spd-kap { order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .spd-kap button { flex: none; min-height: 34px; font-size: 13px; }
  .spd-scena { padding: 8px 0; }
  .spd-ram, .spd-ram img { border-radius: 0; }
  .spd-cislo { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; line-height: 17px; border-width: 2px; }
  .spd-bok { padding: 0 max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px)); }
  .spd-pata { padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
  .spd-pocet { display: none; }
  .spd-ovl { flex: 1; } .spd-ovl .spd-tl { flex: 1; }
}
/* spouštěč ve stránce */
.spd-start { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(17, 23, 18, .2); cursor: pointer; border: 0; padding: 0; width: 100%; background: #fff; }
.spd-start img { display: block; width: 100%; height: auto; }
.spd-start span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #4a7d10; color: #fff; font: 700 18px/1 "Segoe UI", system-ui, sans-serif; padding: 18px 28px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); white-space: nowrap; }
.spd-start:hover span, .spd-start:focus-visible span { background: #3e6a0d; }
.spd-tl[hidden] { display: none; }