/* ============================================================
   PaisaNurture — Mobile Responsive Overrides
   Injected into all calculators. Do NOT edit PDF code.
   ============================================================ */

/* ── Disclaimer footer ────────────────────────────────────── */
.pn-disclaimer {
  max-width: 1200px;
  margin: 24px auto 8px;
  padding: 14px 20px;
  background: #F7F6F2;
  border: 1px solid #E5E1D8;
  border-radius: 10px;
  font-size: 13px;
  color: #6B7280;
  line-height: 1.65;
}
.pn-disclaimer strong { color: #1F2933; }

/* ── Base touch improvements (all screen sizes) ───────────── */
input[type=number],
input[type=text],
input[type=email],
input[type=tel],
select {
  font-size: 16px !important; /* prevents iOS zoom on focus */
}

button, .btn {
  touch-action: manipulation;
  min-height: 44px;
}

/* ── Mobile breakpoint ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Body padding */
  body { padding: 14px !important; }

  /* ── Typography ── */
  h1 { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 16px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }

  /* ── Grid layouts → single column ── */
  .container,
  .grid2,
  .layout,
  .cards,
  .kpis,
  .metricGrid,
  .metricGrid,
  .summary,
  .recommend,
  .scenarioGrid,
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Flex rows → stack ── */
  .top-bar,
  .btnRow,
  .top-actions,
  .actions,
  .sectionTitle,
  .emailRow,
  .reportButtons,
  .footerBtns,
  .label-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* ── Inputs ── */
  input[type=number] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  input[type=range] { width: 100% !important; }
  .emailRow input { width: 100% !important; }
  .pill { width: 100% !important; box-sizing: border-box !important; }

  /* ── Buttons ── */
  button,
  .btn,
  .btn-download,
  .btn-email {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 4px 0 !important;
    text-align: center !important;
  }

  /* ── Card / panel padding ── */
  .inputs,
  .results,
  .panel,
  .card,
  .outputWrap,
  .wrap,
  .card.results,
  .assumption-box,
  .headsup,
  .outputCard,
  .scenarioCard {
    padding: 14px !important;
  }

  /* ── Card values / KPI numbers ── */
  .card-value,
  .kpi p,
  .metric .v,
  .bigResult .amount,
  #corpus, #additional, #sip {
    font-size: 18px !important;
  }

  /* ── Charts ── */
  canvas {
    max-height: 260px !important;
  }
  .chart-container,
  .chartBox,
  .chart-box {
    height: 260px !important;
  }

  /* ── Tables → horizontal scroll ── */
  .bigTable,
  .table,
  .summaryTable,
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
  }

  /* ── SIP reckoner period pills ── */
  .periodCustom {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .canvasWrap { overflow-x: auto !important; }
  .chartCanvas { width: 100% !important; min-width: 500px; }

  /* ── Report / page layout ── */
  .report, .page { width: 100% !important; min-height: unset !important; }
  .reportWrap { padding: 10px !important; }
  .pageInner { padding: 14px !important; }

  /* ── Summary / result boxes ── */
  .summary-box,
  .card,
  .kpi,
  .metric,
  .outputCard {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Specific calculators ── */

  /* Retirement / NPS sliders */
  .input-group { padding-bottom: 12px !important; }

  /* HRA result grid */
  .metricGrid { grid-template-columns: 1fr 1fr !important; } /* keep 2 cols for small cards */

  /* IRR grid */
  .grid2 { grid-template-columns: 1fr !important; }

  /* EMI / loan */
  .result-grid { grid-template-columns: 1fr 1fr !important; }

  /* FD / SSY */
  .container { gap: 16px !important; }

  /* Goal calculator */
  .goal-grid { grid-template-columns: 1fr !important; }

  /* Disclaimer */
  .pn-disclaimer { margin: 16px 0 8px !important; }

  /* Download button row alignment */
  .top-bar .actions,
  .top-bar { justify-content: stretch !important; }
}

/* ── Small phones ─────────────────────────────────────────── */
@media (max-width: 480px) {
  h1 { font-size: 22px !important; }
  .metricGrid { grid-template-columns: 1fr !important; }
  .cards { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: 1fr !important; }
  .summary { grid-template-columns: 1fr 1fr !important; }
}