/* ============================================
   FX Calculator - Responsive Styles
   ============================================ */

/* Desktop styles are inline in the PHP file */

/* Tablet and Mobile Responsive Styles */
@media screen and (max-width: 768px) {
  /* Currency selection grid - stack vertically on mobile */
  .fx-calculator-page .calculator-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Swap button - adjust positioning */
  .fx-calculator-page #swapCurrencies {
    margin: var(--space-4) auto !important;
    padding-top: 0 !important;
  }

  /* Results table - make scrollable on mobile */
  .fx-calculator-page table {
    font-size: var(--text-sm) !important;
  }

  .fx-calculator-page th,
  .fx-calculator-page td {
    padding: var(--space-2) !important;
  }

  /* Savings comparison table - reduce font size */
  .fx-calculator-page .educational-content table {
    font-size: var(--text-xs) !important;
  }

  /* CTA buttons - stack vertically */
  .fx-calculator-page div[style*="display: flex"][style*="gap"] {
    flex-direction: column !important;
  }

  .fx-calculator-page div[style*="display: flex"][style*="gap"] a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Reduce padding on mobile */
  .fx-calculator-page .calculator-card {
    padding: var(--space-4) !important;
  }

  /* Adjust font sizes */
  .fx-calculator-page h1 {
    font-size: var(--text-3xl) !important;
  }

  .fx-calculator-page h2 {
    font-size: var(--text-2xl) !important;
  }

  .fx-calculator-page #displayAmount {
    font-size: var(--text-3xl) !important;
  }

  .fx-calculator-page #savingsAmount {
    font-size: var(--text-3xl) !important;
  }
}

@media screen and (max-width: 480px) {
  /* Even smaller adjustments for very small phones */
  .fx-calculator-page .hero-subheading {
    font-size: var(--text-base) !important;
  }

  .fx-calculator-page .calculator-card {
    padding: var(--space-3) !important;
  }

  /* Reduce table header font size */
  .fx-calculator-page th {
    font-size: var(--text-xs) !important;
  }

  /* Stack table on very small screens */
  .fx-calculator-page table,
  .fx-calculator-page thead,
  .fx-calculator-page tbody,
  .fx-calculator-page th,
  .fx-calculator-page td,
  .fx-calculator-page tr {
    display: block;
  }

  .fx-calculator-page thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .fx-calculator-page tr {
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: 4px;
  }

  .fx-calculator-page td {
    border: none;
    position: relative;
    padding-left: 50% !important;
    text-align: right !important;
  }

  .fx-calculator-page td:before {
    position: absolute;
    top: var(--space-2);
    left: var(--space-3);
    width: 45%;
    padding-right: var(--space-2);
    white-space: nowrap;
    font-weight: var(--font-semibold);
    text-align: left;
    font-size: var(--text-xs);
  }

  /* Add labels for mobile table view */
  .fx-calculator-page tbody tr:nth-of-type(1) td:nth-of-type(1):before { content: "Provider:"; }
  .fx-calculator-page tbody tr:nth-of-type(1) td:nth-of-type(2):before { content: "Rate:"; }
  .fx-calculator-page tbody tr:nth-of-type(1) td:nth-of-type(3):before { content: "You Receive:"; }

  .fx-calculator-page tbody tr:nth-of-type(2) td:nth-of-type(1):before { content: "Provider:"; }
  .fx-calculator-page tbody tr:nth-of-type(2) td:nth-of-type(2):before { content: "Rate:"; }
  .fx-calculator-page tbody tr:nth-of-type(2) td:nth-of-type(3):before { content: "You Receive:"; }
}

/* Print styles */
@media print {
  .fx-calculator-page .btn,
  .fx-calculator-page #swapCurrencies,
  .fx-calculator-page #calculateBtn {
    display: none;
  }

  .fx-calculator-page #resultsContainer {
    display: block !important;
  }
}