/* ────────────────────────────────────────────────
 * Floating Action Buttons
 * Source: extracted from index.css lines 10285–10560
 * ──────────────────────────────────────────────── */

/* ============================================
   AI SEARCH - Conversational product search
   ============================================ */

/* Горизонтальный блок: подпись над иконками, пульсация на строке иконок, по центру снизу */
.fab-twobtn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Текст над иконками — фиксированная высота, не ездит */
.fab-tooltip {
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--color-text-dark) !important;
  pointer-events: none !important;
}
.fab-tooltip .fab-tooltip-text {
  display: block !important;
  white-space: nowrap !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  padding: 4px 12px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em !important;
  opacity: 0 !important;
  transform: translateY(6px) scale(0.9) !important;
  transition:
    opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Auto-cycle: tooltips appear by themselves, alternating */
@keyframes tooltipCycleSearch {
  0%, 28% { opacity: 1; transform: translateY(0) scale(1); }
  35%, 100% { opacity: 0; transform: translateY(6px) scale(0.9); }
}
@keyframes tooltipCycleCall {
  0%, 48% { opacity: 0; transform: translateY(6px) scale(0.9); }
  55%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  85%, 100% { opacity: 0; transform: translateY(6px) scale(0.9); }
}
.fab-tooltip-search {
  animation: tooltipCycleSearch 6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite !important;
}
.fab-tooltip-call {
  position: absolute !important;
  animation: tooltipCycleCall 6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite !important;
}

/* Hover still overrides auto-cycle */
.fab-twobtn:has(.ai-search-fab:hover) .fab-tooltip-search,
.fab-twobtn:has(.fab-callback:hover) .fab-tooltip-callback,
.fab-twobtn:has(.callbutton:hover) .fab-tooltip-call {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Callback tooltip — за замовчуванням прихований, показ лише на hover.
   Auto-cycle (search ↔ call) не зачіпається — це 3-я опція без cycle. */
.fab-tooltip-callback {
  position: absolute !important;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 0.25s, transform 0.25s;
}

/* Одна строка иконок — только горизонтально, по центру, пульсация здесь */
.fab-btn-row {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
/* Пульсация убрана — брутализм не использует декоративные анимации */

/* ── FAB micro-interactions (2026 Dribbble / spring-physics) ── */
.fab-twobtn .ai-search-fab,
.fab-twobtn .fab-callback,
.fab-twobtn .callbutton {
  position: relative !important;
  z-index: 1 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(199, 140, 71, 0.35) !important;
  /* Spring-like cubic-bezier: overshoot then settle */
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    background 0.3s ease !important;
  will-change: transform, box-shadow !important;
}
.fab-twobtn .ai-search-fab:focus,
.fab-twobtn .fab-callback:focus,
.fab-twobtn .callbutton:focus {
  outline: none !important;
}

/* Hover: spring bounce up + glow bloom */
.fab-twobtn .ai-search-fab:hover,
.fab-twobtn .fab-callback:hover,
.fab-twobtn .callbutton:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow:
    0 12px 32px var(--overlay-accent-50),
    0 0 60px var(--overlay-accent-15) !important;
}

/* Active: tactile press-down (squish) */
.fab-twobtn .ai-search-fab:active,
.fab-twobtn .fab-callback:active,
.fab-twobtn .callbutton:active {
  transform: translateY(1px) scale(0.92) !important;
  box-shadow: 0 1px 6px var(--overlay-accent-30) !important;
  transition-duration: 0.1s !important;
}

.fab-twobtn .ai-search-fab svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.fab-twobtn .ai-search-fab:hover svg {
  transform: scale(1.15) rotate(-8deg) !important;
}

.fab-twobtn .callbutton svg {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.fab-twobtn .callbutton:hover svg {
  transform: scale(1.15) rotate(12deg) !important;
}

.fab-twobtn .callbutton::before,
.fab-twobtn .callbutton::after {
  display: none !important;
}

/* Phase: callback FAB (3rd button — quickOrder modal trigger) */
.fab-twobtn .fab-callback svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.fab-twobtn .fab-callback:hover svg {
  transform: scale(1.15) rotate(8deg) !important;
}

@media (max-width: 37.5em) {
  .fab-twobtn {
    bottom: 16px !important;
    right: 16px !important;
  }
}

@media (max-width: 23.4375em) {
  .fab-twobtn {
    bottom: 16px !important;
    right: 12px !important;
  }
}

/* Floating Action Button (внутри fab-twobtn или отдельно) */
.ai-search-fab {
  position: fixed !important;
  bottom: 100px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px var(--overlay-accent-40) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ai-search-fab:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px var(--overlay-accent-50) !important;
}

.ai-search-fab svg {
  width: 20px !important;
  height: 20px !important;
}

.ai-search-fab .fab-label {
  display: inline !important;
}

@media (max-width: 37.5em) {
  .ai-search-fab {
    padding: 16px !important;
    border-radius: 0 !important;
    bottom: 90px !important;
  }
  .ai-search-fab .fab-label {
    display: none !important;
  }
}

/* Кнопка внутри .fab-twobtn — остаётся в блоке, поверх ссылки (клик = чат, не звонок) */
.fab-twobtn .ai-search-fab {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
}
.fab-twobtn .callbutton {
  position: relative !important;
  z-index: 1 !important;
  background: var(--color-accent, #D69844) !important;
  color: #0a0807 !important;
  box-shadow: 0 2px 12px rgba(199, 140, 71, 0.35);
  will-change: transform, opacity;
  animation: fabBreathe 3s ease-in-out infinite !important;
}