/* Bajaj Maroc — floating "Réserver un essai" button (leads to the test-ride form).
   Motorsport style: glossy near-black pill with a luminous electric-blue edge and glow,
   blue speed lines on the left, centred label, round glowing blue arrow on the right.
   Lifts slightly on hover. The theme resets padding with !important, so spacing here
   needs !important too. */

.bj-ride {
  position: fixed !important;
  right: max(28px, calc(env(safe-area-inset-right) + 16px)) !important;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  z-index: 990 !important;
  display: flex !important;
  align-items: center !important;
  width: 264px !important;
  height: 58px !important;
  padding: 0 1px 0 18px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #101010 0%, #030303 100%) !important;
  border: 1.5px solid #0a84ff !important;
  box-shadow:
    0 0 0 1px rgba(0, 132, 255, .30),
    0 0 10px rgba(0, 132, 255, .60),
    0 0 26px rgba(0, 132, 255, .45),
    0 0 50px rgba(0, 132, 255, .28),
    0 14px 30px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(120, 190, 255, .35),
    inset 0 -1px 0 rgba(0, 132, 255, .35),
    inset 0 0 12px rgba(0, 132, 255, .12) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Inter', 'Lato', sans-serif !important;
  /* hidden until the visitor scrolls past the hero (ride-cta.js adds .bj-ride-in) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, visibility .25s, transform .25s ease, box-shadow .25s ease;
}
.bj-ride.bj-ride-in { opacity: 1; visibility: visible; transform: none; }
.bj-ride.bj-ride-in:hover,
.bj-ride.bj-ride-in:focus-visible {
  transform: translateY(-4px);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow:
    0 0 0 1px rgba(0, 132, 255, .40),
    0 0 14px rgba(0, 132, 255, .75),
    0 0 34px rgba(0, 132, 255, .55),
    0 0 64px rgba(0, 132, 255, .32),
    0 18px 36px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(120, 190, 255, .45),
    inset 0 -1px 0 rgba(0, 132, 255, .45),
    inset 0 0 14px rgba(0, 132, 255, .18) !important;
}
.bj-ride:focus { outline: none !important; }
.bj-ride:focus-visible { outline: 2px solid #8cc8ff !important; outline-offset: 4px !important; }

/* bright light streaks along the top and bottom edges */
.bj-ride::before,
.bj-ride::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 28%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(90, 180, 255, 0), rgba(150, 215, 255, .95), rgba(90, 180, 255, 0));
  box-shadow: 0 0 8px rgba(0, 132, 255, .8);
  pointer-events: none;
}
.bj-ride::before { top: -1.5px; }
.bj-ride::after { bottom: -1.5px; }

/* three angular speed lines */
.bj-ride-lines { display: flex !important; flex: 0 0 auto !important; }
.bj-ride-lines svg {
  width: 30px !important;
  height: 19px !important;
  fill: #1e90ff !important;
  display: block !important;
  filter: drop-shadow(0 0 4px rgba(30, 144, 255, .6)) !important;
}

/* label centred in the space between the lines and the arrow */
.bj-ride-label {
  flex: 1 1 auto !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 10px !important;
}

.bj-ride-go {
  flex: 0 0 auto !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #168dff 0%, #0062df 100%) !important;
  border: 1.5px solid rgba(140, 205, 255, .95) !important;
  box-shadow:
    0 0 10px rgba(22, 141, 255, .9),
    0 0 22px rgba(22, 141, 255, .6),
    inset 0 2px 0 rgba(255, 255, 255, .30),
    inset 0 -6px 12px rgba(0, 40, 140, .35) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bj-ride-go svg { width: 28px !important; height: 28px !important; transition: transform .25s ease !important; }
.bj-ride:hover .bj-ride-go svg,
.bj-ride:focus-visible .bj-ride-go svg { transform: translateX(3px) !important; }

/* phones */
@media (max-width: 560px) {
  .bj-ride {
    width: 248px !important;
    height: 54px !important;
    padding-left: 16px !important;
    right: max(14px, calc(env(safe-area-inset-right) + 8px)) !important;
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)) !important;
  }
  .bj-ride-go { width: 50px !important; height: 50px !important; }
  .bj-ride-go svg { width: 26px !important; height: 26px !important; }
  .bj-ride-label { font-size: 12.5px !important; letter-spacing: .6px !important; padding: 0 6px !important; }
  .bj-ride-lines svg { width: 26px !important; height: 17px !important; }
  /* phones keep the glow they had before the desktop size was reduced */
  .bj-ride {
    box-shadow:
      0 0 0 1px rgba(0, 132, 255, .30),
      0 0 14px rgba(0, 132, 255, .60),
      0 0 36px rgba(0, 132, 255, .45),
      0 0 70px rgba(0, 132, 255, .30),
      0 14px 30px rgba(0, 0, 0, .55),
      inset 0 1px 0 rgba(120, 190, 255, .35),
      inset 0 -1px 0 rgba(0, 132, 255, .35),
      inset 0 0 12px rgba(0, 132, 255, .12) !important;
  }
  .bj-ride-go {
    box-shadow:
      0 0 14px rgba(22, 141, 255, .9),
      0 0 30px rgba(22, 141, 255, .6),
      inset 0 2px 0 rgba(255, 255, 255, .30),
      inset 0 -6px 12px rgba(0, 40, 140, .35) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bj-ride, .bj-ride-go svg { transition: none !important; }
  .bj-ride.bj-ride-in:hover, .bj-ride.bj-ride-in:focus-visible { transform: none; }
}