/* ============================================================
   RFX Markets Widget — Stylesheet
   Matches RevelationFX dark/gold theme
   ============================================================ */

:root {
    --mw-bg:          #0d1018;
    --mw-bg-card:     #131720;
    --mw-bg-row-alt:  #111521;
    --mw-bg-input:    #1c2030;
    --mw-border:      #232840;
    --mw-border-lite: #2e3550;
    --mw-gold:        #C9A84C;
    --mw-gold-light:  #e0c070;
    --mw-gold-muted:  rgba(201,168,76,0.10);
    --mw-gold-glow:   rgba(201,168,76,0.18);
    --mw-text:        #eef0f8;
    --mw-text-soft:   #a0aac0;
    --mw-text-muted:  #6e7a99;
    --mw-green:       #27ae60;
    --mw-red:         #e74c3c;
    --mw-radius:      12px;
    --mw-radius-sm:   8px;
    --mw-font:        -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --mw-ease:        0.2s ease;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.rfx-mw {
    width: 100%;
    font-family: var(--mw-font);
    color: var(--mw-text);
    background: var(--mw-bg-card);
    border: 1px solid var(--mw-border);
    border-radius: var(--mw-radius);
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,168,76,0.04);
}

.rfx-mw *,
.rfx-mw *::before,
.rfx-mw *::after { box-sizing: border-box; }

/* ── Controls bar ───────────────────────────────────────────── */
.rfx-mw__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mw-border);
    flex-wrap: wrap;
    background: var(--mw-bg);
}

.rfx-mw__controls-left  { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rfx-mw__controls-right { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

/* Status dot */
.rfx-mw__status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rfx-mw__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mw-text-muted);
    flex-shrink: 0;
    transition: background var(--mw-ease);
}
.rfx-mw__status-dot.is-live    { background: var(--mw-green); box-shadow: 0 0 0 0 rgba(39,174,96,0.5); animation: mw-pulse 2s ease-in-out infinite; }
.rfx-mw__status-dot.is-loading { background: var(--mw-gold);  animation: mw-blink 1s ease-in-out infinite; }
.rfx-mw__status-dot.is-error   { background: var(--mw-red); animation: none; }

@keyframes mw-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(39,174,96,0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(39,174,96,0); }
}
@keyframes mw-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.rfx-mw__status-text  { font-size: 0.82rem; color: var(--mw-text-soft); font-weight: 500; }
.rfx-mw__refresh-info { font-size: 0.76rem; color: var(--mw-text-muted); }

/* Label */
.rfx-mw__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 5px;
}

/* Base select */
.rfx-mw__select-wrap { position: relative; }
.rfx-mw__select-wrap::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--mw-gold);
    pointer-events: none;
}
.rfx-mw__select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--mw-bg-input);
    border: 1px solid var(--mw-border);
    border-radius: var(--mw-radius-sm);
    padding: 8px 32px 8px 12px;
    color: var(--mw-text);
    font-size: 0.88rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color var(--mw-ease);
    min-width: 120px;
}
.rfx-mw__select:focus  { border-color: var(--mw-gold); }
.rfx-mw__select option { background: #1c2030; }

/* Search */
.rfx-mw__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.rfx-mw__search-icon {
    position: absolute;
    left: 10px;
    color: var(--mw-text-muted);
    pointer-events: none;
}
.rfx-mw__search {
    background: var(--mw-bg-input);
    border: 1px solid var(--mw-border);
    border-radius: var(--mw-radius-sm);
    padding: 8px 12px 8px 30px;
    color: var(--mw-text);
    font-size: 0.88rem;
    outline: none;
    width: 200px;
    transition: border-color var(--mw-ease), width var(--mw-ease);
}
.rfx-mw__search:focus  { border-color: var(--mw-gold); width: 240px; }
.rfx-mw__search::placeholder { color: var(--mw-text-muted); }

/* Refresh button */
.rfx-mw__refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--mw-gold-muted);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: var(--mw-radius-sm);
    color: var(--mw-gold);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mw-ease), box-shadow var(--mw-ease), transform var(--mw-ease);
    white-space: nowrap;
}
.rfx-mw__refresh-btn:hover {
    background: rgba(201,168,76,0.18);
    box-shadow: 0 0 12px var(--mw-gold-glow);
    transform: translateY(-1px);
}
.rfx-mw__refresh-btn:active { transform: translateY(0); }
.rfx-mw__refresh-btn.is-spinning svg { animation: mw-spin 0.7s linear infinite; }
@keyframes mw-spin { to { transform: rotate(360deg); } }

/* ── Tabs ───────────────────────────────────────────────────── */
.rfx-mw__tabs {
    display: flex;
    gap: 2px;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--mw-border);
    background: var(--mw-bg);
    overflow-x: auto;
    scrollbar-width: none;
}
.rfx-mw__tabs::-webkit-scrollbar { display: none; }

.rfx-mw__tab {
    padding: 8px 18px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mw-text-muted);
    font-family: var(--mw-font);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--mw-ease), border-color var(--mw-ease);
    margin-bottom: -1px;
}
.rfx-mw__tab:hover     { color: var(--mw-text-soft); }
.rfx-mw__tab.is-active {
    color: var(--mw-gold);
    border-bottom-color: var(--mw-gold);
}

/* ── Table ──────────────────────────────────────────────────── */
.rfx-mw__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rfx-mw__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

/* Headers */
.rfx-mw__th {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--mw-border);
    white-space: nowrap;
    user-select: none;
    background: var(--mw-bg);
}
.rfx-mw__th.sortable {
    cursor: pointer;
    transition: color var(--mw-ease);
}
.rfx-mw__th.sortable:hover { color: var(--mw-gold); }
.rfx-mw__th.is-sorted-asc,
.rfx-mw__th.is-sorted-desc { color: var(--mw-gold); }

.rfx-mw__sort-icon { margin-left: 4px; vertical-align: middle; opacity: 0.4; transition: opacity var(--mw-ease), transform var(--mw-ease); }
.rfx-mw__th.is-sorted-desc .rfx-mw__sort-icon { transform: rotate(180deg); opacity: 1; }
.rfx-mw__th.is-sorted-asc  .rfx-mw__sort-icon { opacity: 1; }

.rfx-mw__th--rate,
.rfx-mw__th--inverse { text-align: right; }
.rfx-mw__th--updated,
.rfx-mw__th--convert { text-align: center; }

/* Rows */
.rfx-mw__row {
    border-bottom: 1px solid var(--mw-border);
    transition: background var(--mw-ease);
    cursor: default;
}
.rfx-mw__row:nth-child(even) { background: var(--mw-bg-row-alt); }
.rfx-mw__row:hover            { background: rgba(201,168,76,0.04); }
.rfx-mw__row.is-hidden        { display: none; }
.rfx-mw__row.is-new           { animation: mw-flash 1s ease forwards; }

@keyframes mw-flash {
    0%   { background: rgba(201,168,76,0.15); }
    100% { background: transparent; }
}

/* Cells */
.rfx-mw__td {
    padding: 13px 16px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Currency col */
.rfx-mw__td--currency {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rfx-mw__flag {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    background: var(--mw-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.rfx-mw__code {
    font-weight: 700;
    color: var(--mw-text);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

/* Name col */
.rfx-mw__td--name { color: var(--mw-text-soft); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* Rate col */
.rfx-mw__td--rate  { text-align: right; }
.rfx-mw__td--inverse { text-align: right; color: var(--mw-text-muted); font-size: 0.82rem; }
.rfx-mw__rate-val {
    font-weight: 700;
    color: var(--mw-gold);
    font-size: 0.96rem;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.rfx-mw__rate-val.went-up   { color: var(--mw-green); }
.rfx-mw__rate-val.went-down { color: var(--mw-red); }

/* Updated col */
.rfx-mw__td--updated { text-align: center; color: var(--mw-text-muted); font-size: 0.78rem; }

/* Convert col */
.rfx-mw__td--convert { text-align: center; }
.rfx-mw__convert-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--mw-gold-muted);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: 50px;
    color: var(--mw-gold);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--mw-ease), box-shadow var(--mw-ease);
    white-space: nowrap;
}
.rfx-mw__convert-btn:hover {
    background: rgba(201,168,76,0.18);
    box-shadow: 0 0 10px var(--mw-gold-glow);
}

/* Loading skeleton */
.rfx-mw__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: var(--mw-text-muted);
    font-size: 0.9rem;
}
.rfx-mw__spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--mw-border-lite);
    border-top-color: var(--mw-gold);
    border-radius: 50%;
    animation: mw-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* No results */
.rfx-mw__no-results {
    padding: 48px 20px;
    text-align: center;
    color: var(--mw-text-muted);
    font-size: 0.9rem;
}

/* ── Quick Convert Modal ─────────────────────────────────────── */
.rfx-mw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8,10,15,0.85);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.rfx-mw-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.rfx-mw-modal {
    background: #141720;
    border: 1px solid #2a2f45;
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    transform: translateY(16px);
    transition: transform 0.25s ease;
}
.rfx-mw-modal-overlay.is-open .rfx-mw-modal { transform: translateY(0); }

.rfx-mw-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}
.rfx-mw-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0f2f8;
    line-height: 1.3;
}
.rfx-mw-modal__pair {
    font-size: 0.8rem;
    color: #C9A84C;
    margin-top: 4px;
}
.rfx-mw-modal__close {
    background: none;
    border: none;
    color: #6e7a99;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.rfx-mw-modal__close:hover { color: #f0f2f8; background: #1c2030; }

.rfx-mw-modal__field { margin-bottom: 16px; }
.rfx-mw-modal__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a0aac0;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
}
.rfx-mw-modal__input {
    width: 100%;
    background: #1c2030;
    border: 1px solid #2a2f45;
    border-radius: 8px;
    padding: 12px 14px;
    color: #f0f2f8;
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}
.rfx-mw-modal__input::-webkit-outer-spin-button,
.rfx-mw-modal__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.rfx-mw-modal__input:focus { border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.12); }

.rfx-mw-modal__result-wrap {
    background: #1c2030;
    border: 1px solid #2a2f45;
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
}
.rfx-mw-modal__result {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e0c070;
    word-break: break-all;
}
.rfx-mw-modal__rate-line {
    font-size: 0.78rem;
    color: #6e7a99;
    text-align: center;
    padding: 10px 0 4px;
}
.rfx-mw-modal__rate-line strong { color: #C9A84C; }

/* ── Footer ─────────────────────────────────────────────────── */
.rfx-mw__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--mw-border);
    background: var(--mw-bg);
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--mw-text-muted);
}
.rfx-mw__footer-source a {
    color: var(--mw-gold);
    text-decoration: none;
}
.rfx-mw__footer-source a:hover { text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rfx-mw__controls { flex-direction: column; align-items: stretch; }
    .rfx-mw__controls-right { justify-content: flex-start; }
    .rfx-mw__search { width: 100%; }
    .rfx-mw__search:focus { width: 100%; }
    .rfx-mw__th--name,
    .rfx-mw__td--name,
    .rfx-mw__th--updated,
    .rfx-mw__td--updated { display: none; }
}

@media (max-width: 480px) {
    .rfx-mw__th--inverse,
    .rfx-mw__td--inverse { display: none; }
    .rfx-mw-modal { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .rfx-mw__spinner,
    .rfx-mw__status-dot,
    .rfx-mw__row.is-new { animation: none; }
}