/* Shared gallery lightbox styles — used by hotel_detail.html, hotel_vetrina.html
   (also included as a subset in static/css/hotel-detail.css). */
.gallery-lightbox .modal-content { background: rgba(0,0,0,0.95); border: none; border-radius: 0; }
/* overflow-y:hidden overrides Bootstrap modal-fullscreen (overflow-y:auto) — prevents iOS scroll
   container from swallowing tap events on buttons (arrows + X). Content fits within 85vh anyway. */
.gallery-lightbox .modal-body { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 0; overflow-y: hidden; -webkit-overflow-scrolling: auto; }
.gallery-lightbox .modal-body img { max-height: 85vh; max-width: 100%; object-fit: contain; }
.gallery-lightbox .btn-close { position: absolute; top: 15px; right: 15px; z-index: 100; filter: invert(1); opacity: 0.8; touch-action: manipulation; }
.gallery-lightbox .btn-close:hover { opacity: 1; }
.gallery-lightbox .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: white; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(4px); z-index: 100; touch-action: manipulation; }
.gallery-lightbox .gallery-nav:hover { background: rgba(255,255,255,0.3); }
.gallery-lightbox .gallery-nav.prev { left: 15px; }
.gallery-lightbox .gallery-nav.next { right: 15px; }
.gallery-lightbox .gallery-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 500; }
.gallery-lightbox .gallery-thumbnails { display: flex; gap: 4px; justify-content: center; padding: 12px 0; overflow-x: auto; }
.gallery-lightbox .gallery-thumbnails img { width: 60px; height: 40px; object-fit: cover; border-radius: 4px; opacity: 0.5; cursor: pointer; transition: opacity 0.2s; }
.gallery-lightbox .gallery-thumbnails img.active { opacity: 1; outline: 2px solid white; }


/* ============================================================
   Gallery v2 (.gallery-lb__*) — estratte da hotel-detail.css il
   2026-08-01 perche' il partial condiviso _gallery_lightbox.html e'
   usato anche FUORI dalle pagine hotel (viaggi detail, vetrina):
   senza queste regole la gallery esce smembrata. Le pagine hotel le
   caricano due volte (identiche): innocuo.
   ============================================================ */
.gallery-lightbox--v2 .modal-content {
    background: #f8f9fa;
    color: #1a1f2e;
    border: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gallery-lightbox--v2 .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100vh;
}

/* TOP BAR */
.gallery-lb__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}
.gallery-lb__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e9ecef;
    color: var(--primary, #1e3c72);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.gallery-lb__back:hover { background: #f1f3f5; }
.gallery-lb__counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary, #1e3c72);
}
.gallery-lb__counter-num { color: var(--accent, #f5a623); font-size: 20px; }
.gallery-lb__counter-sep, .gallery-lb__counter-total { color: var(--primary, #1e3c72); }
.gallery-lb__counter-cat { color: var(--primary, #1e3c72); font-size: 15px; font-weight: 600; margin-left: 4px; }
.gallery-lb__actions { display: inline-flex; align-items: center; gap: 10px; }
.gallery-lb__heart,
.gallery-lb__play,
.gallery-lb__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e9ecef;
    background: #fff;
    color: var(--primary, #1e3c72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background .15s;
}
.gallery-lb__heart:hover, .gallery-lb__play:hover, .gallery-lb__close:hover { background: #f1f3f5; }
.gallery-lb__heart.is-active { color: #e74c3c; }
.gallery-lb__play-dot {
    width: 12px;
    height: 12px;
    background: var(--primary, #1e3c72);
    border-radius: 50%;
}
.gallery-lb__play.is-playing .gallery-lb__play-dot { background: var(--accent, #f5a623); }
/* IMAGE STAGE */
.gallery-lb__stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    padding: 24px;
    min-height: 0;
    overflow: hidden;
}
.gallery-lb__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.gallery-lb__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    color: var(--primary, #1e3c72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    transition: background .15s, transform .15s;
    z-index: 5;
}
.gallery-lb__nav:hover { background: #f1f3f5; transform: translateY(-50%) scale(1.06); }
.gallery-lb__nav--prev { left: 18px; }
.gallery-lb__nav--next { right: 18px; }
/* INFO BAR */
.gallery-lb__info {
    background: #fff;
    border-top: 1px solid #e9ecef;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}
.gallery-lb__info-text { flex: 1 1 auto; min-width: 0; }
.gallery-lb__category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245, 166, 35, 0.12);
    color: var(--price-amber, #e08b1a);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.gallery-lb__category i { font-size: 11px; }
.gallery-lb__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary, #1e3c72);
    margin: 0 0 4px;
    line-height: 1.25;
}
.gallery-lb__desc {
    font-size: 14px;
    color: #4a5568;
    margin: 0;
    line-height: 1.4;
}
.gallery-lb__cta-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.gallery-lb__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--primary, #1e3c72);
    border: 1px solid #e9ecef;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.gallery-lb__save:hover { background: #f1f3f5; }
.gallery-lb__verify {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent, #f5a623);
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}
.gallery-lb__verify:hover { background: var(--accent-hover, #e09000); color: #fff; }
/* THUMBNAILS STRIP */
.gallery-lb__thumbs {
    background: #fff;
    border-top: 1px solid #e9ecef;
    padding: 14px 24px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    flex-shrink: 0;
}
.gallery-lb__thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.gallery-lb__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-lb__thumb:hover { transform: translateY(-1px); }
.gallery-lb__thumb.is-active {
    border-color: var(--accent, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.18);
}
@media (max-width: 767.98px) {
.gallery-lb__topbar {
        padding: 12px 14px;
        gap: 8px;
    }
.gallery-lb__back { padding: 6px 10px; font-size: 13px; }
.gallery-lb__back-label { display: none; }
.gallery-lb__counter { font-size: 16px; }
.gallery-lb__counter-num { font-size: 17px; }
.gallery-lb__counter-cat { display: none; }
.gallery-lb__close, .gallery-lb__play { display: none !important; }
.gallery-lb__heart { width: 36px; height: 36px; }
.gallery-lb__stage { padding: 0; aspect-ratio: 4 / 3; flex: 0 0 auto; }
.gallery-lb__stage img { border-radius: 0; }
.gallery-lb__nav {
        width: 38px;
        height: 38px;
        font-size: 18px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    }
.gallery-lb__nav--prev { left: 10px; }
.gallery-lb__nav--next { right: 10px; }
.gallery-lb__info {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px;
    }
.gallery-lb__title { font-size: 19px; }
.gallery-lb__desc { font-size: 13.5px; }
.gallery-lb__cta-group { width: 100%; }
.gallery-lb__verify { width: 100%; justify-content: center; padding: 14px 18px; }
.gallery-lb__thumbs { padding: 10px 12px; gap: 6px; }
.gallery-lb__thumb { width: 64px; height: 42px; border-radius: 6px; }
}