/**
 * Respotable — Frontend styles (Tahap 4: render desktop)
 *
 * Variabel CSS di bawah (--rptb-*) sengaja dipisah dari nilainya
 * supaya Tahap 6 (Styling & Theme Options) tinggal menimpa nilainya
 * lewat inline style per-tabel, tanpa perlu mengubah CSS ini.
 *
 * Catatan untuk Tahap 5 (responsif mobile): setiap <td> sudah punya
 * atribut data-label (lihat class-rptb-shortcode.php) yang isinya
 * label kolom - siap dipakai oleh teknik CSS "td::before" untuk
 * mode stack/card di breakpoint mobile nanti.
 */

.rptb-table-wrapper {
	--rptb-header-bg: #b3874f;
	--rptb-header-color: #ffffff;
	--rptb-border-color: #e5e5e5;
	--rptb-row-alt-bg: #faf9f7;
	--rptb-btn-bg: #1c1c1e;
	--rptb-btn-color: #ffffff;
	--rptb-btn-font-size: 14px;
	--rptb-btn-font-weight: 500;
	--rptb-text-color: #2c2c2e;
	--rptb-radius-top-left: 0px;
	--rptb-radius-top-right: 0px;
	--rptb-radius-bottom-right: 0px;
	--rptb-radius-bottom-left: 0px;

	overflow-x: auto;
	margin: 1.5em 0;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;

	/*
	 * Reset defensif: beberapa tema WordPress menaruh border/box-style
	 * generik ke elemen <div> di dalam .entry-content (misal tema
	 * dengan tampilan "boxed" untuk semua blok konten). Wrapper ini
	 * TIDAK pernah diberi border oleh plugin (border cuma ada di
	 * .rptb-table di bawah) - !important di sini murni untuk
	 * melawan CSS tema yang "menempel" tanpa diminta, bukan gaya
	 * default plugin.
	 */
	border: none !important;
}

.rptb-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var( --rptb-border-color );
	color: var( --rptb-text-color );
	font-size: 15px;
}

/*
 * Mode "Sama Rata" (v1.8.4, diatur di Respotable > Pengaturan, global
 * untuk semua tabel) - table-layout:fixed bikin browser membagi lebar
 * tabel rata ke semua kolom, TIDAK dihitung dari konten terpanjangnya
 * (itu perilaku "Otomatis"/table-layout:auto, default browser). Isi
 * yang tidak muat otomatis turun baris (wrap), bukan mendorong kolom
 * melebar - word-break ditambahkan untuk jaga-jaga string tanpa spasi
 * (mis. bagian dari URL) tetap bisa dipotong ke baris berikutnya
 * kalau kolomnya jadi sempit, walau untuk kasus paling umum (URL
 * panjang di kolom Link Hotel, teks di sel gambar) sudah ada
 * penanganan truncate/overflow sendiri sejak update-update sebelumnya.
 */
.rptb-table.rptb-table-equal-width {
	table-layout: fixed;
}

.rptb-table.rptb-table-equal-width th,
.rptb-table.rptb-table-equal-width td {
	overflow-wrap: break-word;
	word-break: break-word;
}

.rptb-table th,
.rptb-table td {
	border: 1px solid var( --rptb-border-color );
	/* v1.8.3 - nilai sebenarnya (default 14px/16px) disuntikkan lewat
	   wp_add_inline_style() di RPTB_Shortcode::render(), dibaca dari
	   setting GLOBAL (bukan per-tabel) di halaman Respotable >
	   Pengaturan. Fallback di sini (14px 16px) cuma jaring pengaman
	   kalau karena sebab apa pun inline style itu gagal termuat. */
	padding: var( --rptb-cell-padding-v, 14px ) var( --rptb-cell-padding-h, 16px );
	text-align: center;
	vertical-align: middle;
}

.rptb-table thead th {
	background: var( --rptb-header-bg );
	color: var( --rptb-header-color );
	font-weight: 600;
	white-space: nowrap;
}

/*
 * Border radius per-sudut tabel (v1.7.0, DIPERBAIKI di v1.7.5).
 *
 * v1.7.0 cuma menerapkan radius ke sel pojok (th/td pertama-terakhir)
 * supaya latar belakangnya ikut bulat, TANPA menyentuh border milik
 * .rptb-table sendiri - alasannya waktu itu supaya tidak bentrok
 * dengan border-radius tetap di bingkai pratinjau admin. Tapi ini
 * ternyata menyisakan bug visual: border 1px milik <table> itu
 * sendiri (`.rptb-table { border: 1px solid ... }` di atas) adalah
 * kotak terpisah yang digambar mengelilingi seluruh tabel dan TIDAK
 * ikut mengikuti radius sel pojok - jadi yang bulat cuma LATAR
 * BELAKANG sel pojoknya, sementara garis bingkai luar tabel tetap
 * terlihat siku/kotak di baliknya.
 *
 * Perbaikan: terapkan radius yang SAMA juga ke .rptb-table itu
 * sendiri (bukan cuma sel pojok), plus overflow:hidden supaya latar
 * header/baris tidak "bocor" melewati sudut yang sudah dibulatkan.
 * Ini aman untuk frontend (beda konteks dari bingkai pratinjau admin
 * yang jadi alasan v1.7.0 dulu menghindarinya).
 */
@media screen and (min-width: 601px) {
	.rptb-table {
		overflow: hidden;
		border-top-left-radius: var( --rptb-radius-top-left, 0px );
		border-top-right-radius: var( --rptb-radius-top-right, 0px );
		border-bottom-right-radius: var( --rptb-radius-bottom-right, 0px );
		border-bottom-left-radius: var( --rptb-radius-bottom-left, 0px );
	}

	.rptb-table thead tr:first-child th:first-child {
		border-top-left-radius: var( --rptb-radius-top-left, 0px );
	}

	.rptb-table thead tr:first-child th:last-child {
		border-top-right-radius: var( --rptb-radius-top-right, 0px );
	}

	.rptb-table tbody tr:last-child td:first-child {
		border-bottom-left-radius: var( --rptb-radius-bottom-left, 0px );
	}

	.rptb-table tbody tr:last-child td:last-child {
		border-bottom-right-radius: var( --rptb-radius-bottom-right, 0px );
	}
}

.rptb-table tbody tr:nth-child(even) {
	background: var( --rptb-row-alt-bg );
}

.rptb-table .rptb-empty {
	padding: 24px;
	color: #757575;
	font-style: italic;
}

.rptb-cell-image {
	max-width: 160px;
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
	margin: 0 auto; /* gambar SELALU di tengah, tidak ikut setting perataan teks/tombol */
}

.rptb-link-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: stretch;
	width: 100%;
}

/*
 * Badge kategori harga (v1.8.6) - warna latar dikirim inline per sel
 * (bukan lewat CSS custom property seperti setting lain) karena
 * jumlah kategori & warnanya ditentukan di runtime dari setting
 * global, bukan sesuatu yang bisa "dideklarasikan" lebih dulu di file
 * CSS statis ini. Teks selalu putih - 9 warna default (lihat
 * rptb_get_price_bucket_defaults() di respotable.php) sudah dipilih
 * cukup gelap/pekat supaya kontras dengan teks putih tetap terbaca;
 * kalau admin ganti warnanya sendiri lewat Pengaturan, pastikan tetap
 * pilih warna yang cukup gelap.
 */
.rptb-price-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
}

/*
 * Badge kategori jarak (v1.9.0) - style disengaja diduplikasi dari
 * .rptb-price-badge di atas (bukan di-generalisasi jadi satu class
 * bersama), sesuai keputusan bareng supaya kolom Harga & Jarak bisa
 * di-styling terpisah ke depannya. Warna latar juga dikirim inline per
 * sel sama seperti Harga (lihat rptb_get_distance_category()) karena
 * warnanya ditentukan di runtime dari setting global, bukan sesuatu
 * yang bisa "dideklarasikan" lebih dulu di file CSS statis ini.
 */
.rptb-distance-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-align: center;
}

.rptb-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	background: var( --rptb-btn-bg );
	color: var( --rptb-btn-color );
	padding: 8px 16px;
	border-radius: 4px;
	font-size: var( --rptb-btn-font-size );
	font-weight: var( --rptb-btn-font-weight );
	white-space: nowrap;
	transition: opacity 0.15s ease;

	/*
	 * !important sengaja dipakai di sini: banyak tema WordPress punya
	 * aturan global seperti ".entry-content a { text-decoration:
	 * underline; }" dengan spesifisitas CSS lebih tinggi dari selector
	 * ".rptb-btn" biasa, sehingga underline tema "menang" walau kita
	 * sudah set text-decoration:none. !important memastikan tombol
	 * ini selalu tanpa underline apa pun aturan link milik tema.
	 */
	text-decoration: none !important;
}

.rptb-btn-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 2px;
}

.rptb-btn:hover,
.rptb-btn:focus {
	opacity: 0.85;
	color: var( --rptb-btn-color );
	text-decoration: none !important;
}

.rptb-btn-arrow {
	font-size: 16px;
	line-height: 1;
	margin-left: auto;
	flex-shrink: 0;
}

/**
 * ============================================================
 * PERATAAN TEKS & TOMBOL — TABLE-LEVEL (Tahap 6 lanjutan)
 * ============================================================
 * Ini setting SATU tabel secara keseluruhan (bukan per-kolom) -
 * lihat --rptb-text-align-desktop/mobile & --rptb-content-justify-
 * desktop/mobile yang diisi lewat inline style di .rptb-table-wrapper
 * (dari rptb_build_style_attr(), berdasar 2 pilihan di admin: Kiri/
 * Tengah/Kanan untuk Desktop & Mobile).
 *
 * Berlaku untuk [Teks]/[Harga] dan [Tombol Link] (posisi ikon+label
 * DI DALAM tombol, karena tombol sendiri sengaja selalu selebar
 * kolom). TIDAK berlaku untuk [Gambar] - gambar sengaja dibuat
 * display:block + margin:0 auto di atas, yang artinya posisinya
 * tidak terpengaruh oleh text-align milik parent sama sekali,
 * jadi otomatis "kecuali gambar" tanpa perlu selector tambahan.
 */
@media ( min-width: 601px ) {

	.rptb-table td {
		text-align: var( --rptb-text-align-desktop, center );
	}

	.rptb-table .rptb-btn {
		justify-content: var( --rptb-content-justify-desktop, center );
	}
}

/**
 * ============================================================
 * TAHAP 5 — RESPONSIF MOBILE (Opsi A)
 * ============================================================
 * Perilaku yang direplikasi dari referensi (catatanumrohnia.com):
 * - <thead> asli disembunyikan (header "sekali tampil" digantikan
 *   oleh kolom label di kartu pertama, bukan diulang per baris).
 * - Baris data PERTAMA jadi kartu penuh lebar: tiap field tampil
 *   sebagai pasangan label:value (label diambil dari data-label
 *   yang sudah disiapkan di setiap <td>, lihat class-rptb-shortcode.php).
 * - Baris data SETELAHNYA (baris ke-2 dst) jadi kartu ringkas tanpa
 *   label, disusun grid 2 kartu per baris untuk hemat tempat.
 * - Baris "Belum ada data" (.rptb-empty-row) dikecualikan dari
 *   styling kartu/grid di atas - tetap full-width & polos.
 *
 * Trade-off yang perlu diketahui: karena label cuma tampil di kartu
 * pertama, pengunjung yang scroll cepat ke baris ke-3 dst harus
 * mengingat urutan field dari kartu pertama. Ini pilihan sadar
 * (Opsi A) demi tampilan ringkas - lihat diskusi di percakapan
 * pengembangan plugin ini kalau suatu saat mau dievaluasi ulang.
 */
@media ( max-width: 600px ) {

	.rptb-table-wrapper {
		overflow-x: visible;
	}

	.rptb-table,
	.rptb-table thead,
	.rptb-table tbody,
	.rptb-table tr,
	.rptb-table th,
	.rptb-table td {
		display: block;
		width: auto;
	}

	.rptb-table {
		border: none;
	}

	.rptb-table thead {
		display: none;
	}

	.rptb-table tbody {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.rptb-table tbody tr {
		border: 1px solid var( --rptb-border-color );
		border-radius: 6px;
		overflow: hidden;
		background: #fff;
	}

	/*
	 * ---- Kartu pertama: 2 "kartu" terpisah bersebelahan ----
	 * (kolom label & kolom value), dipisahkan GAP (bukan cuma garis),
	 * senada dengan gap yang memisahkan kartu ke-2 & ke-3 di bawahnya.
	 *
	 * Triknya: <tr> ini sendiri dijadikan grid container 2 kolom, lalu
	 * tiap <td> di dalamnya diberi display:contents supaya "kotak" td
	 * itu sendiri hilang dari layout - yang tersisa cuma isinya
	 * (pseudo-element ::before untuk label, dan elemen value asli)
	 * yang langsung jadi grid item milik <tr>. Dengan begitu, semua
	 * label field (Foto/Nama/dst) bisa disatukan jadi satu kartu utuh
	 * di kolom kiri, dan semua value jadi satu kartu utuh di kolom
	 * kanan - persis seperti kartu ke-2/ke-3, bukan satu kartu besar
	 * yang cuma dikasih garis pembatas di tengah.
	 */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		column-gap: 12px;
		border: none;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}

	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td {
		display: contents;
	}

	/* Kartu kiri (label): satu box utuh, bukan per-baris terpisah. */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td::before {
		content: attr( data-label );
		grid-column: 1;
		background: var( --rptb-header-bg );
		color: var( --rptb-header-color );
		font-weight: 600;
		padding: 12px;
		display: flex;
		align-items: center;
		border-left: 1px solid var( --rptb-border-color );
		border-right: 1px solid var( --rptb-border-color );
	}

	/* Kartu kanan (value): satu box utuh juga.
	 * Selector sengaja TANPA :not(:empty) - elemen seperti <img> tidak
	 * pernah punya anak sama sekali sehingga selalu cocok dengan
	 * :empty, jadi filter :not(:empty) itu justru membuat gambar
	 * tidak pernah kena padding/centering ini (itu penyebab gambar
	 * "mepet" tanpa margin sebelumnya).
	 */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td > * {
		grid-column: 2;
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		box-sizing: border-box;
		background: #fff;
		border-left: 1px solid var( --rptb-border-color );
		border-right: 1px solid var( --rptb-border-color );
	}

	/*
	 * Override perataan untuk teks & tombol saja (sesuai setting
	 * Mobile di Styling Tabel) - .rptb-cell-image SENGAJA tidak
	 * disebut di sini, jadi tetap pakai justify-content:center dari
	 * rule di atas dan tidak pernah ikut geser kiri/kanan.
	 */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td > .rptb-cell-text {
		justify-content: var( --rptb-content-justify-mobile, center );
	}

	/* Sudut membulat & border luar di ujung atas kedua kartu. */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td:first-child::before,
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td:first-child > * {
		border-top: 1px solid var( --rptb-border-color );
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	/* Sudut membulat & border luar di ujung bawah kedua kartu. */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td:last-child::before,
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td:last-child > * {
		border-bottom: 1px solid var( --rptb-border-color );
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	/* Garis pemisah antar field DI DALAM tiap kartu (Foto/Nama Hotel/dst). */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td:not( :last-child )::before,
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) td:not( :last-child ) > * {
		border-bottom: 1px solid var( --rptb-border-color );
	}

	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) .rptb-cell-image {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/*
	 * v1.8.9: badge kategori harga sekarang dibungkus
	 * `.rptb-cell-badge-wrap` (lihat class-rptb-shortcode.php) - wrapper
	 * inilah yang jadi grid item / "kotak value" (kena aturan umum
	 * "td > *" di atas: border kiri-kanan, background, tinggi stretch,
	 * radius sudut - identik dengan kotak Foto/Nama/dst), sedangkan
	 * .rptb-price-badge di dalamnya jadi elemen biasa yang otomatis
	 * mengecil sesuai isinya (inline-block bawaan, TIDAK ikut jadi grid
	 * item) dan ter-center lewat flex milik wrapper. Ini menggantikan
	 * override v1.8.6/1.8.8 sebelumnya yang menempelkan fix di badge itu
	 * sendiri (justify-self + hapus border kiri-kanan) - pendekatan itu
	 * memang menghentikan oval raksasa, tapi sebagai efek samping ikut
	 * menghilangkan garis vertikal pembatas value-box di baris ini saja.
	 * Dengan wrapper, badge tidak pernah perlu merangkap peran "kotak
	 * value" sama sekali, jadi tidak ada lagi trade-off apa pun - garis
	 * vertikal & garis pemisah horizontal di baris Kisaran Harga sekarang
	 * kembali selebar penuh, sama seperti field lain.
	 *
	 * v1.9.0: `.rptb-cell-badge-wrap` yang sama dipakai ulang apa adanya
	 * untuk badge kategori jarak (class-rptb-shortcode.php case
	 * 'distance') - wrapper-nya generik (tidak spesifik ke Harga), jadi
	 * tidak perlu wrapper/CSS grid terpisah lagi untuk tipe kolom baru
	 * ini. Hanya perlu baris kedua di bawah supaya .rptb-distance-badge
	 * ikut tidak jadi grid item, sama seperti .rptb-price-badge.
	 */
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) .rptb-price-badge,
	.rptb-table tbody tr:first-child:not( .rptb-empty-row ) .rptb-distance-badge {
		display: inline-block;
	}

	/*
	 * ---- Kartu ke-2 dst: ringkas, tanpa label, grid 2 kolom ----
	 *
	 * v1.8.1: tiap field (Foto/Nama/Lisensi/Link, dst) di kartu ke-2
	 * dst SEKARANG SEJAJAR TINGGINYA dengan field yang sama di kartu
	 * tetangganya - bukan cuma kotak terluar kartunya yang sama tinggi
	 * (itu sudah otomatis dari grid stretch bawaan sejak awal), tapi
	 * field pendek (mis. "No. Lisensi" 1 baris) ikut melebar mengikuti
	 * field yang lebih tinggi di kartu sebelahnya (mis. 3 baris) -
	 * jadi tombol Link Hotel di kedua kartu berakhir sejajar juga.
	 *
	 * Triknya pakai CSS Grid `subgrid`: tiap <tr> dijadikan grid
	 * ber-N-baris (N = jumlah kolom tabel, lewat var --rptb-field-
	 * count yang dikirim per-tabel dari class-rptb-shortcode.php,
	 * karena jumlah kolom beda-beda tiap tabel) yang MENGADOPSI baris
	 * grid milik <tbody> (grid-template-rows:subgrid) - baris ke-N di
	 * kartu kiri & kanan jadi literally baris grid yang SAMA, jadi
	 * browser otomatis menyamakan tingginya sendiri (default CSS Grid
	 * "align-items:stretch"), sama seperti browser sudah otomatis
	 * menyamakan lebar kolom kiri-kanan - PERSIS mekanisme yang sama,
	 * cuma sekarang diterapkan ke setiap field, bukan cuma kotak
	 * terluar kartu. Auto-placement grid bawaan browser SUDAH otomatis
	 * memasangkan tiap 2 kartu berurutan (kiri-kanan) ke rentang baris
	 * grid yang sama selama semua kartu punya "grid-row: span N" yang
	 * sama persis - tidak perlu hitung manual lewat nth-child.
	 *
	 * Kompatibilitas browser: subgrid didukung luas (Chrome, Firefox,
	 * Safari 16+) - di browser yang belum dukung, otomatis fallback ke
	 * tampilan lama (kartu tetap tampil normal, cuma field-nya balik
	 * tidak presisi sejajar, TIDAK rusak/blank).
	 */
	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: subgrid;
		grid-row: span var( --rptb-field-count, 4 );
		/* subgrid MEWARISI row-gap milik .rptb-table tbody (12px) secara
		   default - direset ke 0 di sini supaya field di DALAM satu
		   kartu tetap rapat (cuma dipisah garis 1px seperti sebelumnya),
		   gap 12px cuma untuk jarak ANTAR kartu (tetap diatur di level
		   tbody, tidak disentuh). */
		row-gap: 0;
	}

	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) td {
		display: flex;
		align-items: center;
		justify-content: var( --rptb-content-justify-mobile, center );
		border: none;
		border-bottom: 1px solid var( --rptb-border-color );
		padding: 10px;
		text-align: var( --rptb-text-align-mobile, center );
		box-sizing: border-box;
	}

	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) td:last-child {
		border-bottom: none;
	}

	/* Gambar & tombol tetap harus mengisi lebar penuh field-nya
	   (justify-content di atas cuma mengatur perataan HORIZONTAL
	   kontainer flex-nya, bukan lebar isinya sendiri). */
	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) td > img,
	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) .rptb-cell-image,
	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) .rptb-link-buttons,
	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) .rptb-btn {
		width: 100%;
	}

	/*
	 * v1.8.3: samakan max-width gambar kartu baris ke-2 dst dengan
	 * kartu baris pertama (yang sudah max-width:100% sejak awal) -
	 * tanpa override ini, .rptb-cell-image jatuh ke aturan dasar
	 * (max-width:160px, dipakai juga di desktop) yang mengunci gambar
	 * mentok 160px APA PUN lebar kartunya - beda logika dari baris
	 * pertama, itu sebabnya baris ke-2 dst kelihatan lebih kecil
	 * walaupun sumber gambarnya (resolusi asli) identik. Sengaja HANYA
	 * dilonggarkan di sini (dalam @media mobile ini), BUKAN di aturan
	 * dasar .rptb-cell-image, supaya kolom "Foto Hotel" di tampilan
	 * DESKTOP tetap proporsional (tidak mendominasi lebar tabel).
	 */
	.rptb-table tbody tr:not( :first-child ):not( .rptb-empty-row ) .rptb-cell-image {
		max-width: 100%;
	}

	/*
	 * Perataan ikon+label DI DALAM tombol untuk mobile - satu rule
	 * ini otomatis berlaku di kartu pertama MAUPUN kartu ke-2 dst,
	 * karena selector descendant ".rptb-btn" tetap menjangkau lewat
	 * DOM tree apa pun display mode leluhurnya (termasuk td yang
	 * display:contents di kartu pertama).
	 */
	.rptb-table .rptb-btn {
		justify-content: var( --rptb-content-justify-mobile, center );
	}

	/* ---- Baris "Belum ada data": tetap polos, full-width ---- */
	.rptb-table tbody tr.rptb-empty-row {
		grid-column: 1 / -1;
		border: 1px solid var( --rptb-border-color );
	}

	.rptb-table tbody tr.rptb-empty-row td::before {
		content: none;
	}

	.rptb-cell-image {
		max-width: 100%;
	}
}