/* Online tools (age / BMI / SIP calculators, online-tools.html). Loaded via mmk_tools_css(). */
:root {
  --tl-border: #e3e8ef;
  --tl-text: #1f2937;
  --tl-muted: #6b7280;
  --tl-bg: #f6f8fb;
  --tl-primary: #0d6efd;
  --tl-radius: 14px;
}

/* ---- Cards ---- */
.mmk-tool-hero, .mmk-tool-card, .mmk-tool-section {
  background: #fff; border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04); margin-top: 14px; overflow: hidden;
}
.mmk-tool-hero { border-top: 3px solid var(--tool, var(--tl-primary)); padding: 16px 18px 12px; }
.mmk-tool-hero-head { display: flex; align-items: center; gap: 12px; }
.mmk-tool-ico {
  flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  color: var(--tool, var(--tl-primary)); background: color-mix(in srgb, var(--tool, var(--tl-primary)) 12%, #fff);
}
.mmk-tool-h1 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--tl-text); line-height: 1.3; }
.mmk-tool-desc { margin-top: 10px; color: #374151; line-height: 1.75; }
.mmk-tool-desc p { margin: 0; }
.mmk-tool-hero .webinsights-social-wrapper { margin-top: 10px; }

.mmk-tool-card { padding: 18px; }
.mmk-tool-card-title, .mmk-tool-section-title {
  margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--tl-text); display: flex; align-items: center; gap: 8px;
}
.mmk-tool-card-title::before, .mmk-tool-section-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--tool, var(--tl-primary)); }
.mmk-tool-section { padding: 16px 18px; line-height: 1.8; color: #374151; }
.mmk-tool-section h2, .mmk-tool-section h3 { font-size: 1rem; font-weight: 700; margin: 14px 0 6px; color: var(--tl-text); }
.mmk-tool-section p { margin: 0 0 10px; }
.mmk-tool-section li { margin-left: 18px; }

/* ---- Form ---- */
.mmk-tool-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.mmk-tool-form .mmk-span2 { grid-column: 1 / -1; }
.mmk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mmk-field > label, .mmk-field > span.mmk-label { font-size: .9rem; font-weight: 600; color: var(--tl-text); }
.mmk-field small { color: var(--tl-muted); font-size: .8rem; }
.mmk-field .form-control, .mmk-field input, .mmk-field select {
  width: 100%; min-height: 46px; padding: 8px 12px; font-size: 1rem; color: var(--tl-text);
  border: 1px solid #cfd6e0; border-radius: 10px; background: #fff; box-shadow: none; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.mmk-field input:focus, .mmk-field select:focus, .mmk-field .form-control:focus {
  border-color: var(--tl-primary); box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
.mmk-field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center / 20px; }
.mmk-field-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.mmk-field-row .mmk-field > label { font-size: .8rem; color: var(--tl-muted); font-weight: 600; }
.mmk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 10px; background: var(--tool, var(--tl-primary)); color: #fff !important; font-weight: 600; font-size: 1rem;
  cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--tool, var(--tl-primary)) 30%, transparent); transition: transform .12s, filter .12s;
}
.mmk-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mmk-btn:active { transform: none; }
.mmk-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mmk-actions small { color: var(--tl-muted); }

/* ---- Results ---- */
.mmk-result, .agecalc_result { scroll-margin-top: 14px; }
.mmk-result { margin-top: 16px; border-radius: 12px; border: 1px solid var(--tl-border); background: var(--tl-bg); padding: 16px; }
.mmk-result-label { font-size: .85rem; font-weight: 600; color: var(--tl-muted); text-transform: uppercase; letter-spacing: .04em; }
.mmk-result-main { margin-top: 4px; font-size: 1.35rem; font-weight: 700; color: var(--tl-text); line-height: 1.4; word-break: break-word; }
.mmk-result-main input, .mmk-stat input {
  width: 100%; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; outline: 0; text-overflow: ellipsis;
}
.mmk-result-main input { font-size: 1.35rem; font-weight: 700; }
.mmk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mmk-stat { background: #fff; border: 1px solid var(--tl-border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.mmk-stat b, .mmk-stat label { display: block; font-size: .78rem; font-weight: 600; color: var(--tl-muted); margin: 0 0 2px; }
.mmk-stat span, .mmk-stat input { display: block; font-size: 1rem; font-weight: 600; color: var(--tl-text); }
.mmk-stat--wide { grid-column: 1 / -1; }
.mmk-stat--accent { border-color: color-mix(in srgb, var(--tool, var(--tl-primary)) 40%, #fff); background: color-mix(in srgb, var(--tool, var(--tl-primary)) 7%, #fff); }
.mmk-result-note { margin: 10px 0 0; font-size: .85rem; color: var(--tl-muted); }

/* SIP: invested vs. earned split */
.mmk-split { margin-top: 12px; }
.mmk-split-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #e5e7eb; }
.mmk-split-bar i { display: block; height: 100%; }
.mmk-split-bar .is-invested { background: #94a3b8; }
.mmk-split-bar .is-earned { background: var(--tool, var(--tl-primary)); }
.mmk-split-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: .82rem; color: var(--tl-muted); }
.mmk-split-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

/* BMI: result + scale */
.mmk-bmi-out { font-size: 1rem; line-height: 1.7; }
.mmk-bmi-out:empty { display: none; }
.mmk-bmi-out b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--tl-text); margin-bottom: 4px; }
.mmk-bmi-out span { font-weight: 700; color: var(--tool, var(--tl-primary)); }
.mmk-bmi-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 14px; font-size: .75rem; text-align: center; color: var(--tl-muted); }
.mmk-bmi-scale div::before { content: ""; display: block; height: 6px; border-radius: 3px; margin-bottom: 4px; }
.mmk-bmi-scale .u::before { background: #60a5fa; } .mmk-bmi-scale .n::before { background: #22c55e; }
.mmk-bmi-scale .o::before { background: #f59e0b; } .mmk-bmi-scale .ob::before { background: #ef4444; }
.mmk-bmi-scale b { display: block; color: var(--tl-text); font-size: .8rem; }

/* New age calculator: language pills + result */
.mmk-lang-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 12px; }
.mmk-lang-tabs .btn, .mmk-lang-tabs div {
  flex: 0 0 auto !important; width: auto !important; min-width: 96px; border-radius: 999px !important; padding: 7px 18px !important;
  background: #fff !important; color: var(--tl-text) !important; border: 1px solid #cfd6e0 !important; font-weight: 600; cursor: pointer; margin: 0 !important;
}
.mmk-lang-tabs .activetab { background: var(--tool, var(--tl-primary)) !important; color: #fff !important; border-color: var(--tool, var(--tl-primary)) !important; }
.agecalc_result.mmk-tool-card { border: 1px solid var(--tl-border) !important; }
.agecalc_result .agec { background: color-mix(in srgb, var(--tool, var(--tl-primary)) 10%, #fff); color: var(--tl-text); border-radius: 12px; padding: 16px; font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; }
.agecalc_result .agebody { padding: 0; margin: 0; }
.agecalc_result .bold { background: #fff; border: 1px solid var(--tl-border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; text-align: left; font-weight: 500; }
.agecalc_result .text_center { background: var(--tl-bg); border-radius: 10px; }
.agecalc_result #wtsplink a, .agecalc_result #wtsplink-marathi a, .agecalc_result #wtsplink-hindi a { display: inline-block; margin-top: 6px; }
.mmk-tool-card .it_select { display: contents; }
.mmk-tool-card .input-jax_1 { width: 100% !important; height: 46px !important; border-radius: 10px !important; margin: 0 !important; }

/* ---- Tool tiles (hub + "more tools") ---- */
.mmk-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mmk-tool-tile {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--tl-border); border-radius: 12px; background: #fff;
  text-decoration: none !important; color: inherit !important; transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0;
}
.mmk-tool-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .08); border-color: color-mix(in srgb, var(--tool) 45%, #fff); }
.mmk-tool-tile.is-current { border-color: var(--tool); background: color-mix(in srgb, var(--tool) 5%, #fff); }
.mmk-tool-tile .mmk-tool-ico { width: 42px; height: 42px; }
.mmk-tool-tile-body { min-width: 0; flex: 1; }
.mmk-tool-tile-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--tl-text); font-size: 1rem; }
.mmk-tool-tile-name small { font-weight: 600; font-size: .7rem; color: var(--tool); background: color-mix(in srgb, var(--tool) 12%, #fff); border-radius: 999px; padding: 2px 8px; }
.mmk-tool-tile-mr { font-size: .85rem; color: var(--tl-muted); margin-top: 1px; }
.mmk-tool-tile-desc { font-size: .88rem; color: #4b5563; line-height: 1.6; margin-top: 6px; }
.mmk-tool-tile-cta { margin-top: 8px; font-size: .85rem; font-weight: 600; color: var(--tool); }
.mmk-tool-tile-cta::after { content: " →"; }
.mmk-tools-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; text-decoration: none; }
.mmk-tools-soon { margin-top: 14px; padding: 12px 14px; border: 1px dashed #cfd6e0; border-radius: 12px; color: var(--tl-muted); font-size: .9rem; background: var(--tl-bg); }

/* Hub page header */
.mmk-tools-head { padding: 22px 20px; border-radius: var(--tl-radius); margin-top: 14px; color: #fff;
  background: linear-gradient(135deg, #0b5ed7 0%, #3b82f6 55%, #60a5fa 100%); }
.mmk-tools-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #fff; }
.mmk-tools-head p { margin: 8px 0 0; opacity: .92; line-height: 1.7; max-width: 60ch; }

@media (max-width: 640px) {
  .mmk-tool-form, .mmk-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .mmk-stats { grid-template-columns: minmax(0, 1fr); }
  .mmk-tool-hero, .mmk-tool-card, .mmk-tool-section { padding-left: 14px; padding-right: 14px; }
  .mmk-btn { width: 100%; }
  .mmk-bmi-scale { font-size: .7rem; }
}