/* =========================
   mf-health.css (complete)
   ========================= */

/* --- Banner container --- */
.mh-banner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg,#0c1a2e,#1b2d45);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  margin-bottom: 14px;
}
.mh-banner-icon img{
  width: 76px; height: 76px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.mh-banner-text{ flex:1 1 auto; min-width:0; }
.mh-banner-text h2{
  margin:0 0 6px; font-size:1.6rem; font-weight:600; color:#00e0ff; line-height:1.2; overflow-wrap:anywhere;
}
.mh-banner-text p{
  margin:0; color:#b7c0cc; font-size:.95rem; line-height:1.35; overflow-wrap:anywhere;
}
.mh-banner + *{ position:relative; z-index:0; }

/* Mobile fixes */
@media (max-width: 768px){
  .mh-banner{ gap:14px; padding:18px 16px; }
  .mh-banner-icon img{ width:56px; height:56px; }
  .mh-banner-text h2{ font-size:1.35rem; }
  .mh-banner-text p{ font-size:.9rem; }
}
@media (max-width: 576px){
  .mh-banner{ flex-direction:column; align-items:flex-start; padding:16px 14px; }
  .mh-banner-icon img{ width:44px; height:44px; margin-bottom:6px; }
  .mh-banner-text h2{ font-size:1.2rem; }
  .mh-banner-text p{ font-size:.85rem; }
}

/* --- Suggestions (chips) --- */
.mh-suggestions{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem;
  max-height:110px; overflow:auto;
}
.mh-chip{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#e8eefc; border-radius:999px;
  padding:.35rem .6rem; font-size:.85rem; line-height:1; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.mh-chip:hover{ background:#1f4bd8; color:#fff; transform:translateY(-1px); }
.mh-chip:active{ transform:scale(.98); }

.mh-status{ font-size:.9rem; opacity:.85; }
.hidden{ display:none !important; }

/* --- Result container & headline --- */
.mh-out{
  background: rgba(18,32,49,.7);
  border: 1px solid #2a3a4f;
  border-radius: 12px;
  color:#e6eef8;
}
.mh-headline{
  color:#e6eef8; font-weight:600; font-size:1rem;
  padding:12px 12px 8px; border-bottom:1px solid #2a3a4f; margin-bottom:8px;
}

/* --- Grid of metric cards --- */
.mh-grid{
  display:grid; gap:12px; padding:8px 12px 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mh-box{
  background: rgba(18,32,49,.7);
  border:1px solid #2a3a4f;
  border-radius:12px; padding:12px 14px;
}
.mh-box.mh-health{
  background: linear-gradient(135deg, rgba(0,208,255,.08), rgba(18,32,49,.7));
  border-color:#3b556e;
}
.mh-label{ color:#9fb1c6; font-size:.85rem; margin-bottom:6px; }
.mh-value, .mh-score{ font-size:1.15rem; font-weight:600; color:#e6eef8; line-height:1.2; }
.mh-sub{ margin-top:6px; color:#7c8b9b; font-size:.8rem; }

/* Value tints */
.mh-pos{ color:#22c55e; }
.mh-neg{ color:#ef4444; }
.mh-neu{ color:#cbd5e1; }

/* --- Stars & badges --- */
.mh-stars{ font-size:1.15rem; line-height:1; letter-spacing:1px; margin-bottom:6px; display:inline-block; }
.mh-stars .off{ opacity:.28; }
.mh-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.mh-badge{
  border:1px solid #2a3a4f; background:rgba(255,255,255,.04);
  color:#cbd5e1; border-radius:999px; font-size:.78rem; padding:4px 8px; white-space:nowrap;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .mh-grid{ gap:10px; grid-template-columns: 1fr 1fr; }
  .mh-value, .mh-score{ font-size:1.05rem; }
}

/* Small note paragraph inside card */
.mh-out .mh-note{ color:#9fb1c6; }

/* Yellow rating stars */
.mh-stars{
  color:#facc15;                /* warm yellow */
  font-size:1.15rem;
  line-height:1;
  letter-spacing:1px;
  margin-bottom:6px;
  display:inline-block;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);  /* pop on dark bg */
}
.mh-stars .off{
  color:#cbd5e1;                 /* neutral gray for empty stars */
  opacity:.35;
}


/* --- collapsible result --- */
.mh-out{ position:relative; }
.mh-toggle{
  position:absolute; right:10px; top:8px;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #334155; background:#0f172a; color:#e2e8f0;
  padding:4px 8px; border-radius:8px; cursor:pointer; font-size:.85rem;
}
.mh-toggle:hover{ background:#1e293b; }

.mh-body{ overflow:hidden; max-height:0; opacity:0; transition:max-height .35s ease, opacity .25s ease; }
.mh-out.mh-open .mh-body{ opacity:1; }           /* we set max-height via JS for smoothness */
.mh-chevron{ transition: transform .25s ease; display:inline-block; }
.mh-out.mh-open .mh-chevron{ transform: rotate(180deg); }

/* Fix toggle overlap on smaller screens */
.mh-toggle {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 2;
  background: #1e3a8a;
  border: none;
  color: #f8fafc;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mh-toggle:hover {
  background: #2563eb;
}

@media (max-width: 600px) {
  .mh-toggle {
    position: static;
    margin-top: 6px;
    margin-left: auto;
    display: inline-flex;
  }
  .mh-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Desktop stays the same */
.mh-toggle{
  position:absolute; right:12px; top:10px;
  z-index:2; background:#1e3a8a; border:none; color:#f8fafc;
  font-size:.85rem; padding:6px 10px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px;
}
.mh-toggle:hover{ background:#2563eb; }

/* Mobile: move the button below headline, full width, no overlap */
@media (max-width: 600px){
  #mhOut .mh-headline{
    display:flex; flex-direction:column; gap:8px;
    padding-right:0;  /* so text doesn't squeeze */
  }
  .mh-toggle{
    position:static;        /* no absolute on mobile */
    width:100%;             /* big tap target */
    justify-content:center; /* centered text */
    padding:10px 12px;
    font-size:.95rem;
    margin-top:4px;
  }
  /* add bottom breathing room so floating chat widget doesn't cover content */
  #mhOut{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  /* if you know your chat widget height, keep content clear of it: */
  .avoid-fab-bottom{ padding-bottom: 84px; } /* apply to the section below */
}


/* ---- 1. Ghost style for Details button ---- */
.mh-toggle{
  background: transparent;
  border: 1px solid #334155;
  color: #e2e8f0;
}
.mh-toggle:hover{
  background: #0b1220;
}

/* ---- 2. Caret rotation animation ---- */
.mh-toggle .mh-caret{
  transition: transform .2s ease;
}
.mh-open .mh-toggle .mh-caret{
  transform: rotate(180deg);
}

/* ---- 4. Margin fix above Best Mutual Funds section ---- */
#bestMf {
  margin-top: 14px;
}
@media (max-width: 600px){
  #bestMf { margin-top: 18px; }
}