/* ══════════════════════════════════════════════════════════════
   PHONE-ONLY, SITE-WIDE RULES
   Loaded after style.css. Everything here sits inside a phone media
   query, so desktop and tablet are untouched.
   ══════════════════════════════════════════════════════════════ */

/* WhatsApp glyph: dark on the brand green (white on it is about 2:1). */
.social-btn.whatsapp,
.social-btn.whatsapp:hover { color: #052e16; }

@media (max-width: 640px) {
  /* ── ACTION BAR ───────────────────────────────────────────
     The floating WhatsApp/Instagram column lands on card text on a
     phone, so it becomes one bar pinned to the bottom edge: the main
     action fills it, the two contact buttons sit beside it. Body
     reserves the same height so nothing is hidden underneath. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  .social-float {
    position: fixed;
    inset: auto 0 0 0;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--container-padding);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(var(--rgb-navy), 0.1);
  }

  .social-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    box-shadow: none;
  }

  .social-btn svg { width: 20px; height: 20px; }
  .social-btn:hover { transform: none; }

  .action-bar-cta {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-5);
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: var(--color-on-dark);
    font-weight: var(--fw-bold);
    font-size: 0.9375rem;
    text-decoration: none;
  }

  .action-bar-cta:hover,
  .action-bar-cta:focus-visible { color: var(--color-on-dark); }
}