/* wallet-icons.css - версия со скейлингом */

.wallet-option-icon {
    width: var(--wallet-icon-container-size);
    height: var(--wallet-icon-container-size);
    border-radius: var(--wallet-icon-container-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: var(--wallet-icon-container-border) solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.wallet-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: var(--wallet-icon-radius);
    transition: all 0.3s ease;
    max-width: var(--wallet-icon-max-size);
    max-height: var(--wallet-icon-max-size);
}

.wallet-icon.fill-mode {
    object-fit: cover;
    max-width: none;
    max-height: none;
    border-radius: var(--wallet-icon-container-radius);
}

.wallet-option:hover .wallet-option-icon {
    background: rgba(247, 147, 26, 0.1);
    border-color: rgba(247, 147, 26, 0.3);
    transform: scale(var(--wallet-hover-scale));
}

.wallet-option:hover .wallet-icon {
    transform: scale(var(--wallet-icon-hover-scale));
}

.wallet-icon-fallback {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--wallet-icon-fallback-font-size);
    background: linear-gradient(135deg, #f7931a, #ff9500);
    border-radius: var(--wallet-icon-radius);
    color: #ffffff;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wallet-icon:not([src]),
.wallet-icon[src=""],
.wallet-icon[src*="placeholder"],
.wallet-icon.error {
    display: none;
}

.wallet-option-icon.loading .wallet-icon-fallback {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.wallet-option-icon.loaded .wallet-icon {
    display: block;
}

.wallet-option-icon.error .wallet-icon-fallback {
    display: flex;
}

/* Специальные стили для каждого кошелька */
.wallet-option[data-wallet="unisat"] .wallet-option-icon {
    background: rgba(247, 147, 26, 0.05);
    border-color: rgba(247, 147, 26, 0.1);
}

.wallet-option[data-wallet="unisat"] .wallet-icon-fallback {
    background: linear-gradient(135deg, #f7931a, #ff9500);
}

.wallet-option[data-wallet="oyl"] .wallet-option-icon {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.wallet-option[data-wallet="oyl"] .wallet-icon-fallback {
    background: linear-gradient(135deg, #000000, #333333);
}

.wallet-option[data-wallet="xverse"] .wallet-option-icon {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.1);
}

.wallet-option[data-wallet="xverse"] .wallet-icon-fallback {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* Индикатор загрузки */
.wallet-option-icon.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--wallet-loading-spinner-size);
    height: var(--wallet-loading-spinner-size);
    margin: calc(var(--wallet-loading-spinner-offset) * -1) 0 0 calc(var(--wallet-loading-spinner-offset) * -1);
    border: var(--wallet-loading-spinner-border) solid rgba(255, 255, 255, 0.2);
    border-top: var(--wallet-loading-spinner-border) solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: wallet-icon-spin 1s linear infinite;
    z-index: 1;
}

@keyframes wallet-icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Утилитарные классы для разных режимов отображения */
.wallet-icon.mode-contain {
    object-fit: contain;
}

.wallet-icon.mode-cover {
    object-fit: cover;
}

.wallet-icon.mode-fill {
    object-fit: fill;
}

/* Размеры контейнеров */
.wallet-option-icon.size-xs {
    width: var(--wallet-icon-xs-size);
    height: var(--wallet-icon-xs-size);
    border-radius: var(--wallet-icon-xs-radius);
}

.wallet-option-icon.size-xs .wallet-icon {
    max-width: var(--wallet-icon-xs-max-icon);
    max-height: var(--wallet-icon-xs-max-icon);
    border-radius: var(--wallet-icon-xs-border-radius);
}

.wallet-option-icon.size-xs .wallet-icon-fallback {
    font-size: var(--wallet-icon-xs-fallback-font);
    border-radius: var(--wallet-icon-xs-border-radius);
}

.wallet-option-icon.size-small {
    width: var(--wallet-icon-small-size);
    height: var(--wallet-icon-small-size);
}

.wallet-option-icon.size-small .wallet-icon {
    max-width: var(--wallet-icon-small-max-icon);
    max-height: var(--wallet-icon-small-max-icon);
}

.wallet-option-icon.size-small .wallet-icon-fallback {
    font-size: var(--wallet-icon-small-fallback-font);
}

.wallet-option-icon.size-large {
    width: var(--wallet-icon-large-size);
    height: var(--wallet-icon-large-size);
}

.wallet-option-icon.size-large .wallet-icon {
    max-width: var(--wallet-icon-large-max-icon);
    max-height: var(--wallet-icon-large-max-icon);
}

.wallet-option-icon.size-large .wallet-icon-fallback {
    font-size: var(--wallet-icon-large-fallback-font);
}

.wallet-option-icon.size-xl {
    width: var(--wallet-icon-xl-size);
    height: var(--wallet-icon-xl-size);
    border-radius: var(--wallet-icon-xl-radius);
}

.wallet-option-icon.size-xl .wallet-icon {
    max-width: var(--wallet-icon-xl-max-icon);
    max-height: var(--wallet-icon-xl-max-icon);
    border-radius: var(--wallet-icon-xl-border-radius);
}

.wallet-option-icon.size-xl .wallet-icon-fallback {
    font-size: var(--wallet-icon-xl-fallback-font);
    border-radius: var(--wallet-icon-xl-border-radius);
}

/* Состояние подключенного кошелька */
.wallet-option.connected .wallet-option-icon {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 0 var(--wallet-icon-container-border) rgba(16, 185, 129, 0.2);
}

.wallet-option.connected .wallet-option-icon::after {
    content: '✓';
    position: absolute;
    bottom: var(--wallet-connected-badge-offset);
    right: var(--wallet-connected-badge-offset);
    width: var(--wallet-connected-badge-size);
    height: var(--wallet-connected-badge-size);
    background: #10b981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wallet-connected-badge-font-size);
    font-weight: bold;
    border: var(--wallet-connected-badge-border) solid rgba(10, 10, 10, 0.9);
}

/* Состояния подключения */
.wallet-option.state-connecting .wallet-option-icon {
    animation: wallet-connecting-pulse 1.5s infinite;
}

@keyframes wallet-connecting-pulse {
    0%, 100% {
        border-color: rgba(245, 158, 11, 0.3);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        border-color: rgba(245, 158, 11, 0.6);
        box-shadow: 0 0 0 var(--wallet-pulse-box-shadow) rgba(245, 158, 11, 0.1);
    }
}

.wallet-option.state-error .wallet-option-icon {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.wallet-option.state-success .wallet-option-icon {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.1);
}

/* Индикаторы статуса */
.wallet-option-icon.status-online::after {
    content: '';
    position: absolute;
    bottom: var(--wallet-status-indicator-offset);
    right: var(--wallet-status-indicator-offset);
    width: var(--wallet-status-indicator-size);
    height: var(--wallet-status-indicator-size);
    background: #10B981;
    border: var(--wallet-status-indicator-border) solid rgba(10, 10, 10, 0.9);
    border-radius: 50%;
    z-index: 10;
}

.wallet-option-icon.status-offline::after {
    content: '';
    position: absolute;
    bottom: var(--wallet-status-indicator-offset);
    right: var(--wallet-status-indicator-offset);
    width: var(--wallet-status-indicator-size);
    height: var(--wallet-status-indicator-size);
    background: #EF4444;
    border: var(--wallet-status-indicator-border) solid rgba(10, 10, 10, 0.9);
    border-radius: 50%;
    z-index: 10;
}

.wallet-option-icon.status-warning::after {
    content: '';
    position: absolute;
    bottom: var(--wallet-status-indicator-offset);
    right: var(--wallet-status-indicator-offset);
    width: var(--wallet-status-indicator-size);
    height: var(--wallet-status-indicator-size);
    background: #F59E0B;
    border: var(--wallet-status-indicator-border) solid rgba(10, 10, 10, 0.9);
    border-radius: 50%;
    z-index: 10;
}

/* Эффекты */
.wallet-icon.effect-shadow {
    filter: drop-shadow(0 var(--wallet-shadow-offset) var(--wallet-shadow-blur) rgba(0, 0, 0, 0.3));
}

.wallet-icon.effect-glow {
    filter: drop-shadow(0 0 var(--wallet-glow-blur) rgba(247, 147, 26, 0.5));
}

.wallet-icon.effect-blur {
    filter: blur(1px);
    transition: filter 0.3s ease;
}

.wallet-option:hover .wallet-icon.effect-blur {
    filter: blur(0px);
}

/* Состояния доступности */
.wallet-option.disabled .wallet-option-icon {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.wallet-option.disabled:hover .wallet-option-icon {
    transform: none;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Адаптация под тип устройства */
@media (hover: none) and (pointer: coarse) {
    .wallet-option:hover .wallet-option-icon,
    .wallet-option:hover .wallet-icon {
        transform: none;
    }
}

/* Предпочтения пользователя */
@media (prefers-reduced-motion: reduce) {
    .wallet-option-icon,
    .wallet-icon,
    .wallet-icon-fallback {
        transition: none;
        animation: none;
    }
}

@media (prefers-contrast: high) {
    .wallet-option-icon {
        border-width: calc(var(--wallet-icon-container-border) * 2);
        border-color: rgba(255, 255, 255, 0.3);
    }
    
    .wallet-icon-fallback {
        border: var(--wallet-icon-container-border) solid rgba(255, 255, 255, 0.2);
    }
}