/* Sharm Voyager Booking Engine 1.2.9 – gallery of excursions and hotels (photos + videos, full-screen viewer) */
.svg-play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(10, 25, 45, .62); box-shadow: 0 4px 18px rgba(0, 0, 0, .3); pointer-events: none; }
.svg-play::after { content: ""; position: absolute; left: 24px; top: 18px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.svg-play--s { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.svg-play--s::after { left: 12px; top: 9px; border-width: 6px 0 6px 10px; }
.svg-novid { display: block; width: 100%; height: 100%; min-height: 90px; background: linear-gradient(135deg, #0f2c4d, #1b6f8f); }
[data-sv-gallery] a { position: relative; }

/* excursion page: on smartphones the main photo with a row of thumbnails under it (instead of the main photo only) */
@media (max-width: 759px) {
  .svx-gallery.has-more[data-sv-gallery] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svx-gallery.has-more[data-sv-gallery] a:first-child { grid-column: 1 / -1; }
  .svx-gallery.has-more[data-sv-gallery] a:not(:first-child):not([hidden]) { display: block; }
  .svx-gallery.has-more[data-sv-gallery] a:not(:first-child) img { aspect-ratio: 4 / 3; }
  .svx-gallery.has-more[data-sv-gallery] a:not(:first-child) .svg-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .svx-gallery.has-more[data-sv-gallery] a:not(:first-child) .svg-play::after { left: 12px; top: 9px; border-width: 6px 0 6px 10px; }
  .svx-gallery.has-more[data-sv-gallery] .svx-gallery__count { display: none; }
}
/* hotel page */
.sv-gallery[data-sv-gallery] .sv-gallery-item { cursor: zoom-in; }
.sv-gallery[data-sv-gallery] .sv-gallery-item:not(.is-main) .svg-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.sv-gallery[data-sv-gallery] .sv-gallery-item:not(.is-main) .svg-play::after { left: 12px; top: 9px; border-width: 6px 0 6px 10px; }

/* viewer */
html.svg-lock, html.svg-lock body { overflow: hidden; }
.svg-lb { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; align-items: center; background: rgba(5, 13, 24, .96); color: #fff; }
.svg-lb.is-on { display: flex; }
.svg-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .4rem; width: 100%; padding: .6rem .8rem; }
.svg-n { flex: 1; font-size: .9rem; opacity: .85; font-variant-numeric: tabular-nums; }
.svg-btn { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.svg-btn:hover, .svg-btn:focus-visible { background: rgba(255, 255, 255, .28); outline: 2px solid #fd7a00; outline-offset: 2px; }
.svg-fs { font-size: 1.2rem; }
.svg-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 3.6rem; }
.svg-stage img, .svg-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #000; }
.svg-frame { width: min(100%, calc((100vh - 13rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.svg-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #000; }
.svg-cap { min-height: 1.4em; margin: .5rem 1rem 0; text-align: center; font-size: .92rem; opacity: .9; }
.svg-prev, .svg-next { position: absolute; top: 50%; margin-top: -23px; z-index: 2; }
.svg-prev { left: .5rem; }
.svg-next { right: .5rem; }
.svg-thumbs { display: flex; gap: .4rem; max-width: 100%; overflow-x: auto; padding: .6rem .8rem .8rem; scrollbar-width: thin; }
.svg-thumbs button { position: relative; flex: 0 0 auto; width: 76px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #1c2a3a; opacity: .65; cursor: pointer; }
.svg-thumbs button.is-on { border-color: #fd7a00; opacity: 1; }
.svg-thumbs button:hover { opacity: 1; }
.svg-thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .svg-stage { padding: 0 .3rem; }
  .svg-prev, .svg-next { width: 40px; height: 40px; margin-top: -20px; background: rgba(0, 0, 0, .35); }
  .svg-thumbs button { width: 60px; height: 42px; }
}