/* style.css — Sistem Desain Global Terpadu Platform Undangan Digital
   Konsep: Editorial Studio & Modern Vibrant (Mobile-First, Kohesif untuk Publik, Pelanggan & Admin) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --primary: #465945;
  --primary-hover: #344333;
  --primary-soft: #EDF2EC;
  --primary-border: #C5D3C2;
  --primary-ring: rgba(70, 89, 69, 0.18);
  --accent: #9C7D52;
  --accent-hover: #86683F;
  --accent-soft: #F6F1E8;
  --accent-border: #DDCDB8;
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --surface-alt: #F4EFEA;
  --text: #1C1B19;
  --text-muted: #6E6A63;
  --border: #E6E1D8;
  --danger: #C83E3B;
  --danger-soft: #FDECEC;
  --success: #286646;
  --success-soft: #E6F4EC;
  --warning: #B4690E;
  --warning-soft: #FEF5E7;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(28, 27, 25, 0.04);
  --shadow-md: 0 10px 28px -6px rgba(28, 27, 25, 0.07);
  --shadow-lg: 0 20px 40px -10px rgba(28, 27, 25, 0.12);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover {
  color: var(--primary-hover);
}

/* Container & Layout */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px;
}

.container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

.container-narrow {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 16px;
}

/* Header Standar (Template Undangan tetap putih, Halaman Aplikasi bergaya Studio Editorial) */
header {
  background: linear-gradient(135deg, #2d3b2c 0%, #465945 100%);
  color: #fff;
  padding: 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

header p {
  margin: 6px 0 0;
  opacity: 0.9;
  font-size: 0.93rem;
}

body:not([class*="tpl-"]) > header:not(.editor-topbar) {
  background: linear-gradient(180deg, #F4EFEA 0%, #FAF8F5 100%);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: 26px 16px;
}

body:not([class*="tpl-"]) > header:not(.editor-topbar) h1 {
  color: var(--text);
  font-size: clamp(1.55rem, 3.5vw, 2.05rem);
  font-weight: 700;
}

body:not([class*="tpl-"]) > header:not(.editor-topbar) p {
  color: var(--text-muted);
  opacity: 1;
}

/* Navigasi Topbar Global & Dashboard (Unified Studio Style) */
.site-navbar,
.dashboard-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.site-navbar-inner,
.dashboard-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.site-brand,
.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.site-brand:hover,
.dashboard-brand:hover {
  color: var(--primary);
}

.site-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-serif);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.site-brand small,
.dashboard-brand small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 1px;
}

.site-nav-links,
.dashboard-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.site-nav-links a:not(.btn),
.dashboard-links a:not(.btn) {
  font-size: 0.86rem;
  font-weight: 600;
  color: #3C3935;
  padding: 7px 12px;
  border-radius: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.site-nav-links a:not(.btn):hover,
.site-nav-links a:not(.btn).active,
.dashboard-links a:not(.btn):hover,
.dashboard-links a:not(.btn).active {
  color: var(--primary);
  background: var(--primary-soft);
}

/* Kartu & Panel */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  overflow: hidden;
  /* break-word, bukan anywhere: kata dan nomor telepon tidak lagi terpotong
     di tengah ("Pelangga / n", "0812000 / 00001"). */
  overflow-wrap: break-word;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.card-header > * {
  min-width: 0;
}

.card-header h2, .card-header h3 {
  margin: 0;
}

/* Kotak URL Publik (Rapi & Tidak Melebar Keluar Kartu) */
.public-link-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 10px 0;
  max-width: 100%;
  box-sizing: border-box;
}

.public-link-url {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.public-link-icon {
  flex-shrink: 0;
}

.public-link-url a {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
}

.public-link-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* FASE 4 (A-01): hijau WA digelapkan agar teks putih lulus kontras 4,5:1
   (#25D366 = 1,98 GAGAL; #075E54 = 7,67 LULUS; hover #064E3B = 9,72). */
.btn-wa-share {
  background: #075E54 !important;
  color: #ffffff !important;
  border-color: #075E54 !important;
  font-weight: 700;
}

.btn-wa-share:hover {
  background: #064E3B !important;
  color: #ffffff !important;
}

.order-card-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

/* Grid Responsif */
.grid {
  display: grid;
  gap: 16px;
}

.grid > * {
  min-width: 0;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Statistik / Metric Cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0;
}

@media (min-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card .stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.2;
}

.stat-card .stat-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Form Elements */
label {
  display: block;
  margin: 12px 0 5px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #292524;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid #d6d3d1;
  border-radius: var(--radius-sm);
  /* 16px: di bawah angka ini browser HP (terutama iOS) memperbesar halaman
     otomatis saat kolom difokuskan, dan teks terasa kecil di Android. */
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

/* Fokus keyboard yang jelas (aksesibilitas). Tidak mengganggu klik/tap. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  /* Kolom isian sudah punya cincin fokus sendiri; hindari cincin ganda. */
  outline: none;
}

input[type="color"] {
  width: 64px;
  height: 40px;
  padding: 3px;
  border: 1px solid #d6d3d1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: #fff;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.form-section-title {
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.form-help {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Buttons */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.3;
}

button:hover, .btn:hover {
  background: var(--primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--primary-ring);
}

.btn-secondary {
  background: #57534e;
  color: #fff;
}

.btn-secondary:hover {
  background: #44403c;
  color: #fff;
}

.btn-outline {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}

/* Tombol aksi utama bernuansa emas (dipakai untuk "Buat Pesanan",
   "Publikasikan Undangan", dan "Terbitkan Template"). Sebelumnya kelas ini
   dipakai di PHP tetapi belum pernah didefinisikan, sehingga aksi utama
   tampil sama seperti tombol sekunder dan kehilangan prioritas visual. */
.btn-gold {
  background: #8A6B40;
  color: #ffffff;
  border-color: #8A6B40;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(138, 107, 64, 0.22);
}

.btn-gold:hover {
  background: #745830;
  border-color: #745830;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(138, 107, 64, 0.28);
}

.btn-gold:active {
  background: #634A27;
  border-color: #634A27;
}

/* Tombol selebar induknya, dipakai pada aksi utama di layar HP. */
.btn-block {
  display: flex;
  width: 100%;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.84rem;
  border-radius: 6px;
}

/* FASE 4 (D-02): ikon SVG pengganti emoji dekoratif di UI inti. */
.ico {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex: none;
}

/* FASE 4B (cek tombol): tombol nonaktif HARUS tetap terbaca — teks putih di
   atas abu #a8a29e hanya ~2,4:1 (cacat yang sama seperti tombol Filter:
   teks terang di atas latar terang). Teks gelap di atas abu ini ~6,9:1. */
.btn[disabled], button[disabled] {
  background: #a8a29e;
  color: #1c1917;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Alerts & Notifications */
.alert {
  background: var(--warning-soft);
  border: 1px solid #f59e0b;
  color: #78350f;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 14px 0;
}

.error {
  background: var(--danger-soft);
  border: 1px solid #ef4444;
  color: #991b1b;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 14px 0;
}

.success {
  background: var(--success-soft);
  border: 1px solid #22c55e;
  color: #14532d;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 14px 0;
}

.small {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Badges */
/* Badges — diselaraskan dengan palet sage/emas aplikasi (bukan hijau emerald
   bawaan template lama) agar status terbaca sebagai satu keluarga warna. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
  white-space: nowrap;
}

.badge-success {
  background: #E8F1EA;
  color: #23543A;
  border: 1px solid #BFD8C7;
}

.badge-warning {
  background: #FBF1DF;
  color: #7A4A0B;
  border: 1px solid #EBD3A9;
}

.badge-danger {
  background: #FBEAE8;
  color: #92302C;
  border: 1px solid #EDC3BF;
}

.badge-primary {
  background: var(--primary-soft);
  color: var(--primary-hover);
  border: 1px solid var(--primary-border);
}

.badge-info {
  background: #EAF0F4;
  color: #2C4A5E;
  border: 1px solid #C2D3DE;
}

.badge-neutral {
  background: var(--surface-alt);
  color: #4A4640;
  border: 1px solid #E0D9CE;
}

/* FASE 3 (C-06, DRAFT): lencana USP. Kata-kata menunggu tanda tangan
   pemilik + keselarasan dengan Syarat; lihat LOG Fase 3. */
.usp-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: normal;
  background: #F6F1E8;
  color: #6B5327;
  border: 1px solid #DDCDB8;
}

/* Tables */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

th {
  background: var(--surface-alt);
  font-weight: 700;
  color: #44403c;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tr:hover td {
  background: rgba(250, 249, 246, 0.7);
}

/* Navigasi Responsif Mobile (Horizontal Swipe untuk Link Navbar) */
/* Navigasi pada layar sempit: satu baris yang bisa digeser, bukan 3–4 baris
   menu yang menghabiskan tinggi layar. */
@media (max-width: 768px) {
  .site-navbar-inner,
  .dashboard-nav-inner {
    padding: 10px 14px;
    gap: 8px;
  }
  .site-nav-links,
  .dashboard-links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .site-nav-links::-webkit-scrollbar,
  .dashboard-links::-webkit-scrollbar {
    display: none;
  }
  .site-nav-links > form,
  .dashboard-links > form {
    flex-shrink: 0;
  }
}

/* Tabs */
.tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.tab-btn {
  background: var(--surface-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn.active,
.tab-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  margin: 16px 0;
}

.empty-state h3 {
  margin: 8px 0 6px;
  font-size: 1.15rem;
}

/* Galeri & QR */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f5f5f4;
  aspect-ratio: 4 / 3;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.gallery-item img:hover {
  transform: scale(1.04);
}

.qr-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* Lightbox Modal */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox-backdrop.open {
  display: flex;
}

.lightbox-backdrop img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: #fff;
  color: #111;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}

/* Footer */
.site-footer {
  background: #1c1917;
  color: #d6d3d1;
  padding: 48px 16px 28px;
  margin-top: 56px;
}

.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  .site-footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.site-footer h4 {
  color: #fff;
  margin: 0 0 12px;
  font-size: 1rem;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: 8px;
}

.site-footer a {
  color: #a8a29e;
  font-size: 0.9rem;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer-bottom {
  max-width: 1180px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid #292524;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: #78716c;
}

@media (max-width: 640px) {
  .card {
    padding: 16px;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stat-card .stat-value {
    font-size: 1.4rem;
  }
  th, td {
    padding: 8px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   FASE 1: SMARTPHONE MOCKUP FRAME UNTUK PRATINJAU & UNDANGAN DI DESKTOP
   ========================================================================== */

/* Sembunyikan ornamen mockup pada layar HP asli atau di dalam iframe editor */
.phone-mockup-statusbar,
.phone-mockup-homebar,
.desktop-mockup-card {
  display: none;
}

.phone-mockup-viewport {
  display: contents;
}

body.is-iframe-embed .container {
  padding: 14px 14px 28px;
}

body.is-iframe-embed header {
  padding: 18px 14px;
}

@media (min-width: 768px) {
  html.desktop-mockup-html {
    background: radial-gradient(circle at 20% 15%, #1e293b 0%, #0f172a 60%, #090d16 100%);
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  body.has-phone-mockup {
    width: 390px;
    max-width: 100%;
    height: min(740px, calc(100vh - 32px));
    margin: 0 auto;
    border-radius: 42px;
    border: 10px solid #1e293b;
    box-shadow:
      0 0 0 2px #334155,
      0 28px 70px -12px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .phone-mockup-viewport {
    display: block;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
  }

  body.has-phone-mockup .phone-mockup-viewport > main.container {
    width: 100%;
    max-width: 100%;
    padding: 16px 14px 24px;
  }

  body.has-phone-mockup .phone-mockup-viewport > header .container {
    max-width: 100%;
    padding: 4px 12px;
  }

  /* Status Bar & Notch di bagian atas layar HP */
  .phone-mockup-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 8px;
    background: #0f172a;
    color: #f8fafc;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
    flex-shrink: 0;
    z-index: 80;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .phone-status-time {
    width: 48px;
  }

  .phone-status-notch {
    width: 96px;
    height: 20px;
    background: #020617;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08);
  }

  .phone-notch-speaker {
    width: 32px;
    height: 4px;
    border-radius: 99px;
    background: #1e293b;
  }

  .phone-notch-cam {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #38bdf8 0%, #0f172a 70%);
  }

  .phone-status-icons {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    opacity: 0.9;
  }

  /* Home Indicator Bar di bagian bawah layar HP */
  .phone-mockup-homebar {
    display: flex;
    justify-content: center;
    padding: 10px 0 12px;
    margin-top: auto;
  }

  .phone-mockup-homebar span {
    width: 124px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.28;
  }

  /* Posisi tombol musik melayang agar tetap di dalam bingkai HP pada Desktop */
  body.has-phone-mockup .floating-music-btn {
    right: calc(50% - 185px);
    bottom: 48px;
  }
}

/* Panel Informasi Mengambang di Samping Kiri Mockup (Layar Lebar >= 1100px) */
@media (min-width: 1100px) {
  .desktop-mockup-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    top: 36px;
    left: max(24px, calc(50% - 540px));
    width: 285px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 22px;
    color: #f8fafc;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    z-index: 100;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }

  .desktop-mockup-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
  }

  .desktop-mockup-card h3 {
    margin: 2px 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.01em;
    animation: none !important;
  }

  .desktop-mockup-price {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbbf24;
  }

  .desktop-mockup-desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #cbd5e1;
  }

  .desktop-mockup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
  }

  .desktop-mockup-actions .btn {
    width: 100%;
    border-radius: 12px !important;
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 11px 16px;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
  }

  .desktop-mockup-actions .btn-outline {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e2e8f0 !important;
    box-shadow: none;
  }

  .desktop-mockup-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
  }
}

/* ==========================================================================
   FASE 1 (P0): LIVE PREVIEW EDITOR SPLIT-SCREEN (STUDIO & MODERN VIBRANT)
   ========================================================================== */

body.editor-body {
  background: var(--bg);
  color: var(--text);
}

.editor-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.editor-topbar-inner {
  max-width: 1420px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.editor-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}

.editor-back-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary);
}

.editor-title-meta h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.editor-title-meta span {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

.live-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}

.live-sync-pill.is-syncing {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-color: #DDCDB8;
}

.live-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(70, 89, 69, 0.2);
  animation: pulseLiveDot 2s infinite;
}

.live-sync-pill.is-syncing .live-sync-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(156, 125, 82, 0.22);
}

@keyframes pulseLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.9); }
}

.editor-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Layout Utama Split-Screen */
.editor-workspace {
  max-width: 1420px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.editor-form-pane {
  min-width: 0;
  max-width: 100%;
}

.editor-sec-mobile-footer {
  display: none;
}

.savebar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

@media (min-width: 1024px) {
  .editor-workspace {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* Navigasi Step / Bagian Cepat */
.editor-step-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 16px;
  scrollbar-width: none;
}

.editor-step-nav::-webkit-scrollbar {
  display: none;
}

.editor-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.editor-step-pill:hover,
.editor-step-pill.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.editor-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

/* FASE 4B (cek tombol): angka di pil aktif/hovER harus lulus 4,5:1 — putih
   di atas putih 0,22 hanya 4,32:1 (GAGAL). Putih 0,12 di atas hijau primer
   memberi ~5,5:1 dengan bahasa visual yang sama (lingkaran tembus pandang). */
.editor-step-pill.active .editor-step-num,
.editor-step-pill:hover .editor-step-num {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Kartu Bagian Form */
.editor-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 84px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.editor-section-card:focus-within {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
}

.editor-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.editor-section-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.editor-section-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.editor-section-head p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.color-picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-picker-group input[type="color"] {
  width: 44px;
  height: 41px;
  flex-shrink: 0;
  border-radius: 8px;
  padding: 2px;
}

.color-picker-group input[type="text"] {
  flex: 1;
}

/* Sticky Save Bar di Bawah Form */
.editor-sticky-savebar {
  position: sticky;
  bottom: 14px;
  z-index: 40;
  background: rgba(28, 27, 25, 0.94);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.editor-sticky-savebar .btn-save-main {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.editor-sticky-savebar .btn-save-main:hover {
  background: var(--primary-hover);
}

/* Panel Kanan: Sticky Smartphone Mockup */
.editor-preview-pane {
  position: sticky;
  top: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.editor-preview-toolbar {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.preview-mode-switch {
  display: inline-flex;
  background: var(--surface-alt);
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.preview-mode-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.preview-mode-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  transform: none;
  box-shadow: none;
}

.preview-mode-btn.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.editor-phone-shell {
  width: 100%;
  max-width: 380px;
  height: min(690px, calc(100vh - 140px));
  min-height: 480px;
  background: #ffffff;
  border-radius: 42px;
  border: 10px solid #1e293b;
  box-shadow:
    0 0 0 2px #334155,
    0 24px 50px -12px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.editor-phone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px 7px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.73rem;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
}

.editor-phone-iframe {
  width: 100%;
  flex: 1;
  border: none;
  background: #faf9f6;
}

.editor-phone-homebar {
  background: #0f172a;
  padding: 7px 0 9px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.editor-phone-homebar span {
  width: 110px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

/* Tombol Floating & Accordion untuk Layar HP/Tablet (< 1024px) */
.editor-mobile-fab,
.mobile-preview-close-btn {
  display: none;
}

@media (max-width: 1023px) {
  .editor-topbar-inner {
    padding: 8px 12px;
    gap: 6px;
  }

  .editor-brand-group {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .editor-back-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .editor-title-meta {
    min-width: 0;
  }

  .editor-title-meta h1 {
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .editor-title-meta span {
    font-size: 0.7rem;
    display: block;
  }

  .live-sync-pill {
    padding: 4px 9px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .editor-topbar-actions {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    gap: 6px;
  }

  .editor-topbar-actions::-webkit-scrollbar {
    display: none;
  }

  .editor-topbar-actions .btn-sm {
    padding: 5px 10px;
    font-size: 0.76rem;
    white-space: nowrap;
  }

  .editor-desktop-save-btn {
    display: none !important;
  }

  .editor-workspace {
    padding: 12px 12px 92px;
    gap: 16px;
  }

  .editor-section-card {
    padding: 16px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    scroll-margin-top: 96px;
    overflow: hidden;
  }

  .editor-section-head {
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .editor-section-head h2 {
    font-size: 1.08rem;
    line-height: 1.25;
  }

  .editor-section-head p {
    font-size: 0.76rem;
  }

  .editor-section-card.is-collapsed-mobile > *:not(.editor-section-head) {
    display: none !important;
  }

  .editor-section-card.is-collapsed-mobile .editor-section-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .editor-section-card.is-collapsed-mobile .editor-section-head p {
    display: none;
  }

  .editor-section-head::after {
    content: "▾";
    margin-left: auto;
    font-size: 1.05rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .editor-section-card.is-collapsed-mobile .editor-section-head::after {
    transform: rotate(-90deg);
  }

  .editor-sec-mobile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* Sticky Save Bar menjadi Fixed Native Bottom Bar di Android/iPhone */
  .editor-sticky-savebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    border-radius: 16px 16px 0 0;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(28, 27, 25, 0.96);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.25);
  }

  .savebar-info-text {
    display: none !important;
  }

  .savebar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .editor-mobile-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 10px;
    font-size: 0.84rem;
    font-weight: 700;
    width: 100%;
  }

  .editor-sticky-savebar .btn-save-main {
    width: 100%;
    padding: 11px 10px;
    font-size: 0.84rem;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
  }

  .editor-preview-pane {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(8px);
    padding: 12px;
    justify-content: center;
    overflow-y: auto;
  }

  .editor-preview-pane.mobile-open {
    display: flex;
  }

  .mobile-preview-close-btn {
    display: inline-flex;
  }

  .editor-phone-shell {
    height: calc(100vh - 96px);
    max-height: 680px;
  }
}

/* Di Layar Smartphone Android / iPhone (< 768px): Live Preview tampil Full-Screen tanpa Bezel HP Ganda */
@media (max-width: 767px) {
  .hide-xs-text {
    display: none;
  }

  .editor-preview-pane {
    padding: 0;
    background: var(--bg);
    justify-content: flex-start;
  }

  .editor-preview-toolbar {
    max-width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }

  .editor-phone-shell {
    max-width: 100%;
    width: 100%;
    height: calc(100vh - 54px);
    max-height: none;
    min-height: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .editor-phone-statusbar,
  .editor-phone-homebar {
    display: none;
  }
}

/* ==========================================================================
   MOBILE STICKY BOTTOM CTA BAR PADA PRATINJAU KATALOG (preview.php di HP)
   ========================================================================== */
.mobile-preview-sticky-bar {
  display: none;
}

@media (max-width: 1099px) {
  body.has-phone-mockup {
    padding-bottom: 74px;
  }

  .mobile-preview-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 140;
    background: rgba(28, 27, 25, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    font-family: var(--font-sans);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  }

  .mobile-preview-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mobile-preview-meta strong {
    font-size: 0.86rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-preview-meta span {
    font-size: 0.78rem;
    color: #EBD4A8;
    font-weight: 700;
  }

  .mobile-preview-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .mobile-preview-btns .btn {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 8px 13px !important;
    font-size: 0.8rem !important;
  }

  .mobile-preview-btns .btn-outline {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
  }
}

/* ==========================================================================
   WIZARD PEMESANAN 3 LANGKAH CEPAT (order.php — MOBILE-FIRST)
   ========================================================================== */
.wizard-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

/* Fase 2 O-05: indikator langkah menempel di bawah layar pada HP. */
@media (max-width: 640px) {
  .wizard-progress {
    position: sticky;
    bottom: 12px;
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
  }
}

.wizard-step-indicator,
.wizard-step-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.wizard-step-indicator:hover,
.wizard-step-btn:hover {
  border-color: var(--primary);
  color: var(--text);
  background: var(--surface);
  transform: none;
  box-shadow: none;
}

.wizard-step-indicator.active,
.wizard-step-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.wizard-step-indicator.done,
.wizard-step-btn.done {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary);
}

.wizard-step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 800;
  flex-shrink: 0;
}

.wizard-step-indicator.active .wizard-step-circle,
.wizard-step-btn.active .wizard-step-circle {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.wizard-step-pane {
  display: none;
  animation: wizardFadeIn 0.22s ease;
}

.wizard-step-pane.active {
  display: block;
}

@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wizard-footer-nav,
.wizard-nav-bar {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.optional-accordion-box {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.optional-accordion-trigger {
  width: 100%;
  background: var(--surface-alt);
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.optional-accordion-trigger:hover {
  background: var(--primary-soft);
  color: var(--primary);
  transform: none;
  box-shadow: none;
}

.optional-accordion-chevron {
  transition: transform 0.2s ease;
}

.optional-accordion-box.open .optional-accordion-chevron {
  transform: rotate(180deg);
}

.optional-accordion-content {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.optional-accordion-box.open .optional-accordion-content {
  display: block;
}

/* ==========================================================================
   RESPONSIVE USER DASHBOARD, GUEST CARDS & RSVP CARDS (ANDROID / IPHONE)
   ========================================================================== */
.guest-cards-mobile,
.rsvp-cards-mobile {
  display: none;
  gap: 12px;
}

.guest-card-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guest-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.guest-card-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text);
}

.guest-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.rsvp-card-message {
  background: var(--surface-alt);
  border-left: 3px solid var(--primary);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  color: var(--text);
  font-style: italic;
}

.guest-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guest-card-actions > .btn,
.guest-card-actions > button {
  flex: 1 1 auto;
}

/* Fase 2 T-01: menu overflow (⋯) untuk aksi Hapus tamu. */
.guest-overflow {
  display: inline-block;
  position: relative;
}

.guest-overflow > summary {
  list-style: none;
  cursor: pointer;
}

.guest-overflow > summary::-webkit-details-marker {
  display: none;
}

.guest-overflow-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  font-size: 0.85rem;
}

.guest-link-short {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Fase 2 T-01: kartu tamu dipakai hingga 1100px (bukan hanya 640px). */
@media (max-width: 1100px) {
  .guest-page .guest-cards-mobile {
    display: grid;
  }

  .guest-page .desktop-only-table {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .guest-cards-mobile,
  .rsvp-cards-mobile {
    display: grid;
  }

  .desktop-only-table {
    display: none !important;
  }

  .wizard-step-indicator,
  .wizard-step-btn {
    padding: 9px 8px;
    font-size: 0.75rem;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 4px;
  }

  .wizard-footer-nav .btn,
  .wizard-footer-nav button {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Tata Letak Tombol Kartu Undangan di Dashboard Pelanggan pada Layar Android/iPhone */
  .order-card-footer {
    padding-top: 12px;
  }

  .public-link-box {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 10px;
  }

  .public-link-url {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .public-link-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
  }

  .public-link-actions > * {
    width: 100%;
    padding: 7px 6px !important;
    font-size: 0.78rem !important;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   GENERATOR KUTIPAN & DOA PERNIKAHAN SIAP PAKAI (quotes.js)
   ========================================================================== */
.quote-picker-drawer {
  display: none;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 10px 0 14px;
  animation: wizardFadeIn 0.2s ease;
}

.quote-picker-drawer.open {
  display: block;
}

.quote-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .quote-picker-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.quote-card-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

.quote-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-card-excerpt {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}

/* Perbaikan mobile (audit): kotak tautan publik tidak lagi punya ruang kosong tinggi
   (flex-basis 200px berubah jadi tinggi saat kolom), petunjuk geser untuk menu yang
   bisa digeser, dan area sentuh minimal 40px di navbar dashboard/admin/editor. */
@media (max-width: 768px) {
  .public-link-url {
    flex: 0 0 auto;
  }
  .editor-step-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .dashboard-links a,
  .dashboard-links button,
  .site-nav-links a,
  .site-nav-links button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .editor-step-pill {
    min-height: 40px;
    flex-shrink: 0;
  }
}
/* ==========================================================================
   KARTU RINGKASAN PESANAN + VALIDASI INLINE (order.php — perbaikan audit 2026-10-26, prioritas 3)
   ========================================================================== */
.order-summary-card {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface-alt, #f8f5f0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 18px;
}
.order-summary-thumb {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.order-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.order-summary-name {
  font-size: 1.02rem;
}
.order-summary-meta {
  color: var(--text-muted);
  font-size: 0.86rem;
}
.order-summary-price,
.order-summary-total {
  font-size: 0.92rem;
}
/* Fase 2 PAY-02: 4 langkah pembayaran visual. */
.pay-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--surface);
}

.pay-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.pay-step-body {
  min-width: 0;
  flex: 1;
}

.pay-step-body h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.pay-step-body p {
  margin: 4px 0;
}

/* Fase 2 O-03: pratinjau foto client-side di form order. */
.photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.photo-preview:empty {
  display: none;
}

.photo-preview-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.wizard-error-summary {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  color: #7f1d1d;
  font-size: 0.92rem;
}
.wizard-error-summary ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.wizard-error-link {
  background: none;
  border: none;
  padding: 0;
  color: #991b1b;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.field-invalid {
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);
}
.field-error-msg {
  color: #b91c1c;
  font-size: 0.84rem;
  margin: 4px 0 10px;
}

/* ==========================================================================
   AKSI KARTU UNDANGAN DI DASHBOARD PELANGGAN (hierarki, bukan dinding tombol)
   Satu aksi utama yang jelas, aksi sering dipakai di baris kedua, dan aksi
   jarang/destruktif dilipat ke <details> supaya kartu tetap ringkas di HP.
   ========================================================================== */
.order-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.order-actions > .btn {
  width: 100%;
  justify-content: center;
}

/* Aksi utama memenuhi satu baris penuh di HP */
.order-action-primary {
  grid-column: 1 / -1;
  padding: 11px 14px;
  font-size: 0.92rem;
}

/* Aksi pelengkap yang sendirian di baris terakhir grid HP, supaya tidak
   menyisakan sel kosong yang membuat kartu terlihat pincang. */
.order-action-wide {
  grid-column: 1 / -1;
}

@media (min-width: 641px) {
  .order-action-wide {
    grid-column: auto;
  }
}

.order-publish-band {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}

.order-publish-band p {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #6B5334;
}

.order-more {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 4px;
}

.order-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
}

.order-more > summary::-webkit-details-marker {
  display: none;
}

.order-more > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.order-more[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.order-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 8px;
}

.order-more-grid > form,
.order-more-grid > .btn {
  width: 100%;
  margin: 0;
}

.order-more-grid .btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 641px) {
  .order-actions {
    display: flex;
    flex-wrap: wrap;
  }
  .order-actions > .btn {
    width: auto;
  }
  .order-action-primary {
    order: -1;
  }
  .order-more-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .order-more-grid > form,
  .order-more-grid > .btn {
    width: auto;
  }
}

/* Angka nominal pada instruksi pembayaran. */
.amount-figure {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PELACAK TAHAPAN PESANAN (Lacak Pesanan & Instruksi Pembayaran)
   Menjawab "saya sekarang di mana dan apa langkah berikutnya".
   ========================================================================== */
.status-steps {
  display: grid;
  gap: 0;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.status-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 20px 0;
  min-height: 44px;
}

.status-step:last-child {
  padding-bottom: 0;
}

/* Garis penghubung antar tahap */
.status-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  background: var(--border);
}

.status-step.is-done:not(:last-child)::before {
  background: var(--primary-border);
}

.status-step-marker {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text-muted);
}

.status-step.is-done .status-step-marker {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.status-step.is-current .status-step-marker {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #6B5334;
}

.status-step-body {
  min-width: 0;
  padding-top: 2px;
}

.status-step-title {
  display: block;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text);
  line-height: 1.35;
}

.status-step.is-pending .status-step-title {
  color: var(--text-muted);
  font-weight: 600;
}

.status-step-desc {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* Daftar rincian kunci–nilai yang aman di layar sempit (pengganti tabel 2 kolom) */
.detail-list {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row dt {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.detail-row dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Tabel lebar: gulir terkontrol di dalam komponennya, bukan di halaman. */
.table-wrap-wide > table {
  min-width: 720px;
}

.table-scroll-note {
  display: none;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 8px;
}

@media (max-width: 768px) {
  .table-scroll-note {
    display: block;
  }
}

/* ==========================================================================
   ANTREAN TINDAKAN DASHBOARD ADMIN
   ========================================================================== */
.action-queue {
  display: grid;
  gap: 10px;
}

.action-queue-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.action-queue-item:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--text);
}

.action-queue-item.is-urgent {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.action-queue-count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  min-width: 2.2ch;
  text-align: center;
  color: var(--primary);
  flex-shrink: 0;
}

.action-queue-item.is-urgent .action-queue-count {
  color: #7A4A0B;
}

.action-queue-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.action-queue-text strong {
  font-size: 0.95rem;
  line-height: 1.35;
}

.action-queue-text span {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 2px;
}

.action-queue-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 1.1rem;
}

/* ==========================================================================
   PANEL LIPAT UNTUK FITUR YANG JARANG DIPAKAI
   Dipakai misalnya untuk "Tautkan Pesanan Lama" di dashboard pelanggan: tetap
   mudah ditemukan lewat judulnya, tetapi tidak memakan layar setiap hari.
   ========================================================================== */
.panel-disclosure {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 16px 0;
  overflow: hidden;
}

.panel-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  list-style: none;
}

.panel-disclosure > summary::-webkit-details-marker {
  display: none;
}

.panel-disclosure > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.panel-disclosure[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.panel-disclosure > summary:hover {
  background: var(--primary-soft);
}

.panel-disclosure-body {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .panel-disclosure > summary {
    padding: 14px 16px;
    font-size: 0.9rem;
  }
  .panel-disclosure-body {
    padding: 4px 16px 16px;
  }
}

/* ==========================================================================
   TABEL ADMIN SEBAGAI KARTU DI HP
   Tabel 6–8 kolom tidak bisa dibaca di layar 360px tanpa menggeser ke samping
   berkali-kali. Di HP setiap baris menjadi satu kartu dengan label kolom di
   kiri (diambil dari atribut data-label pada <td>), tanpa markup ganda.
   ========================================================================== */
@media (max-width: 700px) {
  .table-cards {
    overflow-x: visible;
  }

  /* Batalkan min-width tabel lebar: dalam mode kartu tabel tidak lagi digeser. */
  .table-cards.table-wrap > table {
    min-width: 0;
    width: 100%;
  }

  .table-cards table,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }

  .table-cards tr.table-head {
    display: none;
  }

  .table-cards tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
  }

  .table-cards tr:hover td {
    background: transparent;
  }

  .table-cards td {
    display: block;
    border: none;
    padding: 5px 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  /* Label di atas nilai. Sengaja bukan dua kolom: sel yang berisi <br> atau
     beberapa elemen inline (mis. "Nama <br> Nomor WA") akan pecah menjadi
     beberapa item grid dan nilainya jatuh ke kolom label. Dengan alur blok,
     isi sel tetap utuh apa pun markup-nya. */
  .table-cards td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1px;
  }

  /* Sel tanpa label (mis. kolom tombol aksi) memakai satu kolom penuh. */
  .table-cards td:not([data-label])::before {
    content: none;
  }

  .table-cards td.actions-cell {
    display: block;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed var(--border);
  }

  .table-cards td .btn-group {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   PENJAGA UMUM: gerak, hover, dan cetak
   ========================================================================== */
@media (max-width: 768px) {
  /* Target sentuh: tombol kecil dan tautan daftar tidak lagi setipis 17px.
     (Tautan di tengah paragraf sengaja dibiarkan apa adanya.) */
  .btn-sm {
    min-height: 36px;
  }

  .site-footer a,
  .site-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .site-footer li {
    margin-bottom: 2px;
  }

  .empty-state {
    padding: 32px 16px;
  }
}

@media (hover: none) {
  /* Di layar sentuh, efek angkat saat hover menempel setelah diketuk. */
  .btn:hover,
  button:hover,
  .template-showcase-card:hover,
  .testimonial-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   POLES TAMPILAN v3 (27 Okt 2026) — keterbacaan, tabel, dan responsif.
   Lapisan ini sengaja di paling bawah supaya menimpa aturan lama tanpa
   mengubah keputusan desain sebelumnya (nav bawah HP, katalog 2 kolom HP).
   ========================================================================== */

/* 1) Akar masalah tabel hancur: .card memakai overflow-wrap:anywhere sehingga
   kolom tabel boleh menyusut sampai 1 huruf per baris. Di tabel, kembalikan
   ke pemenggalan kata normal dan biarkan area tabel yang bisa digeser. */
table, th, td {
  overflow-wrap: normal;
  word-break: normal;
}
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.table-wrap table { min-width: 620px; }
.table-wrap table.is-stackable { min-width: 0; }
th { white-space: nowrap; }
td { min-width: 76px; line-height: 1.45; }
td a, td .btn, td .badge { white-space: nowrap; }
td > .badge { max-width: 100%; }
tr:last-child td { border-bottom: 0; }
td form { margin: 0; }

/* 2) Tabel menjadi kartu bertumpuk di HP (label diisi otomatis oleh ui-enhance.js) */
@media (max-width: 640px) {
  .table-wrap { border: 0; background: transparent; overflow: visible; }
  table.is-stackable, table.is-stackable tbody { display: block; width: 100%; }
  table.is-stackable tr.stack-head { display: none; }
  table.is-stackable tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 14px;
    margin: 0 0 12px;
    box-shadow: var(--shadow-sm);
  }
  table.is-stackable td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    text-align: right;
    font-size: 0.92rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  table.is-stackable td:last-child { border-bottom: 0; }
  table.is-stackable .cell-val { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: break-word; }
  table.is-stackable .cell-val .badge { white-space: normal; }
  table.is-stackable .cell-val > * { max-width: 100%; }
  table.is-stackable td::before {
    content: attr(data-label);
    flex: 0 0 34%;
    text-align: left;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  table.is-stackable td:not([data-label])::before,
  table.is-stackable td[data-label=""]::before { display: none; }
  table.is-stackable td:not([data-label]),
  table.is-stackable td[data-label=""] { justify-content: flex-end; }
  table.is-stackable tr:hover td { background: transparent; }
}

/* 3) Keterbacaan umum */
body { font-size: 16px; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid rgba(70, 89, 69, 0.45); outline-offset: 2px; }
.small { font-size: 0.88rem; }

/* 4) Kolom grid kartu: jangan menyempit di bawah lebar nyaman, lalu turun ke 1 kolom */
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* 5) HP: area sentuh >= 44px, input 16px (mencegah zoom otomatis iOS) */
@media (max-width: 768px) {
  .btn, button.btn, .btn-sm, a.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-sm { min-height: 44px; }
  input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="date"], input[type="time"],
  input[type="url"], select, textarea {
    font-size: 16px;
    min-height: 46px;
  }
  input[type="file"] { width: 100%; font-size: 0.9rem; }
  .btn-group { gap: 8px; }
  .btn-group .btn { flex: 1 1 calc(50% - 8px); }
  header .container, header .container-wide { padding-top: 22px; padding-bottom: 22px; }
  header h1 { font-size: clamp(1.45rem, 6vw, 1.8rem); }
  header p { font-size: 0.95rem; }
  .container, .container-wide { padding-left: 14px; padding-right: 14px; }
  .card-header { flex-wrap: wrap; gap: 8px 12px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-label { font-size: 0.72rem; }
  .stat-card .stat-sub { font-size: 0.78rem; }
}

/* Nav admin/dashboard di HP: satu baris yang bisa digeser, tidak memakan 2-3 baris */
@media (max-width: 768px) {
  .site-nav-links, .dashboard-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    margin: 0 -14px;
    padding: 0 14px 6px;
  }
  .site-nav-links a, .dashboard-links a { white-space: nowrap; flex: 0 0 auto; padding: 8px 12px; }
}

/* PC lebar: batasi lebar baris teks & beri ruang bernapas */
@media (min-width: 1100px) {
  header h1 { font-size: 2.2rem; }
  .stat-card .stat-value { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Fase 1B P0-03/P0-04 — Bar bawah pratinjau di layar sangat sempit.
   Bar bawah kini tampil sampai <1100px (panel samping mulai 1100px),
   sehingga tidak ada lagi celah 768-1099 tanpa CTA. Di ≤480px bar
   disusun bertumpuk (meta di atas, tombol membungkus di bawah) supaya
   tiga tombol (Katalog, Buka Undangan, Pesan) muat tanpa luber, dan
   padding bawah halaman dinaikkan mengikuti tinggi bar.
   ========================================================================== */
@media (max-width: 480px) {
  body.has-phone-mockup {
    padding-bottom: 128px;
  }
  .mobile-preview-sticky-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .mobile-preview-meta {
    width: 100%;
  }
  .mobile-preview-btns {
    flex-wrap: wrap;
  }
  .mobile-preview-btns .btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   FASE 4B — Dashboard, Editor, dan Admin
   ========================================================================== */

/* X-01: tabel template menjadi kartu di bawah 1100px. Aturan kartu ini
   mengikuti pola .table-cards yang sudah ada (label kolom dari atribut
   data-label), tapi ambang batasnya 1100px sesuai audit, dan hanya untuk
   tabel template (class .table-cards-1100) agar tabel lain tidak berubah. */
.tpl-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: end;
  /* Pembungkus .cell-val ui-enhance.js memberi text-align:right di kartu;
     form edit harus rata kiri. */
  text-align: left;
}
.tpl-edit-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.tpl-edit-form input {
  width: 100%;
}
.tpl-edit-wide,
.tpl-edit-actions {
  grid-column: 1 / -1;
}
.tpl-edit-actions {
  text-align: right;
}
@media (max-width: 1100px) {
  .tpl-table-card .table-scroll-note {
    display: none;
  }
  .table-cards-1100 {
    overflow-x: visible;
  }
  .table-cards-1100.table-wrap > table {
    min-width: 0;
    width: 100%;
  }
  .table-cards-1100 table,
  .table-cards-1100 tbody,
  .table-cards-1100 tr,
  .table-cards-1100 td {
    display: block;
    width: 100%;
  }
  .table-cards-1100 tr.table-head {
    display: none;
  }
  .table-cards-1100 tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .table-cards-1100 tr:hover td {
    background: transparent;
  }
  .table-cards-1100 td {
    display: block;
    border: none;
    padding: 5px 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .table-cards-1100 td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1px;
  }
  .table-cards-1100 td:not([data-label])::before {
    content: none;
  }
  /* Baris edit menjadi kartu sendiri; form di dalamnya tanpa bingkai ganda. */
  .table-cards-1100 tr.tpl-edit-row {
    padding-top: 4px;
  }
  /* Baris edit HARUS selebar kartu penuh: tanpa ini, pola is-stackable
     (≤640px, label kiri/nilai kanan) menjepit form ke kolom kanan saja.
     Selektor ini (0,2,2) mengalahkan table.is-stackable td (0,1,2). */
  .table-cards-1100 tr.tpl-edit-row td {
    display: block;
    /* Is-stackable memberi text-align:right pada td; form edit butuh label
       rata kiri seperti form biasa. */
    text-align: left;
  }
  .table-cards-1100 tr.tpl-edit-row td::before {
    margin-bottom: 8px;
  }
}
@media (max-width: 600px) {
  .tpl-edit-form {
    grid-template-columns: 1fr;
  }
}

/* X-03 + X-07: menu dashboard/admin yang bisa dibuka di HP. Di desktop
   tombol tidak tampil dan menu tetap baris biasa. Di HP (dan hanya bila JS
   aktif — tanpa JS, baris geser lama tetap tampil sebagai cadangan), menu
   disembunyikan sampai tombol dibuka menjadi panel vertikal penuh, sehingga
   "Pengaturan"/"Keluar" terjangkau tanpa menggeser horizontal. */
.dashboard-menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .dashboard-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-left: auto;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }
  html.js .dashboard-links {
    display: none;
  }
  html.js .dashboard-links.open {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    gap: 4px;
    padding: 10px 0 2px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html.js .dashboard-links.open a,
  html.js .dashboard-links.open button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  html.js .dashboard-links.open > form {
    width: 100%;
  }
}

/* X-04: editor di HP — topbar lebih lapang (pil sinkronisasi hanya titik di
   layar sangat sempit) dan tab langkah tidak terpotong: snap + ruang akhir
   agar pil terakhir bisa digeser sampai terlihat penuh. */
@media (max-width: 480px) {
  .live-sync-pill #live-sync-text {
    display: none;
  }
  .live-sync-pill {
    padding: 4px 7px;
  }
  .editor-step-pill {
    padding: 7px 11px;
    font-size: 0.78rem;
  }
}
.editor-step-nav {
  scroll-snap-type: x proximity;
  scroll-padding-right: 12px;
  padding-right: 12px;
}
.editor-step-pill {
  scroll-snap-align: start;
}
.editor-topbar-actions {
  scroll-snap-type: x proximity;
}
.editor-topbar-actions > * {
  scroll-snap-align: start;
}

/* X-06: strip kepercayaan di sekitar form login/registrasi (klaim yang
   sudah disetujui: USP D2 + verifikasi manual D4, tanpa janji waktu dan
   tanpa angka karangan). */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.trust-strip .trust-check {
  color: var(--primary);
  font-weight: 700;
}