/* ─────────────────────────────────────────────────────────
   faq-ui.css — Light-theme base CSS for the new FAQ web UI.
   Complements Tailwind CDN. Does NOT affect mobile webview
   templates (main.css) or web-app forms (web-main.css).
───────────────────────────────────────────────────────── */

:root {
  --violet: #5B21B6;
  --violet-btn: #7C3AED;
}

/* ── Bento grid cards ───────────────────────────────────── */
.glass-card {
  background: #F7F8FA;
  border: 1px solid #E8EAED;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.glass-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.bento-card {
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}

/* Compound selector (0,2,0) beats .glass-card (0,1,0) — wide cards only get color */
.bento-card.bento-card-wide {
  background: linear-gradient(135deg, var(--cat-bg) 0%, var(--cat-bg) 30%, transparent 80%);
}

/* ── Category icons ─────────────────────────────────────── */
.cat-icon {
  background-color: transparent;
}
.cat-icon svg {
  fill: #6C849D;
  transition: fill 0.2s ease;
}

/* Wide cards: colored icon bg + colored svg (specificity 0,3,0 / 0,3,1) */
.bento-card.bento-card-wide .cat-icon {
  background-color: var(--cat-bg);
}
.bento-card.bento-card-wide .cat-icon svg {
  fill: var(--cat-color);
}

/* Hover: any bento card icon turns the accent color */
.group:hover .cat-icon svg,
.group:active .cat-icon svg {
  fill: var(--cat-color);
}

/* ── Browse Products icon ───────────────────────────────── */
.browse-icon svg { width: 40px; height: 40px; }
.browse-icon img { width: 40px; height: 40px; object-fit: contain; }

/* ── Hero gradient orbs ─────────────────────────────────── */
.orb-1 {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.orb-2 {
  position: absolute;
  bottom: -40px;
  right: -20px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Issue type badge pills ─────────────────────────────── */
.badge-in-app {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #DBEAFE;
  color: #1D4ED8;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-troubleshoot {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #92400E;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-support {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FEE2E2;
  color: #991B1B;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Video carousel auto-scroll ─────────────────────────── */
@keyframes auto-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.auto-scroll {
  animation: auto-scroll 30s linear infinite;
}

.auto-scroll:hover {
  animation-play-state: paused;
}

/* ── Utilities ──────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}