/**
 * 21st yashsehgal/3d-button — adapted for NLMedia secondary CTAs
 * Source DNA (author gist): rounded-xl + border + border-b-4 depth + press
 * Scope A/B/C/D only. Do NOT apply to .cta-press-depth / footer primary.
 */

:root {
  --cta-3d-radius: 0.75rem;
  --cta-3d-border: rgba(255, 255, 255, 0.22);
  --cta-3d-depth: rgba(0, 0, 0, 0.55);
  --cta-3d-bg: rgba(255, 255, 255, 0.08);
  --cta-3d-bg-hover: rgba(255, 255, 255, 0.14);
  --cta-3d-fg: #f2f2f2;
}

/* A — secondary Telegram beside primary phone */
a[data-cta="process-tg"],
a[data-cta="video-end-tg"],
a[data-cta="hero-tg"],
a[data-cta="ask-ai-tg"],
/* B — contact messengers */
a[data-cta="contact-wa"],
a[data-cta="contact-viber"],
a[data-cta="contact-tg"],
/* C — community socials */
a[data-cta="social-ig"],
a[data-cta="social-tiktok"],
[data-cta="social-tg-community"],
[data-cta="social-fb"],
/* D — Ask AI (FAQ open only; sticky FAB keeps solid styles in services.css) */
button[data-cta="ask-ai-open"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--cta-3d-radius);
  border: 1px solid var(--cta-3d-border);
  border-bottom-width: 4px;
  border-bottom-color: var(--cta-3d-depth);
  background: var(--cta-3d-bg);
  color: var(--cta-3d-fg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    border-bottom-width 0.12s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

a[data-cta="process-tg"]:hover,
a[data-cta="video-end-tg"]:hover,
a[data-cta="hero-tg"]:hover,
a[data-cta="ask-ai-tg"]:hover,
a[data-cta="contact-wa"]:hover,
a[data-cta="contact-viber"]:hover,
a[data-cta="contact-tg"]:hover,
a[data-cta="social-ig"]:hover,
a[data-cta="social-tiktok"]:hover,
button[data-cta="ask-ai-open"]:hover {
  background: var(--cta-3d-bg-hover);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

a[data-cta="process-tg"]:active,
a[data-cta="video-end-tg"]:active,
a[data-cta="hero-tg"]:active,
a[data-cta="ask-ai-tg"]:active,
a[data-cta="contact-wa"]:active,
a[data-cta="contact-viber"]:active,
a[data-cta="contact-tg"]:active,
a[data-cta="social-ig"]:active,
a[data-cta="social-tiktok"]:active,
button[data-cta="ask-ai-open"]:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a[data-cta="process-tg"]:focus-visible,
a[data-cta="video-end-tg"]:focus-visible,
a[data-cta="hero-tg"]:focus-visible,
a[data-cta="contact-wa"]:focus-visible,
a[data-cta="contact-viber"]:focus-visible,
a[data-cta="contact-tg"]:focus-visible,
a[data-cta="social-ig"]:focus-visible,
a[data-cta="social-tiktok"]:focus-visible,
button[data-cta="ask-ai-open"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* C — quieter social (same 3D DNA, smaller) */
a[data-cta="social-ig"],
a[data-cta="social-tiktok"],
[data-cta="social-tg-community"],
[data-cta="social-fb"] {
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(0, 0, 0, 0.45);
}

a[data-cta="social-ig"]:hover,
a[data-cta="social-tiktok"]:hover {
  color: var(--fg);
}

/* stubs keep 3D look, no press */
[data-cta="social-tg-community"][data-status="placeholder"],
[data-cta="social-fb"][data-status="placeholder"] {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  a[data-cta="process-tg"],
  a[data-cta="video-end-tg"],
  a[data-cta="hero-tg"],
  a[data-cta="contact-wa"],
  a[data-cta="contact-viber"],
  a[data-cta="contact-tg"],
  a[data-cta="social-ig"],
  a[data-cta="social-tiktok"],
  button[data-cta="ask-ai-open"] {
    transition: none;
  }

  a[data-cta="process-tg"]:active,
  a[data-cta="video-end-tg"]:active,
  a[data-cta="hero-tg"]:active,
  a[data-cta="contact-wa"]:active,
  a[data-cta="contact-viber"]:active,
  a[data-cta="contact-tg"]:active,
  a[data-cta="social-ig"]:active,
  a[data-cta="social-tiktok"]:active,
  button[data-cta="ask-ai-open"]:active {
    transform: none;
  }
}

/* Sticky FAB: solid plate — do not inherit translucent 3d-button fill */
button[data-sticky="ask-ai"] {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 2.5px solid var(--silver);
  border-bottom-width: 2.5px;
  border-bottom-color: var(--silver);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--silver) 45%, #0b0b0c);
  opacity: 1;
}

button[data-sticky="ask-ai"]:hover {
  background: var(--cta-hover);
  color: var(--cta-fg);
}