/**
 * Custom Elementor Image Hotspot - frontend styles.
 * All classes are prefixed with "ih-" to avoid theme/plugin conflicts.
 */

/* -------------------------------------------------- *
 * Wrapper & image
 * -------------------------------------------------- */

.ih-hotspot-wrapper {
	--ih-hotspot-size: 36px;
	--ih-icon-size: 16px;
	--ih-hotspot-bg: #1a73e8;
	--ih-hotspot-bg-hover: #0b4fa8;
	--ih-icon-color: #ffffff;
	--ih-icon-color-hover: #ffffff;
	--ih-hotspot-border-color: #ffffff;
	--ih-hotspot-border-color-hover: var(--ih-hotspot-border-color);
	--ih-hotspot-border-width: 2px;
	--ih-hotspot-radius: 50%;
	--ih-tooltip-bg: #111827;
	--ih-tooltip-color: #ffffff;
	--ih-tooltip-max-width: 220px;

	--ih-popup-width: 560px;
	--ih-popup-bg: #ffffff;
	--ih-popup-radius: 10px;
	--ih-overlay-bg: rgba(0, 0, 0, 0.6);
	--ih-popup-eyebrow-color: #1a73e8;
	--ih-popup-title-color: #111827;
	--ih-popup-desc-color: #4b5563;
	--ih-button-bg: #1a73e8;
	--ih-button-bg-hover: #0b4fa8;
	--ih-button-color: #ffffff;
	--ih-button-color-hover: #ffffff;
	--ih-close-size: 22px;
	--ih-close-color: #111827;

	display: flex;
	justify-content: center;
	width: 100%;
}

.ih-image-container {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.ih-image-container .ih-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* -------------------------------------------------- *
 * Hotspot button
 * -------------------------------------------------- */

.ih-hotspot-wrapper .ih-hotspot {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--ih-hotspot-size);
	height: var(--ih-hotspot-size);
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	background-color: var(--ih-hotspot-bg);
	color: var(--ih-icon-color);
	border: var(--ih-hotspot-border-width) solid var(--ih-hotspot-border-color);
	border-radius: var(--ih-hotspot-radius);
	cursor: pointer;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ih-hotspot-wrapper .ih-hotspot:hover,
.ih-hotspot-wrapper .ih-hotspot:focus-visible,
.ih-hotspot-wrapper .ih-hotspot.is-active {
	background-color: var(--ih-hotspot-bg-hover);
	color: var(--ih-icon-color-hover);
	border-color: var(--ih-hotspot-border-color-hover);
}

.ih-hotspot-wrapper .ih-hotspot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ih-hotspot .ih-hotspot-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ih-icon-size);
	height: var(--ih-icon-size);
	font-size: var(--ih-icon-size);
	color: inherit;
	pointer-events: none;
}

.ih-hotspot .ih-hotspot-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ih-hotspot .ih-hotspot-icon i {
	font-size: inherit;
	line-height: 1;
}

.ih-hotspot .ih-default-icon {
	font-size: inherit;
	line-height: 1;
}

/* -------------------------------------------------- *
 * Hotspot animations
 * -------------------------------------------------- */

.ih-hotspot.ih-anim-pulse::before,
.ih-hotspot.ih-anim-ping::before {
	content: "";
	position: absolute;
	inset: calc(var(--ih-hotspot-border-width) * -1);
	z-index: -1;
	border-radius: inherit;
	background-color: var(--ih-hotspot-bg);
	pointer-events: none;
}

.ih-hotspot.ih-anim-pulse::before {
	animation: ih-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ih-hotspot.ih-anim-ping::before {
	animation: ih-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ih-hotspot.ih-anim-bounce .ih-hotspot-icon {
	animation: ih-bounce 1.4s ease-in-out infinite;
}

.ih-hotspot.ih-anim-scale .ih-hotspot-icon {
	animation: ih-scale 1.6s ease-in-out infinite;
}

.ih-hotspot.ih-anim-float .ih-hotspot-icon {
	animation: ih-float 3s ease-in-out infinite;
}

@keyframes ih-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	70% {
		opacity: 0;
		transform: scale(2.2);
	}

	100% {
		opacity: 0;
		transform: scale(2.2);
	}
}

@keyframes ih-ping {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}

	75%,
	100% {
		opacity: 0;
		transform: scale(1.9);
	}
}

@keyframes ih-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

@keyframes ih-scale {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.22);
	}
}

@keyframes ih-float {
	0%,
	100% {
		transform: translateY(-2px);
	}

	50% {
		transform: translateY(2px);
	}
}

/* -------------------------------------------------- *
 * Tooltip / hotspot title
 * -------------------------------------------------- */

.ih-hotspot .ih-hotspot-title {
	--ih-tt-base-x: -50%;
	--ih-tt-base-y: 0px;
	--ih-tt-dx: 0px;
	--ih-tt-dy: 0px;
	--ih-tt-shift: 0px;
	--ih-tt-scale: 1;

	position: absolute;
	left: 50%;
	z-index: 3;
	width: max-content;
	max-width: var(--ih-tooltip-max-width);
	padding: 6px 10px;
	background-color: var(--ih-tooltip-bg);
	color: var(--ih-tooltip-color);
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform:
		translate(
			calc(var(--ih-tt-base-x) + var(--ih-tt-dx) + var(--ih-tt-shift)),
			calc(var(--ih-tt-base-y) + var(--ih-tt-dy))
		)
		scale(var(--ih-tt-scale));
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.ih-hotspot .ih-hotspot-title.ih-tooltip-top {
	bottom: calc(100% + 10px);
}

.ih-hotspot .ih-hotspot-title.ih-tooltip-bottom {
	top: calc(100% + 10px);
}

.ih-hotspot .ih-hotspot-title.ih-tooltip-left,
.ih-hotspot .ih-hotspot-title.ih-tooltip-right {
	--ih-tt-base-x: 0px;
	--ih-tt-base-y: -50%;

	top: 50%;
	text-align: left;
}

.ih-hotspot .ih-hotspot-title.ih-tooltip-left {
	left: auto;
	right: calc(100% + 10px);
}

.ih-hotspot .ih-hotspot-title.ih-tooltip-right {
	left: calc(100% + 10px);
}

/* Hidden-state offsets per title animation. */
.ih-hotspot .ih-hotspot-title.ih-title-none {
	transition: none;
}

.ih-hotspot .ih-hotspot-title.ih-title-slide-up {
	--ih-tt-dy: 10px;
}

.ih-hotspot .ih-hotspot-title.ih-title-slide-down {
	--ih-tt-dy: -10px;
}

.ih-hotspot .ih-hotspot-title.ih-title-slide-left {
	--ih-tt-dx: 12px;
}

.ih-hotspot .ih-hotspot-title.ih-title-slide-right {
	--ih-tt-dx: -12px;
}

.ih-hotspot .ih-hotspot-title.ih-title-scale {
	--ih-tt-scale: 0.85;
}

.ih-hotspot:hover .ih-hotspot-title,
.ih-hotspot:focus-visible .ih-hotspot-title,
.ih-hotspot.is-active .ih-hotspot-title {
	--ih-tt-dx: 0px;
	--ih-tt-dy: 0px;
	--ih-tt-scale: 1;

	opacity: 1;
	visibility: visible;
}

/* -------------------------------------------------- *
 * Modal
 * -------------------------------------------------- */

.ih-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.ih-modal[hidden] {
	display: none;
}

.ih-modal.is-open {
	opacity: 1;
}

.ih-modal-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--ih-overlay-bg);
}

.ih-modal-dialog {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ih-popup-width);
	max-height: calc(100vh - 40px);
	padding: 24px;
	overflow-y: auto;
	background-color: var(--ih-popup-bg);
	border-radius: var(--ih-popup-radius);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
	transform: scale(0.95);
	transition: transform 0.22s ease;
}

.ih-modal.is-open .ih-modal-dialog {
	transform: scale(1);
}

.ih-modal-dialog:focus {
	outline: none;
}

.ih-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--ih-close-size) + 14px);
	height: calc(var(--ih-close-size) + 14px);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--ih-close-color);
	font-size: var(--ih-close-size);
	line-height: 1;
	cursor: pointer;
}

.ih-modal-close:hover,
.ih-modal-close:focus-visible {
	background-color: rgba(0, 0, 0, 0.07);
}

.ih-modal-content {
	display: block;
}

.ih-popup-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 16px;
	border-radius: calc(var(--ih-popup-radius) / 1.5);
}

.ih-popup-eyebrow {
	margin: 0 0 6px;
	color: var(--ih-popup-eyebrow-color) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ih-popup-title {
	margin: 0 0 10px;
	color: var(--ih-popup-title-color) !important;
	font-size: 22px;
	line-height: 1.3;
}

.ih-popup-description {
	color: var(--ih-popup-desc-color) !important;
	font-size: 15px;
	line-height: 1.6;
}

.ih-popup-description,
.ih-popup-description * {
	color: inherit;
}

.ih-popup-description > *:last-child {
	margin-bottom: 0;
}

.ih-popup-button {
	display: inline-block;
	margin-top: 18px;
	padding: 10px 20px;
	background-color: var(--ih-button-bg) !important;
	color: var(--ih-button-color) !important;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ih-popup-button:hover,
.ih-popup-button:focus-visible {
	background-color: var(--ih-button-bg-hover) !important;
	color: var(--ih-button-color-hover) !important;
}

.ih-panel-default {
	margin-bottom: 4px;
}

/* -------------------------------------------------- *
 * Responsive
 * -------------------------------------------------- */

@media (max-width: 767px) {
	.ih-hotspot-wrapper {
		--ih-hotspot-size: clamp(24px, 9vw, 36px);
		--ih-icon-size: clamp(11px, 4vw, 16px);
	}

	.ih-hotspot .ih-hotspot-title {
		font-size: 12px;
	}

	.ih-modal {
		padding: 12px;
	}

	.ih-modal-dialog {
		max-height: calc(100vh - 24px);
	}
}

/* -------------------------------------------------- *
 * Reduced motion
 * -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ih-hotspot::before,
	.ih-hotspot .ih-hotspot-icon {
		animation: none !important;
	}

	.ih-hotspot .ih-hotspot-title,
	.ih-modal,
	.ih-modal-dialog {
		transition: none !important;
	}
}

/* -------------------------------------------------- *
 * Layout mode: inline card anchored inside the image
 * -------------------------------------------------- */

.ih-mode-inline .ih-image-container {
	--ih-inline-offset: 24px;
}

.ih-mode-inline .ih-modal {
	position: absolute;
	inset: auto;
	z-index: 5;
	width: min(var(--ih-popup-width, 360px), calc(100% - (var(--ih-inline-offset) * 2)));
	max-width: none;
	padding: 0;
}

.ih-mode-inline .ih-modal-overlay {
	display: none;
}

.ih-mode-inline .ih-modal-dialog {
	max-width: none;
	max-height: none;
	transform: translateY(8px) scale(1);
}

.ih-mode-inline .ih-modal.is-open .ih-modal-dialog {
	transform: none;
}

.ih-mode-inline.ih-inline-pos-top-left .ih-modal,
.ih-mode-inline.ih-inline-pos-top-right .ih-modal {
	top: var(--ih-inline-offset);
}

.ih-mode-inline.ih-inline-pos-bottom-left .ih-modal,
.ih-mode-inline.ih-inline-pos-bottom-right .ih-modal {
	bottom: var(--ih-inline-offset);
}

.ih-mode-inline.ih-inline-pos-center-left .ih-modal,
.ih-mode-inline.ih-inline-pos-center-right .ih-modal {
	top: 50%;
	transform: translateY(-50%);
}

.ih-mode-inline.ih-inline-pos-top-left .ih-modal,
.ih-mode-inline.ih-inline-pos-bottom-left .ih-modal,
.ih-mode-inline.ih-inline-pos-center-left .ih-modal {
	left: var(--ih-inline-offset);
}

.ih-mode-inline.ih-inline-pos-top-right .ih-modal,
.ih-mode-inline.ih-inline-pos-bottom-right .ih-modal,
.ih-mode-inline.ih-inline-pos-center-right .ih-modal {
	right: var(--ih-inline-offset);
}

.ih-mode-inline .ih-popup-image {
	margin-bottom: 12px;
}

/* -------------------------------------------------- *
 * Layout mode: side panel (optionally sticky)
 * -------------------------------------------------- */

.ih-hotspot-wrapper.ih-mode-panel {
	--ih-panel-width: 38%;
	--ih-panel-gap: 40px;
	--ih-sticky-offset: 24px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--ih-panel-width));
	gap: var(--ih-panel-gap);
	align-items: start;
	justify-content: initial;
}

.ih-hotspot-wrapper.ih-mode-panel.ih-panel-left {
	grid-template-columns: minmax(0, var(--ih-panel-width)) minmax(0, 1fr);
}

.ih-mode-panel .ih-image-container {
	display: block;
	width: 100%;
	grid-column: 2;
}

.ih-mode-panel.ih-panel-right .ih-image-container {
	grid-column: 1;
}

.ih-mode-panel .ih-panel {
	grid-row: 1;
	grid-column: 2;
	min-width: 0;
	background-color: var(--ih-popup-bg);
	border-radius: var(--ih-popup-radius);
	padding: 28px;
	box-sizing: border-box;
}

.ih-mode-panel.ih-panel-left .ih-panel {
	grid-column: 1;
}

.ih-mode-panel.ih-is-sticky .ih-panel {
	position: sticky;
	top: var(--ih-sticky-offset);
}

.ih-panel-content:focus {
	outline: none;
}

.ih-panel-content.ih-is-swapping {
	opacity: 0;
	transform: translateY(8px);
}

.ih-panel-content {
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.ih-mode-panel .ih-hotspot.is-active {
	z-index: 4;
}

@media (max-width: 767px) {
	.ih-hotspot-wrapper.ih-mode-panel,
	.ih-hotspot-wrapper.ih-mode-panel.ih-panel-left {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ih-mode-panel .ih-image-container,
	.ih-mode-panel.ih-panel-right .ih-image-container,
	.ih-mode-panel .ih-panel,
	.ih-mode-panel.ih-panel-left .ih-panel {
		grid-column: 1;
	}

	.ih-mode-panel .ih-image-container {
		grid-row: 1;
	}

	.ih-mode-panel .ih-panel {
		grid-row: 2;
	}

	/* Sticky panels are pointless once the layout stacks. */
	.ih-mode-panel.ih-is-sticky .ih-panel {
		position: static;
	}

	.ih-mode-inline .ih-modal {
		left: var(--ih-inline-offset);
		right: var(--ih-inline-offset);
		width: auto;
	}

	.ih-mode-inline .ih-modal,
	.ih-mode-inline.ih-inline-pos-center-left .ih-modal,
	.ih-mode-inline.ih-inline-pos-center-right .ih-modal {
		top: auto;
		bottom: var(--ih-inline-offset);
		transform: none;
	}
}

/* -------------------------------------------------- *
 * Hotspot list / accordion
 * -------------------------------------------------- */

.ih-list-wrap {
	--ih-list-color: #8f8a85;
	--ih-list-color-hover: #ffffff;
	--ih-list-color-active: #1a73e8;
	--ih-list-divider: rgba(0, 0, 0, 0.12);

	--ih-list-bg-hover: transparent;
	--ih-list-bg-active: transparent;
	--ih-list-bg-radius: 6px;
	--ih-list-bg-padding: 0px;

	--ih-list-anim-stagger: 60ms;

	--ih-counter-color: #8f8a85;

	width: 100%;
	min-width: 0;
}

.ih-mode-panel .ih-list-wrap {
	margin-top: 26px;
}

.ih-hotspot-wrapper.ih-has-list:not(.ih-mode-panel) {
	display: block;
}

.ih-hotspot-wrapper.ih-has-list:not(.ih-mode-panel) .ih-image-container {
	display: block;
	margin: 0 auto;
}

.ih-hotspot-wrapper.ih-has-list:not(.ih-mode-panel) .ih-list-wrap {
	margin-top: 24px;
}

.ih-hotspot-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ih-list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ih-list-button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px var(--ih-list-bg-padding);
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: var(--ih-list-bg-radius);
	border-bottom: 1px solid var(--ih-list-divider);
	color: var(--ih-list-color);
	font: inherit;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, padding-left 0.2s ease;
}

.ih-list-button:hover {
	color: var(--ih-list-color-hover);
	background-color: var(--ih-list-bg-hover);
	padding-left: calc(6px + var(--ih-list-bg-padding));
}

.ih-list-button:focus-visible {
	outline: 2px solid var(--ih-list-color-active);
	outline-offset: 2px;
}

.ih-list-button.is-active,
.ih-list-button[aria-pressed="true"],
.ih-list-button[aria-expanded="true"] {
	color: var(--ih-list-color-active);
	background-color: var(--ih-list-bg-active);
}

.ih-list-number {
	flex: 0 0 auto;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.ih-list-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ih-list-indicator {
	position: relative;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.ih-list-indicator::before,
.ih-list-indicator::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ih-list-indicator::before {
	width: 12px;
	height: 2px;
}

.ih-list-indicator::after {
	width: 2px;
	height: 12px;
}

.ih-list-button[aria-expanded="true"] .ih-list-indicator::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.ih-list-content {
	padding: 4px 0 18px;
	color: var(--ih-popup-desc-color, #4b5563);
}

.ih-list-content[hidden] {
	display: none;
}

.ih-list-content .ih-popup-image {
	margin-bottom: 12px;
}

.ih-list-content .ih-popup-title {
	font-size: 17px;
	margin-bottom: 8px;
}

.ih-list-counter {
	margin: 18px 0 0;
	color: var(--ih-counter-color);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 * List item entrance animation
 * -------------------------------------------------- */

@keyframes ih-list-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes ih-list-slide-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ih-list-slide-left {
	from {
		opacity: 0;
		transform: translateX(18px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes ih-list-zoom {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.ih-list-anim-fade .ih-list-item,
.ih-list-anim-slide-up .ih-list-item,
.ih-list-anim-slide-left .ih-list-item,
.ih-list-anim-zoom .ih-list-item {
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
	animation-delay: calc(var(--ih-list-item-index, 0) * var(--ih-list-anim-stagger, 60ms));
}

.ih-list-anim-fade .ih-list-item {
	animation-name: ih-list-fade;
}

.ih-list-anim-slide-up .ih-list-item {
	animation-name: ih-list-slide-up;
}

.ih-list-anim-slide-left .ih-list-item {
	animation-name: ih-list-slide-left;
}

.ih-list-anim-zoom .ih-list-item {
	animation-name: ih-list-zoom;
}

@media (prefers-reduced-motion: reduce) {
	.ih-list-anim-fade .ih-list-item,
	.ih-list-anim-slide-up .ih-list-item,
	.ih-list-anim-slide-left .ih-list-item,
	.ih-list-anim-zoom .ih-list-item {
		animation: none;
	}
}