/*
 * .c-bottom-bar: the thumb bar of the ficha on a phone: two actions, always in reach.
 * Fixed to the bottom edge below 48em, hidden above it (the action row is enough there).
 * It respects the home-indicator area with env(safe-area-inset-bottom).
 *
 *   <div class="c-bottom-bar vt-bottom-bar">
 *     <a class="c-button c-button--primary" href="/go/<slug>/whatsapp">WhatsApp</a>
 *     <a class="c-button c-button--secondary" href="/go/<slug>/maps">Cómo llegar</a>
 *   </div>
 *
 * Reserve room for it on the page: <body class="has-bottom-bar"> (or the same class on the main wrapper).
 * --static: renders in the flow, for the styleguide and for tests.
 */
.c-bottom-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--md-z-sticky);
  display: flex;
  gap: var(--md-space-3);
  padding: var(--md-space-3) var(--md-gutter) calc(var(--md-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--md-color-surface);
  box-shadow: var(--md-shadow-float-up);
}

.c-bottom-bar > * {
  flex: 1;
}

.has-bottom-bar {
  padding-block-end: calc(var(--md-target) + var(--md-space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48em) {
  .c-bottom-bar:not(.c-bottom-bar--static) {
    display: none;
  }

  .has-bottom-bar {
    padding-block-end: 0;
  }
}

.c-bottom-bar--static {
  position: static;
  border-radius: var(--md-radius-lg);
}