/* Countdown Timer Pro - estilos frontend
 * Nota: el tamaño de los números y el alto de cada ficha se calculan en JS
 * (assets/js/countdown.js) a partir del ancho real del contenedor, así que
 * siempre ocupan ~90% del alto de la ficha tanto en móvil como en desktop.
 * No edites font-size/height de .ctp-digit-inner/.ctp-digit aquí: usa las
 * variables --ctp-font-size / --ctp-tile-height que fija el JS, o ajusta
 * las constantes al inicio de countdown.js.
 */

.ctp-countdown {
	--ctp-bg: #b6862e;
	--ctp-digit-color: #ffffff;
	--ctp-label-color: #ffffff;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	gap: 4%;
}

.ctp-countdown,
.ctp-countdown * {
	box-sizing: border-box;
}

.ctp-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
}

.ctp-unit-digits {
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 6%;
}

.ctp-digit {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: var( --ctp-tile-height, 64px );
	background: var( --ctp-bg );
	border-radius: 14%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.35 );
	perspective: 300px;
	transition: height 0.15s ease;

	/* Muesca circular transparente en el borde izquierdo y derecho, a la
	   mitad de la altura de la ficha (recorte real: se ve lo que haya
	   detrás, sea cual sea el fondo). --ctp-notch-radius lo fija el JS en
	   función del ancho real de la ficha. */
	-webkit-mask-image:
		radial-gradient( circle var( --ctp-notch-radius, 8px ) at 0% 50%, transparent 99%, #000 100% ),
		radial-gradient( circle var( --ctp-notch-radius, 8px ) at 100% 50%, transparent 99%, #000 100% );
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: source-over, source-in;
	mask-image:
		radial-gradient( circle var( --ctp-notch-radius, 8px ) at 0% 50%, transparent 99%, #000 100% ),
		radial-gradient( circle var( --ctp-notch-radius, 8px ) at 100% 50%, transparent 99%, #000 100% );
	mask-repeat: no-repeat;
	mask-composite: intersect;
}

.ctp-digit-inner {
	position: relative;
	z-index: 3;
	display: inline-block;
	font-weight: 800;
	line-height: 1;
	font-size: var( --ctp-font-size, 40px );
	color: var( --ctp-digit-color );
	transform-style: preserve-3d;
	will-change: transform;
	font-family: 'Montserrat';
}

.ctp-digit.is-flipping .ctp-digit-inner {
	animation: ctp-flip 0.5s cubic-bezier( 0.45, 0, 0.55, 1 );
}

@keyframes ctp-flip {
	0% {
		transform: rotateX( 0deg );
	}
	50% {
		transform: rotateX( -90deg );
	}
	51% {
		transform: rotateX( 90deg );
	}
	100% {
		transform: rotateX( 0deg );
	}
}

.ctp-label {
	margin-top: var( --ctp-label-gap, 10px );
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var( --ctp-label-font-size, 14px );
	color: var( --ctp-label-color );
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}