/* ============================================
   AREFY HEADER 2026 - Purple/Yellow Theme
   Matching new website design
   ============================================ */

/* CSS Variables - Arefy Colors */
:root {
	--arefy-purple-dark: #13013C;
	--arefy-purple-mid: #6621A2;
	--arefy-purple-light: #51299B;
	--arefy-yellow: #FCD310;
	--arefy-yellow-dark: #FAC108;
	--arefy-yellow-shadow: #B33819;
}

/* ============================================
   ADD-TO-CART FLY ANIMATION
   When a package is added, a copy of its image animates from the
   button toward the navbar cart pill, ending with a pulse on arrival.
   ============================================ */

@keyframes arefyCartPulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.18); box-shadow: 0 0 30px rgba(252, 211, 16, 0.7); }
	100% { transform: scale(1); }
}

.arefy-btn-cart.arefy-cart-pulse,
.arefy-navbar-cart-mobile.arefy-cart-pulse {
	animation: arefyCartPulse 0.7s ease-out;
}

.arefy-cart-flyer {
	position: fixed;
	z-index: 2147483647;
	pointer-events: none;
	/* Fast (500ms) — drawer opens instantly with the new item already inside via
	   optimistic UI, so the animation is just a quick visual flourish on top. */
	transition: all 500ms cubic-bezier(0.5, -0.4, 0.5, 1.4);
	border-radius: 8px;
	filter: drop-shadow(0 4px 12px rgba(252, 211, 16, 0.55));
}

/* ============================================
   OPTIONS POPUP (giftcards / configurable packages)
   Shown when Tebex requires extra info before adding to cart
   (e.g., recipient email for a gift card).
   ============================================ */

@keyframes arefyConfigFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes arefyConfigSlideIn {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.arefy-config-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 0, 25, 0.7);
	backdrop-filter: blur(4px);
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: arefyConfigFadeIn 0.18s ease-out;
}

.arefy-config-modal {
	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
	border: 1px solid rgba(168, 85, 247, 0.2);
	border-radius: 16px;
	padding: 32px 28px 26px;
	width: 100%;
	max-width: 440px;
	color: #fff;
	position: relative;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	animation: arefyConfigSlideIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.arefy-config-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.18s ease;
}

.arefy-config-modal-close:hover {
	background: rgba(244, 67, 54, 0.2);
	color: #f44336;
}

.arefy-config-modal-close i {
	font-size: 18px;
}

.arefy-config-modal-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	background: linear-gradient(135deg, rgba(102, 33, 162, 0.5) 0%, rgba(168, 85, 247, 0.4) 100%);
	border: 1px solid rgba(168, 85, 247, 0.3);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arefy-config-modal-icon i {
	font-size: 30px;
	color: var(--arefy-yellow, #FCD310);
}

.arefy-config-modal-title {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 6px;
	text-align: center;
	line-height: 1.25;
}

.arefy-config-modal-subtitle {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 20px;
	text-align: center;
}

.arefy-config-modal-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.arefy-config-modal-field input {
	width: 100%;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 14px;
	color: #fff;
	outline: none;
	transition: all 0.18s ease;
	font-family: inherit;
	box-sizing: border-box;
}

.arefy-config-modal-field input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.arefy-config-modal-field input:focus {
	border-color: var(--arefy-yellow, #FCD310);
	background: rgba(0, 0, 0, 0.45);
	box-shadow: 0 0 0 3px rgba(252, 211, 16, 0.12);
}

.arefy-config-modal-error {
	font-size: 12px;
	color: #ff6b6b;
	background: rgba(244, 67, 54, 0.1);
	border: 1px solid rgba(244, 67, 54, 0.25);
	border-radius: 8px;
	padding: 8px 12px;
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

.arefy-config-modal-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--arefy-yellow, #FCD310) 0%, #FAC108 100%);
	border: none;
	border-radius: 12px;
	color: #47241C;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 18px rgba(252, 211, 16, 0.3);
	font-family: inherit;
	margin-top: 4px;
}

.arefy-config-modal-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(252, 211, 16, 0.45);
}

.arefy-config-modal-submit:active:not(:disabled) {
	transform: translateY(0);
}

.arefy-config-modal-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.arefy-config-modal-submit i {
	font-size: 16px;
}

@media (max-width: 480px) {
	.arefy-config-modal {
		padding: 28px 22px 22px;
	}
	.arefy-config-modal-field input {
		font-size: 16px; /* Prevent iOS zoom-on-focus */
	}
}

/* ============================================
   BEST SELLER TAG ("Más popular" — categoryListItem / categoryImageItem)
   Just the floating tag. The card itself stays untouched so the tag
   stands out by contrast instead of competing with the BONUS badges.
   ============================================ */

.category__list--item.arefy-best-seller,
.category__image--item.arefy-best-seller {
	position: relative;
}

.arefy-best-seller-tag {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	color: #47241C;
	font-size: 10px;
	font-weight: 800;
	padding: 5px 14px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	z-index: 5;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ============================================
   NAVBAR
   ============================================ */

.arefy-navbar-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 1.5rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.arefy-navbar {
	width: 100%;
	max-width: 1240px;
	padding: 0.8rem;
	background: linear-gradient(180deg, var(--arefy-purple-mid) 0%, var(--arefy-purple-light) 100%);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
}

/* Logo */
.arefy-navbar-logo {
	position: relative;
	z-index: 10;
	text-decoration: none;
	flex-shrink: 0;
}

.arefy-navbar-logo-glow {
	position: absolute;
	width: 64px;
	height: 64px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--arefy-yellow);
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.arefy-navbar-logo:hover .arefy-navbar-logo-glow {
	opacity: 0.8;
}

.arefy-navbar-logo img {
	position: relative;
	height: 48px;
	width: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
	margin-top: 4px;
}

.arefy-navbar-logo:hover img {
	transform: scale(1.05);
}

/* Navigation Links */
.arefy-navbar-nav {
	display: none;
	align-items: center;
	gap: 2.5rem;
	flex: 1;
	justify-content: flex-start;
	padding-left: 2rem;
}

@media (min-width: 1024px) {
	.arefy-navbar-nav {
		display: flex;
	}
}

.arefy-navbar-link {
	position: relative;
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.05em;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
	transition: all 0.2s ease;
}

.arefy-navbar-link:hover {
	color: var(--arefy-yellow);
	transform: scale(1.1);
}

.arefy-navbar-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--arefy-yellow);
	border-radius: 3px;
	box-shadow: 0 0 8px rgba(252, 211, 16, 0.6);
	transition: width 0.2s ease;
}

.arefy-navbar-link:hover::after {
	width: 100%;
}

/* 1024–1199 px: no cabía todo y el botón "Iniciar sesión" se salía por la derecha */
@media (min-width: 1024px) and (max-width: 1199px) {
	.arefy-navbar-nav {
		gap: 1.25rem;
		padding-left: 0.5rem;
	}
}

/* ============================================
   USER PROFILE SECTION (Navbar)
   ============================================ */

.arefy-navbar-user {
	display: none;
}

@media (min-width: 1024px) {
	.arefy-navbar-user {
		display: block;
	}
}

.arefy-user-logged,
.arefy-user-guest {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Ensure consistent positioning between logged/guest states */
.arefy-user-logged .arefy-user-info,
.arefy-user-guest .arefy-user-info {
	order: 1;
}

.arefy-user-logged .arefy-user-avatar,
.arefy-user-guest .arefy-user-avatar {
	order: 2;
}

.arefy-user-logged .arefy-btn-cart {
	order: 3;
}

.arefy-user-guest .arefy-btn-login {
	order: 3;
}

/* User Info */
.arefy-user-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	min-width: 120px;
	margin-right: 0.5rem;
}

.arefy-user-name {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	line-height: 1.2;
}

.arefy-user-status {
	font-size: 10px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.2;
}

/* User Avatar - Body Render (cropped waist to head) */
.arefy-user-avatar {
	position: relative;
	width: 75px;
	height: 80px;
	flex-shrink: 0;
	overflow: hidden;
	margin-top: -0.8rem;
	margin-bottom: -0.8rem;
	margin-left: 0.5rem;
}

.arefy-user-avatar-glow {
	display: none;
}

.arefy-user-avatar img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 75px;
	height: auto;
	transition: transform 0.3s ease;
}

.arefy-user-logged:hover .arefy-user-avatar img,
.arefy-user-guest:hover .arefy-user-avatar img {
	transform: translateX(-50%) scale(1.05);
}

.arefy-user-avatar-guest img {
	filter: grayscale(100%) brightness(0.7);
}

.arefy-user-avatar-question {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
	z-index: 10;
}

/* Cart Button (Logged in) */
.arefy-btn-cart {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 16px;
	width: 150px;
	justify-content: center;
	background: linear-gradient(90deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	box-shadow: 0 2px 0 var(--arefy-yellow-shadow), inset 0 2px 1px rgba(255, 255, 255, 0.4);
	border-radius: 10px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	margin-left: 0.5rem;
}

.arefy-btn-cart:hover {
	transform: scale(1.05);
	box-shadow: 0 2px 0 var(--arefy-yellow-shadow), inset 0 2px 1px rgba(255, 255, 255, 0.4),
				0 0 20px rgba(252, 211, 16, 0.6);
}

.arefy-btn-cart i {
	font-size: 16px;
	color: #47241C;
}

.arefy-cart-count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: #47241C;
	color: var(--arefy-yellow);
	font-size: 11px;
	font-weight: 700;
	border-radius: 50%;
}

.arefy-cart-price {
	font-size: 14px;
	font-weight: 700;
	color: #47241C;
	white-space: nowrap;
}

.arefy-cart-currency {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.7;
	margin-left: 2px;
}

/* Login Button (Guest) */
.arefy-btn-login {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 16px;
	width: 150px;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: inherit;
	white-space: nowrap;
	margin-left: 0.5rem;
}

.arefy-btn-login:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: var(--arefy-yellow);
	transform: scale(1.02);
}

.arefy-btn-login span {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.arefy-btn-login i {
	font-size: 14px;
	color: var(--arefy-yellow);
	transition: transform 0.3s ease;
}

.arefy-btn-login:hover i {
	transform: translateX(3px);
}

/* ============================================
   MOBILE NAVBAR ACTIONS (Cart / Login pill, <1024px)
   Visible inside the navbar so the cart total is always at hand,
   not hidden inside the hamburger dropdown.
   ============================================ */

.arefy-navbar-mobile-actions {
	display: flex;
	align-items: center;
	margin-left: auto;
	margin-right: 0.5rem;
}

@media (min-width: 1024px) {
	.arefy-navbar-mobile-actions {
		display: none;
	}
}

.arefy-navbar-cart-mobile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 8px 12px;
	background: linear-gradient(90deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	box-shadow: 0 2px 0 var(--arefy-yellow-shadow), inset 0 2px 1px rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	color: #47241C;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.arefy-navbar-cart-mobile:active {
	transform: scale(0.96);
}

.arefy-navbar-cart-mobile i {
	font-size: 14px;
	color: #47241C;
}

.arefy-navbar-cart-mobile-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: #47241C;
	color: var(--arefy-yellow);
	font-size: 10px;
	font-weight: 800;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 2px solid var(--arefy-yellow);
}

.arefy-navbar-cart-mobile-price {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: #47241C;
}

.arefy-navbar-cart-mobile-price small {
	font-size: 10px;
	font-weight: 600;
	opacity: 0.65;
	margin-left: 2px;
}

.arefy-navbar-login-mobile {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease;
	font-family: inherit;
	color: #fff;
}

.arefy-navbar-login-mobile:active {
	transform: scale(0.96);
}

.arefy-navbar-login-mobile:hover {
	background: rgba(255, 255, 255, 0.25);
}

.arefy-navbar-login-mobile i {
	font-size: 14px;
	color: var(--arefy-yellow);
}

.arefy-navbar-login-mobile span {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

/* Compact pill on very small screens */
@media (max-width: 380px) {
	.arefy-navbar-cart-mobile {
		padding: 8px 10px;
		gap: 0.35rem;
	}
	.arefy-navbar-cart-mobile-price {
		font-size: 12px;
	}
	.arefy-navbar-cart-mobile-price small {
		display: none;
	}
}

/* Mobile Toggle */
.arefy-navbar-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

@media (min-width: 1024px) {
	.arefy-navbar-mobile-toggle {
		display: none;
	}
}

.arefy-navbar-mobile-toggle svg {
	width: 24px;
	height: 24px;
	color: #fff;
}

/* ============================================
   MOBILE MENU
   ============================================ */

.arefy-navbar-mobile {
	display: none;
	flex-direction: column;
	width: 100%;
	max-width: calc(100% - 2rem);
	margin-top: 0.5rem;
	background: linear-gradient(180deg, var(--arefy-purple-mid) 0%, var(--arefy-purple-light) 100%);
	border-radius: 16px;
	padding: 1.25rem;
	gap: 0.25rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.arefy-navbar-mobile-open {
	display: flex;
}

@media (min-width: 1024px) {
	.arefy-navbar-mobile {
		display: none !important;
	}
}

.arefy-navbar-mobile-link {
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.05em;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
	padding: 0.75rem 1rem;
	border-radius: 12px;
	transition: all 0.2s ease;
}

.arefy-navbar-mobile-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--arefy-yellow);
}

/* Mobile User Section */
.arefy-navbar-mobile-user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	margin-top: 0.5rem;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
}

.arefy-mobile-user-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.arefy-mobile-user-info img {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 2px solid var(--arefy-yellow);
}

.arefy-mobile-user-info span {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.arefy-btn-cart-mobile {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 14px;
	background: linear-gradient(90deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	box-shadow: 0 2px 0 var(--arefy-yellow-shadow);
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.arefy-btn-cart-mobile i {
	font-size: 14px;
	color: #47241C;
}

.arefy-btn-cart-mobile span {
	font-size: 13px;
	font-weight: 700;
	color: #47241C;
}

.arefy-btn-login-mobile {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 10px 16px;
	width: 100%;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
}

.arefy-btn-login-mobile i {
	font-size: 14px;
	color: var(--arefy-yellow);
}

.arefy-btn-login-mobile span {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

/* ============================================
   HERO SECTION - Créditos (compacto, alineado a la izquierda)
   Móvil: título + gemas en fila; texto y botón debajo a todo el ancho.
   Escritorio: bloque centrado; título, texto y botón a la izquierda y gemas a la derecha.
   En móvil/tablet usa el mismo margen que .body--with-sidebar para alinear con las cajas.
   ============================================ */

.arefy-hero {
	position: relative;
	z-index: 50;
	margin-top: 70px;
	padding: 3rem 10px 2.75rem;
	overflow: hidden;
}

/* Tablet: la navbar aún no es la compacta de móvil */
@media (min-width: 641px) {
	.arefy-hero {
		padding-top: 4.75rem;
	}
}

@media (min-width: 1024px) {
	.arefy-hero {
		margin-top: 60px;
		padding: 7rem 10px 4.5rem;
	}
}

.arefy-hero-content {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title gems"
		"copy  copy"
		"cta   cta";
	align-items: center;
	gap: 1.5rem 0.5rem;
	text-align: left;
}

@media (min-width: 1024px) {
	.arefy-hero-content {
		grid-template-columns: 480px 360px;
		grid-template-areas:
			"title gems"
			"copy  gems"
			"cta   gems";
		justify-content: center;
		gap: 1.75rem 6rem;
	}
}

/* Title - "CRÉDITOS" */
.arefy-hero-title {
	grid-area: title;
	position: relative;
	z-index: 10;
	font-size: 42px;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-shadow:
		0 0 30px rgba(168, 85, 247, 0.6),
		0 0 60px rgba(168, 85, 247, 0.4),
		0 4px 0 rgba(102, 33, 162, 0.8);
}

@media (min-width: 1024px) {
	.arefy-hero-title {
		align-self: end;
		font-size: 80px;
	}
}

/* Title underline glow */
.arefy-hero-title::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), transparent);
	filter: blur(2px);
}

/* Texto: qué es (description) + la pega que resuelve (note) */
.arefy-hero-copy {
	grid-area: copy;
	z-index: 10;
}

.arefy-hero-description {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
	text-wrap: balance;
}

.arefy-hero-description strong {
	color: var(--arefy-yellow);
	font-weight: 700;
}

.arefy-hero-note {
	margin: 0.4rem 0 0;
	font-size: 13px;
	line-height: 1.5;
	font-style: italic;
	color: rgba(255, 255, 255, 0.55);
	text-wrap: balance;
}

@media (min-width: 1024px) {
	.arefy-hero-description {
		font-size: 16px;
	}

	.arefy-hero-note {
		font-size: 14px;
	}
}

/* CTA Section */
.arefy-hero-cta {
	grid-area: cta;
	z-index: 10;
	display: flex;
	justify-content: flex-start;
}

@media (min-width: 1024px) {
	.arefy-hero-cta {
		align-self: start;
		margin-top: 1.25rem;
	}
}

/* Hero Button */
.arefy-hero-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 384px;
	height: 60px;
	padding: 0 1.25rem;
	background: linear-gradient(90deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	box-shadow: 0 4px 0 var(--arefy-yellow-shadow), inset 0 4px 2px rgba(255, 255, 255, 0.4);
	border-radius: 18px;
	text-decoration: none;
	overflow: hidden;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.arefy-hero-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 2px 0 var(--arefy-yellow-shadow), inset 0 4px 2px rgba(255, 255, 255, 0.4),
				0 0 30px rgba(252, 211, 16, 0.6), 0 0 60px rgba(252, 211, 16, 0.4);
}

.arefy-hero-btn-shimmer {
	position: absolute;
	inset: 0;
	transform: translateX(-100%) skewX(12deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: transform 0.7s ease-out;
}

.arefy-hero-btn:hover .arefy-hero-btn-shimmer {
	transform: translateX(100%) skewX(12deg);
}

.arefy-hero-btn-text {
	position: relative;
	z-index: 10;
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	color: #47241C;
	transition: letter-spacing 0.3s ease;
	white-space: nowrap;
	line-height: 1.2;
}

.arefy-hero-btn:hover .arefy-hero-btn-text {
	letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
	.arefy-hero-btn {
		max-width: 300px;
	}
}

/* ============================================
   HERO GEMS (imagen central + esmeraldas flotando)
   ============================================ */

.arefy-hero-character {
	grid-area: gems;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 120px;
}

@media (min-width: 1024px) {
	.arefy-hero-character {
		width: 360px;
		height: 300px;
	}
}

.arefy-hero-character-wrapper {
	position: relative;
	z-index: 10;
	animation: hero-float 4s ease-in-out infinite;
}

.arefy-hero-character-glow {
	position: absolute;
	inset: 0;
	background: rgba(163, 230, 53, 0.5);
	border-radius: 50%;
	filter: blur(60px);
	transform: scale(0.9);
}

.arefy-hero-character-shadow {
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 16px;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	filter: blur(10px);
	animation: hero-shadow 4s ease-in-out infinite;
}

.arefy-hero-character-img {
	position: relative;
	display: block;
	width: 120px;
	height: auto;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

@media (min-width: 1024px) {
	.arefy-hero-character-img {
		width: 320px;
	}
}

/* Floating Gems */
.arefy-gem {
	position: absolute;
	z-index: 0;
	opacity: 0;
	animation: gem-float 0.6s ease-out forwards, float 3s ease-in-out infinite;
}

/* Misma corona que las esmeraldas de steve en arefy.net (HeroSection.tsx), medida respecto a lo
   visible de la imagen (pares a la misma altura a cada lado), y bajada entera para que quede
   centrada en vertical sobre la vagoneta. */
.arefy-gem-1 { width: 18px; height: 18px; left: -4px; top: 84px; animation-delay: 0.2s, 0.2s; }
.arefy-gem-2 { width: 22px; height: 22px; left: -6px; top: 40px; animation-delay: 0.4s, 0.4s; }
.arefy-gem-3 { width: 15px; height: 15px; left: 25px; top: 18px; animation-delay: 0.6s, 0.6s; }
.arefy-gem-4 { width: 17px; height: 17px; right: 5px; top: 19px; animation-delay: 0.8s, 0.8s; }
.arefy-gem-5 { width: 18px; height: 18px; right: -10px; top: 46px; animation-delay: 1s, 1s; }
.arefy-gem-6 { width: 20px; height: 20px; right: -3px; top: 82px; animation-delay: 1.2s, 1.2s; }

@media (min-width: 1024px) {
	.arefy-gem-1 { width: 40px; height: 40px; left: -12px; top: 218px; }
	.arefy-gem-2 { width: 48px; height: 48px; left: -16px; top: 102px; }
	.arefy-gem-3 { width: 32px; height: 32px; left: 65px; top: 42px; }
	.arefy-gem-4 { width: 36px; height: 36px; right: 12px; top: 46px; }
	.arefy-gem-5 { width: 40px; height: 40px; right: -30px; top: 116px; }
	.arefy-gem-6 { width: 44px; height: 44px; right: -11px; top: 214px; }
}

/* ============================================
   PARTICLES - Like website
   ============================================ */

.arefy-hero-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.arefy-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #a855f7;
	border-radius: 50%;
	opacity: 0;
	animation: particle-rise 6s ease-in-out infinite;
}

.arefy-particle-1 { left: 10%; bottom: 0; animation-delay: 0s; }
.arefy-particle-2 { left: 25%; bottom: 0; animation-delay: 1s; }
.arefy-particle-3 { left: 40%; bottom: 0; animation-delay: 2s; }
.arefy-particle-4 { left: 55%; bottom: 0; animation-delay: 0.5s; }
.arefy-particle-5 { left: 70%; bottom: 0; animation-delay: 1.5s; }
.arefy-particle-6 { left: 85%; bottom: 0; animation-delay: 2.5s; }
.arefy-particle-7 { left: 15%; bottom: 0; animation-delay: 3s; }
.arefy-particle-8 { left: 45%; bottom: 0; animation-delay: 3.5s; }
.arefy-particle-9 { left: 65%; bottom: 0; animation-delay: 4s; }
.arefy-particle-10 { left: 80%; bottom: 0; animation-delay: 4.5s; }

/* ============================================
   BACKGROUND OVERLAY
   ============================================ */

.arefy-bg-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	background: var(--arefy-purple-dark);
	isolation: isolate;
	height: auto;
	min-height: 100%;
}

.arefy-bg-overlay-content {
	background: url(https://arefy.net/fotos/background.webp) no-repeat;
	background-position: 50% 50%;
	background-size: 130% auto;
	width: 100%;
	height: 100%;
	min-height: 800px;
	position: relative;
	z-index: 1;
}

.arefy-bg-overlay-content::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent 0%, transparent 60%, var(--background-color, #1e1e29) 100%);
	z-index: 10;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

@keyframes hero-shadow {
	0%, 100% {
		transform: translateX(-50%) scale(1);
		opacity: 0.2;
	}
	50% {
		transform: translateX(-50%) scale(0.85);
		opacity: 0.15;
	}
}

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

@keyframes gem-float {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes particle-rise {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 0.5;
	}
	90% {
		opacity: 0.5;
	}
	100% {
		transform: translateY(-400px) translateX(20px);
		opacity: 0;
	}
}

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

@media (max-width: 1023px) {
	.arefy-navbar-user {
		display: none;
	}
}

@media (max-width: 640px) {
	.arefy-navbar {
		padding: 0.5rem 1rem;
	}

	.arefy-navbar-logo img {
		height: 36px;
	}
}

/* ============================================
   ANNOUNCEMENT BANNER - Sale/Discount Style
   ============================================ */

.banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: linear-gradient(90deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	padding: 0.6rem 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	min-height: auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	animation: bannerPulse 3s ease-in-out infinite;
}

@keyframes bannerPulse {
	0%, 100% {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	}
	50% {
		box-shadow: 0 4px 30px rgba(252, 211, 16, 0.5);
	}
}

.banner p {
	color: #47241C;
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.banner p::before {
	content: '🔥';
	font-size: 18px;
}

.banner p::after {
	content: '🔥';
	font-size: 18px;
}

.banner a {
	background: #47241C;
	color: var(--arefy-yellow);
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.3s ease;
}

.banner a:hover {
	background: #2d1610;
	transform: scale(1.05);
}

/* Adjust navbar when banner is present */
body:has(.banner) .arefy-navbar-container {
	top: 52px;
}

body:has(.banner) .arefy-hero {
	margin-top: 120px;
}

@media (max-width: 768px) {
	.banner {
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.5rem;
	}

	.banner p {
		font-size: 12px;
	}

	.banner p::before,
	.banner p::after {
		display: none;
	}

	body:has(.banner) .arefy-navbar-container {
		top: 70px;
	}

	body:has(.banner) .arefy-hero {
		margin-top: 140px;
	}
}

/* ============================================
   SALE BANNER - Inside content (hueco de la portada)
   Se adapta al ancho del HUECO (container query), no al de la pantalla:
   - ancho: texto | imagen | cuenta atrás grande, como FreshSMP
   - < 900px: sin imagen (portátiles pequeños, tablet)
   - < 700px: en columna (móvil; con menos no caben texto + 4 casillas)
   ============================================ */

.arefy-promo-slot {
	container-type: inline-size;
	/* Por encima del hero (z-index 50) para que las gemas asomen sobre él; por debajo de la navbar (100) */
	position: relative;
	z-index: 51;
}

.arefy-sale-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: linear-gradient(135deg, var(--arefy-purple-mid) 0%, var(--arefy-purple-light) 50%, #7c3aed 100%);
	border-radius: 16px;
	padding: 1rem 1.5rem;
	margin-bottom: 1.5rem;
	overflow: visible;
	box-shadow: 0 10px 40px rgba(102, 33, 162, 0.4);
	border-bottom: 4px solid rgba(19, 1, 60, 0.6);
}

.arefy-sale-content {
	display: contents;
}

.arefy-sale-text {
	display: flex;
	flex-direction: column;
	z-index: 10;
}

.arefy-sale-title {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.arefy-sale-discount {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.arefy-sale-percent,
.arefy-sale-subtitle {
	font-size: 30px;
	font-weight: 900;
	color: #fff;
	line-height: 1.1;
	white-space: nowrap;
}

.arefy-sale-subtitle {
	text-transform: uppercase;
}

/* La imagen es un hueco más entre el texto y la cuenta atrás: el espacio se reparte solo y
   nunca pisa el texto. La gema asoma ~35px por encima del banner. Los márgenes laterales negativos
   descuentan el borde transparente de Gemas.webp: ocupa lo mismo que el dibujo. */
.arefy-sale-character {
	order: 1;
	flex-shrink: 0;
	align-self: flex-end;
	margin: -86px -22px -16px -40px;
	z-index: 5;
	pointer-events: none;
}

.arefy-sale-character img {
	display: block;
	height: 200px;
	width: auto;
	/* una imagen de temporada más ancha se encaja sin romper la fila */
	max-width: 280px;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25));
	mask-image: linear-gradient(to top, transparent 0%, black 15%);
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%);
}

.arefy-sale-countdown {
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	z-index: 10;
	flex-shrink: 0;
}

.arefy-sale-countdown-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.arefy-sale-timer {
	display: flex;
	gap: 0.5rem;
}

.arefy-sale-timer-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 72px;
	padding: 0.7rem 0 0.55rem;
	border-radius: 10px;
	background: rgba(19, 1, 60, 0.5);
}

.arefy-sale-timer-value {
	width: 100%;
	font-size: 36px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.arefy-sale-timer-label {
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
}

@container (max-width: 899px) {
	.arefy-sale-character {
		display: none;
	}
}

@container (max-width: 699px) {
	.arefy-sale-banner {
		flex-direction: column;
		gap: 0.75rem;
		padding: 1rem;
		text-align: center;
	}

	.arefy-sale-text {
		align-items: center;
	}

	.arefy-sale-title {
		font-size: 16px;
	}

	.arefy-sale-discount {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.arefy-sale-percent {
		font-size: 34px;
	}

	.arefy-sale-subtitle {
		font-size: 16px;
	}

	.arefy-sale-countdown {
		align-items: center;
	}

	.arefy-sale-timer-item {
		width: 60px;
		padding: 0.6rem 0;
	}

	.arefy-sale-timer-value {
		font-size: 28px;
	}

	.arefy-sale-timer-label {
		margin-top: 3px;
		font-size: 10px;
	}
}

/* ============================================
   HUECO DE LA PORTADA: banner de oferta o franja de créditos
   (lo decide function.saleCountdown.js con arefy.net/api/oferta)
   ============================================ */

.arefy-promo-slot [hidden] {
	display: none !important;
}

/* El margen va en lo que se ve: sin oferta ni franja, el hueco no ocupa nada */
.arefy-promo-slot .arefy-sale-banner,
.arefy-promo-slot .arefy-credits-strip {
	margin: 0 0 1.5rem;
}

.arefy-credits-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem 1.25rem 1.25rem;
	border-radius: 16px;
	background:
		radial-gradient(circle at 60px 50%, rgba(163, 230, 53, 0.18), transparent 150px),
		linear-gradient(135deg, rgba(102, 33, 162, 0.45) 0%, rgba(81, 41, 155, 0.3) 50%, rgba(19, 1, 60, 0.55) 100%);
	border: 1px solid rgba(252, 211, 16, 0.15);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
	overflow: hidden; /* corta el 4º pack por el borde */
}

/* Icono + título + enlace: todo el bloque lleva a la categoría Créditos */
.arefy-credits-strip-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	text-decoration: none;
}

.arefy-credits-strip-icon {
	width: 76px;
	height: auto;
	flex-shrink: 0;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.arefy-credits-strip-text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.arefy-credits-strip-title {
	font-size: 24px;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	line-height: 1;
	text-shadow: 0 0 20px rgba(168, 85, 247, 0.55), 0 3px 0 rgba(102, 33, 162, 0.8);
}

/* "Ver todos los packs →" (enlace a la categoría Créditos) */
.arefy-credits-strip-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.arefy-credits-strip-sub strong,
.arefy-credits-strip-sub i {
	color: var(--arefy-yellow);
}

.arefy-credits-strip-sub i {
	font-size: 11px;
	margin-left: 2px;
	transition: transform 0.2s ease;
}

.arefy-credits-strip-head:hover .arefy-credits-strip-sub {
	color: #fff;
}

.arefy-credits-strip-head:hover .arefy-credits-strip-sub i {
	transform: translateX(3px);
}

.arefy-credits-strip-packs {
	display: flex;
	gap: 0.6rem;
	flex-shrink: 0;
}

.arefy-credits-pack {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.8rem 0.55rem 0.5rem;
	border-radius: 12px;
	background: rgba(19, 1, 60, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.arefy-credits-pack:hover {
	transform: translateY(-2px);
	border-color: rgba(252, 211, 16, 0.5);
}

.arefy-credits-pack img {
	width: 52px;
	height: 52px;
	object-fit: contain;
}

.arefy-credits-pack-info {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.arefy-credits-pack-name {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}

.arefy-credits-pack-name small {
	font-size: 10px;
	font-weight: 700;
	color: var(--arefy-yellow);
}

.arefy-credits-pack-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--arefy-yellow);
	white-space: nowrap;
}

.arefy-credits-pack-price small {
	font-size: 10px;
	opacity: 0.8;
}

.arefy-credits-pack-popular {
	border-color: rgba(252, 211, 16, 0.45);
}

.arefy-credits-pack-tag {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--arefy-yellow);
	color: #47241C;
	font-size: 9px;
	font-weight: 800;
	white-space: nowrap;
}

/* 4º destacado: asoma cortado por el borde derecho, tapado por un degradado con
   "+N · Ver todos" (los packs que no se ven), y lleva a la categoría Créditos */
.arefy-credits-more {
	width: 150px;
	flex-shrink: 0;
	margin-right: -84px; /* 24px de padding de la franja + 60px que se quedan fuera: se ven 90 */
	overflow: hidden;
}

.arefy-credits-more-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 12px;
	background: linear-gradient(90deg, rgba(102, 33, 162, 0.4) 0%, rgba(52, 17, 110, 0.96) 38%, rgba(40, 12, 90, 1) 60%);
}

.arefy-credits-more-overlay b {
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	line-height: 1;
}

.arefy-credits-more-overlay span {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 800;
	color: var(--arefy-yellow);
	white-space: nowrap;
}

.arefy-credits-more-overlay i {
	font-size: 11px;
	transition: transform 0.2s ease;
}

.arefy-credits-more:hover .arefy-credits-more-overlay i {
	transform: translateX(3px);
}

/* Sin sitio para asomar (hueco de menos de 640px): fuera, el título ya lleva a la categoría */
@container (max-width: 639px) {
	.arefy-credits-more {
		display: none;
	}
}

/* Pantallas de 1024-1300px: el hueco no llega a los ~900px que pide la fila (el título se partía
   en 3 líneas y los packs se pisaban). Sigue en fila, pero compacta y con los packs en vertical. */
@media (min-width: 901px) {
	@container (max-width: 899px) {
		.arefy-credits-strip {
			gap: 1rem;
			padding: 1rem;
		}

		.arefy-credits-strip-icon {
			width: 56px;
		}

		.arefy-credits-strip-title {
			font-size: 18px;
		}

		.arefy-credits-strip-sub {
			font-size: 12px;
		}

		.arefy-credits-pack {
			flex-direction: column;
			gap: 0.3rem;
			padding: 0.5rem 0.6rem;
			text-align: center;
		}

		.arefy-credits-pack img {
			width: 44px;
			height: 44px;
		}

		.arefy-credits-pack-info {
			align-items: center;
		}

		.arefy-credits-more {
			margin-right: -76px; /* aquí la franja tiene 16px de padding */
		}
	}
}

@media (max-width: 900px) {
	.arefy-credits-strip {
		flex-direction: column;
		align-items: stretch;
		padding: 1rem;
	}

	.arefy-credits-strip-head {
		justify-content: center;
	}

	.arefy-credits-strip-icon {
		width: 56px;
	}

	.arefy-credits-strip-packs {
		justify-content: space-between;
	}

	.arefy-credits-pack {
		flex: 1;
		flex-direction: column;
		padding: 0.6rem 0.3rem;
		text-align: center;
	}

	.arefy-credits-pack-info {
		align-items: center;
	}

	/* En columna hay sitio: el 4º se ve entero */
	.arefy-credits-more {
		width: auto;
		margin-right: 0;
	}
}

/* La franja sustituye al bloque viejo de "Featured packages" de la portada */
.featured__packages {
	display: none !important;
}

/* ============================================
   AREFY MONTHLY GOAL - Creative Design
   ============================================ */

.arefy-goal {
	position: relative;
	width: 100%;
	background: linear-gradient(135deg, rgba(102, 33, 162, 0.4) 0%, rgba(81, 41, 155, 0.3) 50%, rgba(19, 1, 60, 0.5) 100%);
	border-radius: 12px;
	padding: 14px 20px;
	margin-bottom: 20px;
	overflow: hidden;
	border: 1px solid rgba(252, 211, 16, 0.15);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
}

.arefy-goal-bg-icon {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}

.arefy-goal-bg-icon img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	opacity: 0.12;
}

/* Header section */
.arefy-goal-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 10px;
	z-index: 2;
}

/* Title wrapper */
.arefy-goal-title-wrapper {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.arefy-goal-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.5);
}

.arefy-goal-reward {
	font-size: 13px;
	font-weight: 500;
	color: var(--arefy-yellow);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* "Arefy aporta el primer 20 %" (lo añade function.donationGoal.js) */
.arefy-goal-boost {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
}

.arefy-goal-amount {
	position: absolute;
	right: 0;
	top: -18px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	font-family: 'Inter', sans-serif;
}

.arefy-goal-amount:empty {
	display: none;
}

/* Percentage display */
.arefy-goal-percentage {
	flex-shrink: 0;
	font-size: 24px;
	font-weight: 800;
	color: var(--arefy-yellow);
	text-shadow:
		0 0 20px rgba(252, 211, 16, 0.5),
		0 2px 4px rgba(0, 0, 0, 0.3);
	font-family: 'Inter', sans-serif;
	letter-spacing: -1px;
	z-index: 2;
}

/* Progress bar container */
.arefy-goal-progress-container {
	position: relative;
	height: 8px;
	z-index: 2;
}

.arefy-goal-progress-bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 4px;
	overflow: hidden;
}

/* Progress bar */
.arefy-goal-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--arefy-yellow-dark) 0%, var(--arefy-yellow) 50%, #ffe066 100%);
	border-radius: 4px;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.arefy-goal-progress-glow {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.4) 100%);
	border-radius: 4px;
}

.arefy-goal-progress-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
	animation: goalProgressShine 3s ease-in-out infinite;
}

@keyframes goalProgressShine {
	0% { left: -100%; }
	50%, 100% { left: 200%; }
}

/* Responsive */
@media (max-width: 480px) {
	.arefy-goal {
		padding: 12px 16px;
	}

	.arefy-goal-bg-icon img {
		width: 72px;
		height: 72px;
	}

	.arefy-goal-percentage {
		font-size: 20px;
	}

	.arefy-goal-amount {
		font-size: 12px;
	}
}

/* ============================================
   AREFY CATEGORY CARDS - Modern Design
   ============================================ */

.arefy-categories {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 !important;
}

.arefy-category-card {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.3s ease;
}


/* Gradient overlay on hover */
.arefy-category-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(102, 33, 162, 0.15) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.arefy-category-card:hover::before {
	opacity: 1;
}

.arefy-category-card:hover {
	border-color: rgba(102, 33, 162, 0.3);
}

.arefy-category-card.arefy-category-active {
	background: linear-gradient(90deg, rgba(252, 211, 16, 0.05) 0%, rgba(252, 211, 16, 0.12) 100%);
	border-color: rgba(252, 211, 16, 0.2);
}

.arefy-category-card.arefy-category-active .arefy-category-name {
	color: var(--arefy-yellow);
}

.arefy-category-link {
	display: flex;
	align-items: center;
	padding: 24px 20px 24px 140px;
	text-decoration: none !important;
	position: relative;
	min-height: 85px;
	overflow: hidden;
}

.arefy-category-name {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	flex: 1;
	z-index: 2;
}

/* Best value - yellow inner glow from LEFT (where icon is) */
.arefy-category-featured::before {
	background: linear-gradient(270deg, transparent 40%, rgba(252, 211, 16, 0.12) 100%) !important;
	opacity: 1 !important;
}

.arefy-category-featured:hover::before {
	background: linear-gradient(270deg, transparent 40%, rgba(252, 211, 16, 0.12) 100%) !important;
	opacity: 1 !important;
}

/* Featured category (Créditos) - bigger icon */
.arefy-category-featured .arefy-category-image {
	width: 125px;
	height: 125px;
	left: -25px;
}

.arefy-category-featured .arefy-category-image::before {
	width: 125px;
	height: 125px;
}

/* Category image - LEFT side, big, overflowing */
.arefy-category-image {
	position: absolute;
	left: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 85px;
	height: 85px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 3;
	transition: all 0.3s ease;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* Ghost copy of icon with opacity - on the RIGHT, flipped horizontally */
.arefy-category-image::before {
	content: '';
	position: absolute;
	left: 35px;
	top: 60%;
	transform: translateY(-50%) scaleX(-1) rotate(0deg);
	width: 85px;
	height: 85px;
	background: inherit;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.04;
	z-index: -1;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.arefy-category-card:hover .arefy-category-image::before {
	transform: translateY(-50%) scaleX(-1) rotate(-12deg) translateX(-5px);
	opacity: 0.1;
}

.arefy-category-card:hover .arefy-category-image {
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}


/* Arrow for dropdowns */
.arefy-category-arrow {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.3);
	transition: transform 0.3s ease;
	margin-left: 10px;
	z-index: 3;
}

.arefy-category-card.active-dropdown .arefy-category-arrow {
	transform: rotate(180deg);
}

/* Subcategories dropdown */
.arefy-subcategories {
	display: none;
	padding: 0 !important;
	margin: 0 !important;
	margin-top: -5px !important;
	list-style: none !important;
	border-top: none;
	background: #13013c;
	position: relative;
	z-index: 10;
}

.arefy-category-card.active-dropdown .arefy-subcategories {
	display: block;
}

.arefy-subcategories li {
	margin: 0 !important;
	padding: 0 !important;
}

.arefy-subcategories li:first-child {
	margin-top: 4px !important;
}

.triplezone-sidebar .arefy-subcategories li a,
.arefy-subcategories li a {
	display: block !important;
	padding: 12px 16px 12px 22px !important;
	color: rgba(255, 255, 255, 0.78) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	border-radius: 0 !important;
	border-left: 2px solid transparent !important;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease !important;
	position: relative !important;
	margin: 0 !important;
}

/* Remove the ::before from original TripleZone CSS */
.triplezone-sidebar .arefy-subcategories li a::before,
.arefy-subcategories li a::before {
	display: none !important;
	content: none !important;
	width: 0 !important;
	height: 0 !important;
}

.triplezone-sidebar .arefy-subcategories li a:hover,
.arefy-subcategories li a:hover {
	background: rgba(252, 211, 16, 0.10) !important;
	color: var(--arefy-yellow) !important;
	border-left-color: var(--arefy-yellow) !important;
	padding-left: 26px !important;
	margin-left: 0 !important;
}

/* Active subcategory — Twig adds .arefy-sub-active when subcategory.active is true */
.triplezone-sidebar .arefy-subcategories li a.arefy-sub-active,
.arefy-subcategories li a.arefy-sub-active {
	background: rgba(252, 211, 16, 0.14) !important;
	color: var(--arefy-yellow) !important;
	border-left-color: var(--arefy-yellow) !important;
	font-weight: 700 !important;
}

/* Footer spacing */
.arefy-footer {
	margin-top: 60px;
}

/* Override old sidebar styles */
.triplezone-sidebar .sidebar-nav.arefy-categories ul.triplezone-dropdown {
	position: relative;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.arefy-category-link {
		padding: 14px 16px 14px 80px;
		min-height: 60px;
	}

	.arefy-category-name {
		font-size: 15px;
	}

	/* Hide ghost icon on mobile */
	.arefy-category-image::before {
		display: none !important;
	}

	/* Make main icon bigger on mobile */
	.arefy-category-image {
		width: 65px;
		height: 65px;
		left: 5px;
	}

	/* Mobile background with gradient already included */
	.arefy-bg-overlay-content {
		background: url(https://arefy.net/fotos/background-mobile.webp) no-repeat !important;
		background-position: 50% 0% !important;
		background-size: cover !important;
		min-height: 600px !important;
	}

	/* No need for gradient overlay - it's in the image */
	.arefy-bg-overlay-content::before {
		display: none !important;
	}
}

/* ============================================
   LAYOUT - Center sidebar + main content together
   ============================================ */
.body--with-sidebar {
	max-width: 1400px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Móvil/tablet (< 968px, sidebar apilado): la gift card baja debajo del contenido.
   Antes quedaba entre "Selecciona una categoría" y los productos en todas las páginas. */
@media (max-width: 967px) {
	/* Una sola columna que no crece: si no, un hijo ancho (p. ej. el formulario de login de
	   Tebex) ensancha la página y aparece scroll horizontal en móviles pequeños. */
	.body--with-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.body--with-sidebar > .triplezone-sidebar {
		display: contents;
	}

	.body--with-sidebar > .triplezone-sidebar > .arefy-giftcard {
		order: 1;
		margin-top: 20px;
	}

	.body--with-sidebar > .triplezone-main-content {
		margin-top: 20px;
	}
}

/* ============================================
   PRODUCT CARDS - Wider cards
   ============================================ */
.category__list--with--images {
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)) !important;
}

/* Title can wrap to 2 lines max, no fixed height */
.category__list--with--images .__item--title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Reduce space between product name and price */
.category__list--with--images .category__list__item--details {
	gap: 2px !important;
}

.category__list--with--images .__item--title {
	margin-bottom: 2px !important;
}

.category__list--with--images .__item__price--list {
	margin-top: 0 !important;
	margin-bottom: 8px !important;
}

/* Hide info button, only show add to cart */
.category__list--with--images .category__list__item--buttons .triplezone__toogle--modal,
.category__list--with--images .category__list__item--buttons > a:first-child:not(.cta) {
	display: none !important;
}

/* Style the add to cart button - full width */
.category__list--with--images .category__list__item--buttons {
	display: flex !important;
	width: 100% !important;
	padding: 0 !important;
}

.category__list--with--images .category__list__item--buttons .cta {
	flex: 1 !important;
	text-align: center !important;
	border-radius: 8px !important;
	padding: 12px 20px !important;
	transition: all 0.3s ease !important;
}

.category__list--with--images .category__list__item--buttons .cta:hover {
	transform: translateY(-2px) !important;
	opacity: 0.9 !important;
}

/* Image hover effect - scale and yellow glow */
.category__list--with--images .category__list__item--title img {
	transition: all 0.3s ease !important;
}

.category__list--with--images .category__list--item:hover .category__list__item--title img {
	transform: scale(1.08) !important;
	filter: drop-shadow(0 0 15px rgba(252, 211, 16, 0.4)) !important;
}

/* ============================================
   CHECKOUT - Cart Review Dropdown Fix
   ============================================ */

/* By default (dropdown open) - remove bottom border and radius */
.cart__review {
	border-bottom: none !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	margin-bottom: 0 !important;
	position: relative !important;
}

/* Gradient fade on left and right borders when open */
.cart__review::before,
.cart__review::after {
	content: '' !important;
	position: absolute !important;
	bottom: 0 !important;
	width: 3px !important;
	height: 30px !important;
	pointer-events: none !important;
	z-index: 10 !important;
}

.cart__review::before {
	left: -3px !important;
	background: linear-gradient(to bottom, transparent 0%, var(--second-background) 100%) !important;
}

.cart__review::after {
	right: -3px !important;
	background: linear-gradient(to bottom, transparent 0%, var(--second-background) 100%) !important;
}

/* Hide gradient overlays when dropdown is closed */
.cart__review:has(.rotate__compress)::before,
.cart__review:has(.rotate__compress)::after {
	display: none !important;
}

/* When dropdown is closed (rotate__compress present), restore original styles */
.cart__review:has(.rotate__compress) {
	border-bottom: 3px solid var(--third-background) !important;
	border-bottom-left-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
	margin-bottom: 20px !important;
}

/* When dropdown is open, remove top border-radius from cart__items */
.cart__items {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

/* ============================================
   MODAL OVERRIDES - Remove default backgrounds/shadows
   For Arefy custom modals (login + basket)
   ============================================ */

/* iziModal base wrappers - remove ALL backgrounds */
.iziModal,
.iziModal.transitionIn,
.iziModal.isAttached,
.iziModal.iziModal-light,
.iziModal.iziModal-dark {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
}

.iziModal-content {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

.iziModal-wrap {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide iziModal default header and close button */
.iziModal .iziModal-header,
.iziModal-header {
	display: none !important;
}

.iziModal .iziModal-button-close,
.iziModal-button-close {
	display: none !important;
}

/* ============================================
   AREFY MODULES OVERRIDES
   ============================================ */

/* Reset old module wrapper styles for Arefy modules */
.triplezone__modules__module:has(.arefy-top-donor),
.triplezone__modules__module:has(.arefy-payments) {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.triplezone__modules__module:has(.arefy-top-donor) .triplezone__modules__module__header,
.triplezone__modules__module:has(.arefy-payments) .triplezone__modules__module__header {
	display: none !important;
}

/* Override #modal base styles from style.css */
#modal,
div#modal,
.iziModal #modal {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Override #modal-login base styles from style.css */
#modal-login,
div#modal-login,
.iziModal #modal-login {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Shopping cart modal wrappers */
.shopping-cart-overlay,
#shopping-cart-overlay,
div.shopping-cart-overlay {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

.shopping-cart:not(.arefy-basket) {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* Remove any inner shadows/backgrounds from original shopping cart elements */
.shopping-cart-header:not(.arefy-basket-header),
.shopping-cart-body:not(.arefy-basket-body),
.shopping-cart-footer:not(.arefy-basket-footer) {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

/* Login panel inner overrides — neutralise legacy theme's gray .login-panel
   styling INSIDE the new arefy-login-modal so the form fields sit cleanly on
   the modal's own background. The previous selector used :not() inverted and
   targeted the wrong direction, leaving the gray block visible. */
.arefy-login-modal .login-panel {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

/* Ensure modal__content__box doesn't add background */
.modal__content__box,
.modal__content__box#modal-login,
#modal-login.modal__content__box {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* ============================================
   BONUS BADGE - Credits Category
   ============================================ */

.category__list--item {
	position: relative;
}

.arefy-bonus-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	padding: 6px 10px;
	background: linear-gradient(135deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	border-radius: 8px;
	box-shadow: 0 2px 0 var(--arefy-yellow-shadow), inset 0 2px 1px rgba(255, 255, 255, 0.4);
	transform-origin: center;
}

.arefy-bonus-badge::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
	pointer-events: none;
}

.arefy-bonus-badge-amount {
	font-size: 14px;
	font-weight: 800;
	color: #47241C;
	line-height: 1;
}

.arefy-bonus-badge-label {
	font-size: 8px;
	font-weight: 700;
	color: rgba(71, 36, 28, 0.8);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

/* Glow effect for bonus > 500 */
.arefy-bonus-badge.has-glow {
	box-shadow:
		0 2px 0 var(--arefy-yellow-shadow),
		inset 0 2px 1px rgba(255, 255, 255, 0.4),
		0 0 20px rgba(252, 211, 16, 0.6),
		0 0 40px rgba(252, 211, 16, 0.3);
	animation: bonus-glow 2s ease-in-out infinite;
}

@keyframes bonus-glow {
	0%, 100% {
		box-shadow:
			0 2px 0 var(--arefy-yellow-shadow),
			inset 0 2px 1px rgba(255, 255, 255, 0.4),
			0 0 20px rgba(252, 211, 16, 0.6),
			0 0 40px rgba(252, 211, 16, 0.3);
	}
	50% {
		box-shadow:
			0 2px 0 var(--arefy-yellow-shadow),
			inset 0 2px 1px rgba(255, 255, 255, 0.4),
			0 0 30px rgba(252, 211, 16, 0.8),
			0 0 60px rgba(252, 211, 16, 0.5);
	}
}

/* Responsive */
@media (max-width: 640px) {
	.arefy-bonus-badge {
		top: 8px;
		right: 8px;
		padding: 4px 8px;
		min-width: 50px;
	}

	.arefy-bonus-badge-amount {
		font-size: 12px;
	}

	.arefy-bonus-badge-label {
		font-size: 7px;
	}
}

/* ============================================
   PREMIUM BREATHING GLOW — Most expensive package
   ============================================ */

.arefy-premium-glow {
	position: relative;
}

/* Light rays behind the image */
.arefy-premium-glow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 135%;
	height: 135%;
	transform: translate(-50%, -50%);
	-webkit-mask-image: radial-gradient(circle, black 25%, transparent 70%);
	mask-image: radial-gradient(circle, black 25%, transparent 70%);
	background: conic-gradient(
		from 0deg at 50% 50%,
		transparent 0deg,
		rgba(102, 33, 162, 0.35) 6deg,
		transparent 16deg,

		transparent 30deg,
		rgba(138, 43, 226, 0.3) 36deg,
		transparent 46deg,

		transparent 60deg,
		rgba(102, 33, 162, 0.35) 66deg,
		transparent 76deg,

		transparent 90deg,
		rgba(168, 85, 247, 0.28) 96deg,
		transparent 106deg,

		transparent 120deg,
		rgba(102, 33, 162, 0.35) 126deg,
		transparent 136deg,

		transparent 150deg,
		rgba(138, 43, 226, 0.3) 156deg,
		transparent 166deg,

		transparent 180deg,
		rgba(102, 33, 162, 0.35) 186deg,
		transparent 196deg,

		transparent 210deg,
		rgba(168, 85, 247, 0.28) 216deg,
		transparent 226deg,

		transparent 240deg,
		rgba(102, 33, 162, 0.35) 246deg,
		transparent 256deg,

		transparent 270deg,
		rgba(138, 43, 226, 0.3) 276deg,
		transparent 286deg,

		transparent 300deg,
		rgba(102, 33, 162, 0.35) 306deg,
		transparent 316deg,

		transparent 330deg,
		rgba(168, 85, 247, 0.28) 336deg,
		transparent 346deg,

		transparent 360deg
	);
	z-index: 0;
	pointer-events: none;
	animation: premium-rays-breathe 3s ease-in-out infinite;
}

/* Image on top of rays */
.arefy-premium-glow img {
	position: relative;
	z-index: 1;
	animation: premium-img-breathe 3s ease-in-out infinite;
}

/* Bonus badge stays on top */
.arefy-premium-glow .arefy-bonus-badge {
	z-index: 2;
}

@keyframes premium-rays-breathe {
	0%, 100% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
}

@keyframes premium-img-breathe {
	0%, 100% {
		filter: drop-shadow(0 0 8px rgba(102, 33, 162, 0.3)) drop-shadow(0 0 20px rgba(138, 43, 226, 0.15));
	}
	50% {
		filter: drop-shadow(0 0 14px rgba(102, 33, 162, 0.5)) drop-shadow(0 0 30px rgba(138, 43, 226, 0.25));
	}
}

/* ============================================
   CHRISTMAS MODE
   ============================================ */

/* Snowflake falling animation */
@keyframes snowfall-char {
	0% {
		transform: translateY(0) translateX(0) rotate(0deg);
		opacity: 1;
	}
	25% {
		transform: translateY(25vh) translateX(30px) rotate(90deg);
	}
	50% {
		transform: translateY(50vh) translateX(-20px) rotate(180deg);
	}
	75% {
		transform: translateY(75vh) translateX(35px) rotate(270deg);
	}
	100% {
		transform: translateY(105vh) translateX(-15px) rotate(360deg);
		opacity: 0.3;
	}
}

.snowflake-char {
	animation: snowfall-char linear infinite;
}

/* Christmas bulb glow animation */
@keyframes bulb-glow {
	0%, 100% {
		opacity: 1;
		filter: brightness(1.3);
	}
	50% {
		opacity: 0.5;
		filter: brightness(0.7);
	}
}

/* Hide header particles in Christmas mode */
body.christmas-mode .arefy-hero-particles {
	display: none !important;
}

/* Snow particles container */
.arefy-snow-container {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 30;
	overflow: hidden;
}

.arefy-snow-container .snowflake-char {
	position: absolute;
	color: #fff;
	user-select: none;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px rgba(200, 230, 255, 0.8);
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

/* Christmas Lights */
.arefy-christmas-lights {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 40;
	height: 60px;
}

.arefy-christmas-lights svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
}

.arefy-lights-left,
.arefy-lights-right {
	position: absolute;
	top: 0;
	width: 20%;
	display: flex;
	justify-content: space-around;
	padding: 0 8px;
}

.arefy-lights-left {
	left: 0;
}

.arefy-lights-right {
	right: 0;
}

.arefy-bulb {
	position: relative;
}

.arefy-bulb-cap {
	width: 6px;
	height: 8px;
	background: #166534;
	margin: 0 auto;
	border-radius: 2px 2px 0 0;
}

.arefy-bulb-light {
	width: 12px;
	height: 18px;
	border-radius: 0 0 50% 50%;
	animation: bulb-glow 1.5s ease-in-out infinite;
}

/* Mobile Christmas Lights */
@media (max-width: 768px) {
	.arefy-christmas-lights {
		height: 30px;
	}

	.arefy-christmas-lights svg {
		height: 30px;
	}

	.arefy-lights-left,
	.arefy-lights-right {
		width: 25%;
		padding: 0 4px;
	}

	.arefy-bulb-cap {
		width: 4px;
		height: 5px;
	}

	.arefy-bulb-light {
		width: 8px;
		height: 12px;
	}
}

/* ============================================
   TEBEX.JS EMBEDDED CHECKOUT POPUP — width fix
   ============================================
   Tebex's zoid library sizes the checkout iframe to 800x760 by default,
   tuned for English copy. In Spanish (es_ES) the labels are noticeably
   longer — "Fecha de caducidad" wraps onto a second line in the
   Card Number / Expiry / CVV row, the "Acepto las condiciones..."
   disclaimer wraps onto an extra line, etc. Each wrap pushes the form
   past the 760px iframe height and an internal scrollbar appears.

   Widening the iframe to 925px gives every label enough room to fit on
   one line, the form reflows compactly, and the popup fits inside the
   default 760px height without scroll. Tested live — Tebex's internal
   layout does respect the extra width (it doesn't cap to an inner
   max-width), so the columns expand naturally instead of just adding
   side margin.

   !important is required because zoid writes the width inline. On
   mobile Tebex.js opens a new tab instead of a popup, so the rule
   never applies there. */
.tebex-js-lightbox__holder,
div[id^="zoid-tebex-js-checkout-component"],
iframe[name*="zoid"][name*="tebex"] {
	width: 925px !important;
	max-width: 925px !important;
}