/* ==========================================================
   MetaboAI – A1C Tool (Scoped + Dark Tool Panel Only)
   - Page background stays LIGHT (theme-controlled)
   - Only the tool area (.mb-tool-bg) is dark
   - No conflicts with site header/menu
   ========================================================== */

/* --- Outer wrapper: do NOT color the whole page --- */
#mb-a1c-tool{
  background: transparent !important;
  padding: 0 !important;
}

/* --- Dark background ONLY for the tool block --- */
#mb-a1c-tool .mb-tool-bg{
  background: #2c2a2a;
  padding: 70px 0 70px;
}

/* --- Inner container --- */
#mb-a1c-tool .mb-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

#mb-a1c-tool *{ box-sizing: border-box; }

/* --- Formula / hint text on dark bg --- */
#mb-a1c-tool .formula,
#mb-a1c-tool .hint{
  color: #fff;
}

#mb-a1c-tool .hint strong{ color:#fff; }

#mb-a1c-tool .hint code{
  color: #ff4da6;
  background: transparent;
  padding: 0;
  font-size: 13px;
}

/* --- Layout grid --- */
#mb-a1c-tool .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 26px;
}

@media (max-width: 980px){
  #mb-a1c-tool .grid{ grid-template-columns: 1fr; }
}

/* --- Cards (white) --- */
#mb-a1c-tool .card{
  background: #fff;
  border-radius: 18px;
  border: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  padding: 34px 34px;
  min-height: 320px;
}

#mb-a1c-tool .card h2{
  margin: 0 0 18px;
  font-size: 18px;
  color: #111;
  letter-spacing: -0.01em;
}

/* --- Labels + inputs --- */
#mb-a1c-tool label{
  display: block;
  margin: 12px 0 6px;
  font-size: 13px;
  color: #6b7280;
}

#mb-a1c-tool input,
#mb-a1c-tool select,
#mb-a1c-tool button{
  font: inherit;
}

#mb-a1c-tool input[type="number"],
#mb-a1c-tool input[type="text"],
#mb-a1c-tool select{
  width: 100%;
  border-radius: 14px;
  border: 3px solid #dbeac6;   /* soft green */
  padding: 14px 14px;
  font-size: 16px;
  outline: none;
  background: #fff;
}

#mb-a1c-tool input:focus,
#mb-a1c-tool select:focus{
  border-color: #7bbf24;
  box-shadow: 0 0 0 5px rgba(123,191,36,.18);
}

/* --- Rows (if your markup uses .row) --- */
#mb-a1c-tool .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 520px){
  #mb-a1c-tool .row{ grid-template-columns: 1fr; }
}

/* --- Buttons --- */
#mb-a1c-tool .actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  align-items: center;
}

#mb-a1c-tool button,
#mb-a1c-tool .btn{
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

#mb-a1c-tool .btn.primary,
#mb-a1c-tool button.primary{
  background: #7bbf24;
  color: #0b1b0b;
  border: 0;
  padding: 12px 16px;
}

#mb-a1c-tool .btn.primary:hover,
#mb-a1c-tool button.primary:hover{
  background: #67a91b;
}

#mb-a1c-tool .btn.ghost,
#mb-a1c-tool button.ghost{
  background: #eef2f7;
  color: #111827;
  border: 0;
  padding: 12px 16px;
}

/* --- Slider spacing (if present) --- */
#mb-a1c-tool input[type="range"]{
  width: 100%;
  margin-top: 14px;
}

/* --- Big A1C output (covers common ids/classes) --- */
#mb-a1c-tool .a1c,
#mb-a1c-tool .a1c-value,
#mb-a1c-tool .result-value,
#mb-a1c-tool #a1cValue,
#mb-a1c-tool #a1cResult,
#mb-a1c-tool .output strong{
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
  display: inline-block;
  margin: 10px 0 10px;
  color: #666; /* matches your screenshot's gray */
}

/* --- Footer notes on dark background --- */
#mb-a1c-tool .disclaimer,
#mb-a1c-tool .footer-note,
#mb-a1c-tool .note,
#mb-a1c-tool .muted,
#mb-a1c-tool p{
  color: rgba(255,255,255,.78);
}

#mb-a1c-tool .card p,
#mb-a1c-tool .card .muted{
  color: #374151; /* inside cards, normal readable text */
}

/* ================================
   Boxed black tool container
   ================================ */

#mb-a1c-tool{
  background: transparent;     /* page stays light */
  padding: 0;
}

/* THIS is the black box */
#mb-a1c-tool .mb-tool-bg{
  background: #2c2a2a;
  max-width: 1200px;           /* controls box width */
  margin: 80px auto;           /* centers it on page */
  padding: 70px 60px 60px;
  border-radius: 22px;         /* soft rounded box */
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

/* inner layout container */
#mb-a1c-tool .mb-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

#mb-a1c-tool .mb-tool-bg{
  padding: 0px 40px 0px;   /* ↓ top & bottom reduced */
}

/* Fix unit select text vertical alignment */
#mb-a1c-tool select{
  height: 54px;              /* match number input height */
  line-height: 54px;         /* center text vertically */
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

/* Safari / Chrome arrow alignment */
#mb-a1c-tool select option{
  line-height: normal;
}

#mb-a1c-tool .unit,
#mb-a1c-tool input.unit{
  height: 54px;
  line-height: 54px;
  padding-top: 0;
  padding-bottom: 0;
}


.a1c {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}

.a1c-status {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
}
.a1c,
.a1c * {
  color: inherit;
}

.a1c {
  color: inherit;
}

.a1c small {
  margin-left: 2px;
}