/* ================================================
   BUTTONS.CSS
   ================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: none;
  border-radius: var(--radius-full);
  font: 600 14px var(--font-sans);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .01em;
}

.btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* PRIMARY */
.btn-primary {
  background: linear-gradient(135deg, var(--g), var(--gt));
  color: var(--white);
  box-shadow: var(--shadow-g);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-g-lg);
}
.btn-primary svg { stroke: var(--white); }

/* SECONDARY / OUTLINE */
.btn-outline {
  background: rgba(247,249,247,.85);
  color: var(--dark);
  border: 1.5px solid var(--border2);
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  border-color: var(--g);
  color: var(--g);
  background: var(--gbg);
}

/* AI / TINTED */
.btn-ai {
  background: linear-gradient(135deg, rgba(0,168,107,.18), rgba(0,137,123,.14));
  color: var(--gd);
  border: 1.5px solid rgba(0,168,107,.4);
  backdrop-filter: blur(8px);
}
.btn-ai:hover {
  background: linear-gradient(135deg, rgba(0,168,107,.28), rgba(0,137,123,.22));
  border-color: var(--g);
}
.btn-ai svg { stroke: var(--g); }

/* GHOST / TEXT */
.btn-ghost {
  background: transparent;
  color: var(--gray);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--g);
  color: var(--g);
}

/* DARK */
.btn-dark {
  background: var(--dark);
  color: var(--white);
}
.btn-dark:hover {
  background: var(--dark2);
  transform: translateY(-1px);
}

/* DANGER */
.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-danger:hover {
  opacity: .85;
  transform: translateY(-1px);
}

/* SIZES */
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-lg { padding: 16px 36px; font-size: 16px; }
.btn-xl { padding: 18px 42px; font-size: 17px; }

/* FULL WIDTH */
.btn-block { width: 100%; }

/* ICON ONLY */
.btn-icon {
  padding: 10px;
  border-radius: var(--radius-md);
}
.btn-icon svg { width: 18px; height: 18px; }

/* LOADING STATE */
.btn.loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

/* BOOK BUTTON (doctor card) */
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--g);
  color: var(--white);
  padding: 9px 18px;
  border-radius: var(--radius-full);
  font: 600 12px var(--font-sans);
  border: none;
  box-shadow: 0 3px 10px var(--glow);
  transition: all var(--transition);
}
.btn-book:hover { background: var(--gl); }
.btn-book svg {
  width: 13px; height: 13px;
  stroke: var(--white); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* GLOW ANIMATION (hero CTA) */
.btn-glow {
  animation: btnGlow 3s ease-in-out infinite;
}
@keyframes btnGlow {
  0%, 100% { box-shadow: var(--shadow-g); }
  50%       { box-shadow: 0 8px 40px rgba(0,168,107,.5), 0 0 0 6px rgba(0,168,107,.1); }
}
.btn-ai svg{
  width:20px;
  height:20px;

  stroke:none;
  fill:#009a62;

  filter:
    drop-shadow(0 0 4px rgba(0,168,107,.25));

  animation:aiEnergy 2.4s ease-in-out infinite;
}

@keyframes aiEnergy{

  0%,100%{
    transform:scale(1);
    filter:
      drop-shadow(0 0 4px rgba(0,168,107,.25));
  }

  50%{
    transform:scale(1.5);
    filter:
      drop-shadow(0 0 10px rgba(0,168,107,.55))
      drop-shadow(0 0 22px rgba(0,168,107,.30));
  }

}
.btn-ai{
  position:relative;
  overflow:hidden;
}

.btn-ai::after{
  content:"";

  position:absolute;
  top:-30%;
  left:-60%;

  width:50%;
  height:160%;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.05) 20%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.05) 80%,
      transparent 100%
    );

  filter:blur(18px);

  transform:skewX(-20deg);

  animation:aiScan 3.5s ease-in-out infinite;

  pointer-events:none;
}

@keyframes aiScan{
  0%{
    left:-70%;
  }

  100%{
    left:140%;
  }
}