/* ==========================================================================
   Floating Action Button (FAB) Widget Stylesheet
   Plugin: akuajae-core
   Module: floating-action-button
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scoped CSS Custom Properties & Base Reset
   -------------------------------------------------------------------------- */
.akuajae-fab-wrapper {
  --fab-z-index: 9999;
  --fab-offset-bottom: 20px;
  --fab-offset-top: 20px;
  --fab-offset-left: 20px;
  --fab-offset-right: 20px;
  --fab-icon-gap: 8px;
  --fab-bg-color: #8C7EFF;
  --fab-text-color: #FFFFFF;
  --fab-icon-color: #FFFFFF;
  --fab-border-color: transparent;
  --fab-border-width: 1px;
  --fab-border-radius: 50px;
  --fab-padding: 10px 18px;
  --fab-box-shadow: 0 4px 15px rgba(140, 126, 255, 0.25);
  --fab-hover-bg: rgba(255, 255, 255, 0.15);
  --fab-hover-color: #8C7EFF;
  --fab-hover-border-color: #8C7EFF;
  --fab-focus-ring-color: #8C7EFF;
  --fab-anim-duration: 2s;

  box-sizing: border-box;
}

.akuajae-fab-wrapper *,
.akuajae-fab-wrapper *::before,
.akuajae-fab-wrapper *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Fixed Viewport Positioning System (9 Presets)
   -------------------------------------------------------------------------- */
.akuajae-fab-wrapper {
  position: fixed !important;
  z-index: var(--fab-z-index, 9999);
  pointer-events: none;
}

.akuajae-fab-wrapper > * {
  pointer-events: auto;
}

/* Position Presets */
.akuajae-fab-wrapper.fab-pos-bottom_center,
.akuajae-fab-wrapper[data-fab-pos="bottom_center"] {
  top: auto;
  bottom: var(--fab-offset-bottom, 20px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.akuajae-fab-wrapper.fab-pos-bottom_left,
.akuajae-fab-wrapper[data-fab-pos="bottom_left"] {
  top: auto;
  bottom: var(--fab-offset-bottom, 20px);
  left: var(--fab-offset-left, 20px);
  right: auto;
  transform: none;
}

.akuajae-fab-wrapper.fab-pos-bottom_right,
.akuajae-fab-wrapper[data-fab-pos="bottom_right"] {
  top: auto;
  bottom: var(--fab-offset-bottom, 20px);
  left: auto;
  right: var(--fab-offset-right, 20px);
  transform: none;
}

.akuajae-fab-wrapper.fab-pos-top_left,
.akuajae-fab-wrapper[data-fab-pos="top_left"] {
  top: var(--fab-offset-top, 20px);
  bottom: auto;
  left: var(--fab-offset-left, 20px);
  right: auto;
  transform: none;
}

.akuajae-fab-wrapper.fab-pos-top_center,
.akuajae-fab-wrapper[data-fab-pos="top_center"] {
  top: var(--fab-offset-top, 20px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.akuajae-fab-wrapper.fab-pos-top_right,
.akuajae-fab-wrapper[data-fab-pos="top_right"] {
  top: var(--fab-offset-top, 20px);
  bottom: auto;
  left: auto;
  right: var(--fab-offset-right, 20px);
  transform: none;
}

.akuajae-fab-wrapper.fab-pos-middle_left,
.akuajae-fab-wrapper[data-fab-pos="middle_left"] {
  top: 50%;
  bottom: auto;
  left: var(--fab-offset-left, 20px);
  right: auto;
  transform: translateY(-50%);
}

.akuajae-fab-wrapper.fab-pos-center,
.akuajae-fab-wrapper[data-fab-pos="center"] {
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.akuajae-fab-wrapper.fab-pos-middle_right,
.akuajae-fab-wrapper[data-fab-pos="middle_right"] {
  top: 50%;
  bottom: auto;
  left: auto;
  right: var(--fab-offset-right, 20px);
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   3. Content-Sized Width Rules (Desktop, Tablet, Mobile)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   3. Content-Sized Width Rules & Overrides (Desktop, Tablet, Mobile)
   -------------------------------------------------------------------------- */
.akuajae-fab-wrapper,
.akuajae-fab-button {
  width: fit-content;
  width: -moz-fit-content;
  width: max-content;
}

/* Explicit Full Width Modifier */
.akuajae-fab-wrapper.fab-width-full_width,
.akuajae-fab-wrapper.fab-full-width,
.akuajae-fab-wrapper[data-fab-width="full_width"],
.akuajae-fab-wrapper[data-fab-width="full_width"] .akuajae-fab-button {
  width: calc(100vw - 40px) !important;
  max-width: 100% !important;
  left: 20px !important;
  right: 20px !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .akuajae-fab-wrapper,
  .akuajae-fab-button {
    max-width: calc(100vw - 40px);
  }

  .akuajae-fab-wrapper.fab-width-full_width,
  .akuajae-fab-wrapper.fab-full-width,
  .akuajae-fab-wrapper[data-fab-width="full_width"] {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* --------------------------------------------------------------------------
   4. Button Component Design & Defaults
   -------------------------------------------------------------------------- */
.akuajae-fab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;

  background-color: var(--fab-bg-color, #8C7EFF);
  color: var(--fab-text-color, #FFFFFF);
  border: var(--fab-border-width, 1px) solid var(--fab-border-color, transparent);
  border-radius: var(--fab-border-radius, 50px);
  padding: var(--fab-padding, 10px 18px);
  box-shadow: var(--fab-box-shadow, 0 4px 15px rgba(140, 126, 255, 0.25));
  gap: var(--fab-icon-gap, 8px);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fab-font-size, 16px);
  font-weight: var(--fab-font-weight, 600);
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  outline: none;

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.akuajae-fab-button .akuajae-fab-icon,
.akuajae-fab-button svg,
.akuajae-fab-button i {
  fill: var(--fab-icon-color, #FFFFFF);
  color: var(--fab-icon-color, #FFFFFF);
  width: var(--fab-icon-size, 20px);
  height: var(--fab-icon-size, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.akuajae-fab-button .akuajae-fab-text {
  display: inline-block;
  color: inherit;
  font: inherit;
}

/* --------------------------------------------------------------------------
   5. Hover State & Effects System
   -------------------------------------------------------------------------- */

/* Default Hover Color Transition (Overridden by Elementor Inline Styles if set) */
.akuajae-fab-button:hover,
.akuajae-fab-wrapper:hover .akuajae-fab-button {
  background-color: var(--fab-hover-bg, rgba(255, 255, 255, 0.15));
  color: var(--fab-hover-color, #8C7EFF);
  border-color: var(--fab-hover-border-color, #8C7EFF);
}

.akuajae-fab-button:hover .akuajae-fab-icon,
.akuajae-fab-button:hover svg,
.akuajae-fab-button:hover i,
.akuajae-fab-wrapper:hover .akuajae-fab-button .akuajae-fab-icon,
.akuajae-fab-wrapper:hover .akuajae-fab-button svg,
.akuajae-fab-wrapper:hover .akuajae-fab-button i {
  fill: var(--fab-hover-color, #8C7EFF);
  color: var(--fab-hover-color, #8C7EFF);
}

/* Hover Effect Mode: None */
.akuajae-fab-wrapper[data-hover-effect="none"] .akuajae-fab-button:hover,
.akuajae-fab-button[data-hover-effect="none"]:hover {
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hover Effect Mode: Scale / Glass+Scale / Shimmer+Scale */
.akuajae-fab-wrapper[data-hover-effect="scale"] .akuajae-fab-button:hover,
.akuajae-fab-wrapper[data-hover-effect="glass_scale"] .akuajae-fab-button:hover,
.akuajae-fab-wrapper[data-hover-effect="shimmer_scale"] .akuajae-fab-button:hover,
.akuajae-fab-button[data-hover-effect="scale"]:hover,
.akuajae-fab-button[data-hover-effect="glass_scale"]:hover,
.akuajae-fab-button[data-hover-effect="shimmer_scale"]:hover {
  transform: scale(1.05);
}

/* Hover Effect Mode: Glass & Glass+Scale */
.akuajae-fab-wrapper[data-hover-effect="glass"] .akuajae-fab-button:hover,
.akuajae-fab-wrapper[data-hover-effect="glass_scale"] .akuajae-fab-button:hover,
.akuajae-fab-button[data-hover-effect="glass"]:hover,
.akuajae-fab-button[data-hover-effect="glass_scale"]:hover {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hover Effect Mode: Shimmer & Shimmer+Scale */
.akuajae-fab-wrapper[data-hover-effect="shimmer"] .akuajae-fab-button::after,
.akuajae-fab-wrapper[data-hover-effect="shimmer_scale"] .akuajae-fab-button::after,
.akuajae-fab-button[data-hover-effect="shimmer"]::after,
.akuajae-fab-button[data-hover-effect="shimmer_scale"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  transform: translateX(-150%) skewX(-20deg);
  transition: transform 0.6s ease-in-out;
  pointer-events: none;
}

.akuajae-fab-wrapper[data-hover-effect="shimmer"] .akuajae-fab-button:hover::after,
.akuajae-fab-wrapper[data-hover-effect="shimmer_scale"] .akuajae-fab-button:hover::after,
.akuajae-fab-button[data-hover-effect="shimmer"]:hover::after,
.akuajae-fab-button[data-hover-effect="shimmer_scale"]:hover::after {
  transform: translateX(150%) skewX(-20deg);
}

/* Glassmorphism Static Preset */
.akuajae-fab-wrapper[data-glassmorphism="glassmorphism"] .akuajae-fab-button,
.akuajae-fab-wrapper.fab-glassmorphism-yes .akuajae-fab-button,
.akuajae-fab-wrapper.fab-glassmorphism .akuajae-fab-button,
.akuajae-fab-button[data-glassmorphism="glassmorphism"] {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Active Pressed State */
.akuajae-fab-button:active {
  transform: scale(0.98);
}

/* --------------------------------------------------------------------------
   6. Attention Animations Keyframes (Transform & Opacity Only)
   -------------------------------------------------------------------------- */

/* Keyframe: Pulse */
@keyframes fab-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* Keyframe: Scale */
@keyframes fab-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

/* Keyframe: Bounce */
@keyframes fab-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

/* Keyframe: Float */
@keyframes fab-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Keyframe: Shake */
@keyframes fab-shake {
  0%, 100% {
    transform: translateX(0);
  }
  15%, 45%, 75% {
    transform: translateX(-5px);
  }
  30%, 60%, 90% {
    transform: translateX(5px);
  }
}

/* Keyframe: Shimmer */
@keyframes fab-shimmer {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
}

@keyframes fab-shimmer-sweep {
  0% {
    transform: translateX(-150%) skewX(-20deg);
    opacity: 0;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(150%) skewX(-20deg);
    opacity: 0;
  }
}

/* Animation Triggers & Intensity Modifiers */
.akuajae-fab-wrapper[data-attention-intensity="subtle"],
.akuajae-fab-button[data-attention-intensity="subtle"] {
  --fab-intensity-scale: 1.04;
  --fab-intensity-bounce: -6px;
  --fab-intensity-float: -4px;
}

.akuajae-fab-wrapper[data-attention-intensity="normal"],
.akuajae-fab-button[data-attention-intensity="normal"] {
  --fab-intensity-scale: 1.08;
  --fab-intensity-bounce: -12px;
  --fab-intensity-float: -8px;
}

.akuajae-fab-wrapper[data-attention-intensity="strong"],
.akuajae-fab-button[data-attention-intensity="strong"] {
  --fab-intensity-scale: 1.15;
  --fab-intensity-bounce: -18px;
  --fab-intensity-float: -12px;
}

.akuajae-fab-button.fab-anim-pulse,
.akuajae-fab-button.akuajae-fab-anim-pulse,
.akuajae-fab-wrapper.fab-anim-pulse .akuajae-fab-button,
.akuajae-fab-wrapper[data-attention="pulse"] .akuajae-fab-button,
.akuajae-fab-button[data-attention="pulse"] {
  animation: fab-pulse var(--fab-anim-duration, 2s) infinite ease-in-out;
}

.akuajae-fab-button.fab-anim-scale,
.akuajae-fab-button.akuajae-fab-anim-scale,
.akuajae-fab-wrapper.fab-anim-scale .akuajae-fab-button,
.akuajae-fab-wrapper[data-attention="scale"] .akuajae-fab-button,
.akuajae-fab-button[data-attention="scale"] {
  animation: fab-scale var(--fab-anim-duration, 2s) infinite ease-in-out;
}

.akuajae-fab-button.fab-anim-bounce,
.akuajae-fab-button.akuajae-fab-anim-bounce,
.akuajae-fab-wrapper.fab-anim-bounce .akuajae-fab-button,
.akuajae-fab-wrapper[data-attention="bounce"] .akuajae-fab-button,
.akuajae-fab-button[data-attention="bounce"] {
  animation: fab-bounce var(--fab-anim-duration, 2.2s) infinite ease-in-out;
}

.akuajae-fab-button.fab-anim-float,
.akuajae-fab-button.akuajae-fab-anim-float,
.akuajae-fab-wrapper.fab-anim-float .akuajae-fab-button,
.akuajae-fab-wrapper[data-attention="float"] .akuajae-fab-button,
.akuajae-fab-button[data-attention="float"] {
  animation: fab-float var(--fab-anim-duration, 3s) infinite ease-in-out;
}

.akuajae-fab-button.fab-anim-shake,
.akuajae-fab-button.akuajae-fab-anim-shake,
.akuajae-fab-wrapper.fab-anim-shake .akuajae-fab-button,
.akuajae-fab-wrapper[data-attention="shake"] .akuajae-fab-button,
.akuajae-fab-button[data-attention="shake"] {
  animation: fab-shake var(--fab-anim-duration, 2.5s) infinite ease-in-out;
}

.akuajae-fab-button.fab-anim-shimmer,
.akuajae-fab-button.akuajae-fab-anim-shimmer,
.akuajae-fab-wrapper.fab-anim-shimmer .akuajae-fab-button,
.akuajae-fab-wrapper[data-attention="shimmer"] .akuajae-fab-button,
.akuajae-fab-button[data-attention="shimmer"] {
  animation: fab-shimmer var(--fab-anim-duration, 2.5s) infinite ease-in-out;
}

.akuajae-fab-button.fab-anim-shimmer::after,
.akuajae-fab-button.akuajae-fab-anim-shimmer::after,
.akuajae-fab-wrapper.fab-anim-shimmer .akuajae-fab-button::after,
.akuajae-fab-wrapper[data-attention="shimmer"] .akuajae-fab-button::after,
.akuajae-fab-button[data-attention="shimmer"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: fab-shimmer-sweep var(--fab-anim-duration, 2.5s) infinite ease-in-out;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Focus Visible & Accessibility
   -------------------------------------------------------------------------- */
.akuajae-fab-button:focus-visible {
  outline: 3px solid var(--fab-focus-ring-color, #111111);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8. Elementor Editor Canvas Overrides (.elementor-editor-active)
   -------------------------------------------------------------------------- */
.elementor-editor-active .akuajae-fab-wrapper {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 15px auto !important;
}