/**
 * VibeShift Boost
 *
 * Countdown Styles
 *
 * File:
 * assets/css/countdown.css
 *
 * Responsibility:
 * - Countdown presentation.
 * - Countdown cards and containers.
 * - Remaining-time display.
 * - Progress indicators.
 * - Active / warning / expired visual states.
 * - Countdown badges.
 * - Countdown responsive behavior.
 *
 * Does NOT contain:
 * - Countdown calculations.
 * - Expiration logic.
 * - Product status changes.
 * - AJAX requests.
 * - JavaScript behavior.
 */


/* ==========================================================================
   COUNTDOWN ROOT
   ========================================================================== */

.vibeshiftboost-countdown {

	--vibeshiftboost-countdown-primary: #2563eb;
	--vibeshiftboost-countdown-primary-hover: #1d4ed8;

	--vibeshiftboost-countdown-success: #16a34a;
	--vibeshiftboost-countdown-warning: #d97706;
	--vibeshiftboost-countdown-danger: #dc2626;

	--vibeshiftboost-countdown-text: #1e293b;
	--vibeshiftboost-countdown-muted: #64748b;

	--vibeshiftboost-countdown-border: #e2e8f0;
	--vibeshiftboost-countdown-border-light: #f1f5f9;

	--vibeshiftboost-countdown-background: #f8fafc;
	--vibeshiftboost-countdown-card: #ffffff;

	--vibeshiftboost-countdown-radius: 14px;
	--vibeshiftboost-countdown-radius-small: 9px;

	--vibeshiftboost-countdown-shadow:
		0 4px 14px rgba(15, 23, 42, 0.06);

	position: relative;

	width: 100%;

	min-width: 0;

	color:
		var(--vibeshiftboost-countdown-text);

	box-sizing: border-box;
}


/* ==========================================================================
   BOX SIZING
   ========================================================================== */

.vibeshiftboost-countdown *,
.vibeshiftboost-countdown *::before,
.vibeshiftboost-countdown *::after {

	box-sizing: border-box;
}


/* ==========================================================================
   COUNTDOWN CONTAINER
   ========================================================================== */

.vibeshiftboost-countdown-container {

	position: relative;

	display: flex;

	flex-direction: column;

	width: 100%;

	min-width: 0;

	padding: 16px;

	border:
		1px solid
		var(--vibeshiftboost-countdown-border);

	border-radius:
		var(--vibeshiftboost-countdown-radius);

	background:
		var(--vibeshiftboost-countdown-card);

	box-shadow:
		var(--vibeshiftboost-countdown-shadow);
}


/* ==========================================================================
   COUNTDOWN HEADER
   ========================================================================== */

.vibeshiftboost-countdown-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	margin-bottom: 12px;
}

.vibeshiftboost-countdown-heading {

	display: flex;

	align-items: center;

	gap: 8px;

	min-width: 0;
}

.vibeshiftboost-countdown-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 32px;

	height: 32px;

	flex: 0 0 32px;

	border-radius:
		var(--vibeshiftboost-countdown-radius-small);

	background:
		#eff6ff;

	color:
		var(--vibeshiftboost-countdown-primary);
}

.vibeshiftboost-countdown-icon svg {

	display: block;

	width: 17px;

	height: 17px;
}

.vibeshiftboost-countdown-title {

	margin: 0;

	color:
		var(--vibeshiftboost-countdown-text);

	font-size: 14px;

	font-weight: 750;

	line-height: 1.3;
}

.vibeshiftboost-countdown-subtitle {

	margin: 2px 0 0;

	color:
		var(--vibeshiftboost-countdown-muted);

	font-size: 10px;

	line-height: 1.4;
}


/* ==========================================================================
   COUNTDOWN DISPLAY
   ========================================================================== */

.vibeshiftboost-countdown-display {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 7px;

	width: 100%;

	margin: 4px 0 14px;
}

.vibeshiftboost-countdown-unit {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	min-width: 52px;

	padding: 9px 7px;

	border:
		1px solid
		var(--vibeshiftboost-countdown-border);

	border-radius:
		var(--vibeshiftboost-countdown-radius-small);

	background:
		#f8fafc;

	text-align: center;
}

.vibeshiftboost-countdown-value {

	display: block;

	color:
		var(--vibeshiftboost-countdown-text);

	font-size: 23px;

	font-weight: 750;

	line-height: 1;

	font-variant-numeric: tabular-nums;
}

.vibeshiftboost-countdown-label {

	display: block;

	margin-top: 5px;

	color:
		var(--vibeshiftboost-countdown-muted);

	font-size: 8px;

	font-weight: 700;

	line-height: 1;

	text-transform: uppercase;

	letter-spacing: 0.05em;
}

.vibeshiftboost-countdown-separator {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	color:
		var(--vibeshiftboost-countdown-muted);

	font-size: 17px;

	font-weight: 700;

	line-height: 1;

	padding-bottom: 12px;
}


/* ==========================================================================
   COMPACT COUNTDOWN
   ========================================================================== */

.vibeshiftboost-countdown-compact {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	min-height: 30px;

	padding: 5px 9px;

	border:
		1px solid
		var(--vibeshiftboost-countdown-border);

	border-radius: 999px;

	background:
		#fff;

	color:
		var(--vibeshiftboost-countdown-text);

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

	font-variant-numeric: tabular-nums;
}

.vibeshiftboost-countdown-compact-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 16px;

	height: 16px;

	color:
		var(--vibeshiftboost-countdown-primary);
}


/* ==========================================================================
   COUNTDOWN TIMER TEXT
   ========================================================================== */

.vibeshiftboost-countdown-time {

	display: inline-block;

	color:
		var(--vibeshiftboost-countdown-text);

	font-size: 20px;

	font-weight: 750;

	line-height: 1.15;

	font-variant-numeric: tabular-nums;

	letter-spacing: 0.02em;
}

.vibeshiftboost-countdown-time-small {

	font-size: 14px;
}

.vibeshiftboost-countdown-time-large {

	font-size: 30px;
}


/* ==========================================================================
   COUNTDOWN MESSAGE
   ========================================================================== */

.vibeshiftboost-countdown-message {

	margin: 0;

	color:
		var(--vibeshiftboost-countdown-muted);

	font-size: 11px;

	line-height: 1.5;

	text-align: center;
}

.vibeshiftboost-countdown-message strong {

	color:
		var(--vibeshiftboost-countdown-text);

	font-weight: 750;
}


/* ==========================================================================
   PROGRESS
   ========================================================================== */

.vibeshiftboost-countdown-progress {

	width: 100%;

	height: 7px;

	margin-top: 13px;

	overflow: hidden;

	border-radius: 999px;

	background:
		#e2e8f0;
}

.vibeshiftboost-countdown-progress-bar {

	display: block;

	width: 0;

	height: 100%;

	border-radius: inherit;

	background:
		var(--vibeshiftboost-countdown-primary);

	transition:
		width 0.35s ease;
}


/* ==========================================================================
   PROGRESS STATES
   ========================================================================== */

.vibeshiftboost-countdown-active
.vibeshiftboost-countdown-progress-bar {

	background:
		var(--vibeshiftboost-countdown-primary);
}

.vibeshiftboost-countdown-safe
.vibeshiftboost-countdown-progress-bar {

	background:
		var(--vibeshiftboost-countdown-success);
}

.vibeshiftboost-countdown-warning
.vibeshiftboost-countdown-progress-bar {

	background:
		var(--vibeshiftboost-countdown-warning);
}

.vibeshiftboost-countdown-danger
.vibeshiftboost-countdown-progress-bar {

	background:
		var(--vibeshiftboost-countdown-danger);
}


/* ==========================================================================
   STATE BADGES
   ========================================================================== */

.vibeshiftboost-countdown-badge {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 5px;

	min-height: 23px;

	padding: 4px 9px;

	border:
		1px solid transparent;

	border-radius: 999px;

	font-size: 9px;

	font-weight: 750;

	line-height: 1;

	white-space: nowrap;
}

.vibeshiftboost-countdown-badge-active {

	background:
		#eff6ff;

	border-color:
		#dbeafe;

	color:
		#1d4ed8;
}

.vibeshiftboost-countdown-badge-safe {

	background:
		#f0fdf4;

	border-color:
		#dcfce7;

	color:
		#15803d;
}

.vibeshiftboost-countdown-badge-warning {

	background:
		#fffbeb;

	border-color:
		#fef3c7;

	color:
		#b45309;
}

.vibeshiftboost-countdown-badge-danger {

	background:
		#fef2f2;

	border-color:
		#fee2e2;

	color:
		#b91c1c;
}

.vibeshiftboost-countdown-badge-expired {

	background:
		#f1f5f9;

	border-color:
		#e2e8f0;

	color:
		#64748b;
}


/* ==========================================================================
   STATUS DOT
   ========================================================================== */

.vibeshiftboost-countdown-status {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	font-size: 10px;

	font-weight: 700;
}

.vibeshiftboost-countdown-status-dot {

	width: 7px;

	height: 7px;

	flex: 0 0 7px;

	border-radius: 50%;

	background:
		#94a3b8;
}

.vibeshiftboost-countdown-status-active
.vibeshiftboost-countdown-status-dot {

	background:
		var(--vibeshiftboost-countdown-primary);
}

.vibeshiftboost-countdown-status-safe
.vibeshiftboost-countdown-status-dot {

	background:
		var(--vibeshiftboost-countdown-success);
}

.vibeshiftboost-countdown-status-warning
.vibeshiftboost-countdown-status-dot {

	background:
		var(--vibeshiftboost-countdown-warning);
}

.vibeshiftboost-countdown-status-danger
.vibeshiftboost-countdown-status-dot {

	background:
		var(--vibeshiftboost-countdown-danger);
}


/* ==========================================================================
   WARNING STATE
   ========================================================================== */

.vibeshiftboost-countdown-warning {

	border-color:
		#fde68a;
}

.vibeshiftboost-countdown-warning
.vibeshiftboost-countdown-container {

	border-color:
		#fde68a;
}

.vibeshiftboost-countdown-warning
.vibeshiftboost-countdown-icon {

	background:
		#fffbeb;

	color:
		var(--vibeshiftboost-countdown-warning);
}

.vibeshiftboost-countdown-warning
.vibeshiftboost-countdown-value {

	color:
		#b45309;
}


/* ==========================================================================
   CRITICAL STATE
   ========================================================================== */

.vibeshiftboost-countdown-critical {

	border-color:
		#fecaca;
}

.vibeshiftboost-countdown-critical
.vibeshiftboost-countdown-container {

	border-color:
		#fecaca;
}

.vibeshiftboost-countdown-critical
.vibeshiftboost-countdown-icon {

	background:
		#fef2f2;

	color:
		var(--vibeshiftboost-countdown-danger);
}

.vibeshiftboost-countdown-critical
.vibeshiftboost-countdown-value {

	color:
		#b91c1c;
}


/* ==========================================================================
   EXPIRED STATE
   ========================================================================== */

.vibeshiftboost-countdown-expired {

	opacity: 0.88;
}

.vibeshiftboost-countdown-expired
.vibeshiftboost-countdown-container {

	background:
		#f8fafc;

	border-color:
		#e2e8f0;
}

.vibeshiftboost-countdown-expired
.vibeshiftboost-countdown-icon {

	background:
		#f1f5f9;

	color:
		#64748b;
}

.vibeshiftboost-countdown-expired
.vibeshiftboost-countdown-value {

	color:
		#64748b;
}

.vibeshiftboost-countdown-expired
.vibeshiftboost-countdown-progress-bar {

	background:
		#94a3b8;
}


/* ==========================================================================
   LAST 6 HOURS
   ========================================================================== */

.vibeshiftboost-countdown-six-hours {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	padding: 4px 8px;

	border:
		1px solid
		#dbeafe;

	border-radius: 999px;

	background:
		#eff6ff;

	color:
		#1d4ed8;

	font-size: 9px;

	font-weight: 750;

	line-height: 1;
}

.vibeshiftboost-countdown-six-hours::before {

	content: "";

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background:
		currentColor;
}


/* ==========================================================================
   COUNTDOWN FOOTER
   ========================================================================== */

.vibeshiftboost-countdown-footer {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 10px;

	margin-top: 13px;

	padding-top: 11px;

	border-top:
		1px solid
		var(--vibeshiftboost-countdown-border-light);

	color:
		var(--vibeshiftboost-countdown-muted);

	font-size: 10px;
}

.vibeshiftboost-countdown-footer-item {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	min-width: 0;
}


/* ==========================================================================
   INLINE COUNTDOWN
   ========================================================================== */

.vibeshiftboost-countdown-inline {

	display: inline-flex;

	align-items: center;

	gap: 5px;

	color:
		var(--vibeshiftboost-countdown-text);

	font-size: 12px;

	font-weight: 700;

	font-variant-numeric: tabular-nums;
}

.vibeshiftboost-countdown-inline-label {

	color:
		var(--vibeshiftboost-countdown-muted);

	font-weight: 600;
}


/* ==========================================================================
   COUNTDOWN PULSE
   ========================================================================== */

.vibeshiftboost-countdown-pulse {

	animation:
		vibeshiftboost-countdown-pulse
		2s ease-in-out infinite;
}

@keyframes vibeshiftboost-countdown-pulse {

	0%,
	100% {

		opacity: 1;
	}

	50% {

		opacity: 0.65;
	}
}


/* ==========================================================================
   CRITICAL PULSE
   ========================================================================== */

.vibeshiftboost-countdown-critical-pulse {

	animation:
		vibeshiftboost-countdown-critical-pulse
		1s ease-in-out infinite;
}

@keyframes vibeshiftboost-countdown-critical-pulse {

	0%,
	100% {

		box-shadow:
			0 0 0 0
			rgba(
				220,
				38,
				38,
				0
			);
	}

	50% {

		box-shadow:
			0 0 0 5px
			rgba(
				220,
				38,
				38,
				0.10
			);
	}
}


/* ==========================================================================
   COUNTDOWN EMPTY STATE
   ========================================================================== */

.vibeshiftboost-countdown-empty {

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 90px;

	padding: 18px;

	border:
		1px dashed
		var(--vibeshiftboost-countdown-border);

	border-radius:
		var(--vibeshiftboost-countdown-radius);

	background:
		#fff;

	color:
		var(--vibeshiftboost-countdown-muted);

	font-size: 11px;

	text-align: center;
}


/* ==========================================================================
   COUNTDOWN LOADING
   ========================================================================== */

.vibeshiftboost-countdown-loading {

	position: relative;

	min-height: 80px;

	pointer-events: none;
}

.vibeshiftboost-countdown-loading::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 10;

	border-radius:
		inherit;

	background:
		rgba(
			255,
			255,
			255,
			0.78
		);
}

.vibeshiftboost-countdown-spinner {

	display: inline-block;

	width: 18px;

	height: 18px;

	border:
		2px solid
		#cbd5e1;

	border-top-color:
		var(--vibeshiftboost-countdown-primary);

	border-radius: 50%;

	animation:
		vibeshiftboost-countdown-spin
		0.75s linear infinite;
}

@keyframes vibeshiftboost-countdown-spin {

	to {

		transform:
			rotate(360deg);
	}
}


/* ==========================================================================
   COUNTDOWN SKELETON
   ========================================================================== */

.vibeshiftboost-countdown-skeleton {

	position: relative;

	overflow: hidden;

	background:
		#e2e8f0;

	border-radius: 7px;

	color: transparent !important;
}

.vibeshiftboost-countdown-skeleton::after {

	content: "";

	position: absolute;

	inset: 0;

	transform:
		translateX(-100%);

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(
				255,
				255,
				255,
				0.65
			),
			transparent
		);

	animation:
		vibeshiftboost-countdown-skeleton
		1.4s infinite;
}

@keyframes vibeshiftboost-countdown-skeleton {

	100% {

		transform:
			translateX(100%);
	}
}


/* ==========================================================================
   COUNTDOWN SIZE VARIANTS
   ========================================================================== */

.vibeshiftboost-countdown-small
.vibeshiftboost-countdown-unit {

	min-width: 42px;

	padding: 7px 5px;
}

.vibeshiftboost-countdown-small
.vibeshiftboost-countdown-value {

	font-size: 17px;
}

.vibeshiftboost-countdown-small
.vibeshiftboost-countdown-label {

	font-size: 7px;
}

.vibeshiftboost-countdown-large
.vibeshiftboost-countdown-unit {

	min-width: 68px;

	padding: 12px 9px;
}

.vibeshiftboost-countdown-large
.vibeshiftboost-countdown-value {

	font-size: 30px;
}

.vibeshiftboost-countdown-large
.vibeshiftboost-countdown-label {

	font-size: 9px;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 650px) {

	.vibeshiftboost-countdown-container {

		padding: 14px;

		border-radius:
			var(--vibeshiftboost-countdown-radius-small);
	}

	.vibeshiftboost-countdown-header {

		align-items: flex-start;

		flex-direction: column;
	}

	.vibeshiftboost-countdown-display {

		gap: 5px;
	}

	.vibeshiftboost-countdown-unit {

		min-width: 46px;

		padding: 8px 5px;
	}

	.vibeshiftboost-countdown-value {

		font-size: 20px;
	}

	.vibeshiftboost-countdown-separator {

		font-size: 14px;
	}

	.vibeshiftboost-countdown-footer {

		align-items: flex-start;

		flex-direction: column;
	}
}


@media screen and (max-width: 420px) {

	.vibeshiftboost-countdown-display {

		gap: 3px;
	}

	.vibeshiftboost-countdown-unit {

		min-width: 40px;

		padding: 7px 4px;
	}

	.vibeshiftboost-countdown-value {

		font-size: 17px;
	}

	.vibeshiftboost-countdown-label {

		font-size: 7px;
	}

	.vibeshiftboost-countdown-separator {

		font-size: 12px;

		padding-bottom: 9px;
	}

	.vibeshiftboost-countdown-time-large {

		font-size: 24px;
	}
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.vibeshiftboost-countdown *,
	.vibeshiftboost-countdown *::before,
	.vibeshiftboost-countdown *::after {

		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			0.01ms !important;
	}
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

	.vibeshiftboost-countdown {

		box-shadow: none !important;
	}

	.vibeshiftboost-countdown-pulse,
	.vibeshiftboost-countdown-critical-pulse {

		animation: none !important;
	}
}


/* Final six-hour warning shown on the actual WooCommerce product page. */
.vibeshiftboost-final-6-hour-countdown {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    padding:16px 18px;
    margin:0;
    border:1px solid color-mix(in srgb, var(--vibeshiftboost-warning-text, #9a3412) 20%, transparent);
    border-radius:12px;
    background:var(--vibeshiftboost-warning-bg, #fff7ed);
    color:var(--vibeshiftboost-warning-text, #9a3412);
    text-align:center;
}
.vibeshiftboost-final-6-hour-label { font-size:13px; font-weight:800; letter-spacing:.04em; }
.vibeshiftboost-final-6-hour-time { font-size:clamp(22px,4vw,34px); font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums; }
.vibeshiftboost-final-6-hour-countdown small { font-size:11px; opacity:.8; }
.vibeshiftboost-final-6-hour-countdown.is-expired { opacity:.75; }