/* TapTop Button Base Styles */
.taptop-btn{
  position:fixed; 
  z-index:2147483647; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  border:none; 
  box-shadow:0 8px 24px rgba(0,0,0,.18); 
  cursor:pointer;
  transition:opacity .22s ease, transform .22s ease, background-color .2s ease;
}

/* Button Shapes */
.taptop-btn.shape-circle {
  border-radius: 9999px;
}

.taptop-btn.shape-square {
  border-radius: 0;
}

.taptop-btn.shape-rounded-square {
  border-radius: 12px;
}

.taptop-btn.shape-pill {
  border-radius: 9999px;
  width: auto !important;
  padding: 0 20px;
}

.taptop-btn.shape-pentagon {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.taptop-btn.shape-hexagon {
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Animation Styles - Initial States */
.taptop-btn.anim-fade {
  opacity: 0 !important;
  transform: scale(0.96);
}

.taptop-btn.anim-slide {
  opacity: 0 !important;
  transform: translateY(30px);
}

.taptop-btn.anim-scale {
  opacity: 0 !important;
  transform: scale(0.5);
}

.taptop-btn.anim-bounce {
  opacity: 0 !important;
  transform: translateY(50px) scale(0.8);
}

.taptop-btn.anim-rotate {
  opacity: 0 !important;
  transform: rotate(180deg) scale(0.8);
}

.taptop-btn.anim-flip {
  opacity: 0 !important;
  transform: perspective(600px) rotateX(90deg);
  transform-style: preserve-3d;
}

/* Animation Styles - Visible States */
.taptop-btn.anim-fade.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.taptop-btn.anim-slide.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.taptop-btn.anim-scale.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.taptop-btn.anim-bounce.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: taptop-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.taptop-btn.anim-rotate.visible {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

.taptop-btn.anim-flip.visible {
  opacity: 1 !important;
  transform: perspective(600px) rotateX(0deg) !important;
}

/* Bounce Animation Keyframes */
@keyframes taptop-bounce-in {
  0% { 
    transform: translateY(50px) scale(0.8); 
  }
  50% { 
    transform: translateY(-10px) scale(1.05); 
  }
  70% { 
    transform: translateY(5px) scale(0.98); 
  }
  100% { 
    transform: translateY(0) scale(1); 
  }
}

/* Hover Effects - Respect Shape */
.taptop-btn.visible:hover {
  transform: scale(1.08) !important;
}

.taptop-btn.anim-rotate.visible:hover {
  transform: rotate(0deg) scale(1.08) !important;
}

.taptop-btn.anim-flip.visible:hover {
  transform: perspective(600px) rotateX(0deg) scale(1.08) !important;
}

/* Focus Styles */
.taptop-btn:focus-visible { 
  outline:2px solid rgba(0,0,0,.35); 
  outline-offset:2px; 
}

/* Adaptive positioning with smooth transitions */
.taptop-btn.adaptive {
  transition: opacity .22s ease, transform .22s ease, bottom .3s ease, left .3s ease, right .3s ease;
}

/* Hide on Scroll Down State */
.taptop-btn.hide-scroll {
  pointer-events: none;
}

.taptop-btn.hide-scroll.anim-fade {
  opacity: 0 !important;
  transform: scale(0.96) !important;
}

.taptop-btn.hide-scroll.anim-slide {
  opacity: 0 !important;
  transform: translateY(30px) !important;
}

.taptop-btn.hide-scroll.anim-scale {
  opacity: 0 !important;
  transform: scale(0.5) !important;
}

.taptop-btn.hide-scroll.anim-bounce {
  opacity: 0 !important;
  transform: translateY(30px) scale(0.8) !important;
}

.taptop-btn.hide-scroll.anim-rotate {
  opacity: 0 !important;
  transform: rotate(-180deg) scale(0.8) !important;
}

.taptop-btn.hide-scroll.anim-flip {
  opacity: 0 !important;
  transform: perspective(600px) rotateX(-90deg) !important;
}

/* Progress ring animations and accessibility */
@media (prefers-reduced-motion: reduce) {
  .taptop-btn {
    transition: opacity .22s ease !important;
    animation: none !important;
  }
  
  .taptop-btn.adaptive {
    transition: opacity .22s ease, bottom .3s ease, left .3s ease, right .3s ease !important;
  }
  
  .taptop-btn svg circle {
    transition: none !important;
  }
  
  .taptop-btn:hover {
    transform: scale(1) !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .taptop-btn {
    border: 2px solid;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
  }
}

/* Enhanced focus styles for better accessibility */
.taptop-btn:focus-visible {
  outline: 3px solid #005a9c;
  outline-offset: 3px;
}

/* Support for forced colors mode */
@media (forced-colors: active) {
  .taptop-btn {
    border: 1px solid;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
  
  .taptop-btn:hover {
    background: Highlight !important;
    color: HighlightText !important;
  }
}

/* Mobile safe area support - Modern approach */
@supports (bottom: env(safe-area-inset-bottom)) {
  .taptop-btn[data-safe-area="true"] {
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
  }
}

/* Fallback for older browsers */
@supports (bottom: constant(safe-area-inset-bottom)) {
  .taptop-btn[data-safe-area="true"] {
    --safe-area-bottom: constant(safe-area-inset-bottom);
    --safe-area-left: constant(safe-area-inset-left);
    --safe-area-right: constant(safe-area-inset-right);
  }
}