/**
 * NEWZEEFY Forex Styling Engine (forex.css)
 * Premium CSS styling, light & dark theme rules, responsive layouts & micro-animations
 */

/* 1. CSS Custom Properties / Color Tokens */
:root {
  --forex-primary: #2563eb;
  --forex-success: #059669;
  --forex-danger: #dc2626;
  --forex-warning: #d97706;
  --forex-card-bg: #ffffff;
  --forex-card-border: rgba(0, 0, 0, 0.06);
  --forex-text-main: #0f172a;
  --forex-text-sub: #64748b;
  --forex-input-bg: #ffffff;
  --forex-hover-bg: #f8fafc;
}

/* Dark Mode Overrides */
body.dark-theme,
[data-bs-theme="dark"],
html[data-theme="dark"] {
  --forex-card-bg: #1e293b;
  --forex-card-border: rgba(255, 255, 255, 0.08);
  --forex-text-main: #f8fafc;
  --forex-text-sub: #94a3b8;
  --forex-input-bg: #0f172a;
  --forex-hover-bg: #334155;
}

/* 2. Forex Cards & General Container Styles */
.forex-card {
  background-color: var(--forex-card-bg) !important;
  border: 1px solid var(--forex-card-border) !important;
  color: var(--forex-text-main) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.dark-theme .card,
html[data-theme="dark"] .card {
  background-color: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6,
body.dark-theme .fw-bold, body.dark-theme .text-dark,
html[data-theme="dark"] .text-dark {
  color: #f8fafc !important;
}

body.dark-theme .text-muted,
html[data-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

/* 3. Hero Section Special Glow */
.forex-hero-card {
  box-shadow: 0 10px 30px rgba(5, 150, 105, 0.25) !important;
}

.forex-hero-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* 4. Converter Controls Styling */
#forexConverterForm input,
#forexConverterForm select {
  background-color: var(--forex-input-bg) !important;
  color: var(--forex-text-main) !important;
  border-color: var(--forex-card-border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#forexConverterForm input:focus,
#forexConverterForm select:focus {
  border-color: var(--forex-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.15) !important;
}

body.dark-theme .input-group-text,
html[data-theme="dark"] .input-group-text {
  background-color: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

/* Swap Icon Animation */
#btnSwapCurrency {
  transition: background-color 0.2s ease, transform 0.3s ease;
}

#btnSwapCurrency:hover {
  background-color: #e2e8f0;
}

body.dark-theme #btnSwapCurrency {
  background-color: #334155 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.swap-rotate {
  animation: rotateSwap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rotateSwap {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

/* Pulse Dot for Live Connection */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Rate Value Flash Effect */
.rate-flash-up {
  animation: flashGreen 0.6s ease;
}

.rate-flash-down {
  animation: flashRed 0.6s ease;
}

@keyframes flashGreen {
  0% { color: #10b981; background-color: rgba(16, 185, 129, 0.15); }
  100% { background-color: transparent; }
}

@keyframes flashRed {
  0% { color: #ef4444; background-color: rgba(239, 68, 68, 0.15); }
  100% { background-color: transparent; }
}

/* 5. Table Styling for Dark & Light Mode */
body.dark-theme table,
html[data-theme="dark"] table {
  color: #f8fafc !important;
}

body.dark-theme table th,
html[data-theme="dark"] table th {
  background-color: #0f172a !important;
  color: #94a3b8 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme table td,
html[data-theme="dark"] table td {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-theme table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover {
  background-color: #334155 !important;
}

/* 6. FAQ Accordion Dark Mode */
body.dark-theme .accordion-item,
html[data-theme="dark"] .accordion-item {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme .accordion-button,
html[data-theme="dark"] .accordion-button {
  color: #f8fafc !important;
  background-color: transparent !important;
}

body.dark-theme .accordion-button::after,
html[data-theme="dark"] .accordion-button::after {
  filter: invert(1);
}

/* 7. Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot,
  .swap-rotate,
  .rate-flash-up,
  .rate-flash-down {
    animation: none !important;
    transition: none !important;
  }
}