/* Liquid Button Animation */
.btn-liquid,
.email-btn-liquid {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--accent-color) 0 0) no-repeat calc(200% - var(--p, 0%))
    100% / 200% var(--p, 0.2em);
  transition: 0.3s var(--t, 0s),
    background-position 0.3s calc(0.3s - var(--t, 0s));
  /* Add border properties to match the reference image */
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  background-color: transparent;
}

.btn-liquid:focus-visible,
.email-btn-liquid:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

.btn.btn-primary.btn-liquid,
.btn.btn-primary.email-btn-liquid {
  background-color: transparent;
  border-color: var(--accent-color);
  color: var(--text-color);
}

[data-theme="light"] .btn-liquid,
[data-theme="light"] .email-btn-liquid,
[data-theme="dark"] .btn-liquid,
[data-theme="dark"] .email-btn-liquid {
  color: var(--text-color);
}

@media (hover: hover) and (pointer: fine) {
  .btn-liquid:hover,
  .email-btn-liquid:hover {
    --p: 100%;
    --t: 0.3s;
    /* Ensure border remains visible during hover */
    border: 2px solid var(--accent-color);
  }

  /* Theme-specific hover styles */
  [data-theme="light"] .btn-liquid:hover,
  [data-theme="light"] .email-btn-liquid:hover {
    color: #fff; /* White text on dark background in light mode */
  }

  [data-theme="dark"] .btn-liquid:hover,
  [data-theme="dark"] .email-btn-liquid:hover {
    color: var(--primary-bg); /* Dark text on light background in dark mode */
  }
}
.btn.btn-primary.btn-liquid i,
.btn.btn-primary.email-btn-liquid i {
  color: inherit;
}