@charset "UTF-8";

/* ===================================
   AI Quote Floating Button
=================================== */

.ai-quote-float{

  position:fixed;

  right:24px;
  bottom:24px;

  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:16px 24px;

  border:none;
  border-radius:999px;

  cursor:pointer;

  color:#111;

  font-size:15px;
  font-weight:900;

  background:
  linear-gradient(
    135deg,
    #fff0b8,
    #d8b56d
  );

  box-shadow:
  0 0 25px rgba(216,181,109,.35);

  animation:
  aiGlow 2.5s ease-in-out infinite;

  transition:
  transform .35s ease,
  box-shadow .35s ease,
  opacity .35s ease;
}

.ai-quote-float:hover{

  transform:
  translateY(-8px)
  scale(1.08);

  box-shadow:
  0 0 50px rgba(255,240,184,.9),
  0 0 100px rgba(216,181,109,.7);
}

.ai-quote-float:active{

  transform:
  scale(.96);
}

.ai-quote-float svg{
  width:18px;
  height:18px;
}

/* ===================================
   Floating Contact Group
=================================== */

.float-actions{

  position:fixed;

  right:24px;
  bottom:95px;

  z-index:9998;

  display:flex;
  flex-direction:column;
  gap:12px;
}

.float-btn{

  width:58px;
  height:58px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  background:
  rgba(17,24,39,.95);

  border:
  1px solid rgba(216,181,109,.25);

  backdrop-filter:
  blur(12px);

  box-shadow:
  0 10px 30px rgba(0,0,0,.25);

  transition:
  all .3s ease;
}

.float-btn:hover{

  transform:
  translateY(-5px);

  border-color:
  rgba(255,240,184,.6);

  box-shadow:
  0 0 25px rgba(216,181,109,.25);
}

.float-btn img{
  width:28px;
  height:28px;
}

/* ===================================
   Scroll To Top
=================================== */

.scroll-top-btn{

  opacity:0;
  visibility:hidden;

  transform:
  translateY(20px);

  transition:
  all .35s ease;
}

.scroll-top-btn.show{

  opacity:1;
  visibility:visible;

  transform:
  translateY(0);
}

/* ===================================
   Pulse Effect
=================================== */

.ai-quote-float::before{

  content:"";

  position:absolute;

  inset:-8px;

  border-radius:999px;

  border:
  2px solid rgba(255,240,184,.25);

  animation:
  pulseRing 2.5s infinite;

  pointer-events:none;
}

@keyframes pulseRing{

  0%{
    transform:scale(.9);
    opacity:.8;
  }

  70%{
    transform:scale(1.3);
    opacity:0;
  }

  100%{
    opacity:0;
  }

}

@keyframes aiGlow{

  0%,100%{

    box-shadow:
    0 0 25px rgba(216,181,109,.35),
    0 0 50px rgba(216,181,109,.2);

  }

  50%{

    box-shadow:
    0 0 45px rgba(255,240,184,.9),
    0 0 90px rgba(216,181,109,.65);

  }

}

/* ===================================
   Mobile
=================================== */

@media(max-width:768px){

  .ai-quote-float{

    right:16px;
    bottom:16px;

    padding:14px 20px;

    font-size:14px;
  }

  .float-actions{

    right:16px;
    bottom:82px;
  }

  .float-btn{

    width:52px;
    height:52px;
  }

  .float-btn img{

    width:24px;
    height:24px;
  }

}