/* Hide radio buttons */
.exchange-tab-control {
    display: none !important;
}

/* Default tab button styles */
.exchange-tab-btn {
    background-color: transparent;
    color: rgba(107, 114, 128, 1); /* text-gray-500 */
    transition: all 0.2s ease;
    position: relative;
}

.dark .exchange-tab-btn {
    color: rgba(156, 163, 175, 1); /* dark:text-gray-400 */
}

.exchange-tab-btn:hover {
    color: rgba(55, 65, 81, 1); /* text-gray-700 */
    background-color: rgba(243, 244, 246, 0.5); /* bg-gray-100/50 */
}

.dark .exchange-tab-btn:hover {
    color: rgba(209, 213, 219, 1); /* dark:text-gray-300 */
    background-color: rgba(55, 65, 81, 0.3); /* dark:bg-gray-700/30 */
}

/* Default tab content - hidden */
.exchange-tab-content {
    display: none;
    animation: exchangeFadeIn 0.3s ease forwards;
}

/* When XMR tab is checked */
#exchange-xmr-tab:checked ~ div label[for="exchange-xmr-tab"] {
    background-color: #4a5568; /* bg-gray-700 */
    color: white;
    font-weight: bold;
}

.dark #exchange-xmr-tab:checked ~ div label[for="exchange-xmr-tab"] {
    background-color: #4a5568; /* dark:bg-gray-700 */
    color: white;
}

/* When BTC tab is checked */
#exchange-btc-tab:checked ~ div label[for="exchange-btc-tab"] {
    background-color: #4a5568; /* bg-gray-700 */
    color: white;
    font-weight: bold;
}

.dark #exchange-btc-tab:checked ~ div label[for="exchange-btc-tab"] {
    background-color: #4a5568; /* dark:bg-gray-700 */
    color: white;
}

/* Show the corresponding tab content */
#exchange-xmr-tab:checked ~ div #exchange-xmr-section {
    display: block;
}

#exchange-btc-tab:checked ~ div #exchange-btc-section {
    display: block;
}

/* Fade in animation with unique name */
@keyframes exchangeFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}