/* ============================================================
  PUBLIC CSS - WIBSO
   ============================================================ */

:root {
  --wb-primary: #BD1D28;
  --wb-primary-dark: #9B141F;
  --wb-secondary: #64748b;
  --wb-success: #16a34a;
  --wb-dark: #0f172a;
  --wb-nav-bg: #0f172a;
  --wb-cta-bg: linear-gradient(135deg, #7f1016 0%, #BD1D28 50%, #e36161 100%);
  --wb-font: 'Sora', sans-serif;
  --wb-body-font: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--wb-body-font);
  color: #334155;
  background: #f8fafc;
}

/* ── NAVBAR ─────────────────────────────────────────────── */
.wb-navbar {
  background: var(--wb-nav-bg) !important;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.wb-navbar .navbar-brand {
  font-family: var(--wb-font);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── HERO ────────────────────────────────────────────────── */
.wb-hero {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
  color: #f1f5f9;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

.wb-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(189,29,40,.25) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge .badge {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .03em;
  border: 1px solid rgba(189,29,40,.3);
  background: rgba(189,29,40,.15) !important;
  color: #fecaca !important;
}

.hero-title {
  font-family: var(--wb-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: #f1f5f9;
  letter-spacing: -.03em;
}

.text-gradient {
  background: linear-gradient(135deg, #f28b8b, #BD1D28);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.65;
  max-width: 520px;
}

.hero-features {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.feature-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #cbd5e1;
  padding: .35rem .85rem;
  border-radius: 2rem;
  font-size: .8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Hero Card Illustration */
.hero-illustration {
  perspective: 800px;
}

.hero-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1.5rem;
  min-width: 300px;
  backdrop-filter: blur(10px);
  transform: rotateY(-5deg) rotateX(3deg);
  box-shadow: 0 25px 50px rgba(0,0,0,.4);
}

.hc-header { display: flex; gap: .4rem; margin-bottom: 1.5rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.hc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.hc-label { color: #94a3b8; font-size: .85rem; }
.hc-divider { border-top: 1px solid rgba(255,255,255,.1); margin: 1rem 0; }
.hc-id { color: #e2e8f0; font-size: .85rem; background: rgba(255,255,255,.05); padding: .5rem .75rem; border-radius: .4rem; }

/* ── STATS ───────────────────────────────────────────────── */
.stats-bar .stat-number {
  font-family: var(--wb-font);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wb-primary);
  line-height: 1;
}

.stats-bar .stat-label {
  font-size: .8rem;
  color: #64748b;
  margin-top: .25rem;
  font-weight: 500;
}

/* ── HOW IT WORKS ────────────────────────────────────────── */
.section-title {
  font-family: var(--wb-font);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -.02em;
}

.section-subtitle {
  color: #64748b;
  font-size: 1.05rem;
}

.step-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
  position: relative;
  transition: transform .2s, box-shadow .2s;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
}

.step-number {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--wb-font);
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(189,29,40,.08);
  line-height: 1;
}

.step-icon {
  font-size: 2.5rem;
  color: var(--wb-primary);
  margin-bottom: 1rem;
}

.step-card h5 {
  font-family: var(--wb-font);
  font-weight: 600;
  color: #0f172a;
  margin-bottom: .5rem;
}

/* ── CATEGORY CARDS ──────────────────────────────────────── */
.category-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}

.category-card:hover {
  border-color: var(--wb-primary);
  box-shadow: 0 4px 16px rgba(189,29,40,.1);
}

.category-icon {
  font-size: 1.5rem;
  color: var(--wb-primary);
  margin-bottom: .5rem;
  display: block;
}

/* ── CTA ─────────────────────────────────────────────────── */
.wb-cta {
  background: var(--wb-cta-bg);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.wb-footer {
  background: #0f172a;
  color: #94a3b8;
}

.wb-footer a { color: #64748b; text-decoration: none; }
.wb-footer a:hover { color: #94a3b8; }

/* ── REPORT FORM ─────────────────────────────────────────── */
.report-header {
  background: linear-gradient(135deg, #f8faff, #eff6ff);
  border-bottom: 1px solid #dbeafe;
  border-radius: .5rem .5rem 0 0;
}

.upload-zone {
  border: 2px dashed #cbd5e1;
  border-radius: .75rem;
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--wb-primary);
  background: rgba(189,29,40,.03);
}

/* ── TRACKING ────────────────────────────────────────────── */
.tracking-code-display .code-box {
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 1rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  color: var(--wb-primary);
  display: inline-block;
}

.font-mono { font-family: 'Courier New', monospace; }

/* ── MESSAGES ────────────────────────────────────────────── */
.messages-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 1.25rem;
  scroll-behavior: smooth;
}

.message-row {
  margin-bottom: 1rem;
  display: flex;
}

.msg-reporter { justify-content: flex-end; }
.msg-staff { justify-content: flex-start; }

.msg-bubble {
  max-width: 75%;
  border-radius: 1rem;
  padding: .75rem 1rem;
  font-size: .9rem;
}

.msg-reporter .msg-bubble {
  background: var(--wb-primary);
  color: white;
  border-bottom-right-radius: .2rem;
}

.msg-staff .msg-bubble {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: .2rem;
}

.msg-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .25rem;
  font-size: .75rem;
  opacity: .75;
}

/* ── DETAIL ──────────────────────────────────────────────── */
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .35rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: .875rem;
  gap: .5rem;
}

.detail-label {
  color: #64748b;
  min-width: 100px;
}

/* ── PASSWORD STRENGTH ───────────────────────────────────── */
.password-strength { height: 1.2rem; }

/* ── UTILITIES ───────────────────────────────────────────── */
.success-icon { animation: bounceIn .5s ease; }

@keyframes bounceIn {
  0% { transform: scale(.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}