/* =========================================================================================
   CURRENCYEXCHANGE.CSS (PAGE-ONLY)
   -----------------------------------------------------------------------------------------
   TABLE OF CONTENTS
   1) Heat Map
   2) Converter
   3) Top Movers
   4) All Exchange Rates (Table)
   5) Media Queries
   ========================================================================================= */


/* ===================================== 1) HEAT MAP ===================================== */

.fx-map { width: 100%; max-width: 1100px; margin: 12px auto 0; }
.fx-map svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.fx-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
#Option1.box-details { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#Option1 .fx-map, #Option1 .fx-tiles, #Option1 .fx-legend, #Option1 .muted { max-width: 1100px; margin-left: auto; margin-right: auto; }
.fx-legend { margin-top: 10px; opacity: .85; font-size: .9rem; }
.fx-legend .legend-bar { display: flex; gap: 2px; height: 10px; margin: 8px 0 4px; }
.fx-legend .legend-bar span { flex: 1; border-radius: 2px; }
.fx-legend .legend-labels { display: flex; justify-content: space-between; font-size: .85rem; opacity: .8; }
.muted { opacity: .7; font-size: .85rem; display: block; margin-top: 6px; margin-bottom: 10px; }
.fx-country { stroke: rgba(255,255,255,.12); stroke-width: .5px; transition: fill .24s ease, stroke .24s ease; cursor: pointer; }
.fx-country:hover { stroke: rgba(255,255,255,.5); stroke-width: .8px; }
.fx-tiles { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding: 10px 0; margin: 14px auto 0; max-width: 1100px; }
.fx-tiles::-webkit-scrollbar { height: 8px; }
.fx-tiles::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.fx-tiles::-webkit-scrollbar-track { background: transparent; }
.fx-tile { flex: 0 0 auto; min-width: 160px; border: 1px solid #222; background: #0f0f0f; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; color: #fff; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.fx-tile:hover { transform: translateY(-2px); border-color: #2a2a2a; background: #131313; }
.fx-tile .pair { font-weight: 600; font-size: .95rem; opacity: .95; }
.fx-tile .last { font-size: .95rem; opacity: .9; }
.fx-tile .delta { font-size: .9rem; }
.fx-tile .delta.up { color: #2bd47d; }
.fx-tile .delta.down { color: #ff5c5c; }
.fx-tooltip { position: fixed; z-index: 20; pointer-events: none; background: #111; border: 1px solid #222; border-radius: 8px; padding: 8px 10px; font-size: .9rem; box-shadow: 0 6px 16px rgba(0,0,0,.35); }


/* ===================================== 2) CONVERTER ===================================== */

#Option2.box-details { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#Option2 .section-title { margin: 0; text-align: center; align-self: center; }
.fxc-card { background: #0f0f0f; border: 1px solid #222; border-radius: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.fxc { display: flex; flex-direction: column; gap: 14px; }
.fxc-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.v-input { display: inline-flex; flex-direction: column; gap: 6px; font-weight: 500; }
.v-input > input { background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 12px; padding: 10px 12px; font-size: .95rem; min-width: 160px; }
.v-input > input:focus { outline: none; border-color: #00b386; box-shadow: 0 0 0 3px rgba(0,179,134,.25); }
#fxc-swap { height: 42px; min-width: 42px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.fxc-output { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.fxc-rate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.fxc-pair { font-size: 1.05rem; letter-spacing: .2px; }
.fxc-result { margin-top: 4px; display: flex; gap: 8px; align-items: baseline; }
#fxc-result { font-size: 1.6rem; font-weight: 700; }
.fxc-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.fxc-chip { background: #151515; color: #e0e0e0; border: 1px solid #222; border-radius: 999px; padding: 6px 10px; font-size: .9rem; cursor: pointer; transition: background .15s, border-color .15s; }
.fxc-chip:hover { background: #1b1b1b; border-color: #2a2a2a; }
#fxc-spark { color: #00b386; }
.fxc-chart { width: 100%; max-width: 1100px; margin: 8px auto 0; }
#fxc-chart { width: 100%; height: auto; display: block; color: #00b386; }
.is-invalid { border-color: #ff5c5c !important; box-shadow: 0 0 0 3px rgba(255,92,92,.25) !important; }


/* ===================================== 3) TOP MOVERS ===================================== */

.fx-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; }
.fx-movers-col h3 { margin: 0 0 8px 0; font-size: 1rem; opacity: .9; }
.fx-movers-list { list-style: none; margin: 0; padding: 0; background: #0f0f0f; border: 1px solid #222; border-radius: 12px; overflow: hidden; }
.fx-mover { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #151515; cursor: pointer; transition: background .15s; }
.fx-mover:last-child { border-bottom: none; }
.fx-mover:hover { background: #141414; }
.fx-mover .pair { font-weight: 600; }
.fx-mover .last { opacity: .9; margin-right: 10px; }
.fx-mover .delta { min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.fx-mover .delta.up { color: #2bd47d; }
.fx-mover .delta.down { color: #ff5c5c; }
.fx-mbar { flex: 1; height: 6px; background: #1a1a1a; border-radius: 999px; margin: 0 12px; overflow: hidden; }
.fx-mbar > span { display: block; height: 100%; background: currentColor; width: 0; }
#Option3.box-details { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#Option4.box-details { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#Option3 .fx-movers { max-width: 1100px; margin-left: auto; margin-right: auto; }
#fx-table.box-details { display: flex; flex-direction: column; align-items: center; gap: 12px; }


/* ============================ 4) ALL EXCHANGE RATES (TABLE) ============================ */

.fxr-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; max-width: 1100px; margin: 0 auto 8px; }
#fxr-search { background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 12px; padding: 10px 12px; font-size: .95rem; min-width: 220px; flex: 1; }
.fxr-actions { display: flex; gap: 8px; }
.fxr-table-wrap { max-width: 1100px; margin: 0 auto; overflow: auto; border: 1px solid #222; border-radius: 12px; background: #0f0f0f; }
.fxr-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.fxr-table thead th { position: sticky; top: 0; background: #111; border-bottom: 1px solid #222; text-align: left; padding: 10px 12px; font-weight: 600; cursor: pointer; user-select: none; }
.fxr-table thead th:hover { background: #141414; }
.fxr-table tbody td { padding: 10px 12px; border-bottom: 1px solid #1b1b1b; white-space: nowrap; }
.fxr-table tbody tr:hover { background: #131313; }
.fxr-up { color: #2bd47d; }
.fxr-down { color: #ff5c5c; }


/* ===================================== 5) MEDIA QUERIES ===================================== */

@media (max-width: 768px) {
  .fx-movers { grid-template-columns: 1fr; }
  .fxr-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  #fxr-search { min-width: 0; width: 100%; }
  .fxr-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fxr-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fxc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; justify-items: stretch; }
  .fxc-row label:has(#fxc-amount) { grid-column: 1 / -1; }
  .fxc-row label:has(#fxc-from) { grid-column: 1 / 2; }
  #fxc-swap { grid-column: 2 / 3; align-self: end; }
  .fxc-row label:has(#fxc-to) { grid-column: 3 / 4; }
  .fxc-row .v-input > input, .fxc-row .v-select > input { width: 100%; }
  .fxc-row .v-input > input, .fxc-row .v-select > input, #fxc-swap { min-height: 42px; }
}