/**
 * KFFM Timer Bar Styles
 */

/* Timer bar base styles */
.kffm-timer-bar {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	box-sizing: border-box;
	text-align: center;
}

/* Sticky top bar — position:sticky keeps the bar in the document flow so the
   page content is pushed down naturally, while the bar stays fixed at the top
   of the viewport as the visitor scrolls. No JS padding adjustment needed. */
.kffm-timer-sticky.kffm-timer-top {
	position: sticky;
	top: 0;
	left: 0;
}

/* Sticky bottom bar — position:fixed is used here because sticky:bottom only
   anchors to the bottom of the container, not the viewport. JS adds
   padding-bottom to the body so content isn't hidden behind it. */
.kffm-timer-sticky.kffm-timer-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
}

/* Non-sticky bars scroll with the page content */
.kffm-timer-bar.kffm-timer-top:not(.kffm-timer-sticky),
.kffm-timer-bar.kffm-timer-bottom:not(.kffm-timer-sticky) {
	position: relative;
}

/* Timer inner container */
.kffm-timer-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 10px 20px;
	max-width: 1200px;
	width: 100%;
}

/* Timer message */
.kffm-timer-message {
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* Timer countdown styling - make numbers stand out */
.kffm-timer-message b,
.kffm-timer-message strong {
	font-weight: 700;
}

/* Timer image — dimensions controlled by inline styles from JS admin settings.
   height:40px is only the CSS fallback when no custom size is configured. */
.kffm-timer-image {
	display: block;
	width: auto;
	height: 40px;
}

/* Add padding to body when sticky top bar is present */
body.kffm-has-sticky-top-timer {
	padding-top: 50px;
}

body.kffm-has-sticky-bottom-timer {
	padding-bottom: 50px;
}

/* Mobile responsiveness */
@media screen and (max-width: 600px) {
	.kffm-timer-inner {
		flex-direction: column;
		gap: 8px;
		padding: 8px 15px;
	}

	.kffm-timer-image {
		height: 30px;
	}

	.kffm-timer-message {
		font-size: 14px !important;
	}
}

/* Animation for urgency */
@keyframes kffmTimerPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

.kffm-timer-bar.kffm-timer-urgent {
	animation: kffmTimerPulse 1s ease-in-out infinite;
}