/* =========================================================================
   Krdn Plus Cross Widget — Frontend Styles (CSS Transitions, no GSAP)
   ========================================================================= */

/* --- Wrapper --- */
.krdn-cross-wrapper {
	--krdn-duration: 0.6s;
	--krdn-easing: ease-in-out;
	--krdn-widget-z: 9990;
	--krdn-overlay-z: 9980;
	--krdn-rotate: 0deg;
	--krdn-arm-scale: 1;
	--krdn-tx: 0%;
	--krdn-ty: 0%;

	position: relative;
	direction: rtl;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
	isolation: isolate;
}

.krdn-cross-wrapper.krdn-state--active {
	z-index: var(--krdn-widget-z);
}

/* --- Overlay --- */
.krdn-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.95);
	z-index: var(--krdn-overlay-z);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	-webkit-transition:
		opacity var(--krdn-duration) var(--krdn-easing),
		visibility 0s linear var(--krdn-duration);
	transition:
		opacity var(--krdn-duration) var(--krdn-easing),
		visibility 0s linear var(--krdn-duration);
}

.krdn-state--active .krdn-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	-webkit-transition:
		opacity var(--krdn-duration) var(--krdn-easing),
		visibility 0s linear 0s;
	transition:
		opacity var(--krdn-duration) var(--krdn-easing),
		visibility 0s linear 0s;
}

/* --- Cross Grid Layout --- */
.krdn-cross {
	--arm-w-val: 200px;
	--arm-h-val: 200px;
	--center-s-val: 200px;

	display: grid;
	grid-template-columns:
		var(--arm-w-val)
		var(--center-s-val)
		var(--arm-w-val);
	grid-template-rows:
		var(--arm-h-val)
		var(--center-s-val)
		var(--arm-h-val);
	direction: ltr;
	position: relative;
	z-index: var(--krdn-widget-z);
	-webkit-transform: rotate(0deg) scale(1) translate(0, 0);
	transform: rotate(0deg) scale(1) translate(0, 0);
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-transition:
		-webkit-transform var(--krdn-duration) var(--krdn-easing),
		left var(--krdn-duration) var(--krdn-easing),
		top var(--krdn-duration) var(--krdn-easing),
		grid-template-columns var(--krdn-duration) var(--krdn-easing),
		grid-template-rows var(--krdn-duration) var(--krdn-easing);
	transition:
		transform var(--krdn-duration) var(--krdn-easing),
		left var(--krdn-duration) var(--krdn-easing),
		top var(--krdn-duration) var(--krdn-easing),
		grid-template-columns var(--krdn-duration) var(--krdn-easing),
		grid-template-rows var(--krdn-duration) var(--krdn-easing);
}

/* Pinned state: cross is position:fixed with left/top at center point.
   translate(-50%, -50%) self-centers regardless of current dimensions. */
.krdn-cross.krdn-pinned {
	-webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1) translate(0, 0);
	transform: translate(-50%, -50%) rotate(0deg) scale(1) translate(0, 0);
}

/* --- Arm Placement --- */
.krdn-arm {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	-webkit-transition: filter 0.2s ease;
	transition: filter 0.2s ease;
	position: relative;
	overflow: hidden;
}

/* Gradient backgrounds — direction flows from outer edge toward center */
.krdn-arm--top {
	grid-column: 2;
	grid-row: 1;
	background: -webkit-linear-gradient(top, var(--krdn-c1, #006188), var(--krdn-c2, #008bb3));
	background: linear-gradient(to bottom, var(--krdn-c1, #006188), var(--krdn-c2, #008bb3));
}

.krdn-arm--left {
	grid-column: 1;
	grid-row: 2;
	background: -webkit-linear-gradient(left, var(--krdn-c1, #853920), var(--krdn-c2, #af673e));
	background: linear-gradient(to right, var(--krdn-c1, #853920), var(--krdn-c2, #af673e));
}

.krdn-arm--right {
	grid-column: 3;
	grid-row: 2;
	background: -webkit-linear-gradient(right, var(--krdn-c1, #718871), var(--krdn-c2, #9fae9c));
	background: linear-gradient(to left, var(--krdn-c1, #718871), var(--krdn-c2, #9fae9c));
}

.krdn-arm--bottom {
	grid-column: 2;
	grid-row: 3;
	background: -webkit-linear-gradient(bottom, var(--krdn-c1, #b76931), var(--krdn-c2, #d49645));
	background: linear-gradient(to top, var(--krdn-c1, #b76931), var(--krdn-c2, #d49645));
}

.krdn-arm:hover {
	-webkit-filter: brightness(1.08);
	filter: brightness(1.08);
}

.krdn-arm .krdn-arm__trigger {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.krdn-arm:hover .krdn-arm__trigger {
	-webkit-transform: rotate(360deg) scale(1.2);
	transform: rotate(360deg) scale(1.2);
}

/* --- Center Panel --- */
.krdn-center {
	grid-column: 2;
	grid-row: 2;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	overflow: hidden;
}

.krdn-center img {
	max-width: 100%;
	max-height: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

/* --- Arm Inner Elements --- */
.krdn-arm__title {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
	direction: rtl;
	padding: 0 12px;
	-webkit-transition: opacity 0.25s var(--krdn-easing);
	transition: opacity 0.25s var(--krdn-easing);
}

.krdn-arm__trigger {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	padding: 4px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-transition: color 0.2s ease, opacity 0.25s var(--krdn-easing);
	transition: color 0.2s ease, opacity 0.25s var(--krdn-easing);
}

.krdn-arm__trigger:hover {
	color: #ffffff;
}

.krdn-arm__trigger svg {
	width: 24px;
	height: 24px;
}

/* --- Expanded Content Panels --- */
.krdn-expanded {
	position: fixed;
	top: 10vh;
	right: 5vw;
	bottom: 10vh;
	left: 5vw;
	z-index: calc(var(--krdn-widget-z) + 5);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	gap: 3vw;
	padding: 5vh 4vw;
	-webkit-align-items: center;
	align-items: center;
	direction: rtl;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	color: #ffffff;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	-webkit-transition:
		opacity 0.3s var(--krdn-easing),
		visibility 0s linear 0.3s;
	transition:
		opacity 0.3s var(--krdn-easing),
		visibility 0s linear 0.3s;
}

.krdn-expanded__title {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.3;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	max-width: 40%;
}

.krdn-expanded__content {
	-webkit-flex: 1;
	flex: 1;
	font-size: 1.1rem;
	line-height: 1.7;
	direction: rtl;
}

/* --- Header/Footer z-index boost --- */
.krdn-boosted {
	position: relative;
	z-index: var(--krdn-boosted-z, 9999) !important;
}

/* =========================================================================
   Desktop (>767px) — Cross animation + expanded panels
   ========================================================================= */

@media (min-width: 768px) {
	/* Active transform: centering + user transforms.
	   translate(-50%,-50%) auto-adjusts to any cross size (vw-based active dims). */
	.krdn-state--active .krdn-cross {
		-webkit-transform:
			translate(-50%, -50%)
			rotate(var(--krdn-rotate))
			scale(var(--krdn-arm-scale))
			translate(var(--krdn-tx), var(--krdn-ty));
		transform:
			translate(-50%, -50%)
			rotate(var(--krdn-rotate))
			scale(var(--krdn-arm-scale))
			translate(var(--krdn-tx), var(--krdn-ty));
	}

	/* Fade out titles and triggers */
	.krdn-state--active .krdn-arm__title {
		opacity: 0;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
	}

	.krdn-state--active .krdn-arm__trigger {
		opacity: 0;
		pointer-events: none;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
	}

	/* Show expanded panel matching the active arm — delayed until cross finishes */
	.krdn-state--top .krdn-expanded--top,
	.krdn-state--right .krdn-expanded--right,
	.krdn-state--bottom .krdn-expanded--bottom,
	.krdn-state--left .krdn-expanded--left {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		-webkit-transition:
			opacity 0.4s var(--krdn-easing) var(--krdn-duration),
			visibility 0s linear 0s;
		transition:
			opacity 0.4s var(--krdn-easing) var(--krdn-duration),
			visibility 0s linear 0s;
	}
}

/* =========================================================================
   Mobile (up to 767px) — simple popup, no cross animation
   ========================================================================= */

@media (max-width: 767px) {
	.krdn-cross {
		--arm-w-val: 28vw;
		--arm-h-val: 28vw;
		--center-s-val: 28vw;
	}

	.krdn-arm__title {
		font-size: 13px;
	}

	/* No cross animation on mobile — lock dimensions and neutralise transforms */
	.krdn-state--active .krdn-cross {
		--arm-w-val: 28vw !important;
		--arm-h-val: 28vw !important;
		--center-s-val: 28vw !important;
		--krdn-rotate: 0deg !important;
		--krdn-arm-scale: 1 !important;
		--krdn-tx: 0% !important;
		--krdn-ty: 0% !important;
		-webkit-transform: none !important;
		transform: none !important;
	}

	/* Titles/triggers stay visible (cross doesn't move) */
	.krdn-state--active .krdn-arm__title,
	.krdn-state--active .krdn-arm__trigger {
		opacity: 1;
		pointer-events: auto;
	}

	/* Expanded panel = simple popup with gradient background */
	.krdn-expanded {
		top: 5vh;
		right: 3vw;
		bottom: 5vh;
		left: 3vw;
		padding: 3vh 4vw;
		-webkit-flex-direction: column;
		flex-direction: column;
		border-radius: 12px;
	}

	/* Show active panel as a popup with gradient background per arm */
	.krdn-state--top .krdn-expanded--top {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: -webkit-linear-gradient(top left, var(--krdn-c1, #006188), var(--krdn-c2, #008bb3));
		background: linear-gradient(135deg, var(--krdn-c1, #006188), var(--krdn-c2, #008bb3));
		-webkit-transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
		transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
	}

	.krdn-state--right .krdn-expanded--right {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: -webkit-linear-gradient(top left, var(--krdn-c1, #718871), var(--krdn-c2, #9fae9c));
		background: linear-gradient(135deg, var(--krdn-c1, #718871), var(--krdn-c2, #9fae9c));
		-webkit-transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
		transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
	}

	.krdn-state--bottom .krdn-expanded--bottom {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: -webkit-linear-gradient(top left, var(--krdn-c1, #b76931), var(--krdn-c2, #d49645));
		background: linear-gradient(135deg, var(--krdn-c1, #b76931), var(--krdn-c2, #d49645));
		-webkit-transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
		transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
	}

	.krdn-state--left .krdn-expanded--left {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		background: -webkit-linear-gradient(top left, var(--krdn-c1, #853920), var(--krdn-c2, #af673e));
		background: linear-gradient(135deg, var(--krdn-c1, #853920), var(--krdn-c2, #af673e));
		-webkit-transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
		transition: opacity 0.3s var(--krdn-easing), visibility 0s linear 0s;
	}

	.krdn-expanded__title {
		max-width: 100%;
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}
}