/*
 * Property photo gallery and full-screen viewer (resources/views/search/property.blade.php,
 * public/js/gallery.js). Replaces the theme's owl carousel pair .room-detail_img/.room-detail_thumbs;
 * sizes and colours follow those rules in style.css.
 */
.mc-gallery { position: relative; margin-top: 45px; }

.mc-gallery__stage { position: relative; overflow: hidden; background: #f1f1f1; border: 1px solid #d4d4d4; aspect-ratio: 4 / 3; }
.mc-gallery__open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.mc-gallery__img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Same caption bar as .room-detail_img .room_img-item h6 */
.mc-gallery__stage h6, .mc-gallery__caption { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 15px 20px; font-size: 13px; color: #fff; background-color: rgba(51, 51, 51, 0.6); pointer-events: none; }
.mc-gallery__count { position: absolute; top: 10px; right: 10px; padding: 3px 9px; font-size: 12px; line-height: 18px; color: #fff; background: rgba(35, 35, 35, 0.7); border-radius: 2px; pointer-events: none; }

.mc-gallery__nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; color: #fff; background: rgba(35, 35, 35, 0.6); font-size: 16px; cursor: pointer; transition: background-color .2s; }
.mc-gallery__nav:hover, .mc-gallery__nav:focus-visible { background: #F95700; }
.mc-gallery__nav--prev { left: 0; }
.mc-gallery__nav--next { right: 0; }

/* Thumbnail strip: scrolls sideways inside itself, never the page */
.mc-gallery__thumbs { display: flex; gap: 10px; margin: 10px 0 0; padding: 0 0 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.mc-gallery__thumbs li { flex: 0 0 auto; scroll-snap-align: start; }
.mc-gallery__thumb { display: block; position: relative; width: 110px; aspect-ratio: 4 / 3; background: #f1f1f1; }
.mc-gallery__thumb img { display: block; width: 100% !important; height: 100%; object-fit: cover; }
.mc-gallery__thumb::before { content: ''; position: absolute; inset: 0; z-index: 1; border: 4px solid transparent; pointer-events: none; transition: border-color .3s; }
.mc-gallery__thumb:hover::before, .mc-gallery__thumb:focus-visible::before, .mc-gallery__thumb.is-active::before { border-color: #F95700; }
@media (max-width: 479px) {
    .mc-gallery { margin-top: 30px; }
    .mc-gallery__thumb { width: 84px; }
    .mc-gallery__stage h6, .mc-gallery__caption { padding: 10px 12px; font-size: 12px; }
}

/* Full-screen viewer */
.mc-lightbox { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: #111; color: #fff; touch-action: none; -webkit-user-select: none; user-select: none; }
.mc-lightbox[hidden] { display: none; }
.mc-lightbox__bar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 6px 6px 6px 16px; font-size: 14px; }
.mc-lightbox__count { font-variant-numeric: tabular-nums; }
.mc-lightbox__stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mc-lightbox__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none !important; object-fit: contain; transition: transform .25s ease-out, opacity .2s; will-change: transform; }
.mc-lightbox__img.is-dragging { transition: none; }
.mc-lightbox__caption { flex: 0 0 auto; margin: 0; padding: 8px 16px 14px; font-size: 13px; line-height: 1.4; text-align: center; color: #ddd; }
.mc-lightbox button { width: 48px; height: 48px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 22px; cursor: pointer; }
.mc-lightbox button:hover, .mc-lightbox button:focus-visible { color: #F95700; }
.mc-lightbox__close { font-size: 34px !important; line-height: 1; }
.mc-lightbox__nav { position: absolute; top: 50%; margin-top: -24px; z-index: 1; background: rgba(0, 0, 0, 0.35) !important; }
.mc-lightbox__nav--prev { left: 8px; }
.mc-lightbox__nav--next { right: 8px; }
/* Phones swipe; the arrows would cover the photo */
@media (hover: none) and (pointer: coarse) { .mc-lightbox__nav { display: none; } }
html.mc-lightbox-open, html.mc-lightbox-open body { overflow: hidden; }