/* dsh-lightbox.css - looks of the photo viewer (assets/js/dsh-lightbox.js) + review thumbnails / review form helpers. */

html.dsh-lb-open, html.dsh-lb-open body { overflow: hidden; }

.dsh-lb {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(8, 10, 16, calc(0.93 * var(--dsh-lb-dim, 1)));
    opacity: 0; transition: opacity .2s ease;
    -webkit-tap-highlight-color: transparent;
    color: #fff; font-family: inherit;
}
.dsh-lb[hidden] { display: none !important; }
.dsh-lb.is-open { opacity: 1; }

.dsh-lb-stage {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in;
}
.dsh-lb.is-zoomed .dsh-lb-stage { cursor: grab; }
.dsh-lb-slide { display: flex; align-items: center; justify-content: center; transition: transform .24s ease, opacity .24s ease; }
.dsh-lb-slide.is-enter-next { transform: translateX(56px); opacity: 0; transition: none; }
.dsh-lb-slide.is-enter-prev { transform: translateX(-56px); opacity: 0; transition: none; }
.dsh-lb-slide.is-loading { opacity: .35; }
.dsh-lb-img {
    display: block; object-fit: contain; border-radius: 8px; background: #11131a;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px);
    will-change: transform; transform-origin: 50% 50%; -webkit-user-drag: none;
}
.dsh-lb-img:not([src]) { visibility: hidden; }

.dsh-lb-spin {
    display: none; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: dsh-lb-turn .8s linear infinite;
}
@keyframes dsh-lb-turn { to { transform: rotate(360deg); } }
.dsh-lb-err { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 80%; text-align: center; padding: .8rem 1.2rem; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: .95rem; }

.dsh-lb-btn {
    position: absolute; z-index: 3; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dsh-lb-btn:hover { background: rgba(255, 255, 255, .3); }
.dsh-lb-btn:focus-visible, .dsh-lb-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dsh-lb-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); font-size: 34px; }
.dsh-lb-prev, .dsh-lb-next { top: 50%; margin-top: -23px; padding-bottom: 4px; }
.dsh-lb-prev { left: max(10px, env(safe-area-inset-left)); }
.dsh-lb-next { right: max(10px, env(safe-area-inset-right)); }
.dsh-lb.is-single .dsh-lb-prev, .dsh-lb.is-single .dsh-lb-next, .dsh-lb.is-single .dsh-lb-dots { display: none; }

.dsh-lb-count {
    position: absolute; z-index: 3; top: max(18px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left));
    padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.dsh-lb-count:empty { display: none; }
.dsh-lb-cap {
    display: none; position: absolute; z-index: 3; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 34px); transform: translateX(-50%);
    max-width: min(90vw, 640px); padding: .35rem .9rem; border-radius: 999px; background: rgba(0, 0, 0, .5); font-size: .88rem; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.dsh-lb-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 4px; }
.dsh-lb-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dsh-lb-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: transform .15s ease, background .15s ease; }
.dsh-lb-dot.on::before { background: #fff; transform: scale(1.3); }

@media (max-width: 600px) {
    .dsh-lb-btn { width: 42px; height: 42px; }
    .dsh-lb-prev, .dsh-lb-next { margin-top: -21px; background: rgba(255, 255, 255, .22); }
    .dsh-lb-img { max-width: 100vw; border-radius: 0; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
}
@media (prefers-reduced-motion: reduce) {
    .dsh-lb, .dsh-lb-slide, .dsh-lb-btn, .dsh-lb-dot::before { transition: none !important; }
    .dsh-lb-spin { animation-duration: 2s; }
}

/* ---- review photos on the homepage slider (index.php) ---- */
.review-images-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; position: relative; z-index: 100; }
.review-thumb { display: block; width: 50px; height: 50px; border-radius: 6px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--border-color, #334155); flex: 0 0 auto; }
.review-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.review-thumb:hover img, .review-thumb:focus-visible img { transform: scale(1.1); }
.review-thumb:focus-visible { outline: 2px solid var(--accent-premium, #3b82f6); outline-offset: 2px; }

/* ---- review form helpers ---- */
.review-counter { text-align: right; font-size: .78rem; opacity: .7; margin: 0 0 10px; }
.review-counter.is-low { color: #f59e0b; opacity: 1; }
.review-help { font-size: .8rem; line-height: 1.4; opacity: .75; margin: 0 0 10px; }
.review-help i { margin-right: .35rem; }
#image-previews .preview-wrapper img { cursor: zoom-in; }