/*
 * Health System — Public CSS v1.2.1
 * Rise Up / ANCOM — https://ancom.demoinnovate.net/
 *
 * 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:     #CFFFDC;
  --hs-green-mid:    #68BA7F;
  --hs-green-dark:   #1b4028;
  --hs-green-faint:  #f0faf3;
  --hs-danger:       #c0392b;
  --hs-danger-lt:    #ffeaea;
  --hs-warning:      #d97706;
  --hs-warning-lt:   #fff7e0;
  --hs-border:       #c8e6cf;
  --hs-shadow:       0 2px 16px rgba(46, 111, 64, .10);
  --hs-shadow-hover: 0 6px 24px rgba(46, 111, 64, .18);
  --hs-radius:       12px;
  --hs-radius-sm:    8px;
  --hs-text:         #1a2e1e;
  --hs-text-muted:   #5a7460;
  --hs-transition:   .2s 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:        32px 36px;
  margin-bottom:  24px;
  /* Isolation: prevent parent column padding doubling up */
  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:        2px solid var(--hs-green);
  border-radius: var(--hs-radius);
  padding:       36px 40px;
  text-align:    center;
  animation:     hs-fade-up .4s ease both;
}

.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:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding:        3px 10px;
  border-radius:  99px;
  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);
  color:          #fff;
  padding:        11px 15px;
  text-align:     left;
  font-weight:    600;
  font-size:      .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space:    nowrap;
  /* Override theme table header styles */
  border:         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:       6px 16px;
  border-radius: 99px;
  border:        1.5px solid var(--hs-border);
  background:    #fff;
  font-size:     .82rem;
  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:             16px;
  padding:         20px 24px;
  background:      var(--hs-green);
  border-radius:   var(--hs-radius) var(--hs-radius) 0 0;
  color:           #fff;
}

.hs-wrap .hs-avatar-circle {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    rgba(255,255,255,.18);
  border:        2px solid rgba(255,255,255,.35);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.1rem;
  font-weight:   700;
  color:         #fff;
  flex-shrink:   0;
  letter-spacing: .04em;
}

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

.hs-wrap .hs-profile-name {
  font-weight: 700;
  font-size:   1rem;
  color:       #fff;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

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

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

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

/* ── 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:       13px 20px;
  border:        none;
  background:    none;
  color:         var(--hs-text-muted);
  font-size:     .88rem;
  font-weight:   600;
  cursor:        pointer;
  border-bottom: 3px solid transparent;
  white-space:   nowrap;
  transition:    color var(--hs-transition), border-color var(--hs-transition);
  outline:       none;
  text-decoration: none;
  display:       inline-flex;
  align-items:   center;
  line-height:   1;
  box-shadow:    none;
  border-radius: 0;
}

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

.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-radius: var(--hs-radius);
  padding:       20px 16px;
  text-align:    center;
  box-shadow:    var(--hs-shadow);
}

.hs-wrap .hs-ov-num {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--hs-green);
  line-height: 1;
}

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

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

/* ── 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:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding:        3px 10px;
  border-radius:  99px;
}

.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;
}

.hs-wrap .hs-card-title {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--hs-green);
}

/* ── 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;
}

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

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

.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; }
}