/**
 * Service Hover Widget Styles
 * 
 * Service items with image appearing on hover and tab functionality
 *
 * @package Serenity_CTA_Elements
 */

/* ================= FORCE FULL WIDTH ================= */
.elementor-widget-serenity_service_hover {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

.elementor-widget-serenity_service_hover .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

/* ================= BASE ================= */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget {
	position: relative;
	width: 100% !important;
	overflow: visible; /* Allow badges to show, but items will contain their own content */
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
}

/* ================= TABS HEADER ================= */
.elementor-widget-serenity_service_hover .serenity-service-tabs-header {
	margin-bottom: 40px;
	text-align: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.elementor-widget-serenity_service_hover .serenity-service-tabs-heading {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ================= CUSTOM DROPDOWN ================= */
.elementor-widget-serenity_service_hover .serenity-custom-dropdown {
	position: relative;
	display: inline-block;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	color: #667eea;
	cursor: pointer;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	padding: 8px 12px;
	margin: 0;
	border-bottom: 2px solid #667eea;
	transition: all 0.3s ease;
	outline: none;
	font-family: inherit;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-trigger:hover {
	color: #5a67d8;
	border-bottom-color: #5a67d8;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-trigger:focus {
	color: #5a67d8;
	border-bottom-color: #5a67d8;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-trigger.active {
	border-bottom-color: #667eea;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-trigger.active .serenity-dropdown-icon {
	transform: rotate(180deg);
}

.elementor-widget-serenity_service_hover .serenity-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 1000;
	margin-top: 8px;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.elementor-widget-serenity_service_hover .serenity-dropdown-item {
	color: #333333;
	padding: 12px 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent;
	font-size: 16px;
	line-height: 1.4;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-item:last-child {
	border-bottom: none;
}


.elementor-widget-serenity_service_hover .serenity-dropdown-item:first-child {
	border-radius: 8px 8px 0 0;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-item:last-child {
	border-radius: 0 0 8px 8px;
}

/* ================= SERVICE LIST ================= */
.elementor-widget-serenity_service_hover .serenity-service-list {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ================= SERVICE ITEM ================= */
.elementor-widget-serenity_service_hover .serenity-service-item {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	width: 100%;
	max-width: 100%;
	padding-top: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	box-sizing: border-box;
	overflow: visible; /* Allow badge to show outside */
}

/* Only hide overflow for reveal animation - ensure image stays in section */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item {
	overflow: hidden !important; /* Ensure reveal animation doesn't overflow into next section */
	position: relative; /* Ensure badge and image positioning works */
	contain: layout style; /* Contain the image and styles within this section */
	height: auto; /* Allow height to adjust */
	min-height: 60px; /* Minimum height for item */
}

/* Ensure badge is always visible - badge positioned relative to item with padding */
.elementor-widget-serenity_service_hover .serenity-service-item.has-badge {
	overflow: visible !important; /* Allow badge to show outside - default for all items */
	padding-top: 30px !important; /* Extra space for badge - badge positioned at top: -8px relative to this padding */
	position: relative;
}

/* Only apply overflow hidden for reveal animation to contain image within section */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item.has-badge {
	overflow: visible !important; /* Allow badge to show at top: -8px like center animation */
	padding-top: 30px !important; /* Extra space for badge */
	position: relative !important;
}

/* Contain reveal image within bounds - image container clips itself */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item.has-badge .serenity-service-image {
	left: 0 !important;
	right: auto !important;
	width: 40% !important;
	max-width: 400px !important;
	max-height: 100% !important; /* Full height, no margin */
	overflow: hidden !important; /* Image container clips itself */
}

.elementor-widget-serenity_service_hover .serenity-service-item:hover {
	border-bottom-color: rgba(0, 0, 0, 0.2);
}

.elementor-widget-serenity_service_hover .serenity-service-item:last-child {
	border-bottom: none;
}

/* ================= BADGE ================= */
.elementor-widget-serenity_service_hover .serenity-service-badge {
	position: absolute;
	top: -8px !important; /* Position above the item to ensure visibility */
	left: 0;
	z-index: 30 !important; /* Very high z-index to ensure visibility above everything */
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	animation: badgePulse 2s ease-in-out infinite;
	pointer-events: none; /* Allow clicks to pass through */
	white-space: nowrap; /* Prevent text wrapping */
}

/* Ensure badge is visible for reveal animation - match center badge position exactly */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item.has-badge .serenity-service-badge {
	position: absolute !important;
	top: -8px !important; /* Match center badge position exactly */
	left: 0 !important;
	z-index: 30 !important;
	overflow: visible !important;
}

/* Ensure badge is visible for center animation - keep original position with visible overflow */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-item.has-badge {
	overflow: visible !important; /* Allow badge to show outside */
}

/* Contain center animation images within bounds */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-image {
	max-width: 90% !important;
	max-height: 80vh !important; /* Limit height to prevent overflow */
	overflow: visible; /* Allow image to show but constrain size */
}

@keyframes badgePulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
	}
}

/* ================= PRICING LINK ================= */
.elementor-widget-serenity_service_hover .serenity-service-pricing-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(102, 126, 234, 0.1);
	color: #667eea;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
}

.elementor-widget-serenity_service_hover .serenity-service-pricing-link:hover {
	background: rgba(102, 126, 234, 0.2);
	transform: translateX(4px);
}

.elementor-widget-serenity_service_hover .serenity-service-pricing-link svg {
	transition: transform 0.3s ease;
}

.elementor-widget-serenity_service_hover .serenity-service-pricing-link:hover svg {
	transform: translateX(4px);
}

/* ================= SERVICE CONTENT ================= */
.elementor-widget-serenity_service_hover .serenity-service-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
	width: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reveal animation - shift content to center/right when image slides in */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-content {
	position: relative;
	z-index: 2;
	padding-left: 0;
	transform: translateX(0);
	transition: padding-left 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:hover .serenity-service-content {
	padding-left: calc(40% + 20px); /* Shift content to right to make room for image */
	transform: translateX(0);
	position: relative !important;
	z-index: 3 !important;
}

/* ================= TITLE WRAPPER (Desktop: stacks title + service by) ================= */
.elementor-widget-serenity_service_hover .serenity-service-title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}

/* ================= SERVICE TITLE ================= */
.elementor-widget-serenity_service_hover .serenity-service-title {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	transition: color 0.3s ease;
}

/* ================= SERVICE SPACER ================= */
.elementor-widget-serenity_service_hover .serenity-service-spacer {
	flex: 1;
	min-width: 40px;
	height: 1px;
	margin: 0 20px;
	transition: all 0.3s ease;
}

/* ================= SERVICE RIGHT (PRICE + PRICING LINK) ================= */
.elementor-widget-serenity_service_hover .serenity-service-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* ================= SERVICE PRICE ================= */
.elementor-widget-serenity_service_hover .serenity-service-price {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	margin: 0;
	transition: color 0.3s ease;
	display: inline-block;
}

/* ================= SERVICE ARROW ================= */
/* Hide arrow on desktop - using pricing link instead */
.elementor-widget-serenity_service_hover .serenity-service-arrow {
	display: none;
}

/* ================= SERVICE IMAGE ================= */
/* ===== CENTER ANIMATION IMAGE: HIDDEN BY DEFAULT, SHOW ON ROW HOVER ONLY ===== */

/* Step 1: Hide ALL images always — maximum specificity */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget .serenity-service-list .serenity-service-item .serenity-service-image {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(1.05) !important;
	z-index: 1 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease !important;
	width: 300px !important;
	max-width: 90% !important;
	transform-origin: center center !important;
	perspective: 1000px !important;
	transform-style: preserve-3d !important;
}

/* Step 2: Show image ONLY when THIS specific row is hovered, center animation only */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-list .serenity-service-item:hover .serenity-service-image {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Reveal animation style - image positioned on left, slides in from left */
.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-image {
	left: 0 !important;
	top: 0 !important;
	transform: translateX(-100%) !important;
	width: 40% !important;
	max-width: 400px !important;
	height: 100% !important; /* Full height, no margin */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transform-origin: left center !important;
	transform-style: flat !important; /* Disable 3D for reveal animation */
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s ease !important;
	z-index: 1 !important; /* Ensure it's below content but visible */
	opacity: 0 !important;
	visibility: hidden !important;
	overflow: hidden !important; /* Enable border-radius clipping */
	position: absolute !important;
	clip: rect(auto, auto, auto, auto); /* Ensure image stays within bounds */
}

.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-image img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
	object-position: center !important;
	/* border-radius controlled by Elementor control via inline styles */
	min-width: 100% !important;
	min-height: 100% !important;
}

.elementor-widget-serenity_service_hover .serenity-service-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	min-width: 100%;
	min-height: 100%;
}

/* Show image on hover (desktop only) */
@media (min-width: 769px) {
	/* Default center animation hover - only apply if NOT reveal */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-item:hover .serenity-service-image {
		opacity: 1 !important;
		visibility: visible !important;
		max-width: 90% !important;
	}

	/* Reveal animation - slide in from left on hover */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:hover .serenity-service-image {
		left: 0 !important;
		top: 0 !important;
		transform: translateX(0) !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: 40% !important;
		max-width: 400px !important;
		height: 100% !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		z-index: 1 !important; /* Keep below content */
		position: absolute !important;
		max-height: 100% !important; /* Ensure image doesn't exceed item height */
	}

	.elementor-widget-serenity_service_hover .serenity-service-item:hover .serenity-service-content {
		position: relative;
		z-index: 3;
	}

	/* Hide by-arrow on desktop */
	.elementor-widget-serenity_service_hover .serenity-service-by-arrow {
		display: none;
	}

	/* Show pricing link in service-right on desktop */
	.elementor-widget-serenity_service_hover .serenity-service-pricing-link {
		display: inline-flex;
	}
}

/* ================= SERVICE BY ================= */
.elementor-widget-serenity_service_hover .serenity-service-by {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
}

.elementor-widget-serenity_service_hover .serenity-service-by-label {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 12px;
}

.elementor-widget-serenity_service_hover .serenity-service-by-name {
	font-weight: 400;
}

.elementor-widget-serenity_service_hover .serenity-service-by-arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

.elementor-widget-serenity_service_hover .serenity-service-by-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
	/* Tabs Header Mobile */
	.elementor-widget-serenity_service_hover .serenity-service-tabs-header {
		margin-bottom: 24px;
		text-align: left;
		padding: 0 15px;
	}

	.elementor-widget-serenity_service_hover .serenity-service-tabs-heading {
		font-size: 24px;
		line-height: 1.3;
		justify-content: flex-start;
		gap: 8px;
	}

	.elementor-widget-serenity_service_hover .serenity-dropdown-trigger {
		font-size: 24px;
		padding: 6px 10px;
	}

	.elementor-widget-serenity_service_hover .serenity-dropdown-icon {
		width: 20px;
		height: 20px;
	}

	.elementor-widget-serenity_service_hover .serenity-dropdown-menu {
		min-width: 180px;
		left: 0;
		right: auto;
	}

	.elementor-widget-serenity_service_hover .serenity-dropdown-item {
		padding: 10px 14px;
		font-size: 14px;
	}

	.elementor-widget-serenity_service_hover .serenity-service-item {
		display: flex;
		flex-direction: column;
		padding: 0;
		border-bottom: none;
		margin-bottom: 24px;
		margin-top: 20px; /* Space for badge floating above */
		border-radius: 12px;
		overflow: visible; /* Allow badge to show outside */
		transition: box-shadow 0.3s ease, transform 0.3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		position: relative;
	}

	.elementor-widget-serenity_service_hover .serenity-service-item:hover {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		transform: translateY(-4px);
	}

	/* Reveal animation - no hover effects on mobile, plain card stays as is */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* No shadow change */
		transform: none !important; /* No transform on hover */
	}

	.elementor-widget-serenity_service_hover .serenity-service-item:last-child {
		margin-bottom: 0;
	}

	/* Hide ALL images completely on mobile - both center and reveal animations */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget .serenity-service-list .serenity-service-item .serenity-service-image {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Hide reveal image completely on mobile - plain card with text only */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-image,
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:hover .serenity-service-image,
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:active .serenity-service-image {
		display: none !important; /* Completely hide image for reveal animation on mobile */
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Prevent content padding shift on tap for reveal on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:hover .serenity-service-content,
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:active .serenity-service-content {
		padding-left: 20px !important;
		transform: none !important;
	}

	/* Hide center image completely on mobile — including on tap (:hover) */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="center"] .serenity-service-image,
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-list .serenity-service-item:hover .serenity-service-image,
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-list .serenity-service-item:focus .serenity-service-image,
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget:not([data-image-animation="reveal"]) .serenity-service-list .serenity-service-item:active .serenity-service-image {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Hide ALL image img elements completely on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget .serenity-service-list .serenity-service-item .serenity-service-image img {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Hide reveal image img completely on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-image img {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Hide center image img completely on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="center"] .serenity-service-image img {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	/* Content section - main content since no image */
	.elementor-widget-serenity_service_hover .serenity-service-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		order: 1; /* Content comes first since no image */
		width: 100%;
		padding: 20px;
		position: relative;
	}

	/* Reveal animation - ensure content doesn't shift/push on mobile, plain card */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item {
		display: flex;
		flex-direction: column;
		padding: 0 !important;
		border-bottom: none;
		margin-bottom: 24px;
		margin-top: 20px;
		border-radius: 12px;
		overflow: visible;
		transition: box-shadow 0.3s ease, transform 0.3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		position: relative;
	}

	/* Reveal animation - content order when no image */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-content {
		order: 1 !important; /* Content comes first when image is hidden */
		padding-left: 20px !important; /* No padding shift on mobile */
		padding-right: 20px !important;
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		transform: none !important; /* No transform shift */
		transition: none !important; /* No transition effects */
		width: 100% !important;
	}

	/* Reveal animation - no hover effects on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-hover-widget[data-image-animation="reveal"] .serenity-service-item:hover .serenity-service-content {
		padding-left: 20px !important; /* No shift on hover */
		transform: none !important;
	}

	/* Hide title wrapper on mobile - use direct children */
	.elementor-widget-serenity_service_hover .serenity-service-title-wrapper {
		display: contents; /* Makes children behave as direct children of parent */
		width: 100%;
	}

	/* Title styling - decorative serif font, deep red/burgundy */
	.elementor-widget-serenity_service_hover .serenity-service-title {
		font-size: 24px;
		font-weight: 400;
		line-height: 1.3;
		width: 100%;
		margin: 0 0 8px 0;
		color: #8b2635;
		font-family: Georgia, 'Times New Roman', serif;
		order: 1;
	}

	/* Hide spacer on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-spacer {
		display: none;
	}

	/* Service by section - comes after title (order 2) */
	.elementor-widget-serenity_service_hover .serenity-service-by {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0 0 12px 0;
		padding: 0;
		font-size: 14px;
		color: #8b2635;
		order: 2;
		width: 100%;
	}

	.elementor-widget-serenity_service_hover .serenity-service-by-label {
		display: none; /* Hide "BY:" label */
	}

	.elementor-widget-serenity_service_hover .serenity-service-by-name {
		font-weight: 400;
		font-size: 14px;
	}

	/* Hide by arrow on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-by-arrow {
		display: none;
	}

	/* Price + See Pricing container - horizontal layout (order 3) */
	.elementor-widget-serenity_service_hover .serenity-service-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		order: 3;
		margin: 0;
	}

	.elementor-widget-serenity_service_hover .serenity-service-price {
		font-size: 16px;
		font-weight: 500;
		border-radius: 20px;
		color: #333;
		display: inline-block;
		width: auto;
	}

	/* Hide upward arrow on mobile */
	.elementor-widget-serenity_service_hover .serenity-service-right .serenity-service-arrow {
		display: none;
	}

	/* Badge on mobile - positioned outside/above card */
	.elementor-widget-serenity_service_hover .serenity-service-badge {
		top: -10px;
		left: 15px;
		position: absolute;
		z-index: 20;
	}

	/* Pricing link on mobile - inline with price on the right */
	.elementor-widget-serenity_service_hover .serenity-service-pricing-link {
		position: relative;
		margin: 0;
		font-size: 14px;
	}
}
/**
 * CIRCULAR MORPHING HOVER ANIMATION (DYNAMIC)
 * For Dropdown Menu Items
 * 
 * Controlled by Elementor - colors are dynamic!
 *
 * @package Serenity_CTA_Elements
 */

/* ========================================
   CIRCULAR MORPHING HOVER EFFECT
   Dropdown menu items get circular reveal on hover
   ======================================== */

.elementor-widget-serenity_service_hover .serenity-dropdown-item {
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: color 0.4s ease;
}

/* Circular morphing background - colors controlled by Elementor */
.elementor-widget-serenity_service_hover .serenity-dropdown-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background: linear-gradient(135deg, var(--morph-color-start, #667eea) 0%, var(--morph-color-end, #764ba2) 100%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
	            height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

/* On hover - circle expands to cover entire item */
.elementor-widget-serenity_service_hover .serenity-dropdown-item:hover::before {
	width: 300%;
	height: 300%;
}

/* Ensure text stays above the circle */
.elementor-widget-serenity_service_hover .serenity-dropdown-item {
	position: relative;
	z-index: 1;
}

/* Keyboard navigation support */
.elementor-widget-serenity_service_hover .serenity-dropdown-item:focus::before {
	width: 300%;
	height: 300%;
}

.elementor-widget-serenity_service_hover .serenity-dropdown-item:focus {
	outline: none;
}

/* ========================================
   MOBILE OPTIMIZATION
   Faster animation on mobile for better performance
   ======================================== */
@media (max-width: 768px) {
	.elementor-widget-serenity_service_hover .serenity-dropdown-item::before {
		transition: width 0.4s ease, height 0.4s ease;
	}
}