/**
 * Syndified Call To Action Modal Styles
 * Minimal CSS for animations - Tailwind handles the rest
 * Modal structure is defined in /templates/partials/call-to-action-modal.php
 */

/* Animation transitions for modal overlay */
#syndified-call-to-action-modal {
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    z-index: 99999 ;
    display: none;
}

#syndified-call-to-action-modal.syndified-modal-active {
    background-color: rgba(0, 0, 0, 0.90);
    display: flex ;
    align-items: stretch ;
    justify-content: flex-end ;
}

#syndified-call-to-action-modal .syndified-modal-close {
    position: absolute ;
    top: 1rem ;
    right: 1rem ;
}

/* Slide-out panel */
#dsw-call-to-action-modal-container {
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: translateX(100%);
    overflow: hidden;
    display: flex;
    position: relative;
}

#syndified-call-to-action-modal.syndified-modal-active > div {
    transform: translateX(0) ;
    animation: dsw-slide-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#dsw-call-to-action-modal-content {
    flex: 1;
    overflow-y: auto;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
    min-height: 200px;
}

.dsw-call-to-action-form-container{
    font-family: 'Lato', sans-serif;
}

#syndified-call-to-action-modal .dsw-call-to-action-spinner{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#syndified-call-to-action-modal .dsw-call-to-action-spinner::before{
    content: "";
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--dss-primary-color, var(--dealerColor, #111827));
    border-radius: 50%;
    animation: dsw-spin 0.8s linear infinite;
}

@keyframes dsw-spin {
    to { transform: rotate(360deg); }
}

/* Slide-in with slight settle effect */
@keyframes dsw-slide-in {
    0% { transform: translateX(100%); }
    80% { transform: translateX(-12px); }
    100% { transform: translateX(0); }
}

#syndified-call-to-action-modal .dsw-hidden{ display:none !important; }

/* Gravity forms Styles */
.dsw-call-to-action-form-container .gform_wrapper .gform_fields > * {
    margin-bottom: 1rem;
    border:none;
    width: 100%;
}

.dsw-call-to-action-form-container .gfield_visibility_hidden {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}
.dsw-call-to-action-form-container .gform_wrapper .gform_title{
    font-weight: 400;
    font-size: 36px;
}

.dsw-call-to-action-form-container .gform_wrapper .gform-field-label{
    font-weight: 700;
    font-size: 20px;
    line-height: 2rem;
}

.dsw-call-to-action-form-container .gform_wrapper fieldset{
    padding-top: 0.5rem;
    padding-bottom: 0rem;
    padding-left: 0;
    padding-right: 0;
}

.dsw-call-to-action-form-container .gform_wrapper fieldset legend{
    padding-left: 0;
    margin-bottom: 0;
}

.dsw-call-to-action-form-container .gform_wrapper fieldset .ginput_container .gfield-choice-input{
    margin-right: 0.5rem;
}

.dsw-call-to-action-form-container .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]), .dsw-call-to-action-form-container .gform_wrapper .ginput_container textarea {
    width:100%;
}

.dsw-call-to-action-form-container .gform_wrapper .ginput_container--name {
    display: flex;
    gap: 1rem;
}

@media (min-width: 768px) {
    #dsw-call-to-action-modal-container {
        max-width: 33% ;
    }

    .dsw-call-to-action-form-container .gform_wrapper .ginput_container_textarea textarea{
        max-height: 80px;
    }

    .dsw-call-to-action-form-container .gform_wrapper fieldset .ginput_container .gfield-choice-input{
        vertical-align: middle;
    }
}

@media (max-width: 767px) {
    #dsw-call-to-action-modal-container {
        max-width: 100% ;
    }

    #dsw-call-to-action-modal-content {
        padding-left: 2rem;
        padding-top: 2.5rem;
        padding-right: 2rem;
    }

    #syndified-call-to-action-modal .syndified-modal-close {
        top: 0.5rem ;
        right: 0.5rem ;
    }

    /* Gravity forms Styles */
    .dsw-call-to-action-form-container .gform_wrapper .ginput_container--name {
        flex-wrap: wrap;
    }
}