.masbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	display: flex;
	flex-direction: column;
	z-index: 99999999;
	overflow: visible;
	opacity: 0;
	transition: opacity 0.3s ease;

	&-inner {
		display: flex;
		flex-direction: column;
		max-width: 100vw;
		max-height: 100vh;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		@media screen and (max-width: 900px) {
			position: relative;
		}
	}


	&-toolbar,
	&-caption,
	&-pagination,
	&-thumbnails {
		flex-shrink: 0;
		padding: 12px;
		text-align: center;
		color: white;
	}

	&-loader {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 40px;
		margin: -20px 0 0 -20px; /* biar pas di tengah */
		border: 4px solid rgba(255, 255, 255, 0.3);
		border-top-color: white;
		border-radius: 50%;
		animation: masbox-spin 1s linear infinite;
		z-index: 9999;

	}

	@keyframes masbox-spin {
		0% {
		  transform: rotate(0deg);
		}
		100% {
		  transform: rotate(360deg);
		}
	}

  
	&-toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0 15px;
		background: transparent;
		position: relative;
		z-index: 99999;

		@media screen and (max-width: 900px) {
			position: unset;
		}

		&-group {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1 1 calc(33.333% - 1rem); 

			@media screen and (max-width: 900px) {
				gap: 8px;
			}

			&.left {
				justify-content: flex-start;

				@media screen and (max-width: 900px) {
					display: none;
				}
			}

			&.right {
				justify-content: flex-end;
			}
		}
		
		&-pagination {
			display: inline-block;
			white-space: nowrap;
			padding: 0 20px;
			font-family: "Lato", "Open Sans", "Helvetica Neue", "Segoe UI", sans-serif !important;
			font-size: 15px !important;
			font-weight: 400 !important;
			line-height: 1.5;
			color: #FFFFFF;
			text-align: center;
			text-decoration: none;
		}
	
		&-action {
			background: none;
			border: none;
			color: white;
			font-size: 1.2rem;
			cursor: pointer;
			width: 50px;
			height: 50px;
			transition: all .3s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(54, 54, 54, .45);
			
			@media screen and (max-width: 900px) {
				width: 30px;
				height: 30px;
			}

			&:hover {
				background: rgba(54, 54, 54, .85);
			}

			svg {
				width: 22px;
				height: 22px;
				stroke: currentcolor;
				stroke-width: 0;
				stroke-linecap: round;
				stroke-linejoin: round;
				pointer-events: none;
				transition: opacity 0.15s;

				&.fullscreen {
					fill: none;
					stroke: currentcolor;
					stroke-width: 2;
					stroke-linecap: round;
					stroke-linejoin: round;
				}
			}
		}
	}
  
	&-viewer {
		position: relative;
		width: 100%;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: visible;
		z-index: 20;
		transition: max-height 0.3s ease;
	}

	&-image {
		max-height: 100%;
		max-width: 100%;
		object-fit: contain;
		transition: opacity 0.3s ease, transform 0.3s ease;
		cursor: grab;
		user-select: none;
		position: relative;
		z-index: 25;
		opacity: 0;
		will-change: transform, opacity;
		// transform: scale(0.8);
		opacity: 1;

		&.is-fading-out {
			opacity: 0;
		}

		&-clone {
			position: fixed;
			object-fit: contain;
			transition: transform 0.5s ease, opacity 0.25s ease;
			transform-origin: center center;
			z-index: 9999;
			pointer-events: none;
		}
	}

	&-caption {
		font-family: "Lato", "Open Sans", "Helvetica Neue", "Segoe UI", sans-serif !important;
		padding: 20px;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.5;
		color: #FFFFFF;
		text-align: center;
		flex-shrink: 0;
		max-width: 700px;
		margin: 0 auto;
	}

	&-thumbnails {
		padding: 1rem;
		display: flex;
		justify-content: center;
		overflow-x: auto;
		border-top: 1px solid #222;
		gap: 0.5rem;
		flex-shrink: 0;

		transition: max-height 0.3s ease, opacity 0.3s ease;
		overflow: hidden;
		max-height: 120px;
		opacity: 1;

		&.is-hidden {
			max-height: 0;
			opacity: 0;
			pointer-events: none;
		}

	
		&-item {
			cursor: pointer;
			display: inline-block;
			width: 60px;
			height: 80px; 
			border-radius: 4px;
			opacity: 0.6;
			transition: opacity 0.3s ease, width 0.3s ease;
	
			&.active {
				opacity: 1;
				width: 100px;
			}
		
			&:hover {
				opacity: 0.9;
			}
		
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				border-radius: 4px; // Optional: biar img juga rounded
				display: block;
			}
		}
	}

	&-navigation {
		padding: 0 30px;
		position: absolute;
		width: 100%;
		box-sizing: border-box;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		pointer-events: auto;
		transition: opacity 0.3s ease;
		z-index: 9999;

		button {
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(54, 54, 54, .65);
			width: 50px;
			height: 50px;
			border-radius: 50px;
			border: none;
			color: #FFFFFF;
		}
	}

	&-dropdown {
		position: relative;

		@media screen and (max-width: 900px) {
			position: unset;
		}

		&-menu {
			position: absolute;
			top: 110%;
			right: 0;
			background: #fff;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
			border-radius: 0.5rem;
			overflow: hidden;
			padding: 0;
			z-index: 999;
			width: max-content;
			min-width: 220px;
			display: flex;
			flex-direction: column;
			animation: fadeIn 0.25s ease forwards;

			@media screen and (max-width: 900px) {
				top: auto;
				bottom: 0;
				width: 100%;
				border-radius: 0;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				padding-top: 10px;
			}

			&__item {
				cursor: pointer;
				width: 100%;
				border: none;
				display: flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0.6rem 1rem;
				color: #333;
				font-size: 0.95rem;
				transition: background 0.2s ease;
				background: #FFFFFF;

				@media screen and (max-width: 900px) {
					padding: 15px 20px;
					border-bottom: 1px solid #E5E5E5;

					&:last-child {
						border-bottom: none;
					}
				}
	
				svg {
					width: 18px;
					height: 18px;
					flex-shrink: 0;
				}
	
				&:hover {
					background: #f0f0f0;
				}
			}
			
			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(5px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
		}
	}

	&-has-icon {
		position: relative;
		display: block;

		.masbox-zoom-icon {
			position: absolute;
			bottom: 8px;
			right: 8px;
			background: rgba(0, 0, 0, 0.6);
			color: #fff;
			border-radius: 4px;
			padding: 4px;
			z-index: 5;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.2s ease;

			svg {
				display: block;
			}
		}

		&:hover .masbox-zoom-icon {
			opacity: 1 !important;
		}
	}

	&.masbox--open {
		opacity: 1;

		.masbox-image {
			opacity: 1;
		}
	}
}