/**
 * Twingle Donation Counter Plugin Styles
 * Version: 0.4
 * Description: Main CSS file for Twingle donation counter integration
 * Author: Manus AI
 * License: MIT
 * 
 * Avada Theme Breakpoints:
 * - Large Screen (Desktop): > 1024px
 * - Medium Screen (Tablet): 768px - 1024px
 * - Small Screen (Mobile): < 768px
 * 
 * ANLEITUNG:
 * Du kannst diese Datei direkt bearbeiten, um die Styles anzupassen.
 * Deine Änderungen bleiben auch nach Plugin-Updates erhalten.
 * 
 * Changes in V0.4:
 * - Width and height controlled via shortcode attributes
 * - Removed zoom CSS classes
 * - Cleaner, more flexible styling
 */

/* ============================================
   MAIN CONTAINER STYLES
   ============================================ */

.twingle-counter-container {
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================
   WRAPPER FOR RESPONSIVE BEHAVIOR
   ============================================ */

.twingle-counter-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1rem;
}

/* ============================================
   IFRAME STYLING
   ============================================ */

.twingle-counter-iframe {
    display: block;
    width: 100%;
    border: none;
    height: auto;
}

/* ============================================
   ERROR MESSAGE STYLING
   ============================================ */

.twingle-counter-error {
    color: #d32f2f;
    padding: 10px;
    border: 1px solid #d32f2f;
    border-radius: 4px;
    background-color: #ffebee;
    margin: 10px 0;
}

/* ============================================
   AVADA THEME RESPONSIVE BREAKPOINTS
   ============================================ */

/* Medium Screen (Tablet) - Avada: 768px - 1024px */
@media (max-width: 1024px) {
    .twingle-counter-container {
        margin: 15px 0;
    }
}

/* Small Screen (Mobile) - Avada: < 768px */
@media (max-width: 768px) {
    .twingle-counter-container {
        margin: 10px 0;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .twingle-counter-iframe {
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .twingle-counter-container {
        display: none;
    }
}