/**
 * Class Schedule & Booking — tampilan publik.
 * Tanpa framework, tanpa build step.
 */

/*
 * Keluarga merah plugin dipatok, TIDAK diambil dari palet tema: merah komponen
 * plugin adalah #b31111, sedangkan tema site ini merahnya #DD183B. Mengubah palet
 * temanya bukan pilihan — itu akan mengecat seluruh site, bukan komponen plugin.
 *
 * Pendampingnya diturunkan dari #b31111, bukan dari peach tema (#FFEDE6/#FFD1BF):
 * peach itu beraroma oranye dan jadi keruh di sebelah merah murni.
 *
 * accent-hover dan accent-ink sengaja DUA token walau keduanya "merah lain":
 * hover naik ke yang lebih terang, sedangkan teks di atas latar merah muda harus
 * turun ke yang lebih gelap. Satu token untuk dua peran berlawanan berarti salah
 * satunya pasti salah, dan yang jatuh duluan adalah kontras teksnya.
 *
 * --ilul-cb-ink tetap ikut tema: ia bukan merah, dan membiarkannya ikut tema
 * membuat heading plugin sederajat dengan heading site.
 */
.ilul-cb-cards,
.ilul-cb-schedule,
.ilul-cb-account {
	--ilul-cb-accent: #b31111;
	--ilul-cb-accent-hover: #cf0909;
	--ilul-cb-accent-ink: #8f0d0d;
	--ilul-cb-accent-soft: #f0c2c2;
	--ilul-cb-tint: #fdf1f1;
	--ilul-cb-ink: var(--ast-global-color-2, #1c1c1c);
	--ilul-cb-border: #e6e6e6;
	--ilul-cb-muted: #6b6b6b;
	--ilul-cb-radius: 18px;
	color: #1c1c1c;
	font-size: 15px;
}

/* ------------------------------------------------------------ kartu kelas. */

.ilul-cb-cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ilul-cb-card {
	background: #fff;
	border: 1px solid var(--ilul-cb-border);
	border-radius: var(--ilul-cb-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ilul-cb-card-media {
	position: relative;
}

.ilul-cb-card-media img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* translateY(50%) membuatnya menumpang garis batas: separuh di gambar, separuh di area putih. */
.ilul-cb-badge-level {
	background: var(--ilul-cb-accent);
	border-radius: 999px 0 0 999px;
	bottom: 0;
	color: #fff;
	font-size: 11px;
	padding: 5px 14px;
	position: absolute;
	right: 0;
	transform: translateY( 50% );
}

.ilul-cb-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

.ilul-cb-meta {
	align-items: center;
	color: var(--ilul-cb-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 8px;
}

.ilul-cb-chip {
	background: #ffe08a;
	border-radius: 999px;
	color: #6b4b00;
	padding: 2px 10px;
}

.ilul-cb-card-title {
	color: var(--ilul-cb-accent);
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
}

.ilul-cb-card-desc {
	color: var(--ilul-cb-muted);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.ilul-cb-card-foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
}

/* ---------------------------------------------------------------- tombol. */

.ilul-cb-btn {
	background: var(--ilul-cb-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 10px 18px;
	text-decoration: none;
	white-space: nowrap;
}

.ilul-cb-btn:hover,
.ilul-cb-btn:focus {
	background: var(--ilul-cb-accent-hover, #cf0909);
	color: #fff;
}

.ilul-cb-btn.is-disabled {
	background: #e2e2e2;
	color: #8a8a8a;
	cursor: not-allowed;
}

/* --------------------------------------------------------------- jadwal. */

.ilul-cb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

/*
 * Selektor dua tingkat di sini bukan gaya-gayaan: tema Astra memberi width 100%
 * ke setiap <select> dan padding 18px 35px ke setiap <button>, dan aturan itu
 * menang atas satu class kalau kena :hover/:focus.
 */
.ilul-cb-schedule .ilul-cb-filter {
	background: #fff;
	border: 1px solid var(--ilul-cb-border);
	border-radius: 999px;
	flex: 1 1 180px;
	font-size: 13px;
	max-width: 100%;
	padding: 8px 14px;
	width: auto;
}

.ilul-cb-panel {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ilul-cb-calendar {
	background: #fff;
	border: 1px solid var(--ilul-cb-border);
	border-radius: var(--ilul-cb-radius);
	padding: 16px;
}

.ilul-cb-cal-head {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.ilul-cb-cal-title {
	font-weight: 600;
}

.ilul-cb-schedule .ilul-cb-cal-nav {
	-webkit-appearance: none;
	align-items: center;
	appearance: none;
	background: #fff;
	border: 1px solid var(--ilul-cb-border);
	border-radius: 50%;
	box-shadow: none;
	color: var(--ilul-cb-accent);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 18px;
	height: 32px;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-width: 0;
	padding: 0;
	text-transform: none;
	width: 32px;
}

.ilul-cb-schedule .ilul-cb-cal-nav:hover,
.ilul-cb-schedule .ilul-cb-cal-nav:focus {
	background: var(--ilul-cb-accent);
	border-color: var(--ilul-cb-accent);
	color: #fff;
}

.ilul-cb-schedule .ilul-cb-cal-nav:focus-visible {
	outline: 2px solid #1c1c1c;
	outline-offset: 2px;
}

.ilul-cb-cal-grid {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
}

.ilul-cb-cal-dow {
	background: var(--ilul-cb-accent-soft);
	border-radius: 6px;
	color: var(--ilul-cb-accent-ink);
	font-size: 11px;
	font-weight: 700;
	padding: 6px 0;
	text-transform: uppercase;
}

.ilul-cb-schedule .ilul-cb-cal-day {
	-webkit-appearance: none;
	appearance: none;
	background: #f1f1f1;
	/* Border transparan supaya kotaknya sama besar dengan tanggal bergaris. */
	border: 1px solid transparent;
	border-radius: 6px;
	box-shadow: none;
	color: #9a9a9a;
	cursor: default;
	font-size: 13px;
	letter-spacing: 0;
	line-height: 1;
	min-width: 0;
	padding: 8px 0;
}

/* Tanpa ini, :hover / :focus tema mengecat tanggal kosong jadi merah. */
.ilul-cb-schedule .ilul-cb-cal-day:hover,
.ilul-cb-schedule .ilul-cb-cal-day:focus {
	background: #f1f1f1;
	color: #9a9a9a;
}

.ilul-cb-schedule .ilul-cb-cal-day.has-slots {
	background: #fff;
	border-color: var(--ilul-cb-accent);
	color: var(--ilul-cb-accent);
	cursor: pointer;
	font-weight: 600;
}

.ilul-cb-schedule .ilul-cb-cal-day.has-slots:hover,
.ilul-cb-schedule .ilul-cb-cal-day.has-slots:focus {
	background: var(--ilul-cb-accent-soft);
	color: var(--ilul-cb-accent-ink);
}

/* Setelah aturan hover di atas, supaya tanggal terpilih tidak memutih saat di-hover. */
.ilul-cb-schedule .ilul-cb-cal-day.is-selected,
.ilul-cb-schedule .ilul-cb-cal-day.is-selected:hover,
.ilul-cb-schedule .ilul-cb-cal-day.is-selected:focus {
	background: var(--ilul-cb-accent);
	border-color: var(--ilul-cb-accent);
	color: #fff;
}

.ilul-cb-cal-day.is-empty {
	background: transparent;
}

/* ----------------------------------------------------------- daftar slot. */

.ilul-cb-slots-date {
	border: 1px solid var(--ilul-cb-border);
	border-radius: 999px;
	display: inline-block;
	font-size: 13px;
	margin-bottom: 14px;
	padding: 6px 16px;
}

.ilul-cb-slots-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ilul-cb-slot {
	background: #fff;
	border: 1px solid var(--ilul-cb-border);
	border-left: 5px solid var(--ilul-cb-accent);
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding: 14px 16px;
}

.ilul-cb-slot-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ilul-cb-slot-title {
	align-items: center;
	color: var(--ilul-cb-accent);
	display: flex;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 700;
	gap: 8px;
}

.ilul-cb-slot-level,
.ilul-cb-slot-category {
	background: var(--ilul-cb-accent-soft);
	border-radius: 999px;
	color: var(--ilul-cb-accent-ink);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
}

.ilul-cb-slot-sub {
	color: var(--ilul-cb-muted);
	font-size: 13px;
}

.ilul-cb-slot-state {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 8px;
}

.ilul-cb-tag {
	background: #ffe08a;
	border-radius: 999px;
	color: #6b4b00;
	font-weight: 600;
	padding: 3px 12px;
}

.ilul-cb-tag.is-full {
	background: #e2e2e2;
	color: #6b6b6b;
}

.ilul-cb-slot-action {
	align-items: flex-end;
	display: flex;
}

.ilul-cb-empty {
	color: var(--ilul-cb-muted);
	font-size: 14px;
}

/* ---------------------------------------------------------------- account. */

/*
 * Selebar kolom konten tema, sejajar dengan .ilul-cb-schedule dan
 * .ilul-cb-packages yang keduanya width:100%. margin auto dibiarkan: tanpa
 * max-width ia tak berefek, tapi ia yang menjaga blok tetap terpusat kalau kelak
 * ada yang memasang batas lagi.
 */
.ilul-cb-account {
	margin: 0 auto;
}

/*
 * Kecuali form login. Input teks selebar kolom 1200px bukan lebih baik: sasaran
 * kliknya jauh dari labelnya dan formnya terlihat seperti kesalahan. Ketiga
 * elemen disebut karena mereka satu kelompok visual — pesan error, form, lalu
 * "Lupa password?"; membatasi form-nya saja membuat dua yang lain melebar dan
 * kelompoknya pecah.
 */
.ilul-cb-login,
.ilul-cb-forgot,
.ilul-cb-account > .ilul-cb-empty {
	margin-left: auto;
	margin-right: auto;
	max-width: 420px;
}

.ilul-cb-account-head {
	align-items: baseline;
	border-bottom: 1px solid var(--ilul-cb-border);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
}

/* Nomor HP adalah keterangan, bukan judul — jadi ia memakai tingkat visual yang
 * sudah ada untuk keterangan (sama dengan .ilul-cb-pass-meta), bukan tingkat baru. */
.ilul-cb-account-phone {
	color: var(--ilul-cb-muted);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

/*
 * Heading section sengaja tidak menyebut font: Astra sudah memberi DM Serif Display
 * ke setiap h1-h6, jadi memakai h3/h4 sungguhan membuat halaman ini ikut tipografi
 * tema tanpa satu deklarasi pun. Yang disetel di sini hanya ukurannya — default
 * temanya jauh terlalu besar untuk daftar sependek ini.
 *
 * TIDAK dibatasi .ilul-cb-account: heading sederajat ("Jadwal kelas", "Paket
 * tersedia") boleh ditulis langsung di isi halaman, di luar blok akun. Karena itu
 * warnanya berantai — token plugin, lalu token tema, lalu hex — sebab di luar blok
 * akun --ilul-cb-ink tidak terdefinisi.
 *
 * Satu class cukup untuk menang atas tema: Astra menulis `h3, .entry-content
 * :where(h3)`, dan :where() berspesifisitas nol.
 */
.ilul-cb-my-heading {
	color: var(--ilul-cb-ink, var(--ast-global-color-2, #1c1c1c));
	font-size: 22px;
	line-height: 1.2;
	margin: 28px 0 12px;
}

/*
 * Tautan di blok plugin ikut merah plugin, bukan warna link tema — dua merah yang
 * beda tipis bersebelahan di satu blok terbaca sebagai keliru, bukan sebagai pilihan.
 * Keduanya sudah punya pembungkus ber-class, jadi tidak perlu penanda baru di markup.
 */
.ilul-cb-account-head a,
.ilul-cb-forgot a {
	color: var(--ilul-cb-accent);
}

.ilul-cb-account-head a:hover,
.ilul-cb-account-head a:focus,
.ilul-cb-forgot a:hover,
.ilul-cb-forgot a:focus {
	color: var(--ilul-cb-accent-hover);
}

.ilul-cb-account-head a:focus-visible,
.ilul-cb-account .ilul-cb-btn:focus-visible {
	outline: 2px solid var(--ilul-cb-ink);
	outline-offset: 2px;
}

/* ------------------------------------------------- kartu keanggotaan (paket). */

/*
 * auto-fill + minmax, bukan jumlah kolom tetap dan bukan media query: jumlah
 * kolomnya mengikuti ruang yang tersedia, jadi benar di kolom 1200px, di sidebar
 * sempit, maupun di ponsel — tanpa satu pun breakpoint baru.
 */
.ilul-cb-pass-list {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ilul-cb-pass {
	align-items: start;
	background: var(--ilul-cb-tint);
	border: 1px solid var(--ilul-cb-accent-soft);
	border-radius: var(--ilul-cb-radius);
	display: grid;
	gap: 6px 16px;
	grid-template-areas:
		"main count"
		"pips pips";
	grid-template-columns: 1fr auto;
	/* Jarak antar-kartu milik gap .ilul-cb-pass-list — margin di sini membuatnya dobel. */
	padding: 18px 20px;
}

.ilul-cb-pass-main {
	grid-area: main;
}

.ilul-cb-account .ilul-cb-pass-name {
	color: var(--ilul-cb-ink);
	font-size: 19px;
	line-height: 1.25;
	margin: 0;
}

.ilul-cb-pass-meta {
	color: var(--ilul-cb-muted);
	font-size: 13px;
	margin: 2px 0 0;
}

.ilul-cb-pass-count {
	align-items: baseline;
	display: flex;
	gap: 6px;
	grid-area: count;
	margin: 0;
	text-align: right;
}

/*
 * Satu-satunya tempat plugin menyebut nama font. DM Serif Display adalah huruf
 * heading tema ini; Georgia menjaga angkanya tetap serif dan tetap terlihat
 * disengaja kalau plugin dipasang di tema lain.
 */
.ilul-cb-pass-number {
	color: var(--ilul-cb-accent-ink);
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 40px;
	line-height: 1;
}

.ilul-cb-pass-label {
	color: var(--ilul-cb-muted);
	font-size: 12px;
}

/* Peach itu penanda "hidup". Paket yang belum dibayar atau sudah mati kehilangannya. */
.ilul-cb-pass.is-pending,
.ilul-cb-pass.is-done {
	background: #fff;
	border-color: var(--ilul-cb-border);
}

.ilul-cb-account .ilul-cb-pass.is-done .ilul-cb-pass-name {
	color: var(--ilul-cb-muted);
}

/* Satu pip satu sesi; yang terpakai jadi kosong, sisanya terisi. */
.ilul-cb-pips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	grid-area: pips;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.ilul-cb-pips li {
	background: var(--ilul-cb-accent);
	border: 1px solid var(--ilul-cb-accent);
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

.ilul-cb-pips li.is-used {
	background: transparent;
	border-color: var(--ilul-cb-accent-soft);
}

/* ------------------------------------------------------- daftar kelas saya. */

.ilul-cb-my-list {
	background: #fff;
	border: 1px solid var(--ilul-cb-border);
	border-radius: var(--ilul-cb-radius);
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.ilul-cb-my-item {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: auto 1fr auto;
	padding: 14px 16px;
	transition: background .2s;
}

.ilul-cb-my-item + .ilul-cb-my-item {
	border-top: 1px solid var(--ilul-cb-border);
}

.ilul-cb-my-item:hover {
	background: var(--ilul-cb-tint);
}

@media (prefers-reduced-motion: reduce) {
	.ilul-cb-my-item {
		transition: none;
	}
}

.ilul-cb-date {
	background: var(--ilul-cb-tint);
	border: 1px solid var(--ilul-cb-accent-soft);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	line-height: 1;
	padding: 7px 0;
	text-align: center;
	width: 48px;
}

.ilul-cb-date-day {
	color: var(--ilul-cb-ink);
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 20px;
}

.ilul-cb-date-month {
	color: var(--ilul-cb-accent-ink);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	margin-top: 3px;
	text-transform: uppercase;
}

.ilul-cb-account .ilul-cb-my-class {
	color: var(--ilul-cb-ink);
	font-size: 17px;
	line-height: 1.25;
	margin: 0;
}

.ilul-cb-account .ilul-cb-my-time {
	color: var(--ilul-cb-muted);
	font-size: 13px;
	margin: 2px 0 0;
}

/*
 * Chip status. Tiap keadaan punya TEKS-nya sendiri, jadi warna di sini hanya
 * mempercepat pemindaian — bukan satu-satunya pembeda.
 */
/*
 * Abu dulu, merah kemudian. Membatalkan itu tindakan sekunder — kalau ia merah sejak
 * awal ia bersaing perhatian dengan kartu paket dan chip status di baris yang sama.
 */
.ilul-cb-cancel {
	color: var(--ilul-cb-muted);
	display: inline-block;
	font-size: 12px;
	margin-top: 4px;
	text-decoration: none;
}

.ilul-cb-account .ilul-cb-cancel:hover,
.ilul-cb-account .ilul-cb-cancel:focus {
	color: var(--ilul-cb-accent);
	text-decoration: underline;
}

.ilul-cb-cancel:focus-visible {
	outline: 2px solid var(--ilul-cb-ink);
	outline-offset: 2px;
}

.ilul-cb-status {
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 12px;
	white-space: nowrap;
}

.ilul-cb-status.is-confirmed {
	background: var(--ilul-cb-tint);
	border-color: var(--ilul-cb-accent-soft);
	color: var(--ilul-cb-accent-ink);
}

/* Amber satu-satunya hue di luar palet tema, dan ia sudah dipakai .ilul-cb-chip. */
.ilul-cb-status.is-pending {
	background: #ffe08a;
	color: #6b4b00;
}

.ilul-cb-status.is-completed {
	background: var(--ilul-cb-ink);
	color: #fff;
}

.ilul-cb-status.is-no-show,
.ilul-cb-status.is-cancelled {
	border-color: var(--ilul-cb-border);
	color: var(--ilul-cb-muted);
}

/*
 * Kelas yang sudah lewat: namanya dan blok tanggalnya diredupkan, TAPI chip
 * statusnya tidak disentuh — "No show" dan "Cancelled" justru itu yang dicari
 * orang saat membuka riwayat, jadi ia harus tetap terbaca jelas.
 */
.ilul-cb-my-item.is-past .ilul-cb-date {
	background: transparent;
	border-color: var(--ilul-cb-border);
}

.ilul-cb-my-item.is-past .ilul-cb-date-day,
.ilul-cb-my-item.is-past .ilul-cb-date-month {
	color: var(--ilul-cb-muted);
}

.ilul-cb-account .ilul-cb-my-item.is-past .ilul-cb-my-class {
	color: var(--ilul-cb-muted);
}

/* ------------------------------------------------------- tab aktif/riwayat. */

.ilul-cb-tablist {
	border-bottom: 1px solid var(--ilul-cb-border);
	display: flex;
	gap: 4px;
	margin-top: 20px;
	/* Jangkar untuk radio yang disembunyikan di bawah: tanpa ini ia melayang ke
	 * pembungkus berposisi terdekat milik TEMA, entah di mana itu. */
	position: relative;
}

.ilul-cb-tablist label {
	border-bottom: 2px solid transparent;
	color: var(--ilul-cb-muted);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: -1px;
	padding: 10px 14px;
}

.ilul-cb-tab-input:checked + label {
	background: var(--ilul-cb-tint);
	border-bottom-color: var(--ilul-cb-accent);
	border-radius: 8px 8px 0 0;
	color: var(--ilul-cb-accent-ink);
}

.ilul-cb-tab-input:focus-visible + label {
	outline: 2px solid var(--ilul-cb-ink);
	outline-offset: 2px;
}

/*
 * Judul pertama di dalam panel tidak perlu jarak atas: deretan tab sudah jadi
 * pemisahnya, dan margin 28px dari .ilul-cb-my-heading justru menganga.
 */
.ilul-cb-pane > .ilul-cb-my-heading:first-child {
	margin-top: 16px;
}

/*
 * Tanpa dukungan :has(), kedua panel tampil bertumpuk — persis tata letak sebelum
 * tab ada, jadi halamannya tetap utuh dan tetap terbaca. Itu sebabnya "tampil"
 * yang jadi default dan "sembunyi" yang dibungkus @supports: kalau urutannya
 * dibalik, browser tanpa :has() menyembunyikan SELURUH isi halaman akun.
 */
@supports selector(:has(*)) {
	.ilul-cb-tabs .ilul-cb-pane {
		display: none;
	}

	.ilul-cb-tabs:has(#ilul-cb-tab-active:checked) .ilul-cb-pane-active,
	.ilul-cb-tabs:has(#ilul-cb-tab-history:checked) .ilul-cb-pane-history {
		display: block;
	}

	/*
	 * opacity, BUKAN display:none — radio yang display:none tidak bisa difokus,
	 * dan tab-nya jadi tak terjangkau keyboard sama sekali. Disembunyikan hanya di
	 * dalam @supports ini: di browser tanpa :has() radio-nya tidak berpengaruh apa
	 * pun, jadi lebih baik terlihat apa adanya daripada jadi kontrol hantu.
	 */
	.ilul-cb-tab-input {
		bottom: 0;
		height: 0;
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		width: 0;
	}
}

/* ----------------------------------------------------------- pager riwayat. */

.ilul-cb-pager {
	align-items: center;
	color: var(--ilul-cb-muted);
	display: flex;
	font-size: 13px;
	gap: 12px;
	justify-content: space-between;
	margin-top: 12px;
}

.ilul-cb-pager a {
	color: var(--ilul-cb-accent);
	text-decoration: none;
}

.ilul-cb-pager a:hover,
.ilul-cb-pager a:focus {
	color: var(--ilul-cb-accent-hover);
	text-decoration: underline;
}

.ilul-cb-pager a:focus-visible {
	outline: 2px solid var(--ilul-cb-ink);
	outline-offset: 2px;
}

/* Ujung rentang: terlihat sebagai batas, bukan sebagai tautan yang bisa diklik. */
.ilul-cb-pager .is-off {
	opacity: .4;
}

.ilul-cb-account .ilul-cb-history-label {
	color: var(--ilul-cb-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	margin: 14px 0 8px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------- layar kosong. */

.ilul-cb-blank {
	border: 1px dashed var(--ilul-cb-accent-soft);
	border-radius: var(--ilul-cb-radius);
	padding: 24px 20px;
	text-align: center;
}

.ilul-cb-blank p {
	color: var(--ilul-cb-muted);
	font-size: 14px;
	margin: 0 0 14px;
}

/*
 * Sasaran tombol layar kosong dan tautan halaman di pager riwayat (#ilul-cb-akun).
 * 80px, bukan sekadar beberapa piksel: judul section
 * ("Jadwal kelas", "Paket tersedia") adalah isi halaman yang duduk di ATAS wrapper
 * shortcode-nya, jadi tanpa jarak ini halaman berhenti tepat di filter dan judulnya
 * tertinggal di luar layar — orangnya mendarat tanpa tahu sedang melihat apa.
 */
#ilul-cb-schedule,
#ilul-cb-packages,
#ilul-cb-akun {
	scroll-margin-top: 80px;
}

/*
 * SATU-SATUNYA aturan plugin ini yang menyentuh elemen di luar komponennya sendiri,
 * dan itu tidak bisa dihindari: scroll-behavior hanya berlaku pada elemen yang
 * menggulir, jadi ia mustahil dikurung ke dalam .ilul-cb-*. Konsekuensinya SEMUA
 * tautan anchor di site ikut halus.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (max-width: 480px) {
	/* Status turun ke bawah nama kelas; blok tanggal tetap di kiri sebagai jangkar. */
	.ilul-cb-my-item {
		gap: 4px 14px;
		grid-template-areas:
			"date body"
			"date status";
		grid-template-columns: auto 1fr;
	}

	.ilul-cb-my-item .ilul-cb-date {
		grid-area: date;
	}

	.ilul-cb-my-body {
		grid-area: body;
	}

	.ilul-cb-my-item .ilul-cb-status {
		grid-area: status;
		justify-self: start;
	}

	.ilul-cb-pass {
		grid-template-areas:
			"main"
			"count"
			"pips";
		grid-template-columns: 1fr;
	}

	.ilul-cb-pass-count {
		text-align: left;
	}
}

.ilul-cb-login label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.ilul-cb-login input {
	border: 1px solid var(--ilul-cb-border);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
}

/* Tombol submit form, bukan link — samakan dengan .ilul-cb-btn yang <a>. */
.ilul-cb-login button {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
}

.ilul-cb-forgot {
	font-size: 13px;
	text-align: center;
}

/* ------------------------------------------------------------ kartu paket. */

/*
 * Carousel murni CSS: scroll horizontal + scroll-snap, tanpa satu baris JS.
 * Scrollbar disembunyikan karena kartunya sudah "menggantung" di tepi kanan —
 * itu petunjuk visual bahwa daftarnya masih bisa digeser.
 */
.ilul-cb-packages {
	--ilul-cb-accent: #b31111;
	--ilul-cb-accent-hover: #cf0909;
	--ilul-cb-muted: #6b6b6b;
	overflow: hidden;
	padding: 20px 0;
	width: 100%;
}

.ilul-cb-packages-track {
	-webkit-overflow-scrolling: touch;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 16px 5px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.ilul-cb-packages-track::-webkit-scrollbar {
	display: none;
}

/* padding-top lebih besar dari sisi lain: badge BEST SELLER duduk di garis atas kartu. */
.ilul-cb-package {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	color: #444;
	display: flex;
	flex: 0 0 320px;
	flex-direction: column;
	padding: 40px 30px;
	position: relative;
	scroll-snap-align: start;
	transition: transform .3s;
}

.ilul-cb-package:hover {
	transform: translateY( -8px );
}

.ilul-cb-package.is-featured {
	border: 3px solid var(--ilul-cb-accent);
}

.ilul-cb-package-badge {
	background: var(--ilul-cb-accent);
	border-radius: 50px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	left: 50%;
	padding: 8px 24px;
	position: absolute;
	top: -16px;
	transform: translateX( -50% );
	white-space: nowrap;
}

.ilul-cb-package-title {
	color: var(--ilul-cb-accent);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 20px;
}

.ilul-cb-package-old {
	color: #888;
	font-size: 22px;
	font-weight: 600;
	text-decoration: line-through;
}

.ilul-cb-package-price {
	color: var(--ilul-cb-accent);
	font-size: 42px;
	font-weight: 800;
	margin: 8px 0 35px;
}

/* margin-top auto: tombol tetap rata bawah walau jumlah poinnya beda antar kartu. */
.ilul-cb-package-list {
	list-style: none;
	margin: 0 0 35px;
	padding: 0;
}

.ilul-cb-package-list li {
	font-size: 18px;
	line-height: 1.8;
	margin-bottom: 12px;
}

.ilul-cb-package-list li::before {
	content: "\2714\00a0";
}

.ilul-cb-package .ilul-cb-btn {
	border-radius: 18px;
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-top: auto;
	padding: 18px;
	text-align: center;
}

@media (max-width: 768px) {
	.ilul-cb-package {
		flex: 0 0 85%;
		padding: 35px 25px;
	}

	.ilul-cb-package-title {
		font-size: 24px;
	}

	.ilul-cb-package-old {
		font-size: 18px;
	}

	.ilul-cb-package-price {
		font-size: 36px;
	}

	.ilul-cb-package-list li {
		font-size: 13px;
		line-height: 1.6;
		margin-bottom: 8px;
	}

	.ilul-cb-package .ilul-cb-btn {
		font-size: 14px;
		padding: 12px;
	}

	.ilul-cb-package-badge {
		font-size: 13px;
		padding: 10px 22px;
	}
}