/* ==============================
    Yiontech Call To Action Widget
    Handle: yiontech-call-to-action
    ============================== */

/* Wrapper and Layout Styles */
.yiontech-cta-widget {
    display: flex;
    flex-wrap: wrap; 
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    background: var(--wrapper-bg, linear-gradient(135deg, #ff7043 0%, #ff9e80 100%));
    border-radius: var(--wrapper-radius, 10px);
    padding: var(--wrapper-padding, 2rem);
}

.yiontech-cta-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
}

.yiontech-cta-widget .cta-content {
    display: flex;
    gap: 2rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Base Flex Direction for Horizontal Layouts */
.yiontech-cta-widget.left .cta-content {
    flex-direction: row;
}
.yiontech-cta-widget.right .cta-content {
    flex-direction: row-reverse;
}

/* Base Flex Direction for Vertical Layouts */
.yiontech-cta-widget.top .cta-content {
    flex-direction: column;
    align-items: center;
}
.yiontech-cta-widget.bottom .cta-content {
    flex-direction: column-reverse;
    align-items: center;
}

/* Image Container with Circular Mask Option */
.yiontech-cta-widget .cta-image {
    position: relative; 
    overflow: hidden;
    flex-shrink: 0;
    border-radius: var(--image-radius, 10px);
    transition: all 0.4s ease;
    background-color: var(--image-bg-color, #f5f5f5);
    /* Added padding support */
    padding: var(--image-padding, 0);
}

.yiontech-cta-widget .cta-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.4s ease;
}

/* Content Text Area */
.yiontech-cta-widget .cta-text {
    flex-grow: 1; 
}

/* Title and Description default margins */
.yiontech-cta-widget .cta-text h2 {
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.yiontech-cta-widget .cta-text p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Button Styling */
.yiontech-cta-widget .cta-button {
    display: inline-block; 
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    background: var(--button-bg, #FFFFFF);
    color: var(--button-color, #1a1a1a);
}


/* ======================================= */
/* Animated Icon Wrapper & Keyframes (UPDATED) */
/* ======================================= */

.animated-play-button-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    cursor: pointer;
    border-radius: inherit;
    overflow: hidden;
}

.animated-play-button {
    border-radius: 50%;
    background-color: var(--icon-bg-color, #000000);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    /* Size controlled by --icon-size variable */
    width: var(--icon-size, 120px);
    height: var(--icon-size, 120px);
    /* Initial shadow for the base glow - now using gradient colors */
    box-shadow: 
        0 0 calc(var(--icon-size) * 0.083) calc(var(--icon-size) * 0.017) var(--glow-color-1, rgba(255, 112, 67, 0.7)), 
        0 0 calc(var(--icon-size) * 0.167) calc(var(--icon-size) * 0.033) var(--glow-color-2, rgba(255, 158, 128, 0.5));
    
    /* Apply the animation */
    animation: pulse-glow 3s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* The Play Icon (CSS Triangle) */
.play-icon {
    width: 0;
    height: 0;
    /* Creates the triangle shape - proportional to icon size */
    border-top: calc(var(--icon-size) * 0.167) solid transparent;
    border-bottom: calc(var(--icon-size) * 0.167) solid transparent;
    border-left: calc(var(--icon-size) * 0.292) solid var(--icon-color, #ff4d6d);
    margin-left: calc(var(--icon-size) * 0.058); /* Adjust to visually center the triangle */
    z-index: 10;
}

/* The Animation Keyframes */
@keyframes pulse-glow {
    0%, 100% {
        /* Start and end state (subtle glow) */
        box-shadow: 
            0 0 calc(var(--icon-size) * 0.083) calc(var(--icon-size) * 0.017) var(--glow-color-1, rgba(255, 112, 67, 0.7)),
            0 0 calc(var(--icon-size) * 0.167) calc(var(--icon-size) * 0.033) var(--glow-color-2, rgba(255, 158, 128, 0.5));
    }
    50% {
        /* Peak of the pulse (expanded and brighter glow) */
        box-shadow: 
            0 0 calc(var(--icon-size) * 0.333) calc(var(--icon-size) * 0.067) var(--glow-color-3, rgba(255, 112, 67, 0.9)),
            0 0 calc(var(--icon-size) * 0.5) calc(var(--icon-size) * 0.1) var(--glow-color-4, rgba(255, 158, 128, 0.8)),
            0 0 calc(var(--icon-size) * 0.75) calc(var(--icon-size) * 0.15) var(--glow-color-5, rgba(255, 200, 180, 0.6));
    }
}

/* Hover Effect */
.animated-play-button:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    animation-play-state: paused; /* Temporarily stop the automatic pulse animation */
    box-shadow: 
        0 0 calc(var(--icon-size) * 0.208) calc(var(--icon-size) * 0.042) var(--glow-color-3, rgba(255, 112, 67, 1)),
        0 0 calc(var(--icon-size) * 0.333) calc(var(--icon-size) * 0.083) var(--glow-color-4, rgba(255, 158, 128, 1));
}

/* Video Modal Styles */
.yiontech-video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    /* Centering with flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.yiontech-video-modal.active {
    display: flex;
    opacity: 1;
}

.yiontech-video-modal-content {
    position: relative;
    width: 80%;
    max-width: 900px;
    margin: 0;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.yiontech-video-modal.active .yiontech-video-modal-content {
    transform: scale(1);
}

.yiontech-video-modal-close {
    position: absolute;
    top: -45px;
    right: 0;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.yiontech-video-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.yiontech-video-modal-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.yiontech-video-modal-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* Loading spinner for video */
.yiontech-video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    display: none;
}

.yiontech-video-modal.loading .yiontech-video-loading {
    display: block;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==============================
    Mobile Responsiveness
    ============================== */
@media (max-width: 768px) {
    .yiontech-cta-widget .cta-content {
        flex-direction: column !important; 
        text-align: center;
        align-items: center !important; 
        gap: 1.5rem; 
    }
    .yiontech-cta-widget .cta-image {
        width: 100% !important; 
        margin-bottom: 1rem;
    }
    .yiontech-cta-widget .cta-text h2,
    .yiontech-cta-widget .cta-text p,
    .yiontech-cta-widget .cta-text .cta-button-wrapper {
        text-align: center !important;
    }
    
    .yiontech-video-modal-content {
        width: 95%;
        max-width: none;
    }
    
    .yiontech-video-modal-close {
        top: -40px;
        font-size: 24px;
        width: 32px;
        height: 32px;
    }
}