/* ===================================================================
 * Cozy RO - halaman VIP System (?module=vip), 2026-09-30.
 * Dimuat header.php hanya untuk modul vip. Semua aturan dicakup
 * .cozy-page-vip; komponen dasar (hero, kartu, callout, tabel, lipatan)
 * datang dari css/cozy-ro.css (.cozy-guide, cg-*). Di sini hanya: hero
 * dengan panggung Angeling, strip status pemain, bilah progres jam main
 * (<progress>, tanpa style inline), dan pil angka perk.
 * Teks memakai px: main.css mengecilkan root font jadi 9.375px di HP.
 * =================================================================== */

/* ---------- hero ringkas: teks kiri, Angeling di atas awan kanan ---------- */
.cozy-page-vip .cozy-vip-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 26px 20px;
}
.cozy-page-vip .cozy-vip-hero-text { flex: 1 1 auto; min-width: 0; }
.cozy-page-vip .cozy-vip-hero .cg-lead { margin-bottom: 12px; }
.cozy-page-vip .cozy-vip-hero .cg-facts code { font-size: 12px; padding: 0 4px; }
.cozy-page-vip .cozy-vip-hero-art {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 112px;
	line-height: 0;
}
/* awan di bawah Angeling */
.cozy-page-vip .cozy-vip-hero-art::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 12px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, 0) 72%);
}
/* cahaya lembut di belakangnya */
.cozy-page-vip .cozy-vip-hero-art::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 96px;
	height: 96px;
	margin-left: -48px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 214, 120, .55) 0%, rgba(255, 214, 120, 0) 70%);
}
.cozy-page-vip .cozy-vip-hero-art img {
	position: relative;
	z-index: 1;
	animation: cozy-vip-float 2.6s ease-in-out infinite alternate;
}
@keyframes cozy-vip-float {
	from { transform: translateY(0); }
	to   { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
	.cozy-page-vip .cozy-vip-hero-art img { animation: none; }
}

/* ---------- strip status pemain yang login ---------- */
.cozy-page-vip .cozy-vip-me {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.5;
}
.cozy-page-vip .cozy-vip-me-label {
	font-family: "montserrat-semibold", sans-serif;
	color: var(--cg-purple);
}
.cozy-page-vip .cozy-vip-regular { font-weight: 700; color: var(--cg-muted); }
.cozy-page-vip .cozy-vip-me-until { flex: 1 1 100%; color: var(--cg-text); }

.cozy-page-vip .cozy-vip-first { margin-top: 26px; }

/* ---------- bilah progres jam main di kartu tingkat ---------- */
.cozy-page-vip .cozy-vip-prog {
	clear: both;
	margin: 12px 0 0;
	padding: 10px 12px 12px;
	background: #faf7fd;
	border: 1px solid var(--cg-line);
	border-radius: 10px;
}
.cozy-page-vip .cg-card .cozy-vip-prog-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 10px;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.45;
}
.cozy-page-vip .cozy-vip-prog-top > span:first-child {
	font-family: "montserrat-semibold", sans-serif;
	color: var(--cg-purple);
}
.cozy-page-vip .cozy-vip-bar {
	display: block;
	width: 100%;
	height: 14px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #ece5f5;
	color: var(--cg-purple-2);
	overflow: hidden;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.cozy-page-vip .cozy-vip-bar::-webkit-progress-bar { background: #ece5f5; border-radius: 999px; }
.cozy-page-vip .cozy-vip-bar::-webkit-progress-value {
	background: linear-gradient(90deg, var(--cg-purple) 0%, var(--cg-purple-2) 100%);
	border-radius: 999px;
}
.cozy-page-vip .cozy-vip-bar::-moz-progress-bar {
	background: linear-gradient(90deg, var(--cg-purple) 0%, var(--cg-purple-2) 100%);
	border-radius: 999px;
}
.cozy-page-vip .cozy-vip-bar-plus { color: #d4a73a; }
.cozy-page-vip .cozy-vip-bar-plus::-webkit-progress-value { background: linear-gradient(90deg, #d4a73a 0%, var(--cg-gold) 100%); }
.cozy-page-vip .cozy-vip-bar-plus::-moz-progress-bar { background: linear-gradient(90deg, #d4a73a 0%, var(--cg-gold) 100%); }

/* ---------- kartu perk ---------- */
/* lima kartu VIP++: satu baris di desktop, bukan 4 + 1 kartu yatim */
.cozy-page-vip .cozy-vip-extras { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media only screen and (max-width: 400px) {
	.cozy-page-vip .cozy-vip-extras { grid-template-columns: 1fr; }
}
.cozy-page-vip .cg-card h4 .cg-icon { margin-right: 2px; }
.cozy-page-vip .cg-card h4 code { font-size: .9em; }
/* pil angka: VIP +25% | VIP++ +50% */
.cozy-page-vip .cozy-vip-vals {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}
.cozy-page-vip .cozy-vip-vals > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px 4px 5px;
	border-radius: 999px;
	background: var(--cg-lav);
	border: 1px solid var(--cg-line);
	font-size: 14px;
	line-height: 1.3;
	color: var(--cg-text);
}
.cozy-page-vip .cozy-vip-vals > span:not(:has(.cg-badge)) { padding-left: 12px; }
.cozy-page-vip .cozy-vip-vals b {
	font-family: "montserrat-bold", sans-serif;
	font-size: 17px;
	color: var(--cg-ink);
}
.cozy-page-vip .cozy-vip-vals .cg-badge { vertical-align: 0; }

/* tabel perbandingan (di dalam lipatan): kolom VIP / VIP++ rata tengah */
.cozy-page-vip table.cozy-vip-table th + th,
.cozy-page-vip table.cozy-vip-table td + td { text-align: center; }

/* kartu VIP++ Ticket */
.cozy-page-vip .cozy-vip-ticket h4 { font-size: 18px; }
.cozy-page-vip .cozy-vip-ticket .cg-chips { margin-bottom: 10px; }
.cozy-page-vip .cozy-vip-note { margin-top: 26px; }

/* ---------- ponsel ---------- */
@media only screen and (max-width: 768px) {
	.cozy-page-vip .cozy-vip-hero { padding: 18px 16px 16px; }
}
/* HP: Angeling pindah ke pojok kanan atas, teks memakai lebar penuh. */
@media only screen and (max-width: 600px) {
	.cozy-page-vip .cozy-vip-hero { display: block; }
	.cozy-page-vip .cozy-vip-hero-art {
		position: absolute;
		top: 6px;
		right: 4px;
		width: 92px;
		height: 80px;
	}
	.cozy-page-vip .cozy-vip-hero-art::before { top: 2px; width: 72px; height: 72px; margin-left: -36px; }
	.cozy-page-vip .cozy-vip-hero-art::after { left: 10px; right: 10px; bottom: 8px; height: 16px; }
	.cozy-page-vip .cozy-vip-hero h2,
	.cozy-page-vip .cozy-vip-hero .cg-lead { padding-right: 84px; }
	.cozy-page-vip .cozy-vip-hero .cg-lead { font-size: 15px; }
	.cozy-page-vip .cozy-vip-me { font-size: 14px; }
	.cozy-page-vip .cozy-vip-vals b { font-size: 16px; }
	.cozy-page-vip .cozy-vip-ticket h4 { font-size: 17px; }
}