/* Custom Styles to complement Tailwind CSS */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* For the API key list scrollbar */
#api-key-list::-webkit-scrollbar {
    width: 8px;
}

#api-key-list::-webkit-scrollbar-track {
    background: #1f2937; /* bg-gray-800 */
}

#api-key-list::-webkit-scrollbar-thumb {
    background: #4f46e5; /* bg-indigo-600 */
    border-radius: 4px;
}

#api-key-list::-webkit-scrollbar-thumb:hover {
    background: #4338ca; /* bg-indigo-700 */
}

/* Custom animation for notifications */
.notification {
    transition: opacity 0.5s, transform 0.5s;
    transform: translateX(100%);
    opacity: 0;
}

.notification.show {
    transform: translateX(0);
    opacity: 1;
}

/* Styling for the PayPal button containers */
.paypal-button-container {
    min-height: 45px; /* Ensure container has height before PayPal button renders */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide the original purchase button when the PayPal button is rendered */
.paypal-button-container.paypal-rendered .purchase-btn {
    display: none;
}