/* Casa Sobrado – Zoom no Lightbox do Element Pack */

/*
 * Mantém os controles sempre visíveis e dentro da área útil da tela.
 * O Element Pack/UIkit normalmente oculta ou desloca a barra superior;
 * estas regras anulam esse comportamento apenas no lightbox.
 */
.bdt-lightbox-panel .bdt-lightbox-toolbar {
    align-items: center !important;
    background: transparent !important;
    display: flex !important;
    gap: 10px;
    height: auto !important;
    justify-content: flex-end;
    left: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
    width: auto !important;
    z-index: 2147483646 !important;
}

/* Aparência compartilhada do botão de zoom e do botão de fechar. */
.bdt-lightbox-panel .cs-lightbox-zoom-button,
.bdt-lightbox-panel .bdt-lightbox-toolbar .bdt-close,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-bdt-close],
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-uk-close] {
    -webkit-appearance: none;
    align-items: center !important;
    appearance: none;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0;
    box-sizing: border-box;
    color: #84756f !important;
    cursor: pointer;
    display: inline-flex !important;
    flex: 0 0 40px;
    height: 40px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 40px !important;
    min-width: 40px !important;
    opacity: 1 !important;
    padding: 0 !important;
    position: relative;
    transform: none !important;
    transition: opacity .2s ease, background-color .2s ease !important;
    visibility: visible !important;
    width: 40px !important;
}

.bdt-lightbox-panel .cs-lightbox-zoom-button:hover,
.bdt-lightbox-panel .cs-lightbox-zoom-button:focus-visible,
.bdt-lightbox-panel .cs-lightbox-zoom-button.is-active,
.bdt-lightbox-panel .bdt-lightbox-toolbar .bdt-close:hover,
.bdt-lightbox-panel .bdt-lightbox-toolbar .bdt-close:focus-visible,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-bdt-close]:hover,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-bdt-close]:focus-visible,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-uk-close]:hover,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-uk-close]:focus-visible {
    background: #fff !important;
    color: #84756f !important;
    opacity: .88 !important;
}


.bdt-lightbox-panel .bdt-lightbox-toolbar .bdt-close svg,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-bdt-close] svg,
.bdt-lightbox-panel .bdt-lightbox-toolbar [data-uk-close] svg {
    color: #84756f !important;
    display: block;
    width: 16px !important;
    height: 16px !important;
    margin: auto !important;
    pointer-events: none;
    stroke: currentColor;
}

.bdt-lightbox-panel .cs-lightbox-zoom-button svg {
    color: #84756f !important;
    display: block;
    width: 22px !important;
    height: 22px !important;
    margin: auto !important;
    pointer-events: none;
    stroke: currentColor;
}

.bdt-lightbox-panel .cs-lightbox-zoom-button .cs-zoom-plus,
.bdt-lightbox-panel .cs-lightbox-zoom-button .cs-zoom-minus {
    transition: opacity .15s ease;
}

.bdt-lightbox-panel .cs-lightbox-zoom-button .cs-zoom-minus {
    opacity: 0;
}

.bdt-lightbox-panel .cs-lightbox-zoom-button.is-active .cs-zoom-plus {
    opacity: 0;
}

.bdt-lightbox-panel .cs-lightbox-zoom-button.is-active .cs-zoom-minus {
    opacity: 1;
}

.bdt-lightbox-panel .cs-lightbox-zoomable {
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.bdt-lightbox-panel .cs-lightbox-zoomed {
    cursor: grab;
    touch-action: none;
}

.bdt-lightbox-panel .cs-lightbox-dragging {
    cursor: grabbing;
}

.bdt-lightbox-panel .cs-lightbox-zoom-level {
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
    bottom: max(18px, env(safe-area-inset-bottom));
    color: #fff;
    font: 500 12px/1 Arial, sans-serif;
    left: 50%;
    opacity: 0;
    padding: 7px 10px;
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%) translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 2147483647;
}

.bdt-lightbox-panel .cs-lightbox-zoom-level.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 767px) {
    .bdt-lightbox-panel .bdt-lightbox-toolbar {
        gap: 8px;
        right: max(10px, env(safe-area-inset-right)) !important;
        top: max(10px, env(safe-area-inset-top)) !important;
    }
}