/* ===================================================================
   MAIN.CSS — GLOBAL DESIGN SYSTEM (GOOGLE COMPACT THEME)
   Applies to ALL pages + ALL calculators
=================================================================== */


/* ================================================================
   1) RESET & ROOT
================================================================ */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --text:#202124;
  --muted:#5f6368;
  --accent:#1a73e8;
  --border:#e5e7eb;
  --bg:#ffffff;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  background:#fff;
  color:var(--text);
  line-height:1.55;
  padding-top:74px;
}


/* ================================================================
   2) LAYOUT
================================================================ */
.container {
  max-width:1180px;
  margin:0 auto;
  padding:0 16px;
}

/* ================================================================
   3) TYPOGRAPHY — Google Compact
================================================================ */
h1 { font-size:30px; font-weight:600; margin-bottom:12px; color:#111827; }
h2 { font-size:20px; font-weight:600; margin-bottom:10px; color:#1e293b; }
h3 { font-size:16px; font-weight:600; margin-bottom:8px; color:#374151; }

p, li {
  font-size:14px;
  color:#4b5563;
  margin-bottom:8px;
}


/* ================================================================
   4) HEADER (GLOBAL)
================================================================ */
.header {
  position:fixed;
  top:0; left:0;
  width:100%;
  background:#fff;
  z-index:999;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

.header-inner {
  min-height:54px;          /* responsive height */
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;           /* CRITICAL */
  padding:10px 16px;        /* mobile-safe padding */
  max-width:1200px;
  margin:0 auto;
}

.nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.nav a {
  color:var(--accent);
  font-size:14.5px;
  font-weight:500;
}

@media (max-width: 768px) {

  .header-inner {
    justify-content:center;
    gap:12px;
  }

  .nav {
    width:100%;
    justify-content:center;
    gap:14px;
  }

  .nav a {
    font-size:14px;
  }
}

/* ================================================================
   5) BUTTONS
================================================================ */
.primary, .muted, .download {
  padding:8px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-weight:600;
}

.primary { background:#1a73e8; color:#fff; }
.muted   { background:#e8e8e8; color:#333; }
.download{ background:#0f9d58; color:#fff; }


/* ================================================================
   6) GLOBAL CALCULATOR LAYOUT
================================================================ */
.calculator-page {
  font-size:14px;
  line-height:1.5;
}

.calc-wrapper {
  display:flex;
  gap:24px;
}

.calc-left { flex:1; }
.calc-right {
  width:300px;
  position:sticky;
  top:80px;
  display:flex;
  flex-direction:column;
  gap:20px;
}


/* ================================================================
   7) GLOBAL CARD COMPONENT
================================================================ */
.calc-section {
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 20px;
  margin-top:20px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

/* ===================================================================
   UNIVERSAL INPUT PANEL + FORM GRID SYSTEM
   Works for ALL calculators (EMI, BMI, RD, FD, Math, etc.)
=================================================================== */

/* Input Panel Wrapper */
.input-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Input Form Container */
.input-form {
  display: block;
  width: 100%;
}

/* Shadow Input Panel section */

.input-form.calc-section,
.summary-box.calc-section,
.chart-box.calc-section {
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 18px 20px 22px;
  background: rgba(15, 23, 42, 0.015);

  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.045),
    0 10px 18px -18px rgba(15, 23, 42, 0.14);
}

/* --------------- GRID SYSTEM --------------- */

/* 2 Columns */
.form-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
  margin-bottom: 16px;
}

/* 3 Columns */
.form-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 22px;
  margin-bottom: 16px;
}

/* 4 Columns */
.form-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 22px;
  margin-bottom: 16px;
}

/* --------------- INPUTS & LABELS --------------- */

.input-panel label,
.input-form label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

.input-panel input,
.input-panel select,
.input-form input,
.input-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
}

/* Error text */
.field-error {
  color: #d93025;
  font-size: 13px;
  margin-top: 4px;
  display: block;
}

/* Actions (Calculate / Reset buttons) */
.input-form .actions {
  margin-top: 10px;
  display: flex;
  gap: 12px;
}

.input-form .actions button {
  min-width: 120px;
}

/* --------------- RESPONSIVE LOGIC --------------- */

@media (max-width: 992px) {
  .form-grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid-4col,
  .form-grid-3col,
  .form-grid-2col {
    grid-template-columns: 1fr;
  }
}

/* --------------- Result Grid --------------- */

 .results-grid {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:16px;
}

#emiChart { height:220px !important; }

@media(max-width:900px){
  .results-grid {
    grid-template-columns:1fr;
  }
}

/* ================================================================
   9) TABLES
================================================================ */
table {
  width:100%;
  border-collapse:collapse;
}

th {
  background:#f4f4f4;
  padding:6px 8px;
  font-size:13px;
}

td {
  padding:6px 8px;
  border:1px solid #eee;
  font-size:13px;
}

/* Pointer cursor on expandable amortization rows */
.amort-table-wrapper tbody tr {
  cursor: pointer;
}

/* Optional: subtle hover effect for clarity */
.amort-table-wrapper tbody tr:hover {
  background:#f5f8ff;
}

/* Shadow yearly table */

#yearlyTable {
  background: #ffffff;
  border-radius: 0;        /* keep sharp */
  border: none;

  /* IMPORTANT: space for shadow to breathe */
  margin-top: 10px;

  /* clearer, structured shadow */
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.06),
    0 14px 28px -18px rgba(15, 23, 42, 0.18);
}

/* ====================================================
   UNIVERSAL EXPANDABLE TABLE SYSTEM
   (Used by EMI, FD, RD, SIP, Tax, and future calculators)
==================================================== */

/* Hidden monthly rows — collapsed by default */
.monthly-rows {
  display: none;
  background: #fafafa;
}

.monthly-rows td {
  padding: 6px 8px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
}

/* Expand/Collapse icon/text on yearly rows */
.year-row .expand {
  color: #1a73e8;
  font-weight: 600;
  cursor: pointer;
  padding-right: 8px;
  user-select: none;
}

/* When a row becomes active (JS toggles this) */
.year-row.active .expand {
  color: #0d5ac7;
}

/* Optional: highlight cells for better readability */
.principal-cell { 
  background:#eaf4df; 
  color:#2f6f1a; 
  font-weight:600; 
}

.interest-cell  { 
  background:#fff7ea; 
  color:#9a4b00; 
  font-weight:600; 
}

.balance-cell   { font-weight:600; }
.pct-cell       { color:#1a73e8; font-weight:600; }

/* Responsive handling for flexible tables */
@media (max-width: 600px) {
  .monthly-rows td, 
  .year-row td {
    font-size: 12px;
    padding: 5px 6px;
  }
}

/* ================================================================
   12) SUMMARY + CHART BOX
================================================================ */
/* .summary-box .big {
  font-size:22px;
  font-weight:700;
}

.chart-box canvas {
  width:100%;
  height:220px !important;
}

.legend {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:6px;
}

.dot {
  width:12px; height:12px;
  border-radius:50%;
  display:inline-block;
}

.dot.principal { background:#7bb241; }
.dot.interest  { background:#f0932b; } */


/* ================================================================
   13) RESPONSIVENESS
================================================================ */
@media(max-width:900px){
  .calc-wrapper {
    flex-direction:column;
  }
  .calc-right {
    width:100%;
    position:relative;
    top:0;
  }
}

/* GLOBAL SAFE LINK RESET */
a {
  text-decoration:none;
  color:var(--accent);
}

a:hover {
  text-decoration:underline;
}

/* RIGHT SIDEBAR WIDGETS FIX */
.calc-right > div {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

/* ============================
   BREADCRUMB — COMPACT STYLE
============================ */
.breadcrumb {
  font-size:13px;                  /* smaller text */
  color:#6b7280;                   /* soft grey */
  margin-top:8px;                  /* small gap under header */
  margin-bottom:12px;              /* space before page title */
  padding:0 16px;                  /* matches container padding */
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
  padding-left: 2px;
}

/* Ensure links look minimal */
.breadcrumb a {
  color:#1a73e8;
  text-decoration:none;
  font-size:13px;
}

.breadcrumb a:hover {
  text-decoration:underline;
}

/* The separator ( / or > ) */
.breadcrumb .separator {
  color:#9ca3af;                   /* muted grey */
  font-size:12px;
}

/* ================================
   BULLETPROOF STICKY SIDEBAR FIX
================================ */
.calc-right {
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start;
  height: max-content;
}

.calc-wrapper {
  display:flex;
  gap:24px;
}

.calc-wrapper,
.calculator-page,
.container {
  overflow: visible !important;
}

.calc-right > div {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

/* REMOVE BULLETS FROM SIDEBAR WIDGET LISTS */
.calc-right ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.calc-right li {
  padding-left: 0 !important;
  margin: 0 0 6px 0;   /* small spacing between items */
  border-bottom: 1px solid #f1f1f1;  /* optional: clean divider */
  padding-bottom: 6px;
}

.calc-right li:last-child {
  border-bottom: none;
}

/* =======================================================
   PREMIUM AMORTIZATION TABLE DESIGN
======================================================= */

.amort-table-wrapper {
  margin-top:20px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  overflow-x:auto;                 /* responsive */
  padding:10px 0;                  /* soft container */
}

/* Make table full width inside wrapper */
.amort-table-wrapper table {
  width:100%;
  border-collapse:separate;
  border-spacing:0 6px;            /* premium row spacing */
}

/* Header row */
.amort-table-wrapper thead th {
  background:#f8fafc;
  color:#1e293b;
  font-size:13px;
  font-weight:600;
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
}

/* Each row becomes a "card row" */
.amort-table-wrapper tbody tr {
  background:#ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  border-radius:8px;
}

/* Rounded corners for the row */
.amort-table-wrapper tbody tr td:first-child {
  border-radius:8px 0 0 8px;
}
.amort-table-wrapper tbody tr td:last-child {
  border-radius:0 8px 8px 0;
}

/* Table cells */
.amort-table-wrapper tbody td {
  padding:12px 12px;
  font-size:13px;
  color:#4b5563;
  border-bottom:none;
}

/* Hover effect (premium finance UI) */
.amort-table-wrapper tbody tr:hover {
  background:#f5f8ff;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:0.15s ease;
}

/* Make first column stronger */
.amort-table-wrapper tbody td:first-child {
  font-weight:600;
  color:#1a73e8;
}

/* Responsive text wrapping for small screens */
@media(max-width:600px){
  .amort-table-wrapper tbody td {
    white-space:nowrap;
  }
}

/* ======================================================
   PREMIUM SUMMARY SECTION
====================================================== */
.summary-box {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:22px 24px;
  margin-top:24px;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
}

/* Title styling (premium accent bar) */
.summary-box h2 {
  font-size:20px;
  font-weight:600;
  color:#1e293b;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.summary-box h2::before {
  content:"";
  width:5px;
  height:18px;
  background:#1a73e8;
  border-radius:3px;
  display:inline-block;
}

/* Big values like EMI, Total Interest, etc */
.summary-box .big {
  font-size:24px;
  font-weight:700;
  color:#111827;
  margin-bottom:6px;
}

/* Label under big value */
.summary-box .label {
  font-size:13px;
  color:#6b7280;
}

/* SECTION DIVIDERS */
.summary-box .summary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:20px;
}

@media(max-width:600px){
  .summary-box .summary-grid {
    grid-template-columns:1fr;
  }
}

/* Each summary item card */
.summary-box .summary-item {
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:14px 16px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
  text-align:center;
}

/* ================================================
   PREMIUM CHART CONTAINER
================================================ */
.chart-box {
  margin-top:20px;
  padding:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}

/* Canvas fix to avoid stretching */
.chart-box canvas {
  width:100% !important;
  max-height:260px !important;
}

/* Legend styling */
.legend {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:12px;
}

.legend .dot {
  width:14px;
  height:14px;
  border-radius:50%;
  display:inline-block;
}

.legend span {
  font-size:13px;
  color:#374151;
}

/* =====================================================
   PREMIUM INPUT FIELD DESIGN
===================================================== */

.calc-section .row {
  margin-bottom:16px !important;
}

.calc-section label {
  font-size:13px;
  font-weight:600;
  color:#374151;
  margin-bottom:6px;
  display:block;
}

.calc-section input,
.calc-section select {
  width:100%;
  padding:10px 12px;
  font-size:14px;
  background:#ffffff;
  border:1px solid #d1d5db;
  border-radius:10px;

  box-shadow:0 1px 3px rgba(0,0,0,0.04);
  transition:all .2s ease;
}

/* Focus effect */
.calc-section input:focus,
.calc-section select:focus {
  border-color:#1a73e8;
  box-shadow:0 0 0 3px rgba(26,115,232,0.15);
  outline:none;
}

/* Placeholder styling */
.calc-section input::placeholder {
  color:#9ca3af;
}

/* Grid for two-column input rows */
.input-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media(max-width:600px){
  .input-grid {
    grid-template-columns:1fr;
  }
}

/* Optional: Icon inside the input (premium) */
.input-icon-group {
  position:relative;
}

.input-icon-group input {
  padding-left:38px;
}

.input-icon-group i {
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  font-size:16px;
  color:#9ca3af;
}

/* =====================================================
   PREMIUM WIDGET (SIDEBAR) CARD DESIGN
===================================================== */

.calc-right > div {
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.calc-right h3 {
  font-size:16px;
  font-weight:600;
  color:#1e293b;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Accent bar for premium heading */
.calc-right h3::before {
  content:"";
  width:4px;
  height:16px;
  background:#1a73e8;
  border-radius:3px;
  display:inline-block;
}

.calc-right a {
  color:#1a73e8;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  display:block;
  line-height:1.35;
}

.calc-right a:hover {
  text-decoration:underline;
}

/* ============================
   FIX AD SLOT SIZE (300 × 250)
============================ */
/* Actual ad slot size — stays 300 × 250 */
#sidebarAd {
  width:300px !important;
  height:250px !important;
  background:#f8f8f8; /* placeholder */
  border-radius:10px;
  margin:0 auto;
}

/* ======================================================
   AMORTIZATION TABLE EXPAND/COLLAPSE ICONS
====================================================== */

.amort-table-wrapper tbody tr::after {
  content:"▾"; /* down arrow */
  color:#9ca3af;
  font-size:12px;
  position:absolute;
  right:16px;
}

.amort-table-wrapper tbody tr.active::after {
  content:"▴"; /* up arrow when expanded */
}

/* Global inline field validation styling */
.field-error {
  color: #d93025;       /* Google error red */
  font-size: 13px;
  margin-top: 3px;
  display: block;
}

/* Highlight input when invalid (global style) */
.input-error {
  border-color: #d93025 !important;
  background: #fff6f6;
}

/*==========================*/
/* CLEAN PREMIUM GRID (Flat) */
/*===========================*/
.calc-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 30px;
  align-items: stretch; /* IMPORTANT: equal height columns */
}

/* Flat category container */
.calc-block {
  background: #fff;
  padding: 16px 0 6px;
  border-bottom: 2px solid #f0f0f0; /* subtle separator line */
  transition: all .18s ease;
  min-height: 240px; /* ensures equal height across categories */
  display: flex;
  flex-direction: column;
}

/* Hover effect: underline + slight lift */
.calc-block:hover {
  border-bottom-color: #0A66C2;
  transform: translateY(-2px);
}

/* Category heading */
.calc-block h3 {
  margin-bottom: 12px;
  padding: 0 2px;
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
}

/* List */
.calc-block ul {
  margin: 0;
  padding-left: 18px;
  flex: 1; /* fill remaining height */
}

/* Links */
.calc-block ul li {
  margin-bottom: 8px;
}

.calc-block ul li a {
  color: #0A66C2;
  font-weight: 500;
  text-decoration: none;
}

.calc-block ul li a:hover {
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 950px) {
  .calc-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .calc-columns {
    grid-template-columns: repeat(1, 1fr);
  }
}

/*all calculator listing fix - end */

.calc-block.empty {
  visibility: hidden;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

   /* ================================================================
   UNIVERSAL FAQ SYSTEM (EMI STYLE — CLEAN, MINIMAL, GOOGLE UI)
   Applies to ALL calculators (BMI, EMI, FD, RD, Tax, etc.)
================================================================ */

/* ================================================================
   UNIVERSAL FAQ SYSTEM — CLEAN EMI STYLE
================================================================ */

.faq-section {
  margin-top: 30px;
}

.faq-section h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1e293b;
}

/* FAQ ITEM */
.faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
}

.faq-item:last-child {
  border-bottom: none;
}

/* FAQ QUESTION */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color .2s ease;
}

.faq-question:hover {
  color: #1a73e8;
}

.faq-question span {
  font-size: 20px;
  line-height: 1;
  transition: transform .25s ease;
}

/* rotate + to × */
.faq-item.active .faq-question span {
  transform: rotate(45deg);
}

/* FAQ ANSWER */
.faq-answer {
  margin-top: 10px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.55;
  display: none;
  padding: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.faq-item.active .faq-answer {
  display: block;
}

/* ===============================
   PREMIUM STATIC CONTENT STYLING
   apply to pages like contact, about, privacy, etc.
================================ */

.static-content {
  font-size: 15.5px;
  line-height: 1.7;
  color: #1f2937;
}

.static-content h2 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.static-content p {
  margin-bottom: 14px;
}

.static-content ul {
  margin: 12px 0 16px 18px;
}

.static-content li {
  margin-bottom: 8px;
}


/* ================================
   Calculator Group Heading UI
================================ */

.calc-block h3 {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  display: inline-block;
  width: 100%;
}

/* ================================
   Premium Calculator Group Card
================================ */

.calc-block h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
  padding-left: 12px;
  position: relative;
}

.calc-block h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  height: 18px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2563eb, #60a5fa);
}

/* ================================
   Calculator Listing Footer Text
================================ */

.listing-footer-content {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.listing-footer-content h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0f172a;
}

.listing-footer-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 10px;
}


/* ================================================================
   FOOTER — CLEAN, MAINTAINABLE, MODERN
================================================================ */

/* Base footer */
footer {
  background: #f8f9fa;
  border-top: 1px solid #e5e7eb;
  padding: 40px 0 28px;
  margin-top: 40px;
  font-size: 14px;
  color: #5f6368;
}

/* Main footer grid */
footer > :first-child {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Headings */
footer h3,
footer h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 10px;
}

/* Lists */
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer li {
  margin-bottom: 6px;
}

/* Links */
footer a {
  color: #5f6368;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
  transition: color .2s ease;
}

footer a:hover {
  color: #1a73e8;
}

/* Icons */
footer i,
footer svg,
footer img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Social icons row */
footer .social,
footer .social-icons {
  margin-top: 20px;
  text-align: center;
}

footer .social a,
footer .social-icons a {
  font-size: 18px;
  margin: 0 6px;
}

/* Footer bottom */
footer .footer-bottom {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width: 900px) {
  footer > :first-child {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  footer > :first-child {
    grid-template-columns: 1fr;
    text-align: center;
  }

  footer a {
    justify-content: center;
  }
}

/* ============================================================
   INFO SECTION — SAME STYLE AS INPUT PANEL
   (Soft background, no boxy feel)
============================================================ */

.info-section,
.input-rules-section {
  margin-top: 19px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 36px;
}

.info-section h2 {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
} 

.info-section h2:first-child {
  margin-top: 0;
}

.info-section h2,
.input-rules-section h2 {
  position: relative;
  padding-left: 22px;
}

/* BIG primary line */
.info-section h2::before,
.input-rules-section h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 1.6em;
  background: rgba(37, 99, 235, 0.8);
  border-radius: 2px;
}

/* SMALL secondary line */
.info-section h2::after,
.input-rules-section h2::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.45em;
  width: 2px;
  height: 0.9em;
  background: rgba(37, 99, 235, 0.5);
  border-radius: 2px;
}

/* Paragraphs */
.info-section p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #334155;
  max-width: 760px;
}

/* Lists */
.info-section ul {
  margin: 12px 0 0 18px;
  max-width: 760px;
}

.info-section li {
  font-size: 15px;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 6px;
}

/* Emphasis */
.info-section strong {
  font-weight: 600;
  color: #0f172a;
}

/* =========================================
   Global Input Normalization (CSS-only)
   FoxCalculator Standard
========================================= */

/* Base consistency for all common inputs */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"] {
  font-size: 15px;
  line-height: 1.4;
  min-height: 36px;
  padding: 6px 10px;
  font-family: inherit;

  appearance: auto;
  -webkit-appearance: auto;
  box-sizing: border-box;

  font-variant-numeric: tabular-nums; /* aligns digits everywhere */
}

/* Improve mobile tap clarity */
input {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================
   Number Inputs — Spinner Behavior
   Desktop only (mobile is OS-controlled)
========================================= */

/* Hide spinners by default (Chrome / Edge / Safari desktop) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show spinners on hover or focus */
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button {
  opacity: 1;
}

/* Firefox: hide arrows by default */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Firefox: show arrows on hover/focus */
input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: number-input;
}

/* =========================================
   Focus & Interaction Feedback (Unified)
========================================= */

input:focus {
  outline: none;
}

/* ======================================================
   END OF MAIN.CSS