/* ==========================================================
   LEDART-story – Frontend CSS
   Version: 2.0.0 – Production Refactor
   ========================================================== */

/* ---- Base Reset ---- */
.ledart-showcase-widget *,
.ledart-showcase-widget *::before,
.ledart-showcase-widget *::after {
	box-sizing: border-box;
}

.ledart-showcase-widget {
	font-family: inherit;
	width: 100%;
}

/* ============================
   RING SLIDER WRAP
   NOTE: overflow must NOT be hidden here — shadow needs space.
   We use overflow: visible on the wrap and clip only the track.
   ============================ */
.ledart-ring-slider-wrap {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding: 20px 8px 20px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
	margin-bottom: 20px;
	position: relative;
	/* CRITICAL FIX: overflow: visible so card shadows are not clipped */
	overflow: visible;
}

.ledart-ring-track-outer {
	flex: 1;
	/* Clip only horizontal overflow for the scrolling track, not vertical */
	overflow: hidden;
	min-width: 0;
}

.ledart-ring-track {
	display: flex;
	gap: 8px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	align-items: flex-start;
	/* Extra vertical padding so shadows are not clipped by track-outer's overflow:hidden */
	padding: 8px 4px 16px;
}

.ledart-ring-track.ledart-is-dragging {
	cursor: grabbing;
	transition: none;
}

/* ============================
   RING ITEM
   Transform architecture using CSS custom properties.
   Single composite transform — no conflicts possible.
   ============================ */

.ledart-ring-item {
	/* Default CSS variable values */
	--ledart-card-tx: 0px;
	--ledart-card-ty: 0px;
	--ledart-card-rot: 0deg;
	--ledart-card-scale: 1;
	--ledart-card-width: auto;
	--ledart-card-hover-lift: -2px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	flex-shrink: 0;
	min-width: 100px;
	padding: 4px 8px;
	border-radius: 12px;
	-webkit-tap-highlight-color: transparent;

	/* Single unified transform — base state */
	transform:
		translateX(var(--ledart-card-tx))
		translateY(var(--ledart-card-ty))
		rotate(var(--ledart-card-rot))
		scale(var(--ledart-card-scale));
	transition: transform 0.2s ease, box-shadow 0.3s ease;

	/* Width control via CSS variable */
	width: var(--ledart-card-width);
}

/* Hover state: lift by hover-lift offset added to base ty */
.ledart-ring-item:hover {
	transform:
		translateX(var(--ledart-card-tx))
		translateY(calc(var(--ledart-card-ty) + var(--ledart-card-hover-lift)))
		rotate(var(--ledart-card-rot))
		scale(var(--ledart-card-scale));
}

/* Active state: same lift as hover */
.ledart-ring-item.ledart-ring-active {
	transform:
		translateX(var(--ledart-card-tx))
		translateY(calc(var(--ledart-card-ty) + var(--ledart-card-hover-lift)))
		rotate(var(--ledart-card-rot))
		scale(var(--ledart-card-scale));
}

/* ---- Ring Image Wrap ---- */
.ledart-ring-img-wrap {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 3px solid #e2e8f0;
	overflow: hidden;
	position: relative;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background: #f8fafc;
	flex-shrink: 0;
}

.ledart-ring-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ledart-ring-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

/* ---- Ring Badge ---- */
.ledart-ring-badge {
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 3px 8px;
	border-radius: 20px;
	color: #ffffff;
	white-space: nowrap;
	z-index: 2;
	text-transform: uppercase;
}

.ledart-badge-new {
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.ledart-badge-hot {
	background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.ledart-badge-sale {
	background: linear-gradient(135deg, #10b981, #059669);
}

/* ---- Ring Labels ---- */
.ledart-ring-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.ledart-ring-title {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	line-height: 1.3;
	transition: color 0.3s ease;
	text-align: center;
	white-space: nowrap;
}

.ledart-ring-subtitle {
	font-size: 11px;
	color: #64748b;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}

/* ---- Slider Arrows ---- */
.ledart-slider-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid #e2e8f0;
	background: #ffffff;
	color: #475569;
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 27px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	z-index: 2;
	position: relative;
}

.ledart-slider-arrow:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #1e293b;
}

/* ============================
   ACTIVE RING PULSE ANIMATION
   ============================ */
@keyframes ledartRingPulse {
	0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); }
	70%  { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
	100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.ledart-ring-item.ledart-ring-active .ledart-ring-img-wrap {
	animation: ledartRingPulse 2s ease infinite;
}

/* ============================
   MAIN CONTENT LAYOUT
   ============================ */
.ledart-main-content {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 20px;
	margin-bottom: 20px;
	align-items: stretch;
}

/* ---- Left Column ---- */
.ledart-left-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ---- PNG Image Area ---- */
.ledart-png-area {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	position: relative;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ledart-png-slide {
	display: none;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	animation: ledartFadeIn 0.4s ease;
}

.ledart-png-slide.ledart-content-active {
	display: flex;
}

.ledart-png-slide img {
	max-width: 100%;
	max-height: 280px;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.ledart-png-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px;
	color: #cbd5e1;
	font-size: 13px;
}

/* ---- Description Area ---- */
.ledart-desc-area {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 24px;
	flex: 1;
	position: relative;
	overflow: hidden;
}

.ledart-desc-slide {
	display: none;
	flex-direction: column;
	gap: 12px;
	animation: ledartFadeIn 0.4s ease;
}

.ledart-desc-slide.ledart-content-active {
	display: flex;
}

.ledart-desc-title {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 8px;
	line-height: 1.3;
}

.ledart-desc-content {
	font-size: 14px;
	color: #334155;
	line-height: 1.8;
	margin: 0;
}

.ledart-desc-content p {
	margin: 0 0 8px;
}

.ledart-desc-content p:last-child {
	margin-bottom: 0;
}

/* ---- Right Column (Video) ---- */
.ledart-right-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ---- Video Area ---- */
.ledart-video-area {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
}

.ledart-video-inner {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 320px;
}

.ledart-video-slide {
	display: none;
	flex: 1;
	position: relative;
	background: #000000;
}

.ledart-video-slide.ledart-content-active {
	display: flex;
}

.ledart-video-slide video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	min-height: 280px;
	background: #000;
}

.ledart-video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1;
	min-height: 280px;
	background: #f8fafc;
	color: #94a3b8;
	font-size: 13px;
}

/* ---- Big Play Button ---- */
.ledart-big-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1e293b;
	cursor: pointer;
	transition: background 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
	z-index: 5;
	pointer-events: all;
}

.ledart-big-play-btn:hover {
	background: #ffffff;
	box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.ledart-big-play-btn.ledart-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ---- Video Controls ---- */
.ledart-video-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: rgba(15, 23, 42, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	position: relative;
	z-index: 10;
	flex-shrink: 0;
}

.ledart-vid-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease;
	padding: 0;
}

.ledart-vid-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.ledart-vid-time {
	font-size: 11px;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
	flex-shrink: 0;
	font-family: monospace;
}

/* ---- Progress Bar ---- */
.ledart-vid-progress-wrap {
	flex: 1;
	min-width: 0;
	padding: 6px 0;
	cursor: pointer;
}

.ledart-vid-progress-bar {
	height: 4px;
	background: rgba(255,255,255,0.25);
	border-radius: 4px;
	position: relative;
	overflow: visible;
}

.ledart-vid-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #f97316, #fb923c);
	border-radius: 4px;
	width: 0%;
	transition: width 0.1s linear;
	position: relative;
}

.ledart-vid-progress-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #f97316;
	position: absolute;
	right: -6px;
	top: -4px;
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ledart-vid-progress-wrap:hover .ledart-vid-progress-thumb {
	opacity: 1;
}

/* ============================
   FEATURE BOXES ROW
   ============================ */
.ledart-features-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.ledart-feature-box {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ledart-feature-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.ledart-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(139, 92, 246, 0.1));
}

.ledart-feature-icon i {
	font-size: 36px;
	color: #7c3aed;
}

.ledart-feature-icon svg {
	width: 36px;
	height: 36px;
	fill: #7c3aed;
}

.ledart-feature-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ledart-feature-text {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.3;
}

.ledart-feature-subtext {
	font-size: 12px;
	color: #64748b;
	line-height: 1.4;
}

/* ============================
   CTA BUTTON ROW
   ============================ */
.ledart-cta-row {
	display: flex;
	justify-content: center;
	padding: 8px 0 4px;
}

.ledart-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #4f46e5;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	padding: 16px 48px;
	border-radius: 50px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
	box-shadow: 0 8px 32px rgba(79, 70, 229, 0.35);
	position: relative;
	overflow: hidden;
	border: none;
	cursor: pointer;
}

.ledart-cta-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
	pointer-events: none;
}

.ledart-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(79, 70, 229, 0.5);
	color: #ffffff;
	text-decoration: none;
}

.ledart-cta-icon {
	display: flex;
	align-items: center;
}

.ledart-cta-icon i {
	font-size: 18px;
}

.ledart-cta-icon svg {
	width: 18px;
	height: 18px;
}

.ledart-cta-arrow {
	display: flex;
	align-items: center;
}

/* ============================
   ANIMATIONS
   ============================ */
@keyframes ledartFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================
   MOBILE POPUP
   ============================ */
.ledart-mobile-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(0, 0, 0, 0.97);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	animation: ledartPopupIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ledart-mobile-popup.ledart-popup-open {
	display: flex;
}

@keyframes ledartPopupIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.ledart-popup-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.ledart-popup-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.15);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease;
}

.ledart-popup-close:hover,
.ledart-popup-close:active {
	background: rgba(255,255,255,0.25);
}

.ledart-popup-video-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.ledart-popup-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #000;
}

.ledart-popup-no-video {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #64748b;
	font-size: 14px;
}

.ledart-popup-big-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1e293b;
	cursor: pointer;
	transition: background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ledart-popup-big-play.ledart-hidden {
	opacity: 0;
	pointer-events: none;
}

.ledart-popup-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: rgba(15,23,42,0.9);
}

.ledart-popup-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.12);
	color: #ffffff;
	cursor: pointer;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease;
}

.ledart-popup-btn:active {
	background: rgba(255,255,255,0.25);
}

.ledart-popup-progress-wrap {
	flex: 1;
	padding: 10px 0;
	cursor: pointer;
}

.ledart-popup-progress-bar {
	height: 4px;
	background: rgba(255,255,255,0.25);
	border-radius: 4px;
	overflow: hidden;
}

.ledart-popup-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #f97316, #fb923c);
	border-radius: 4px;
	width: 0%;
	transition: width 0.1s linear;
}

.ledart-popup-ring-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 16px 20px;
	background: rgba(15,23,42,0.9);
}

.ledart-popup-ring-title {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
}

.ledart-popup-ring-sub {
	font-size: 13px;
	color: rgba(255,255,255,0.6);
}

/* ============================
   TABLET
   ============================ */
@media (max-width: 1024px) {
	.ledart-main-content {
		grid-template-columns: 1fr 1.4fr;
		gap: 16px;
	}

	.ledart-features-row {
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}

	.ledart-ring-img-wrap {
		width: 80px;
		height: 80px;
	}

	.ledart-ring-item {
		min-width: 88px;
	}
}

@media (max-width: 900px) {
	.ledart-main-content {
		grid-template-columns: 1fr;
	}

	.ledart-left-col {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.ledart-png-area {
		flex: 1;
		min-width: 200px;
		min-height: 180px;
	}

	.ledart-desc-area {
		flex: 1;
		min-width: 200px;
	}

	.ledart-features-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================
   MOBILE (max-width: 767px)
   ============================ */
@media (max-width: 767px) {

	/* Hide desktop content on mobile */
	.ledart-main-content,
	.ledart-features-row,
	.ledart-cta-row {
		display: none !important;
	}

	/* Slim ring slider for mobile */
	.ledart-ring-slider-wrap {
		padding: 16px 4px 16px;
		border-radius: 0;
		box-shadow: none;
		margin-bottom: 0;
		background: #f8fafc;
	}

	.ledart-ring-item {
		min-width: 80px;
		padding: 4px 6px;
	}

	.ledart-ring-img-wrap {
		width: 70px;
		height: 70px;
		border-width: 2.5px;
	}

	.ledart-ring-title {
		font-size: 11px;
	}

	.ledart-ring-subtitle {
		font-size: 10px;
	}

	.ledart-ring-badge {
		font-size: 8px;
		padding: 2px 6px;
	}

	.ledart-slider-arrow {
		width: 30px;
		height: 30px;
		margin-top: 20px;
	}

	/* Ring track – free-scroll on mobile */
	.ledart-ring-track-outer {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ledart-ring-track-outer::-webkit-scrollbar {
		display: none;
	}
}

/* ============================
   RTL Support
   ============================ */
[dir="rtl"] .ledart-desc-title,
[dir="rtl"] .ledart-desc-content,
.ledart-showcase-widget[dir="rtl"] .ledart-desc-title,
.ledart-showcase-widget[dir="rtl"] .ledart-desc-content {
	direction: rtl;
	text-align: right;
}

/* ============================
   Elementor Editor Overrides
   ============================ */
.elementor-editor-active .ledart-mobile-popup {
	display: none !important;
}

.elementor-editor-active .ledart-main-content {
	display: grid !important;
}

.elementor-editor-active .ledart-features-row {
	display: grid !important;
}

.elementor-editor-active .ledart-cta-row {
	display: flex !important;
}