/* ---------------------------------------------------------------------------
 * cozy-fixes.css
 *
 * Koreksi tata letak untuk purple_themes. Dimuat PALING AKHIR di header.php,
 * setelah main.css dan choco_main.css, karena justru aturan di main.css yang
 * perlu ditimpa. File CSS bawaan tema sengaja tidak disunting supaya perbedaan
 * dengan tema aslinya tetap terlihat jelas di satu tempat.
 * ------------------------------------------------------------------------- */


/* --- 1. Kolom isian di halaman FluxCP ------------------------------------
 *
 * main.css memberi SEMUA input teks aturan "display:block; height:6rem;
 * padding:1.5rem 2rem" - ukuran untuk formulir besar di halaman depan. Halaman
 * FluxCP memakai atribut size="4" dan mengharapkan kolom kecil sebaris, jadi
 * aturan itu membuat kolom seperti "Page Jump" berubah jadi balok raksasa yang
 * jebol dari kotaknya.
 *
 * Cakupannya dibatasi ke .cozy-cp (pembungkus konten FluxCP di header.php)
 * supaya formulir milik tema di halaman depan tidak ikut berubah.
 */
.cozy-cp input[type="text"],
.cozy-cp input[type="password"],
.cozy-cp input[type="email"],
.cozy-cp input[type="number"],
.cozy-cp input[type="search"],
.cozy-cp input[type="tel"],
.cozy-cp input[type="url"],
.cozy-cp select {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	padding: 7px 10px;
	font-size: 14px;
	line-height: 1.4;
	vertical-align: middle;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	color: #222;
}

.cozy-cp textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 9px 11px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	color: #222;
}

.cozy-cp input[type="text"]:focus,
.cozy-cp input[type="password"]:focus,
.cozy-cp select:focus,
.cozy-cp textarea:focus {
	border-color: #46305e;
	outline: none;
}

/* Kolom yang memang harus selebar induknya. */
.cozy-cp .multi-select,
.cozy-cp textarea.full-width,
.cozy-cp input.full-width {
	width: 100%;
}

/* Page Jump: kolomnya hanya menampung 3-4 digit, jadi jangan sampai melebar. */
.cozy-cp .jump-to-page {
	margin-top: 10px;
	text-align: center;
	font-size: 13px;
}

.cozy-cp .jump-to-page label {
	display: inline-block;
	margin: 0;
	font-size: 13px;
	vertical-align: middle;
}

.cozy-cp .jump-to-page input[type="text"] {
	width: 4.5em;
	padding: 4px 6px;
	margin-left: 6px;
	text-align: center;
	font-size: 13px;
}

/* Tombol di halaman FluxCP ikut mengecil agar sepadan dengan kolomnya. */
.cozy-cp input[type="submit"],
.cozy-cp input[type="button"],
.cozy-cp button {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 7px 16px;
	margin: 0 4px 0 0;
	font-size: 13px;
	line-height: 1.4;
	vertical-align: middle;
}


/* --- 2. Teks panjang tidak boleh menjebol kotaknya ------------------------
 *
 * Contoh pengumuman di Server Control adalah satu baris <code> tanpa spasi
 * pendek, jadi tanpa aturan ini ia meluber keluar kotak .note.
 */
.cozy-cp .note,
.cozy-cp code,
.cozy-cp pre {
	overflow-wrap: anywhere;
	word-wrap: break-word;
	word-break: break-word;
}

.cozy-cp .note {
	display: block;
	max-width: 100%;
	line-height: 1.5;
}

.cozy-cp code {
	display: inline-block;
	max-width: 100%;
	padding: 2px 5px;
	background: #f2f0f6;
	border-radius: 3px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12px;
	white-space: normal;
}

/* Tabel lebar (daftar item punya 13 kolom) digulung di dalam kotaknya sendiri,
   supaya halaman tidak ikut bergeser mendatar. */
.cozy-cp .horizontal-table {
	max-width: 100%;
}

.cozy-cp .table-scroll {
	overflow-x: auto;
	max-width: 100%;
}


/* --- Pencarian cepat daftar item -----------------------------------------
 *
 * Satu baris: kolom besar + tombol + tautan filter lanjutan. Menggantikan
 * alur lama yang menyembunyikan SEMUA pencarian di balik toggler.
 */
.cozy-cp .cozy-quicksearch {
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
	margin: 6px 0 18px;
	padding: 14px 16px;
	background: rgba(70, 48, 94, .06);
	border: 1px solid rgba(70, 48, 94, .16);
	border-radius: 10px;
	box-sizing: border-box;
}

.cozy-cp .cozy-quicksearch input[type="text"] {
	flex: 1 1 320px;
	min-width: 220px;
	height: auto;
	padding: 11px 16px;
	font-size: 15px;
	background: #fff;
	border: 1px solid rgba(70, 48, 94, .3);
	border-radius: 6px;
}

.cozy-cp .cozy-quicksearch input[type="text"]:focus {
	border-color: #46305e;
	box-shadow: 0 0 0 3px rgba(70, 48, 94, .12);
}

.cozy-cp .cozy-quicksearch input[type="submit"] {
	margin: 0;
	padding: 11px 26px;
	font-size: 14px;
	font-weight: 600;
	background: #46305e;
	color: #fff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.cozy-cp .cozy-quicksearch input[type="submit"]:hover {
	background: #5a3f78;
}

.cozy-cp .cozy-quicksearch input[type="button"] {
	margin: 0;
	padding: 11px 18px;
	font-size: 14px;
	background: transparent;
	color: #46305e;
	border: 1px solid rgba(70, 48, 94, .35);
	border-radius: 6px;
	cursor: pointer;
}

.cozy-cp .cozy-quicksearch .cozy-adv-toggle {
	align-self: center;
	margin-left: auto;
	font-size: 13px;
	white-space: nowrap;
	color: #46305e;
}


/* --- 3. Navbar ------------------------------------------------------------
 *
 * Logo dan menu sama-sama position:absolute (kiri dan kanan), jadi keduanya
 * tidak saling mendorong. Setelah tiga dropdown ditambahkan, menu jadi cukup
 * lebar untuk menabrak logo. Jarak antar item dirapatkan dan ukurannya
 * mengecil bertahap di layar sempit supaya tabrakan itu tidak terjadi.
 */
#header-nav-wrap .header-main-nav li {
	margin-right: 1.05rem;
}

/* width:100% pada tautan logo membuat kotak kliknya melebar tanpa alasan -
   dengan z-index 501 ia berada di atas menu. */
.header-logo a {
	width: auto;
	white-space: nowrap;
}

@media only screen and (max-width: 1500px) {
	#header-nav-wrap { font-size: 13px; }
	#header-nav-wrap .header-main-nav li { margin-right: 0.8rem; }
}

@media only screen and (max-width: 1280px) {
	#header-nav-wrap { right: 20px; font-size: 12.5px; }
	#header-nav-wrap .header-main-nav li { margin-right: 0.65rem; }
	.header-logo { left: 20px; }
	.header-logo a { font-size: 23px; }
}

@media only screen and (max-width: 1050px) and (min-width: 769px) {
	.header-logo a { font-size: 19px; }
	#header-nav-wrap .header-main-nav li { margin-right: 0.5rem; }
}

/* ==== Dropdown Admin Panel berkelompok (header.php: .cozy-admin-menu) ==== */
/* Grid multi-kolom: 20+ tautan jadi kelompok pendek berdampingan, bukan
   satu kolom panjang yang harus di-scroll. */
.cozy-admin-menu {
	display: none;
	min-width: 520px;
	padding: 12px 6px;
}
.btn-group.open .cozy-admin-menu,
.btn-group:hover .cozy-admin-menu { display: grid; grid-template-columns: 1fr 1fr; }
.cozy-admin-menu > li.cozy-menu-group {
	display: block;
	padding: 4px 12px 8px;
	break-inside: avoid;
}
.cozy-admin-menu .cozy-menu-header {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #8a76a5;
	border-bottom: 1px solid #eee;
	padding: 2px 4px 4px;
	margin-bottom: 4px;
	white-space: nowrap;
}
.cozy-admin-menu .cozy-menu-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cozy-admin-menu .cozy-menu-group ul li { margin: 0; }
.cozy-admin-menu .cozy-menu-group ul li a {
	display: block;
	padding: 3px 8px;
	line-height: 1.5;
	white-space: nowrap;
}
@media only screen and (max-width: 768px) {
	.cozy-admin-menu { min-width: 0; }
	.btn-group.open .cozy-admin-menu,
	.btn-group:hover .cozy-admin-menu { grid-template-columns: 1fr; }
}

/* Badge merah "!" / angka untuk laporan bug baru (header admin). */
.cozy-badge {
	display: inline-block;
	min-width: 16px;
	padding: 0 4px;
	border-radius: 9px;
	background: #d33;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	vertical-align: middle;
}

/* ==== Gambar item di seluruh situs ==== */
/* Ikon 24px asli diperbesar tajam (pixel-art) di tabel daftar. */
.horizontal-table img[src*="items/icons"], .cozy-item-icon {
	/* Ikon RO tidak selalu persegi - paksa dua dimensi membuatnya gepeng.
	   Skala berdasarkan tinggi saja, lebar mengikuti proporsi asli. */
	height: 32px;
	width: auto;
	/* Theme punya img { max-width: 100% } responsif - di sel tabel sempit itu
	   memampatkan lebar sementara tinggi terkunci = gepeng. Matikan di sini. */
	max-width: none;
	image-rendering: pixelated;
	vertical-align: middle;
}
/* Kartu hadiah event (gambar collection + label). */
.cozy-prize-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.cozy-prize-card {
	display: flex; flex-direction: column; align-items: center;
	border: 1px solid #ddd; border-radius: 8px; padding: 10px 16px;
	background: #faf9ff; text-decoration: none; min-width: 130px;
}
.cozy-prize-card img { width: 75px; height: 100px; margin-bottom: 6px; }
/* Chip hadiah kecil ber-ikon. */
.cozy-reward-chip {
	display: inline-flex; align-items: center; gap: 4px;
	border: 1px solid #e2ddec; border-radius: 12px; padding: 2px 10px 2px 4px;
	margin: 0 6px 6px 0; background: #fff; white-space: nowrap;
}
.cozy-reward-chip img { width: 24px; height: 24px; image-rendering: pixelated; }
.cozy-reward-rare { border-color: #b8a0d8; background: #faf5ff; }

/* Thumbnail monster di tabel daftar (GIF animasi, dibatasi tingginya). */
.cozy-mob-cell { text-align: center; }
.cozy-mob-cell img { max-height: 48px; max-width: 64px; }
/* Gimmick maskot animasi di samping judul halaman. */
.cozy-mascot { height: 40px; width: auto; vertical-align: middle; margin-left: 10px; }

/* --- Tombol download installer (homepage) ------------------------------- */
.cozy-dl-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
	margin: 10px 0 26px;
}
.cozy-dl-btn {
	display: block;
	min-width: 260px;
	max-width: 340px;
	padding: 18px 22px;
	border-radius: 16px;
	border: 2px solid rgba(255, 255, 255, .35);
	background: rgba(0, 0, 0, .28);
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.cozy-dl-btn:hover {
	transform: translateY(-3px);
	background: rgba(0, 0, 0, .42);
	border-color: #ffd77a;
	color: #fff;
	text-decoration: none;
}
/* Paket utama dibedakan supaya pemain baru tidak ragu memilih. */
.cozy-dl-main {
	background: linear-gradient(180deg, rgba(255, 200, 90, .30), rgba(0, 0, 0, .32));
	border-color: #ffd77a;
}
.cozy-dl-label { display: block; font-size: 1.15em; font-weight: 700; letter-spacing: 1px; }
.cozy-dl-size  { display: block; margin-top: 4px; font-size: .95em; opacity: .85; }
.cozy-dl-note  { display: block; margin-top: 8px; font-size: .8em; line-height: 1.45; opacity: .75; }

/* --- Bagian DOWNLOAD: dari coklat gelap ke krem cerah -------------------- */
/* Warna lama (#bd5828) gelap dan suram, dan tidak nyambung dengan palet
   Cozy yang krem-emas (logo, kartu patcher, panel status). Latar diganti
   krem hangat; karena latarnya kini terang, SEMUA teks di dalamnya harus
   berubah jadi gelap - kalau tidak, tulisan putih lama akan hilang. */
#download {
	background: linear-gradient(180deg, #fdf6e6 0%, #f6ead0 55%, #efe0bf 100%);
	color: #4a4033;
	padding-top: 8rem;
	padding-bottom: 8rem;
	border-top: 3px solid #e0cfa4;
	border-bottom: 3px solid #e0cfa4;
}
#download h1,
#download h1.intro-header { color: #3f3629; }
#download h1::before { background-color: #cfb87c; }
#download .lead { color: #6d5f49; }
#download p, #download li, #download span { color: #6d5f49; }
#download a { color: #a8762c; }
#download a:hover { color: #7d5518; }

/* Tombol unduhan disesuaikan ke latar terang. */
.cozy-dl-btn {
	background: #fffaf0;
	border-color: #d8c393;
	color: #4a4033;
	box-shadow: 0 2px 10px rgba(120, 95, 45, .12);
}
.cozy-dl-btn:hover {
	background: #fff;
	border-color: #c19a4a;
	color: #3f3629;
	box-shadow: 0 6px 18px rgba(120, 95, 45, .22);
}
.cozy-dl-main {
	background: linear-gradient(180deg, #fff6db 0%, #ffeec2 100%);
	border-color: #c9a24a;
}
.cozy-dl-label { color: #3f3629; }
.cozy-dl-size  { color: #8a7757; opacity: 1; }
.cozy-dl-note  { color: #7d6e55; opacity: 1; }

/* --- Footer: keterbacaan ------------------------------------------------- */
/* Teks lama memakai rgba(255,255,255,.25) dan tautan #46305e (ungu gelap) di
   atas latar hitam - praktis tidak terbaca. */
footer { color: rgba(255, 255, 255, .62); }
footer p { color: rgba(255, 255, 255, .62); }
footer a,
footer a:visited,
footer ul a,
footer ul a:visited { color: #e6d7ae; }
footer a:hover,
footer a:focus,
footer ul a:hover { color: #fff; }
footer h4 { color: #ffe9b8; letter-spacing: 1px; }
footer h4::before { background-color: rgba(255, 233, 184, .35); }
.footer-social-list a { color: #e6d7ae; }
.footer-social-list a:hover { color: #fff; }

/* Tata letak footer: tiga kolom seimbang, jarak antar kolom cukup, dan
   daftar tautan tidak menempel ke tepi bawah layar. */
footer .footer-main .row { align-items: flex-start; }
footer .footer-site-links h4 { margin-top: 0; }
footer .footer-site-links ul.list-links li { margin-bottom: .6rem; line-height: 1.9; }
footer .footer-info p { max-width: 34rem; }
footer { padding-top: 6rem; padding-bottom: 3rem; }
@media only screen and (max-width: 768px) {
	footer .footer-site-links { margin-top: 3rem; }
	.cozy-dl-btn { min-width: 220px; }
}

/* Maskot footer: aksen kecil, bukan gambar dominan di tengah. */
.footer-mascot {
	display: block;
	width: 120px;
	height: auto;
	margin-top: 1.5rem;
	opacity: .9;
}
@media only screen and (max-width: 768px) {
	.footer-mascot { margin-left: auto; margin-right: auto; }
}

/* ==== Mode ponsel ========================================================
   Ditambahkan 1 September 2026.

   Masalah utamanya bukan navbar - tema sudah punya aturan nav di 768/600/400
   px - melainkan TABEL. Halaman panduan saja memuat lima tabel dan hanya satu
   yang dibungkus .table-scroll; sisanya melebarkan seluruh halaman sehingga
   pemain harus menggeser mendatar untuk membaca apa pun, termasuk teks di luar
   tabel. Halaman baru (Vending Finder, Who's Donate, Card Drop, MVP Drops)
   punya tabel 7-8 kolom yang jauh lebih parah.

   Membungkus tiap tabel dengan <div> berarti menyunting puluhan berkas view.
   Jadi tabelnya sendiri dijadikan wadah gulir: display:block membuatnya jadi
   kotak blok yang bisa menggulung, sementara baris dan selnya tetap tersusun
   sebagai tabel lewat kotak anonim - kolomnya tidak berantakan.
   ======================================================================== */

@media only screen and (max-width: 768px) {

	/* --- Tabel lebar menggulung di dalam dirinya sendiri --- */
	.horizontal-table,
	table.donatur,
	table.carddrop,
	table.mvpdrop {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Sel dipadatkan supaya lebih banyak yang muat sebelum perlu digeser. */
	.horizontal-table th, .horizontal-table td,
	table.donatur th, table.donatur td,
	table.carddrop th, table.carddrop td,
	table.mvpdrop th, table.mvpdrop td {
		padding: 5px 7px;
		font-size: .92em;
	}

	/* Tabel label-nilai tidak digulung: dua kolom saja, lebih baik dibiarkan
	   membungkus teksnya. */
	.vertical-table { width: 100%; max-width: 100%; }
	.vertical-table th { white-space: normal; }

	/* --- Isian formulir tidak boleh melebihi layar --- */
	input[type="text"], input[type="password"], input[type="email"],
	input[type="number"], input[type="search"], select, textarea {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* --- Kata panjang (nama item, URL) dipatahkan, bukan melebarkan halaman --- */
	.cozy-cp, .cozy-cp td, .cozy-cp p, .cozy-cp li {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* --- Media tidak pernah melampaui lebar layar --- */
	img, video, iframe { max-width: 100%; height: auto; }

	/* --- Daftar "Jump to" di panduan membungkus rapi --- */
	.cozy-cp h2 + p a, .cozy-cp h3 + p a { display: inline-block; }

	/* --- Kartu ringkasan di Who's Donate menumpuk --- */
	.kartu-baris { flex-direction: column; }
	.kartu { flex: 1 1 auto; }
}

/* Layar sangat sempit: filter Vending Finder jadi satu kolom penuh supaya
   tiap medan tidak terhimpit. */
@media only screen and (max-width: 560px) {
	.vend-cari .kisi { grid-template-columns: 1fr; }
	.vend-cari .tombol { grid-column: 1; }
	.vend-cari .tombol input { flex: 1; }
	.vend-cari .duet input[type="text"] { width: 60px; }
}

/* ==== Gambar karakter di hero beranda ====================================
   main.css menempatkan .home-image-right secara absolut di dasar #home, lalu
   di bawah 400px menariknya turun 298px lewat margin-bottom negatif. Karena
   #home ber-overflow:hidden, bagian bawah gambar terpotong - makin sempit
   layarnya makin banyak yang hilang.

   Di ponsel gambar dikembalikan ke aliran normal: berdiri di bawah teks,
   ditengahkan, dan #home tumbuh mengikutinya - jadi tidak ada yang dipotong
   tanpa perlu mengubah overflow dan membuat lapisan overlay lain bocor.
   ======================================================================== */
@media only screen and (max-width: 768px) {
	.home-image-right {
		position: static;
		width: auto;
		max-width: 320px;
		margin: 26px auto 0;
		padding-top: 0;
		left: auto; right: auto; top: auto; bottom: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
	.home-image-right img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}
}

/* Layar paling sempit: margin negatif dari main.css dibatalkan tegas. */
@media only screen and (max-width: 400px) {
	.home-image-right {
		width: auto;
		max-width: 260px;
		margin-bottom: 0;
	}
}