/**
 * 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;
}

/* ── Caption (below image) ── */
.zsmh-pswp-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    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));
}

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

.zsmh-pswp-caption-num {
    opacity: 0.5;
    font-size: 12px;
}

.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--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--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);
}

.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;
}

/* ── 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;
}

/* ── 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;
}

/* ── Mobile: len ikony, bez textu ── */
@media screen and (max-width: 600px) {
    .zsmh-pswp-download-label,
    .pswp__button--mark-button .zsmh-pswp-mark-label,
    .zsmh-pswp-info-label {
        display: none;
    }
}

/* ── 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;
}
