/**
 * Estimated Delivery Timeline — frontend styles.
 * Colors are driven by CSS custom properties (--wced-color-primary /
 * --wced-color-secondary) injected inline from the admin settings,
 * with safe fallbacks defined here.
 */

:root {
	--wced-color-primary: #7b2ff7;
	--wced-color-secondary: #3b82f6;
	--wced-font-size-desktop: 16px;
	--wced-font-size-tablet: 15px;
	--wced-font-size-mobile: 14px;
	--wced-font-size-small-mobile: 13px;
}

/* ------------------------------------------------------------------ */
/* Card container                                                     */
/* ------------------------------------------------------------------ */

.wced-timeline-card {
	--wced-radius: 18px;
	box-sizing: border-box;
	margin: 24px 0 !important;
	padding: 24px 20px !important;
	border-radius: var(--wced-radius) !important;
	position: relative;
	overflow: hidden;
	font-size: var(--wced-font-size-desktop) !important;
	color: #fff !important;
	background: linear-gradient( 135deg, var(--wced-color-primary), var(--wced-color-secondary) ) !important;
	box-shadow: 0 10px 30px -8px rgba( 0, 0, 0, 0.35 ), 0 0 0 1px rgba( 255, 255, 255, 0.06 ) inset !important;
	isolation: isolate;
}

/* Soft glass highlight layer for the glassmorphism feel. */
.wced-timeline-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 160deg, rgba( 255, 255, 255, 0.22 ), rgba( 255, 255, 255, 0 ) 55% );
	pointer-events: none;
	z-index: 0;
}

.wced-timeline-card * {
	position: relative;
	z-index: 1;
}

.wced-timeline-card__title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 0 20px !important;
	font-size: 1.15em !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	color: #fff !important;
}

.wced-timeline-card__title-icon {
	font-size: 1.05em;
}

/* ------------------------------------------------------------------ */
/* Timeline layout                                                    */
/* ------------------------------------------------------------------ */

.wced-timeline {
	position: relative;
}

.wced-timeline__line {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	height: 3px;
	background: rgba( 255, 255, 255, 0.28 );
	border-radius: 3px;
	overflow: hidden;
}

.wced-timeline__line-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba( 255, 255, 255, 0.9 );
}

.wced-timeline-card.wced-animate.wced-visible .wced-timeline__line-fill {
	width: 100%;
	transition: width 1.4s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.2s;
}

.wced-timeline-card:not( .wced-animate ) .wced-timeline__line-fill {
	width: 100%;
}

.wced-timeline__steps {
	position: relative;
	display: flex !important;
	justify-content: space-between !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 6px;
}

.wced-timeline__step {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
	flex: 1 1 0;
	min-width: 0;
}

.wced-timeline__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	line-height: 1;
	font-size: 1.3em;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.18 );
	border: 2px solid rgba( 255, 255, 255, 0.55 );
	margin-bottom: 8px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wced-timeline-card:hover .wced-timeline__icon {
	box-shadow: 0 0 16px rgba( 255, 255, 255, 0.55 );
}

.wced-timeline__step:hover .wced-timeline__icon {
	transform: translateY( -3px ) scale( 1.08 );
}

.wced-timeline__label {
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba( 255, 255, 255, 0.92 );
	margin-bottom: 2px;
}

.wced-timeline__date {
	font-size: 0.85em;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Animations (lightweight CSS only - no JS animation libraries)      */
/* ------------------------------------------------------------------ */

.wced-timeline-card.wced-animate {
	opacity: 0;
	transform: translateY( 12px );
}

.wced-timeline-card.wced-animate.wced-visible {
	opacity: 1;
	transform: translateY( 0 );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wced-timeline-card.wced-animate.wced-visible .wced-timeline__step {
	opacity: 0;
	animation: wced-step-in 0.5s ease forwards;
	animation-delay: var( --wced-step-delay, 0ms );
}

@keyframes wced-step-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

.wced-timeline-card.wced-animate .wced-timeline__icon {
	animation: wced-float 3.2s ease-in-out infinite;
}

@keyframes wced-float {
	0%,
	100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -3px );
	}
}

/* Respect users who prefer reduced motion, regardless of the plugin setting. */
@media ( prefers-reduced-motion: reduce ) {
	.wced-timeline-card.wced-animate,
	.wced-timeline-card.wced-animate.wced-visible,
	.wced-timeline-card.wced-animate .wced-timeline__step,
	.wced-timeline-card.wced-animate .wced-timeline__icon,
	.wced-timeline-card.wced-animate .wced-timeline__line-fill {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.wced-timeline-card.wced-animate .wced-timeline__line-fill {
		width: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* Responsive / mobile-first adjustments                              */
/* ------------------------------------------------------------------ */

@media ( max-width: 600px ) {
	.wced-timeline-card {
		font-size: var( --wced-font-size-tablet ) !important;
	}
}

@media ( max-width: 480px ) {
	.wced-timeline-card {
		font-size: var( --wced-font-size-mobile ) !important;
		padding: 18px 14px !important;
	}

	.wced-timeline__icon {
		width: 32px;
		height: 32px;
	}

	.wced-timeline__line {
		top: 16px;
		left: 16px;
		right: 16px;
	}
}

@media ( max-width: 360px ) {
	.wced-timeline-card {
		font-size: var( --wced-font-size-small-mobile ) !important;
		padding: 16px 10px !important;
	}

	.wced-timeline__icon {
		width: 28px;
		height: 28px;
	}

	.wced-timeline__line {
		top: 14px;
		left: 14px;
		right: 14px;
	}
}

/* ------------------------------------------------------------------ */
/* Sticky Add to Cart safety net                                      */
/* Hides the card if it is ever swept into a sticky add-to-cart bar   */
/* built by cloning DOM via JavaScript rather than re-firing hooks.    */
/* ------------------------------------------------------------------ */

.storefront-sticky-add-to-cart .wced-timeline-card,
.sticky-add-to-cart .wced-timeline-card,
.sticky-atc .wced-timeline-card,
.woo-sticky-cart .wced-timeline-card,
.wcbc-sticky-cart .wced-timeline-card,
.iconic-woo-sticky-add-to-cart .wced-timeline-card,
.theiaStickySidebar .wced-timeline-card {
	display: none !important;
}