/* ==========================================================================
   Fastols — Tool extras
   Styling for tool markup (percentage / BMI / age / loan calculators, and a
   few smaller widgets) whose HTML uses classes that were never defined in
   style.css. Without this file these tools render with raw browser default
   styling (unstyled buttons, no card/spacing, broken colored bars) and no
   responsive behavior on small screens.
   ========================================================================== */

/* ---------- shared "field caption span" used outside <label> ---------- */
.field>span:first-child{font-size:12.5px;font-weight:800;color:var(--ink-soft);display:block;margin-bottom:6px}

/* ---------- shared toast bubble (percentage / bmi / age / loan) ---------- */
.pct-toast,.bmi-toast,.age-toast,.loan-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:12px 22px;border-radius:999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.35);z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pct-toast.show,.bmi-toast.show,.age-toast.show,.loan-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- shared inline field error ---------- */
.pct-field-error,.bmi-field-error,.age-field-error,.loan-field-error{color:#b4232c;font-size:12.5px;font-weight:700;min-height:0}
.pct-field-error:empty,.bmi-field-error:empty,.age-field-error:empty,.loan-field-error:empty{display:none}

/* ---------- shared result-card action row ---------- */
.pct-actions,.bmi-actions,.age-actions,.loan-actions{display:flex;justify-content:center;padding:18px 22px 26px}

/* ==========================================================================
   Percentage calculator
   ========================================================================== */

/* Calculation-type selector (the 4 mode buttons: "% of a number",
   "Number is what %", "% Change", "Increase/Decrease by %").
   Covers the common class-name patterns used across the site's other
   "pick a mode" widgets (split-mode-btn, bmi-unit-switch, esign-tab) so the
   grid renders correctly and identically whichever one the markup uses. */
.pct-modes,.pct-mode-list,.pct-tabs,.pct-type-list,.calc-mode-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 18px
}
.pct-modes button,.pct-mode-list button,.pct-tabs button,.pct-type-list button,.calc-mode-grid button,
.pct-mode-btn,.pct-tab,.pct-type-btn,.calc-mode-btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:14px 10px;border-radius:var(--radius-md);
  border:1.5px solid var(--border);background:#fff;
  font-family:var(--font-body);font-weight:800;font-size:13.5px;line-height:1.35;
  color:var(--ink-soft);cursor:pointer;transition:.15s;
}
.pct-modes button:hover,.pct-mode-list button:hover,.pct-tabs button:hover,.pct-type-list button:hover,.calc-mode-grid button:hover,
.pct-mode-btn:hover,.pct-tab:hover,.pct-type-btn:hover,.calc-mode-btn:hover{border-color:#2DCC29;color:#2DCC29}
.pct-modes button.active,.pct-mode-list button.active,.pct-tabs button.active,.pct-type-list button.active,.calc-mode-grid button.active,
.pct-mode-btn.active,.pct-tab.active,.pct-type-btn.active,.calc-mode-btn.active{
  border-color:#2DCC29;color:#2DCC29;background:var(--bg-soft);box-shadow:0 6px 16px -10px #2DCC29
}
@media(min-width:640px){
  .pct-modes,.pct-mode-list,.pct-tabs,.pct-type-list,.calc-mode-grid{grid-template-columns:repeat(4,1fr)}
}

.pct-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 2px}
.pct-chips button{background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:8px 16px;font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.pct-chips button:hover{border-color:#2DCC29;color:#2DCC29}
.pct-chips button.active{background:linear-gradient(135deg,#2DCC29,#2DCC29);border-color:transparent;color:#fff}

.pct-result-card{margin:0 22px 6px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:26px 20px;text-align:center}
.pct-value{font-size:clamp(30px,7vw,42px);font-weight:900;color:var(--ink);line-height:1.15;word-break:break-word}
.pct-sub{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em}

/* ==========================================================================
   BMI calculator
   ========================================================================== */
.bmi-unit-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.bmi-unit-switch button{flex:1;min-width:130px;padding:11px 14px;border-radius:11px;border:1.5px solid var(--border);background:#fff;font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.bmi-unit-switch button:hover{border-color:#2DCC29}
.bmi-unit-switch button.active{border-color:#2DCC29;color:#2DCC29;background:var(--bg-soft)}

.bmi-imperial-row{display:flex;gap:10px}
.bmi-imperial-row input{width:100%}

.bmi-result-card{margin:0 22px 6px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:28px 20px 22px;text-align:center}
.bmi-value{font-size:clamp(34px,8vw,46px);font-weight:900;color:var(--ink);line-height:1.1}
.bmi-cat{display:inline-block;margin-top:10px;padding:7px 20px;border-radius:999px;color:#fff;font-weight:800;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bmi-gauge{margin-top:22px}
.bmi-gauge-track{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,#3B82F6 0 46%,#16A34A 46% 62.5%,#D97706 62.5% 75%,#DC2626 75% 100%)}
.bmi-gauge-marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translate(50%,-50%);transition:right .25s}
.bmi-gauge-labels{display:flex;justify-content:space-between;gap:6px;margin-top:10px}
.bmi-gauge-labels span{font-size:10.5px;font-weight:700;color:var(--ink-faint);text-align:center;flex:1}

.bmi-range-box{margin:16px 22px 0;background:var(--primary-50);border:1.5px solid var(--border);border-radius:12px;padding:12px 16px;text-align:center;font-size:12.8px;font-weight:700;color:var(--ink-soft)}
.bmi-range-box b{color:var(--primary-dark);font-weight:900}

/* ==========================================================================
   Age calculator
   ========================================================================== */
.age-hero-card{margin:0 22px 6px;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:26px 20px;text-align:center}
.age-big{font-size:clamp(24px,6vw,34px);font-weight:900;color:var(--ink);line-height:1.3;word-break:break-word}
.age-sub{margin-top:6px;font-size:12.8px;font-weight:600;color:var(--ink-faint)}

.age-extra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 22px 0}
.age-extra-box{background:var(--bg-soft);border:1.5px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.age-extra-box b{display:block;font-size:18px;font-weight:900;color:var(--ink)}
.age-extra-box span{font-size:11px;color:var(--ink-faint);font-weight:700}
@media(min-width:520px){.age-extra-grid{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================================
   Loan calculator
   ========================================================================== */
.loan-optional-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--bg-soft);border:1.5px solid var(--border);border-radius:12px;padding:12px 16px;font-family:var(--font-body);font-weight:800;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.loan-optional-toggle:hover{border-color:#2DCC29;color:#2DCC29}
.loan-optional-toggle svg{width:14px;height:14px;flex-shrink:0;transition:transform .2s}
.loan-optional-toggle.open svg{transform:rotate(180deg)}

.loan-optional-fields{display:none;padding-top:14px}
.loan-optional-fields.open{display:block}

.loan-result-wrap{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin:20px 22px 0}
.loan-donut{position:relative;width:150px;height:150px;border-radius:50%;flex-shrink:0}
.loan-donut::before{content:"";position:absolute;inset:16px;border-radius:50%;background:#fff}
.loan-donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.loan-donut-label b{font-size:19px;font-weight:900;color:var(--ink)}
.loan-donut-label span{font-size:10.5px;font-weight:700;color:var(--ink-faint);margin-top:2px}

.loan-legend{display:flex;flex-direction:column;gap:10px}
.loan-legend span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.loan-legend span i{display:inline-block;width:12px;height:12px;border-radius:4px;flex-shrink:0}

.loan-savings-box{display:none;margin:16px 22px 0;background:#eafbf1;border:1.5px solid #b6efcb;color:#0f6b37;border-radius:12px;padding:12px 16px;font-size:12.8px;font-weight:700;line-height:1.7;text-align:center}
.loan-savings-box.show{display:block}

/* ==========================================================================
   Small isolated fixes (edit-pdf / crop-image / remove-background)
   ========================================================================== */
.edpf-beta-badge{display:inline-block;background:var(--primary);color:#fff;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:999px;vertical-align:middle;margin-inline-start:6px}
.edpf-adbar-label{display:block;text-align:center;font-size:10px;font-weight:700;color:var(--ink-faint);margin-bottom:6px}
.cb-h{display:block}
.rmbg-showcase{display:block}

/* ==========================================================================
   Mobile guardrails
   ========================================================================== */
@media(max-width:480px){
  .pct-result-card,.bmi-result-card,.age-hero-card{margin-inline:16px;padding-inline:16px}
  .bmi-range-box,.age-extra-grid,.loan-result-wrap,.loan-savings-box{margin-inline:16px}
  .pct-chips{margin-inline:0}
  .pct-modes,.pct-mode-list,.pct-tabs,.pct-type-list,.calc-mode-grid{margin-inline:0}
  .pct-modes button,.pct-mode-list button,.pct-tabs button,.pct-type-list button,.calc-mode-grid button,
  .pct-mode-btn,.pct-tab,.pct-type-btn,.calc-mode-btn{min-height:50px;font-size:12.5px;padding:10px 6px}
  .loan-result-wrap{gap:18px}
  .loan-donut{width:120px;height:120px}
  .loan-donut::before{inset:13px}
  .bmi-unit-switch button{min-width:0;font-size:12px;padding:10px 8px}
}

/* ==========================================================================
   Desktop / tablet — the mobile-first rules above are the whole story below
   640px; nothing previously scaled these widgets *up* for larger screens,
   so on desktop they stayed cramped at phone sizing.
   ========================================================================== */
@media(min-width:640px){
  .pct-result-card,.bmi-result-card,.age-hero-card{padding:34px 32px}
  .pct-actions,.bmi-actions,.age-actions,.loan-actions{padding:22px 32px 34px}
  .pct-chips,.pct-modes,.pct-mode-list,.pct-tabs,.pct-type-list,.calc-mode-grid{margin-inline:0}
}
@media(min-width:992px){
  .pct-result-card,.bmi-result-card,.age-hero-card{padding:40px 36px}
  .pct-modes button,.pct-mode-list button,.pct-tabs button,.pct-type-list button,.calc-mode-grid button,
  .pct-mode-btn,.pct-tab,.pct-type-btn,.calc-mode-btn{min-height:60px;font-size:14.5px}
}