/* mo-gallery.css: Styles for the enhanced gallery */


/* thumbnail ke arrow hide kare hain */

button.mo-thumb-scroll {
    display: none;
}

button.mo-big-arrow {
    background-color: transparent !important;
    font-size: 70px;
    box-shadow: inherit;
}

button.mo-big-arrow:hover {
	color: #ffffff !important;
}


/* Gallery container */
.mo-gallery-wrap { width:100%; margin: 0 auto; box-sizing: border-box; }

/* Big image area */
.mo-big-image-area { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.mo-big-image-area img#mo-big-image { display:block; width:100%; height: auto; max-height: 700px; object-fit: cover; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; cursor: pointer; }

.mo-big-image-area img {
	opacity: .8 !important;
}

button.mo-popup-close {
    background: transparent !important;
}

button.mo-popup-arrow {
    background: transparent !important;
    font-size: 60px;
}

button.mo-popup-close:hover, button.mo-popup-arrow:hover {
	color: #ffffff !important;
}


/* Big arrow buttons */
.mo-big-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:28px;
    line-height:0;
    text-align:center;
    cursor:pointer;
    z-index: 30;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.mo-big-prev { left: 14px; }
.mo-big-next { right: 14px; }

/* Thumbnail row wrapper and scroll arrows */
.mo-thumb-row-wrapper { display:flex; align-items:center; gap:10px; margin-top:14px; }
.mo-thumb-scroll { background: rgba(0,0,0,0.55); color:#fff; border:none; width:36px; height:36px; border-radius:50%; font-size:20px; cursor:pointer; line-height:0; }

/* Thumbnails row - single line with overflow */
.mo-thumb-row { overflow:hidden; flex: 1 1 auto; position:relative; z-index:9; top: -140px; }
.mo-thumb-track { display:flex; gap:10px; align-items:center; transition:transform .4s ease; justify-content: center; }
.mo-thumb { width:90px; height:90px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: transform .28s, border-color .2s; }
.mo-thumb:hover { transform: translateY(-4px); }
.mo-thumb.active { border-color: #c23087; transform: scale(1.02); }

/* Popup / lightbox */
.mo-gallery-popup { position:fixed; inset:0; background: rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; z-index:100000; }
.mo-popup-inner { position:relative; max-width:1100px; width:90%; }
.mo-popup-inner img#mo-popup-image { width:100%; height:auto; display:block; border-radius:8px; max-height:80vh; object-fit:contain; }
.mo-popup-close { position:absolute; top:-50px; right:-6px; background:transparent; color:#fff; border:none; font-size:44px; cursor:pointer; }
.mo-popup-arrow { position:absolute; top:50%; transform: translateY(-50%); background: rgba(0,0,0,0.55); color: #fff; border: none; width:56px; height:56px; border-radius:50%; font-size:30px; cursor:pointer; }
.mo-popup-prev { left: -70px; }
.mo-popup-next { right: -70px; }

/* Responsive tweaks */
@media(max-width:768px){
    .mo-thumb { width:90px; height:60px; }
    .mo-big-arrow { width:40px; height:40px; font-size:22px; line-height:40px; }
    .mo-popup-arrow { width:44px; height:44px; font-size:22px; left:6px; right:6px; }
}

/* Slide animation classes */
.mo-slide-in-left { animation: mo-slide-left .42s ease both; }
.mo-slide-in-right { animation: mo-slide-right .42s ease both; }

@keyframes mo-slide-left {
    from { transform: translateX(-20px); opacity:0; }
    to { transform: translateX(0); opacity:1; }
}
@keyframes mo-slide-right {
    from { transform: translateX(20px); opacity:0; }
    to { transform: translateX(0); opacity:1; }
}
@media screen and (max-width: 767px) {
	.mo-thumb-row {
		top: 0px;
	}
}