/*
 * Contact Us restyle -- item 3 roadmap (2026-08-30).
 * Scoped SELURUHNYA ke body.zsd-halaman-contact-us (lihat
 * zsd_body_class_contact_us() di includes/contact-us-restyle.php) --
 * TIDAK ADA selector di file ini yang boleh bocor ke halaman lain.
 *
 * Breakpoint LOCKED sesuai spec Ferdian 2026-08-30 (beda dari breakpoint
 * WPForms/Botiga bawaan 768/991 yang dipakai halaman lain):
 *   Desktop >1024px | Tablet 641-1024px | Mobile <=640px
 *
 * Hero text-kiri/map-kanan HANYA di desktop sejati (>1024px) -- di tablet
 * DAN mobile, hero di-stack vertikal (ikut visual reference resmi yang
 * dilampirkan, bukan hasil tebakan) supaya headline+paragraf tidak
 * berdesakan sejajar dengan map di lebar tablet.
 *
 * REVISI 2026-09-11 -- rollout "global visual setting" (roadmap: Home,
 * Journal, Shop, Product Detail, About Us sudah selesai, Contact Us
 * berikutnya). SEBELUMNYA token warna/font di sini hardcode, sengaja
 * disamakan manual dengan About Us (coklat oranye kecoklatan, Playfair
 * Display) supaya kedua halaman kerasa satu sistem visual walau keduanya
 * belum ikut setting global. Sekarang decoupled dari itu: default
 * --zsd-jr- token di-declare langsung di sini (nilai identik dengan
 * default .zsd-journal, satu sumber kebenaran preset ada di
 * includes/journal.php lewat fungsi zsd_journal_daftar_preset_palet,
 * zsd_journal_daftar_preset_aksen, dan zsd_journal_daftar_preset_font)
 * lalu --zsd-cu- alias ke --zsd-jr-. Preset override lewat body class
 * zsd-contact-us-palet, zsd-contact-us-aksen, zsd-contact-us-font (bukan
 * data attribute -- halaman ini Page WP biasa dengan the_content override,
 * sama pola dengan Shop/Product Detail/About Us, lihat
 * zsd_body_class_contact_us(), includes/contact-us-restyle.php). Radius
 * 15px TETAP token layout, di luar cakupan setting visual, tidak disentuh.
 *
 * CATATAN: komentar-komentar baru terkait rollout ini di file ini SENGAJA
 * tidak pernah menulis tanda bintang yang langsung diikuti garis miring di
 * mana pun -- dua karakter itu berurutan menutup komentar CSS lebih awal,
 * pernah kejadian nyata di rollout Product Detail (rule custom property
 * hilang total dari CSSOM walau teks sumbernya kelihatan benar).
 */

body.zsd-halaman-contact-us {
	--zsd-jr-bg: #fdfaf5;
	--zsd-jr-krem: #f2e8da;
	--zsd-jr-krem-muda: #f8f2e9;
	--zsd-jr-coklat: #6b5744;
	--zsd-jr-coklat-muda: #a9927a;
	--zsd-jr-teks: #2c2620;
	--zsd-jr-teks-muted: #8a7f6f;
	--zsd-jr-border: #e7dccb;
	--zsd-jr-aksen: var(--zsd-jr-coklat);
	--zsd-jr-font-heading: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;

	--zsd-cu-coklat: var(--zsd-jr-aksen);
	--zsd-cu-coklat-gelap: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black);
	--zsd-cu-teks: var(--zsd-jr-teks);
	--zsd-cu-teks-muted: var(--zsd-jr-teks-muted);
	--zsd-cu-putih-hangat: var(--zsd-jr-krem-muda);
	--zsd-cu-border: var(--zsd-jr-border);
	--zsd-cu-radius: 15px;
	--zsd-cu-font-heading: var(--zsd-jr-font-heading);
}

/* ---------------------------------------------------------------------
   Preset overrides -- nilai copy verbatim dari assets/journal-publik.css
   (satu sumber kebenaran preset, includes/journal.php), supaya Contact Us
   konsisten persis dengan Journal, Home, Shop, Product Detail, dan About
   Us untuk preset yang sama.
--------------------------------------------------------------------- */

body.zsd-halaman-contact-us.zsd-contact-us-palet-terracotta-hangat {
	--zsd-jr-bg: #fdf8f3;
	--zsd-jr-krem: #f0e0d0;
	--zsd-jr-krem-muda: #f7ebdf;
	--zsd-jr-coklat: #8a4b32;
	--zsd-jr-coklat-muda: #c08b6f;
	--zsd-jr-teks: #2e2117;
	--zsd-jr-teks-muted: #9c8672;
	--zsd-jr-border: #e8d2bd;
}

body.zsd-halaman-contact-us.zsd-contact-us-palet-zaitun-alami {
	--zsd-jr-bg: #f9faf5;
	--zsd-jr-krem: #e8ecdc;
	--zsd-jr-krem-muda: #f1f4e9;
	--zsd-jr-coklat: #5b6b4a;
	--zsd-jr-coklat-muda: #93a17f;
	--zsd-jr-teks: #262b1f;
	--zsd-jr-teks-muted: #8b937d;
	--zsd-jr-border: #dde3cd;
}

body.zsd-halaman-contact-us.zsd-contact-us-palet-abu-batu-modern {
	--zsd-jr-bg: #f7f7f5;
	--zsd-jr-krem: #e9e7e2;
	--zsd-jr-krem-muda: #f2f1ed;
	--zsd-jr-coklat: #5c5850;
	--zsd-jr-coklat-muda: #948d80;
	--zsd-jr-teks: #262420;
	--zsd-jr-teks-muted: #928d84;
	--zsd-jr-border: #dedad2;
}

body.zsd-halaman-contact-us.zsd-contact-us-aksen-terracotta { --zsd-jr-aksen: #b3572f; }
body.zsd-halaman-contact-us.zsd-contact-us-aksen-hijau-sawo { --zsd-jr-aksen: #6b7a4f; }
body.zsd-halaman-contact-us.zsd-contact-us-aksen-biru-dusty { --zsd-jr-aksen: #4f7686; }
body.zsd-halaman-contact-us.zsd-contact-us-aksen-mustard    { --zsd-jr-aksen: #c08a2e; }

body.zsd-halaman-contact-us.zsd-contact-us-font-editorial-klasik {
	--zsd-jr-font-heading: "Playfair Display", Georgia, serif;
}

body.zsd-halaman-contact-us.zsd-contact-us-font-editorial-hangat {
	--zsd-jr-font-heading: "Fraunces", Georgia, serif;
}

/* Sembunyikan judul halaman bawaan Botiga (header.entry-header) HANYA di
   Contact Us -- hero baru di bawah ini yang jadi headline utama (H1),
   supaya tidak ada duplicate title di halaman ini. Halaman lain TIDAK
   terpengaruh (selector di-scope lewat body class). */
body.zsd-halaman-contact-us .entry-header {
	display: none;
}

body.zsd-halaman-contact-us .entry-content {
	max-width: none;
}

.zsd-cu-wrap {
	max-width: 1180px;
	margin: 0 auto;
	color: var(--zsd-cu-teks);
}

.zsd-cu-wrap * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   HERO
--------------------------------------------------------------------- */

.zsd-cu-hero {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.zsd-cu-hero-teks {
	max-width: 560px;
}

.zsd-cu-eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zsd-cu-coklat);
}

.zsd-cu-headline {
	margin: 0 0 16px;
	font-family: var(--zsd-cu-font-heading);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.15;
	color: var(--zsd-cu-teks);
}

.zsd-cu-copy {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--zsd-cu-teks-muted);
	max-width: 42ch;
}

/* 2026-09-12 -- Hero Contact: foto toko/tempat usaha (sisi kanan Hero,
   menggantikan peta yang sekarang jadi section sendiri, lihat
   .zsd-cu-peta-section di bawah). Image content biasa (bukan background,
   tanpa overlay teks), aspect-ratio horizontal supaya proporsional & tidak
   pernah gepeng/kegedean, object-fit:cover + object-position:center supaya
   crop otomatis (kalau foto tidak pas rasio) aman -- tidak memotong bagian
   penting secara agresif untuk kasus umum foto etalase/tempat usaha. */
.zsd-cu-hero-foto {
	width: 100%;
	border-radius: var(--zsd-cu-radius);
	overflow: hidden;
}

.zsd-cu-hero-foto-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* Fallback rapi kalau belum ada foto (atau lagi disembunyikan) -- Hero
   otomatis balik ke 1 kolom teks penuh, BUKAN nyisain area kanan kosong
   (lihat aturan desktop >1024px di bawah yang nge-override width 38%). */

/* 2026-09-12 (2) -- "Layout Hero" (3 pilihan kurasi, LOCKED spec). 'kiri'
   (Text Left + Foto Kanan) = default, TIDAK ada class tambahan, semua rule
   di atas & di media query 1025px bawah cukup. 2 class di bawah ini CUMA
   override utk 2 pilihan lain -- markup HTML SAMA PERSIS (teks lalu foto),
   urutan visual diubah murni lewat CSS (flex row-reverse / column). */
.zsd-cu-hero-layout-tengah {
	text-align: center;
	align-items: center;
}
.zsd-cu-hero-layout-tengah .zsd-cu-hero-teks {
	max-width: 640px;
}
.zsd-cu-hero-layout-tengah .zsd-cu-copy {
	margin-left: auto;
	margin-right: auto;
}
.zsd-cu-hero-layout-tengah .zsd-cu-hero-foto {
	max-width: 720px;
	width: 100%;
}
.zsd-cu-hero-layout-tengah .zsd-cu-hero-foto-img {
	aspect-ratio: 16 / 7;
}

.zsd-cu-peta-wrap {
	position: relative;
	overflow: hidden;
	border-radius: var(--zsd-cu-radius);
	width: 100%;
}

/* DEAD CODE 2026-09-12 (2) -- ".zsd-cu-peta-section"/".zsd-cu-lokasi-card"*
   di bawah ini TIDAK dipakai lagi oleh includes/contact-us-restyle.php
   (peta sekarang jadi item compact di dalam "Toko Kami", lihat
   ".zsd-cu-info-lokasi" di bawah) -- SENGAJA TIDAK dihapus (murni jaga-jaga/
   referensi anatomi lama), tidak berdampak apa pun ke tampilan karena
   markup pemicunya sudah tidak dirender. ".zsd-cu-peta-wrap" (rule tepat di
   atas blok ini) MASIH DIPAKAI -- di-reuse apa adanya sebagai wrapper peta
   compact yang baru (lihat markup PHP: class-nya dipasang bersama
   ".zsd-cu-info-peta-compact"). ".zsd-cu-peta-frame" (rule tepat di bawah
   blok DEAD CODE ini) TIDAK dipakai lagi -- peta compact yang baru pakai
   class ".zsd-cu-info-peta-frame" sendiri (ukurannya sengaja jauh lebih
   pendek, bukan reuse tinggi 320-360px punya versi lama). */
.zsd-cu-peta-section {
	margin-top: 40px;
}

.zsd-cu-lokasi-card {
	position: absolute;
	right: 16px;
	bottom: 16px;
	max-width: 260px;
	background: var(--zsd-cu-putih-hangat);
	border: 1px solid var(--zsd-cu-border);
	border-radius: var(--zsd-cu-radius);
	padding: 14px 16px;
	box-shadow: 0 8px 24px rgba(42, 35, 29, 0.12);
}

.zsd-cu-lokasi-card-judul {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 14px;
}

.zsd-cu-lokasi-card-ikon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--zsd-cu-coklat);
}

.zsd-cu-lokasi-card-alamat {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--zsd-cu-teks-muted);
}

.zsd-cu-lokasi-card-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zsd-cu-coklat);
	text-decoration: none;
}

.zsd-cu-lokasi-card-link:hover,
.zsd-cu-lokasi-card-link:focus-visible {
	text-decoration: underline;
}

.zsd-cu-peta-frame {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

/* ---------------------------------------------------------------------
   DIVIDER
--------------------------------------------------------------------- */

.zsd-cu-divider {
	border: none;
	border-top: 1px solid var(--zsd-cu-border);
	margin: 48px 0;
}

/* ---------------------------------------------------------------------
   CONTACT CONTENT -- 1 kolom di mobile, 2 kolom mulai tablet
--------------------------------------------------------------------- */

.zsd-cu-konten {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-bottom: 8px;
}

.zsd-cu-kolom-judul {
	margin: 0 0 20px;
	font-family: var(--zsd-cu-font-heading);
	font-weight: 600;
	font-size: 22px;
	color: var(--zsd-cu-teks);
}
/* BARU 2026-09-12 -- "Deskripsi Form" (dashboard "Pengaturan Contact" >
   Form Kontak, opsional) -- kalau diisi seller, muncul di antara judul "Kirim
   Pesan" & form WPForms. */
.zsd-cu-form-deskripsi {
	margin: -12px 0 20px;
	font-size: 13.5px;
	color: var(--zsd-cu-teks-muted);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
   FORM (Kirim Pesan) -- restyle presentasi WPForms #388 saja, TIDAK
   menyentuh markup/config form itu sendiri.
--------------------------------------------------------------------- */

.zsd-cu-form-wrap .wpforms-container {
	margin: 0;
}

.zsd-cu-form-wrap .wpforms-field-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--zsd-cu-teks);
	margin-bottom: 6px;
}

.zsd-cu-form-wrap .wpforms-required-label {
	color: var(--zsd-cu-coklat);
}

.zsd-cu-form-wrap input[type='text'],
.zsd-cu-form-wrap input[type='email'],
.zsd-cu-form-wrap textarea {
	width: 100%;
	border: 1px solid var(--zsd-cu-border) !important;
	border-radius: var(--zsd-cu-radius) !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	background: #fff;
	transition: border-color 0.15s ease;
}

.zsd-cu-form-wrap textarea {
	min-height: 120px;
	resize: vertical;
}

.zsd-cu-form-wrap input[type='text']:focus,
.zsd-cu-form-wrap input[type='email']:focus,
.zsd-cu-form-wrap textarea:focus {
	border-color: var(--zsd-cu-coklat) !important;
	outline: none;
}

.zsd-cu-form-wrap input[type='text']:focus-visible,
.zsd-cu-form-wrap input[type='email']:focus-visible,
.zsd-cu-form-wrap textarea:focus-visible {
	outline: 2px solid var(--zsd-cu-coklat);
	outline-offset: 2px;
}

.zsd-cu-form-wrap .wpforms-submit {
	background: var(--zsd-cu-coklat) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--zsd-cu-radius) !important;
	padding: 14px 32px !important;
	font-size: 15px !important;
	font-weight: 600;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zsd-cu-form-wrap .wpforms-submit:hover {
	background: var(--zsd-cu-coklat-gelap) !important;
}

.zsd-cu-form-wrap .wpforms-submit:focus-visible {
	outline: 2px solid var(--zsd-cu-coklat-gelap);
	outline-offset: 2px;
}

/* FIX 2026-09-11 -- ditemukan lewat verifikasi live (Claude in Chrome, cek
   CSSOM): ada rule CSS customizer Botiga TERPISAH dari plugin ini
   (wp-content/uploads/botiga/custom-styles.css, hasil generate WordPress
   Customizer "Additional CSS" khusus halaman ini, page-id 257) yaitu
   ".page-id-257 .wpforms-form button[type=submit]" dengan background-color
   hitam plus !important -- specificity-nya (3 class + 1 elemen) LEBIH
   TINGGI dari rule di atas (2 class), jadi selalu menang terlepas dari
   token warna apa pun yang dipasang di sini. Rule customizer itu di LUAR
   file plugin ini (tersimpan di database WP lewat Customizer, bukan di
   codebase) jadi TIDAK disentuh langsung -- solusi aman di sini cukup
   menaikkan specificity selector kita supaya menang tanpa perlu mengubah
   apa pun di luar plugin. Perlu dicek ke Ferdian apakah rule customizer
   hitam itu masih perlu dipertahankan atau sisa konfigurasi lama. */
body.zsd-halaman-contact-us .zsd-cu-form-wrap .wpforms-submit[type="submit"] {
	background: var(--zsd-cu-coklat) !important;
}

body.zsd-halaman-contact-us .zsd-cu-form-wrap .wpforms-submit[type="submit"]:hover {
	background: var(--zsd-cu-coklat-gelap) !important;
}

.zsd-cu-form-catatan {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--zsd-cu-teks-muted);
}

.zsd-cu-form-catatan-ikon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--zsd-cu-teks-muted);
}

/* ---------------------------------------------------------------------
   TOKO KAMI -- editorial information list, bukan card berat.
--------------------------------------------------------------------- */

.zsd-cu-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.zsd-cu-info-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--zsd-cu-border);
}

.zsd-cu-info-item:first-child {
	padding-top: 0;
}

.zsd-cu-info-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* UBAH 2026-09-13 (LOCKED feedback Ferdian -- "jarak yang saya minta supaya
   rapi tidak ada sama sekali", ditunjukkan lewat devtools dgn inline style
   `margin-bottom: 25px` pada .zsd-cu-info-item, lihat gambar 3 batch
   feedback ke-2) -- padding+border-bottom di atas ternyata dianggap belum
   cukup renggang oleh Ferdian. Tambah margin-bottom eksplisit sesuai nilai
   yg beliau uji di devtools, di-skip pada item terakhir supaya tidak ada
   spasi ekstra menggantung di bawah daftar "Toko Kami". */
.zsd-cu-info-item:not(:last-child) {
	margin-bottom: 25px;
}

.zsd-cu-info-ikon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--zsd-cu-coklat);
}

.zsd-cu-info-teks strong {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
	color: var(--zsd-cu-teks);
}

.zsd-cu-info-teks p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--zsd-cu-teks-muted);
}

/* Jam Operasional -- WAJIB bisa menampung 1 s/d 7+ baris tanpa fixed
   height/fixed row count (lihat OPERATING HOURS FLEXIBILITY di spec).
   dl/baris pakai flow alami (flex-direction:column + gap), jadi container
   otomatis mengikuti jumlah baris di zsd_contact_us_jadwal_demo(). */

.zsd-cu-jam-judul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.zsd-cu-jam-judul strong {
	margin-bottom: 0;
}

.zsd-cu-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(42, 35, 29, 0.06);
}

.zsd-cu-status-titik {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.zsd-cu-status-buka {
	color: #1e5e3a;
}

.zsd-cu-status-tutup {
	color: #8a3b3b;
}

.zsd-cu-jam-daftar {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.zsd-cu-jam-baris {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	line-height: 1.5;
}

.zsd-cu-jam-baris dt {
	color: var(--zsd-cu-teks);
	font-weight: 500;
}

.zsd-cu-jam-baris dd {
	margin: 0;
	color: var(--zsd-cu-teks-muted);
	text-align: right;
	white-space: nowrap;
}

/* 2026-09-12 (2) -- "Lokasi Kami" compact, item TERAKHIR di dalam daftar
   "Toko Kami" (reuse ".zsd-cu-info-item" apa adanya utk anatomi
   ikon+label+konten, cuma tambah peta compact di bawah teks judulnya).
   LOCKED requirement: "map must NOT dominate the page" -- tinggi jauh lebih
   pendek dari versi section lama (320-360px), alamat TIDAK diulang di sini
   (sudah tampil di item "Alamat" di atasnya). */
.zsd-cu-info-lokasi .zsd-cu-info-teks {
	width: 100%;
}

.zsd-cu-info-peta-compact {
	margin-top: 10px;
	border: 1px solid var(--zsd-cu-border);
}

.zsd-cu-info-peta-frame {
	display: block;
	width: 100%;
	height: 160px;
	border: 0;
}

.zsd-cu-info-peta-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zsd-cu-coklat);
	text-decoration: none;
}

.zsd-cu-info-peta-link:hover,
.zsd-cu-info-peta-link:focus-visible {
	text-decoration: underline;
}

/**
 * REVISI 2026-09-13 (LOCKED feedback Ferdian, "buat button yang bagus dan
 * warna sesuai setting global untuk Buka di Maps") -- DULU cuma teks link
 * kecil bergaris bawah, sekarang tombol solid, reuse WARNA AKSEN GLOBAL
 * yang SAMA persis dipakai tombol submit "Kirim Pesan" (var(--zsd-cu-coklat),
 * asalnya dari --zsd-jr-aksen = token warna global ZENOS), BUKAN warna baru.
 * .zsd-cu-info-peta-link (link+layout dasar) TETAP dipertahankan, class
 * `zsd-cu-info-peta-btn` ini cuma menambah lapisan visual tombol.
 */
.zsd-cu-info-peta-btn {
	margin-top: 12px;
	padding: 8px 16px;
	border-radius: var(--zsd-cu-radius);
	background: var(--zsd-cu-coklat);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

/* UBAH 2026-09-13 (LOCKED feedback Ferdian -- "tulisan button buka maps bisa
   tanpa underscore/underline ngga? warna putih dong") -- root cause: theme
   Botiga punya rule `.entry-content a { text-decoration: underline; }` di
   styles.min.css dengan specificity (0,0,1,1) yang MENGALAHKAN class tunggal
   `.zsd-cu-info-peta-btn` (0,0,1,0) walau urutan file kita dimuat belakangan.
   Warna teks sebenarnya sudah benar putih (dikonfirmasi via getComputedStyle
   live di staging), tapi ditambah !important juga di atas sbg jaga-jaga
   sumber override yang sama. Pola !important ini sama persis dgn fix tombol
   submit WPForms sebelumnya utk masalah yang identik. */
.zsd-cu-info-peta-btn:hover,
.zsd-cu-info-peta-btn:focus-visible {
	background: var(--zsd-cu-coklat-gelap);
	text-decoration: none !important;
}

.zsd-cu-info-peta-btn-panah {
	transition: transform 0.15s ease;
}

.zsd-cu-info-peta-btn:hover .zsd-cu-info-peta-btn-panah {
	transform: translateX(2px);
}

/**
 * REVISI 2026-09-13 (LOCKED feedback Ferdian, "posisi section Kirim Pesan
 * harus persis referensi") -- referensi menampilkan Nama/Email/Pesan
 * BERTUMPUK penuh 1 kolom (bukan Nama|Email berdampingan seperti default
 * WPForms saat ini). Field size/layout WPForms form 388 TIDAK disentuh
 * (LOCKED spec larang) -- ini murni override tampilan CSS scoped ke wrapper
 * kita saja, sama persis polanya dengan override warna tombol submit di
 * atas.
 */
.zsd-cu-form-wrap .wpforms-field.wpforms-one-half,
.zsd-cu-form-wrap .wpforms-field.wpforms-one-third,
.zsd-cu-form-wrap .wpforms-field.wpforms-two-thirds {
	width: 100% !important;
	float: none !important;
	clear: both !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* UBAH 2026-09-13 (LOCKED feedback Ferdian -- "itu formnya jelek banget bisa
   begitu tidak rapi") -- root cause dikonfirmasi via getComputedStyle live di
   staging: field kedua pada layout 2-kolom asli WPForms (mis. Email) masih
   bawa `margin: 0 0 0 20px` (gutter kiri utk kolom kedua) yang TIDAK
   ternetralkan oleh override di atas (yg cuma set width/float/clear/
   margin-right), sehingga field jadi geser ke kanan/terlihat miring saat
   di-stack 1 kolom. `margin-left: 0 !important` di atas menutup celah ini. */

/* BARU 2026-09-13 (LOCKED feedback Ferdian batch ke-3, "border di semua
   inputan mengikuti setting global ini jelek banget") -- dikonfirmasi via
   getComputedStyle live di staging: border input/textarea WPForms form 388
   masih default CSS bawaan WPForms (`1px solid rgb(0,0,0)`, hitam pekat),
   sama sekali tidak ikut token warna global ZENOS. Field size/layout WPForms
   TETAP TIDAK disentuh (LOCKED spec) -- ini scoped CSS override, reuse
   var(--zsd-cu-border) (sudah alias ke preset palet aktif, var yg sama
   dipakai border antar item "Toko Kami") utk state normal, dan
   var(--zsd-cu-coklat) (warna aksen global, sama dgn tombol submit/"Buka di
   Maps") utk state focus supaya jelas terlihat aktif.

   UBAH 2026-09-13 (2) -- versi pertama (cuma `.zsd-cu-form-wrap ...`) TIDAK
   cukup kuat: ditemukan lewat inspeksi CSSOM live di staging bahwa ada file
   TEMA (bukan file plugin kita) `wp-content/uploads/botiga/custom-styles.css`
   (auto-generated dari custom CSS per-halaman Botiga, selector
   `.page-id-257 .wpforms-form input/textarea { border-color: #000
   !important; }`) yang di-enqueue Botiga SESUDAH CSS plugin ini & punya
   specificity SAMA/lebih tinggi, jadi menang di override kita. TIDAK boleh
   edit file tema itu langsung (di luar cakupan plugin ini) -- solusinya
   naikkan specificity selector kita sendiri dgn prefix `body.zsd-halaman-
   contact-us`, supaya menang terlepas dari urutan enqueue. */
body.zsd-halaman-contact-us .zsd-cu-form-wrap .wpforms-field-large,
body.zsd-halaman-contact-us .zsd-cu-form-wrap input[type="text"],
body.zsd-halaman-contact-us .zsd-cu-form-wrap input[type="email"],
body.zsd-halaman-contact-us .zsd-cu-form-wrap input[type="tel"],
body.zsd-halaman-contact-us .zsd-cu-form-wrap textarea {
	border: 1px solid var(--zsd-cu-border) !important;
	border-radius: var(--zsd-cu-radius) !important;
}

body.zsd-halaman-contact-us .zsd-cu-form-wrap .wpforms-field-large:focus,
body.zsd-halaman-contact-us .zsd-cu-form-wrap input[type="text"]:focus,
body.zsd-halaman-contact-us .zsd-cu-form-wrap input[type="email"]:focus,
body.zsd-halaman-contact-us .zsd-cu-form-wrap input[type="tel"]:focus,
body.zsd-halaman-contact-us .zsd-cu-form-wrap textarea:focus {
	border-color: var(--zsd-cu-coklat) !important;
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zsd-cu-coklat) 18%, transparent);
}

/* ---------------------------------------------------------------------
   TABLET 641-1024px -- hero tetap stacked (ikut visual reference), Kirim
   Pesan + Toko Kami mulai 2 kolom.
--------------------------------------------------------------------- */

@media (min-width: 641px) {
	.zsd-cu-konten {
		flex-direction: row;
		gap: 64px;
	}

	.zsd-cu-kolom-form,
	.zsd-cu-kolom-toko {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.zsd-cu-headline {
		font-size: 34px;
	}

	.zsd-cu-peta-frame {
		height: 280px;
	}

	.zsd-cu-lokasi-card {
		max-width: 220px;
		padding: 12px 14px;
	}
}

/* ---------------------------------------------------------------------
   DESKTOP >1024px -- hero text kiri + foto toko kanan (2026-09-12: dulu
   "map kanan", map sekarang section terpisah di bawah Hero, lihat
   .zsd-cu-peta-section).
--------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.zsd-cu-hero {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.zsd-cu-hero-teks {
		flex: 0 0 auto;
		width: 38%;
	}

	.zsd-cu-hero-foto {
		flex: 1 1 auto;
	}

	/* Belum ada foto (atau disembunyikan) -- teks balik ke lebar penuh
	   supaya tidak nyisain kolom kanan kosong yang keliatan rusak. */
	.zsd-cu-hero.zsd-cu-hero-tanpa-foto .zsd-cu-hero-teks {
		width: 100%;
		max-width: 640px;
	}

	/* 2026-09-12 (2) -- "Layout Hero", 2 pilihan lain (khusus desktop --
	   tablet/mobile TETAP stacked alami seperti "kiri", sesuai LOCKED spec
	   "each curated layout must remain visually coherent" tanpa perlu
	   breakpoint baru). 'kanan' = urutan visual dibalik (foto kiri, teks
	   kanan) lewat row-reverse, HTML/DOM order TIDAK berubah. 'tengah' =
	   dipaksa balik ke column (menimpa row dari rule dasar di atas) + rata
	   tengah, foto full-width di bawah teks. */
	.zsd-cu-hero.zsd-cu-hero-layout-kanan {
		flex-direction: row-reverse;
	}
	.zsd-cu-hero.zsd-cu-hero-layout-tengah {
		flex-direction: column;
	}
	.zsd-cu-hero.zsd-cu-hero-layout-tengah .zsd-cu-hero-teks {
		width: 100%;
	}

	.zsd-cu-peta-frame {
		height: 360px;
	}

	.zsd-cu-headline {
		font-size: 44px;
	}
}

/* ---------------------------------------------------------------------
   MOBILE <=640px -- alur vertikal alami, tidak sekadar mengecilkan desktop.
--------------------------------------------------------------------- */

@media (max-width: 640px) {
	.zsd-cu-headline {
		font-size: 30px;
	}

	.zsd-cu-copy {
		font-size: 15px;
	}

	.zsd-cu-peta-frame {
		height: 220px;
	}

	.zsd-cu-lokasi-card {
		right: 10px;
		bottom: 10px;
		left: 10px;
		max-width: none;
		padding: 12px 14px;
	}

	.zsd-cu-divider {
		margin: 36px 0;
	}

	.zsd-cu-konten {
		gap: 40px;
	}

	.zsd-cu-form-wrap .wpforms-submit {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.zsd-halaman-contact-us .zsd-cu-wrap * {
		transition: none !important;
	}
}