/**
 * Dynamic Site Maker - Elementor Widgets Styles
 *
 * CSS for custom Elementor widgets in the Dynamic Site Maker plugin
 */

/* Base styles for the info widget */
.dsmk-info-widget {
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    transition: all 0.3s ease;
}

/* Different layout styles */
.dsmk-layout-vertical .dsmk-logo,
.dsmk-layout-vertical .dsmk-name,
.dsmk-layout-vertical .dsmk-button-wrapper {
    margin-bottom: 15px;
    display: block;
    width: 100%;
}

.dsmk-layout-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.dsmk-horizontal-layout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dsmk-horizontal-layout .dsmk-logo {
    margin-right: 20px;
    flex: 0 0 auto;
}

.dsmk-horizontal-layout .dsmk-name {
    flex: 1;
    margin: 0 15px;
}

.dsmk-horizontal-layout .dsmk-button-wrapper {
    flex: 0 0 auto;
    margin-left: 15px;
}

.dsmk-layout-centered .dsmk-centered-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dsmk-layout-centered .dsmk-logo,
.dsmk-layout-centered .dsmk-name,
.dsmk-layout-centered .dsmk-button-wrapper {
    margin-bottom: 15px;
}

.dsmk-layout-custom .dsmk-flex-layout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dsmk-layout-custom .dsmk-flex-layout .dsmk-logo {
    flex: 0 0 auto;
    margin-right: 15px;
}

.dsmk-layout-custom .dsmk-flex-layout .dsmk-name {
    flex: 1;
}

/* Logo styles */
.dsmk-logo {
    max-width: 100%;
    display: inline-block;
}

.dsmk-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

/* Name styles */
.dsmk-name {
    margin: 0 0 15px 0;
    padding: 0;
    line-height: 1.3;
    transition: all 0.3s ease;
}

/* Button styles */
.dsmk-button-wrapper {
    display: inline-block;
}

.dsmk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #4054b2;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 16px;
    transition: all 0.3s ease;
    line-height: 1;
}

.dsmk-button:hover {
    background-color: #3a489a;
    color: #ffffff;
    text-decoration: none;
}

.dsmk-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dsmk-button-icon-before {
    margin-right: 8px;
}

.dsmk-button-icon-after {
    margin-left: 8px;
}

/* Animation Classes */
.dsmk-info-widget.animated {
    animation-fill-mode: both;
}

/* Define basic animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Apply animation classes */
.dsmk-info-widget.animated.fadeIn { animation-name: fadeIn; }
.dsmk-info-widget.animated.fadeInDown { animation-name: fadeInDown; }
.dsmk-info-widget.animated.fadeInUp { animation-name: fadeInUp; }
.dsmk-info-widget.animated.fadeInLeft { animation-name: fadeInLeft; }
.dsmk-info-widget.animated.fadeInRight { animation-name: fadeInRight; }
.dsmk-info-widget.animated.zoomIn { animation-name: zoomIn; }
.dsmk-info-widget.animated.bounceIn { animation-name: bounceIn; }
.dsmk-info-widget.animated.slideInUp { animation-name: slideInUp; }
.dsmk-info-widget.animated.slideInDown { animation-name: slideInDown; }
.dsmk-info-widget.animated.slideInLeft { animation-name: slideInLeft; }
.dsmk-info-widget.animated.slideInRight { animation-name: slideInRight; }

/* Responsive Styles */
@media (max-width: 767px) {
    .dsmk-horizontal-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .dsmk-horizontal-layout .dsmk-logo,
    .dsmk-horizontal-layout .dsmk-name,
    .dsmk-horizontal-layout .dsmk-button-wrapper {
        margin: 0 0 15px 0;
        width: 100%;
    }
    
    .dsmk-layout-custom .dsmk-flex-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .dsmk-layout-custom .dsmk-flex-layout .dsmk-logo,
    .dsmk-layout-custom .dsmk-flex-layout .dsmk-name {
        margin: 0 0 15px 0;
        width: 100%;
    }
}