/* ============================================
   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: not everything fitted and the "Iniciar sesión" button spilled out on the right */
@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;
}

/* ============================================
   HEADER (the 2024 one, restyled): logo + players and Discord members online.
   The background is the 2024 one, purple-tinted and blurred like arefy.net's.
   Short on purpose: the boxes start at ~375 px, like in 2024, so every category is
   visible without scrolling (with the Créditos hero they started at ~540).
   ============================================ */

.arefy-header {
	position: relative;
	z-index: 50;
	max-width: 1240px;
	margin: 70px auto 0;
	padding: 3.5rem 10px 2.25rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.arefy-header {
		margin-top: 60px;
		padding: 5rem 10px 3rem;
		column-gap: clamp(2.5rem, 8vw, 8rem); /* counters well apart from the logo, as in 2024 */
	}
}

.arefy-header-logo img {
	display: block;
	height: 190px; /* 2024: 200 px, with a thinner navbar above it */
	width: auto;
	filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
	animation: arefyHeaderLogo 3s ease-in-out infinite;
}

/* Small laptops (1024-1199 px): a smaller logo and text so each counter stays on one line */
@media (min-width: 1024px) and (max-width: 1199px) {
	.arefy-header-logo img {
		height: 150px;
	}

	.arefy-header-count {
		font-size: 0.9rem;
		white-space: nowrap;
	}
}

@keyframes arefyHeaderLogo {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.03); }
}

.arefy-header-stat {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.arefy-header-stat--server { justify-self: end; text-align: right; }
.arefy-header-stat--discord { justify-self: start; text-align: left; }

.arefy-header-count {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--arefy-yellow);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* The second line rolls up on hover (IP / Discord -> "¡Haz clic...!") */
.arefy-header-reel {
	display: block;
	height: 20px;
	overflow: hidden;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.arefy-header-reel span {
	display: block;
	line-height: 20px;
	transition: transform 0.25s ease;
}

.arefy-header-stat:hover .arefy-header-reel span,
.arefy-header-stat:focus-visible .arefy-header-reel span {
	transform: translateY(-20px);
}

.arefy-header-icon {
	position: relative;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--arefy-yellow) 0%, var(--arefy-yellow-dark) 100%);
	box-shadow: 0 0 22px rgba(252, 211, 16, 0.35);
	transition: transform 0.25s ease;
}

.arefy-header-stat--discord .arefy-header-icon { border-radius: 14px; }

.arefy-header-icon i {
	font-size: 24px;
	color: var(--arefy-purple-dark);
}

.arefy-header-stat--server .arefy-header-icon i { margin-left: 4px; font-size: 20px; }

/* Glowing bar under the icon, like in 2024 */
.arefy-header-icon::after {
	content: '';
	position: absolute;
	left: 30%;
	right: 30%;
	bottom: -14px;
	height: 4px;
	border-radius: 4px;
	background: var(--arefy-yellow);
	box-shadow: 0 0 10px var(--arefy-yellow);
	transition: bottom 0.25s ease;
}

.arefy-header-stat:hover .arefy-header-icon { transform: translateY(-3px); }
.arefy-header-stat:hover .arefy-header-icon::after { bottom: -20px; }

/* Mobile/tablet: logo on top, the two counters below it side by side */
@media (max-width: 991px) {
	.arefy-header {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem;
	}
	.arefy-header-logo { grid-column: 1 / -1; order: -1; justify-self: center; }
	.arefy-header-logo img { height: 110px; }
	.arefy-header-stat { gap: 10px; }
	.arefy-header-icon { width: 40px; height: 40px; }
	.arefy-header-stat--discord .arefy-header-icon { border-radius: 11px; }
	.arefy-header-icon i { font-size: 18px; }
	.arefy-header-stat--server .arefy-header-icon i { font-size: 15px; margin-left: 3px; }
	.arefy-header-icon::after { display: none; }
	.arefy-header-count { font-size: 0.72rem; line-height: 1.25; }
	.arefy-header-reel { font-size: 0.66rem; height: 18px; }
	.arefy-header-reel span { line-height: 18px; }
}

/* ============================================
   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 {
	/* 2024 header background (Minecraft Dungeons), purple-tinted and blurred like arefy.net's */
	background: url(https://arefy.net/fotos/images/header-background.webp) center top / cover no-repeat;
	width: 100%;
	height: 100%;
	min-height: 640px;
	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(rgba(19, 1, 60, 0.2) 0%, transparent 35%, var(--background-color, #13013C) 100%);
	z-index: 10;
}

/* ============================================
   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-header {
	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-header {
		margin-top: 140px;
	}
}

/* ============================================
   SALE BANNER - Inside content (home promo slot)
   Sized by the SLOT width (container query), not the screen:
   - wide: text | image | big countdown, like FreshSMP
   - < 900px: no image (small laptops, tablet)
   - < 700px: stacked (mobile; text + 4 boxes don't fit in a row)
   ============================================ */

.arefy-promo-slot {
	container-type: inline-size;
	/* Above the header (z-index 50) so the gems can poke over it; below the 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;
}

/* The image is one more item between the text and the countdown: space is shared out on its
   own and it never covers the text. The gem pokes ~35px above the banner. The negative side margins
   cancel Gemas.webp's transparent border, so it takes the same room as the drawing. */
.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;
	/* a wider seasonal image fits without breaking the row */
	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;
	}
}

/* ============================================
   HOME PROMO SLOT: sale banner or credits strip
   (function.saleCountdown.js decides, using arefy.net/api/oferta)
   ============================================ */

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

/* The margin goes on whatever is shown: with no sale and no strip, the slot takes no space */
.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; /* cuts the 4th pack at the edge */
}

/* Icon + title + link: the whole block goes to the Créditos category */
.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 →" (link to the Créditos category) */
.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;
}

/* 4th featured pack: peeks out cut by the right edge, under a gradient with
   "+N · Ver todos" (the packs not shown), and links to the Créditos category */
.arefy-credits-more {
	width: 150px;
	flex-shrink: 0;
	margin-right: -84px; /* 24px strip padding + 60px left outside: 90 are visible */
	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);
}

/* No room to peek out (slot under 640px): hidden, the title already links to the category */
@container (max-width: 639px) {
	.arefy-credits-more {
		display: none;
	}
}

/* 1024-1300px screens: the slot is narrower than the ~900px the row needs (the title broke into
   3 lines and the packs overlapped). Still a row, but compact and with the packs stacked. */
@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; /* the strip has 16px padding here */
		}
	}
}

@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;
	}

	/* Stacked there is room: the 4th is shown whole */
	.arefy-credits-more {
		width: auto;
		margin-right: 0;
	}
}

/* Line under the welcome + monthly goal */
.home-splash {
	padding-bottom: 20px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* The strip replaces the old home "Featured packages" block */
.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 22px; /* bottom: room for the progress line */
	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;
	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 %" (added by 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 line flush with the bottom edge and full width, like the 2024 module */
.arefy-goal-progress-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	z-index: 2;
}

.arefy-goal-progress-bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	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: 0 4px 0 0;
	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%);
}

.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 20px;
	}

	.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: same background, shorter */
	.arefy-bg-overlay-content {
		min-height: 460px;
	}
}

/* ============================================
   LAYOUT - Center sidebar + main content together
   ============================================ */
.body--with-sidebar {
	max-width: 1400px; /* tried 1240 on 29/09 (closer to 2024): Jordi found it too narrow */
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Mobile/tablet (< 968px, stacked sidebar): the gift card moves below the content.
   It used to sit between "Selecciona una categoría" and the products on every page. */
@media (max-width: 967px) {
	/* A single column that doesn't grow: otherwise a wide child (e.g. Tebex's login
	   form) widens the page and small phones get a horizontal scroll. */
	.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);
	}
}

/* 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;
}