/* ===========================================================================
   OE Jaya Motor — page components
   ---------------------------------------------------------------------------
   style.css holds the tokens, the Bootstrap overrides and the shared shell.
   This file holds the pieces specific to individual pages: the budget hero,
   category tiles, spec sheet, comparison table, payment accounts and so on.
   Load order matters — this file comes second.
   =========================================================================== */

/* ===========================================================================
   Homepage — budget finder hero
   =========================================================================== */
/* Red diagonal wash, clipped to the top-right as in the design. */

/* ===========================================================================
   Motorsport track backdrop
   ---------------------------------------------------------------------------
   A ground plane laid back in 3D perspective, with rungs travelling toward the
   viewer to read as speed. Everything is drawn in transform and opacity only,
   at very low contrast — the hero carries dark body copy over it and must stay
   comfortably above 4.5:1.

   Two custom properties do the work and are set from JS:
     --track-speed  seconds per rung cycle, driven by the budget slider
     --tilt-x / --tilt-y  pointer parallax, in degrees / pixels
   =========================================================================== */

/* Soft light where the plane meets the horizon, so the grid fades out rather
   than ending on a hard line. */

.oej-empty--tight { padding: 30px 22px; }

/* Buttons carry long uppercase Malay labels and never wrap, so on a narrow
   phone two of them side by side push the page wider than the viewport.
   Stack them instead — horizontal scroll on a form page is unforgivable. */

/* ===========================================================================
   Category tiles
   =========================================================================== */

.oej-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.oej-tile {
  display: flex;
  flex-direction: column;
  background: var(--oej-paper);
  border: 1px solid var(--oej-border);
  padding: 26px 24px;
  text-decoration: none;
  min-height: 220px;
  transition: border-color .15s;
}
.oej-tile:hover { border-color: rgba(225, 27, 34, .55); }
.oej-tile__count {
  align-self: flex-start;
  font: 500 10px/1 var(--oej-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
  border: 1px solid var(--oej-border);
  padding: 6px 10px;
}
.oej-tile__name {
  font: 800 34px/1 var(--oej-display);
  text-transform: uppercase;
  color: var(--oej-ink);
  margin: 20px 0 10px;
}
.oej-tile__desc { font: 400 15px/1.5 var(--oej-body); color: var(--oej-ink-60); flex: 1; }
.oej-tile__from {
  font: 500 14px/1 var(--oej-body);
  color: var(--oej-ink-40);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--oej-border);
}
.oej-tile__from strong {
  font: 700 22px/1 var(--oej-display);
  color: var(--oej-red);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1199.98px) { .oej-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .oej-tiles { grid-template-columns: 1fr; } }

/* ===========================================================================
   Page heads, CTA bands, trust rows
   =========================================================================== */

.oej-pagehead { padding-bottom: 26px; }
.oej-pagehead__meta {
  font: 500 12px/1.5 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
  margin: 14px 0 0;
}
.oej-pagehead__lead { max-width: 660px; margin: 16px 0 0; }

.oej-section__foot { margin-top: 30px; }

.oej-ctaband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.oej-ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.oej-text--light { color: rgba(255, 255, 255, .7); margin: 10px 0 0; }

.oej-branch { margin-top: 24px; }
.oej-branch__address { font: 500 17px/1.5 var(--oej-body); color: var(--oej-ink); margin: 0 0 12px; }
.oej-branch__hours { font: 400 15px/1.5 var(--oej-body); color: var(--oej-ink-60); margin: 0 0 6px; }
.oej-branch__actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.oej-mt-32 { margin-top: 32px; }
.oej-mt-12 { margin-top: 12px; }

/* ===========================================================================
   Filter bar extras
   =========================================================================== */

.oej-filterbar__form { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.oej-filterbar__price { min-width: 250px; }
.oej-select--compact { height: 44px; font-size: 14px; }

.oej-toggle { display: inline-flex; border: 1px solid var(--oej-border-strong); }
.oej-toggle__btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  font: 600 12px/1 var(--oej-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oej-ink-60);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
}
.oej-toggle__btn.is-active { background: var(--oej-ink); color: #fff; }

/* ===========================================================================
   Bike detail
   =========================================================================== */

.oej-detail__title { margin: 14px 0 10px; }
.oej-detail__meta {
  font: 500 14px/1.5 var(--oej-body);
  color: var(--oej-ink-40);
  margin: 0 0 28px;
}
.oej-gallery__main {
  position: relative;
  height: 520px;
  background: var(--oej-hatch);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.oej-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.oej-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.oej-gallery__thumb {
  width: 110px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--oej-border);
  background: var(--oej-hatch);
  opacity: .62;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
  overflow: hidden;
}
.oej-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.oej-gallery__thumb:hover { opacity: 1; }
.oej-gallery__thumb.is-active { opacity: 1; border-color: var(--oej-red); border-width: 2px; }

.oej-detail__keyspecs { margin: 30px 0; }
.oej-detail__desc { margin: 0 0 24px; }
.oej-detail__specs { margin-top: 48px; }
.oej-detail__specs > .oej-h3 { margin-bottom: 28px; }

.oej-quote__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.oej-quote__note { margin: 14px 0 0; }

.oej-docs { margin-top: 20px; }
.oej-docs__list { list-style: none; padding: 0; margin: 14px 0 0; }
.oej-docs__list li {
  position: relative;
  padding: 9px 0 9px 26px;
  font: 400 15px/1.4 var(--oej-body);
  color: var(--oej-ink-60);
  border-bottom: 1px solid var(--oej-border);
}
.oej-docs__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 8px;
  background: var(--oej-red);
}
.oej-docs__list li:last-child { border-bottom: 0; }
.oej-docs__list--num { counter-reset: step; }
.oej-docs__list--num li::before {
  content: counter(step);
  counter-increment: step;
  background: none;
  color: var(--oej-red);
  font: 600 13px/1 var(--oej-mono);
  top: 11px;
  width: auto;
  height: auto;
}
.oej-docs .oej-btn { margin-top: 16px; }

@media (max-width: 991.98px) {
  .oej-gallery__main { height: 280px; }
  .oej-gallery__thumb { width: 76px; height: 58px; }
}

/* ===========================================================================
   Used bikes
   =========================================================================== */

.oej-card--used { cursor: default; }
.oej-card--used.is-sold { opacity: .6; }
.oej-sold {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 16, 18, .6);
  color: #fff;
  font: 800 30px/1 var(--oej-display);
  text-transform: uppercase;
  letter-spacing: .1em;
  z-index: 3;
}
.oej-usedspecs { display: flex; gap: 22px; margin-top: 12px; }
.oej-usedspecs span {
  font: 600 15px/1.2 var(--oej-body);
  color: var(--oej-ink);
  font-variant-numeric: tabular-nums;
}
.oej-usedspecs small {
  display: block;
  font: 500 10px/1 var(--oej-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oej-ink-40);
  margin-bottom: 5px;
}
.oej-card__cta { margin: 0 18px 16px; }

/* ===========================================================================
   Compare
   =========================================================================== */

/* ===========================================================================
   Calculator & apply
   =========================================================================== */

.oej-calc .oej-field:last-child { margin-bottom: 0; }
.oej-benefits { margin-bottom: 10px; }

.oej-applyform { margin-top: 8px; }
.oej-formstep { border: 0; padding: 0; margin: 0; }
.oej-formstep > legend { float: none; width: auto; padding: 0; margin-bottom: 24px; }
.oej-formstep__sub {
  margin: 36px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--oej-border-rule);
}
.oej-formstep__nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--oej-border-rule);
  flex-wrap: wrap;
}
.oej-filebtn.is-attached { background: var(--oej-success); }

.oej-progress__title { color: #fff; margin: 10px 0 22px; }
.oej-progress__note {
  font: 400 14px/1.5 var(--oej-body);
  color: rgba(255, 255, 255, .5);
  margin: 20px 0 0;
}

.oej-steps { list-style: none; padding: 0; margin: 24px 0 30px; }
.oej-steps li { display: flex; gap: 20px; padding: 20px 0; border-top: 2px solid var(--oej-border); }
.oej-steps li:first-child { border-top-color: var(--oej-red); }
.oej-steps__num { font: 600 15px/1 var(--oej-mono); color: var(--oej-red); flex: none; padding-top: 3px; }
.oej-steps h3 { margin-bottom: 8px; }

.oej-result { padding: 44px 0 34px; }
.oej-result__title { margin: 14px 0 16px; }
.oej-result__message {
  font: 400 19px/1.6 var(--oej-body);
  color: var(--oej-ink-60);
  max-width: 680px;
  margin: 0;
}
.oej-result--error .oej-result__title { color: var(--oej-red); }
.oej-result__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ===========================================================================
   Payment
   =========================================================================== */

.oej-accounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.oej-account { border: 1px solid var(--oej-border); padding: 26px; background: var(--oej-paper); }
.oej-account__head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.oej-account__logo {
  width: 92px;
  height: 60px;
  flex: none;
  background: var(--oej-paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.oej-account__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.oej-account__logo--text {
  font: 700 13px/1.2 var(--oej-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oej-ink-60);
  text-align: center;
}
.oej-account__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--oej-border);
  flex-wrap: wrap;
}
.oej-account__number {
  display: block;
  font: 600 22px/1.2 var(--oej-mono);
  color: var(--oej-ink);
  margin-top: 6px;
  word-break: break-all;
}
.oej-account__note { margin: 14px 0 0; }

@media (max-width: 991.98px) { .oej-accounts { grid-template-columns: 1fr; } }

/* ===========================================================================
   Service & contact
   =========================================================================== */

.oej-servicecell { display: flex; flex-direction: column; }
.oej-servicecell h2 { margin-bottom: 10px; }
.oej-servicecell p { flex: 1; margin: 0 0 16px; }
.oej-servicecell__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--oej-border);
  flex-wrap: wrap;
}
.oej-servicecell__price {
  font: 700 20px/1 var(--oej-display);
  color: var(--oej-red);
  font-variant-numeric: tabular-nums;
}

.oej-map { height: 380px; background: var(--oej-hatch); position: relative; overflow: hidden; }
.oej-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.oej-contactgrid { margin-top: 20px; }
.oej-contactgrid p { margin: 10px 0 0; }
.oej-contact__actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 767.98px) { .oej-map { height: 240px; } }

/* --- FAQ ------------------------------------------------------------------
   Native <details> rather than a scripted accordion, so the answers are in the
   served HTML and are read by crawlers and screen readers whether a panel
   happens to be open or not. The marker is replaced with the site's own
   chevron because the default triangle is the one piece of browser chrome
   that cannot be made to match this design. */
.oej-faq { border-top: 1px solid var(--oej-border); margin-top: 24px; }
.oej-faq__item { border-bottom: 1px solid var(--oej-border); }

.oej-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font: 600 17px/1.35 var(--oej-body);
  color: var(--oej-ink);
}
.oej-faq__q::-webkit-details-marker { display: none; }
.oej-faq__q:hover { color: var(--oej-red); }
.oej-faq__q:focus-visible { outline: 2px solid var(--oej-red); outline-offset: 3px; }

.oej-faq__chev {
  flex: none;
  font-size: 14px;
  color: var(--oej-ink-40);
  transition: transform .18s ease;
}
.oej-faq__item[open] .oej-faq__chev { transform: rotate(180deg); color: var(--oej-red); }

.oej-faq__a {
  padding: 0 0 20px;
  max-width: 68ch;
  border-left: 2px solid var(--oej-red);
  padding-left: 16px;
  margin-bottom: 18px;
}
.oej-faq__a p {
  margin: 0 0 10px;
  font: 400 15px/1.6 var(--oej-body);
  color: var(--oej-ink-60);
}
.oej-faq__a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .oej-faq__chev { transition: none; }
}

/* --- Location page -------------------------------------------------------- */
.oej-directions { margin-top: 24px; }
.oej-directions__item { padding: 16px 0; border-bottom: 1px solid var(--oej-border); }
.oej-directions__item:last-child { border-bottom: 0; }
.oej-directions__from {
  font: 600 13px/1 var(--oej-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oej-red);
}
.oej-directions__item p { margin: 8px 0 0; font: 400 15px/1.55 var(--oej-body); color: var(--oej-ink-60); }

/* --- FAQ ------------------------------------------------------------------
   Native <details> rather than a scripted accordion, so the answers are in the
   served HTML and are read by crawlers and screen readers whether a panel
   happens to be open or not. The marker is replaced with the site's own
   chevron because the default triangle is the one piece of browser chrome
   that cannot be made to match this design. */
.oej-faq { border-top: 1px solid var(--oej-border); margin-top: 24px; }
.oej-faq__item { border-bottom: 1px solid var(--oej-border); }

.oej-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font: 600 17px/1.35 var(--oej-body);
  color: var(--oej-ink);
}
.oej-faq__q::-webkit-details-marker { display: none; }
.oej-faq__q:hover { color: var(--oej-red); }
.oej-faq__q:focus-visible { outline: 2px solid var(--oej-red); outline-offset: 3px; }

.oej-faq__chev {
  flex: none;
  font-size: 14px;
  color: var(--oej-ink-40);
  transition: transform .18s ease;
}
.oej-faq__item[open] .oej-faq__chev { transform: rotate(180deg); color: var(--oej-red); }

.oej-faq__a {
  padding: 0 0 20px;
  max-width: 68ch;
  border-left: 2px solid var(--oej-red);
  padding-left: 16px;
  margin-bottom: 18px;
}
.oej-faq__a p {
  margin: 0 0 10px;
  font: 400 15px/1.6 var(--oej-body);
  color: var(--oej-ink-60);
}
.oej-faq__a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .oej-faq__chev { transition: none; }
}

/* --- Location page -------------------------------------------------------- */
.oej-directions { margin-top: 24px; }
.oej-directions__item { padding: 16px 0; border-bottom: 1px solid var(--oej-border); }
.oej-directions__item:last-child { border-bottom: 0; }
.oej-directions__from {
  font: 600 13px/1 var(--oej-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oej-red);
}
.oej-directions__item p { margin: 8px 0 0; font: 400 15px/1.55 var(--oej-body); color: var(--oej-ink-60); }

/* --- Homepage banner ------------------------------------------------------
   Fixed aspect ratios on the frame, object-fit on the image. The frame keeps
   its shape before the image loads, so nothing below it shifts — the banner is
   the first thing on the page and any jump here moves the whole homepage. */
.oej-banner { background: var(--oej-ink); }

/* height:auto matters. The <img> carries width/height attributes so the
   browser can reserve the box before the file arrives, but a computed height
   makes `aspect-ratio` a no-op — the image then rendered at its literal 720px
   with the width squeezed to fit, and `cover` cropped the sides off, which is
   how "MOTOSIKAL" became "OTOSIKAL". Releasing the height lets the ratio
   below define the frame and keeps the reserved box. */
.oej-banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;          /* 1920 x 720 */
  object-fit: cover;
  object-position: center;
}
.oej-banner__link { display: block; }

.oej-banner__dots { margin-bottom: 18px; }
.oej-banner__dots [data-bs-target] {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 0;             /* the design has no rounded corners anywhere */
  background: rgba(255, 255, 255, .45);
  opacity: 1;
  transition: background-color .15s;
}
.oej-banner__dots .active { background: var(--oej-red); }
.oej-banner__dots [data-bs-target]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.oej-banner__arrow {
  width: 64px;
  opacity: 0;
  transition: opacity .18s;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.oej-banner:hover .oej-banner__arrow,
.oej-banner__arrow:focus-visible { opacity: 1; }
.oej-banner__arrow:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* Below the header the banner goes full-bleed, and the frame turns portrait so
   a landscape crop does not become a letterbox strip on a phone. */
@media (max-width: 767.98px) {
  .oej-banner__img { aspect-ratio: 9 / 10; }   /* 1080 x 1200 */
  .oej-banner__arrow { display: none; }        /* swipe instead */
  .oej-banner__dots { margin-bottom: 10px; }
}

/* --- Homepage intro strip ------------------------------------------------- */
/* The intro strip opens the page directly under the banner's hard dark edge,
   so it needs more air above the h1 than a mid-page section does — the shared
   --tight padding (44px) put the heading right up against that edge. Two
   classes rather than one so this beats .oej-section--tight on specificity
   instead of relying on which stylesheet loads last. */
.oej-section.oej-intro { padding: 96px 0 88px; }
.oej-intro__lead { max-width: 62ch; margin-top: 20px; }
.oej-intro__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

@media (max-width: 991.98px) {
  .oej-section.oej-intro { padding: 52px 0 48px; }
  .oej-intro__lead { margin-top: 16px; }
  .oej-intro__actions { margin-top: 28px; }
}

/* --- Branch cards + sales team --------------------------------------------
   Named oej-branchcard, not oej-branch: the homepage already uses
   .oej-branch for the single-shop panel and the two would collide.

   Every row here is a phone call waiting to happen, so the WhatsApp buttons
   are sized as real touch targets (44px) with real gaps between them rather
   than the tight pills the reference layout uses — on a phone, two adjacent
   4mm targets is how somebody messages the wrong person. */
.oej-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.oej-branchcard {
  border: 1px solid var(--oej-border);
  border-top: 3px solid var(--oej-red);
  padding: 24px 22px;
  background: var(--oej-paper);
  display: flex;
  flex-direction: column;
}

.oej-branchcard__name {
  font: 700 19px/1.25 var(--oej-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--oej-ink);
  margin: 0 0 8px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.oej-branchcard__pin { color: var(--oej-red); font-size: 14px; flex: none; }

.oej-branchcard__address {
  font: 400 14px/1.55 var(--oej-body);
  color: var(--oej-ink-60);
  margin: 0 0 16px;
}

.oej-branchcard__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.oej-maplink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--oej-border-strong);
  font: 600 12px/1 var(--oej-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oej-ink);
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.oej-maplink:hover { background: var(--oej-ink); border-color: var(--oej-ink); color: #fff; }
.oej-maplink:focus-visible { outline: 2px solid var(--oej-red); outline-offset: 2px; }

/* --- team ---------------------------------------------------------------- */
/* Deliberately not margin-top:auto. Pushing the team to the bottom of an
   equal-height grid cell opens a gap mid-card on branches with a smaller
   team; trailing space under a short card reads better than a hole in it. */
.oej-team { border-top: 1px solid var(--oej-border); padding-top: 16px; }
.oej-team__head { margin-bottom: 4px; }
.oej-team__list { list-style: none; margin: 0; padding: 0; }

.oej-team__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--oej-border);
}
.oej-team__row:last-child { border-bottom: 0; }

.oej-team__who { display: flex; flex-direction: column; min-width: 0; }
.oej-team__name {
  font: 600 15px/1.2 var(--oej-body);
  color: var(--oej-ink);
  overflow-wrap: anywhere;
}
.oej-team__role {
  font: 400 12px/1.2 var(--oej-body);
  color: var(--oej-ink-40);
  margin-top: 2px;
}

/* 44px tall and never shrinking below its label — the one control on this
   page that matters. */
.oej-team__wa { flex: none; height: 44px; padding: 0 16px; gap: 7px; }

@media (max-width: 575.98px) {
  .oej-branches { grid-template-columns: 1fr; gap: 18px; }
  .oej-branchcard { padding: 20px 16px; }
  /* Full-width button under the name rather than a squeezed pill beside it. */
  .oej-team__row { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .oej-team__wa { width: 100%; }
}