/* =====================================================================
   Beyond Journey - buttons on a phone, a size down (2026-09-30)
   ---------------------------------------------------------------------
   The owner: every button on a phone is too big - make them smaller,
   everywhere, and bring the type down with them.

   An audit of 22 pages at 390px found about 120 button styles running
   from 11px to 16px type and 28px to 50px tall, each set by its own
   component. This file puts them on one scale instead, phones only:

       calls to action standing alone     12px    ~32px tall
       buttons inside a card              11.5px   ~29px
       tabs, chips, filters               11.5px   ~29px
       a form's submit (search, callback) 13px     ~36px
       floating circles (call, WhatsApp,  38-40px  (were 42-50px)
         chat, back to top)

   Every button keeps the owner's 2026-09-26 rule - as wide as its own
   label - because nothing here touches width or flex.

   Loaded from Shared/header.cshtml, so every page has it. Pages put their
   own <style> blocks after the header, and some of the rules this
   corrects are !important, so - as css/bj-space.css does - every value
   here is !important, and every selector starts `html body` so it also
   outranks a page's own !important rule for the same class.

   Round carousel arrows come down to 32-34px with the rest. NOT HERE,
   deliberately: the other icon-only controls (photo-gallery arrows,
   hearts, close buttons, the header's own icons), which are already at
   the smallest comfortable tap size; rows and tiles that are
   links but not buttons (FAQ questions, category tiles, the contact
   page's four "ways", the legal pages' glance cards); and form fields.

   TO TUNE: change the numbers here, in one place.
   ===================================================================== */

@media (max-width: 575px) {

  /* ---- calls to action standing on their own ---------------------- */
  html body .nir-btn,
  html body .bj-cta-band__btn,
  html body .gj-band__btn,
  html body .bja-btn,
  html body .spj-hbtn,
  html body .spj-btn,
  html body .bjlg-btn,
  html body .bjct-btn,
  html body .bjta-offer__btn,
  html body .bjta-faqgrid__cta,
  html body .bjta-bandhead__cta,
  html body .bjta-morebtn,
  html body .bjhd-morebtn,
  html body .bj-styles__toggle,
  html body .bjd-btn,
  html body .bjd-railcard .bjd-btn,
  html body .bjd-reach .bjd-btn,
  html body .bjd-hero__view,
  html body .bjho-btn,
  html body .bjl-btn:not(.bjl-panel__go),
  html body .bjx-act,
  html body .bjfo-btn,
  html body .bjb-btn {
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 8px 16px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- buttons inside a card -------------------------------------- */
  html body .bjl-row__actions .bjl-btn,
  html body .bjl-btn.bjl-card__cta,
  html body .hp-pack-card__cta:not(:has(svg)),
  html body .spj-jc__btn,
  html body .bjf-btn-sm,
  html body .bjf-offer__cta,
  html body .bjho-cta {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    padding: 7px 12px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- tabs, chips and filters ------------------------------------ */
  html body .bj-dtab,
  html body .bjhd-tab,
  html body .bjta-tab,
  html body .bjta-chip,
  html body .spj-reg,
  html body .trending-topic-main .nav-link,
  html body .bjf-route-filter > button,
  html body .hotel-quick > button,
  html body .quick-routes__rail > a,
  html body .bjl-sortdd__btn,
  html body .bjl-filterbtn,
  html body .bjct-link,
  html body .bjlg-related a,
  html body .bja-reach__list a,
  html body .bjho-code,
  html body .bjfo-pass__copy,
  html body .bjb-sort,
  html body .bjb-filterbtn,
  html body .bjb-foot-btn,
  html body .bjb-xtab,
  html body .bjb-upiapp {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    padding: 6px 12px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- a form's submit: a search, or the callback form's ----------- */
  html body .search-btn,
  html body .bjb-srch__go,
  html body .bje__go {
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding: 10px 22px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- pills with a round icon at one end --------------------------
     Their padding is lopsided on purpose - the circle sits in the pill's
     own end - so the scale above would push it off centre. The words and
     the circle come down together instead. The Golden Journeys hero has
     its own phone pair (.gjp, css/bj-golden.css), restated last. */
  html body .gj-cta { font-size: 12px !important; gap: 8px !important; padding: 4px 4px 4px 14px !important; }
  html body .gj-cta__ico { width: 24px !important; height: 24px !important; font-size: 10.5px !important; }
  html body .gj-faq__call { gap: 8px !important; padding: 5px 14px 5px 5px !important; }
  html body .gj-faq__call-ico { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  html body .gj-faq__call-txt small { font-size: 10px !important; }
  html body .gj-faq__call-txt b { font-size: 12.5px !important; }
  html body .gj-hero__call { gap: 7px !important; padding: 3px 12px 3px 3px !important; }
  html body .gj-hero__call-ico { width: 26px !important; height: 26px !important; font-size: 11px !important; }
  html body .gj-hero__call-txt small { font-size: 10px !important; }
  html body .gj-hero__call-txt b { font-size: 12px !important; }
  html body .gjp .gj-hero__actions .gj-cta { gap: 0 !important; padding: 8px 12px !important; }
  html body .bjlg .bjtc-more { font-size: 12px !important; gap: 8px !important; padding: 5px 12px 5px 5px !important; }
  html body .bjtc-more .bjtc-ico { width: 24px !important; height: 24px !important; font-size: 10px !important; }

  /* ---- round carousel arrows -------------------------------------- */
  html body .bj-reviews__btn,
  html body .gj-promise__arrow { width: 32px !important; height: 32px !important; }
  html body .spj-arr { width: 34px !important; height: 34px !important; }
  html body .spj-tms .spj-arr { width: 30px !important; height: 30px !important; }

  /* ---- the floating column: call, WhatsApp, chat, back to top ------
     All four come down together so they still stand in one column; the
     column keeps its place (css/bj-expert.css), only the circles shrink. */
  html body .bjx-dock__btn { width: 38px !important; height: 38px !important; font-size: 13px !important; }
  html body .bjx-pill { width: 40px !important; height: 40px !important; }
  html body .bjx-pill__ico { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  html body #back-to-top a { width: 40px !important; height: 40px !important; }
  html body #back-to-top a::after { font-size: 15px !important; }
}