/**
 * Doctor Rotation Animation Styles
 */

/* Базовые стили для анимируемых элементов */
.section-form1.form3 .image_box .doctor-rotate-element {
	transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Fade out animation */
.section-form1.form3 .image_box .doctor-rotate-element.fading-out {
	opacity: 0;
	transform: translateX(20px);
}

/* Fade in animation */
.section-form1.form3 .image_box .doctor-rotate-element.fading-in {
	animation: doctorFadeIn 0.4s ease-in-out forwards;
}

@keyframes doctorFadeIn {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Background transition */
.section-form1.form3 .image_box .background {
	transition: background-image 0.5s ease-in-out;
}

/* Doctor dots indicator */
.section-form1.form3 .image_box .box .doctor-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 15px;
}

.section-form1.form3 .image_box .box .doctor-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: all 0.2s ease;
}

.section-form1.form3 .image_box .box .doctor-dot:hover {
	background: rgba(0, 0, 0, 0.4);
	transform: scale(1.2);
}

.section-form1.form3 .image_box .box .doctor-dot.active {
	background: var(--action_color);
	transform: scale(1.3);
}

/* Pause indicator on hover */
.section-form1.form3 .image_box:hover .doctor-dots:after {
	content: '';
	display: none; /* Can be enabled for visual pause indicator */
}

/* form3 (слайдер): увеличиваем для более крупного отображения */
.section-form1.form3 .image_box .image {
	max-height: 800px;
	width: 520px;
	left: calc(50% - 520px / 2);
	transform: scale(1.2);
	transform-origin: center bottom;
}

/* Исключаем scale при анимации fade — иначе scale конфликтует с translateX */
.section-form1.form3 .image_box .image.fading-out {
	transform: scale(1.2) translateX(20px);
}

.section-form1.form3 .image_box .image.fading-in {
	animation: doctorFadeInScaled 0.4s ease-in-out forwards;
}

@keyframes doctorFadeInScaled {
	0% {
		opacity: 0;
		transform: scale(1.2) translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: scale(1.2) translateX(0);
	}
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
	.section-form1.form3 .image_box .box .doctor-dots {
		margin-top: 12px;
		gap: 6px;
	}

	.section-form1.form3 .image_box .box .doctor-dot {
		width: 6px;
		height: 6px;
	}
}