/* =========================================
   ITMajlo CTA & Popup Styles (Variable Based)
   ========================================= */

/* GLOBAL CTA CONTAINER */
.itm-cta-container.itm-is-global {
    background: var(--itm-box-bg);
    color: var(--itm-box-text);
    padding: var(--itm-pad-t) var(--itm-pad-r) var(--itm-pad-b) var(--itm-pad-l);

    border-style: var(--itm-bord-style);
    border-color: var(--itm-bord-color);
    border-width: var(--itm-bord-t) var(--itm-bord-r) var(--itm-bord-b) var(--itm-bord-l);

    border-radius: var(--itm-rad-tl) var(--itm-rad-tr) var(--itm-rad-br) var(--itm-rad-bl);

    /* Layout */
    display: flex;
    flex-direction: var(--itm-flex-dir);
    justify-content: var(--itm-flex-just);
    align-items: var(--itm-flex-align);
    flex-wrap: var(--itm-flex-wrap);
    gap: var(--itm-gap);
    align-content: var(--itm-align-content);

    width: var(--itm-box-width);
    max-width: 100%;
    box-sizing: border-box;
    margin: 20px auto;
}

/* TYPOGRAPHY */
.itm-cta-container.itm-is-global .itm-title {
    font-family: var(--itm-title-font);
    font-size: var(--itm-title-size);
    font-weight: var(--itm-title-weight);
    text-align: var(--itm-title-align);
    margin: 0 0 10px 0;
    color: var(--itm-title-color, inherit);
    line-height: 1.2;
}

.itm-cta-container.itm-is-global .itm-subtitle {
    font-family: var(--itm-sub-font);
    font-size: var(--itm-sub-size);
    font-weight: var(--itm-sub-weight);
    text-align: var(--itm-sub-align);
    margin: 0;
    color: var(--itm-sub-color, inherit);
    opacity: 0.9;
}

.itm-cta-container.itm-is-global .itm-text-wrap {
    flex: 1;
    /* Respect global align if set on container/text */
}

/* BUTTONS */
.itm-cta-container.itm-is-global .itm-btn-wrap {
    display: flex;
    gap: var(--itm-bw-gap);
    flex-direction: var(--itm-bw-dir);
    justify-content: var(--itm-bw-just);
    flex-wrap: var(--itm-bw-wrap);
    width: var(--itm-bw-width);
}

.itm-cta-container.itm-is-global .itm-button {
    background: var(--itm-btn1-bg);
    color: var(--itm-btn1-col);
    font-family: var(--itm-btn1-font);
    font-size: var(--itm-btn1-size);
    font-weight: var(--itm-btn1-weight);
    padding: var(--itm-btn1-pad);
    border-radius: var(--itm-btn1-rad);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Default center, overridden by align var if logic allows */
    transition: color var(--itm-btn1-transition) ease;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;

    flex: var(--itm-btn-flex);
    width: var(--itm-btn-width);
}

/* Pseudo-element for gradient hover transition */
.itm-cta-container.itm-is-global .itm-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--itm-btn1-bg-hover);
    opacity: 0;
    transition: opacity var(--itm-btn1-transition) ease;
    z-index: -1;
    border-radius: inherit;
}

.itm-cta-container.itm-is-global .itm-button:hover::before {
    opacity: 1;
}

.itm-cta-container.itm-is-global .itm-button:hover {
    color: var(--itm-btn1-col-hover);
}

.itm-cta-container.itm-is-global .itm-button-secondary {
    background: var(--itm-btn2-bg);
    color: var(--itm-btn2-col);
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: color var(--itm-btn2-transition) ease;
}

.itm-cta-container.itm-is-global .itm-button-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--itm-btn2-bg-hover);
    opacity: 0;
    transition: opacity var(--itm-btn2-transition) ease;
    z-index: -1;
    border-radius: inherit;
}

.itm-cta-container.itm-is-global .itm-button-secondary:hover::before {
    opacity: 1;
}

.itm-cta-container.itm-is-global .itm-button-secondary:hover {
    color: var(--itm-btn2-col-hover);
}

/* POPUP */
.itm-floating-popup {
    position: fixed;
    z-index: 99999;
    /* Position handled by inline style from PHP */
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.itm-popup-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Popup Button 1 (Primary) */
.itm-popup-btn-primary {
    background: var(--itm-pb1-bg);
    color: var(--itm-pb1-col);
    padding: var(--itm-pb1-pad);
    border-radius: var(--itm-pb1-rad);
    transition: color var(--itm-pb1-transition) ease;
}

.itm-popup-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--itm-pb1-bg-hover);
    opacity: 0;
    transition: opacity var(--itm-pb1-transition) ease;
    z-index: -1;
    border-radius: inherit;
}

.itm-popup-btn-primary:hover::before {
    opacity: 1;
}

.itm-popup-btn-primary:hover {
    color: var(--itm-pb1-col-hover);
}

/* Popup Button 2 (Secondary) */
.itm-popup-btn-secondary {
    background: var(--itm-pb2-bg);
    color: var(--itm-pb2-col);
    padding: var(--itm-pb2-pad);
    border-radius: var(--itm-pb2-rad);
    transition: color var(--itm-pb2-transition) ease;
}

.itm-popup-btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--itm-pb2-bg-hover);
    opacity: 0;
    transition: opacity var(--itm-pb2-transition) ease;
    z-index: -1;
    border-radius: inherit;
}

.itm-popup-btn-secondary:hover::before {
    opacity: 1;
}

.itm-popup-btn-secondary:hover {
    color: var(--itm-pb2-col-hover);
}


@keyframes itmSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes itmFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes itmZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}