/* ══════════════════════════════════════════════════════════════════════
   Cafés MyWay – Café Incógnito v2.1.1 – Frontend
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tarjeta base ─────────────────────────────────────────────────── */

.ci-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 20px 24px;
	margin: 16px auto;
	max-width: 520px;
	border-radius: 10px;
	font-size: 0.95em;
	box-sizing: border-box;
}

/* ── Tema "Clasificado" ───────────────────────────────────────────── */

.ci-classified {
	border: 2px dashed rgba(255, 255, 255, 0.35);
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 24px,
			rgba(255,255,255,0.03) 24px,
			rgba(255,255,255,0.03) 25px
		);
}

.ci-classified__stamp {
	display: inline-block;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 3px 12px;
	border: 2px solid currentColor;
	border-radius: 3px;
	transform: rotate(-2deg);
	opacity: 0.7;
	margin-bottom: 4px;
}

.ci-classified__stamp--gold {
	color: #e4c387;
	border-color: #e4c387;
	opacity: 1;
	animation: ci-stamp-glow 2s ease-in-out infinite alternate;
}

@keyframes ci-stamp-glow {
	from { text-shadow: 0 0 4px rgba(228,195,135,0.3); }
	to   { text-shadow: 0 0 12px rgba(228,195,135,0.7); }
}

/* ── Tarjeta teaser ───────────────────────────────────────────────── */

.ci-card--teaser {
	background: #1a1a1a;
	color: #f0f0f0;
	border-color: rgba(255,255,255,0.15);
	overflow: hidden;
}

.ci-card--teaser .ci-classified__stamp {
	color: #aaa;
}

.ci-card__msg {
	font-weight: 600;
	font-size: 1.05em;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ci-card__sub {
	font-size: 0.9em;
	opacity: 0.85;
	line-height: 1.4;
}

/* ── Barra de progreso ────────────────────────────────────────────── */

.ci-progress {
	width: 100%;
	max-width: 300px;
	height: 6px;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	overflow: hidden;
	margin-top: 6px;
}

.ci-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, #e4c387, #d4a853);
	border-radius: 3px;
	transition: width 0.6s ease;
}

.ci-progress__label {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.75em;
	letter-spacing: 1px;
	opacity: 0.7;
	margin-top: 2px;
}

/* ── Tarjeta desbloqueado ─────────────────────────────────────────── */

.ci-card--unlock {
	background: #0d0d0d;
	color: #fff;
	border-color: rgba(228,195,135,0.5);
	animation: ci-reveal 0.8s ease-out;
	z-index: 10;
	overflow: visible; /* necesario para el borde giratorio */
}

@keyframes ci-reveal {
	0%   { opacity: 0; transform: scale(0.95) translateY(10px); }
	50%  { opacity: 1; }
	100% { transform: scale(1) translateY(0); }
}

/* Brillo dorado recorriendo el borde */
.ci-card--unlock::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 12px;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		#e4c387 10%,
		transparent 20%
	);
	z-index: -1;
	animation: ci-border-spin 4s linear infinite;
}

.ci-card--unlock::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: #0d0d0d;
	z-index: -1;
}

@keyframes ci-border-spin {
	to { transform: rotate(360deg); }
}

/* ── Precio exclusivo ─────────────────────────────────────────────── */

.ci-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-top: 4px;
}

.ci-price__label {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.6;
	font-family: 'Courier New', Courier, monospace;
}

.ci-price__amount {
	font-size: 1.2em;
	font-weight: 800;
	line-height: 1.3;
}

.ci-price__amount del {
	opacity: 0.45;
	font-weight: 400;
	text-decoration: line-through;
}

.ci-price__amount ins {
	text-decoration: none;
	color: #e4c387;
}

/* ── Botón info ───────────────────────────────────────────────────── */

.ci-info-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.3);
	background: transparent;
	color: rgba(255,255,255,0.5);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: border-color 0.2s, color 0.2s;
}

.ci-info-btn:hover {
	border-color: rgba(255,255,255,0.7);
	color: #fff;
}

.ci-info-btn--gold {
	border-color: rgba(228,195,135,0.4);
	color: rgba(228,195,135,0.6);
}

.ci-info-btn--gold:hover {
	border-color: #e4c387;
	color: #e4c387;
}

/* ── Modal info ───────────────────────────────────────────────────── */

.ci-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ci-modal--open {
	display: flex;
}

.ci-modal__box {
	position: relative;
	background: #111;
	color: #e8e8e8;
	border: 1px solid rgba(228,195,135,0.3);
	border-radius: 12px;
	padding: 28px 24px;
	max-width: 380px;
	width: 100%;
	font-size: 0.95em;
	line-height: 1.6;
	text-align: center;
	animation: ci-modal-in 0.3s ease-out;
}

@keyframes ci-modal-in {
	from { opacity: 0; transform: scale(0.92) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ci-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	color: rgba(255,255,255,0.5);
	font-size: 22px;
	cursor: pointer;
	padding: 4px 8px;
	line-height: 1;
}

.ci-modal__close:hover {
	color: #fff;
}

.ci-modal__body strong {
	color: #e4c387;
	font-size: 1.1em;
}

/* ── Stock bajo ───────────────────────────────────────────────────── */

.ci-stock-low {
	font-size: 0.85em;
	color: #e4c387;
	font-weight: 600;
	animation: ci-pulse 1.5s ease-in-out infinite;
}

@keyframes ci-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

/* ── Botón ────────────────────────────────────────────────────────── */

.ci-btn {
	display: inline-block;
	margin-top: 12px;
	background: #e4c387;
	color: #000 !important;
	padding: 12px 24px;
	border-radius: 6px;
	font-family: 'Courier New', Courier, monospace;
	font-weight: 800;
	font-size: 0.95em;
	letter-spacing: 1px;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background 0.2s, transform 0.2s;
	max-width: 100%;
	box-sizing: border-box;
}

.ci-btn:hover {
	background: #d2b36c;
	transform: translateY(-1px);
}

/* ── Confetti (puro CSS) ──────────────────────────────────────────── */

.ci-confetti .ci-card__msg {
	position: relative;
	overflow: hidden; /* clip confetti dentro del mensaje */
}

.ci-confetti .ci-card__msg::before,
.ci-confetti .ci-card__msg::after {
	content: '';
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: ci-confetti-fall 3s ease-in forwards;
	opacity: 0;
	pointer-events: none;
}

.ci-confetti .ci-card__msg::before {
	top: 0;
	left: 20%;
	background: #e4c387;
	box-shadow:
		30px -10px 0 #d4a853,
		70px -5px 0 #f0d9a0,
		110px -15px 0 #e4c387,
		150px -8px 0 #c9a45a,
		190px -12px 0 #f0d9a0,
		230px -6px 0 #d4a853;
	animation-delay: 0.2s;
}

.ci-confetti .ci-card__msg::after {
	top: 0;
	left: 10%;
	background: #f0d9a0;
	box-shadow:
		20px -8px 0 #c9a45a,
		55px -14px 0 #e4c387,
		95px -4px 0 #d4a853,
		130px -11px 0 #f0d9a0,
		170px -7px 0 #e4c387,
		210px -16px 0 #c9a45a;
	animation-delay: 0.5s;
}

@keyframes ci-confetti-fall {
	0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
	100% { opacity: 0; transform: translateY(80px) rotate(720deg); }
}

/* ── Accesibilidad: respetar preferencia de movimiento reducido ──── */

@media (prefers-reduced-motion: reduce) {
	.ci-card--unlock,
	.ci-classified__stamp--gold,
	.ci-stock-low,
	.ci-confetti .ci-card__msg::before,
	.ci-confetti .ci-card__msg::after,
	.ci-card--unlock::before {
		animation: none;
	}

	.ci-progress__bar {
		transition: none;
	}
}

/* ── Mini-carrito (contenedor estrecho ~300px) ────────────────────── */

.widget_shopping_cart_content .ci-card {
	max-width: 100%;
	padding: 14px 12px;
	margin: 10px 0;
	font-size: 0.85em;
	gap: 6px;
	border-radius: 8px;
}

.widget_shopping_cart_content .ci-classified__stamp {
	font-size: 0.6em;
	letter-spacing: 2px;
	padding: 2px 8px;
}

.widget_shopping_cart_content .ci-card__msg {
	font-size: 0.95em;
}

.widget_shopping_cart_content .ci-card__sub {
	font-size: 0.8em;
}

.widget_shopping_cart_content .ci-progress {
	max-width: 100%;
}

.widget_shopping_cart_content .ci-price__label {
	font-size: 0.7em;
}

.widget_shopping_cart_content .ci-price__amount {
	font-size: 1.05em;
}

.widget_shopping_cart_content .ci-btn {
	display: block;
	text-align: center;
	padding: 10px 14px;
	font-size: 0.85em;
	letter-spacing: 0.5px;
	margin-top: 8px;
}

/* Borde giratorio: más sutil en mini-carrito */
.widget_shopping_cart_content .ci-card--unlock::before {
	inset: -1px;
	border-radius: 9px;
}

/* Confetti: sombras recortadas por overflow, reducir alcance */
.widget_shopping_cart_content .ci-confetti .ci-card__msg::before {
	box-shadow:
		20px -8px 0 #d4a853,
		50px -5px 0 #f0d9a0,
		80px -12px 0 #e4c387,
		110px -6px 0 #c9a45a;
}

.widget_shopping_cart_content .ci-confetti .ci-card__msg::after {
	box-shadow:
		15px -6px 0 #c9a45a,
		45px -10px 0 #e4c387,
		75px -4px 0 #d4a853,
		105px -8px 0 #f0d9a0;
}

/* ── Responsive móvil ─────────────────────────────────────────────── */

@media screen and (max-width: 600px) {
	.ci-card {
		margin: 12px 8px;
		padding: 16px 14px;
		font-size: 0.9em;
	}

	.ci-progress {
		max-width: 100%;
	}

	.ci-btn {
		display: block;
		text-align: center;
		padding: 12px 16px;
	}

	/* Confetti: reducir alcance en pantallas pequeñas */
	.ci-confetti .ci-card__msg::before {
		box-shadow:
			20px -8px 0 #d4a853,
			50px -5px 0 #f0d9a0,
			80px -12px 0 #e4c387,
			120px -6px 0 #c9a45a;
	}

	.ci-confetti .ci-card__msg::after {
		box-shadow:
			15px -6px 0 #c9a45a,
			45px -10px 0 #e4c387,
			75px -4px 0 #d4a853,
			105px -8px 0 #f0d9a0;
	}
}