/**
 * Exchange Logo Styles
 * Ensures proper scaling and background compatibility for all exchange logos
 */

/* Base exchange logo styling */
.exchange-logo,
img[src*="exchanges/"] {
    object-fit: contain;
    object-position: center;
    max-width: 100%;
    max-height: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* JPEG logos need rounded corners and slight background handling */
img[src*="exchanges/"][src$=".jpeg"],
img[src*="exchanges/"][src$=".jpg"] {
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ================================================
   INDEX.HTML - Exchange Strip (Small Logos w-6 h-6)
   ================================================ */

/* Container size fix for index strip */
.flex.flex-wrap.justify-center.items-center.gap-4 .w-7.h-7 img[src*="exchanges/"] {
    width: 24px !important;
    height: 24px !important;
}

/* ================================================
   EXCHANGES.HTML - Exchange Cards (Medium Logos)
   ================================================ */

/* Container size fix for exchange cards */
.exchange-card .w-14.h-14 img[src*="exchanges/"] {
    width: 40px !important;
    height: 40px !important;
}

/* ================================================
   API-KEYS-NEW.HTML - Exchange Grid (Large Logos)
   ================================================ */

/* Override for API keys page - better sizing */
.exchange-logo-wrapper .exchange-logo {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Individual logo scaling for API keys page */
.exchange-logo[src*="binance.png"] {
    width: 50px !important;
    height: 50px !important;
}

.exchange-logo[src*="mexc.png"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="bitstamp"] {
    width: 50px !important;
    height: 50px !important;
}

.exchange-logo[src*="kucoin.png"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="htx.png"] {
    width: 52px !important;
    height: 52px !important;
}

/* HTX - Light theme dark background */
[data-theme="light"] .exchange-logo[src*="htx.png"] {
    background-color: #1a1a2e !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

.exchange-logo[src*="phemex.png"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="cryptocom.jpeg"] {
    width: 52px !important;
    height: 52px !important;
    border-radius: 6px !important;
}

.exchange-logo[src*="kraken.jpeg"] {
    width: 52px !important;
    height: 52px !important;
    border-radius: 6px !important;
}

.exchange-logo[src*="gateio.jpeg"] {
    width: 52px !important;
    height: 52px !important;
    border-radius: 6px !important;
}

.exchange-logo[src*="bingx.png"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="okx.png"] {
    width: 52px !important;
    height: 52px !important;
}

/* OKX - Dark theme white background */
[data-theme="dark"] .exchange-logo[src*="okx.png"] {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

.exchange-logo[src*="coinbase.png"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="bitget.png"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="bybit"] {
    width: 52px !important;
    height: 52px !important;
}

.exchange-logo[src*="bitfinex"] {
    width: 52px !important;
    height: 44px !important;
}

/* ================================================
   INDIVIDUAL LOGO ADJUSTMENTS
   Each logo may have different aspect ratios
   ================================================ */

/* Binance - Large file, needs downscaling */
img[src*="binance.png"] {
    transform: scale(0.85);
}

/* BingX - Very small file (2KB), may be small image */
img[src*="bingx.png"] {
    transform: scale(1.0);
}

/* Bitget - Small file, compact logo */
img[src*="bitget.png"] {
    transform: scale(0.95);
}

/* Bitstamp - Medium file, horizontal logo */
img[src*="bitstamp.png"] {
    transform: scale(0.82);
}

/* Bybit - Small files, compact */
img[src*="bybit-light.png"],
img[src*="bybit-dark.png"] {
    transform: scale(0.95);
}

/* Coinbase - Small file */
img[src*="coinbase.png"] {
    transform: scale(0.92);
}

/* Crypto.com - JPEG, larger file */
img[src*="cryptocom.jpeg"] {
    transform: scale(0.88);
    border-radius: 8px;
}

/* Gate.io - JPEG */
img[src*="gateio.jpeg"] {
    transform: scale(0.9);
    border-radius: 8px;
}

/* HTX/Huobi - Medium file */
img[src*="htx.png"] {
    transform: scale(0.88);
}

/* Kraken - JPEG */
img[src*="kraken.jpeg"] {
    transform: scale(0.9);
    border-radius: 8px;
}

/* KuCoin - Medium file */
img[src*="kucoin.png"] {
    transform: scale(0.85);
}

/* MEXC - Medium file, horizontal logo */
img[src*="mexc.png"] {
    transform: scale(0.82);
}

/* OKX - Medium file */
img[src*="okx.png"] {
    transform: scale(0.9);
}

/* Phemex - Medium file */
img[src*="phemex.png"] {
    transform: scale(0.85);
}

/* Bitfinex - Medium files */
img[src*="bitfinex-light.png"],
img[src*="bitfinex-dark.png"] {
    transform: scale(0.88);
}

/* ================================================
   DARK THEME ADJUSTMENTS
   For logos with white/light backgrounds
   ================================================ */

[data-theme="dark"] img[src*="cryptocom.jpeg"],
.dark img[src*="cryptocom.jpeg"],
html.dark img[src*="cryptocom.jpeg"] {
    filter: brightness(0.92) contrast(1.05);
}

[data-theme="dark"] img[src*="gateio.jpeg"],
.dark img[src*="gateio.jpeg"],
html.dark img[src*="gateio.jpeg"] {
    filter: brightness(0.95);
}

[data-theme="dark"] img[src*="kraken.jpeg"],
.dark img[src*="kraken.jpeg"],
html.dark img[src*="kraken.jpeg"] {
    filter: brightness(0.95);
}

/* ================================================
   HOVER EFFECTS
   ================================================ */

.exchange-card img[src*="exchanges/"],
.flex.items-center.gap-2 img[src*="exchanges/"] {
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hover scale - add 5% to existing scale */
.exchange-card:hover img[src*="binance.png"] { transform: scale(0.9); }
.exchange-card:hover img[src*="bingx.png"] { transform: scale(1.05); }
.exchange-card:hover img[src*="bitget.png"] { transform: scale(1.0); }
.exchange-card:hover img[src*="bitstamp.png"] { transform: scale(0.87); }
.exchange-card:hover img[src*="bybit-light.png"],
.exchange-card:hover img[src*="bybit-dark.png"] { transform: scale(1.0); }
.exchange-card:hover img[src*="coinbase.png"] { transform: scale(0.97); }
.exchange-card:hover img[src*="cryptocom.jpeg"] { transform: scale(0.93); }
.exchange-card:hover img[src*="gateio.jpeg"] { transform: scale(0.95); }
.exchange-card:hover img[src*="htx.png"] { transform: scale(0.93); }
.exchange-card:hover img[src*="kraken.jpeg"] { transform: scale(0.95); }
.exchange-card:hover img[src*="kucoin.png"] { transform: scale(0.9); }
.exchange-card:hover img[src*="mexc.png"] { transform: scale(0.87); }
.exchange-card:hover img[src*="okx.png"] { transform: scale(0.95); }
.exchange-card:hover img[src*="phemex.png"] { transform: scale(0.9); }
.exchange-card:hover img[src*="bitfinex-light.png"],
.exchange-card:hover img[src*="bitfinex-dark.png"] { transform: scale(0.93); }

/* Index strip hover */
.flex.items-center.gap-2:hover img[src*="exchanges/"] {
    filter: brightness(1.1);
}