/*
 * Health System — Public CSS v1.4.1
 * Rise Up / ANCOM — https://riseuprenal.com/
 *
 * ISOLATION GUARANTEE
 * Every single rule is prefixed with .hs-wrap so nothing leaks
 * into Elementor widgets, Hub theme sections, or any other element
 * on the same page.
 *
 * CSS custom properties are declared INSIDE .hs-wrap (not :root)
 * so they do not interfere with the theme's own variables.
 * ---------------------------------------------------------------- */

/* ── Design tokens (scoped, not :root) ─────────────────────────── */
.hs-wrap {
  --hs-green:        #2E6F40;
  --hs-green-lt:     #edf7f0;
  --hs-green-mid:    #4fa868;
  --hs-green-dark:   #1b4028;
  --hs-green-faint:  #f6fbf7;
  --hs-danger:       #c0392b;
  --hs-danger-lt:    #fdf3f2;
  --hs-warning:      #c47d0a;
  --hs-warning-lt:   #fef9ee;
  --hs-border:       #dde8df;
  --hs-border-lt:    #eef4ef;
  --hs-shadow:       0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(46,111,64,.07);
  --hs-shadow-hover: 0 4px 12px rgba(0,0,0,.08), 0 8px 28px rgba(46,111,64,.12);
  --hs-radius:       10px;
  --hs-radius-sm:    6px;
  --hs-text:         #1a2820;
  --hs-text-muted:   #6b7e6e;
  --hs-transition:   .18s cubic-bezier(.4, 0, .2, 1);

  /* Force a clean slate for this component only */
  color:       var(--hs-text);
  line-height: 1.65;
  /* Prevent Hub / Elementor heading styles from cascading in */
  font-size:   16px;
}

/* Box-sizing reset scoped inside wrapper */
.hs-wrap *,
.hs-wrap *::before,
.hs-wrap *::after {
  box-sizing: border-box;
}

/* Neutralise any Elementor / Hub heading resets inside our wrapper */
.hs-wrap h1,
.hs-wrap h2,
.hs-wrap h3,
.hs-wrap h4,
.hs-wrap h5,
.hs-wrap h6 {
  margin:      0;
  padding:     0;
  line-height: 1.25;
  font-weight: 700;
  color:       inherit;
  /* prevent theme from injecting letter-spacing on headings */
  letter-spacing: 0;
}

.hs-wrap p {
  margin: 0 0 1em;
}

.hs-wrap a {
  color:           var(--hs-green);
  text-decoration: none;
  transition:      color var(--hs-transition);
}

.hs-wrap a:hover {
  color: var(--hs-green-dark);
}

/* ── Alert / notice blocks ──────────────────────────────────────── */
.hs-wrap .hs-error {
  background:    var(--hs-danger-lt);
  border-left:   4px solid var(--hs-danger);
  padding:       12px 16px;
  border-radius: var(--hs-radius-sm);
  color:         var(--hs-danger);
  font-size:     .9rem;
  margin:        0 0 16px;
}

.hs-wrap .hs-info {
  background:    var(--hs-green-lt);
  border-left:   4px solid var(--hs-green-mid);
  padding:       12px 16px;
  border-radius: var(--hs-radius-sm);
  color:         var(--hs-green-dark);
  font-size:     .9rem;
  margin:        0 0 16px;
}

.hs-wrap .hs-success {
  background:    #e4f8eb;
  border-left:   4px solid var(--hs-green);
  padding:       12px 16px;
  border-radius: var(--hs-radius-sm);
  color:         var(--hs-green-dark);
  font-size:     .9rem;
  margin:        0 0 16px;
}

/* ── Card shell ─────────────────────────────────────────────────── */
.hs-wrap .hs-card {
  background:     #fff;
  border:         1px solid var(--hs-border);
  border-radius:  var(--hs-radius);
  box-shadow:     var(--hs-shadow);
  padding:        28px 32px;
  margin-bottom:  20px;
  overflow:       hidden;
}

/* ── Buttons ────────────────────────────────────────────────────── */
/* Reset any theme button base that may cascade */
.hs-wrap .hs-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         11px 26px;
  border-radius:   var(--hs-radius-sm);
  font-size:       .92rem;
  font-weight:     600;
  line-height:     1;
  cursor:          pointer;
  border:          none;
  outline:         none;
  text-decoration: none;
  transition:      background var(--hs-transition),
                   transform  var(--hs-transition),
                   box-shadow var(--hs-transition),
                   color      var(--hs-transition);
  /* Override Hub theme button styles completely */
  background-image: none;
  box-shadow:       none;
  text-shadow:      none;
  letter-spacing:   0;
}

.hs-wrap .hs-btn-primary {
  background: var(--hs-green);
  color:      #fff;
}

.hs-wrap .hs-btn-primary:hover,
.hs-wrap .hs-btn-primary:focus {
  background: var(--hs-green-dark);
  color:      #fff;
  transform:  translateY(-1px);
  box-shadow: var(--hs-shadow-hover);
}

.hs-wrap .hs-btn-outline {
  background: transparent;
  color:      var(--hs-green);
  border:     2px solid var(--hs-green);
}

.hs-wrap .hs-btn-outline:hover,
.hs-wrap .hs-btn-outline:focus {
  background: var(--hs-green-lt);
  color:      var(--hs-green-dark);
}

.hs-wrap .hs-btn-danger {
  background: var(--hs-danger-lt);
  color:      var(--hs-danger);
  border:     1.5px solid #f5c6c6;
}

.hs-wrap .hs-btn-danger:hover {
  background: #ffd5d5;
  color:      var(--hs-danger);
}

.hs-wrap .hs-btn:disabled,
.hs-wrap .hs-btn.loading {
  opacity:        .6;
  pointer-events: none;
}

.hs-wrap .hs-btn.loading::after {
  content:       '';
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     hs-spin .65s linear infinite;
}

/* ── Form inputs — fully scoped ─────────────────────────────────── */
/*
 * Important: Elementor and Hub inject global input styles.
 * We use high-specificity selectors to guarantee our styles win
 * without resorting to !important.
 */
.hs-wrap input[type="number"],
.hs-wrap input[type="text"],
.hs-wrap input[type="email"],
.hs-wrap textarea,
.hs-wrap .hs-textarea {
  width:          100%;
  padding:        10px 14px;
  border:         1.5px solid var(--hs-border);
  border-radius:  var(--hs-radius-sm);
  font-size:      .92rem;
  color:          var(--hs-text);
  background:     #fff;
  outline:        none;
  transition:     border-color var(--hs-transition),
                  box-shadow   var(--hs-transition);
  /* Override Hub / Elementor form field shadows / backgrounds */
  box-shadow:     none;
  appearance:     none;
  -webkit-appearance: none;
}

/* Remove spin buttons from number inputs */
.hs-wrap input[type="number"]::-webkit-outer-spin-button,
.hs-wrap input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hs-wrap input[type="number"] {
  -moz-appearance: textfield;
}

.hs-wrap input[type="number"]:focus,
.hs-wrap input[type="text"]:focus,
.hs-wrap textarea:focus,
.hs-wrap .hs-textarea:focus {
  border-color: var(--hs-green-mid);
  box-shadow:   0 0 0 3px rgba(104, 186, 127, .18);
}

.hs-wrap textarea,
.hs-wrap .hs-textarea {
  resize:     vertical;
  min-height: 80px;
  display:    block;
}

/* Labels */
.hs-wrap label {
  display:        block;
  font-size:      .82rem;
  font-weight:    600;
  color:          var(--hs-green-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom:  6px;
}

.hs-wrap .hs-unit {
  font-weight:    400;
  color:          #8aab8c;
  text-transform: none;
  letter-spacing: 0;
  font-size:      .78rem;
  margin-left:    3px;
}

/* ── Tracking form layout ───────────────────────────────────────── */
.hs-wrap .hs-tracking-title {
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--hs-green);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--hs-border);
}

.hs-wrap .hs-metrics-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   16px;
  margin-bottom:         22px;
}

.hs-wrap .hs-metric-field {
  display: flex;
  flex-direction: column;
}

/* ── Quiz form ──────────────────────────────────────────────────── */
.hs-wrap .hs-quiz-title {
  font-size:     1.5rem;
  font-weight:   700;
  color:         var(--hs-green);
  margin-bottom: 6px;
}

.hs-wrap .hs-quiz-desc {
  color:         var(--hs-text-muted);
  margin-bottom: 24px;
  font-size:     .95rem;
}

/* Progress */
.hs-wrap .hs-progress-wrap {
  margin-bottom: 28px;
}

.hs-wrap .hs-progress-label {
  font-size:     .8rem;
  color:         var(--hs-text-muted);
  margin-bottom: 7px;
}

.hs-wrap .hs-progress-bar {
  height:        7px;
  background:    #dceee2;
  border-radius: 99px;
  overflow:      hidden;
}

.hs-wrap .hs-progress-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--hs-green-mid), var(--hs-green));
  border-radius: 99px;
  transition:    width .45s ease;
}

/* Questions */
.hs-wrap .hs-question {
  margin-bottom:  24px;
  padding-bottom: 24px;
  border-bottom:  1px solid #dff0e4;
}

.hs-wrap .hs-question:last-of-type {
  border-bottom: none;
}

.hs-wrap .hs-question-title {
  font-weight:   600;
  font-size:     1rem;
  color:         var(--hs-green-dark);
  margin-bottom: 12px;
}

.hs-wrap .hs-question-desc {
  font-size:      .875rem;
  color:          var(--hs-text-muted);
  margin-bottom:  12px;
  margin-top:    -6px;
}

/* Radio options */
.hs-wrap .hs-options {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.hs-wrap .hs-option {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        11px 16px;
  border:         1.5px solid var(--hs-border);
  border-radius:  var(--hs-radius-sm);
  cursor:         pointer;
  transition:     border-color var(--hs-transition),
                  background   var(--hs-transition);
  background:     #fff;
  /* reset any Hub list-item styles */
  list-style:     none;
}

.hs-wrap .hs-option:hover {
  border-color: var(--hs-green-mid);
  background:   var(--hs-green-faint);
}

.hs-wrap .hs-option input[type="radio"] {
  accent-color: var(--hs-green);
  width:        17px;
  height:       17px;
  margin:       0;
  flex-shrink:  0;
  /* Override Hub global input styles */
  border:       none;
  box-shadow:   none;
  padding:      0;
}

.hs-wrap .hs-option:has(input:checked) {
  border-color: var(--hs-green);
  background:   var(--hs-green-lt);
}

.hs-wrap .hs-option input[type="radio"]:checked + span {
  color:       var(--hs-green-dark);
  font-weight: 600;
}

.hs-wrap .hs-option span {
  font-size:      .9rem;
  color:          #2c3e2e;
  pointer-events: none;
}

/* Quiz result */
.hs-wrap .hs-result-box {
  background:    #fff;
  border:        1px solid var(--hs-border);
  border-top:    3px solid var(--hs-green);
  border-radius: var(--hs-radius);
  padding:       32px 36px;
  text-align:    center;
  animation:     hs-fade-up .4s ease both;
  box-shadow:    var(--hs-shadow);
}

.hs-wrap .hs-result-score {
  font-size:   3.5rem;
  font-weight: 800;
  color:       var(--hs-green);
  line-height: 1;
}

.hs-wrap .hs-result-band {
  font-size:    1.2rem;
  font-weight:  700;
  color:        var(--hs-green-dark);
  margin:       10px 0 6px;
}

.hs-wrap .hs-result-desc {
  color:     var(--hs-text-muted);
  font-size: .95rem;
  margin:    0 0 14px;
}

.hs-wrap .hs-result-advice {
  background:    var(--hs-green-lt);
  border-radius: var(--hs-radius-sm);
  padding:       16px 20px;
  color:         var(--hs-green-dark);
  font-size:     .9rem;
  text-align:    left;
  margin-top:    18px;
  border-left:   3px solid var(--hs-green-mid);
}

/* ── Status badges ──────────────────────────────────────────────── */
.hs-wrap .hs-status-badge {
  display:        inline-block;
  font-size:      .7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:        3px 8px;
  border-radius:  4px;
  line-height:    1.5;
}

.hs-wrap .hs-status-badge.Normal  {
  background: #e2f5ea;
  color:      var(--hs-green);
}

.hs-wrap .hs-status-badge.Warning {
  background: var(--hs-warning-lt);
  color:      #92640c;
}

.hs-wrap .hs-status-badge.Danger  {
  background: var(--hs-danger-lt);
  color:      var(--hs-danger);
}

/* ── Value chips in history rows ────────────────────────────────── */
.hs-wrap .hs-val-chip {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  background:  var(--hs-green-faint);
  border:      1px solid var(--hs-border);
  border-radius: 6px;
  padding:     4px 10px;
  font-size:   .8rem;
  margin:      2px 3px 2px 0;
  white-space: nowrap;
}

.hs-wrap .hs-val-chip .dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
  display:       inline-block;
}

.hs-wrap .hs-val-chip .dot.Normal  { background: var(--hs-green); }
.hs-wrap .hs-val-chip .dot.Warning { background: var(--hs-warning); }
.hs-wrap .hs-val-chip .dot.Danger  { background: var(--hs-danger); }

/* ── History tabs ───────────────────────────────────────────────── */
.hs-wrap .hs-tabs {
  display:       flex;
  gap:           4px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--hs-border);
  flex-wrap:     wrap;
}

.hs-wrap .hs-tab-btn {
  padding:        10px 22px;
  border:         none;
  background:     none;
  color:          var(--hs-text-muted);
  font-size:      .9rem;
  font-weight:    600;
  cursor:         pointer;
  border-bottom:  3px solid transparent;
  margin-bottom: -2px;
  transition:     color         var(--hs-transition),
                  border-color  var(--hs-transition);
  outline:        none;
  /* Ensure Hub theme doesn't add border/background to buttons */
  box-shadow:    none;
  border-radius: 0;
  line-height:   1.4;
}

.hs-wrap .hs-tab-btn.active,
.hs-wrap .hs-tab-btn:hover {
  color:        var(--hs-green);
  border-bottom-color: var(--hs-green);
}

.hs-wrap .hs-tab-panel {
  display: none;
}

.hs-wrap .hs-tab-panel.active {
  display: block;
  animation: hs-fade-up .25s ease both;
}

/* ── Table ──────────────────────────────────────────────────────── */
.hs-wrap .hs-table-wrap {
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  border-radius:              var(--hs-radius-sm);
  border:                     1px solid var(--hs-border);
}

.hs-wrap table.hs-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .88rem;
  /* Reset any theme table styles */
  border-spacing: 0;
}

.hs-wrap table.hs-table th {
  background:     var(--hs-green-faint);
  color:          var(--hs-green-dark);
  padding:        10px 15px;
  text-align:     left;
  font-weight:    700;
  font-size:      .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space:    nowrap;
  border-bottom:  2px solid var(--hs-border);
  /* Override theme table header styles */
  border-top:     none;
  border-left:    none;
  border-right:   none;
}

.hs-wrap table.hs-table td {
  padding:         10px 15px;
  border-bottom:   1px solid #e5f0e8;
  color:           #2c3e2e;
  vertical-align:  middle;
  /* Prevent theme td borders */
  border-left:     none;
  border-right:    none;
}

.hs-wrap table.hs-table tr:last-child td {
  border-bottom: none;
}

.hs-wrap table.hs-table tbody tr:hover td {
  background: var(--hs-green-faint);
}

/* ── Chart ──────────────────────────────────────────────────────── */
.hs-wrap .hs-chart-selector {
  display:       flex;
  gap:           8px;
  flex-wrap:     wrap;
  margin-bottom: 18px;
}

.hs-wrap .hs-chart-pill {
  padding:       5px 14px;
  border-radius: var(--hs-radius-sm);
  border:        1.5px solid var(--hs-border);
  background:    #fff;
  font-size:     .8rem;
  font-weight:   600;
  cursor:        pointer;
  color:         var(--hs-text-muted);
  transition:    background var(--hs-transition),
                 border-color var(--hs-transition),
                 color var(--hs-transition);
  outline:       none;
  box-shadow:    none;
  line-height:   1.4;
}

.hs-wrap .hs-chart-pill.active,
.hs-wrap .hs-chart-pill:hover {
  background:   var(--hs-green);
  border-color: var(--hs-green);
  color:        #fff;
}

.hs-wrap .hs-chart-wrap {
  position:   relative;
  height:     240px;
  margin-top: 8px;
}

/* ── Empty state ────────────────────────────────────────────────── */
.hs-wrap .hs-empty {
  text-align:  center;
  padding:     50px 24px;
  color:       #8aab8c;
  font-size:   .92rem;
  background:  var(--hs-green-faint);
  border:      1px dashed var(--hs-border);
  border-radius: var(--hs-radius-sm);
}

/* ── Feedback / spinner ─────────────────────────────────────────── */
.hs-wrap .hs-feedback {
  margin-top: 14px;
  display:    none;
}

/* ── Section title ──────────────────────────────────────────────── */
.hs-wrap .hs-section-title {
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--hs-green);
  margin:        0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hs-border);
}

/* ── Divider strip (visual separator between shortcodes) ────────── */
.hs-wrap + .hs-wrap {
  margin-top: 28px;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes hs-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes hs-spin {
  to { transform: rotate(360deg); }
}

/* ── Elementor-specific overrides ───────────────────────────────── */
/*
 * Hub / Elementor sometimes wraps columns in .elementor-widget-container
 * which may set overflow:hidden, clipping box shadows.
 * We nudge our card margin so shadows aren't clipped.
 */
.elementor-widget-container .hs-wrap .hs-card {
  margin-left:  2px;
  margin-right: 2px;
}

/* Elementor Full-width sections sometimes set p margin 0 globally */
.elementor-section .hs-wrap p {
  margin-bottom: .75em;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hs-wrap .hs-card {
    padding: 22px 18px;
  }

  .hs-wrap .hs-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hs-wrap .hs-result-score {
    font-size: 2.8rem;
  }

  .hs-wrap table.hs-table th,
  .hs-wrap table.hs-table td {
    padding: 9px 10px;
  }

  .hs-wrap .hs-result-box {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .hs-wrap .hs-metrics-grid {
    grid-template-columns: 1fr;
  }

  .hs-wrap .hs-tabs {
    gap: 2px;
  }

  .hs-wrap .hs-tab-btn {
    padding: 8px 14px;
    font-size: .85rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   USER DASHBOARD  [hs_dashboard]
   ═══════════════════════════════════════════════════════════════════ */

/* ── Profile header ─────────────────────────────────────────────── */
.hs-wrap.hs-dashboard {
  max-width: 1300px;
}

.hs-wrap .hs-profile-header {
  display:       flex;
  align-items:   center;
  gap:           18px;
  padding:       22px 28px;
  background:    linear-gradient(135deg, #1b4028 0%, #2E6F40 55%, #3a8a52 100%);
  border-radius: var(--hs-radius) var(--hs-radius) 0 0;
  color:         #fff;
  position:      relative;
  overflow:      hidden;
}

.hs-wrap .hs-profile-header::before {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hs-wrap .hs-avatar-circle {
  width:           46px;
  height:          46px;
  border-radius:   50%;
  background:      rgba(255,255,255,.15);
  border:          1.5px solid rgba(255,255,255,.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  font-weight:     700;
  color:           #fff;
  flex-shrink:     0;
  letter-spacing:  .06em;
}

.hs-wrap .hs-profile-info { flex: 1; min-width: 0; }

.hs-wrap .hs-profile-name {
  font-weight:   600;
  font-size:     .95rem;
  color:         #fff;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
}

.hs-wrap .hs-profile-email {
  font-size:  .76rem;
  color:      rgba(255,255,255,.6);
  margin-top: 2px;
}

.hs-wrap .hs-profile-status {
  text-align:  right;
  flex-shrink: 0;
}

.hs-wrap .hs-profile-status .hs-status-badge {
  background: rgba(255,255,255,.15);
  color:      #fff;
  border:     1px solid rgba(255,255,255,.25);
}

/* ── Dashboard navigation ───────────────────────────────────────── */
.hs-wrap .hs-dash-nav {
  display:        flex;
  background:     #fff;
  border:         1px solid var(--hs-border);
  border-top:     none;
  border-radius:  0 0 var(--hs-radius) var(--hs-radius);
  overflow-x:     auto;
  scrollbar-width: none;
  margin-bottom:  24px;
}

.hs-wrap .hs-dash-nav::-webkit-scrollbar { display: none; }

.hs-wrap .hs-dnav-btn {
  padding:        12px 18px;
  border:         none;
  background:     none;
  color:          var(--hs-text-muted);
  font-size:      .85rem;
  font-weight:    600;
  cursor:         pointer;
  border-bottom:  2px solid transparent;
  white-space:    nowrap;
  transition:     color var(--hs-transition),
                  border-color var(--hs-transition),
                  background var(--hs-transition);
  outline:        none;
  text-decoration: none;
  display:        inline-flex;
  align-items:    center;
  line-height:    1;
  box-shadow:     none;
  border-radius:  0;
  letter-spacing: .01em;
}

.hs-wrap .hs-dnav-btn:hover {
  color:       var(--hs-green);
  background:  var(--hs-green-faint);
}

.hs-wrap .hs-dnav-btn.active {
  color:              var(--hs-green-dark);
  border-bottom-color: var(--hs-green);
  background:          var(--hs-green-faint);
}

.hs-wrap .hs-dnav-logout {
  color:       #c0392b !important;
}

.hs-wrap .hs-dnav-logout:hover {
  color:              #a93226 !important;
  border-bottom-color: #c0392b !important;
}

/* ── Dashboard panels ───────────────────────────────────────────── */
.hs-wrap .hs-dash-panel {
  display: none;
}

.hs-wrap .hs-dash-panel.active {
  display:   block;
  animation: hs-fade-up .25s ease both;
}

/* ── Overview stat cards ────────────────────────────────────────── */
.hs-wrap .hs-overview-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   14px;
  margin-bottom:         22px;
}

.hs-wrap .hs-ov-card {
  background:    #fff;
  border:        1px solid var(--hs-border);
  border-left:   3px solid var(--hs-green);
  border-radius: var(--hs-radius);
  padding:       18px 20px;
  text-align:    left;
  box-shadow:    var(--hs-shadow);
}

.hs-wrap .hs-ov-num {
  font-size:   1.7rem;
  font-weight: 700;
  color:       var(--hs-green);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.hs-wrap .hs-ov-status-normal  { color: var(--hs-green); }
.hs-wrap .hs-ov-status-warning {
  color: var(--hs-warning);
  border-left-color: var(--hs-warning);
}
.hs-wrap .hs-ov-status-danger  {
  color: var(--hs-danger);
  border-left-color: var(--hs-danger);
}

.hs-wrap .hs-ov-label {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--hs-text-muted);
  margin-top:     5px;
}

/* ── Account sections ───────────────────────────────────────────── */
.hs-wrap .hs-account-section {
  background:    #fff;
  border:        1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  padding:       24px 28px;
  margin-bottom: 18px;
  box-shadow:    var(--hs-shadow);
}

.hs-wrap .hs-account-section h3 {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--hs-green);
  margin:         0 0 18px;
  padding-bottom: 10px;
  border-bottom:  2px solid var(--hs-border);
}

.hs-wrap .hs-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
  margin-bottom:         18px;
}

.hs-wrap .hs-form-field {
  display:        flex;
  flex-direction: column;
}

.hs-wrap .hs-form-field input,
.hs-wrap .hs-form-field select {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  font-size:     .9rem;
  color:         var(--hs-text);
  background:    #fff;
  outline:       none;
  transition:    border-color var(--hs-transition), box-shadow var(--hs-transition);
  box-shadow:    none;
  appearance:    none;
  -webkit-appearance: none;
}

.hs-wrap .hs-form-field input:focus,
.hs-wrap .hs-form-field select:focus {
  border-color: var(--hs-green-mid);
  box-shadow:   0 0 0 3px rgba(104,186,127,.16);
}

/* ── IC document upload ─────────────────────────────────────────── */
.hs-wrap .hs-ic-upload-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.hs-wrap .hs-ic-upload-label {
  font-size:      .78rem;
  font-weight:    600;
  color:          var(--hs-green-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hs-wrap .hs-ic-upload-box {
  position:   relative;
  border:     2px dashed var(--hs-border);
  border-radius: var(--hs-radius);
  padding:    28px 16px;
  text-align: center;
  cursor:     pointer;
  transition: border-color var(--hs-transition), background var(--hs-transition);
  min-height: 110px;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hs-wrap .hs-ic-upload-box:hover {
  border-color: var(--hs-green-mid);
  background:   var(--hs-green-faint);
}

.hs-wrap .hs-ic-upload-box input[type="file"] {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}

.hs-wrap .hs-ic-upload-icon {
  font-size:  1.6rem;
  color:      var(--hs-border);
  line-height: 1;
}

.hs-wrap .hs-ic-upload-hint {
  font-size: .78rem;
  color:     var(--hs-text-muted);
}

.hs-wrap .hs-ic-preview {
  max-width:     100%;
  max-height:    100px;
  border-radius: 6px;
  display:       none;
  margin-bottom: 6px;
}

.hs-wrap .hs-ic-pdf-indicator {
  font-size:   .78rem;
  color:       var(--hs-green);
  font-weight: 600;
  padding:     6px 12px;
  background:  var(--hs-green-lt);
  border-radius: 4px;
}

/* ── WooCommerce order status badges ────────────────────────────── */
.hs-wrap .hs-order-status {
  display:        inline-block;
  font-size:      .7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding:        3px 8px;
  border-radius:  4px;
}

.hs-wrap .hs-order-status-processing { background: #e0f0ff; color: #1565c0; }
.hs-wrap .hs-order-status-completed  { background: var(--hs-green-lt); color: var(--hs-green); }
.hs-wrap .hs-order-status-cancelled  { background: var(--hs-danger-lt); color: var(--hs-danger); }
.hs-wrap .hs-order-status-on-hold    { background: var(--hs-warning-lt); color: #92640c; }
.hs-wrap .hs-order-status-pending    { background: #f5f5f5; color: #555; }
.hs-wrap .hs-order-status-refunded   { background: #f0e6ff; color: #7b1fa2; }
.hs-wrap .hs-order-status-failed     { background: var(--hs-danger-lt); color: var(--hs-danger); }

/* ── Card header (overview mini-sections) ───────────────────────── */
.hs-wrap .hs-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             8px;
  margin-bottom:   16px;
  padding-bottom:  12px;
  border-bottom:   1px solid var(--hs-border-lt);
}

.hs-wrap .hs-card-title {
  font-size:      .88rem;
  font-weight:    700;
  color:          var(--hs-text);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Profile header status badge variants ───────────────────────── */
.hs-wrap .hs-profile-status-badge {
  display:       inline-block;
  font-size:     .72rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:       4px 12px;
  border-radius: 99px;
  background:    rgba(255,255,255,.22);
  color:         #fff;
  border:        1px solid rgba(255,255,255,.35);
}

.hs-wrap .hs-profile-status-sub {
  font-size:  .7rem;
  color:      rgba(255,255,255,.62);
  margin-top: 3px;
  text-align: center;
}

/* ── Multi-step quiz ─────────────────────────────────────────────── */
.hs-wrap .hs-quiz-card {
  padding:  32px 36px;
  position: relative;  /* prevent theme ::after overlays covering content */
  z-index:  1;
}

.hs-wrap .hs-quiz-step {
  display:        none;
  pointer-events: none;
}

.hs-wrap .hs-quiz-step.active {
  display:        block;
  pointer-events: auto;
  animation:      hs-fade-up .3s ease both;
}

/* Ensure all interactive elements inside steps are always clickable */
.hs-wrap .hs-quiz-step button,
.hs-wrap .hs-quiz-step input,
.hs-wrap .hs-quiz-step label,
.hs-wrap .hs-quiz-step a {
  pointer-events: auto !important;
  cursor:         pointer;
  position:       relative;
  z-index:        2;
}

.hs-wrap .hs-quiz-intro-badge {
  display:        inline-block;
  font-size:      .75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding:        5px 14px;
  border-radius:  99px;
  background:     var(--hs-green-lt);
  color:          var(--hs-green);
  margin-bottom:  16px;
  border:         1px solid var(--hs-border);
}

.hs-wrap .hs-quiz-intro-points {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     18px;
  padding:        20px 22px;
  background:     var(--hs-green-faint);
  border-radius:  var(--hs-radius-sm);
  border-left:    3px solid var(--hs-green-mid);
}

.hs-wrap .hs-quiz-intro-point {
  font-size:   .88rem;
  color:       var(--hs-green-dark);
  padding-left: 16px;
  position:    relative;
}

.hs-wrap .hs-quiz-intro-point::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        7px;
  width:      6px;
  height:     6px;
  border-radius: 50%;
  background: var(--hs-green-mid);
}

.hs-wrap .hs-quiz-step-label {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--hs-text-muted);
  margin-bottom:  12px;
}

.hs-wrap .hs-quiz-contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
  margin-bottom:         6px;
}

.hs-wrap .hs-quiz-contact-field {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.hs-wrap .hs-quiz-contact-field label {
  font-size:   .82rem;
  font-weight: 600;
  color:       var(--hs-text);
}

.hs-wrap .hs-quiz-contact-field input {
  width:         100%;
  padding:       9px 13px;
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  font-size:     .9rem;
  color:         var(--hs-text);
  background:    #fff;
  outline:       none;
  transition:    border-color var(--hs-transition), box-shadow var(--hs-transition);
  box-shadow:    none;
  -webkit-appearance: none;
}

.hs-wrap .hs-quiz-contact-field input:focus {
  border-color: var(--hs-green-mid);
  box-shadow:   0 0 0 3px rgba(104,186,127,.16);
}

.hs-wrap .hs-required {
  color: var(--hs-danger);
}

/* ── Quiz card wrap (multiple quizzes in dashboard) ─────────────── */
.hs-wrap .hs-quiz-card-wrap + .hs-quiz-card-wrap {
  margin-top: 24px;
}

/* ── Dashboard responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .hs-wrap .hs-overview-grid        { grid-template-columns: 1fr 1fr; }
  .hs-wrap .hs-form-grid            { grid-template-columns: 1fr; }
  .hs-wrap .hs-ic-upload-grid       { grid-template-columns: 1fr; }
  .hs-wrap .hs-account-section      { padding: 18px 16px; }
  .hs-wrap .hs-profile-header       { padding: 16px; gap: 12px; }
  .hs-wrap .hs-avatar-circle        { width: 42px; height: 42px; font-size: .95rem; }
  .hs-wrap .hs-dnav-btn             { padding: 11px 14px; font-size: .82rem; }
  .hs-wrap .hs-quiz-card            { padding: 22px 18px; }
  .hs-wrap .hs-quiz-contact-grid    { grid-template-columns: 1fr; }
}

/* ── Type-first date field ──────────────────────────────── */
/* A visible text box the member types into (DD/MM/YYYY) plus a calendar
   button. The real <input type="date"> is still in the DOM carrying the
   Y-m-d value — it is just never shown.

   .hs-date-control is the positioning context and holds nothing but the
   text input, the button and the hidden native input, so centring the
   button on it is exact whatever height the theme gives the input.

   Note the selector weight. The quiz step already carries a blanket

       .hs-wrap .hs-quiz-step button,
       .hs-wrap .hs-quiz-step input { pointer-events:auto !important;
                                      cursor:pointer; position:relative;
                                      z-index:2; }

   which would drop the button back into the flow and make the invisible
   date input clickable on top of it. Every rule below that has to beat it
   is written as `.hs-date-control <tag>.<class>` (0,3,1) rather than
   `.hs-date-btn` (0,2,0), and pointer-events needs its own !important
   because that is the one declaration the existing rule marks. */

.hs-wrap .hs-date-field {
  display: block;
  width:   100%;
}

.hs-wrap .hs-date-control {
  position: relative;
  display:  block;
  width:    100%;
}

.hs-wrap .hs-date-control input.hs-date-text {
  display:              block;
  width:                100%;
  padding-right:        40px;
  cursor:               text;
  font-variant-numeric: tabular-nums;
  letter-spacing:       .015em;
}

.hs-wrap .hs-date-control input.hs-date-text::placeholder {
  color:          var(--hs-text-muted);
  opacity:        .75;
  letter-spacing: .04em;
}

/* Pure value carrier — it holds the Y-m-d that gets posted and is never
   seen or interacted with. Kept in the layout (rather than display:none) so
   that browser autofill and form serialisation treat it normally. */
.hs-wrap .hs-date-control input.hs-date-native {
  position:       absolute !important;
  left:           0;
  bottom:         0;
  width:          1px;
  height:         1px;
  min-height:     0;
  padding:        0;
  margin:         0;
  border:         0;
  border-radius:  0;
  background:     transparent;
  opacity:        0;
  z-index:        0;
  pointer-events: none !important;
  box-shadow:     none;
}

.hs-wrap .hs-date-control button.hs-date-btn {
  position:           absolute;
  right:              6px;
  top:                50%;
  transform:          translateY(-50%);
  display:            flex;
  align-items:        center;
  justify-content:    center;
  width:              30px;
  height:             30px;
  padding:            0;
  border:             0;
  border-radius:      var(--hs-radius-sm);
  background:         transparent;
  color:              var(--hs-text-muted);
  cursor:             pointer;
  z-index:            3;
  transition:         background var(--hs-transition), color var(--hs-transition);
  -webkit-appearance: none;
  appearance:         none;
}

.hs-wrap .hs-date-control button.hs-date-btn:hover {
  background: var(--hs-green-lt);
  color:      var(--hs-green);
}

.hs-wrap .hs-date-control button.hs-date-btn:active {
  background: var(--hs-green-lt);
}

.hs-wrap .hs-date-control button.hs-date-btn svg {
  display: block;
  width:   17px;
  height:  17px;
}

.hs-wrap .hs-date-hint {
  margin-top: 4px;
  font-size:  .74rem;
  color:      var(--hs-text-muted);
}

.hs-wrap .hs-date-error {
  display:    none;
  margin-top: 4px;
  font-size:  .76rem;
  color:      var(--hs-danger);
}

.hs-wrap .hs-date-field.hs-date-invalid input.hs-date-text {
  border-color: var(--hs-danger);
  box-shadow:   0 0 0 3px rgba(192, 57, 43, .12);
}

.hs-wrap .hs-date-field.hs-date-invalid .hs-date-error {
  display: block;
}

.hs-wrap .hs-date-field.hs-date-invalid .hs-date-hint {
  display: none;
}

/* ── Calendar popup ─────────────────────────────────────── */
/* Our own, rather than the browser's: it opens on a month and year the
   member picks from dropdowns instead of on today, and it behaves the same
   in every browser. Selector weight again has to clear the blanket
   .hs-wrap .hs-quiz-step button rule — see the note above. */

/* The layer is placed in <body> and positioned in JS, so no card with
   overflow:hidden can crop the calendar. */
.hs-date-pop-layer {
  position: absolute;
  z-index:  99999;
  top:      0;
  left:     0;
}

.hs-wrap .hs-date-pop {
  position:      relative;
  width:         278px;
  max-width:     100%;
  padding:       10px;
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius);
  background:    #fff;
  box-shadow:    var(--hs-shadow-hover);
  text-align:    left;
}

.hs-wrap .hs-date-pop-head {
  display:       flex;
  align-items:   center;
  gap:           5px;
  margin-bottom: 8px;
}

.hs-wrap .hs-date-pop select.hs-date-month,
.hs-wrap .hs-date-pop select.hs-date-year {
  flex:          1 1 auto;
  min-width:     0;
  width:         auto;
  padding:       6px 8px;
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background:    #fff;
  color:         var(--hs-text);
  font-size:     .83rem;
  cursor:        pointer;
}

.hs-wrap .hs-date-pop select.hs-date-year { flex: 0 0 82px; }

.hs-wrap .hs-date-pop button.hs-date-nav {
  flex:          0 0 28px;
  width:         28px;
  height:        28px;
  padding:       0;
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background:    #fff;
  color:         var(--hs-text);
  font-size:     1rem;
  line-height:   1;
  cursor:        pointer;
  transition:    background var(--hs-transition), border-color var(--hs-transition);
}

.hs-wrap .hs-date-pop button.hs-date-nav:hover {
  background:   var(--hs-green-lt);
  border-color: var(--hs-green-mid);
}

.hs-wrap .hs-date-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   2px;
}

.hs-wrap .hs-date-dow {
  padding:     4px 0;
  color:       var(--hs-text-muted);
  font-size:   .68rem;
  font-weight: 700;
  text-align:  center;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hs-wrap .hs-date-grid .hs-date-blank {
  height: 32px;
}

.hs-wrap .hs-date-grid button.hs-date-cell {
  height:        32px;
  padding:       0;
  border:        0;
  border-radius: var(--hs-radius-sm);
  background:    transparent;
  color:         var(--hs-text);
  font-size:     .82rem;
  line-height:   1;
  cursor:        pointer;
  transition:    background var(--hs-transition), color var(--hs-transition);
}

.hs-wrap .hs-date-grid button.hs-date-cell:hover:not([disabled]) {
  background: var(--hs-green-lt);
  color:      var(--hs-green-dark);
}

.hs-wrap .hs-date-grid button.hs-date-cell.hs-date-sel {
  background:  var(--hs-green);
  color:       #fff;
  font-weight: 700;
}

.hs-wrap .hs-date-grid button.hs-date-cell.hs-date-out,
.hs-wrap .hs-date-grid button.hs-date-cell[disabled] {
  color:  var(--hs-border);
  cursor: default;
}

.hs-wrap .hs-date-pop-foot {
  display:         flex;
  justify-content: space-between;
  margin-top:      8px;
  padding-top:     8px;
  border-top:      1px solid var(--hs-border-lt);
}

.hs-wrap .hs-date-pop-foot button {
  padding:       5px 12px;
  border:        1.5px solid var(--hs-border);
  border-radius: var(--hs-radius-sm);
  background:    #fff;
  color:         var(--hs-text-muted);
  font-size:     .78rem;
  cursor:        pointer;
  transition:    background var(--hs-transition), color var(--hs-transition);
}

.hs-wrap .hs-date-pop-foot button:hover {
  background: var(--hs-green-lt);
  color:      var(--hs-green);
}

.hs-wrap .hs-date-field.hs-date-open button.hs-date-btn {
  background: var(--hs-green-lt);
  color:      var(--hs-green);
}

@media (max-width: 420px) {
  .hs-wrap .hs-date-pop { width: 264px; }
}