/* BookMySafar – photo & video carousel and full-screen viewer (see Content/js/bms-gallery.js).
   Shared by the public site and the admin panel, so it only uses its own .bmsg- classes. */

.bmsg-car, .bmsg-lb {
    --bmsg-accent: var(--bms-ticket, #FFC21A);
    --bmsg-ink: var(--bms-ink, #14203B);
    --bmsg-radius: var(--bms-radius, 16px);
}

/* ---------------------------------------------------------------- thumbnails */
.bmsg-thumb { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #1d2740; }
.bmsg-thumb img, .bmsg-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bmsg-thumb.is-video:not(:has(img)):not(:has(video)) { background: linear-gradient(135deg, #1d2740, #0A7279); }
.bmsg-play {
    position: absolute; top: 50%; left: 50%; width: 30%; max-width: 72px; min-width: 26px; aspect-ratio: 1;
    transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .92); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
.bmsg-play svg { width: 46%; height: 46%; fill: var(--bmsg-ink); margin-inline-start: 8%; }

/* ------------------------------------------------------------------ carousel */
.bmsg-car { margin: 0 0 30px; }
.bmsg-car__viewport { position: relative; border-radius: var(--bmsg-radius); overflow: hidden; background: #0f1628; }
.bmsg-car .bmsg-car__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    width: 100%; scrollbar-width: none; overscroll-behavior-x: contain; aspect-ratio: 16 / 9; max-height: 560px; outline: none;
}
.bmsg-car__track::-webkit-scrollbar { display: none; }
.bmsg-car__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.bmsg-car__track.is-dragging * { pointer-events: none; }
.bmsg-car__track:focus-visible { box-shadow: inset 0 0 0 3px var(--bmsg-accent); }
.bmsg-car__slide {
    position: relative; flex: 0 0 100%; width: 100%; height: 100%; padding: 0; margin: 0; border: 0;
    scroll-snap-align: start; scroll-snap-stop: always; background: #0f1628; cursor: zoom-in; display: block;
}
.bmsg-car__slide.is-video { cursor: pointer; }
.bmsg-car__slide img, .bmsg-car__slide video { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.bmsg-car__slide .bmsg-play { width: 84px; max-width: none; }
.bmsg-car__slide:hover .bmsg-play { transform: translate(-50%, -50%) scale(1.08); }
.bmsg-car__slide:focus-visible { outline: 3px solid var(--bmsg-accent); outline-offset: -3px; }

.bmsg-car__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .92); color: var(--bmsg-ink); display: grid; place-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25); cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s;
}
.bmsg-car__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bmsg-car__nav.is-prev { left: 16px; }
.bmsg-car__nav.is-next { right: 16px; }
.bmsg-car__nav:hover { transform: translateY(-50%) scale(1.06); }
.bmsg-car__viewport:hover .bmsg-car__nav, .bmsg-car__nav:focus-visible { opacity: 1; }
.bmsg-car__nav:focus-visible { outline: 3px solid var(--bmsg-accent); }

.bmsg-car__pill {
    position: absolute; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
    border-radius: 30px; background: rgba(15, 22, 40, .72); color: #fff; font-size: 13px; font-weight: 600;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; line-height: 1.2;
}
.bmsg-car__pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bmsg-car__pill.is-count { left: 16px; }
.bmsg-car__pill.is-zoom { right: 16px; }

.bmsg-car__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 6px; scroll-behavior: smooth; }
.bmsg-car__thumb {
    flex: 0 0 104px; height: 70px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
    opacity: .6; transition: opacity .2s, box-shadow .2s; background: #ddd; position: relative;
}
.bmsg-car__thumb .bmsg-play { width: 28px; }
.bmsg-car__thumb:hover { opacity: .9; }
.bmsg-car__thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px var(--bmsg-accent); }
.bmsg-car__thumb:focus-visible { outline: 3px solid var(--bmsg-accent); outline-offset: 2px; }

@media (hover: none) { .bmsg-car__nav { opacity: 1; width: 38px; height: 38px; } }
@media (max-width: 640px) {
    .bmsg-car__viewport { border-radius: 12px; }
    .bmsg-car .bmsg-car__track { aspect-ratio: 4 / 3; }
    .bmsg-car__nav { display: none; }
    .bmsg-car__thumb { flex-basis: 76px; height: 54px; }
    .bmsg-car__slide .bmsg-play { width: 64px; }
}

/* -------------------------------------------------------------------- viewer */
html.bmsg-locked, html.bmsg-locked body { overflow: hidden; }
.bmsg-lb {
    position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    background: #080c16; color: #fff; font-family: inherit; animation: bmsg-in .2s ease;
}
.bmsg-lb[hidden] { display: none; }
@keyframes bmsg-in { from { opacity: 0; } to { opacity: 1; } }

.bmsg-lb__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; min-height: 64px; }
.bmsg-lb__count { font-weight: 700; font-size: 15px; letter-spacing: .02em; min-width: 56px; font-variant-numeric: tabular-nums; }
.bmsg-lb__caption { flex: 1; min-width: 0; font-size: 14px; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmsg-lb__tools, .bmsg-lb__zoom { display: flex; align-items: center; gap: 6px; }
.bmsg-lb__zoom[hidden] { display: none; }
.bmsg-lb__btn {
    width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff;
    display: grid; place-items: center; cursor: pointer; transition: background .2s;
}
.bmsg-lb__btn:hover { background: rgba(255, 255, 255, .2); }
.bmsg-lb__btn:focus-visible, .bmsg-lb__nav:focus-visible, .bmsg-lb__thumb:focus-visible { outline: 3px solid var(--bmsg-accent); outline-offset: 2px; }
.bmsg-lb__btn svg, .bmsg-lb__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bmsg-lb__close { margin-inline-start: 6px; background: rgba(255, 255, 255, .16); }

.bmsg-lb__stage { position: relative; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; user-select: none; }
.bmsg-lb__media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 72px; box-sizing: border-box; }
.bmsg-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; cursor: zoom-in; -webkit-user-drag: none; border-radius: 4px; }
.bmsg-lb.is-zoomed .bmsg-lb__img { cursor: grab; border-radius: 0; }
.bmsg-lb.is-zoomed .bmsg-lb__img:active { cursor: grabbing; }
.bmsg-lb__video { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; outline: none; }
.bmsg-lb__frame { width: min(100%, calc((100vh - 220px) * 16 / 9)); aspect-ratio: 16 / 9; }
.bmsg-lb__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #000; }

.bmsg-lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; z-index: 2;
}
.bmsg-lb__nav:hover { background: rgba(255, 255, 255, .24); }
.bmsg-lb__nav.is-prev { left: 12px; }
.bmsg-lb__nav.is-next { right: 12px; }
.bmsg-lb__nav[hidden] { display: none; }
.bmsg-lb.is-zoomed .bmsg-lb__nav { opacity: .25; }
html[dir="rtl"] .bmsg-lb__nav.is-prev { left: auto; right: 12px; }
html[dir="rtl"] .bmsg-lb__nav.is-next { right: auto; left: 12px; }
html[dir="rtl"] .bmsg-lb__nav svg { transform: scaleX(-1); }

.bmsg-lb__thumbs { display: flex; gap: 8px; padding: 12px 16px 16px; overflow-x: auto; justify-content: safe center; scrollbar-width: thin; }
.bmsg-lb__thumbs[hidden] { display: none; }
.bmsg-lb__thumb { flex: 0 0 76px; height: 54px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .45; transition: opacity .2s, box-shadow .2s; background: #1d2740; }
.bmsg-lb__thumb .bmsg-play { width: 22px; min-width: 22px; }
.bmsg-lb__thumb:hover { opacity: .85; }
.bmsg-lb__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--bmsg-accent); }

@media (max-width: 640px) {
    .bmsg-lb__bar { padding: 8px 10px; gap: 8px; min-height: 56px; }
    .bmsg-lb__caption { display: none; }
    .bmsg-lb__btn { width: 38px; height: 38px; }
    .bmsg-lb__media { padding: 0; }
    .bmsg-lb__nav { display: none; }
    .bmsg-lb__frame { width: 100%; }
    .bmsg-lb__thumb { flex-basis: 60px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .bmsg-lb, .bmsg-car__track, .bmsg-car__thumbs { animation: none; scroll-behavior: auto; }
}