/**
 * Gaya katalog JadiJago.
 *
 * Sengaja ditulis netral dan minimal: plugin ini dipasang di situs WordPress
 * yang sudah punya tema sendiri, jadi warna dan tipografi sebisa mungkin
 * diwariskan dari tema alih-alih dipaksakan. Yang diatur di sini hanya tata
 * letak, yang memang tidak bisa disediakan tema mana pun.
 */

.jadijago-grid {
	display: grid;
	grid-template-columns: repeat(var(--jadijago-columns, 3), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

/* Kolom menyusut mengikuti lebar layar, bukan angka tetap dari shortcode —
   nilai columns adalah batas atas untuk layar lebar. */
@media (max-width: 900px) {
	.jadijago-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.jadijago-grid {
		grid-template-columns: 1fr;
	}
}

.jadijago-card {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.9rem;
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 12px;
	/* currentColor mengikuti warna teks tema, jadi kartunya ikut menyesuaikan
	   mode terang maupun gelap tanpa perlu palet tersendiri. */
	color: inherit;
	transition: box-shadow 0.15s ease;
}

.jadijago-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.jadijago-card__link {
	color: inherit;
	text-decoration: none;
}

/* Persegi, bukan 4:3. Gambar produk datang dari berbagai sumber dengan
   perbandingan yang berbeda-beda; satu perbandingan tetap membuat sederet
   kartu terbaca sebagai satu barisan, bukan tangga. */
.jadijago-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 0.6rem;
	background-color: rgba(128, 128, 128, 0.08);
}

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

/* Judul dijaga dua baris — bukan dipotong sependek-pendeknya, tapi juga tidak
   dibiarkan mendorong isi kartu lain turun sendirian. */
.jadijago-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jadijago-card__badges,
.jadijago-details__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jadijago-card__badges li,
.jadijago-details__badges li {
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	opacity: 0.85;
}

.jadijago-card__excerpt {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	opacity: 0.8;
	/* Ringkasan dipotong pada baris kedua supaya tinggi kartu tetap seragam
	   walau panjang deskripsi tiap produk berbeda jauh. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jadijago-card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.6rem;
	border-top: 1px solid rgba(128, 128, 128, 0.18);
	/* Mendorong harga & tombol ke dasar kartu, sehingga sederet kartu tetap
	   sejajar meski judulnya berbeda jumlah baris. */
	margin-top: auto;
}

.jadijago-card__price {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Tema etalase — "Tanpa Kategori" dan "Dengan Kategori"

   Berbeda dari tema bawaan yang sengaja menumpang warna tema situs, tema ini
   memang sebuah tampilan yang dirancang: kartu putih di atas latar terang,
   dengan satu warna aksen. Warnanya ditaruh sebagai custom property supaya
   klien yang paletnya lain cukup menimpanya dari Customizer atau CSS tambahan
   tema, tanpa menyunting berkas plugin yang akan tertimpa saat pembaruan.
   ------------------------------------------------------------------------- */

.jadijago-showcase {
	/* Marcellus ditaruh paling depan agar dipakai kalau temanya memang sudah
	   memuatnya; plugin tidak ikut menarik berkas fontanya sendiri — sama seperti
	   kartu penawaran di bawah, yang memakai keluarga huruf yang sama. */
	--jadijago-card-display: "Marcellus", Georgia, "Times New Roman", serif;
	--jadijago-accent: #1fa855;
	--jadijago-accent-dark: #14382a;
	--jadijago-accent-deep: #1f5c3d;
	--jadijago-flag-bg: rgba(20, 56, 42, 0.88);
	--jadijago-flag-gold: rgba(184, 134, 43, 0.92);
	--jadijago-flag-muted: #8b8574;
	--jadijago-card-bg: #fff;
	--jadijago-card-fg: #1b2621;
	--jadijago-card-muted: #5c6b62;
	--jadijago-card-line: #e4e1d5;
	--jadijago-card-tint: #e7f0ea;
	--jadijago-card-tint-soft: #f1f6f2;
	--jadijago-card-tint-warm: #f4ebd7;
	--jadijago-card-radius: 14px;
	--jadijago-card-radius-sm: 9px;
	/* Dipakai halaman detail: label di atas judul, garis chip dokumen, dan
	   penanda spesifikasi yang belum dikonfirmasi. */
	--jadijago-gold-ink: #b8862b;
	--jadijago-doc-line: #cbddd1;
	--jadijago-tbc-bg: #fbf3e2;
	--jadijago-tbc-line: #e6d3a6;
	--jadijago-tbc-ink: #8a6d1f;
}

.jadijago-grid--showcase {
	gap: 20px;
}

.jadijago-card--showcase {
	gap: 0;
	padding: 0;
	overflow: hidden;
	background: var(--jadijago-card-bg);
	color: var(--jadijago-card-fg);
	border: 1px solid var(--jadijago-card-line);
	border-radius: var(--jadijago-card-radius);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jadijago-card--showcase:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(20, 56, 42, 0.08);
}

/* Kartunya sendiri yang menyembunyikan diri saat disaring, dan [hidden] kalah
   dari display:flex di atas kalau tidak ditegaskan. */
.jadijago-card--showcase[hidden] {
	display: none;
}

/* 4:3 — perbandingan yang sama dengan foto katalog yang dipakai klien, sehingga
   gambar produknya tampil utuh alih-alih terpotong di sisi atas dan bawahnya.
   Latarnya diberi gradasi karena kotak ini tetap dicetak walau produknya belum
   bergambar: yang kosong terbaca sebagai tempat foto, bukan sebagai kerusakan. */
.jadijago-showcase .jadijago-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	background: linear-gradient(135deg, var(--jadijago-card-tint), var(--jadijago-card-tint-warm));
}

.jadijago-showcase .jadijago-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Huruf awal nama produk sebagai pengganti foto — sebuah monogram, bukan ikon
   gambar rusak, supaya kartu tanpa foto tetap terbaca sebagai bagian deretnya. */
.jadijago-card__initial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--jadijago-card-display);
	font-size: 44px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--jadijago-accent-deep);
}

.jadijago-showcase .jadijago-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--jadijago-flag-bg);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Label ini menumpang di atas foto yang isinya tidak bisa ditebak; tanpa
	   bayangan, teks putihnya hilang begitu sudut fotonya kebetulan terang. */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Produk Indonesia diberi emas, dan asal yang belum terverifikasi diberi kelabu.
   Warna label inilah yang membedakan keduanya sekali lihat — tanpa itu, katalog
   yang separuhnya impor dan separuhnya lokal terbaca seragam. */
.jadijago-showcase .jadijago-card__flag--gold {
	background: var(--jadijago-flag-gold);
}

.jadijago-showcase .jadijago-card__flag--muted {
	background: var(--jadijago-flag-muted);
}

.jadijago-showcase .jadijago-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 18px 18px 0;
}

/* Judul serif, bukan sans tebal — pada kartu etalase nama produknya yang
   memimpin, dan huruf tebal membuatnya terbaca seperti judul iklan. Pemotongan
   dua baris dari tema bawaan dinolkan: nama bahan baku sering panjang, dan yang
   terpotong di tengah justru menyisakan kartu yang tidak bisa dibaca. */
.jadijago-card--showcase .jadijago-card__title {
	margin: 0;
	display: block;
	overflow: visible;
	min-height: 0;
	-webkit-line-clamp: unset;
	font-family: var(--jadijago-card-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--jadijago-accent-dark);
}

.jadijago-card--showcase .jadijago-card__title a {
	color: inherit;
	text-decoration: none;
}

.jadijago-card--showcase .jadijago-card__title a:hover {
	text-decoration: underline;
}

/* Baris asal produk: kelabu, sejajar dengan ringkasannya. Hijau aksen akan
   membuatnya bersaing dengan judul di atasnya, padahal ia keterangan. */
.jadijago-showcase .jadijago-card__meta {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--jadijago-card-muted);
	opacity: 1;
}

.jadijago-card--showcase .jadijago-card__excerpt {
	margin: 0;
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
	flex: 1;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--jadijago-card-muted);
	opacity: 1;
}

.jadijago-card--showcase .jadijago-card__price {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--jadijago-accent-dark);
}

.jadijago-showcase .jadijago-card__actions {
	display: flex;
	gap: 8px;
	padding: 16px 18px 18px;
	/* Mendorong kedua tombol ke dasar kartu, sehingga sederet kartu tetap
	   sejajar walau judul dan ringkasannya berbeda jumlah baris. */
	margin-top: auto;
}

/* Kedua tombol berbagi lebar sama rata berapa pun panjang tulisannya — "Detail"
   di sebelah "Hubungi Kami" tidak boleh menghasilkan sepasang yang timpang. */
.jadijago-showcase .jadijago-card__actions > * {
	flex: 1 1 0;
	min-width: 0;
}

/* Kedua tombol terbaca sebagai sepasang, jadi bentuknya diikat ganda ke
   .jadijago-showcase dan properti yang biasa dipaksakan tema — padding,
   lengkung, warna — ditandai !important. Hampir setiap tema punya gaya tombol
   global yang selektornya mengalahkan satu kelas; yang ditandai hanya properti
   yang memang jadi rebutan, sisanya tetap bisa ditimpa pemilik situs. */
.jadijago-showcase .jadijago-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 8px !important;
	border-radius: 999px !important;
	font-size: 12.5px !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.jadijago-showcase .jadijago-btn--ghost {
	border: 1.5px solid var(--jadijago-accent-dark) !important;
	background: var(--jadijago-card-bg) !important;
	color: var(--jadijago-accent-dark) !important;
}

.jadijago-showcase .jadijago-btn--ghost:hover,
.jadijago-showcase .jadijago-btn--ghost:focus {
	background: var(--jadijago-card-tint) !important;
	color: var(--jadijago-accent-dark) !important;
	text-decoration: none;
}

/* Tombol chat kartu memakai hijau WhatsApp, pasangan dari tombol Detail yang
   berbingkai — bukan hijau tombol WhatsApp tema bawaan, yang di sebelah tombol
   putih terbaca sebagai tempelan dari komponen lain. */
.jadijago-showcase .jadijago-card__actions .jadijago-consult {
	width: 100%;
	margin: 0;
	padding: 11px 8px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--jadijago-accent) !important;
	color: #fff !important;
	font-size: 12.5px !important;
	font-weight: 700;
	line-height: 1.2;
}

.jadijago-showcase .jadijago-card__actions .jadijago-consult:hover {
	opacity: 1;
	box-shadow: 0 8px 20px rgba(31, 168, 85, 0.32);
}

.jadijago-showcase .jadijago-card__actions .jadijago-consult:disabled {
	opacity: 0.6;
	box-shadow: none;
}

/* Ruang untuk dua tombol berdampingan habis lebih cepat daripada lebar
   kartunya: pada kolom yang sempit keduanya turun berurutan. */
@media (max-width: 400px) {
	.jadijago-showcase .jadijago-card__actions {
		flex-direction: column;
	}
}

.jadijago-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 24px 0 30px;
}

.jadijago-chip {
	padding: 9px 18px;
	border: 1.5px solid var(--jadijago-card-line);
	border-radius: 999px;
	background: var(--jadijago-card-bg);
	color: var(--jadijago-card-muted);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.jadijago-chip:hover {
	border-color: var(--jadijago-accent-dark);
	color: var(--jadijago-accent-dark);
}

.jadijago-chip.is-active {
	background: var(--jadijago-accent-dark);
	border-color: var(--jadijago-accent-dark);
	color: #fff;
}

.jadijago-showcase__empty {
	margin: 1.5rem 0;
	color: var(--jadijago-card-muted);
	font-style: italic;
}

/* ---------------------------------------------------------------------------
   Halaman produk bergaya etalase

   Dipakai halaman produk tunggal dan shortcode [jadijago_product]. Paletnya
   diwarisi dari .jadijago-showcase yang membungkusnya, jadi klien yang sudah
   menimpa warna kartunya tidak perlu menimpanya dua kali.

   Halaman produk adalah tempat gaya tema paling banyak ikut campur — judul,
   tabel, dan tombol semuanya punya aturan global di hampir setiap tema — jadi
   aturan di sini diikat ganda ke .jadijago-pd, dan hanya properti yang memang
   jadi rebutan yang ditandai !important.
   ------------------------------------------------------------------------- */

.jadijago-pd {
	margin: 1.5rem 0;
}

/* Pembungkus halaman produk yang diambil alih plugin. Tema tidak lagi
   menyediakan kolom kontennya di sini, jadi lebar dan jaraknya diatur sendiri —
   mengikuti lebar halaman prototipe. */
.jadijago-pd-page {
	max-width: 1180px;
	margin: 0 auto;
	padding-block: 40px 64px;
	padding-inline: 22px;
}

.jadijago-pd-page .jadijago-pd {
	margin: 0;
}

.jadijago-pd__crumb {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--jadijago-card-muted);
}

.jadijago-pd .jadijago-pd__crumb a {
	color: var(--jadijago-accent-deep);
	text-decoration: none;
}

.jadijago-pd .jadijago-pd__crumb a:hover {
	text-decoration: underline;
}

.jadijago-pd__crumb span {
	margin: 0 6px 0 2px;
}

.jadijago-pd__crumb span:last-child {
	margin: 0;
	color: var(--jadijago-card-fg);
}

.jadijago-pd__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 46px;
	align-items: start;
}

/* Tanpa kolom gambar — temanya sudah mencetak fotonya sendiri di atas — sisa
   kolomnya tidak dibiarkan melar seluruh lebar halaman: baris spesifikasi
   sepanjang layar lebar sulit dibaca dari kiri ke kanan. */
.jadijago-pd__grid--single {
	grid-template-columns: minmax(0, 720px);
}

@media (max-width: 900px) {
	.jadijago-pd__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

.jadijago-pd__main {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--jadijago-card-radius);
	background: linear-gradient(135deg, var(--jadijago-card-tint), var(--jadijago-card-tint-warm));
}

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

.jadijago-pd__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.jadijago-pd__thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--jadijago-card-line);
	border-radius: var(--jadijago-card-radius-sm);
	background: var(--jadijago-card-tint);
}

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

.jadijago-pd__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.26em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--jadijago-gold-ink);
}

/* Judul produk. Hampir setiap tema memberi h1 gaya globalnya sendiri — sans
   tebal, ukuran hero — dan di halaman yang diambil alih plugin, judul inilah
   satu-satunya judul yang tercetak. Karena itu keempat properti yang menentukan
   wujudnya ditandai; sisanya tetap bisa ditimpa pemilik situs. */
.jadijago-pd .jadijago-pd__title {
	margin: 0;
	font-family: var(--jadijago-card-display) !important;
	font-size: clamp(26px, 3.6vw, 40px) !important;
	font-weight: 400 !important;
	line-height: 1.18;
	letter-spacing: normal;
	text-transform: none;
	color: var(--jadijago-accent-dark) !important;
}

.jadijago-pd__lead {
	margin: 12px 0 4px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--jadijago-card-muted);
	max-width: 64ch;
}

/* Badge produk — sertifikasi dan dokumen. Garis tepi saja, bukan blok warna:
   ia keterangan pendukung, dan tidak boleh bersaing dengan label kategori di
   atas judul maupun chip dokumen di bawah tabel. */
.jadijago-pd .jadijago-pd__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.jadijago-pd .jadijago-pd__badges li {
	margin: 0;
	padding: 3px 11px;
	border: 1px solid var(--jadijago-card-line);
	border-radius: 999px;
	color: var(--jadijago-card-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

/* Tabel spesifikasi. border-collapse dan lebar kolomnya ditegaskan karena tema
   yang memberi tabel gaya sendiri — garis tepi penuh, baris berselang-seling —
   membuatnya terbaca sebagai tabel data, bukan sebagai daftar spesifikasi. */
.jadijago-pd .jadijago-pd__spec {
	width: 100%;
	margin: 20px 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.6;
	table-layout: fixed;
}

.jadijago-pd .jadijago-pd__spec th,
.jadijago-pd .jadijago-pd__spec td {
	padding: 11px 12px !important;
	border: 0;
	border-bottom: 1px solid var(--jadijago-card-line) !important;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
}

.jadijago-pd .jadijago-pd__spec th {
	width: 40%;
	background: var(--jadijago-card-tint-soft) !important;
	color: var(--jadijago-card-muted);
	font-weight: 600;
}

/* Spesifikasi yang ditulis di dalam kurung siku adalah janji yang belum
   diverifikasi. Ia tetap tampil — pembeli berhak tahu apa yang belum pasti —
   tapi sebagai penanda, bukan sebagai angka yang bisa dikutip. */
.jadijago-pd__tbc {
	display: inline-block;
	padding: 1px 9px;
	border: 1px dashed var(--jadijago-tbc-line);
	border-radius: 6px;
	background: var(--jadijago-tbc-bg);
	color: var(--jadijago-tbc-ink);
	font-size: 12.5px;
	font-weight: 600;
}

.jadijago-pd__docs {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 16px 0 6px;
}

.jadijago-pd__doc {
	padding: 7px 13px;
	border: 1px solid var(--jadijago-doc-line);
	border-radius: 8px;
	background: var(--jadijago-card-tint);
	color: var(--jadijago-accent-dark);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
}

.jadijago-pd__note {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--jadijago-card-muted);
}

/* Catatan Tambahan produk. Garis emas di kiri, bukan kotak penuh warna: ia
   keterangan yang berlaku untuk seluruh spesifikasi di atasnya, dan sebuah
   kotak mencolok akan terbaca sebagai peringatan. */
.jadijago-pd__claim {
	margin-top: 18px;
	padding: 12px 16px;
	border-left: 3px solid var(--jadijago-gold-ink);
	border-radius: 0 10px 10px 0;
	background: var(--jadijago-card-tint-soft);
	font-size: 13px;
	line-height: 1.65;
	color: var(--jadijago-card-muted);
}

.jadijago-pd__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* Tombol halaman detail lebih besar daripada tombol kartu: di sini keduanya
   adalah tujuan halaman, bukan pelengkap di dasar sebuah kartu. */
.jadijago-pd .jadijago-btn,
.jadijago-pd .jadijago-consult--pd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.jadijago-pd .jadijago-btn--solid {
	background: var(--jadijago-accent-dark) !important;
	color: #fff !important;
}

.jadijago-pd .jadijago-btn--solid:hover,
.jadijago-pd .jadijago-btn--solid:focus {
	box-shadow: 0 8px 20px rgba(20, 56, 42, 0.28);
	color: #fff !important;
	text-decoration: none;
}

.jadijago-pd .jadijago-consult--pd {
	margin: 0;
	background: var(--jadijago-accent) !important;
	color: #fff !important;
}

.jadijago-pd .jadijago-consult--pd:hover {
	opacity: 1;
	box-shadow: 0 8px 20px rgba(31, 168, 85, 0.32);
}

.jadijago-pd .jadijago-consult--pd:disabled {
	opacity: 0.6;
	box-shadow: none;
}

@media (max-width: 400px) {
	.jadijago-pd__cta {
		flex-direction: column;
	}

	.jadijago-pd .jadijago-btn,
	.jadijago-pd .jadijago-consult--pd {
		width: 100%;
	}
}

.jadijago-pd__body {
	margin-top: 46px;
	max-width: 72ch;
}

.jadijago-pd__related {
	margin-top: 64px;
}

.jadijago-pd .jadijago-pd__related-title {
	margin: 0;
	font-family: var(--jadijago-card-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--jadijago-accent-dark);
}

.jadijago-pd__related .jadijago-grid {
	margin-top: 20px;
}

/* Warna dan lengkung ditulis sebagai custom property supaya tombol yang dipasang
   lewat shortcode [jadijago_whatsapp] atau widget Elementor bisa menimpanya lewat
   satu atribut style di elemennya sendiri, tanpa perlu !important dan tanpa
   membuat :hover dan :disabled di bawah ikut kehilangan aturannya. */
.jadijago-consult {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: var(--jadijago-wa-radius, 999px);
	background: var(--jadijago-wa-bg, #25d366);
	color: var(--jadijago-wa-color, #06331a);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.jadijago-consult:hover {
	opacity: 0.88;
}

.jadijago-consult:disabled {
	cursor: progress;
	opacity: 0.6;
}

.jadijago-consult--card {
	width: 100%;
	text-align: center;
	/* Jarak ke baris harga di atasnya dibuat tetap, supaya tombol seluruh kartu
	   dalam satu baris berada pada ketinggian yang sama. */
	margin-top: 0.15rem;
	padding: 0.65rem 1rem;
	font-size: 0.9rem;
}

.jadijago-consult--large {
	padding: 0.85rem 1.6rem;
	font-size: 1.05rem;
}

/* Tombol tambahan halaman produk. Dirender sebagai <a>, jadi garis bawah dan
   warna tautan bawaan tema harus dinolkan sendiri — .jadijago-consult ditulis
   untuk <button>, yang tidak punya keduanya. */
.jadijago-consult--alt {
	background: #113020;
	color: #fff;
	text-decoration: none;
}

.jadijago-consult--alt:hover,
.jadijago-consult--alt:focus {
	color: #fff;
	text-decoration: none;
}

/* Baris tombol halaman produk. Membungkus ke baris berikutnya di layar sempit
   supaya dua tombol besar tidak saling memepet sampai teksnya terpotong. */
.jadijago-details__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.jadijago-details {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(128, 128, 128, 0.25);
}

.jadijago-details__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
}

.jadijago-details__list dt {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.65;
}

.jadijago-details__list dd {
	margin: 0.2rem 0 0;
	font-size: 1.1rem;
	font-weight: 600;
}

/* Keterangan tambahan dibiarkan menurun satu per satu, bukan berjajar seperti
   harga: isinya kalimat, dan kalimat yang dipaksa berbagi baris jadi sempit. */
.jadijago-details__facts {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding-top: 0.25rem;
}

.jadijago-details__facts dt {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.65;
}

.jadijago-details__facts dd {
	margin: 0.2rem 0 0;
	line-height: 1.55;
}

/* Catatan kecil di bawah daftar keterangan. Diberi latar tipis, bukan sekadar
   teks pudar, supaya terbaca sebagai keterangan atas seluruh daftar di atasnya
   dan bukan sebagai baris terakhirnya. */
.jadijago-details__note {
	margin: 0;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	border: 1px solid rgba(180, 130, 20, 0.28);
	background: rgba(214, 158, 30, 0.09);
	font-size: 0.88rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Galeri foto & FAQ produk
   ------------------------------------------------------------------------- */

.jadijago-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.6rem;
}

.jadijago-gallery__item {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(128, 128, 128, 0.08);
}

.jadijago-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	/* Rasio tetap: foto galeri sebuah produk hampir tidak pernah seukuran satu
	   sama lain, dan barisnya jadi bergerigi kalau tingginya dibiarkan ikut. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.jadijago-faq__title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
}

.jadijago-faq__item + .jadijago-faq__item {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(128, 128, 128, 0.18);
}

.jadijago-faq__question {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.jadijago-faq__answer {
	margin-top: 0.3rem;
	line-height: 1.6;
	opacity: 0.85;
}

.jadijago-faq__answer p {
	margin: 0 0 0.5rem;
}

.jadijago-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Pengantar halaman kategori
   ------------------------------------------------------------------------- */

.jadijago-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

.jadijago-intro__eyebrow {
	margin: 0;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.65;
}

.jadijago-intro__headline {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
}

.jadijago-intro__text {
	line-height: 1.6;
}

.jadijago-intro__text p {
	margin: 0 0 0.6rem;
}

.jadijago-intro__text p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Formulir lead
   ------------------------------------------------------------------------- */

.jadijago-form {
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 14px;
	padding: 1.35rem;
	margin: 1.5rem 0;
}

.jadijago-form__title {
	margin: 0 0 1rem;
	font-size: 1.15rem;
}

.jadijago-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1rem;
}

/* Dua kolom hanya masuk akal selama medannya masih cukup lebar untuk dibaca;
   di bawah itu berdampingan justru membuat labelnya terpenggal. */
@media (max-width: 560px) {
	.jadijago-form__grid {
		grid-template-columns: 1fr;
	}
}

.jadijago-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 0.9rem;
}

.jadijago-form__field label {
	font-size: 0.85rem;
	font-weight: 700;
}

.jadijago-form__req {
	color: #f59e0b;
}

.jadijago-form input,
.jadijago-form select,
.jadijago-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 10px;
	/* Mewarisi tipografi dan warna tema, bukan memaksakan palet sendiri —
	   sama seperti sisa gaya plugin ini. */
	font: inherit;
	color: inherit;
	background-color: transparent;
}

.jadijago-form textarea {
	min-height: 96px;
	resize: vertical;
}

.jadijago-form__field--invalid input,
.jadijago-form__field--invalid select {
	border-color: #d33;
}

/* Medan bersyarat — mis. "Sebutkan produk" sebelum pilihan "Lainnya" dipilih.
   Disembunyikan, bukan dihapus dari halaman: pengunjung yang berpindah pilihan
   lalu kembali akan menemukan isiannya masih utuh. */
.jadijago-form__field--hidden {
	display: none;
}

/* Centang menaruh labelnya di samping kotaknya. Aturan lebar 100% di atas
   berlaku untuk semua input, dan pada kotak centang itu menghasilkan kotak
   selebar satu baris penuh. */
.jadijago-form__check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 400;
	cursor: pointer;
}

.jadijago-form__check input[type="checkbox"] {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

.jadijago-form__error {
	font-size: 0.78rem;
	color: #d33;
}

/* Tanpa ini, tiap medan menyisakan celah setinggi satu baris untuk galat yang
   belum tentu muncul, dan jarak antar medan terlihat tidak beraturan. */
.jadijago-form__error:empty {
	display: none;
}

.jadijago-form__submit {
	margin-top: 0.25rem;
}

.jadijago-form__status {
	margin: 0.75rem 0 0;
	padding: 0.7rem 1rem;
	border-radius: 10px;
	text-align: center;
	font-size: 0.88rem;
	font-weight: 600;
}

.jadijago-form__status--ok {
	background: rgba(37, 211, 102, 0.14);
}

.jadijago-form__status--error {
	background: rgba(221, 51, 51, 0.12);
	color: #b32020;
}

.jadijago-form__note {
	margin: 0.75rem 0 0;
	text-align: center;
	font-size: 0.78rem;
	opacity: 0.65;
}

/* Umpan bot. Tidak memakai display:none maupun visibility:hidden karena
   pengisi otomatis sudah lama mengabaikan medan yang disembunyikan begitu;
   digeser keluar layar, medan ini tetap "terlihat" bagi mereka. */
.jadijago-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Pemilih kebutuhan — [jadijago_penawaran]

   Ukuran, warna, dan jarak di sini menyalin kartu "Pilih Kebutuhan Anda" pada
   prototipe Lantabura, supaya halaman Minta Penawaran di WordPress terbaca
   persis seperti rancangannya, bukan sekadar mirip.

   Berbeda dari gaya katalog yang sengaja menumpang warna tema situs, bagian ini
   memang sebuah tampilan yang dirancang. Paletnya ditaruh sebagai custom
   property supaya klien yang warnanya lain cukup menimpanya dari Customizer
   atau CSS tambahan tema, tanpa menyunting berkas plugin yang akan tertimpa
   saat pembaruan.

   Kartunya elemen <button>, dan hampir setiap tema punya gaya tombol global —
   pill hijau, teks putih, huruf tebal — yang selektornya (`.entry-content
   button`, `.wp-site-blocks button`, dan sebangsanya) mengalahkan satu kelas.
   Karena itu setiap aturan kartu diikat ganda ke `.jadijago-quote`, dan properti
   yang biasa dipaksakan tema ditandai `!important`. Yang ditandai hanya properti
   yang memang jadi rebutan; sisanya dibiarkan biasa supaya masih bisa ditimpa
   pemilik situs yang sengaja ingin mengubahnya.
   ------------------------------------------------------------------------- */

.jadijago-quote {
	/* Marcellus ditaruh paling depan agar dipakai kalau temanya memang sudah
	   memuatnya; plugin tidak ikut menarik berkas fontanya sendiri. */
	--jadijago-quote-display: "Marcellus", Georgia, "Times New Roman", serif;
	--jadijago-quote-ink: #1b2621;
	--jadijago-quote-muted: #5c6b62;
	--jadijago-quote-heading: #14382a;
	--jadijago-quote-line: #e4e1d5;
	--jadijago-quote-accent: #1f5c3d;
	--jadijago-quote-accent-soft: #2a7350;
	--jadijago-quote-tint: #f1f6f2;
	--jadijago-quote-ring: #e7f0ea;

	padding: 30px;
	margin: 1.5rem 0;
	border: 1px solid var(--jadijago-quote-line);
	border-radius: 14px;
	background: #fff;
	color: var(--jadijago-quote-ink);
	box-shadow: 0 10px 30px rgba(20, 56, 42, 0.08);
}

@media (max-width: 560px) {
	.jadijago-quote {
		padding: 20px 18px;
	}
}

.jadijago-quote .jadijago-quote__step {
	display: block;
	margin: 0 0 14px;
	font-family: var(--jadijago-quote-display);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--jadijago-quote-heading);
}

.jadijago-quote .jadijago-quote__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 4px;
}

@media (max-width: 560px) {
	.jadijago-quote .jadijago-quote__cards {
		grid-template-columns: 1fr;
	}
}

.jadijago-quote .jadijago-quote__card {
	/* appearance dimatikan lebih dulu: tanpa ini Safari mengembalikan gaya
	   tombol bawaan begitu background dan border dilepas. */
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 13px 14px !important;
	/* Longhand, bukan shorthand: `border: 1.5px solid var(--x)` sah di peramban,
	   tapi menyulitkan penimpaan border-color saja pada keadaan hover dan aktif. */
	border-width: 1.5px !important;
	border-style: solid !important;
	border-color: var(--jadijago-quote-line) !important;
	border-radius: 12px !important;
	/* background-image ikut dinolkan: gaya tombol tema kerap berupa gradien,
	   yang tetap menutupi warna latar kalau hanya background-color diganti. */
	background: #fff !important;
	background-image: none !important;
	color: var(--jadijago-quote-ink) !important;
	font: inherit !important;
	text-align: left !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: 0.15s;
}

.jadijago-quote .jadijago-quote__card:hover,
.jadijago-quote .jadijago-quote__card:focus {
	border-color: var(--jadijago-quote-accent-soft) !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--jadijago-quote-ink) !important;
}

.jadijago-quote .jadijago-quote__card.is-active,
.jadijago-quote .jadijago-quote__card.is-active:hover,
.jadijago-quote .jadijago-quote__card.is-active:focus {
	border-color: var(--jadijago-quote-accent) !important;
	background: var(--jadijago-quote-tint) !important;
	background-image: none !important;
	box-shadow: 0 0 0 3px var(--jadijago-quote-ring) !important;
}

.jadijago-quote .jadijago-quote__icon {
	font-size: 20px !important;
	line-height: 1;
}

.jadijago-quote .jadijago-quote__label {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35;
	color: var(--jadijago-quote-ink) !important;
}

.jadijago-quote .jadijago-quote__blurb {
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.45;
	color: var(--jadijago-quote-muted) !important;
}

.jadijago-quote .jadijago-quote__fallback {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	margin: 6px 0 0;
}

.jadijago-quote .jadijago-quote__link {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline !important;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-image: none !important;
	color: var(--jadijago-quote-accent) !important;
	font: inherit !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}

.jadijago-quote .jadijago-quote__link:hover,
.jadijago-quote .jadijago-quote__link:focus,
.jadijago-quote .jadijago-quote__link.is-active {
	background: none !important;
	color: var(--jadijago-quote-heading) !important;
}

.jadijago-quote .jadijago-quote__hint {
	font-size: 1rem;
	color: var(--jadijago-quote-ink);
}

.jadijago-quote .jadijago-form--nested {
	border: 0;
	border-radius: 0;
	padding: 1.15rem 0 0;
	margin: 0;
}

.jadijago-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.5rem 0;
}

.jadijago-empty {
	opacity: 0.7;
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Tombol WhatsApp yang bisa diatur — [jadijago_whatsapp] dan widget Elementor
 * ------------------------------------------------------------------------ */

/* Flex, bukan inline-block: ikon dan teks harus sejajar di tengah walau
   tingginya berbeda, dan urutannya dibalik widget Elementor lewat
   flex-direction saat ikonnya diminta di belakang teks. */
.jadijago-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	line-height: 1.2;
}

.jadijago-wa__icon {
	flex: 0 0 auto;
}

/* Tombol tanpa teks — mis. label dikosongkan di Elementor — tidak boleh
   menyisakan celah gap di sebelah ikonnya. */
.jadijago-wa__label:empty {
	display: none;
}

.jadijago-wa--small {
	padding: 0.45rem 0.85rem;
	font-size: 0.85rem;
	gap: 0.4rem;
}

.jadijago-wa--large {
	padding: 0.85rem 1.6rem;
	font-size: 1.05rem;
	gap: 0.6rem;
}

.jadijago-wa--full {
	width: 100%;
}

/* Nomor tetap dirender sebagai <a>, dan tema situs hampir selalu memberi
   tautan garis bawah serta warnanya sendiri. .jadijago-consult ditulis untuk
   <button>, yang tidak punya keduanya. */
.jadijago-wa--link,
.jadijago-wa--link:hover,
.jadijago-wa--link:focus {
	color: var(--jadijago-wa-color, #06331a);
	text-decoration: none;
}

/* Pembungkus tombol di dalam widget Elementor. Kontrol "Posisi" di panelnya
   tidak menulis properti CSS langsung, melainkan dua custom property di
   pembungkus widget — dan keduanya diwarisi sampai ke sini. Satu kontrol
   responsif karenanya cukup untuk seluruh breakpoint, termasuk breakpoint
   tambahan yang dibuat sendiri oleh situsnya, tanpa satu pun media query di
   berkas ini. */
.jadijago-wa-box {
	display: flex;
	justify-content: var(--jadijago-wa-justify, flex-start);
}

.jadijago-wa-box > .jadijago-wa {
	width: var(--jadijago-wa-width, auto);
}

.jadijago-wa-wrap--left {
	text-align: left;
}

.jadijago-wa-wrap--center {
	text-align: center;
}

.jadijago-wa-wrap--right {
	text-align: right;
}

/* ---------------------------------------------------------------------------
 * Tombol WhatsApp mengambang
 * ------------------------------------------------------------------------ */

/* z-index setinggi ini disengaja: tombolnya harus tetap di atas bilah lengket
   dan pemberitahuan cookie yang dipasang tema atau plugin lain, yang lazimnya
   berhenti di sekitar 9999. */
.jadijago-float {
	position: fixed;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
	/* Pointer dimatikan di pembungkusnya lalu dinyalakan lagi di tombol dan
	   gelembungnya: pembungkus setinggi gelembung yang menutupi isi halaman di
	   belakangnya akan menelan klik yang tidak ditujukan kepadanya. */
	pointer-events: none;
}

.jadijago-float--bottom-right {
	right: var(--jadijago-float-x, 20px);
	bottom: var(--jadijago-float-y, 20px);
}

.jadijago-float--bottom-left {
	left: var(--jadijago-float-x, 20px);
	bottom: var(--jadijago-float-y, 20px);
	align-items: flex-start;
}

.jadijago-float--middle-right {
	right: var(--jadijago-float-x, 20px);
	top: 50%;
	transform: translateY(-50%);
}

.jadijago-float--middle-left {
	left: var(--jadijago-float-x, 20px);
	top: 50%;
	transform: translateY(-50%);
	align-items: flex-start;
}

.jadijago-float__button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-width: var(--jadijago-float-size, 56px);
	height: var(--jadijago-float-size, 56px);
	padding: 0 calc(var(--jadijago-float-size, 56px) / 3.5);
	border: 0;
	border-radius: 999px;
	background: var(--jadijago-wa-bg, #25d366);
	color: var(--jadijago-wa-color, #fff);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	/* Sama persis dengan bayangan di dalam @keyframes denyut di bawah. Kalau
	   keduanya berbeda, tombol akan tersentak berganti bayangan tepat saat
	   animasinya mulai dan lagi saat berhenti. Sengaja rapat: bayangan lebar
	   yang lembut membuat tepi lingkarannya terlihat kabur. */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Ditulis dengan pembungkusnya di depan, bukan sebagai satu kelas saja: tombol
   ini dicetak di footer situs milik orang lain, dan aturan `button { … }` milik
   tema sudah cukup untuk menimpa selektor berkelas tunggal.

   Ketiga properti terakhir menutup jalan bagi efek yang diwariskan tema —
   tombol setengah tembus, filter yang mengabukan, atau mode pencampuran — yang
   semuanya membuat hijaunya terlihat pudar dan tepinya kabur, padahal warna
   yang diminta admin sudah benar. */
.jadijago-float .jadijago-float__button {
	background-color: var(--jadijago-wa-bg, #25d366);
	background-image: none;
	color: var(--jadijago-wa-color, #fff);
	opacity: 1;
	filter: none;
	mix-blend-mode: normal;
}

.jadijago-float__button:hover,
.jadijago-float__button:focus {
	color: var(--jadijago-wa-color, #fff);
	text-decoration: none;
	transform: scale(1.05);
}

.jadijago-float__button:disabled {
	cursor: progress;
	opacity: 0.6;
	transform: none;
}

.jadijago-float__button .jadijago-wa__icon {
	width: calc(var(--jadijago-float-size, 56px) / 2.2);
	height: calc(var(--jadijago-float-size, 56px) / 2.2);
	flex: 0 0 auto;
}

/* Tombol yang hanya berisi ikon dibuat bundar sempurna: tanpa ini, padding
   kiri-kanan membuatnya menjadi kapsul yang lebih lebar daripada tinggi.
   Kelasnya diberikan PHP, bukan disimpulkan dengan :has(), supaya bentuk
   tombolnya tidak bergantung pada dukungan peramban terhadap selektor itu. */
.jadijago-float--icon-only .jadijago-float__button {
	padding: 0;
	width: var(--jadijago-float-size, 56px);
}

.jadijago-float__label {
	white-space: nowrap;
}

/* Denyut, sebagai cincin box-shadow yang tumbuh dari tepi tombol ke luar.

   Sebelumnya ini sebuah lapisan seukuran tombol yang membesar di belakangnya.
   Bentuk itu keliru: pada awal tiap putaran lapisannya menutupi persis seluas
   tombol, dan sisa putarannya meninggalkan halo hijau pucat di sekelilingnya —
   tombolnya jadi terlihat pudar dan buram, bukan warna solid.

   Cincin box-shadow tidak pernah menimpa tombolnya sama sekali: sebarannya
   mulai dari 0, yaitu tepat di tepi tombol, lalu melebar ke luar sambil
   memudar. Tombolnya sendiri tidak ikut bergerak — sasaran klik yang berpindah
   jauh lebih sulit dikenai di layar sentuh. */
.jadijago-float--pulse .jadijago-float__button {
	animation: jadijago-float-pulse 2.4s ease-out infinite;
}

/* Warna cincinnya dikirim PHP sebagai rgba dari warna latar yang dipilih admin,
   lengkap dengan pasangan beralfa 0 untuk ujung animasinya. Memudarkannya ke
   `transparent` akan melewati hitam di tengah jalan dan cincinnya sempat
   terlihat kusam. */
@keyframes jadijago-float-pulse {
	0% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
			0 0 0 0 var(--jadijago-float-ring, rgba(37, 211, 102, 0.5));
	}
	70% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
			0 0 0 16px var(--jadijago-float-ring-out, rgba(37, 211, 102, 0));
	}
	100% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
			0 0 0 0 var(--jadijago-float-ring-out, rgba(37, 211, 102, 0));
	}
}

/* Animasi tak berujung adalah salah satu penyebab utama pusing pada pengunjung
   yang sensitif terhadap gerakan, dan denyut ini murni hiasan. */
@media (prefers-reduced-motion: reduce) {
	.jadijago-float--pulse .jadijago-float__button {
		animation: none;
	}

	.jadijago-float__button:hover,
	.jadijago-float__button:focus {
		transform: none;
	}
}

.jadijago-float__bubble {
	pointer-events: auto;
	position: relative;
	max-width: 240px;
	padding: 0.8rem 2rem 0.8rem 0.9rem;
	border-radius: 14px;
	background: #fff;
	color: #16281e;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	font-size: 0.82rem;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.jadijago-float__bubble-title {
	font-size: 0.88rem;
	font-weight: 700;
}

.jadijago-float__close {
	position: absolute;
	top: 0.15rem;
	right: 0.35rem;
	padding: 0.1rem 0.3rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0.45;
	cursor: pointer;
}

.jadijago-float__close:hover {
	opacity: 0.9;
}

.jadijago-float__bubble[hidden] {
	display: none;
}

/* Keadaan awal tombol bertunda. Kelasnya dilepas JS setelah waktunya lewat;
   bila JS gagal dimuat sama sekali, tombolnya memang tidak muncul — dan itu
   lebih baik daripada tombol yang muncul tapi kliknya tidak menghasilkan apa
   pun, karena yang membuka WhatsApp juga JS yang sama. */
.jadijago-float.is-pending {
	display: none;
}

.jadijago-float--desktop {
	display: none;
}

@media (min-width: 768px) {
	.jadijago-float--desktop:not(.is-pending) {
		display: flex;
	}

	.jadijago-float--mobile {
		display: none;
	}
}