/* ==========================================================================
   Floating "Text Us" Button - Captains Tattoo Company
   ========================================================================== */

.text-fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-fixed);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  padding: var(--space-3) var(--space-5);
  background-color: var(--color-black);
  color: var(--color-white);
  text-decoration: none;

  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;

  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xl);

  transition: transform var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.text-fab:hover,
.text-fab:focus-visible {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2xl);
}

.text-fab:active {
  transform: translateY(0);
}

.text-fab__icon {
  flex-shrink: 0;
}

.text-fab__label {
  white-space: nowrap;
}

/* Mobile: keep the full label but tighten spacing so it never crowds edges */
@media (max-width: 480px) {
  .text-fab {
    bottom: var(--space-4);
    right: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
  }
}