/**
 * Custom HTML Widgets Pro - Public Styles
 */

/* Widget container base styles */
.chwp-widget {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Ensure widgets are responsive by default */
.chwp-widget img {
    max-width: 100%;
    height: auto;
}

.chwp-widget iframe {
    max-width: 100%;
}

/* Utility classes that can be used in widgets */
.chwp-flex {
    display: flex;
}

.chwp-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chwp-grid {
    display: grid;
}

.chwp-hidden {
    display: none !important;
}

.chwp-visible {
    display: block !important;
}

/* Animation utilities */
.chwp-fade-in {
    animation: chwpFadeIn 0.3s ease-in-out;
}

.chwp-fade-out {
    animation: chwpFadeOut 0.3s ease-in-out;
}

.chwp-slide-up {
    animation: chwpSlideUp 0.3s ease-out;
}

.chwp-slide-down {
    animation: chwpSlideDown 0.3s ease-out;
}

@keyframes chwpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes chwpFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes chwpSlideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chwpSlideDown {
    from { 
        opacity: 0;
        transform: translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print styles */
@media print {
    .chwp-widget {
        page-break-inside: avoid;
    }
}