/*
Theme Name: OOH Directory Theme
Theme URI: https://lecatompessy.com
Author: Rio Lecatompessy
Author URI: https://lecatompessy.com
Description: Theme untuk Direktori Vendor Media OOH. Dipasangkan dengan plugin "OOH Directory Core" — theme ini hanya menangani tampilan, seluruh data & logika berada di plugin. Arah desain: senja kota dengan papan reklame menyala — navy gelap sebagai "langit", aksen amber sebagai "cahaya signage".
Version: 2.4.1
Requires PHP: 7.4
Text Domain: ooh-directory-theme
*/

/*
Catatan font: daftar @import Google Fonts TIDAK statis di sini lagi.
Font untuk tiap elemen (Judul Situs, H1, H2, H3, Menu, Meta, Body, Widget)
diatur dari wp-admin > Appearance > Pengaturan Font, lalu di-enqueue +
di-override lewat inline <style> oleh functions.php/font-settings.php.
Variabel di bawah ini adalah NILAI DEFAULT (dipakai kalau admin belum
mengubah pengaturan apa pun).
*/
:root {
	--font-site-title: 'Anton', sans-serif;
	--font-h1: 'Anton', sans-serif;
	--font-h2: 'Anton', sans-serif;
	--font-h3: 'Anton', sans-serif;
	--font-menu: 'Inter', sans-serif;
	--font-meta: 'Inter', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-widget: 'Inter', sans-serif;

	--ink-navy: #101B33;
	--ink-navy-soft: #1E2D4F;
	--amber: #FFB020;
	--amber-dark: #E0982B;
	--paper: #F7F5F1;
	--ink: #1A1A1A;
	--slate: #5B6472;
	--line: #E7E3DA;
	--available: #2F9E63;
	--booked: #D64545;
	--radius: 6px;
}

* { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	color: var(--ink);
	line-height: 1.6;
	margin: 0;
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ink-navy);
	line-height: 1.15;
}
h1 { font-family: var(--font-h1); }
h2 { font-family: var(--font-h2); }
h3 { font-family: var(--font-h3); }

a { color: var(--ink-navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
}

.oohd-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header ---------- */
.oohd-site-header {
	background: var(--ink-navy);
	padding: 18px 0;
	border-bottom: 3px solid var(--amber);
}
.oohd-site-header .oohd-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.oohd-site-header a.oohd-logo {
	color: #fff;
	font-family: var(--font-site-title);
	font-size: 22px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.oohd-logo-img {
	max-height: 44px;
	width: auto;
	display: block;
}
.oohd-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.35);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	padding: 7px 13px;
	border-radius: var(--radius);
	cursor: pointer;
}
.oohd-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.oohd-nav li {
	list-style: none;
	margin: 0;
}
.oohd-nav a {
	color: #C9D2E3;
	text-decoration: none;
	margin-left: 22px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--font-menu);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.oohd-nav a:hover {
	color: var(--amber);
	border-color: var(--amber);
}

/* ---------- Hero (halaman pencarian) ---------- */
.oohd-hero {
	background: linear-gradient(160deg, var(--ink-navy) 0%, var(--ink-navy-soft) 100%);
	padding: 56px 0 90px;
	position: relative;
	overflow: hidden;
}
.oohd-hero::after {
	/* garis cakrawala kota, elemen dekoratif tipis */
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--amber) 20%, var(--amber) 80%, transparent);
	opacity: 0.6;
}
.oohd-hero h1 {
	color: #fff;
	font-size: clamp(30px, 5vw, 46px);
	margin: 0 0 10px;
}
.oohd-hero h1 span { color: var(--amber); }
.oohd-hero p {
	color: #C9D2E3;
	font-size: 16px;
	max-width: 560px;
	margin: 0;
}

/* ---------- Counter/Insight (halaman pencarian) ---------- */
/* Grid 4 kolom sejajar (bukan flex-wrap) — supaya ke-4 kotak SELALU
   sebaris dalam satu baris di layar desktop/tablet, tidak ada yang
   "terlempar" ke baris bawah sendirian seperti sebelumnya. Baru susut
   jadi 2 kolom di layar sangat sempit (HP) lewat media query di bawah,
   supaya tetap enak dibaca — bukan dipaksa 4 kolom sempit yang jadi
   kepotong di HP.
*/
.oohd-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 30px;
	max-width: 900px;
}
.oohd-stat {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 18px 20px;
	border-top: 3px solid var(--amber);
	min-width: 0; /* supaya angka besar tidak memaksa kolom melebar & merusak grid */
}
@media (max-width: 640px) {
	.oohd-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}
.oohd-stat-number {
	font-family: var(--font-h2);
	font-size: 34px;
	color: #fff;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.oohd-stat-number--text {
	font-size: 22px;
	color: var(--amber);
}
.oohd-stat-label {
	margin-top: 4px;
	font-size: 12.5px;
	color: #C9D2E3;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Kartu pencarian "melayang" menimpa batas bawah hero, seperti papan
   dipasang di rangka billboard. */
.oohd-search-panel {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(16, 27, 51, 0.22);
	padding: 22px 24px;
	margin: -56px 0 40px;
	position: relative;
	z-index: 2;
	border-top: 4px solid var(--amber);
}

/* Halaman tanpa hero (fallback title band) */
.oohd-page-title {
	background: var(--ink-navy);
	padding: 30px 0;
	margin-bottom: 32px;
}
.oohd-page-title h1 {
	color: #fff;
	margin: 0;
	font-size: 28px;
}
.oohd-page-title p {
	color: #C9D2E3;
	margin: 8px 0 0;
}

.oohd-content { padding-bottom: 60px; }

/* Notice teaser publik */
.oohd-notice {
	background: #FFF6E6;
	border: 1px solid #F0D8A0;
	border-radius: var(--radius);
	padding: 12px 16px;
	font-size: 14px;
	margin-bottom: 24px;
	color: #6B4F14;
}
.oohd-notice a { color: var(--ink-navy); font-weight: 700; }

/* ---------- Form pencarian (dirender plugin, style diperkuat di sini) ---------- */
.oohd-search-form,
.oohd-vendor-search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.oohd-search-form input[type="text"],
.oohd-vendor-search input[type="text"],
.oohd-search-form select {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--paper);
}
.oohd-search-form input[type="text"] { flex: 1 1 260px; }
.oohd-vendor-search input[type="text"] { flex: 1 1 320px; }
.oohd-search-form select { flex: 0 1 190px; }

.oohd-search-form button,
.oohd-vendor-search button {
	background: var(--amber);
	color: var(--ink-navy);
	border: none;
	border-radius: var(--radius);
	padding: 11px 26px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.oohd-search-form button:hover,
.oohd-vendor-search button:hover {
	background: var(--amber-dark);
	transform: translateY(-1px);
}

/* ---------- Grid kartu — signature: "menyala" saat disentuh ---------- */
.oohd-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 22px;
}

/* ---------- Klien Kami (showcase publik) ---------- */
.oohd-klien-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
}
.oohd-klien-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	height: 100px;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.oohd-klien-logo-card:hover {
	box-shadow: 0 8px 22px rgba(255, 176, 32, 0.22);
	transform: translateY(-3px);
}
/* Klien tanpa website tercatat — logo sengaja dirender sebagai <div>
   (bukan link), style ini kasih petunjuk visual kalau memang tidak
   bisa diklik (tanpa efek hover, kursor normal). */
.oohd-klien-logo-card--static {
	cursor: default;
	opacity: 0.85;
}
.oohd-klien-logo-card--static:hover {
	box-shadow: none;
	transform: none;
}
.oohd-klien-logo-card img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(20%);
}
.oohd-klien-logo-fallback {
	font-family: var(--font-title);
	font-weight: 700;
	color: var(--ink-navy);
	text-align: center;
	font-size: 14px;
}
.oohd-klien-detail {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
	text-align: center;
	max-width: 420px;
	margin: 0 0 24px;
}
.oohd-klien-detail img {
	max-width: 100%;
	max-height: 220px;
	object-fit: contain;
}

/* ---------- Dashboard Klien ---------- */
.oohd-dashboard-notice {
	background: #F0F6FF;
	border: 1px solid #C9DCF5;
	border-radius: var(--radius);
	padding: 12px 16px;
	margin-bottom: 24px;
	font-size: 14px;
	color: var(--ink-navy);
}

/* Chip identitas klien di dalam pita judul navy — logo/inisial + nama,
   terinspirasi dari avatar+nama di topbar mockup "Saji Track", tapi
   pakai warna amber (bukan biru) supaya tetap senada dengan situs. */
.oohd-dash-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}
.oohd-dash-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--amber);
	color: var(--ink-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-h3);
	font-size: 16px;
	flex-shrink: 0;
	overflow: hidden;
}
.oohd-dash-avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}
.oohd-dash-identity-text strong {
	display: block;
	color: #fff;
	font-size: 14px;
}
.oohd-dash-identity-text span {
	display: block;
	color: #C9D2E3;
	font-size: 12px;
}

/* KPI 4 kolom — pengganti .oohd-insight-grid lama (3 kolom), sekarang
   pakai istilah yang sama dengan Daftar Klien admin & insight halaman
   depan (Titik Media / Jenis Media / Format Media / Provinsi) supaya
   konsisten di seluruh situs. */
.oohd-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}
@media (max-width: 780px) {
	.oohd-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.oohd-kpi-card {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--amber);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.oohd-kpi-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.oohd-kpi-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}
.oohd-kpi-label {
	font-size: 12px;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-family: var(--font-meta);
}
.oohd-kpi-number {
	font-family: var(--font-h2);
	font-size: 30px;
	color: var(--ink-navy);
	line-height: 1.1;
}

/* Grid 2 kolom untuk section dashboard (breakdown Jenis Media & Format
   Media berdampingan) — pola sama seperti "Campaign Progress" +
   "Upcoming Activities" berdampingan di mockup, direskin ke kartu putih
   ber-aksen amber. */
.oohd-dash-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 12px;
}
@media (max-width: 900px) {
	.oohd-dash-grid-2 { grid-template-columns: 1fr; }
}
.oohd-dash-section {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 24px;
}
.oohd-dash-section h3 {
	margin: 0 0 16px;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-title);
	font-weight: 700;
	color: var(--ink);
}

/* Breakdown sebagai progress bar — pengganti .oohd-insight-breakdown
   (daftar teks polos) supaya proporsinya kelihatan sekilas pandang,
   terinspirasi dari "Media Types" di mockup Saji Track. */
.oohd-progress-breakdown {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.oohd-progress-row-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	margin-bottom: 6px;
	gap: 8px;
}
.oohd-progress-row-top strong {
	color: var(--ink-navy);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oohd-progress-row-top span {
	color: var(--slate);
	flex-shrink: 0;
	font-size: 12px;
}
.oohd-progress-track {
	height: 8px;
	background: var(--paper);
	border-radius: 20px;
	overflow: hidden;
}
.oohd-progress-bar {
	height: 100%;
	background: var(--amber);
	border-radius: 20px;
}
.oohd-dash-empty {
	color: var(--slate);
	font-size: 13.5px;
}

.oohd-insight-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}
.oohd-insight-card {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--amber);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.oohd-insight-number {
	font-family: var(--font-h2);
	font-size: 30px;
	color: var(--ink-navy);
}
.oohd-insight-label {
	font-size: 12.5px;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 4px;
}
.oohd-insight-breakdown {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	max-width: 480px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.oohd-insight-breakdown li {
	display: flex;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.oohd-insight-breakdown li:last-child { border-bottom: none; }
.oohd-insight-breakdown strong { color: var(--ink-navy); }

.oohd-dashboard-form {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	max-width: 520px;
	margin-bottom: 20px;
}
.oohd-dashboard-form label {
	display: block;
	margin-bottom: 14px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--slate);
}
.oohd-dashboard-form input[type="text"],
.oohd-dashboard-form input[type="email"],
.oohd-dashboard-form input[type="url"],
.oohd-dashboard-form input[type="password"],
.oohd-dashboard-form textarea {
	width: 100%;
	padding: 9px 12px;
	margin-top: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
}
.oohd-dashboard-form button {
	background: var(--amber);
	color: var(--ink-navy);
	border: none;
	padding: 11px 22px;
	border-radius: var(--radius);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13px;
	cursor: pointer;
}
.oohd-dashboard-form button:hover { background: var(--amber-dark); }
.oohd-btn-secondary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
}

/* ---------- Form login klien (halaman khusus) ---------- */
.oohd-klien-login-form label {
	display: block;
	margin-bottom: 14px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--slate);
}
.oohd-klien-login-form input {
	width: 100%;
	padding: 10px 12px;
	margin-top: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
}
.oohd-klien-login-form button {
	width: 100%;
	background: var(--amber);
	color: var(--ink-navy);
	border: none;
	padding: 12px;
	border-radius: var(--radius);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	cursor: pointer;
}
.oohd-login-error {
	background: #FDECEC;
	border: 1px solid #F3B4B4;
	color: #A33;
	padding: 10px 14px;
	border-radius: var(--radius);
	font-size: 13.5px;
	margin-bottom: 16px;
}
.oohd-login-success {
	background: #EAF7EE;
	border: 1px solid #B7E3C4;
	color: #226B3A;
	padding: 10px 14px;
	border-radius: var(--radius);
	font-size: 13.5px;
	margin-bottom: 16px;
}
.oohd-card {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--ink-navy);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-top-color 0.18s ease;
}
.oohd-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 28px rgba(255, 176, 32, 0.28), 0 4px 10px rgba(16,27,51,0.12);
	border-top-color: var(--amber);
}
.oohd-card img {
	width: 100%;
	height: 156px;
	object-fit: cover;
	display: block;
	background: var(--paper);
}
.oohd-card-body { padding: 14px 16px 18px; }
.oohd-card-body h3 {
	margin: 0 0 8px;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-title);
	font-weight: 700;
	color: var(--ink);
}
.oohd-card-meta {
	font-size: 12.5px;
	color: var(--slate);
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-family: var(--font-meta);
}
.oohd-card-size {
	font-size: 13px;
	color: var(--ink);
	margin: 0;
	font-weight: 600;
}

/* ---------- Daftar Klien (Admin) — badge insight kecil ---------- */
.oohd-mini-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.oohd-mini-stat {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 4px 9px;
	font-size: 11.5px;
	color: var(--slate);
	white-space: nowrap;
}
.oohd-mini-stat strong {
	color: var(--ink-navy);
	margin-right: 4px;
	font-family: var(--font-meta);
}
/* Di tampilan List, badge insight tampil di bawah judul, area body-nya
   perlu sedikit lebih lebar supaya 4 badge muat tanpa terlalu padat. */
.oohd-list-item .oohd-mini-stats {
	margin-top: 8px;
}

.oohd-empty, .oohd-loading {
	color: var(--slate);
	padding: 24px 0;
	font-size: 14px;
}

.oohd-search-pagination {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.oohd-search-pagination .page-numbers {
	display: inline-block;
	padding: 8px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink-navy);
	font-size: 13px;
	font-weight: 600;
}
.oohd-search-pagination .page-numbers.current {
	background: var(--ink-navy);
	color: #fff;
	border-color: var(--ink-navy);
}
.oohd-search-pagination .page-numbers.dots {
	border: none;
	padding: 8px 2px;
	color: var(--slate);
	font-weight: 400;
}

/* Badge jenis media — seperti plakat rambu kecil */
.oohd-badge {
	display: inline-block;
	background: #fff;
	border: 1.5px solid var(--ink-navy);
	color: var(--ink-navy);
	font-size: 11.5px;
	font-family: var(--font-meta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 5px 11px;
	border-radius: 999px;
	margin: 0 6px 6px 0;
}
/* Varian untuk badge Format/Sub-jenis — sengaja beda warna (aksen amber)
   dari badge Jenis Media (navy) supaya dua kelompok taksonomi ini tetap
   gampang dibedakan sekilas pandang walau sama-sama bentuk pil. */
.oohd-badge--format {
	border-color: var(--amber);
	background: #FFF8EC;
}

/* Kelompok badge di halaman detail Titik Media — label kecil di atas
   + baris badge yang wrap otomatis. Ditumpuk vertikal (Jenis Media,
   lalu Format/Sub-jenis) supaya konsisten rapi di PC maupun HP tanpa
   perlu aturan responsif tambahan. */
.oohd-badge-group { margin-bottom: 12px; }
.oohd-badge-group-label {
	display: block;
	font-size: 11px;
	color: var(--slate);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--font-meta);
	margin-bottom: 6px;
}
.oohd-badge-row {
	display: flex;
	flex-wrap: wrap;
}

/* ---------- Halaman detail ---------- */
.oohd-detail-header {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}
.oohd-detail-meta { flex: 1; min-width: 260px; }

/* ---------- Galeri Foto (halaman detail Titik Media) ---------- */
.oohd-gallery {
	flex: 0 0 340px;
	max-width: 100%;
}
.oohd-gallery-main {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--paper);
	cursor: zoom-in;
}
.oohd-gallery-main img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}
.oohd-gallery-empty { cursor: default; }
.oohd-gallery-empty img { object-fit: contain; padding: 10px; background: #fff; }
.oohd-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.oohd-gallery-thumb-link {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--line);
	cursor: zoom-in;
}
.oohd-gallery-thumb-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lightbox overlay */
.oohd-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(16, 27, 51, 0.92);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.oohd-lightbox-overlay.is-open { display: flex; }
.oohd-lightbox-img {
	max-width: 88vw;
	max-height: 86vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.oohd-lightbox-close,
.oohd-lightbox-prev,
.oohd-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,0.12);
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
}
.oohd-lightbox-close { top: 20px; right: 20px; }
.oohd-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.oohd-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.oohd-lightbox-close:hover,
.oohd-lightbox-prev:hover,
.oohd-lightbox-next:hover { background: var(--amber); color: var(--ink-navy); }

/* ---------- Tombol Google Maps ---------- */
.oohd-gmaps-wrap { margin: 12px 0 30px; }
.oohd-gmaps-button {
	display: inline-block;
	border: 1.5px solid var(--ink-navy);
	color: var(--ink-navy);
	background: #fff;
	padding: 10px 20px;
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.03em;
	transition: background 0.15s ease, color 0.15s ease;
}
.oohd-gmaps-button:hover {
	background: var(--ink-navy);
	color: #fff;
}

.oohd-detail-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
}
.oohd-detail-table td {
	padding: 13px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}
.oohd-detail-table tr:last-child td { border-bottom: none; }
.oohd-detail-table td:first-child {
	width: 230px;
	font-weight: 700;
	color: var(--slate);
	text-transform: uppercase;
	font-size: 12px;
	font-family: var(--font-meta);
	letter-spacing: 0.03em;
}

.oohd-pdf-button {
	display: inline-block;
	margin-top: 22px;
	background: var(--amber);
	color: var(--ink-navy);
	padding: 12px 24px;
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	transition: background 0.15s ease, transform 0.1s ease;
}
.oohd-pdf-button:hover {
	background: var(--amber-dark);
	color: var(--ink-navy);
	transform: translateY(-1px);
}

.oohd-vendor-box {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--ink-navy);
	border-radius: var(--radius);
	padding: 20px 24px;
	margin-top: 34px;
}
.oohd-vendor-box h3 {
	margin-top: 0;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-title);
	font-weight: 700;
}

/* Pengganti kotak "Vendor Pemilik" untuk non-admin — sinyal popularitas
   ("dipakai N klien") tanpa membocorkan identitas vendor/klien. */
.oohd-klien-usage {
	background: #F0F6FF;
	border: 1px solid #C9DCF5;
	border-radius: var(--radius);
	padding: 14px 18px;
	margin-top: 34px;
	font-size: 14px;
	color: var(--ink-navy);
}
.oohd-klien-usage strong {
	color: var(--amber-dark);
	font-size: 16px;
}
/* Versi admin — daftar nama klien (bukan cuma jumlah), muncul di
   bawah kotak "Vendor Pemilik" (bukan menggantikannya, beda dari
   versi publik/member yang cuma tampil jumlah). */
.oohd-klien-usage--admin {
	margin-top: 16px;
}
.oohd-klien-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.oohd-klien-list li {
	margin-bottom: 4px;
}
.oohd-klien-list a {
	color: var(--ink-navy);
	font-weight: 600;
	text-decoration: underline;
}

/* ---------- Locked placeholder (dirender plugin) ---------- */
.oohd-locked {
	display: inline-block;
	background: #fff;
	border: 1.5px dashed #B9BFCB;
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 13.5px;
	color: var(--slate);
}
.oohd-locked a {
	color: var(--ink-navy);
	font-weight: 700;
	text-decoration: underline;
}

/* Pesan netral saat data memang belum diisi (BUKAN karena belum login)
   — sengaja dibedakan dari .oohd-locked supaya tidak terlihat seperti
   ajakan login untuk user yang sebenarnya sudah member. */
.oohd-map-empty {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px 14px;
	font-size: 13.5px;
	color: var(--slate);
}

/* ---------- Peta ---------- */
.oohd-map {
	width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
}
.oohd-map-caption {
	font-size: 12.5px;
	color: var(--slate);
	margin-top: 10px;
}
.oohd-map-note {
	font-size: 12.5px;
	color: var(--slate);
	margin-top: 10px;
	font-style: italic;
}

/* Peta satu titik di halaman detail Titik Media — sengaja dibuat lebih
   ringkas (tinggi & zoom moderat) dibanding peta direktori, supaya nyaman
   dilihat tanpa mendominasi halaman. */
.oohd-map-single {
	width: 100%;
	height: 260px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	margin: 10px 0 30px;
}

/* ---------- Login / Profil / Request Akses ---------- */
.oohd-auth-form {
	max-width: 400px;
	margin: 0 auto;
	background: #fff;
	padding: 32px;
	border-radius: 10px;
	border: 1px solid var(--line);
	border-top: 4px solid var(--amber);
}
.oohd-auth-form label {
	display: block;
	margin-bottom: 16px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--slate);
}
.oohd-auth-form input[type="text"],
.oohd-auth-form input[type="password"],
.oohd-auth-form input[type="email"] {
	width: 100%;
	padding: 10px 12px;
	margin-top: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
}
.oohd-auth-form button,
.oohd-auth-form input[type="submit"] {
	width: 100%;
	background: var(--amber);
	color: var(--ink-navy);
	border: none;
	padding: 12px;
	border-radius: var(--radius);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.oohd-auth-form button:hover,
.oohd-auth-form input[type="submit"]:hover {
	background: var(--amber-dark);
}

.oohd-request-form p { margin-bottom: 14px; }
.oohd-request-form input,
.oohd-request-form textarea {
	width: 100%;
	max-width: 480px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 9px 12px;
	font-family: inherit;
	font-size: 14px;
}
.oohd-request-form button {
	background: var(--amber);
	color: var(--ink-navy);
	border: none;
	padding: 11px 24px;
	border-radius: var(--radius);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	cursor: pointer;
}

/* ---------- Widget Area (Footer) ---------- */
.oohd-widget-area {
	background: var(--ink-navy-soft);
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 34px 0;
}
.oohd-widget-area .oohd-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.oohd-widget-area .widget-title,
.oohd-widget-area h2 {
	font-family: var(--font-widget);
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
}
.oohd-widget-area .widget,
.oohd-widget-area {
	font-family: var(--font-widget);
	color: #C9D2E3;
	font-size: 13.5px;
}
.oohd-widget-area a { color: #C9D2E3; }
.oohd-widget-area a:hover { color: var(--amber); }
.oohd-widget-area ul { list-style: none; margin: 0; padding: 0; }
.oohd-widget-area ul li { margin-bottom: 8px; }

/* ---------- Footer ---------- */
.oohd-site-footer {
	background: var(--ink-navy);
	color: #8E9BB5;
	text-align: center;
	padding: 26px 0;
	font-size: 12.5px;
}

/* ---------- Responsif / Burger Menu ---------- */
@media (max-width: 768px) {
	.oohd-nav-toggle { display: inline-block; }

	.oohd-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		gap: 4px;
		margin-top: 14px;
	}
	.oohd-nav.is-open { display: flex; }
	.oohd-nav a { margin: 0; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }

	.oohd-gallery { flex: 1 1 100%; }
	.oohd-search-panel { margin-top: -30px; }

	/* Tabel detail Titik Media (Alamat, Latitude, Ukuran Media, dst) —
	   di layar sempit, kolom label 230px menyisakan terlalu sedikit
	   ruang untuk value, jadi teks panjang (mis. Alamat Titik) terpaksa
	   bertumpuk sempit tidak enak dibaca. Diubah jadi "block": label
	   tampil di atas (kecil, huruf besar seperti biasa), value di
	   bawahnya full-width. Berlaku otomatis untuk SEMUA baris — jadi
	   kalau nanti ada field baru yang ditambahkan ke tabel ini, tidak
	   perlu ada penyesuaian tambahan lagi di sini. */
	.oohd-detail-table,
	.oohd-detail-table tbody,
	.oohd-detail-table tr {
		display: block;
		width: 100%;
	}
	.oohd-detail-table td {
		display: block;
		width: auto;
		padding: 10px 16px;
	}
	.oohd-detail-table td:first-child {
		width: auto;
		padding-bottom: 4px;
		border-bottom: none;
	}
	.oohd-detail-table td:last-child {
		padding-top: 0;
	}
}

/* ---------- Direktori Vendor: toggle Grid/List ---------- */
.oohd-view-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 22px;
	font-size: 13px;
	color: var(--slate);
}
.oohd-view-toggle a {
	text-decoration: none;
	color: var(--ink-navy);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 6px 12px;
	font-weight: 600;
}
.oohd-view-toggle a.is-active {
	background: var(--ink-navy);
	color: #fff;
	border-color: var(--ink-navy);
}

.oohd-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.oohd-list-item {
	display: flex;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--ink-navy);
	border-radius: var(--radius);
	padding: 14px 18px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.18s ease, border-left-color 0.18s ease;
}
.oohd-list-item:hover {
	box-shadow: 0 8px 22px rgba(255, 176, 32, 0.22);
	border-left-color: var(--amber);
}
.oohd-list-thumb {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper);
}
.oohd-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.oohd-list-body h3 {
	margin: 0 0 6px;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-title);
	font-weight: 700;
	color: var(--ink);
}
.oohd-list-body p {
	margin: 0;
	font-size: 13.5px;
	color: var(--slate);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.oohd-card, .oohd-pdf-button, .oohd-search-form button, .oohd-vendor-search button {
		transition: none;
	}
}