/**
 * Forex Calculator Styles
 * Based on user's calculator design with dark theme
 */
/* CSS Variables - Color Scheme */
:root {
  --bg-main: #3a4f63;           /* Main background (header, currency info) */
  --bg-display: #1a1a1a;       /* Display background */
  --bg-buttons: #f0f0f0;       /* Button area background */
  
  --btn-number: #2d3748;       /* Number buttons */
  --btn-memory: #4a5568;       /* Memory buttons */
  --btn-accent: #ed8936;       /* Clear, backspace, equals buttons */
  
  --text-light: #ffffff;       /* Button text and display text */
  --text-display: #ffffff;     /* Display numbers */
  --text-result: #68d391;      /* Result text (currently not used) */
  --text-muted: #888888;       /* Currency labels, info text */
  
  --border-radius: 8px;        /* Button border radius */
  --button-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
  --button-shadow-pressed: 0 1px 2px rgba(0,0,0,0.2); /* Pressed shadow */
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-main);
  color: var(--text-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Main Container */
.calculator-container {
  max-width: 400px;
  margin: 0 10px;
  background: var(--bg-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 20px;
}
/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--bg-main);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-icon {
  width: 42px;
  height: 42px;
  filter: brightness(0) invert(1);
}

.header-title {
  color: var(--text-light);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.settings-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-btn:hover {
  background: rgba(255,255,255,0.1);
}

.settings-btn svg {
  stroke: white;
}

/* Currency Info Section */
.currency-info {
  background: var(--bg-main);
  padding: 15px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.currency-pair {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-light);
}

.exchange-rate {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.last-updated {
  font-size: 12px;
  color: var(--text-muted);
}

/* Display Area */
.display-area {
  background: var(--bg-buttons);
  padding: 20px 20px 15px 20px; /* Reduced bottom padding */
/*  flex: 1; */
}

/* Display */
.display {
  background: var(--bg-display);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--button-shadow);
  font-family: 'Courier New', monospace; /* Monospace for better alignment */
}

.display-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.display-row:last-child {
  margin-bottom: 0;
}

/* --- Alignment --- */
/* These rules ensure the left and right columns are aligned. */
.amounts > span, .currency-header > .currency-code {
    flex: 1; /* Allow them to grow and fill space */
}
.currency-header > .currency-code:first-of-type,
.amounts > span:first-child, 
.info > span:first-child {
    text-align: left;
}
.currency-header > .currency-code:last-of-type,
.amounts > span:last-child, 
.info > span:last-child {
    text-align: right;
}
.currency-header > span:not(.currency-code) {
    flex: 0; /* The arrow should not grow */
}

/* --- Fonts & Colors --- */
/* You can edit the properties in this section to change the look. */

/* For currency codes (e.g., USD, HKD) */
.currency-header .currency-code {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-light); /* Change color for currency codes */
}

/* For the arrow between currencies */
.currency-header > span:not(.currency-code) {
    font-size: 20px;
    color: var(--text-light);
}

/* For the input and result numbers */
.amounts span {
  font-size: 20px;
  font-weight: bold;
  color: #ffff00; /* Change color for amount */
  letter-spacing: -1px; /* Change spacing between characters */
}

/* For the result number specifically */
#resultAmount {
    color: var(--text-result); /* Change color for the result amount */
}

/* For info labels like 'Ex Rate' and 'Last Updated' */
.info span:first-child {
  font-size: 12px;
  color: var(--text-muted); /* Change color for info labels */
}

/* For info values (the actual rate and date) */
.info span:last-child {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-muted); /* Change color for info values */
}

/* Keypad */
.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0;
}

/* Button Base Styles */
.btn {
  border: none;
  border-radius: var(--border-radius);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: var(--button-shadow);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.95);
  box-shadow: var(--button-shadow-pressed);
}

/* Button Press Animation */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.btn.pressed::before {
  width: 100px;
  height: 100px;
}

/* Number Buttons */
.btn-number {
  background: var(--btn-number);
  color: var(--text-light);
}

.btn-number:hover {
  background: #3a4a5c;
}

/* Memory Buttons */
.btn-memory {
  background: var(--btn-memory);
  color: var(--text-light);
  font-size: 16px;
}

.btn-memory:hover {
  background: #5a6b7d;
}

/* Accent Buttons (Clear, Swap, Backspace, Equals) */
.btn-accent {
  background: var(--btn-accent);
  color: var(--text-light);
}

.btn-accent:hover {
  background: #f6ad55;
}

/* Wide Buttons */
.btn-wide {
  grid-column: span 2;
}

/* Specific Button Styles */
.btn-clear {
  font-size: 16px;
}

.btn-swap {
  font-size: 20px;
}

.btn-backspace {
  font-size: 20px;
}

.btn-equals {
  font-size: 24px;
  font-weight: 700;
}

.btn-zero {
  font-size: 18px;
}

.btn-decimal {
  font-size: 24px;
}

/* Footer */
.footer {
  background: var(--bg-main);
  padding: 15px 20px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  color: var(--text-muted);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: var(--bg-main);
  border-radius: var(--border-radius);
  padding: 20px;
  max-width: 350px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-light);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-light);
}

/* Settings Modal */
.setting-group {
  margin-bottom: 20px;
}

.setting-group:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.setting-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 10px;
}

.setting-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.currency-select {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--border-radius);
  background: var(--bg-display);
  color: var(--text-light);
  font-size: 16px;
}

.btn-swap-settings {
  background: var(--btn-accent);
  color: var(--text-light);
  border: none;
  padding: 10px 15px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
}

.sound-toggle-btn {
  width: 100%;
  padding: 12px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.sound-toggle-btn:hover {
  background: #357abd;
}

.sound-toggle-btn.active {
  background: #4a90e2;
}

.sound-toggle-btn:not(.active) {
  background: #6c757d;
}

.sound-toggle-btn:not(.active) .toggle-icon {
  opacity: 0.5;
}

.btn-swap-settings {
  padding: 8px 16px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.btn-swap-settings:hover {
  background: #357abd;
}

.btn-update {
  width: 100%;
  padding: 12px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}

.btn-update:hover {
  background: #357abd;
}

.btn-save {
  width: 100%;
  padding: 15px;
  background: #ff8c00;
  color: white;
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 20px;
  transition: background 0.2s ease;
}

.btn-save:hover {
  background: #e67e00;
}

.currency-label {
  display: block;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 5px;
}

/* History Modal */
.history-list {
  max-height: 300px;
  overflow-y: auto;
}

.history-item {
  background: var(--bg-display);
  border-radius: var(--border-radius);
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid var(--btn-accent);
}

.history-conversion {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 5px;
}

.history-details {
  font-size: 14px;
  color: var(--text-muted);
}

.btn-clear-history {
  width: 100%;
  padding: 12px;
  background: #e53e3e;
  color: var(--text-light);
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  cursor: pointer;
  margin-top: 15px;
}

/* Responsive Design */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
  }
  
  .header {
    padding: 12px 15px;
  }
  
  .display-area {
    padding: 15px;
  }
  
  .btn {
    height: 55px;
    font-size: 16px;
  }
  
  .display-line {
    font-size: 16px;
  }
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid var(--text-light);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Error States */
.error {
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.1);
  border: 1px solid rgba(229, 62, 62, 0.3);
  padding: 10px;
  border-radius: var(--border-radius);
  margin: 10px 0;
  text-align: center;
}


/* ==================== CACHE STATUS & WARNINGS ==================== */

.warning-message {
    background: #fed7d7;
    color: #c53030;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #e53e3e;
    font-size: 14px;
    display: none;
}

.cache-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.cache-status.fresh {
    background: #c6f6d5;
    color: #22543d;
}

.cache-status.good {
    background: #bee3f8;
    color: #2a4365;
}

.cache-status.old {
    background: #fed7d7;
    color: #c53030;
}

/* Update rate display to include cache status */
.rate-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.rate-info .exchange-rate {
    flex: 1;
}

.rate-info .cache-status {
    margin-left: auto;
}


/* ==================== FOOTER ==================== */

.footer {
    background: var(--bg-main);
    padding: 10px 20px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-line {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-logo {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* ==================== QR CODE & SHARING ==================== */

.qr-container {
    text-align: center;
    padding: 15px;
    background: var(--bg-display);
    border-radius: var(--border-radius);
}

.qr-code {
    width: 150px;
    height: 150px;
    margin: 0 auto 10px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
}

.share-url {
    color: var(--text-muted);
    font-size: 14px;
    word-break: break-all;
    margin-top: 10px;
}

.sound-info {
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

/* ==================== SOUND INDICATOR AS BUTTON ==================== */


.sound-indicator {
    background: none;
    border: none;
    font-size: 20px;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px;
    border-radius: 6px;
}

.sound-indicator:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

.sound-indicator.sound-off {
    opacity: 0.4;
}