/* =========================================================
   MOBILE ACTION BAR
   TAXI TILBURG
   ========================================================= */

.mobile-action-bar {
  display: none;
}

/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 768px) {

  body {
    padding-bottom: 96px;
  }

  .mobile-action-bar {
    position: fixed;

    left: 10px;
    right: 10px;

    bottom: calc(
      10px + env(safe-area-inset-bottom)
    );

    /*
     * Bewust lager dan cookie-banner.
     */
    z-index: 900;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    align-items: stretch;

    min-height: 72px;

    border:
      1px solid
      rgba(255, 255, 255, 0.10);

    border-radius: 22px;

    background:
      linear-gradient(
        180deg,
        rgba(7, 24, 29, 0.97) 0%,
        rgba(3, 14, 18, 0.99) 100%
      );

    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.32),
      0 4px 12px rgba(0, 0, 0, 0.20);

    overflow: hidden;

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }


  /* =======================================================
     ALGEMENE KNOP
     ======================================================= */

  .mobile-action-bar__item {
    position: relative;

    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 0;
    min-height: 72px;

    padding: 12px 7px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      background-color 0.18s ease,
      transform 0.18s ease;
  }


  /* Scheidingslijn */

  .mobile-action-bar__item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20px;
    right: 0;
    bottom: 20px;

    width: 1px;

    background:
      rgba(255, 255, 255, 0.14);
  }


  /* Klik */

  .mobile-action-bar__item:active {
    transform: scale(0.97);

    background:
      rgba(255, 255, 255, 0.06);
  }


  /* Toetsenbord toegankelijkheid */

  .mobile-action-bar__item:focus-visible {
    outline:
      2px solid #1055C8;

    outline-offset: -3px;
  }


  /* =======================================================
     ICONEN
     ======================================================= */

  .mobile-action-bar__icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 25px;
    height: 25px;

    color: #ffffff;
  }

  .mobile-action-bar__icon svg {
    display: block;

    width: 24px;
    height: 24px;
  }


  /* Bellen: telefoonicoon in merkblauw, tekst blijft wit (ook bij hover, focus en aanraken) */

  .mobile-action-bar__item--call
  .mobile-action-bar__icon,
  .mobile-action-bar__item--call:hover
  .mobile-action-bar__icon,
  .mobile-action-bar__item--call:focus-visible
  .mobile-action-bar__icon,
  .mobile-action-bar__item--call:active
  .mobile-action-bar__icon {
    color: #0BBFFF;
  }

  .mobile-action-bar__item--call
  .mobile-action-bar__label,
  .mobile-action-bar__item--call:hover
  .mobile-action-bar__label,
  .mobile-action-bar__item--call:focus-visible
  .mobile-action-bar__label,
  .mobile-action-bar__item--call:active
  .mobile-action-bar__label {
    color: #ffffff;
  }


  /* WhatsApp */

  .mobile-action-bar__item--whatsapp
  .mobile-action-bar__icon {
    color: #25D366;
  }

  .mobile-action-bar__item--whatsapp
  .mobile-action-bar__icon svg {
    width: 26px;
    height: 26px;
  }


  /* Reserveren */

  .mobile-action-bar__item--booking
  .mobile-action-bar__icon {
    color: #4D8DFF;
  }


  /* =======================================================
     TEKST
     ======================================================= */

  .mobile-action-bar__label {
    display: block;

    min-width: 0;

    color: #ffffff;

    white-space: nowrap;
  }


  /* =======================================================
     COOKIE OPEN → MOBIELE BALK VERBERGEN
     Deze class kunnen we vanuit cookie-consent.js gebruiken.
     ======================================================= */

  .mobile-action-bar.is-cookie-hidden {
    display: none !important;
  }
}


/* =========================================================
   KLEINE TELEFOONS
   ========================================================= */

@media (max-width: 380px) {

  body {
    padding-bottom: 88px;
  }

  .mobile-action-bar {
    left: 6px;
    right: 6px;

    bottom: calc(
      6px + env(safe-area-inset-bottom)
    );

    min-height: 66px;

    border-radius: 19px;
  }

  .mobile-action-bar__item {
    min-height: 66px;

    gap: 5px;

    padding:
      9px 4px;

    font-size: 11.5px;
  }

  .mobile-action-bar__icon {
    width: 22px;
    height: 22px;
  }

  .mobile-action-bar__icon svg {
    width: 21px;
    height: 21px;
  }

  .mobile-action-bar__item--whatsapp
  .mobile-action-bar__icon svg {
    width: 23px;
    height: 23px;
  }
}


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 769px) {

  .mobile-action-bar {
    display: none !important;
  }
}
/* Cookiemelding krijgt bij eerste bezoek de volledige aandacht. */
@media (max-width: 768px) {
 html:not(.cookie-consent-saved) body:has(#cookie-banner:not([hidden])) .mobile-action-bar { display: none !important; }
 html:not(.cookie-consent-saved) body:has(#cookie-banner:not([hidden])) { padding-bottom: 0; }
}