/**
 * ZSMH Lightbox — PhotoSwipe custom styles
 * Counter, caption, download button, mark button (used by single-udalosti.js)
 */

/* ── WP Admin bar offset (32px desktop, 46px mobile) ── */
.admin-bar .pswp {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .pswp {
        top: 46px;
    }
}

/* ── Counter: "obrazok X z Y" ── */
.zsmh-pswp-counter {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 12px;
    line-height: 50px;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

/* Skry native PhotoSwipe counter — máme vlastný custom-counter element
   so slovenským "obrázok X z Y" textom. Ak sú obidva, vznikne duplicate. */
.pswp__counter {
    display: none !important;
}

/* ── Caption (below image) ──
   z-index: 5 → nad PhotoSwipe slide (z-index 1), pod top-bar (z-index 10).
   Bez explicitného z-index Safari cap-tion vykreslí pod slide-om (Chrome
   poskytuje stacking cez DOM order — Safari má prísnejšie stacking contexts).
*/
.zsmh-pswp-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    pointer-events: auto;
}

.zsmh-pswp-caption:empty {
    display: none;
}

/* Caption-num — pôvodne ukázal "(X/Y)" alebo "— foto X/Y" duplicate s
   .zsmh-pswp-counter v toolbar. Skryté aby user nevidel rovnaký údaj 2×. */
.zsmh-pswp-caption-num {
    display: none;
}

.zsmh-pswp-caption-code {
    font-family: monospace;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 8px;
    border-radius: 3px;
}

/* ── Mark flash overlay (brief feedback when toggling selection) ── */
.zsmh-pswp-mark-flash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.zsmh-pswp-mark-flash.is-visible {
    opacity: 1;
}

.zsmh-pswp-mark-flash svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* Persistent subtle badge on marked photos */
.zsmh-pswp-marked-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(78, 203, 113, 0.85);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zsmh-pswp-marked-badge.is-visible {
    opacity: 1;
}

.zsmh-pswp-marked-badge svg {
    width: 14px;
    height: 14px;
}

/* ── PhotoSwipe button override — eliminuje hover odskočenie ── */
/* PhotoSwipe default mení opacity 0.85→1 a resetuje padding na hover,
   čo spôsobuje sub-pixel posun textu. Fixujeme tu aby prežilo update. */
.pswp__button--download-button,
.pswp__button--mark-button,
.pswp__button--submit-button,
.pswp__button--info-button,
.pswp__button--download-button:hover,
.pswp__button--download-button:active,
.pswp__button--download-button:focus,
.pswp__button--mark-button:hover,
.pswp__button--mark-button:active,
.pswp__button--mark-button:focus,
.pswp__button--submit-button:hover,
.pswp__button--submit-button:active,
.pswp__button--submit-button:focus,
.pswp__button--info-button:hover,
.pswp__button--info-button:active,
.pswp__button--info-button:focus {
    opacity: 1;
    padding: 0 14px;
    overflow: visible;
    width: auto;
    display: flex;
    align-items: center;
    transition: none;
}

/* ── Download button ── */
.pswp__button--download-button {
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pswp__button--download-button:hover {
    color: #fff;
}

.pswp__button--download-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.zsmh-pswp-download-label {
    font-size: 13px;
    white-space: nowrap;
}

/* ZIP mode — keď sú označené fotky, download button sťahuje výber ako ZIP */
.pswp__button--download-button.is-zip-mode {
    color: #4ecb71;
}
.pswp__button--download-button.is-zip-mode:hover {
    color: #3dba60;
}

/* ── Mark/Select button (injected by single-udalosti.js) ── */
.pswp__button--mark-button {
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    border-radius: 20px;
}

.pswp__button--mark-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pswp__button--mark-button .zsmh-pswp-mark-label {
    font-size: 13px;
    white-space: nowrap;
    opacity: 1;
    position: static;
    margin-top: 0;
    padding: 0;
    background: none;
    color: inherit;
    pointer-events: none;
}

.pswp__button--mark-button:hover {
    color: #fff;
}

.pswp__button--mark-button.is-marked {
    color: #4ecb71;
}

.pswp__button--mark-button.is-marked:hover {
    color: #3dba60;
}

/* Mark count badge */
.zsmh-pswp-mark-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #e74c3c;
    border-radius: 9px;
    padding: 0 4px;
}

/* ── Submit button (injected by single-udalosti.js)
   Zobrazí sa LEN ak má používateľ označené fotky.
   Zatvorí lightbox a scrollne k formuláru pre odoslanie správcovi.
   Štýl: kompaktný kruh + count badge (konzistentný s mark/cart buttonmi). ── */
.pswp__button--submit-button {
    position: relative;
    justify-content: center;
    color: #fff;
    background: #f19e00;
    border-radius: 50%;
    margin-left: 4px;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
    align-self: center;
}

.pswp__button--submit-button:hover {
    background: #d68a00;
}

.pswp__button--submit-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Skryjeme staré text label — submit používa teraz count badge ako mark/cart. */
.zsmh-pswp-submit-label {
    display: none;
}

/* Submit count badge — modrý (rozlíšenie od mark červeného a cart zeleného). */
.zsmh-pswp-submit-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border-radius: 10px;
    padding: 0 5px;
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

/* ── Info button ── */
.pswp__button--info-button {
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
}

.pswp__button--info-button:hover {
    color: #fff;
}

.pswp__button--info-button.is-active {
    color: #f19e00;
}

.pswp__button--info-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.zsmh-pswp-info-label {
    font-size: 13px;
    white-space: nowrap;
}

/* ── Caption separator ── */
.zsmh-pswp-caption-sep {
    opacity: 0.4;
    margin: 0 4px;
}

/* ── Tablet/mobile (≤900px): labels skryté, len ikony aby sa zmestili. ── */
@media screen and (max-width: 900px) {
    .zsmh-pswp-download-label,
    .pswp__button--mark-button .zsmh-pswp-mark-label,
    .zsmh-pswp-submit-label,
    .zsmh-pswp-info-label {
        display: none;
    }
}

/* ── Mobile (≤600px): toolbar má veľa buttonov + close ×; menej dôležité
   buttons úplne skryjeme (download = redundantný keď je cart; info =
   málo používaný) aby × close button bol vždy plne viditeľný. ── */
@media screen and (max-width: 600px) {
    .pswp__button--info-button,
    .pswp__button--download-button {
        display: none !important;
    }
    .zsmh-pswp-counter {
        font-size: 12px;
        padding: 0 6px;
    }
}

/* ── Keyboard shortcut hint ── */
.zsmh-pswp-kbd-hint {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.zsmh-pswp-kbd-hint.is-visible {
    opacity: 1;
}

.zsmh-pswp-kbd-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 12px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    margin: 0 2px;
}
