/* ===== Home page specific styles ===== */
.online-badge {
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;
  background:rgba(16,185,129,.2);
  border:1px solid rgba(16,185,129,.4);
  color:#34d399;font-size:11px;font-weight:600;
}
.online-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.7);
  animation:pulse 1.8s infinite;
}

/* ===== Browse nearby faces ===== */
.browse-label {
  display:flex;justify-content:space-between;
  align-items:center;
  padding:12px 16px 4px;
  color:rgba(255,255,255,.8);
  font-size:13px;
  font-weight:700;
}
.browse-label .tap-hint {
  font-size:11px;
  font-weight:500;
  color:#a855f7;
  cursor:pointer;
}

/* ===== Profile Carousel (override .profiles-row padding for home page) ===== */
.profiles-row {
  padding:8px 16px 12px;
}

/* ===== Stats Card ===== */
.stats-card {
  margin: 0 12px 14px;
  background:linear-gradient(135deg, #581c87 0%, #be185d 100%);
  border-radius:20px;
  padding:18px 16px;
  color:#fff;
}
.stats-title {
  font-size:18px;
  font-weight:800;
  margin-bottom:4px;
  letter-spacing:-.3px;
}
.stats-desc {
  font-size:12px;
  color:rgba(255,255,255,.85);
  line-height:1.5;
  margin-bottom:16px;
}
.stats-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.stat-item {
  flex:1;
  text-align:center;
  background:rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 6px;
  border:1px solid rgba(255,255,255,.15);
}
.stat-value {
  font-size:20px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
}
.stat-label {
  font-size:10.5px;
  color:rgba(255,255,255,.8);
  margin-top:2px;
}

/* ===== Features List ===== */
.features-list {
  margin: 0 12px 14px;
  background:#fff;
  border-radius:20px;
  padding:18px 16px;
}
.feature-item {
  display:flex;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #f3f4f6;
}
.feature-item:last-child { border-bottom:none; }
.feature-icon {
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.feature-icon.purple { background:#f3e8ff; color:#a855f7; }
.feature-icon.blue { background:#dbeafe; color:#3b82f6; }
.feature-icon.green { background:#d1fae5; color:#10b981; }
.feature-content h4 {
  font-size:14px;
  font-weight:700;
  color:#1a1033;
  margin-bottom:3px;
}
.feature-content p {
  font-size:11.5px;
  color:#6b7280;
  line-height:1.45;
}

/* ===== CTA Section ===== */
.cta-section {
  padding: 8px 16px 20px;
  text-align:center;
}
.cta-section .cta {
  font-size:16px;
  padding:18px 24px;
  letter-spacing:.3px;
}
.cta-hint-text {
  font-size:11px;
  color:rgba(196,181,253,.7);
  margin-top:10px;
}

/* ===== Hero Location ===== */
.hero-location {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  color:rgba(255,255,255,.85);
  font-weight:500;
  margin-top:6px;
}
.hero-location::before {
  content:"📍";
  font-size:12px;
}

/* ===== Safari Guide Bottom Sheet ===== */
.safari-sheet {
  width:100%;max-width:480px;
  background:#fff;
  border-radius:28px 28px 0 0;
  padding:12px 24px 32px;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  color:#1a1033;
  box-shadow:0 -10px 40px rgba(0,0,0,.4);
  max-height:88vh;
  overflow-y:auto;
  visibility:hidden;
}
.modal-backdrop.active .safari-sheet {
  transform:translateY(0);
  visibility:visible;
}
.safari-title {
  font-size:22px;font-weight:800;margin-bottom:12px;
  letter-spacing:-.3px;text-align:center;
}
.safari-guide-img {
  width:100%;
  max-width:280px;
  margin:0 auto 14px;
  border-radius:16px;
  overflow:hidden;
  background:#f5f3fa;
}
.safari-guide-img img {
  width:100%;display:block;
}
.safari-desc {
  font-size:12.5px;
  color:#6b7280;
  line-height:1.55;
  text-align:center;
  margin-bottom:16px;
  padding:0 8px;
}
.safari-steps {
  background:#faf9fd;
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:18px;
}
.safari-step {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 0;
  font-size:12px;
  color:#1a1033;
  line-height:1.45;
  border-bottom:1px solid #ede8f5;
}
.safari-step:last-child { border-bottom:none; }
.safari-step strong {
  color:var(--purple);
}
.step-dot {
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.safari-cta {
  margin-top:4px;
}
.safari-footer-hint {
  text-align:center;
  font-size:11px;
  color:#9ca3af;
  margin-top:12px;
}
.copy-success {
  text-align:center;
  font-size:12px;
  color:#10b981;
  font-weight:600;
  margin-top:10px;
  display:none;
}
.copy-success.show {
  display:block;
}