/* ============================================================
   SVÍČKY – LIŠTA NA WEBU (verze 1.3.0)
   ------------------------------------------------------------
   Memoriál, hrob z evidence a válečné místo (partials/candles.php,
   js/memorial-candles.js). Lišta přilepená ke spodní hraně: vlevo kdo
   zapálil a vzkaz (střídá se), vpravo plápolající svíčka u okraje
   karty. Při rolování dolů se zmenší na samotnou svíčku, nahoru nebo
   na konci stránky se rozbalí. Barvy z motivu memoriálu (--memorial-*),
   bez motivu původní šedá/zlatá. memorial.css se nemění.
   Zadání: ZADANI-svicky-notifikace-1.3.0.md, kap. 4.5.
   ============================================================ */

body.svk-on {
    /* místo pod obsahem = výška lišty + odstup + spodní okraj displeje */
    padding-bottom: calc(165px + env(safe-area-inset-bottom, 0px));
}

.svk, .svk-sheet {
    --svk-bg: var(--memorial-bg, #DEDEDE);
    --svk-accent: var(--memorial-accent, #a08453);   /* bez motivu: stará mosaz (tlumenější než zlato rámečků #c8a14f) */
    --svk-ink: #3d342b;
    --svk-muted: #7a6c5c;
}
.svk *, .svk-sheet *, .svk, .svk-sheet { box-sizing: border-box; }
.svk {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 140%);
    z-index: 900;
    /* přes obsah odsazená od okrajů karty, na konci memoriálu na celou šířku */
    width: calc(var(--svk-w, 38vw) - 2 * var(--svk-inset, 22px));
    max-width: calc(100vw - 24px);
    transition: transform .7s cubic-bezier(.2, .8, .2, 1), width .45s ease;
    font-family: 'Lora', serif;
    pointer-events: none;
}
.svk.is-in { transform: translate(-50%, 0); }
/* Po najetí už bez přechodu – kdyby se animace v prohlížeči zasekla
   (lišta zůstala dole a vyskočila až po posunu stránky), stoupne na místo. */
.svk.is-ready { transition: width .45s ease; }
.svk.is-end { --svk-inset: 0px; }

/* ── Pilulka ── */
.svk-pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    /* vpravo místo pro svíčku (stojí u okraje karty, i když je lišta odsazená) */
    padding: 0 calc(92px - var(--svk-inset, 22px)) 0 22px;
    border-radius: 30px;
    border: 1.5px solid color-mix(in srgb, var(--svk-accent) 70%, transparent);
    background: color-mix(in srgb, var(--svk-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 22px rgba(40, 30, 20, .18);
    cursor: pointer;
    margin-left: auto;
    width: 100%;
    color: var(--svk-ink);
    text-align: left;
    position: relative;
    transition: width .45s ease, padding .45s ease, background-color .45s ease,
                border-color .45s ease, box-shadow .45s ease;
}
.svk-text { flex: 1; min-width: 0; transition: opacity .3s ease; }
.svk-count {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--svk-muted);
    line-height: 1.2;
}
.svk-line {
    font-size: 15px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .6s ease;
}
/* Horní řádek: počet svíček vlevo, „+ Zapálit svíčku“ vpravo – aby
   návštěvník viděl, že se může připojit, i bez otevření seznamu. */
.svk-top { display: flex; align-items: center; gap: 8px; }
.svk-top .svk-count { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svk-add {
    flex: none;
    border: 0; padding: 3px 9px; margin: 0;
    border-radius: 20px;
    background: var(--svk-accent);
    color: #fff;
    font: inherit; font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.3;
    cursor: pointer;
}
.svk-add:hover { filter: brightness(1.08); }
.svk-mine .svk-add, .svk.is-empty .svk-add { display: none; }
@media (max-width: 600px) { .svk-add-dl { display: none; } }
.svk-line .svk-cta { color: var(--svk-accent); font-weight: 700; }
.svk-line .svk-msg { font-style: italic; color: var(--svk-muted); }
.svk-line.is-fading { opacity: 0; }
.svk-mine .svk-line { color: var(--svk-ink); font-weight: 700; }

/* Svíčka stojí na pravém konci lišty a přesahuje nad ni – není zavřená v rámečku. */
.svk-flame-box {
    /* u pravého okraje KARTY (ne pilulky), v mezeře mezi obsahem
       memoriálu a okrajem – na stejném místě při odsazené i plné liště */
    position: absolute; right: calc(3px - var(--svk-inset, 22px)); bottom: 6px;
    transition: right .45s ease;
    width: 66px; height: 134px;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(40, 30, 20, .22));
}
.svk-flame-box svg { width: 66px; height: 134px; overflow: visible; }

/* Zmenšená lišta – jen kolečko se svíčkou vpravo */
/* Zmenšená lišta – zůstane jen samotná svíčka, bez rámečku */
.svk.is-mini .svk-pill {
    width: 92px; padding: 0;
    background-color: transparent; border-color: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.svk.is-mini .svk-text { opacity: 0; }

/* Bez svíčky – kulaté tlačítko s nezapálenou svíčkou */
/* Bez svíčky – pilulka „Zapálit svíčku“ s nezapálenou svíčkou, vidět stále */
.svk.is-empty .svk-pill { width: auto; padding-left: 22px; }
.svk.is-empty .svk-count { display: none; }
.svk.is-empty .svk-line { font-weight: 700; }
.svk.is-empty .svk-lit { display: none; }
/* ── Svíčka (SVG) – animace plamene ── */
.svk-sway   { transform-origin: 80px 121px; animation: svk-sway 3.7s ease-in-out infinite; }
.svk-breath { transform-origin: 80px 121px; animation: svk-breathe 2.3s ease-in-out infinite; }
.svk-core   { transform-origin: 80px 119px; animation: svk-core 1.7s ease-in-out infinite; }
.svk-halo, .svk-waxlight { animation: svk-glow 3s ease-in-out infinite; }
.svk-lit { transition: opacity .9s ease; }
.svk-unlit .svk-lit { opacity: 0; }
@keyframes svk-sway { 0%,100%{transform:skewX(-2deg) scaleX(.98)} 19%{transform:skewX(1deg) scaleX(1.03)} 43%{transform:skewX(-3deg) scaleX(.96)} 67%{transform:skewX(2deg) scaleX(1.01)} 82%{transform:skewX(-.5deg) scaleX(.99)} }
@keyframes svk-breathe { 0%,100%{transform:scaleY(1)} 28%{transform:scaleY(.95)} 55%{transform:scaleY(1.035)} 78%{transform:scaleY(.985)} }
@keyframes svk-core { 0%,100%{opacity:.85;transform:scaleY(1)} 39%{opacity:.65;transform:scaleY(.94)} 73%{opacity:.95;transform:scaleY(1.03)} }
@keyframes svk-glow { 0%,100%{opacity:.8} 35%{opacity:.66} 68%{opacity:.92} }

/* ── Panel se seznamem a okno pro zapálení ── */
.svk-backdrop {
    position: fixed; inset: 0; z-index: 950;
    background: rgba(25, 20, 15, .38);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.svk-backdrop.is-open { opacity: 1; pointer-events: auto; }
.svk-sheet {
    position: fixed; left: 50%; bottom: 0; z-index: 960;
    width: var(--svk-w, 38vw); max-width: 100vw; max-height: 78vh;
    transform: translate(-50%, 105%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    background: var(--svk-bg);
    border: 1.5px solid var(--svk-accent); border-bottom: 0;
    border-radius: 26px 26px 0 0;
    padding: 10px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    font-family: 'Lora', serif; color: var(--svk-ink);
    display: flex; flex-direction: column;
    box-shadow: 0 -8px 30px rgba(40, 30, 20, .2);
}
.svk-sheet.is-open { transform: translate(-50%, 0); }
.svk-grab { width: 44px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--svk-ink) 25%, transparent); margin: 2px auto 12px; }
.svk-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.svk-head svg { width: 46px; height: 70px; overflow: visible; flex: 0 0 46px; }
.svk-title { font-family: 'Cormorant Garamond', 'Lora', serif; font-size: 24px; font-weight: 700; line-height: 1.15; }
.svk-sub { font-size: 13.5px; color: var(--svk-muted); }
.svk-list { overflow-y: auto; margin: 10px -6px; padding: 0 6px; }
.svk-item { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--svk-accent) 25%, transparent); }
.svk-item:last-child { border-bottom: 0; }
.svk-item-nm { font-weight: 700; }
.svk-item-msg { font-style: italic; color: var(--svk-muted); }
.svk-item-when { margin-left: auto; font-size: 12.5px; color: var(--svk-muted); white-space: nowrap; }
.svk-item.is-mine { background: color-mix(in srgb, var(--svk-accent) 12%, transparent); border-radius: 10px; padding: 10px 10px; margin: 2px -10px; border-bottom-color: transparent; }

.svk-btn {
    display: block; width: 100%; margin-top: 12px; padding: 14px 18px;
    border-radius: 26px; border: 0; cursor: pointer;
    background: var(--svk-accent); color: #fff;
    font-family: 'Lora', serif; font-size: 16px; font-weight: 700;
}
.svk-btn[disabled] { opacity: .55; cursor: default; }
.svk-note { font-size: 12.5px; color: var(--svk-muted); text-align: center; margin-top: 8px; }
.svk-link { background: none; border: 0; color: var(--svk-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; padding: 6px; }
.svk-back { display: block; margin: 6px auto 0; }

/* Položka seznamu: jméno + vzkaz, u hrobu s více osobami i pro koho */
.svk-item-main { min-width: 0; }
.svk-item-for { display: block; font-size: 12.5px; color: var(--svk-muted); margin-top: 2px; }

/* Počítač – QR kód stránky (naskenovat telefonem) */
.svk-pc { text-align: center; padding: 8px 0 4px; }
.svk-pc img { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 6px; }
.svk-pc p { font-size: 14px; color: var(--svk-ink); margin: 12px auto 10px; max-width: 360px; }
.svk-stores { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.svk-stores a, .svk-stores span { display: inline-flex; line-height: 0; }
.svk-stores img { height: 42px; width: auto; display: block; }
.svk[hidden] { display: none; }

@media (max-width: 1200px) { .svk, .svk-sheet { --svk-w: 60vw; } }
@media (max-width: 992px)  { .svk, .svk-sheet { --svk-w: 80vw; } }
@media (max-width: 600px)  { .svk, .svk-sheet { --svk-w: calc(100vw - 20px); } .svk-sheet { width: 100vw; } }

@media (prefers-reduced-motion: reduce) {
    .svk-sway, .svk-breath, .svk-core, .svk-halo, .svk-waxlight { animation: none; }
    .svk, .svk-sheet, .svk-pill, .svk-line { transition: none; }
}

/* ── Zapálení na webu: jméno, vzkaz, doklad, platba (GoPay) ── */
.svk-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.svk-form { margin-top: 6px; }
.svk-label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; color: var(--svk-ink); }
.svk-input {
    width: 100%; padding: 11px 14px; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--svk-accent) 50%, transparent);
    background: rgba(255, 255, 255, .55); color: var(--svk-ink);
    font: inherit; font-size: 16px;
}
.svk-input:focus { outline: 2px solid color-mix(in srgb, var(--svk-accent) 60%, transparent); outline-offset: 1px; }
.svk-hint { font-size: 12.5px; color: var(--svk-muted); margin-top: 5px; line-height: 1.35; }
.svk-hint.is-err { color: #8a3a3a; }
.svk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svk-chip {
    border: 1.5px solid var(--svk-accent); border-radius: 20px; background: transparent;
    padding: 6px 12px; font: inherit; font-size: 14px; color: var(--svk-ink); cursor: pointer;
}
.svk-chip.is-on { background: var(--svk-accent); color: #fff; font-weight: 700; }
.svk-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; cursor: pointer; }
.svk-check input { width: 18px; height: 18px; accent-color: var(--svk-accent); }
.svk-email[hidden], .svk-err[hidden] { display: none; }
.svk-err { margin-top: 12px; font-size: 14px; color: #8a3a3a; text-align: center; }
.svk-err .svk-link { color: var(--svk-accent); }
.svk-apps { text-align: center; font-size: 13px; color: var(--svk-muted); margin-top: 14px; }
.svk-apps a { color: var(--svk-muted); }