/**
 * Elementor 3D Media Carousel — стили
 */

.e3d-carousel {
	position: relative;
	display : flex;
	flex-direction: column;
	gap     : 12px;
	width   : 100%;
}

.e3d-carousel.e3d-thumbs-top {
	flex-direction: column-reverse;
}

/* ========== Главный слайд ========== */

.e3d-main {
	position    : relative;
	width       : 100%;
	overflow    : hidden;
	border-radius: 4px;
}

.e3d-main-slide {
	display        : flex;
	align-items    : center;
	justify-content: center;
	background     : #fff;
	overflow       : hidden;
}

.e3d-slide-image img.e3d-slide-image {
	max-width : 100%;
	max-height: 100%;
	width     : auto;
	height    : auto;
	object-fit: contain;
}

/* ========== 3D-слайд ========== */

.e3d-slide-3d {
	background: #f7f8fa;
	position: relative;
}

.e3d-slide-3d model-viewer {
	width : 100%;
	height: 100%;
	--poster-color: transparent;
	--progress-bar-color: transparent;
	--progress-mask: transparent;
}

/* Скрываем стандартный progress-bar от model-viewer — у нас свой лоадер. */
.e3d-loader {
	display: none !important;
}

/* Наш собственный лоадер — показываем поверх model-viewer пока модель не загрузилась. */
.e3d-initial-loader {
	position       : absolute;
	top            : 0;
	left           : 0;
	width          : 100%;
	height         : 100%;
	display        : flex;
	align-items    : center;
	justify-content: center;
	background     : rgba( 247, 248, 250, 0.95 );
	z-index        : 5;
	pointer-events : none;
}

.e3d-loader-spinner {
	width        : 48px;
	height       : 48px;
	border       : 3px solid rgba(0, 0, 0, 0.1);
	border-top   : 3px solid #00BFFF;
	border-radius: 50%;
	animation    : e3d-spin 0.8s linear infinite;
}

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

/* ========== Стрелки навигации ========== */

.e3d-arrow.swiper-button-prev,
.e3d-arrow.swiper-button-next {
	width        : 40px;
	height       : 40px;
	background   : rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.1);
	color        : #333;
	transition   : all 0.2s;
}

.e3d-arrow.swiper-button-prev:after,
.e3d-arrow.swiper-button-next:after {
	font-size  : 16px;
	font-weight: bold;
}

.e3d-arrow.swiper-button-prev:hover,
.e3d-arrow.swiper-button-next:hover {
	background: #fff;
	transform : scale(1.05);
}

/* ========== Миниатюры ========== */

.e3d-thumbs {
	width: 100%;
}

.e3d-thumbs .swiper-wrapper {
	display: flex;
}

.e3d-thumb {
	position       : relative;
	display        : flex;
	align-items    : center;
	justify-content: center;
	border         : 2px solid transparent;
	border-radius  : 4px;
	cursor         : pointer;
	overflow       : hidden;
	background     : #fff;
	transition     : border-color 0.2s, transform 0.2s;
	flex-shrink    : 0;
}

.e3d-thumb:hover {
	transform: translateY(-2px);
}

.e3d-thumb.is-active {
	border-color: #00BFFF;
}

.e3d-thumb-img {
	width     : 100%;
	height    : 100%;
	object-fit: cover;
}

/* Миниатюра 3D-слайда */

.e3d-thumb-3d {
	background: linear-gradient(135deg, #f0f4f8 0%, #e1e8ef 100%);
}

.e3d-thumb-icon {
	width : 50%;
	height: 50%;
	color : #555;
}

.e3d-badge-360 {
	position    : absolute;
	top         : 4px;
	left        : 4px;
	padding     : 2px 6px;
	background  : rgba(0, 0, 0, 0.7);
	color       : #fff;
	font-size   : 10px;
	font-weight : 600;
	border-radius: 3px;
	letter-spacing: 0.5px;
	z-index     : 2;
}

/* ========== Notice в редакторе ========== */

.e3d-empty-notice {
	padding         : 40px 20px;
	background      : #fff8dc;
	border          : 1px dashed #d4a017;
	border-radius   : 4px;
	color           : #6b5400;
	text-align      : center;
	font-size       : 14px;
}

/* ========== Mobile ========== */

@media ( max-width: 767px ) {

	.e3d-arrow.swiper-button-prev,
	.e3d-arrow.swiper-button-next {
		width : 32px;
		height: 32px;
	}

	.e3d-arrow.swiper-button-prev:after,
	.e3d-arrow.swiper-button-next:after {
		font-size: 12px;
	}
}