/**


 * Premium Process Chart - Frontend Styles


 */





/* Icon container styles */


.pp-icon-wrap {


    position: relative;


    overflow: visible;


}





/* Font Awesome icon styles */


.pp-icon-wrap i {


    display: inline-block;


    font-size: inherit;


    line-height: 1;


}





/* Dashicon styles */


.pp-icon-wrap .dashicons {


    display: inline-block;


    font-size: inherit;


    width: auto;


    height: auto;


    line-height: 1;


}





/* Custom HTML icon fallback */


.pp-icon-wrap img,


.pp-icon-wrap svg {


    max-width: 60%;


    max-height: 60%;


    display: block;


}





/* Badge styles */


.pp-badge {


    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


}





/* Responsive icon sizes are handled by the inline CSS generated per
   chart (container-query based, so icons scale with their own card's
   width). The old fixed 28-32px !important overrides here fought with
   that and made icons look too small once mobile switched to a
   full-width single-column layout, so they've been removed. */





/* Icon animation */


@keyframes ppFloat {


    0%, 100% { transform: translateY(0px); }


    50% { transform: translateY(-8px); }


}





.pp-icon-wrap {


    animation: ppFloat 3s ease-in-out infinite;


}