/* jaspayaja v35 — banner "Masih butuh bantuan?" yang bisa diedit admin (lihat jp-helpcta.js) */

/* ---------- halaman bantuan (info.html) ---------- */
html.hcta-wait #ji-contact .ji-contact-card { visibility: hidden; }
#ji-contact.hcta-hidden { display: none !important; }
.ji-contact-card.hcta-bg::before { background: var(--hcta-bg); transition: background 0.3s ease; }

/* ---------- Panel Admin ---------- */
#jph-admin-panel { display: none; }
html.jph-on #jph-admin-panel { display: block; margin-top: 22px; min-width: 0; animation: jx-rise 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; scroll-margin-top: 84px; }
html.jph-on [data-testid="admin-title"] ~ div > [role="tabpanel"] { display: none !important; }
html.jph-on #jpb-admin-panel { display: none !important; }
html.jpa-on.jph-on div:has(> h1[data-testid="admin-title"]) > div:has(> [role="tablist"]) > [role="tablist"] > [role="tab"][aria-selected="true"]:not([data-testid="admin-tab-help-cta"]) {
  color: var(--jx-muted); background: transparent; box-shadow: none; font-weight: 500;
}
/* sejajar dengan panel bawaan di samping sidebar (sama seperti #jpb-admin-panel di jp-admin.css) */
@media (min-width: 1024px) {
  html.jpa-on div:has(> h1[data-testid="admin-title"]) #jph-admin-panel { margin-left: var(--jx-gutter); margin-right: var(--jx-gutter); }
}

.hcta-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
.hcta-form { display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow: visible; }
.hcta-form .jpb-filters { margin-bottom: -6px; }
.hcta-lang-hint { margin: 0; }
.hcta-toggle { align-items: center; }

.hcta-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.hcta-swatch {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px;
  border: 1px solid var(--jx-line, var(--border)); background: var(--jx-card, var(--card)); color: var(--jx-text, var(--foreground));
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.hcta-swatch:hover { transform: translateY(-1px); border-color: var(--jx-line-2, var(--border)); }
.hcta-swatch[aria-checked="true"] { border-color: var(--jx-accent, var(--primary)); box-shadow: 0 0 0 3px var(--jx-accent-bg, color-mix(in oklab, var(--primary) 18%, transparent)); }
.hcta-swatch-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); }

.hcta-custom { display: none; gap: 14px; margin-top: 4px; }
.hcta-custom.on { display: flex; }
.hcta-custom label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hcta-color { width: 38px; height: 30px; padding: 2px; border-radius: 8px; border: 1px solid var(--jx-line, var(--border)); background: transparent; cursor: pointer; }

.hcta-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.hcta-actions-btns { display: flex; gap: 8px; }

.hcta-prev { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 8px; }
.hcta-prev-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 24px; border-radius: 22px; border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
  background: color-mix(in oklab, var(--card) 80%, transparent);
  box-shadow: 0 18px 40px -24px rgba(76, 29, 149, 0.45);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.hcta-prev-card::before { content: ""; position: absolute; inset: 0; background: var(--hcta-bg); pointer-events: none; transition: background 0.3s ease; }
.hcta-prev-card.off { opacity: 0.45; filter: grayscale(0.6); }
.hcta-prev-text { position: relative; min-width: 0; }
.hcta-prev-eyebrow {
  display: inline-flex; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6d28d9; background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.22);
}
.dark .hcta-prev-eyebrow { color: #c4b5fd; }
.hcta-prev-title { margin: 12px 0 6px; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); overflow-wrap: anywhere; }
.hcta-prev-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-foreground); overflow-wrap: anywhere; }
.hcta-prev-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #c026d3); color: #fff; font-size: 14px; font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(192, 38, 211, 0.7);
}
.hcta-prev-off { font-size: 12.5px; font-weight: 600; color: var(--jx-warn, #f59e0b); }

@media (max-width: 1100px) {
  .hcta-layout { grid-template-columns: 1fr; }
  .hcta-prev { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  html.jph-on #jph-admin-panel { animation: none; }
  .hcta-swatch { transition: none; }
}