/*
 * DREAMMAKER FOUR-BUTTON NAVIGATION V1.4
 *
 * Frontend navigation only.
 */

#dm-beta-quick-navigation {
  z-index: 2147483000 !important;
}

/*
 * Keep all four controls together.
 */
#dm-beta-back-markets {
  background:
    linear-gradient(
      135deg,
      rgba(20, 56, 112, 0.99),
      rgba(29, 132, 171, 0.99)
    );
}

/*
 * The original Back to Markets control remains in the DOM so its
 * existing click behavior can be reused. On mobile, hide its visual
 * copy after the floating replacement is installed.
 */
@media (max-width: 720px) {
  #dm-beta-quick-navigation {
    position: fixed !important;
    top: auto !important;
    right:
      max(
        10px,
        env(safe-area-inset-right)
      ) !important;
    bottom:
      calc(
        18px +
        env(safe-area-inset-bottom)
      ) !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  #dm-beta-quick-navigation .dm-beta-nav-button {
    width: min(310px, calc(100vw - 32px)) !important;
    max-width: 310px !important;
    min-height: 54px !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  /*
   * Hide only the original Back to Markets control—not the new one.
   */
  .dm-original-back-to-markets-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (min-width: 721px) {
  #dm-beta-back-markets {
    display: inline-flex;
  }
}