/* Sticky bottom icon bar: replaces the hamburger menu on true mobile
   (<=809px) only. Tablet (810-1023px) keeps the hamburger + slide-down
   menu, since there's enough width there for the full top-bar treatment.
   Styled after the iOS Instagram tab bar: icon-only, thin strokes, in a
   floating, rounded, frosted container. */
.automind-bottom-nav {
  display: none;
}

@media (max-width: 809.98px) {
  /* Floating pill: detached from the screen edges, rounded, frosted and
     lifted off the page with a soft shadow. */
  .automind-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 800;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.68);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.45),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  }

  .automind-bottom-nav a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    color: rgb(245, 245, 245);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Icon-only like Instagram; labels stay in the DOM for screen readers. */
  .automind-bottom-nav a span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .automind-bottom-nav a svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    stroke-width: 1.6;
    /* Taps must land on the <a> itself, not the icon: Cal.com's embed
       click handler bails out when the event target isn't an HTMLElement
       (an <svg>/<path> is an SVGElement), so tapping the "Empezar" icon
       never opened the booking modal. */
    pointer-events: none;
    transition: transform 0.18s cubic-bezier(0.3, 0.7, 0.4, 1.5),
      opacity 0.18s ease;
  }

  .automind-bottom-nav a:active svg {
    transform: scale(0.86);
    opacity: 0.7;
  }

  /* "Empezar" is the primary action: a solid brand-gradient circle with a
     white rounded play glyph, so it reads as the one to tap. The glyph's
     path is drawn with its centroid at the viewBox center (x=12), so plain
     uniform padding centers it optically -- no per-side nudging needed. */
  .automind-bottom-nav-cta {
    color: #ffffff !important;
  }

  /* a.automind-bottom-nav-cta, not just the class: it has to out-rank the
     generic ".automind-bottom-nav a svg" 26px sizing above, or the 11px
     padding eats almost the whole box and the glyph shrinks to a dot. */
  .automind-bottom-nav a.automind-bottom-nav-cta svg {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg, #24d3ef, #008fb1);
    box-shadow: 0 4px 14px -2px rgba(36, 211, 239, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  /* The bar sits on top of the page, so the last bit of content (footer,
     Cal.com widget) needs room reserved underneath it or the bar covers it
     permanently rather than just overlaying scroll. */
  body {
    padding-bottom: calc(56px + 24px + env(safe-area-inset-bottom, 0px));
  }
}