footer .consent-link a:link,
footer .consent-link a:visited {
  color: blue;            /* default state */
  text-decoration: underline;
}

footer .consent-link a:hover {
  color: blue;            /* stays blue on hover */
}

footer .consent-link a:active {
  color: red;             /* flashes red while clicking */
}

:root{
      --bg:#0f172a; --panel:#0b1220; --muted:#94a3b8; --text:#e5e7eb;
      --accent:#22c55e; --border:#1f2937; --input:#0a1020; --shadow:0 12px 36px rgba(0,0,0,.35);
    }
    body{margin:0;color:var(--text);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg)}
    main{max-width:1100px;margin:0 auto;padding:24px 16px 60px}
    .card{background:linear-gradient(180deg,#0d1422,#0a111e);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .stack{display:flex;flex-direction:column;gap:6px}
    label{font-size:12px;color:var(--muted)}
    input[type="number"],input[type="text"]{padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--input);color:var(--text);outline:none}
    .btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
    button{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0c1526;color:#e5e7eb;font-weight:700;cursor:pointer}
    .rate-pill{font-size:12px;border:1px solid var(--border);background:#0a1222;border-radius:999px;padding:6px 10px;color:var(--muted)}
    .footer-note{margin-top:10px;color:var(--muted);font-size:12px}

    @media (max-width:780px){ .grid-2{grid-template-columns:1fr} }
    @media (max-width:560px){
      .calc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
      .k.equals{grid-column:1 / -1}
    }

:root {
      --bg: #0f172a; --panel: #0b1220; --muted: #94a3b8; --text: #e5e7eb;
      --accent: #22c55e; --accent-2: #14b8a6; --border: #1f2937; --input: #0a1020;
      --elev: rgba(2,6,23,.8);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; /* page-level background removed to use shared style.css */ color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
    a { color: inherit; text-decoration: none; }
    header.nav { position: sticky; top: 0; z-index: 1000; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
    .nav-inner { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .brand { font-weight: 700; letter-spacing: .3px; padding-right: 8px; display: flex; align-items: center; font-size: 30px}
    .nav-spacer { flex: 1; }
    .nav-link { padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; color: var(--muted); }
    .nav-link:hover { background: #0b1220; color: var(--text); border-color: var(--border); }
    .nav-link.active { color: white; border-color: var(--accent-2); background: rgba(20,184,166,0.1); }
    main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
    .card {
      background: radial-gradient(1200px 600px at 100% -10%, rgba(20,184,166,0.12), transparent 35%),
                  radial-gradient(800px 400px at -20% -10%, rgba(34,197,94,0.12), transparent 40%),
                  var(--panel);
      border: 1px solid var(--border); border-radius: 16px; padding: 18px;
      box-shadow: 0 10px 30px rgba(0,0,0,.3);
    }
    h1 { font-size: 28px; margin: 8px 0 12px; }
    p.lead { color: var(--muted); margin-top: 0; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .grid-3 { display: grid; grid-template-columns: 1fr; gap: 10px; }
    label { font-size: 12px; color: var(--muted); display:block; margin-bottom:6px }
    input[type="text"], input[type="number"] { width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--input); color: var(--text); outline: none; font-size: 16px; }
    input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
    button { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: #081020; color: var(--text); cursor: pointer; }
    button.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #04120e; font-weight: 700; border: none; }
    .footer-note { margin-top: 14px; font-size: 12px; color: var(--muted); }
    .stack { display:flex; flex-direction:column; gap:10px }
    .rate-pill { font-size: 12px; color: var(--muted); border:1px solid var(--border); border-radius: 999px; padding: 6px 10px; display:inline-block }
    .success { color: #34d399 }

    /* Searchable dropdown (compact, not fullscreen) */
    .select { position: relative; }
    .dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--elev); border:1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-height: 300px; overflow: auto; padding: 6px; z-index: 500; display:none; }
    .opt { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
    .opt:hover, .opt.active { background: rgba(20,184,166,0.15); }
    .hidden { display:none !important; }

    @media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.nav-flex { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-flex .links { flex: 1; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }


/* Inline page background */
html, body {
  background: url('../pictures/background.png') center center / cover no-repeat fixed !important;
}

footer{ max-width:1100px; margin:0 auto; padding:24px 16px 40px; color:var(--muted); font-size:12px; margin-bottom: 35px }
    .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
    
/* --- Mobile overrides injected by ChatGPT (max-width: 430px) --- */
@media (max-width: 430px) {
  html, body { overflow-x: hidden; }
  main { padding: 16px 12px 48px; }
  header.nav { position: sticky; top: 0; }
  .nav-inner { padding: 10px 12px; gap: 8px; }
  .nav-flex .links { gap: 8px; justify-content: center; }
  .nav-link { padding: 8px 10px; }
  h1 { font-size: 22px; line-height: 1.2; }
  h2 { font-size: 18px; line-height: 1.25; }
  p, .lead { font-size: 14px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 10px; }
  .stack { gap: 10px; }
  input[type="text"], input[type="number"], input[type="search"], input[type="email"], select, textarea {
    width: 100%; font-size: 16px; padding: 12px; border-radius: 12px;
  }
  button { width: 100%; padding: 12px 14px; border-radius: 12px; }
  .btn-row { gap: 8px; }
  .card { padding: 14px; border-radius: 14px; }
  .select, .dropdown { width: 100%; }
  .dropdown { max-height: 240px; }
  img, video, canvas, svg { max-width: 100%; height: auto; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rate-pill { display: inline-block; margin-top: 6px; }
  /* Prevent fixed widths from breaking layout */
  [style*="width:"] { max-width: 100% !important; }
  /* Ensure panels don't overflow */
  .panel, .container, .content { width: 100%; }
}

/* --- Mobile nav fixes injected by ChatGPT --- */
@media (max-width: 430px) {
  header.nav { width: 100%; }
  .nav-inner { flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .nav-flex { flex-direction: column; gap: 6px; width: 100%; align-items: center; }
  .nav-flex .links { flex-direction: column; gap: 6px; align-items: center; width: 100%; }
  .nav-link { display: block; width: 100%; text-align: center; }
}

/* --- Compact mobile nav layout (<=430px) --- */
@media (max-width: 430px) {
  header.nav { width: 100%; }
  .nav-inner { width: 100%; padding: 8px 10px; }
  .nav-flex { width: 100%; flex-direction: column; align-items: center; gap: 6px; }
  .nav-flex .links {
    display: grid; width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px; justify-items: center;
  }
  .nav-link { display: block; width: 100%; text-align: center; padding: 8px 6px; }
}

/* Inline form status styles */
.form-status{margin:10px 0;padding:10px 12px;border-radius:10px;border:1px solid var(--border,#1f2937);
background:rgba(20,184,166,.1);color:var(--text,#e5e7eb);display:none}
.form-status.error{background:rgba(239,68,68,.1)}

/* Mobile-only fixes (Crypto/Currency stays one line, Fractions & Percentages may wrap) */
    @media (max-width: 700px) {
      .nav-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.2;
        box-sizing: border-box;
      }
      .nav-flex .links { gap: 10px; }
      .brand { margin-bottom: 8px !important; }
      .nav-flex .links, .links { margin-top: 6px; }
      /* Allow wrapping for Fractions & Percentages */
      .fractions-link {
        white-space: normal !important;
        overflow: visible;
        text-overflow: unset;
        display: block;
        text-align: center;
        line-height: 1.3;
      }
      .terms_conditions-link {
        white-space: normal !important;
        overflow: visible;
        text-overflow: unset;
        display: block;
        text-align: center;
        line-height: 1.3;
      }
    }

/* Extracted from fractions.html (style #14) */
@media (max-width: 600px) {
  .brand {
    margin-top: 6px;
  }
}

/* === Added by ChatGPT: Percentage Tools layout === */
.pct-tool h3 { margin: 6px 0; }


/* Align added tools' typography with the original section */
.pct-tool h3 { font-size: 18px; font-weight: 700; margin: 14px 0 8px; }
.pct-tool label { font-size: 12px; color: var(--muted); }
.pct-tool .btn-row { margin-top: 10px; }

/* Extra spacing above Percentage Tools section */
#percentage-tools-heading { margin-top: 28px; }

/* === Added: clearer answers === */
.answer { font-size: 20px; font-weight: 400; margin-top: 6px; color: var(--text); }

/* === Highlighted answer style === */
.answer-highlight {
  color: #16a34a;
  font-weight: 700;
  text-decoration: underline double;
  text-underline-offset: 4px; /* spacing between text & underline */
}

/* Added by ChatGPT: spacing between percentage tools */
.pct-tool {
  margin-top: 28px !important;   /* more space above each tool */
  padding-top: 14px;             /* internal padding for separation */
  border-top: 1px solid var(--border); /* subtle divider line */
}

/* Added by ChatGPT: more space between buttons and the answer output */
.pct-tool .footer-note.answer {
  margin-top: 20px !important;
}

/* === NEW: Row layout so the button sits to the right and centers in leftover space === */
.pct-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pct-row .stack { flex: 1; }      /* inputs keep equal width */
.pct-row .btn-wrap {
  flex: 1;                        /* take remaining horizontal space */
  display: flex;
  justify-content: center;        /* center the button in that space */
}

/* === NEW: Half-size, themed Calculate buttons (distinct from inputs) === */
.pct-row {
  display: flex;
  align-items: flex-start; /* align items at the top */
  gap: 12px;
}

.calc-btn {
  width: 50%;
  padding: 10px 14px;
  margin-top: 11%;   /* pushes the button down to align with inputs */
  border-radius: 10px;
  background: #1e293b;   /* flat, dark slate */
  color: #d1d5db;        /* soft light grey text */
  font-weight: 600;
  border: 1px solid #334155;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.calc-btn:hover {
  background: #334155;
  transform: translateY(-1px);
}

/* === Collapsible tool sections (title+description always visible) === */
.pct-tool .tool-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
}
.pct-tool .head-text { flex: 1; }

.tool-toggle {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  line-height: 0;
  color: var(--muted);
}
.tool-toggle:focus-visible { outline: 2px solid var(--border); border-radius: 8px; }

.tool-toggle .chev {
  display: inline-block;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(135deg); /* down */
  transition: transform .2s ease;
}
.pct-tool.open .tool-toggle .chev { transform: rotate(-45deg); /* up */ }

.tool-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
}
.pct-tool.open .tool-body {
  opacity: 1;
}


/* === Updated by ChatGPT: Open/Close button styling for percentage tools === */
.pct-tool .tool-head { align-items: center; }
.tool-toggle {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0c1526;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.pct-tool.open .tool-toggle { background: #0f1a31; }
.tool-toggle .chev { display: none !important; } /* legacy child hidden */


/* === Added by ChatGPT: show hand cursor when hovering over whole tool card (for expanding) === */
.pct-tool { cursor: pointer; }
.pct-tool .tool-head, 
.pct-tool .tool-body, 
.pct-tool input, 
.pct-tool button { cursor: default; }


/* === Added by ChatGPT: pointer cursor on the whole clickable tool surface when collapsed === */
.pct-tool:not(.open) { cursor: pointer; }
.pct-tool:not(.open) .tool-head, 
.pct-tool:not(.open) .head-text { cursor: pointer; }
/* Keep normal cursors for interactive elements inside the body when expanded */
.pct-tool.open .tool-body input,
.pct-tool.open .tool-body button,
.pct-tool.open .tool-body select,
.pct-tool.open .tool-body textarea,
.pct-tool.open .tool-body label { cursor: auto; }

/* === Force pointer cursor for all interactive buttons in percentage tools === */
button.tool-toggle,
button.calc-btn,
button[id$="-run"],
button.tool-clear {
  cursor: pointer !important;
}

button.tool-toggle:hover,
button.calc-btn:hover,
button[id$="-run"]:hover,
button.tool-clear:hover {
  cursor: pointer !important;
}

/* Show hand cursor on the clickable header area (open or closed) */
.pct-tool .tool-head {
  cursor: pointer !important;
}
.pct-tool .tool-head * {
  cursor: inherit !important; /* keep the hand over title/desc inside header */
}

/* Keep real buttons as pointers too */
button.tool-toggle,
button.calc-btn,
button[id$="-run"],
button.tool-clear {
  cursor: pointer !important;
}
.empty-space {
  height: 1px;     /* how tall the blank area is */
  width: 100%;       /* full width of its container */
}

/* =========================================================
   ✅ MOBILE-ONLY FIXES FOR PERCENTAGE TOOLS (no desktop change)
   ========================================================= */

/* Make the section header compact and keep the "Open" button small & right-aligned */
@media (max-width: 600px) {
  .pct-tool .tool-head { align-items: flex-start; gap: 10px; }
  .pct-tool .head-text h3 { font-size: 16px; margin: 0; line-height: 1.25; }
  .pct-tool .head-text p  { font-size: 13px; margin: 4px 0 0; line-height: 1.35; }
  .pct-tool .tool-head .tool-toggle {
    margin-left: auto;
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
  }
}

/* Stack inputs and the Calculate button vertically; no weird margins */
@media (max-width: 600px) {
  .pct-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pct-row .stack { width: 100%; }
  .pct-row .btn-wrap { width: 100%; display: block; }
  .pct-row .calc-btn { width: 100%; margin-top: 0; }
  /* Keep the small "Clear" button compact */
  .pct-tool .btn-row button { width: auto; }
}

/* Override the global "button: width:100%" rule on very small screens for the header toggle */
@media (max-width: 430px) {
  .pct-tool .tool-head .tool-toggle { width: auto !important; }
}