/* =========================================================
   PVHRE Public Styles (Updated As Per Spec)
   Fully Scoped Under #pvhre-root
   ========================================================= */

#pvhre-root {
  --pvhre-primary: #00A43C;     /* Confidence Green */
  --pvhre-call: #3CA478;        /* Call Muted Green */
  --pvhre-whatsapp: #24D064;    /* WhatsApp Green */
  --pvhre-accent: #145CFC;      /* Timeline Blue */
  --pvhre-bg: #F9FAFB;          /* Light Off White */
  --pvhre-card: #FFFFFF;
  --pvhre-text: #344054;
  --pvhre-border: #EAECF0;
  --pvhre-shadow: 0 6px 18px rgba(0,0,0,0.06);

  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color: var(--pvhre-text);
}

/* Container */

#pvhre-root .pvhre-container {
  background: var(--pvhre-bg);
  padding: 28px;
  border-radius: 18px;
  box-shadow: var(--pvhre-shadow);
  position: relative;
}

/* Top Accent Bar */

#pvhre-root .pvhre-card {
  background: var(--pvhre-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--pvhre-shadow);
  margin-bottom: 24px;
  border: 1px solid var(--pvhre-border);
  position: relative;
}

#pvhre-root .pvhre-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--pvhre-primary);
}

/* Typography */

#pvhre-root .pvhre-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

#pvhre-root .pvhre-subtitle {
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: 18px;
}

/* Progress */

#pvhre-root .pvhre-progress {
  height: 6px;
  background: #E4E7EC;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

#pvhre-root .pvhre-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--pvhre-primary);
  transition: width 0.4s ease;
}

/* Buttons */

#pvhre-root .pvhre-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-right: 10px;
  transition: 0.3s ease;
}

#pvhre-root .pvhre-btn-primary {
  background: var(--pvhre-primary);
  color: #fff;
}

#pvhre-root .pvhre-btn-call {
  background: var(--pvhre-call);
  color: #fff;
}

#pvhre-root .pvhre-btn-whatsapp {
  background: var(--pvhre-whatsapp);
  color: #fff;
}

#pvhre-root .pvhre-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

/* Loader */

#pvhre-root .pvhre-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.96);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  text-align: center;
}

#pvhre-root .pvhre-loader-text {
  font-size: 16px;
  font-weight: 500;
}

/* Result Score */

#pvhre-root .pvhre-score {
  font-size: 32px;
  font-weight: 700;
  color: var(--pvhre-primary);
  margin-bottom: 8px;
}

#pvhre-root .pvhre-recovery {
  font-size: 16px;
  margin-bottom: 10px;
}

#pvhre-root .pvhre-timeline {
  color: var(--pvhre-accent);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Highlight Counter Box */

#pvhre-root .pvhre-counter-box {
  background: #fff;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--pvhre-border);
  margin-top: 18px;
  position: relative;
  overflow: hidden;
  font-size: 14px;
}

#pvhre-root .pvhre-counter-box strong {
  display: block;
}

/* Shimmer Animation */

#pvhre-root .pvhre-counter-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.7) 50%,
    transparent 100%
  );
  animation: pvhre-shimmer 3s infinite;
}

@keyframes pvhre-shimmer {
  0% { left: -40%; }
  100% { left: 120%; }
}

/* Confidence Badge */

#pvhre-root .pvhre-confidence {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(0,164,60,0.1);
  color: var(--pvhre-primary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* CTA Container */

#pvhre-root .pvhre-cta-group {
  margin-top: 20px;
}

/* Responsive */

@media (max-width: 768px) {
  #pvhre-root .pvhre-container {
    padding: 18px;
  }

  #pvhre-root .pvhre-btn {
    width: 100%;
    margin-bottom: 10px;
  }
}