/* ==========================================================================
   KOPIKAP STORE - CLEAN, MODERN & EASY-ON-THE-EYES UI
   Includes QRIS Payment Interface & Admin Order Processing Dashboard
   ========================================================================== */

:root {
	--bg-page: #F8F7FA;
	--bg-surface: #FFFFFF;
	--bg-soft: #F3F0F9;
	--bg-pink-soft: #FDF2F8;

	--text-main: #181226;
	--text-secondary: #5E5473;
	--text-muted: #9489A8;

	--accent-pink: #E11D74;
	--accent-purple: #7C3AED;
	--accent-emerald: #10B981;
	--accent-amber: #F59E0B;

	--gradient-brand: linear-gradient(135deg, #E11D74 0%, #7C3AED 100%);

	--border-light: #EBE6F2;
	--border-medium: #DCD3E8;

	--shadow-xs: 0 1px 3px rgba(24, 18, 38, 0.04);
	--shadow-sm: 0 4px 14px rgba(24, 18, 38, 0.05);
	--shadow-md: 0 12px 30px rgba(124, 58, 237, 0.08);
	--shadow-modal: 0 24px 60px rgba(24, 18, 38, 0.18);

	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 18px;
	--radius-xl: 22px;
	--radius-pill: 9999px;

	--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================================================
   MODE MALAM & PAGI (THEME TOKENS)
   ========================================================================== */
[data-theme="dark"] {
	--bg-page: #0B0D17;
	--bg-surface: #141726;
	--bg-soft: #1B1E32;
	--bg-pink-soft: rgba(225, 29, 116, 0.16);

	--text-main: #F8FAFC;
	--text-secondary: #94A3B8;
	--text-muted: #64748B;

	--border-light: #232840;
	--border-medium: #333959;

	--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
	--shadow-md: 0 12px 30px rgba(0, 0, 0, 0.6);
	--shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.85);
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body.pacaa-body {
	font-family: var(--font-sans);
	background-color: var(--bg-page);
	color: var(--text-main);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
}

.pacaa-container {
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
   HEADER & NAVIGATION (CLEAN SINGLE BAR)
   ========================================================================== */
.pacaa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-light);
}

.pacaa-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: wrap;
}

@media (min-width: 1024px) {
	.pacaa-header__inner {
		flex-wrap: nowrap;
		gap: 20px;
	}
}

.pacaa-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.pacaa-brand__avatar {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--bg-pink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pacaa-brand__title {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text-main);
	letter-spacing: -0.01em;
}

.pacaa-brand__title .accent {
	color: var(--accent-pink);
}

/* Search Bar */
.pacaa-search {
	position: relative;
	order: 3;
	width: 100%;
}

@media (min-width: 1024px) {
	.pacaa-search {
		order: 2;
		flex: 1;
		max-width: 390px;
	}
}

.pacaa-search__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.pacaa-search__icon {
	position: absolute;
	left: 14px;
	color: var(--text-muted);
	pointer-events: none;
}

.pacaa-search__input {
	width: 100%;
	padding: 9px 16px 9px 40px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--border-light);
	background: var(--bg-page);
	color: var(--text-main);
	font-size: 0.87rem;
	transition: all 0.18s ease;
}

.pacaa-search__input::placeholder {
	color: var(--text-muted);
}

.pacaa-search__input:focus {
	outline: none;
	background: var(--bg-surface);
	border-color: var(--accent-pink);
	box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.1);
}

.pacaa-search__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--bg-surface);
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-modal);
	padding: 10px;
	z-index: 150;
}

.search-dropdown__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--text-muted);
	padding: 4px 8px 8px;
	border-bottom: 1px solid var(--border-light);
	margin-bottom: 6px;
}

.search-clear-btn {
	background: none;
	border: none;
	color: var(--accent-pink);
	font-weight: 600;
	font-size: 0.74rem;
	cursor: pointer;
}

.search-result-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.search-result-item:hover {
	background: var(--bg-page);
}

.search-result-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.search-result-icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.search-result-meta h4 {
	font-size: 0.85rem;
	font-weight: 700;
}

.search-result-meta span {
	font-size: 0.73rem;
	color: var(--text-secondary);
}

.search-result-price {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--accent-pink);
}

/* Navigation Actions */
.pacaa-nav-actions {
	display: none;
	align-items: center;
	gap: 8px;
	order: 2;
}

@media (min-width: 1024px) {
	.pacaa-nav-actions {
		display: flex;
		order: 3;
	}
}

.pacaa-nav-actions.is-open {
	display: flex;
	flex-direction: column;
	width: 100%;
	order: 4;
	padding-top: 10px;
	border-top: 1px solid var(--border-light);
}

.pacaa-nav-actions.is-open .pacaa-btn {
	width: 100%;
}

/* Clean Buttons */
.pacaa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.84rem;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all 0.16s ease;
	white-space: nowrap;
}

.pacaa-btn--shortcut,
.pacaa-btn--track,
.pacaa-btn--ghost,
.pacaa-btn--theme {
	background: var(--bg-surface);
	border-color: var(--border-light);
	color: var(--text-main);
}

.pacaa-btn--shortcut:hover,
.pacaa-btn--track:hover,
.pacaa-btn--ghost:hover,
.pacaa-btn--theme:hover {
	border-color: var(--border-medium);
	background: var(--bg-soft);
}

.pacaa-btn--theme {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: var(--radius-pill);
	font-size: 1.1rem;
	user-select: none;
	flex-shrink: 0;
}

.pacaa-btn--theme:hover {
	transform: rotate(18deg) scale(1.06);
}

.shortcut-pill {
	background: var(--bg-pink-soft);
	color: var(--accent-pink);
	font-size: 0.68rem;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 5px;
}

.header-roblox-avatar {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	object-fit: cover;
	border: 1.5px solid var(--accent-pink);
	background: var(--bg-pink-soft);
}

.roblox-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.verified-avatar-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	color: #065F46;
	background: #D1FAE5;
	padding: 2px 7px;
	border-radius: 999px;
	margin-bottom: 2px;
}

.profile-meta-info strong {
	display: block;
	font-size: 0.92rem;
	color: var(--text-main);
}

.profile-meta-info p {
	font-size: 0.78rem;
	color: var(--text-secondary);
}

.checkout-roblox-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: var(--bg-pink-soft);
	border: 1px solid #FBCFE8;
}

.checkout-roblox-preview img {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	background: #FFFFFF;
	border: 1.5px solid var(--accent-pink);
}

.pacaa-btn--admin {
	background: #F5F3FF;
	border-color: #DDD6FE;
	color: #5B21B6;
}

.pacaa-btn--admin:hover {
	background: #EDE9FE;
	border-color: #C4B5FD;
}

.admin-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-emerald);
}

.admin-count-badge {
	background: var(--accent-purple);
	color: #FFFFFF;
	font-size: 0.68rem;
	font-weight: 800;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
}

.pacaa-btn--primary {
	background: var(--gradient-brand);
	color: #FFFFFF;
}

.pacaa-btn--primary:hover {
	opacity: 0.94;
	transform: translateY(-1px);
}

.pacaa-btn--white {
	background: #FFFFFF;
	color: #181226;
	font-weight: 700;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.pacaa-btn--white:hover {
	background: #F8F5FC;
	color: var(--accent-pink);
	border-color: var(--accent-pink);
}

[data-theme="dark"] .pacaa-btn--white {
	background: #FFFFFF;
	color: #181226 !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .pacaa-btn--white:hover {
	background: #F3EEFA;
	color: var(--accent-pink) !important;
}

.pacaa-btn--lg {
	padding: 11px 22px;
	font-size: 0.9rem;
}

.pacaa-btn--sm {
	padding: 6px 13px;
	font-size: 0.78rem;
}

.pacaa-btn--full {
	width: 100%;
}

.pacaa-mobile-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

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

.pacaa-mobile-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1.5px solid var(--border-light);
	background: var(--bg-surface);
	padding: 8px;
	cursor: pointer;
}

.pacaa-mobile-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--text-main);
	border-radius: 2px;
}

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

/* ==========================================================================
   1. CLEAN HERO BANNER
   ========================================================================== */
.pacaa-hero {
	padding: 24px 0 12px;
}

.hero-card {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	padding: 32px 26px;
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.hero-card {
		min-height: 340px;
		padding: 44px 52px;
	}
}

.hero-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(24, 15, 38, 0.88) 0%,
		rgba(24, 15, 38, 0.58) 55%,
		rgba(24, 15, 38, 0.12) 100%
	);
}

.hero-card__content {
	position: relative;
	z-index: 2;
	max-width: 520px;
	color: #FFFFFF;
}

.hero-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: 12px;
}

.hero-title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.8vw, 2.25rem);
	font-weight: 700;
	line-height: 1.22;
	margin-bottom: 10px;
}

.hero-subtitle {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: 22px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   3.5 METODE TOP UP WIDGET (PERSIS SEPERTI REFERENSI GAMBAR)
   ========================================================================== */
.pacaa-topup-methods-section {
	padding: 12px 0 8px;
}

.topup-methods-card {
	background: #FFFFFF;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	padding: 24px 26px;
	box-shadow: var(--shadow-sm);
}

.topup-methods-card__title {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	font-weight: 800;
	color: #0F172A;
	margin-bottom: 22px;
}

.topup-methods-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-bottom: 16px;
}

@media (min-width: 860px) {
	.topup-methods-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.tm-option-card {
	position: relative;
	border-radius: 16px;
	padding: 22px 18px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #F4F5F8;
	border: 2px solid #D8DCE6;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	min-height: 118px;
}

.tm-option-card:hover:not(.is-disabled) {
	transform: translateY(-2px);
	border-color: #16A34A;
}

/* Active Green State (5-7 Hari default style matching screenshot) */
.tm-option-card.is-active,
.tm-option--green.is-active {
	background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
	border-color: #16A34A;
	box-shadow: 0 6px 18px rgba(22, 163, 74, 0.14);
}

.tm-option--blue.is-active {
	background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
	border-color: #2563EB;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14);
}

/* Disabled / Out of Stock State (Instan Username style matching screenshot) */
.tm-option-card.is-disabled {
	background: #D5D9E2;
	border-color: #CBD0DC;
	cursor: not-allowed;
}

.tm-option-card.is-disabled .tm-option__text h3 {
	color: #64748B;
}

.tm-option-card.is-disabled .tm-option__text p {
	color: #7E8B9F;
}

/* Top-Left Corner Ribbon Badge */
.tm-ribbon {
	position: absolute;
	top: -12px;
	left: -4px;
	padding: 4px 13px;
	border-radius: 8px 8px 8px 2px;
	font-size: 0.76rem;
	font-weight: 800;
	color: #FFFFFF;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
	z-index: 3;
}

.tm-ribbon::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -5px;
	border-top: 5px solid rgba(0, 0, 0, 0.35);
	border-left: 5px solid transparent;
}

.tm-ribbon--red {
	background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
}

.tm-ribbon--amber {
	background: linear-gradient(135deg, #D97706 0%, #92400E 100%);
}

.tm-ribbon--blue {
	background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

.tm-option__text {
	flex: 1;
	z-index: 2;
}

.tm-option__text h3 {
	font-size: 1.08rem;
	font-weight: 700;
	color: #0F172A;
	margin-bottom: 4px;
}

.tm-option--green.is-active .tm-option__text h3 {
	color: #15803D;
}

.tm-option__text p {
	font-size: 0.82rem;
	color: #475569;
	line-height: 1.38;
}

.tm-option__coin {
	flex-shrink: 0;
	margin-right: -4px;
	margin-bottom: -6px;
	transform: rotate(10deg);
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.14));
	transition: transform 0.25s ease;
}

.tm-option-card:hover:not(.is-disabled) .tm-option__coin {
	transform: rotate(4deg) scale(1.06);
}

/* Bottom "Cara Beli" Bar */
.tm-cara-beli-bar {
	width: 100%;
	background: #F4F6F9;
	border: 1px solid #E5E9F0;
	border-radius: 14px;
	padding: 13px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.tm-cara-beli-bar:hover {
	background: #ECFDF5;
	border-color: #86EFAC;
}

.tm-cara-beli-bar__left {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #15803D;
	font-size: 0.94rem;
}

.tm-q-icon {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: #16A34A;
	color: #FFFFFF;
	font-size: 0.78rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tm-chevron {
	font-size: 1.35rem;
	font-weight: 700;
	color: #16A34A;
	line-height: 1;
}

/* ==========================================================================
   2-COLUMN TOP UP WORKSPACE (PILIHAN ROBUX + DETAIL USER STICKY)
   ========================================================================== */
.topup-workspace-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: start;
}

@media (min-width: 1024px) {
	.topup-workspace-layout {
		grid-template-columns: 1fr 355px;
	}
}

.topup-workspace-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.topup-workspace-right {
	position: relative;
}

@media (min-width: 1024px) {
	.topup-workspace-right {
		position: sticky;
		top: 90px;
	}
}

/* Pilihan Robux Card */
.pilihan-robux-card {
	background: #FFFFFF;
	border: 1px solid #EAECEF;
	border-radius: 24px;
	padding: 24px 26px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.pilihan-robux-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.pilihan-robux-card__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0;
}

.stok-ready-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #DCFCE7;
	color: #15803D;
	font-size: 0.76rem;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 999px;
	letter-spacing: 0.03em;
}

.stok-ready-check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #16A34A;
	color: #FFFFFF;
	font-size: 0.68rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Custom Calculator Row */
.robux-calc-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 22px;
}

@media (min-width: 640px) {
	.robux-calc-row {
		grid-template-columns: 1fr 1fr;
	}
}

.robux-calc-input-box {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 1.5px solid #D1D5DB;
	border-radius: 14px;
	padding: 13px 16px;
	gap: 10px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.robux-calc-input-box:focus-within {
	border-color: #16A34A;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.robux-calc-input-box input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 0.96rem;
	color: #111827;
	background: transparent;
	width: 100%;
	font-weight: 500;
}

.robux-calc-input-box input::placeholder {
	color: #6B7280;
	font-weight: 400;
}

.robux-calc-suffix,
.robux-calc-prefix {
	font-weight: 700;
	font-size: 0.96rem;
	color: #111827;
	flex-shrink: 0;
}

/* Dashed Divider */
.pilihan-robux-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	color: #6B7280;
	font-size: 0.85rem;
}

.pilihan-robux-divider::before,
.pilihan-robux-divider::after {
	content: '';
	flex: 1;
	border-top: 1.5px dashed #E5E7EB;
}

/* 4x4 Grid Pilihan Robux */
.pilihan-robux-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 14px;
}

@media (min-width: 640px) {
	.pilihan-robux-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 840px) {
	.pilihan-robux-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.rbx-pkg-card {
	position: relative;
	background: #FFFFFF;
	border: 1.5px solid #ECEEF2;
	border-radius: 14px;
	padding: 16px 14px 14px;
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.rbx-pkg-card:hover {
	transform: translateY(-2px);
	border-color: #86EFAC;
	box-shadow: 0 8px 20px rgba(22, 163, 74, 0.08);
}

.rbx-pkg-card.is-selected {
	background: #F0FDF4;
	border: 2px solid #16A34A;
	box-shadow: 0 6px 16px rgba(22, 163, 74, 0.14);
}

/* Red 13% Corner Ribbon */
.rbx-pkg-discount {
	position: absolute;
	top: -9px;
	left: -2px;
	background: #DC2626;
	color: #FFFFFF;
	font-size: 0.72rem;
	font-weight: 800;
	padding: 2px 9px;
	border-radius: 6px 6px 6px 0;
	line-height: 1.3;
	box-shadow: 0 2px 5px rgba(220, 38, 38, 0.25);
}

.rbx-pkg-discount::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	border-top: 4px solid #7F1D1D;
	border-left: 4px solid transparent;
}

.rbx-pkg-top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #E5E7EB;
}

.rbx-mini-coin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rbx-pkg-amount {
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 700;
	color: #1F2937;
}

.rbx-pkg-bottom {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.rbx-pkg-orig {
	font-size: 0.78rem;
	color: #9CA3AF;
	text-decoration: line-through;
}

.rbx-pkg-price {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 800;
	color: #111827;
}

/* Detail User Sticky Card (Right Column) */
.detail-user-card {
	background: #FFFFFF;
	border: 1px solid #EAECEF;
	border-radius: 22px;
	padding: 22px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.detail-user-card__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 6px;
}

.detail-user-card__sub {
	font-size: 0.85rem;
	color: #6B7280;
	line-height: 1.45;
	margin: 0 0 16px;
}

.du-username-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #F9FAFB;
	border: 1.5px solid #D1D5DB;
	border-radius: 14px;
	padding: 12px 14px;
	margin-bottom: 14px;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.du-username-box:focus-within {
	background: #FFFFFF;
	border-color: #16A34A;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.du-user-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.du-username-box input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.92rem;
	color: #111827;
	font-weight: 500;
}

.du-username-box input::placeholder {
	color: #6B7280;
	font-weight: 400;
}

.du-help-icon {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #374151;
	color: #FFFFFF;
	font-size: 0.72rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: help;
	flex-shrink: 0;
}

/* Live Roblox Avatar Preview inside Detail User */
.du-avatar-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #F0FDF4;
	border: 1.5px solid #86EFAC;
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 14px;
}

.du-avatar-preview__img {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #FFFFFF;
	border: 1px solid #BBF7D0;
	object-fit: cover;
	flex-shrink: 0;
}

.du-avatar-preview__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.du-avatar-preview__info strong {
	font-size: 0.88rem;
	color: #111827;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.du-avatar-preview__info span {
	font-size: 0.75rem;
	color: #15803D;
	font-weight: 600;
}

.du-avatar-preview.is-empty {
	background: #F9FAFB;
	border-color: #E5E7EB;
}

.du-avatar-preview.is-empty .du-avatar-preview__info span {
	color: #6B7280;
}

.du-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	margin-bottom: 14px;
	border-top: 1px solid #F3F4F6;
	font-size: 0.92rem;
	color: #111827;
}

.du-summary-robux strong {
	font-weight: 800;
}

.du-summary-price {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 800;
	color: #111827;
}

.du-action-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.du-cart-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid #E5E7EB;
	background: #FFFFFF;
	color: #374151;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.du-cart-btn:hover {
	background: #F0FDF4;
	border-color: #16A34A;
	color: #15803D;
}

.du-submit-btn {
	flex: 1;
	height: 46px;
	border-radius: 12px;
	border: none;
	background: #CBD5E1;
	color: #475569;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: not-allowed;
	transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.du-submit-btn.is-ready {
	background: #16A34A;
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(22, 163, 74, 0.25);
}

.du-submit-btn.is-ready:hover {
	background: #15803D;
	transform: translateY(-1px);
}
.pacaa-catalog {
	padding: 28px 0;
}

.section-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 22px;
}

@media (min-width: 768px) {
	.section-header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.section-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	color: var(--text-main);
}

.section-subtitle {
	font-size: 0.87rem;
	color: var(--text-secondary);
}

.catalog-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--bg-surface);
	padding: 4px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-light);
}

.catalog-tab {
	padding: 7px 16px;
	border-radius: var(--radius-pill);
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 0.83rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.catalog-tab.active {
	background: var(--text-main);
	color: #FFFFFF;
}

.catalog-filter-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--bg-soft);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	margin-bottom: 18px;
	font-size: 0.85rem;
}

.reset-filter-btn {
	background: none;
	border: none;
	color: var(--accent-pink);
	font-weight: 700;
	cursor: pointer;
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (min-width: 768px) {
	.catalog-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
}

@media (min-width: 1024px) {
	.catalog-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.game-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	display: flex;
	flex-direction: column;
}

.game-card:hover {
	transform: translateY(-3px);
	border-color: var(--border-medium);
	box-shadow: var(--shadow-md);
}

.game-card__thumb {
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.game-card__icon {
	font-size: 2.35rem;
	transition: transform 0.2s ease;
}

.game-card:hover .game-card__icon {
	transform: scale(1.08);
}

.game-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.game-card__category {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--accent-purple);
	margin-bottom: 2px;
}

.game-card__title {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--text-main);
	margin-bottom: 5px;
}

.game-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: 12px;
}

.meta-rating {
	color: var(--accent-amber);
	font-weight: 700;
}

.game-card__footer {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.price-caption {
	display: block;
	font-size: 0.66rem;
	color: var(--text-muted);
	line-height: 1;
}

.game-card__price {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text-main);
}

.game-card__cta {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--accent-pink);
	background: var(--bg-pink-soft);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

.catalog-empty {
	text-align: center;
	padding: 36px;
	background: var(--bg-surface);
	border-radius: var(--radius-lg);
	border: 1px dashed var(--border-medium);
}

/* ==========================================================================
   3. ANIMATED LEADERBOARD SECTION (GAMIFIED PODIUM & PRIZE MOTIVATION)
   ========================================================================== */
.pacaa-leaderboard-section {
	padding: 16px 0 10px;
}

.leaderboard-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	padding: 26px 26px 22px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	animation: lbCardFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lbCardFadeIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.leaderboard-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.lb-header-left {
	flex: 1;
	min-width: 280px;
}

.lb-tags-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.section-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--accent-pink);
	background: var(--bg-pink-soft);
	padding: 5px 12px;
	border-radius: var(--radius-pill);
}

.live-pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-pink);
	box-shadow: 0 0 0 0 rgba(225, 29, 116, 0.6);
	animation: livePulseRing 1.8s infinite;
}

@keyframes livePulseRing {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(225, 29, 116, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 7px rgba(225, 29, 116, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(225, 29, 116, 0);
	}
}

.lb-prize-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7rem;
	font-weight: 700;
	color: #B45309;
	background: #FEF3C7;
	border: 1px solid #FCD34D;
	padding: 4px 11px;
	border-radius: var(--radius-pill);
	letter-spacing: 0.02em;
}

.lb-timer-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7rem;
	font-weight: 700;
	color: #4338CA;
	background: #EEF2FF;
	border: 1px solid #C7D2FE;
	padding: 4px 11px;
	border-radius: var(--radius-pill);
	font-variant-numeric: tabular-nums;
}

.leaderboard-card__title {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text-main);
	margin-bottom: 4px;
}

.leaderboard-card__sub {
	font-size: 0.85rem;
	color: var(--text-secondary);
	line-height: 1.45;
}

.lb-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pacaa-btn--reward-info {
	background: var(--bg-surface);
	border: 1.5px solid var(--border-medium);
	color: var(--text-main);
	font-size: 0.82rem;
	font-weight: 700;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.pacaa-btn--reward-info:hover {
	border-color: var(--accent-pink);
	color: var(--accent-pink);
	background: var(--bg-pink-soft);
	transform: translateY(-1px);
}

.pacaa-btn--kejar {
	background: var(--gradient-brand);
	color: #FFFFFF;
	font-size: 0.82rem;
	font-weight: 800;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	box-shadow: 0 4px 14px rgba(225, 29, 116, 0.3);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.pacaa-btn--kejar:hover {
	opacity: 0.95;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(225, 29, 116, 0.45);
}

/* ==========================================================================
   LEADERBOARD TOP GRID (PODIUM CARDS)
   ========================================================================== */
.leaderboard-top-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 22px;
}

@media (min-width: 600px) {
	.leaderboard-top-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.leaderboard-top-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.lb-item {
	position: relative;
	overflow: hidden;
	background: var(--bg-page);
	border: 1.5px solid var(--border-light);
	border-radius: 18px;
	padding: 18px 14px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	opacity: 0;
	animation: lbItemEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: var(--lb-delay, 0s);
	transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s ease, border-color 0.26s ease;
}

@keyframes lbItemEntrance {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.lb-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

/* Podium Ribbons */
.lb-ribbon {
	width: calc(100% + 28px);
	margin-top: -18px;
	margin-bottom: 14px;
	padding: 6px 8px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lb-podium--gold .lb-ribbon {
	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.lb-podium--silver .lb-ribbon {
	background: linear-gradient(135deg, #64748B 0%, #0EA5E9 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.lb-podium--bronze .lb-ribbon {
	background: linear-gradient(135deg, #B45309 0%, #EA580C 100%);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}

.lb-podium--other .lb-ribbon {
	background: var(--bg-soft);
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-light);
}

/* Rank 1 Gold Elite Styling */
.lb-podium--gold {
	background: linear-gradient(180deg, #FFFDF5 0%, var(--bg-surface) 100%);
	border-color: #F59E0B;
	box-shadow: 0 8px 24px rgba(245, 158, 11, 0.16);
}

.lb-podium--gold:hover {
	border-color: #D97706;
	box-shadow: 0 16px 36px rgba(245, 158, 11, 0.28);
}

/* Rank 2 Silver Styling */
.lb-podium--silver {
	background: linear-gradient(180deg, #F8FAFC 0%, var(--bg-surface) 100%);
	border-color: #38BDF8;
	box-shadow: 0 6px 20px rgba(56, 189, 248, 0.12);
}

.lb-podium--silver:hover {
	border-color: #0284C7;
	box-shadow: 0 14px 30px rgba(56, 189, 248, 0.22);
}

/* Rank 3 Bronze Styling */
.lb-podium--bronze {
	background: linear-gradient(180deg, #FFFBEB 0%, var(--bg-surface) 100%);
	border-color: #FB923C;
	box-shadow: 0 6px 18px rgba(251, 146, 60, 0.12);
}

.lb-podium--bronze:hover {
	border-color: #EA580C;
	box-shadow: 0 14px 28px rgba(251, 146, 60, 0.22);
}

.lb-shimmer {
	position: absolute;
	top: 0;
	left: -120%;
	width: 65%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.65) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
	animation: lbShimmerSweep 3.6s infinite;
	pointer-events: none;
}

@keyframes lbShimmerSweep {
	0% { left: -120%; }
	40%, 100% { left: 160%; }
}

/* Avatar Wrap & Halos */
.lb-avatar-wrap {
	position: relative;
	margin-bottom: 12px;
	display: inline-block;
}

.lb-floating-crown {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.3rem;
	z-index: 3;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.crown-bounce {
	animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {
	0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
	50% { transform: translateX(-50%) translateY(-4px) rotate(-4deg); }
}

.lb-avatar {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: var(--bg-surface);
	border: 2px solid var(--border-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform 0.25s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lb-item:hover .lb-avatar {
	transform: scale(1.08) rotate(-2deg);
}

.lb-aura--gold {
	border-color: #F59E0B;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25), 0 0 16px rgba(245, 158, 11, 0.35);
}

.lb-aura--silver {
	border-color: #38BDF8;
	box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22), 0 0 14px rgba(56, 189, 248, 0.3);
}

.lb-aura--bronze {
	border-color: #FB923C;
	box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.22), 0 0 12px rgba(251, 146, 60, 0.28);
}

.lb-rank-badge {
	position: absolute;
	bottom: -6px;
	right: -6px;
	background: var(--text-main);
	color: var(--bg-page);
	font-size: 0.64rem;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--bg-surface);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.lb-podium--gold .lb-rank-badge {
	background: #F59E0B;
	color: #FFFFFF;
}

.lb-podium--silver .lb-rank-badge {
	background: #0284C7;
	color: #FFFFFF;
}

.lb-podium--bronze .lb-rank-badge {
	background: #D97706;
	color: #FFFFFF;
}

.lb-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Player Info & Stats */
.lb-info {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.lb-username-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	max-width: 100%;
}

.lb-username {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
}

.lb-verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	background: #3B82F6;
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 0.58rem;
	font-weight: 900;
	flex-shrink: 0;
}

.lb-podium--gold .lb-verified {
	background: #F59E0B;
}

/* Stats Box */
.lb-stats-box {
	width: 100%;
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: 10px;
	padding: 6px 8px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.lb-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.72rem;
	color: var(--text-muted);
}

.lb-stat-val {
	font-weight: 700;
	color: var(--text-main);
}

.lb-robux-highlight {
	color: var(--accent-pink);
	font-style: normal;
	font-weight: 800;
}

/* Reward Motivation Pill */
.lb-reward-pill {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--bg-soft);
	border: 1px dashed var(--border-medium);
	border-radius: 12px;
	padding: 7px 8px;
	margin-top: 2px;
	transition: all 0.2s ease;
}

.lb-reward-icon {
	font-size: 1rem;
	flex-shrink: 0;
}

.lb-reward-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.lb-reward-title {
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	letter-spacing: 0.03em;
}

.lb-reward-amount {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--accent-pink);
}

.lb-podium--gold .lb-reward-pill {
	background: #FEF3C7;
	border: 1px solid #FCD34D;
}

.lb-podium--gold .lb-reward-amount {
	color: #B45309;
}

.lb-podium--silver .lb-reward-pill {
	background: #E0F2FE;
	border: 1px solid #BAE6FD;
}

.lb-podium--silver .lb-reward-amount {
	color: #0369A1;
}

.lb-podium--bronze .lb-reward-pill {
	background: #FFEDD5;
	border: 1px solid #FED7AA;
}

.lb-podium--bronze .lb-reward-amount {
	color: #C2410C;
}

/* ==========================================================================
   INCENTIVE CALL-TO-ACTION BAR
   ========================================================================== */
.lb-incentive-bar {
	background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-purple) 100%);
	border-radius: 16px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: #FFFFFF;
	box-shadow: 0 8px 24px rgba(225, 29, 116, 0.25);
	flex-wrap: wrap;
}

.lb-incentive-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 260px;
}

.lb-incentive-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	flex-shrink: 0;
}

.lb-incentive-desc strong {
	display: block;
	font-size: 0.92rem;
	font-weight: 800;
	margin-bottom: 2px;
	letter-spacing: 0.01em;
}

.lb-incentive-desc p {
	font-size: 0.78rem;
	opacity: 0.92;
	line-height: 1.35;
	margin: 0;
}

.lb-incentive-actions {
	flex-shrink: 0;
}

.lb-incentive-btn {
	background: #FFFFFF !important;
	color: #181226 !important;
	font-weight: 800;
	font-size: 0.82rem;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lb-incentive-btn:hover {
	transform: translateY(-2px);
	background: #FFF0F7 !important;
	color: var(--accent-pink) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   HADIAH EVENT MODAL STYLING
   ========================================================================== */
.pacaa-modal__card--lg {
	max-width: 680px;
}

.hadiah-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 18px 0;
}

@media (min-width: 600px) {
	.hadiah-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.hadiah-card {
	border-radius: 14px;
	padding: 16px;
	border: 1.5px solid var(--border-light);
	background: var(--bg-surface);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hadiah-card--gold {
	border-color: #F59E0B;
	background: linear-gradient(180deg, #FEF3C7 0%, var(--bg-surface) 100%);
}

.hadiah-card--silver {
	border-color: #38BDF8;
	background: linear-gradient(180deg, #E0F2FE 0%, var(--bg-surface) 100%);
}

.hadiah-card--bronze {
	border-color: #FB923C;
	background: linear-gradient(180deg, #FFEDD5 0%, var(--bg-surface) 100%);
}

.hadiah-card--others {
	border-color: var(--border-medium);
	background: var(--bg-soft);
}

.hadiah-card__badge {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.hadiah-card--gold .hadiah-card__badge { color: #B45309; }
.hadiah-card--silver .hadiah-card__badge { color: #0284C7; }
.hadiah-card--bronze .hadiah-card__badge { color: #C2410C; }

.hadiah-card__prize {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--text-main);
}

.hadiah-perks {
	list-style: none;
	padding: 0;
	margin: 6px 0 0;
	font-size: 0.78rem;
	color: var(--text-secondary);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hadiah-rules {
	background: var(--bg-soft);
	border: 1px solid var(--border-light);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 0.78rem;
	color: var(--text-secondary);
}

.hadiah-rules h4 {
	font-size: 0.82rem;
	color: var(--text-main);
	margin-bottom: 6px;
}

.hadiah-rules ol {
	padding-left: 18px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1.4;
}

.hadiah-delivery-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	margin: 14px 0 16px;
	font-size: 0.82rem;
}

.hadiah-delivery--auto {
	background: #ECFDF5;
	border: 1.5px solid #A7F3D0;
	color: #065F46;
}

[data-theme="dark"] .hadiah-delivery--auto {
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.35);
	color: #6EE7B7;
}

.hadiah-delivery--manual {
	background: #EFF6FF;
	border: 1.5px solid #BFDBFE;
	color: #1E40AF;
}

[data-theme="dark"] .hadiah-delivery--manual {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.35);
	color: #93C5FD;
}

.hadiah-delivery-icon {
	font-size: 1.4rem;
	line-height: 1;
	flex-shrink: 0;
}

/* ==========================================================================
   4. KEUNGGULAN LAYANAN & TESTIMONI
   ========================================================================== */
.pacaa-highlights {
	padding: 8px 0 28px;
}

.highlights-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 640px) {
	.highlights-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.highlights-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.highlight-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 18px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.highlight-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--bg-pink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.highlight-card h3 {
	font-family: var(--font-display);
	font-size: 0.96rem;
	margin-bottom: 2px;
}

.highlight-card p {
	font-size: 0.8rem;
	color: var(--text-secondary);
	line-height: 1.45;
}

.pacaa-testimonials {
	padding: 8px 0 48px;
}

.testimonials-track {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.testimonials-track {
		grid-template-columns: repeat(3, 1fr);
	}
}

.testi-card {
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.testi-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.testi-user {
	display: flex;
	align-items: center;
	gap: 10px;
}

.testi-avatar {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--bg-soft);
	border: 1px solid var(--border-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.testi-user strong {
	display: block;
	font-size: 0.86rem;
}

.testi-game {
	font-size: 0.73rem;
	color: var(--text-secondary);
}

.testi-stars {
	color: var(--accent-amber);
	font-size: 0.84rem;
}

.testi-comment {
	font-size: 0.84rem;
	color: var(--text-secondary);
	line-height: 1.55;
}

/* ==========================================================================
   CLEAN FOOTER
   ========================================================================== */
.pacaa-footer {
	background: var(--bg-surface);
	border-top: 1px solid var(--border-light);
	padding: 40px 0 28px;
}

.pacaa-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
	.pacaa-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	}
}

.footer-desc {
	font-size: 0.83rem;
	color: var(--text-secondary);
	margin-top: 10px;
	line-height: 1.6;
}

.footer-heading {
	font-family: var(--font-display);
	font-size: 0.96rem;
	margin-bottom: 12px;
	color: var(--text-main);
}

.footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-links a,
.footer-link-btn {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 0.83rem;
	cursor: pointer;
	text-align: left;
	padding: 0;
}

.footer-links a:hover,
.footer-link-btn:hover {
	color: var(--accent-pink);
}

.qris-footer-badge {
	background: var(--bg-page);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	margin-bottom: 12px;
}

.qris-footer-badge strong {
	display: inline-block;
	font-size: 0.78rem;
	background: var(--text-main);
	color: #fff;
	padding: 1px 7px;
	border-radius: 4px;
	margin-bottom: 4px;
}

.qris-footer-badge span {
	display: block;
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.footer-socials {
	display: flex;
	gap: 8px;
}

.social-btn {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-medium);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-main);
}

.social-btn:hover {
	border-color: var(--accent-pink);
	color: var(--accent-pink);
}

.pacaa-footer__bottom {
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: space-between;
	font-size: 0.78rem;
	color: var(--text-muted);
}

@media (min-width: 768px) {
	.pacaa-footer__bottom {
		flex-direction: row;
		align-items: center;
	}
}

.footer-staff-login-link:hover {
	background: rgba(255, 255, 255, 0.14) !important;
	color: var(--accent-pink) !important;
	border-color: rgba(236, 72, 153, 0.4) !important;
	transform: translateY(-1px);
}

/* ==========================================================================
   MODALS, QRIS GATEWAY & ADMIN ORDER PROCESSING DASHBOARD
   ========================================================================== */
.pacaa-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.pacaa-modal.is-open {
	display: flex;
}

.pacaa-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 18, 38, 0.5);
	backdrop-filter: blur(4px);
}

.pacaa-modal__card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-xl);
	padding: 24px;
	box-shadow: var(--shadow-modal);
}

.pacaa-modal__card--landscape {
	max-width: 880px;
}

.landscape-topup-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

@media (min-width: 768px) {
	.landscape-topup-grid {
		grid-template-columns: 1.35fr 1fr;
		gap: 24px;
	}
}

.landscape-items-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.landscape-right-panel {
	background: var(--bg-page);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Landscape Horizontal Game Cards in Catalog */
.catalog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 640px) {
	.catalog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (min-width: 1024px) {
	.catalog-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
}

.game-card--landscape {
	flex-direction: row !important;
	align-items: center;
	padding: 12px;
	gap: 14px;
}

.game-card--landscape .game-card__thumb {
	width: 96px;
	height: 88px;
	border-radius: 14px;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--bg-soft);
	border: 1px solid var(--border-light);
}

.game-card__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.game-card:hover .game-card__cover-img {
	transform: scale(1.06);
}

.game-card--landscape .game-card__body {
	padding: 2px 4px 2px 0;
	min-width: 0;
}

.game-card--landscape .game-card__title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 3px;
}

.game-card--landscape .game-card__meta {
	margin-bottom: 8px;
}

.game-card--landscape .game-card__footer {
	padding-top: 6px;
}

.pacaa-modal__card--qris {
	max-width: 820px;
}

.qris-landscape-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: stretch;
}

@media (min-width: 768px) {
	.qris-landscape-grid {
		grid-template-columns: 330px 1fr;
		gap: 22px;
		align-items: stretch;
	}
}

.pacaa-modal__card--xl {
	max-width: 1040px;
}

.pacaa-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border-light);
	background: var(--bg-page);
	color: var(--text-secondary);
	cursor: pointer;
}

.pacaa-modal__header {
	margin-bottom: 16px;
}

.modal-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--bg-pink-soft);
	color: var(--accent-pink);
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	margin-bottom: 6px;
}

.pacaa-modal__header h2 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin-bottom: 4px;
}

.pacaa-modal__header p {
	font-size: 0.84rem;
	color: var(--text-secondary);
}

/* QRIS Interactive Card Styling */
.qris-box {
	background: #FFFFFF;
	border: 2px solid var(--border-light);
	border-radius: var(--radius-lg);
	padding: 18px;
	text-align: center;
	margin: 14px 0;
}

.qris-box__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px dashed var(--border-medium);
	padding-bottom: 10px;
	margin-bottom: 14px;
}

.qris-logo-tag {
	font-weight: 900;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	color: #181226;
	background: #F3F0F9;
	padding: 3px 10px;
	border-radius: 6px;
}

.qris-nmid {
	font-size: 0.72rem;
	color: var(--text-secondary);
	font-weight: 600;
}

.qris-qr-frame {
	width: 210px;
	height: 210px;
	margin: 0 auto 12px;
	padding: 12px;
	background: #FFFFFF;
	border: 2px solid #E11D74;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qris-amount-box {
	background: var(--bg-pink-soft);
	border-radius: var(--radius-sm);
	padding: 10px;
	margin-top: 10px;
}

.qris-amount-box span {
	display: block;
	font-size: 0.74rem;
	color: var(--text-secondary);
}

.qris-amount-box strong {
	font-size: 1.25rem;
	color: var(--accent-pink);
	font-weight: 800;
}

/* Consistent Copy Buttons in Payment Modal */
.pacaa-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 0.76rem;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
	border: none;
	line-height: 1.2;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	flex-shrink: 0;
	box-sizing: border-box;
}

.pacaa-copy-btn--pink {
	background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
	color: #FFFFFF !important;
	box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

.pacaa-copy-btn--pink:hover {
	background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.45);
}

.pacaa-copy-btn--pink:active {
	transform: translateY(0);
}

.pacaa-copy-btn.is-copied {
	background: #10B981 !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
	transform: scale(1.03);
}

.qris-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.proof-upload-box {
	background: var(--bg-page);
	border: 1.5px dashed var(--border-medium);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	margin-bottom: 12px;
	text-align: left;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.proof-upload-box.has-file {
	border-color: var(--accent-emerald);
	background: #ECFDF5;
}

.proof-upload-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-main);
	margin-bottom: 6px;
}

.proof-upload-input {
	width: 100%;
	font-size: 0.78rem;
	color: var(--text-secondary);
}

.proof-preview-wrap[hidden],
.proof-preview-wrap.is-hidden {
	display: none !important;
}

.proof-preview-wrap {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ECFDF5;
	border: 1px solid #A7F3D0;
	border-radius: 10px;
	padding: 8px 12px;
}

.proof-preview-img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	border: 1.5px solid var(--accent-emerald);
	background: #fff;
	flex-shrink: 0;
}

/* Admin Dashboard Styling */
.admin-dash__header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 18px;
	padding-right: 32px;
}

@media (min-width: 768px) {
	.admin-dash__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.admin-dash__header h2 {
	font-family: var(--font-display);
	font-size: 1.35rem;
}

.admin-dash__header p {
	font-size: 0.84rem;
	color: var(--text-secondary);
}

.admin-dash__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.admin-filter-btn {
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border-light);
	background: var(--bg-page);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
}

.admin-filter-btn.active {
	background: var(--text-main);
	color: #FFFFFF;
	border-color: var(--text-main);
}

.admin-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}

@media (min-width: 768px) {
	.admin-stats-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.admin-stat-card {
	background: var(--bg-page);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 14px;
}

.admin-stat-card span {
	display: block;
	font-size: 0.74rem;
	color: var(--text-secondary);
}

.admin-stat-card strong {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text-main);
}

.admin-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
}

.admin-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
	text-align: left;
}

.admin-orders-table th {
	background: var(--bg-page);
	padding: 11px 14px;
	font-weight: 700;
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-light);
	white-space: nowrap;
}

.admin-orders-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-light);
	vertical-align: middle;
}

.admin-status-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
}

.status--pending_qris {
	background: #F3F4F6;
	color: #4B5563;
}

.status--paid_processing {
	background: #FEF3C7;
	color: #92400E;
}

.status--completed {
	background: #D1FAE5;
	color: #065F46;
}

.status--cancelled {
	background: #FEE2E2;
	color: #991B1B;
}

.admin-action-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.admin-act-btn {
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid var(--border-medium);
	background: var(--bg-surface);
	font-size: 0.74rem;
	font-weight: 600;
	cursor: pointer;
}

.admin-act-btn--send {
	background: var(--accent-emerald);
	color: #FFFFFF;
	border-color: var(--accent-emerald);
}

.admin-act-btn--verify {
	background: var(--accent-purple);
	color: #FFFFFF;
	border-color: var(--accent-purple);
}

/* Common Form Elements */
.pacaa-input,
.pacaa-select {
	width: 100%;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--border-light);
	background: var(--bg-page);
	color: var(--text-main);
	font-size: 0.88rem;
}

.pacaa-input:focus,
.pacaa-select:focus {
	outline: none;
	border-color: var(--accent-pink);
	background: var(--bg-surface);
}

.input-with-btn {
	display: flex;
	gap: 8px;
}

.track-sample-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.sample-id-chip {
	background: var(--bg-page);
	border: 1px solid var(--border-light);
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	font-size: 0.72rem;
	cursor: pointer;
}

.track-order-result {
	margin-top: 16px;
}

.track-card {
	background: var(--bg-page);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 14px;
}

.track-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-light);
}

.track-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin: 12px 0;
}

.track-step {
	text-align: center;
	font-size: 0.68rem;
	padding: 6px 4px;
	border-radius: 6px;
	background: var(--bg-surface);
	border: 1px solid var(--border-light);
	color: var(--text-muted);
}

.track-step.done {
	border-color: var(--accent-emerald);
	color: #065F46;
	font-weight: 700;
}

.profile-preview-card {
	margin-top: 14px;
	background: var(--bg-page);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.profile-avatar-box {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bg-pink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
}

.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	background: var(--bg-page);
	padding: 4px;
	border-radius: var(--radius-pill);
	margin-bottom: 14px;
}

.auth-tab {
	padding: 7px;
	border: none;
	background: transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.84rem;
	cursor: pointer;
	color: var(--text-secondary);
}

.auth-tab.active {
	background: var(--bg-surface);
	color: var(--text-main);
	box-shadow: var(--shadow-xs);
}

.pacaa-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form-group label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.modal-items-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.modal-item-option {
	background: var(--bg-page);
	border: 1.5px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	cursor: pointer;
	text-align: left;
}

.modal-item-option.active,
.modal-item-option:hover {
	border-color: var(--accent-pink);
	background: var(--bg-pink-soft);
}

.guide-steps-list {
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.86rem;
	color: var(--text-secondary);
}

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-item {
	background: var(--bg-page);
	padding: 12px;
	border-radius: var(--radius-sm);
}

.faq-item h4 {
	font-size: 0.88rem;
	margin-bottom: 3px;
}

.faq-item p {
	font-size: 0.82rem;
	color: var(--text-secondary);
}

.pacaa-toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pacaa-toast {
	background: var(--text-main);
	color: #FFFFFF;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-modal);
	font-size: 0.84rem;
}

/* ==========================================================================
   MODE MALAM & PAGI (DARK THEME COMPONENT OVERRIDES)
   ========================================================================== */
[data-theme="dark"] .pacaa-header {
	background: rgba(14, 16, 28, 0.90);
	border-bottom-color: var(--border-light);
}

[data-theme="dark"] .pacaa-brand__title {
	color: var(--text-main);
}

[data-theme="dark"] .pacaa-search__input {
	background: var(--bg-soft);
	border-color: var(--border-light);
	color: var(--text-main);
}

[data-theme="dark"] .pacaa-search__dropdown {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .search-result-meta h4 {
	color: var(--text-main);
}

[data-theme="dark"] .pacaa-mobile-toggle {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .pacaa-mobile-toggle span {
	background: var(--text-main);
}

/* Catalog Tabs & Cards in Dark Mode */
[data-theme="dark"] .catalog-tabs {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .catalog-tab {
	color: var(--text-secondary);
}

[data-theme="dark"] .catalog-tab.active {
	background: var(--accent-pink);
	color: #FFFFFF;
}

[data-theme="dark"] .catalog-filter-status {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .game-card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .game-card:hover {
	border-color: var(--accent-pink);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .game-card__thumb {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .game-card__title {
	color: var(--text-main);
}

[data-theme="dark"] .game-card__footer {
	border-top-color: var(--border-light);
}

[data-theme="dark"] .game-card__price {
	color: var(--text-main);
}

[data-theme="dark"] .game-card__cta {
	background: rgba(225, 29, 116, 0.2);
	color: #F472B6;
}

/* Top Up Workspace in Dark Mode */
[data-theme="dark"] .topup-methods-card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .topup-methods-card__title {
	color: var(--text-main);
}

[data-theme="dark"] .tm-option-card {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .tm-option-card:hover:not(.is-disabled) {
	border-color: #10B981;
}

[data-theme="dark"] .tm-option-card.is-active,
[data-theme="dark"] .tm-option--green.is-active {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(5, 150, 105, 0.15) 100%);
	border-color: #10B981;
}

[data-theme="dark"] .tm-option--blue.is-active {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.22) 0%, rgba(29, 78, 216, 0.15) 100%);
	border-color: #3B82F6;
}

[data-theme="dark"] .tm-option-card.is-disabled {
	background: #121422;
	border-color: #1B1E32;
	opacity: 0.55;
}

[data-theme="dark"] .tm-option__text h3 {
	color: var(--text-main);
}

[data-theme="dark"] .tm-option--green.is-active .tm-option__text h3 {
	color: #34D399;
}

[data-theme="dark"] .tm-option__text p {
	color: var(--text-secondary);
}

[data-theme="dark"] .tm-cara-beli-bar {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .tm-cara-beli-bar:hover {
	background: rgba(16, 185, 129, 0.15);
	border-color: #10B981;
}

[data-theme="dark"] .tm-cara-beli-bar__left {
	color: #34D399;
}

[data-theme="dark"] .tm-chevron {
	color: #34D399;
}

[data-theme="dark"] .pilihan-robux-card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .pilihan-robux-card__title {
	color: var(--text-main);
}

[data-theme="dark"] .stok-ready-pill {
	background: rgba(16, 185, 129, 0.16);
	color: #34D399;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .rbx-pkg-card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .rbx-pkg-card:hover {
	border-color: #34D399;
	background: var(--bg-soft);
}

[data-theme="dark"] .rbx-pkg-card.is-selected {
	background: rgba(16, 185, 129, 0.16);
	border-color: #10B981;
}

[data-theme="dark"] .rbx-pkg-top {
	border-bottom-color: var(--border-light);
}

[data-theme="dark"] .rbx-pkg-amount {
	color: var(--text-main);
}

[data-theme="dark"] .rbx-pkg-orig {
	color: var(--text-muted);
}

[data-theme="dark"] .rbx-pkg-price {
	color: var(--text-main);
}

/* Detail User in Dark Mode */
[data-theme="dark"] .detail-user-card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .detail-user-card__title {
	color: var(--text-main);
}

[data-theme="dark"] .detail-user-card__sub {
	color: var(--text-secondary);
}

[data-theme="dark"] .du-username-box {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .du-username-box:focus-within {
	background: var(--bg-surface);
	border-color: #10B981;
}

[data-theme="dark"] .du-username-box input {
	color: var(--text-main);
}

[data-theme="dark"] .du-avatar-preview {
	background: rgba(16, 185, 129, 0.14);
	border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .du-avatar-preview__img {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .du-avatar-preview__info strong {
	color: var(--text-main);
}

[data-theme="dark"] .du-avatar-preview__info span {
	color: #34D399;
}

[data-theme="dark"] .du-avatar-preview.is-empty {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .du-summary-row {
	color: var(--text-main);
	border-top-color: var(--border-light);
}

[data-theme="dark"] .du-summary-price {
	color: var(--text-main);
}

[data-theme="dark"] .du-cart-btn {
	background: var(--bg-soft);
	border-color: var(--border-light);
	color: var(--text-secondary);
}

[data-theme="dark"] .du-cart-btn:hover {
	background: rgba(16, 185, 129, 0.18);
	border-color: #10B981;
	color: #34D399;
}

[data-theme="dark"] .du-submit-btn {
	background: #252A42;
	color: #64748B;
}

[data-theme="dark"] .du-submit-btn.is-ready {
	background: #10B981;
	color: #FFFFFF;
}

/* Leaderboard, Highlights, Testimonials, Footer in Dark Mode */
[data-theme="dark"] .leaderboard-card,
[data-theme="dark"] .highlight-card,
[data-theme="dark"] .testi-card,
[data-theme="dark"] .pacaa-footer {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .lb-prize-badge {
	background: rgba(245, 158, 11, 0.16);
	color: #FCD34D;
	border-color: rgba(245, 158, 11, 0.4);
}

[data-theme="dark"] .lb-timer-badge {
	background: rgba(99, 102, 241, 0.16);
	color: #A5B4FC;
	border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .pacaa-btn--reward-info {
	background: var(--bg-soft);
	border-color: var(--border-medium);
	color: var(--text-main);
}

[data-theme="dark"] .lb-item {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .lb-podium--gold {
	background: linear-gradient(180deg, rgba(245, 158, 11, 0.14) 0%, #151828 100%);
	border-color: #F59E0B;
	box-shadow: 0 8px 26px rgba(245, 158, 11, 0.22);
}

[data-theme="dark"] .lb-podium--silver {
	background: linear-gradient(180deg, rgba(56, 189, 248, 0.12) 0%, #151828 100%);
	border-color: #38BDF8;
	box-shadow: 0 6px 22px rgba(56, 189, 248, 0.18);
}

[data-theme="dark"] .lb-podium--bronze {
	background: linear-gradient(180deg, rgba(251, 146, 60, 0.12) 0%, #151828 100%);
	border-color: #FB923C;
	box-shadow: 0 6px 20px rgba(251, 146, 60, 0.18);
}

[data-theme="dark"] .lb-stats-box {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .lb-podium--gold .lb-reward-pill {
	background: rgba(245, 158, 11, 0.18);
	border-color: rgba(245, 158, 11, 0.45);
}

[data-theme="dark"] .lb-podium--gold .lb-reward-amount {
	color: #FCD34D;
}

[data-theme="dark"] .lb-podium--silver .lb-reward-pill {
	background: rgba(56, 189, 248, 0.16);
	border-color: rgba(56, 189, 248, 0.4);
}

[data-theme="dark"] .lb-podium--silver .lb-reward-amount {
	color: #7DD3FC;
}

[data-theme="dark"] .lb-podium--bronze .lb-reward-pill {
	background: rgba(251, 146, 60, 0.16);
	border-color: rgba(251, 146, 60, 0.4);
}

[data-theme="dark"] .lb-podium--bronze .lb-reward-amount {
	color: #FDBA74;
}

[data-theme="dark"] .hadiah-card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .hadiah-card--gold {
	background: linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, var(--bg-surface) 100%);
}

[data-theme="dark"] .hadiah-card--silver {
	background: linear-gradient(180deg, rgba(56, 189, 248, 0.14) 0%, var(--bg-surface) 100%);
}

[data-theme="dark"] .hadiah-card--bronze {
	background: linear-gradient(180deg, rgba(251, 146, 60, 0.14) 0%, var(--bg-surface) 100%);
}

[data-theme="dark"] .hadiah-rules {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .lb-item:hover {
	background: var(--bg-surface);
	border-color: var(--accent-pink);
}

[data-theme="dark"] .lb-avatar {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .lb-info strong,
[data-theme="dark"] .highlight-card h3,
[data-theme="dark"] .testi-user strong,
[data-theme="dark"] .footer-heading {
	color: var(--text-main);
}

[data-theme="dark"] .qris-footer-badge {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .social-btn {
	background: var(--bg-soft);
	border-color: var(--border-light);
	color: var(--text-main);
}

/* Modals in Dark Mode */
[data-theme="dark"] .pacaa-modal__card {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .pacaa-modal__close {
	background: var(--bg-soft);
	border-color: var(--border-light);
	color: var(--text-main);
}

[data-theme="dark"] .pacaa-input,
[data-theme="dark"] .pacaa-select {
	background: var(--bg-soft);
	border-color: var(--border-light);
	color: var(--text-main);
}

[data-theme="dark"] .pacaa-input:focus,
[data-theme="dark"] .pacaa-select:focus {
	background: var(--bg-surface);
	border-color: var(--accent-pink);
}

[data-theme="dark"] .auth-tabs {
	background: var(--bg-soft);
}

[data-theme="dark"] .auth-tab.active {
	background: var(--bg-surface);
	color: var(--text-main);
}

[data-theme="dark"] .qris-box {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .qris-qr-frame {
	background: #FFFFFF;
}

[data-theme="dark"] .qris-logo-tag {
	background: var(--bg-soft);
	color: var(--text-main);
}

[data-theme="dark"] .track-card,
[data-theme="dark"] .profile-preview-card,
[data-theme="dark"] .faq-item {
	background: var(--bg-soft);
	border-color: var(--border-light);
}

[data-theme="dark"] .track-step {
	background: var(--bg-surface);
	border-color: var(--border-light);
}

[data-theme="dark"] .track-step.done {
	background: rgba(16, 185, 129, 0.2);
	color: #34D399;
	border-color: #10B981;
}