/* Stały pasek kontaktu na telefonie: „Zadzwoń” + „Umów wycenę”.
   Widoczny od razu po załadowaniu; kiedy się chowa, decyduje assets/mobile-bar.js. */
.mobile-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(250, 247, 242, 0.97);
    border-top: 1px solid rgba(54, 75, 62, 0.12);
    box-shadow: 0 -4px 20px rgba(26, 26, 24, 0.06);
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }

  /* Schowany pasek znika też dla klawiatury i czytników ekranu (visibility) */
  .mobile-bar.is-hidden {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 12px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bar a:focus-visible {
    outline: 3px solid #364b3e;
    outline-offset: 2px;
  }

  .mobile-bar svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bar__call {
    background: #364b3e;
    color: #fff;
    border: 1px solid #364b3e;
  }

  .mobile-bar__call:active {
    background: #2a3c31;
  }

  .mobile-bar__quote {
    background: #fff;
    color: #364b3e;
    border: 1px solid #364b3e;
  }

  .mobile-bar__quote:active {
    background: #f5f0e8;
  }

  /* Miejsce na pasek, żeby nie zasłaniał końca strony */
  body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  /* Baner cookies stoi nad paskiem (pasek: 10 + 48 + 10 px paddingu + 1 px ramki = 69 px).
     Tylko gdy baner jest otwarty (.visible): schowany baner zostaje poza ekranem. */

  /* strona główna (baner na pełną szerokość, rodzeństwo <nav>): tuż nad paskiem,
     bez podwójnego marginesu na dolny pasek iPhone’a */
  .has-mobile-bar nav ~ .cb-banner.visible {
    bottom: calc(69px + env(safe-area-inset-bottom));
    padding-bottom: 14px;
    max-height: calc(100vh - 69px - 24px);
  }

  /* podstrony (pływająca karta, rodzeństwo .page-shell): 8 px nad paskiem */
  .has-mobile-bar .page-shell ~ .cb-banner.visible {
    bottom: calc(77px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 77px - 24px);
  }
}

/* Pierwszy stan po załadowaniu strony: bez animacji */
.mobile-bar.is-instant,
.mobile-bar.is-instant.is-hidden {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bar,
  .mobile-bar.is-hidden {
    transition: none;
  }
}

@media print {
  .mobile-bar {
    display: none !important;
  }
}