/* =========================================================================
   EXCHANGER_ICON.CSS — Иконка обменника + CSS-заглушка (цветной круг с буквой)
   ========================================================================= */

/* Размеры иконок */
.exchanger-icon-sm,
.exchanger-icon-fallback.exchanger-icon-sm {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 12px;
}

.exchanger-icon-md,
.exchanger-icon-fallback.exchanger-icon-md {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 18px;
}

.exchanger-icon-lg,
.exchanger-icon-fallback.exchanger-icon-lg {
    width: 64px;
    height: 64px;
    min-width: 64px;
    font-size: 28px;
}

/* Иконка-изображение */
img.exchanger-icon {
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* Заглушка — круг с первой буквой */
.exchanger-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle;
    line-height: 1;
    user-select: none;
}

/* Строка с иконкой + именем обменника (в таблицах) */
.exchanger-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 8 цветов для заглушек — контрастные на тёмном фоне */
.exchanger-icon-fallback[data-color="0"] { background: #3b82f6; }
.exchanger-icon-fallback[data-color="1"] { background: #10b981; }
.exchanger-icon-fallback[data-color="2"] { background: #f59e0b; }
.exchanger-icon-fallback[data-color="3"] { background: #ef4444; }
.exchanger-icon-fallback[data-color="4"] { background: #8b5cf6; }
.exchanger-icon-fallback[data-color="5"] { background: #ec4899; }
.exchanger-icon-fallback[data-color="6"] { background: #06b6d4; }
.exchanger-icon-fallback[data-color="7"] { background: #f97316; }