/* =====================================================================
   Phone carousel controls  (.bjm-nav)
   ---------------------------------------------------------------------
   Arrows and dots for the card rows that scroll sideways on a phone.

   This is the control strip only. The scrolling itself stays CSS -
   overflow-x plus scroll-snap on the row, declared by whichever page
   owns the row - so a swipe and a tap on an arrow do the same thing and
   there is no second idea of "which card are we on" to keep in step.

   The markup is built by js/bj-mobrail.js and inserted directly after
   the row, so a page only has to name its rows.

   Lifted from the set holiday-packages.html already uses, so the two
   pages carry the same control. That page still has its own inline copy;
   when it is next touched it should switch to this file.
   ===================================================================== */

@media (max-width: 575px) {

  .bjm-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
  }

  .bjm-nav__btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e0ddd5;
    border-radius: 50%;
    background: #fff;
    color: #17233e;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }

  /* Dots and swipe only (2026-09-23, the designer's call): the arrows are
     still built by js/bj-mobrail.js, so they are hidden here rather than
     removed there. The dots centre on their own; a hidden flex item takes
     no gap. The flights page had already made this call for itself. */
  .bjm-nav__btn { display: none !important; }

  .bjm-nav__btn svg {
    width: 13px;
    height: 13px;
    display: block;
  }

  .bjm-nav__btn:active {
    background: #fdf4ec;
    border-color: #f5761a;
  }

  /* Disabled rather than hidden: a control that disappears at the end of
     the row makes the other one jump sideways. */
  .bjm-nav__btn[disabled] {
    opacity: 0.32;
    cursor: default;
  }

  .bjm-nav__dots {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .bjm-dot {
    position: relative;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cfd4de;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }

  /* A 6px dot is the right size to look at and far too small to hit. The
     mark stays 6px; the thing your thumb lands on is 40px tall and
     reaches halfway to its neighbours. */
  .bjm-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 40px;
    transform: translate(-50%, -50%);
  }

  .bjm-dot[aria-selected="true"] {
    width: 18px;
    background: #f5761a;
  }

  /* On a dark band the paper-coloured controls would glare. */
  .bjm-nav--dark .bjm-nav__btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
  }

  .bjm-nav--dark .bjm-dot { background: rgba(255, 255, 255, 0.35); }
  .bjm-nav--dark .bjm-dot[aria-selected="true"] { background: #f5761a; }
}

/* Above phones the controls are never built, but if a resize leaves one
   in the DOM it must not show. */
@media (min-width: 576px) {
  .bjm-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bjm-nav__btn,
  .bjm-dot { transition: none; }
}