/**
 * Frontend Styles for Floating CTA Button
 * Mobile-First Approach
 */

/* Base Button Styles (Mobile hidden by default) */
.floating-cta-button{position:fixed;z-index:9999;display:none;cursor:pointer;transition:box-shadow .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:hidden}
.floating-cta-button img{display:block;max-width:100%;height:auto;transition:transform .3s ease}
.floating-cta-button:hover{box-shadow:0 6px 16px rgba(0,0,0,.25)}
.floating-cta-button:hover img{transform:scale(1.05)}

/* Desktop: Show button by default (1024px = iPad landscape and up) */
@media (min-width:1024px){
.floating-cta-button{display:block}
}

/* Mobile: Show only if explicitly enabled */
.floating-cta-button.show-on-mobile{display:block}

/* Position Variants */
.floating-cta-bottom-right{top:auto;bottom:30px;left:auto;right:30px;--transform-x:0;--transform-y:0;transform:none}
.floating-cta-bottom-center{top:auto;bottom:30px;left:50%;right:auto;--transform-x:-50%;--transform-y:0;transform:translateX(-50%)}
.floating-cta-bottom-left{top:auto;bottom:30px;left:30px;right:auto;--transform-x:0;--transform-y:0;transform:none}
.floating-cta-center-right{top:50%;bottom:auto;left:auto;right:30px;--transform-x:0;--transform-y:-50%;transform:translateY(-50%)}
.floating-cta-center-center{top:50%;bottom:auto;left:50%;right:auto;--transform-x:-50%;--transform-y:-50%;transform:translate(-50%,-50%)}
.floating-cta-center-left{top:50%;bottom:auto;left:30px;right:auto;--transform-x:0;--transform-y:-50%;transform:translateY(-50%)}
.floating-cta-top-right{top:30px;bottom:auto;left:auto;right:30px;--transform-x:0;--transform-y:0;transform:none}
.floating-cta-top-center{top:30px;bottom:auto;left:50%;right:auto;--transform-x:-50%;--transform-y:0;transform:translateX(-50%)}
.floating-cta-top-left{top:30px;bottom:auto;left:30px;right:auto;--transform-x:0;--transform-y:0;transform:none}

/* Backdrop */
.floating-cta-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;pointer-events:none}

/* Animations */
.floating-cta-button[data-animation]:not(.animated){opacity:0}
.floating-cta-button[data-animation="fade"]:not(.animated){opacity:0}
.floating-cta-button[data-animation="slide"]:not(.animated){opacity:0;transform:translate(var(--transform-x,0),calc(var(--transform-y,0) + 100px))}
.floating-cta-button.animated{opacity:1!important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.floating-cta-button[data-animation="fade"].animated{animation:fadeIn var(--animation-duration,500ms) ease forwards}
@keyframes slideUp{from{opacity:0;transform:translate(var(--transform-x,0),calc(var(--transform-y,0) + 100px))}to{opacity:1;transform:translate(var(--transform-x,0),var(--transform-y,0))}}
.floating-cta-button[data-animation="slide"].animated{animation:slideUp var(--animation-duration,500ms) ease forwards}
.floating-cta-button[data-animation="none"]{opacity:1}

/* Responsive: Tablet adjustments */
@media (max-width:768px){
.floating-cta-bottom-right,.floating-cta-bottom-center,.floating-cta-bottom-left{bottom:20px}
.floating-cta-top-right,.floating-cta-top-center,.floating-cta-top-left{top:20px}
.floating-cta-bottom-right,.floating-cta-center-right,.floating-cta-top-right{right:20px}
.floating-cta-bottom-left,.floating-cta-center-left,.floating-cta-top-left{left:20px}
}

/* Responsive: Mobile adjustments */
@media (max-width:480px){
.floating-cta-bottom-right,.floating-cta-bottom-center,.floating-cta-bottom-left{bottom:15px}
.floating-cta-top-right,.floating-cta-top-center,.floating-cta-top-left{top:15px}
.floating-cta-bottom-right,.floating-cta-center-right,.floating-cta-top-right{right:15px}
.floating-cta-bottom-left,.floating-cta-center-left,.floating-cta-top-left{left:15px}
}