/* * DROP-A-MIN Styles
 * Ergänzungen zu Tailwind CDN
 */

/* 1. Isolation: Verhindert, dass Theme-Styles unser Layout zerstören */
#dropamin-app-root {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color-scheme: dark;
}

/* Reset für Buttons innerhalb der App, damit Theme-Styles nicht greifen */
#dropamin-app-root button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

#dropamin-app-root button:focus {
    outline: none;
}

/* 2. Custom Animations (nachgebaut aus tailwindcss-animate) */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-in.fade-in {
    animation: fadeIn 0.2s ease-out forwards;
}

/* Slide In from Bottom */
@keyframes slideInBottom {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-in.slide-in-from-bottom-4 {
    animation: slideInBottom 0.5s ease-out forwards;
}

/* Zoom In */
@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-in.zoom-in-95 {
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* 3. Utility Helfer, falls CDN langsam lädt */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.da-bg-gold { background-color: #000000; border: 1px solid #fbbf24; color: #fbbf24; }
        .da-text-gold { color: #fbbf24; }
        .da-bg-sold { background-color: #d4d4d4; color: #404040; border: 1px solid #d4d4d4; cursor: default; }
        .da-bg-standard { background-color: #000000; color: #ef4444; border: 1px solid #262626; }
        
        /* Hover Effects */
        .da-hover-gold:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); z-index: 10; background: rgba(66, 32, 6, 0.3); }
        .da-hover-standard:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); z-index: 10; color: white; border-color: #ef4444; }

        /* Animations */
        @keyframes da-spin { to { transform: rotate(360deg); } }
        .da-animate-spin { animation: da-spin 1s linear infinite; display: inline-block; }
        
        @keyframes da-fade-in { from { opacity: 0; } to { opacity: 1; } }
        .da-fade-in { animation: da-fade-in 0.2s ease-out forwards; }
        
        @keyframes da-slide-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .da-slide-up { animation: da-slide-up 0.4s ease-out forwards; }

        /* Tooltip Logic */
        .da-tooltip-container { position: relative; }
        .da-tooltip { 
            visibility: hidden; opacity: 0; 
            position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px);
            background: #262626; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap;
            transition: all 0.2s; pointer-events: none; border: 1px solid #404040; z-index: 50;
        }
        .da-tooltip-container:hover .da-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-5px); }