/**
 * Komponen kartu harga, daftar fitur, langkah, & FAQ — dipakai bersama oleh
 * page-templates/layanan-pbg-slf.php dan page-templates/pricelist-desain.php.
 * Di-enqueue kondisional (lihat functions.php), tidak load di halaman lain.
 */

/* ---------- Kartu ---------- */
.pz-card { background: var(--bone); border: 1px solid var(--line); border-radius: 8px; padding: 2rem; position: relative; }
.pz-tag { display:inline-flex; align-items:center; gap:6px; font-size:0.6875rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--terracotta); border:1px solid var(--terracotta); border-radius:100px; padding:4px 12px; }
.pz-card-highlight { border-color: var(--terracotta); border-width: 2px; padding-top: 2.25rem; }
.pz-badge { position:absolute; top:-0.8125rem; left:2rem; background:var(--terracotta); color:#fff; font-size:0.6875rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:4px 12px; border-radius:100px; }
.pz-price { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:0.875rem; color:var(--ash); }
.pz-price b { display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:1.5rem; font-weight:800; color:var(--ink); margin-top:0.125rem; }
.pz-note { margin-top:2rem; background:var(--bone); border:1px solid var(--line); border-left:3px solid var(--terracotta); border-radius:6px; padding:1.25rem 1.5rem; font-size:0.875rem; color:var(--ash); line-height:1.65; }
.pz-note strong { color:var(--ink); }

/* ---------- Daftar fitur ---------- */
.pz-list { list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.625rem; }
.pz-list li { font-size:0.875rem; color:var(--ink); padding-left:1.375rem; position:relative; line-height:1.5; }
.pz-list li::before { content:""; position:absolute; left:0; top:0.5em; width:8px; height:8px; background:var(--terracotta); border-radius:50%; }

/* ---------- Langkah ---------- */
.pz-step { border-top: 2px solid var(--line); padding-top: 1.25rem; }
.pz-step-num { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.5rem; color:var(--terracotta); }

/* ---------- FAQ ---------- */
.pz-faq { margin-top: 2rem; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.pz-faq details { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.pz-faq summary { cursor:pointer; font-weight:600; font-size:1rem; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.pz-faq summary::-webkit-details-marker { display:none; }
.pz-faq summary::after { content:"+"; font-size:1.5rem; color:var(--terracotta); font-weight:400; line-height:1; margin-left:1rem; }
.pz-faq details[open] summary::after { content:"–"; }
.pz-faq p { margin-top:0.875rem; color:var(--ash); font-size:0.9375rem; line-height:1.65; max-width:44rem; }

/* ================================================================
 * Pricelist per m² (page-templates/pricelist-desain.php)
 * ================================================================ */

/* Grid kartu paket: 1 kolom (HP) → 2 kolom (tablet) → 3 kolom (laptop ke atas).
   6 paket inti = 2 baris × 3 kolom; 3 layanan tambahan = 1 baris × 3 kolom. */
.pz-grid-3 { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width: 768px)  { .pz-grid-3 { grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1024px) { .pz-grid-3 { grid-template-columns:repeat(3, 1fr); } }

/* Kartu kolom: tombol selalu menempel di dasar kartu walau panjang daftar fitur beda-beda. */
.pz-card-col { display:flex; flex-direction:column; }
.pz-cta { margin-top:auto; padding-top:1.75rem; }
.pz-cta .btn-primary, .pz-cta .btn-secondary { width:100%; justify-content:center; }

/* Harga per m²: angka besar + satuan sebaris. */
.pz-price-line { display:flex; align-items:baseline; gap:0.375rem; flex-wrap:wrap; }
.pz-unit { font-size:0.875rem; font-weight:500; color:var(--ash); }
.pz-price-quote b { font-size:1.125rem; line-height:1.3; }

/* Daftar fitur bercentang (varian .pz-list). */
.pz-check li { padding-left:1.625rem; }
.pz-check li::before {
  top:0.2em; width:14px; height:14px; border-radius:0; background:var(--terracotta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Penanda area layanan. */
.pz-area { display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.5rem; padding:0.5rem 1rem; border:1px solid var(--line); background:var(--bone); border-radius:1.25rem; font-size:0.8125rem; color:var(--ink); line-height:1.4; }
.pz-area svg { color:var(--terracotta); flex-shrink:0; }