/* ═══════════════════════════════════════════════════
   STICKY MOBILE BOTTOM BAR
   Widoczny TYLKO na mobile (≤768px)
   Dwa przyciski: Zamów bukiet (75%) | Instagram (25%)
   ═══════════════════════════════════════════════════ */

.mobile-cta-bar {
  display: none; /* domyślnie ukryty — pokaż przez media query */
}

@media (max-width: 768px) {

  /* ── Pasek ── */
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 2000;
    height: 64px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    /* bezpieczna strefa iOS (notch) */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Dodaj padding u dołu strony, żeby bar nie przykrył treści */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
  }

  /* ═══════════════════════════════════
     PRZYCISK: ZAMÓW BUKIET (75%)
     ═══════════════════════════════════ */
  .mobile-cta-bar__order {
    flex: 3;           /* 75% */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--burgundy);
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    /* Ciągła pulsacja cienia — zachęca do kliknięcia */
    animation: orderGlow 2.4s ease-in-out infinite;
  }

  @keyframes orderGlow {
    0%,100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.0),
                          0 -2px 16px rgba(114,47,55,.4); }
    50%     { box-shadow: inset 0 0 30px 0 rgba(255,255,255,.08),
                          0 -4px 28px rgba(114,47,55,.7); }
  }

  /* Shimmer — efekt przesuwającego się blasku */
  .mobile-cta-bar__order::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(
      105deg,
      transparent 20%,
      rgba(255,255,255,.28) 50%,
      transparent 80%
    );
    transform: translateX(-120px) skewX(-15deg);
    animation: orderShimmer 2.4s ease-in-out infinite;
  }
  @keyframes orderShimmer {
    0%,40%  { transform: translateX(-120px) skewX(-15deg); }
    80%,100%{ transform: translateX(320px)  skewX(-15deg); }
  }

  /* Ikonka kwiatka — pulsuje niezależnie */
  .mobile-cta-bar__flower {
    font-size: 1.15rem;
    display: inline-block;
    animation: flowerSpin 3s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes flowerSpin {
    0%,100% { transform: scale(1)    rotate(0deg);  }
    25%     { transform: scale(1.3)  rotate(-15deg); }
    75%     { transform: scale(1.15) rotate(12deg);  }
  }

  /* Tekst — mały podpis */
  .mobile-cta-bar__order-sub {
    display: block;
    font-size: .58rem;
    font-weight: 400;
    letter-spacing: .08em;
    opacity: .75;
    margin-top: 1px;
  }

  .mobile-cta-bar__order-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
  }

  /* ═══════════════════════════════════
     PRZYCISK: INSTAGRAM (25%)
     ═══════════════════════════════════ */
  .mobile-cta-bar__instagram {
    flex: 1;           /* 25% */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--white);
    font-family: var(--font-sans);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    /* Tło: animowany gradient w stylu Instagrama */
    background: linear-gradient(
      135deg,
      #833ab4 0%, #fd1d1d 40%, #fcb045 80%, #833ab4 100%
    );
    background-size: 250% 250%;
    animation: igGradient 3s ease infinite;
  }

  @keyframes igGradient {
    0%   { background-position: 0%   0%;   }
    33%  { background-position: 100% 100%; }
    66%  { background-position: 50%  0%;   }
    100% { background-position: 0%   0%;   }
  }

  /* Ikona Instagram bounce */
  .mobile-cta-bar__instagram svg {
    animation: igBounce 2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes igBounce {
    0%,100% { transform: scale(1)    translateY(0);  }
    30%     { transform: scale(1.25) translateY(-3px); }
    60%     { transform: scale(.95)  translateY(1px);  }
  }

  /* Notification dot — sugeruje "jest coś nowego" */
  .mobile-cta-bar__instagram::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.5);
    animation: dotPulse 2s ease-in-out infinite;
  }
  @keyframes dotPulse {
    0%,100% { opacity: 1;  transform: scale(1);   }
    50%     { opacity: .4; transform: scale(1.4); }
  }

} /* end @media */