.sp-smart-post-info-box-wrapper { 

    .sp-smart-post-info-box-fullbox-link {
        text-decoration: none;
        color: inherit;
        cursor: pointer;

        &:hover{
            text-decoration: none;
        }
    }

    .sp-smart-post-info-box-separator-container {
        margin: 8px 0px 8px 0px;
    }

}

 .sp-smart-post-info-box-svg-icon{
        fill: none !important;
    }

    .sp-smart-post-info-box-fullbox-link{
       
             .sp-smart-post-info-box-title,
            .sp-smart-post-info-box-sub-title,
            .sp-smart-post-info-box-desc {                   
                cursor: pointer !important;
            }
        
    }

.sp-smart-post-info-box {  
    display: flex;    
    flex-direction: column;
    align-items: center;    
    text-align: center;
    position: relative;  
    transition: all 0.3s ease-in-out;  
    overflow:hidden;   
    
    .sp-smart-post-info-button-fullbox-overlay ,
    .sp-smart-post-info-box-icon-container,
    .sp-smart-post-info-box-icon i,
    .sp-smart-post-info-box-title,
    .sp-smart-post-info-box-sub-title,
    .sp-smart-post-info-box-icon i,
    .sp-smart-post-info-box .sp-smart-post-info-box-icon-container,
    .sp-smart-post-info-box-icon-container .sp-smart-post-info-box-icon.opacity i:hover,
    .sp-smart-post-info-box-title-container .sp-smart-post-info-box-title,
    .sp-smart-post-info-box-desc,
    .sp-smart-post-info-box-badge,
    .sp-smart-post-info-box-badge .sp-smart-post-info-box-badge-label,
    .sp-smart-post-info-box-rating-icons-background,
    .sp-smart-post-info-box-rating-icons-foreground,
    .sp-smart-post-info-box-rating-label,
    .sp-smart-post-info-box-cta-label{
        transition: all 0.3s ease-in-out;
    }  

    &::before{
        content: ''; 
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0;         
        opacity: 0; 
        transition: all 0.3s ease-in-out;  
    }
    &:hover::before{
        opacity: 1;
    }
    
       
   

    .sp-smart-post-info-button-fullbox-overlay {           
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -99;
            opacity: 0;          
            pointer-events: none;

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

    .sp-smart-post-info-box-overlay{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        pointer-events: none;
        transition: background 0.3s ease-in-out;
    }      
    
    .sp-smart-post-info-box-badge {
        background:  #E0E0E0;
        display: flex;
        padding: 6px 12px;
        justify-content: center;
        align-items: center;
        position: absolute; 
        z-index: 99; 

        &::before{
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;         
            opacity: 0; 
            transition: all 0.3s ease-in-out;  
            z-index: -1;
        }
        &:hover::before{
            opacity: 1;
        }


        &.editor-selector-hover:hover{
            outline: 1px solid #037fff;
        }          
    
        &.top-right {        
            right: 0px;
            top: 0px;        
        }
        &.top-left {        
            left: 0px;
            top: 0px;        
        }
        &.bottom-left {        
            left: 0px;
            bottom: 0px;        
        }
        &.bottom-right {        
            right: 0px;
            bottom: 0px;        
        }

        .sp-smart-post-info-box-badge-label{
            color: #2F2F2F;
            text-align: center;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; 
        }
    }

    .sp-smart-post-info-box-icon-container {
        order: 0;        
        position: relative;       
        display: flex;
        align-items: center;
        justify-content: center; 
        z-index: 99;
        overflow: hidden;

        &::before{
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;             
            opacity: 0; 
            transition: all 0.3s ease-in-out; 
            z-index: -1;       
        }
        &:hover::before{
            opacity: 1;
        }
       

        &.editor-selector-hover:hover{
            outline: 1px solid #037fff;
        }         
        
        .sp-smart-post-info-box-icon-container.icon-img-overlay{
            .sp-smart-post-info-box-img,
            .sp-smart-post-info-box-icon{
                z-index: 0;
            }
        }

        .sp-smart-post-info-box-img.zoom-in,
        .sp-smart-post-info-box-icon.zoom-in{
             img,
             i{
                width: 100%;               
            }
            &:hover img,
            &:hover svg{
                transform: scale(1.1); 
            }
        }
        .sp-smart-post-info-box-img.zoom-out,
        .sp-smart-post-info-box-icon.zoom-out{            
            img,i{
                width: 100%;              
            }
            &:hover img,
            &:hover svg{
                transform: scale(0.9); 
            }
        }
         .sp-smart-post-info-box-img.slide-left,
         .sp-smart-post-info-box-icon.slide-left{
            overflow: hidden;
            img,i{
                width: 100%;
                
            }
            &:hover img,&:hover svg{
                transform: translateX(-20%);
            }
        }
         .sp-smart-post-info-box-img.slide-right,
         .sp-smart-post-info-box-icon.slide-right{
            overflow: hidden;
              img,svg{
                width: 100%;
               
            }
            &:hover img,
            &:hover svg{
               transform: translateX(20%);
            }
        }         
        
         .sp-smart-post-info-box-img.opacity,
         .sp-smart-post-info-box-icon.opacity{
             img,svg{
                width: 100%;               
                opacity: 1;
            }             
        }    

        .sp-smart-post-info-box-img {
            width: 100%; 
        }
        .sp-smart-post-info-box-icon{
            display: flex;
            justify-content: center;
            align-items: center;

            svg{
                line-height: 1;
            }
        }

        .sp-smart-post-info-box-img{            
            position: relative;
            &.icon-img-overlay::after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;               
            }
            img{
                display: block;               
            }
        }

        
        &.icon-img-overlay .sp-smart-post-info-box-img::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0; 
        }
         &.icon-img-overlay{
            padding: 5em;
         }
        &.icon-img-overlay::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: red; 
        }
       
    }     

    .sp-smart-post-info-box-title-container {
        order: 1;        
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 99;       

        &.editor-selector-hover:hover{
            box-shadow: inset 0 0 0 1px #037fff;
        }
        
        .sp-smart-post-info-box-title,
        .sp-smart-post-info-box-sub-title {
            order: 1;          
            cursor: text;
        }

        .sp-smart-post-info-box-title {
            position: relative;          
          
            /* Title Hover Effects  */
            &.title-hover-underline::after {
                content: '';
                position: absolute;
                left: 0;
                top: calc(100% + 2px);
                width: 0;
                height: 3px;            
                transition: width 0.3s ease;
            }

            &.title-hover-underline:hover::after {
                width: 100%;
            }
            &.title-hover-overline::after {
                content: '';
                position: absolute;
                left: 0;
                top: -2px;
                width: 0;
                height: 3px;                   
                transition: width 0.3s ease;
            }
            &.title-hover-overline:hover::after {
                width: 100%;
            }

            /* double line */
            &.title-hover-double-line::after,
            &.title-hover-double-line::before {
                content: '';
                position: absolute;            
                width: 0;
                height: 3px;           
                transition: width 0.3s ease;
            }

            &.title-hover-double-line::after {
                left: 0; 
                top: calc(100% + 2px);           
            }

            &.title-hover-double-line::before {
                right: 0;  
                top: -2px;                  
            }
           
            &.title-hover-double-line:hover::after,
            &.title-hover-double-line:hover::before {
                width: 100%;
            }
            /* end double line */            

            &.title-hover-framed{
                padding: 2px 4px;
            }
            &.title-hover-framed::before {
                content: "";
                position: absolute;
                top: 0; left: 0;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                border: 3px solid transparent;
            }

            &.title-hover-framed:hover::before {
                animation: drawFrame 1.5s linear forwards;
            }

            &.title-hover-text {
                position: relative;
                display: inline-block;
                overflow: hidden;

                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0%;
                    height: 100%;
                    background-color: #fff;
                    z-index: 2;
                    pointer-events: none;
                    transition: none;
                }

                &:hover::after {
                    animation: revealOverlay 1.5s steps(30, end) forwards;
                }
            }

            @keyframes revealOverlay {
                0% {
                    width: 100%;
                    left: 0%;
                }
                
                100% {
                    width: 0%;
                    left: 100%;
                }
            }

            @keyframes drawFrame {
                0%   { border-top-color: currentColor; }
                25%  { border-right-color: currentColor; }
                50%  { border-bottom-color: currentColor; }
                75%  { border-left-color: currentColor; }
                100% { border-color: currentColor; }
            }
            /*end framed */

            /* Background Hover Effects   */
            &.title-hover-background {
                padding: 2px 3px;
                box-shadow: inset 0 0 0 0 #54b3d6;                            
                transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
            }

            &.title-hover-background:hover {               
                box-shadow: inset 1200px 0 0 0 #54b3d6;                
            }
            /* end Background Hover Effects   */
        
          /*  end Title Hover Effects   */
        }
        
    }

    .sp-smart-post-info-box-separator-container {
        order: 2;   
        z-index: 99;  
        &.editor-selector-hover:hover{
            outline: 1px solid #037fff;
        }   
    }

     .sp-smart-post-info-box-desc {      
        z-index: 99;
        order: 3;
        cursor: text;
        &.editor-selector-hover:hover{
            box-shadow: inset 0 0 0 1px #037fff;
        }

        &.drop-caps::first-letter {            
            font-size: 4em; 
            line-height: .8;           
            font-weight: bold; 
        }
    } 

    .sp-smart-post-info-box-container {
        order: 3;
        z-index: 99;
    }  
    
    .sp-smart-post-info-box-rating-wrapper {
        order: 4;
        display: flex;           
        align-items: center;
        justify-content: center;
        z-index: 99;
        &.editor-selector-hover:hover{
            box-shadow: inset 0 0 0 1px #037fff;
        }

        .sp-smart-post-info-box-rating-container{                  
            overflow: hidden;
            position: relative;
            height: 16px;
            line-height: 16px;
            order: 1;               
            
            float: none;
            text-align: left;
            background: 0 0;

            .sp-smart-post-info-box-rating-icons-background{
                display: flex;                                    
                opacity: 1; 
                 width: 100%;
                height: 100%;                 
            }
                
            .sp-smart-post-info-box-rating-icons-foreground{    
                display: flex;    
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: absolute;                       
                left: 0;                       
                opacity: 1;                       
                color: #9c0303;
                & svg{
                    flex-shrink: 0;
                }
            }
                
        }  
   
        .sp-smart-post-info-box-rating-label{        
            order: 1;
        }     
    }
    
    

    .sp-smart-post-info-box-cta {
        display: flex;
        align-items: center;
        gap: 5px;
        border: none;
        outline: none;
        background-color: transparent;   
        order: 6;
        cursor: pointer;
        text-decoration: none; 
        z-index: 99; 
        &.editor-selector-hover:hover{
            box-shadow: inset 0 0 0 1px #037fff;
        }
       &.sp-smart-post-info-box-cta-link.linking-type-button {                    
            transition: all 0.3s ease-in-out; 
            position: relative;
            overflow: hidden;
            &.sp-btn-full-width {
                align-self: stretch;
            }
             .sp-smart-post-info-box-cta-icon{
                padding-top: 0;
                position: relative;
               
               .overlay{                        
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 1;                        
                        mix-blend-mode: color;
                }
            }  
            
            &::before{
                content: ''; 
                position: absolute; 
                top: 0; 
                left: 0; 
                right: 0; 
                bottom: 0;         
                opacity: 0; 
                transition: all 0.3s ease-in-out;  
                z-index: -1;      
            }
            &:hover::before{
                opacity: 1;
            }
        }
        .sp-smart-post-info-box-cta-icon { 
            position: relative;
             .overlay{                        
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 1;                        
                        mix-blend-mode: color;
                }
        }      
       
        
        .sp-smart-post-info-box-cta-link{
            cursor: pointer;
            text-decoration: underline;
            order: 1;
            &:hover{
                text-decoration: underline;
            }
        }

        &.linking-type-button{
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            background: #ddd;
            padding: 12px 22px; 
        }

        .sp-smart-post-info-box-cta-label{
            order: 1;
            cursor: text;
        }
        .sp-smart-post-info-box-cta-icon{
            display: flex;
            align-items: center;
            justify-content: center;           
            order: 1;
            transition: color 0.3s ease-in-out;
            svg {
                color: currentColor;

                path {
                    fill: currentColor;
                }
            }
        }
    }     

    &.smart-info-box-layout-two {
        .sp-smart-post-info-box-icon-container{            
            margin: 0;
        }
        .sp-smart-post-info-box-layout-two-top{
            display: flex;
            gap: 12px;
            align-items: center;
            order: 0;

            .sp-smart-post-info-box-icon-container,
            .sp-smart-post-info-box-title-container{
                order: 0;
            }

            .sp-smart-post-info-box-title-container{
                .sp-smart-post-info-box-title{
                    padding: 0;
                }
            }
        }
        .sp-smart-post-info-box-separator-container{
            order: 1;
        }
        .sp-smart-post-info-box-desc{
            order: 2;
        }
        .sp-smart-post-info-box-rating-wrapper{
            order: 3;
        }
        .sp-smart-post-info-box-cta{
            order: 4;
        }
        .sp-smart-post-info-box-separator-container {
            margin: 8px 0px 0px 0px;
        }
    }

    &.smart-info-box-layout-three {        
        flex-direction: row;
        align-items: stretch;
       
        .sp-smart-post-info-box-content-wrapper{
            display: flex;
            flex-direction: column;
            align-items: end;
            flex: 1;
        }
        .sp-smart-post-info-box-title-container{
            order: 0;
        }
        .sp-smart-post-info-box-separator-container{
            order: 1;
        }
        .sp-smart-post-info-box-desc{
            order: 2;
        }
        .sp-smart-post-info-box-rating-wrapper{
            order: 3;
        }
        .sp-smart-post-info-box-cta{
            order: 4;
        }
    } 

    &.smart-info-box-layout-four {    
        .sp-smart-post-info-box-icon-container{
            margin: 0;
        }
    
        .sp-smart-post-info-box-layout-two-top{
            align-self: stretch;
            display: flex;        
            align-items: center;
            justify-content: space-between;
            order: 1;

            .sp-smart-post-info-box-icon-container,
            .sp-smart-post-info-box-title-container{
                order: 0;
            }

            .sp-smart-post-info-box-title-container{
                .sp-smart-post-info-box-title{
                    padding: 0;
                }
            }
         }
         .sp-smart-post-info-box-title-container{
            order: 2;
         }
         .sp-smart-post-info-box-separator-container{
            order: 3;
         }
         .sp-smart-post-info-box-desc{
            order: 4;
         }
         .sp-smart-post-info-box-rating-wrapper{
            order: 5;
         }
    }

    &.smart-info-box-layout-five {
        overflow: visible;
        margin-top: 40px;
        .sp-smart-post-info-box-icon-container{
            position: absolute;           
            z-index: 99;            
        }
        .sp-smart-post-info-box-title-container{
            order: 1;
        }
        .sp-smart-post-info-box-separator-container{
            order: 2;
        }
        .sp-smart-post-info-box-desc{
            order: 3;
        }
        .sp-smart-post-info-box-rating-wrapper{
            order: 4;
        }
        .sp-smart-post-info-box-cta.linking-type-text,
        .sp-smart-post-info-box-cta.linking-type-button
        {
            order: 5;
        }
    }
}

.sp-smart-post-info-box-wrapper.sp-smart-post-info-box-front-page{
    .sp-smart-post-info-box-cta-link   {
        cursor: pointer;
    }
    .sp-smart-post-info-box {
        .sp-smart-post-info-box-cta {
            .sp-smart-post-info-box-cta-label{
                cursor: pointer;
            }
        }
        .sp-smart-post-info-box-title-container{
            .sp-smart-post-info-box-title,
            .sp-smart-post-info-box-sub-title{
                cursor: default;
            }
        }
    .sp-smart-post-info-box-desc{
         cursor: default;
    }
    .sp-smart-post-info-box-overlay {       
        pointer-events: auto;
    }  
    }
}