/**
 * Mobius Affiliates Frontend Styles
 * Basic styling for affiliate widgets
 */

/* Base widget container styles */
.mobius-widget-container {
    margin: 1.5rem 0;
    clear: both;
}

/* Responsive wrapper for affiliate widgets */
.mobius-affiliate-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Ensure affiliate widgets are responsive */
affiliate-qdf,
affiliate-el {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Loading state for widgets */
.mobius-widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 0.9rem;
}

.mobius-widget-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

/* Error state for widgets */
.mobius-widget-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 1rem;
    color: #dc2626;
    font-size: 0.9rem;
    text-align: center;
}

/* Widget spacing and alignment */
.mobius-qdf-widget,
.mobius-el-widget {
    margin: 1.5rem 0;
}

/* Ensure widgets don't overflow their containers */
.entry-content affiliate-qdf,
.entry-content affiliate-el,
.post-content affiliate-qdf,
.post-content affiliate-el {
    max-width: 100%;
    overflow: hidden;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .mobius-widget-container {
        margin: 1rem 0;
    }
    
    .mobius-affiliate-wrapper {
        padding: 0 0.5rem;
    }
}

/* Animation for widget loading */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Fade in animation for loaded widgets */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

affiliate-qdf,
affiliate-el {
    animation: fadeIn 0.5s ease-out;
}

/* Print styles - hide affiliate widgets in print */
@media print {
    affiliate-qdf,
    affiliate-el,
    .mobius-widget-container {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobius-widget-loading {
        border-color: #000;
        background: #fff;
        color: #000;
    }
    
    .mobius-widget-error {
        border-color: #000;
        background: #fff;
        color: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    affiliate-qdf,
    affiliate-el,
    .mobius-widget-loading::before {
        animation: none;
    }
}

/* Focus styles for accessibility */
affiliate-qdf:focus,
affiliate-el:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Ensure widgets work well in various theme contexts */
.widget affiliate-qdf,
.widget affiliate-el,
.sidebar affiliate-qdf,
.sidebar affiliate-el {
    width: 100%;
}

/* Footer widget area adjustments */
.footer-widgets affiliate-qdf,
.footer-widgets affiliate-el,
.site-footer affiliate-qdf,
.site-footer affiliate-el {
    max-width: 100%;
}

/* Content area specific adjustments */
.content-area affiliate-qdf,
.content-area affiliate-el,
.main-content affiliate-qdf,
.main-content affiliate-el {
    margin: 2rem 0;
}

/* Gutenberg block editor compatibility */
.wp-block affiliate-qdf,
.wp-block affiliate-el {
    margin: 1rem 0;
}

/* Theme compatibility - common theme classes */
.entry affiliate-qdf,
.entry affiliate-el,
.post affiliate-qdf,
.post affiliate-el,
.page affiliate-qdf,
.page affiliate-el {
    clear: both;
    margin: 1.5rem 0;
}

/* Flexbox container compatibility */
.flex affiliate-qdf,
.flex affiliate-el,
.d-flex affiliate-qdf,
.d-flex affiliate-el {
    flex: 1 1 auto;
    min-width: 0;
}

/* Grid container compatibility */
.grid affiliate-qdf,
.grid affiliate-el {
    grid-column: 1 / -1;
}

/* RTL language support */
[dir="rtl"] affiliate-qdf,
[dir="rtl"] affiliate-el {
    direction: rtl;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .mobius-widget-loading {
        background: #1f2937;
        border-color: #374151;
        color: #d1d5db;
    }
    
    .mobius-widget-error {
        background: #7f1d1d;
        border-color: #dc2626;
        color: #fecaca;
    }
}