/*
 * social-mobile.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Modular, mobile-only social media icon bar for Mr. Iron Wala
 * Displays ONLY on screens ≤ 768px (mobile view)
 * Added as a separate file — does NOT modify any existing CSS
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* Hidden on desktop by default */
#mobile-social-bar {
  display: none;
}

/* ─── Mobile only ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hide existing header/nav social icons as requested */
  .nav-social, 
  .footer-social {
    display: none !important;
  }

  /* The fixed vertical bar on the right edge */
  #mobile-social-bar {
    display: flex;
    flex-direction: column; /* Vertical alignment */
    align-items: center;
    justify-content: center;
    padding: 12px 6px;   /* ↓ reduce side space */
  gap: 6px;

    /* Fixed at the right-middle of the viewport */
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;

    /* Glass-morphism pill */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 999px;
    padding: 16px 8px;
    box-shadow:
      0 10px 40px rgba(15, 23, 42, 0.18),
      0 2px 10px rgba(15, 23, 42, 0.08);

    /* Elegant entrance animation (slide from right) */
    animation: msbSlideRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.4s;
  }

  /* Slide-in from right keyframe */
  @keyframes msbSlideRight {
    from {
      opacity: 0;
      transform: translateY(-50%) translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
  }

  /* Individual icon link */
  .msb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    font-size: 1rem;
    color: #1e2a3a;
    background: transparent;
    border: none;
    text-decoration: none;
    flex-shrink: 0;
    transition:
      color 0.25s ease,
      background 0.25s ease,
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.25s ease;
    position: relative;
  }

  /* Tap/hover ripple background */
  .msb-icon::before {
    content: '';
    position: absolute;
    inset: 4px; /* Slightly inset background */
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
  }

  .msb-icon:active::before,
  .msb-icon:focus-visible::before {
    opacity: 0.12;
    transform: scale(1.1);
  }

  /* Icon images sit above the pseudo-element */
  .msb-icon i {
    position: relative;
    z-index: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Default platform brand colours */
  .msb-icon[aria-label="Facebook"] { color: #1877F2; }
  .msb-icon[aria-label="Instagram"] { color: #E4405F; }
  .msb-icon[aria-label="WhatsApp"] { color: #25D366; }
  .msb-icon[aria-label="Call"] { color: #007AFF; }

  /* ── Hover & tap effects ────────────────────────── */
  .msb-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  /* Per-platform brand colours on hover */
  .msb-icon[aria-label="Facebook"]:hover { color: #fff; background: #1877f2; }
  .msb-icon[aria-label="Instagram"]:hover { color: #fff; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  .msb-icon[aria-label="WhatsApp"]:hover { color: #fff; background: #25d366; }
  .msb-icon[aria-label="Call"]:hover { color: #fff; background: #007aff; }

  /* ── Divider between icons (Horizontal for vertical bar) ────────────────── */
  .msb-divider {
    width: 22px;
    height: 1px;
    background: rgba(100, 116, 139, 0.15);
    flex-shrink: 0;
    display: inline-block;
  }

  /* ── Reset body padding-bottom since we're on the side now ───────────────── */
  body {
    padding-bottom: 0 !important;
  }
}