/* ============================================================================
 * Riderfaifa — styles
 * Tokens from the Prefetch ID design system (colors, type, spacing, base),
 * with the Riderfaifa green brand overrides applied on top.
 * ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'LINESeedSansTH';
  src: url('assets/fonts/LINESeedSansTH_W_Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LINESeedSansTH';
  src: url('assets/fonts/LINESeedSansTH_W_Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Surfaces & text */
  --color-body-bg: #eef8f1;
  --color-body-color: #333333;
  --color-card: #ffffff;
  --color-border: #e7e9eb;

  /* Brand + semantic (primary overridden to Riderfaifa green) */
  --color-primary: #218358;
  --color-primary-hover: #1b6b48;
  --color-secondary: #ee941c;
  --color-secondary-hover: #d9851a;
  --color-success: #30a46c;
  --color-danger: #e5513e;

  /* Neutral scale */
  --color-default-100: #e6f4ea;
  --color-default-400: #9ba6b7;
  --color-default-700: #6c757d;
  --color-default-800: #343a40;
  --color-default-900: #313a46;
  --color-default-950: #0f172a;

  --color-line: #06c755;

  /* Type */
  --font-body: 'Outfit', 'LINESeedSansTH', sans-serif;
  --text-xs: 0.8125rem;
  --text-body: 0.875rem;
  --text-md: 15px;
  --leading-normal: 1.5;

  /* Shape */
  --radius: 10px;
  --radius-full: 9999px;
  --shadow: 0px 1px 4px 0px rgba(130, 143, 163, 0.15);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-body-bg);
  color: var(--color-body-color);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea { font-size: 16px; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
section[id], main[id] { scroll-margin-top: 64px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Layout helpers ------------------------------------------------------- */
.page { min-height: 100dvh; display: flex; flex-direction: column; }
.page > main { flex: 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.stack { display: flex; flex-direction: column; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); }
.surface-band { background: var(--color-card); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.h2 { font-size: clamp(24px, 3.5vw, 32px); color: var(--color-default-950); text-wrap: pretty; }

/* --- Components: Button --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--text-body);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--color-primary-hover); color: #fff; }
.btn--sm { min-height: 40px; padding: 0 12px; font-size: var(--text-xs); }
.btn--lg { min-height: 48px; padding: 0 20px; font-size: var(--text-md); }
.btn--full { width: 100%; }
.btn--secondary { background: var(--color-secondary); }
.btn--secondary:hover { background: var(--color-secondary-hover); }
.btn--outline, .btn--social {
  background: var(--color-card);
  color: var(--color-body-color);
  border-color: var(--color-border);
}
.btn--ghost { background: transparent; color: var(--color-body-color); }
.btn--outline:hover, .btn--social:hover, .btn--ghost:hover {
  background: var(--color-default-100);
  color: var(--color-body-color);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn:disabled:hover.btn--secondary { background: var(--color-secondary); }
.line-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-line); flex: none; }

.spinner { display: inline-block; animation: spin .7s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Components: Card / Input / Pill ------------------------------------- */
.card {
  border-radius: var(--radius);
  background: var(--color-card);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}
.input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-body-color);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(33, 131, 88, .20); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(229, 81, 62, .20); }

.pill {
  padding: 0 16px;
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-default-800);
}
.pill--period { min-height: 40px; }
.pill--period[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.pill--app { min-height: 44px; }
.pill--app[aria-pressed="true"] { border-color: var(--color-primary); background: rgba(33, 131, 88, .12); color: var(--color-primary); }

.placeholder {
  background: var(--color-default-100);
  border: 1px dashed var(--color-default-400);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-default-700);
}

/* --- Header --------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-card); border-bottom: 1px solid var(--color-border); }
.site-header__inner { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-default-950); }
.brand:hover { color: var(--color-default-950); }
.brand__mark { width: 38px; height: 38px; border-radius: var(--radius); background: var(--color-secondary); color: #fff; display: flex; align-items: center; justify-content: center; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: 18px; font-weight: 700; }
.brand__domain { font-size: 11px; color: var(--color-default-700); }
.site-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.site-nav__links { display: none; gap: 20px; }
.site-nav__links a { color: var(--color-default-800); }
.site-nav__links a:hover { color: var(--color-primary); }

/* --- Hero ----------------------------------------------------------------- */
.hero { background: var(--color-primary); color: #fff; }
.hero__inner { --min: 440px; padding-top: 40px; padding-bottom: 48px; gap: 36px; align-items: center; }
.hero__copy { gap: 20px; }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge { background: var(--color-secondary); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-full); }
.hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.15; font-weight: 700; text-wrap: pretty; }
.hero h1 .accent { color: var(--color-secondary); }
.hero__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hero__price-num { font-size: clamp(52px, 9vw, 80px); font-weight: 700; line-height: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.perk { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--color-default-950); font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-full); }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.app-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.app-tag { border: 1px solid rgba(255, 255, 255, .5); padding: 4px 12px; border-radius: var(--radius-full); font-weight: 600; }

/* --- Stats ---------------------------------------------------------------- */
.stats { --min: 200px; margin-top: -24px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat { padding: 20px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--color-border); }
.stat:last-child { border-right: 0; }
.stat__big { font-size: 30px; font-weight: 700; color: var(--color-primary); line-height: 1.2; }
.stat__small { font-size: 14px; color: var(--color-default-800); }

/* --- Tiles (jobs, steps) -------------------------------------------------- */
.tile { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; }
.tile__icon { width: 48px; height: 48px; border-radius: var(--radius); background: rgba(238, 148, 28, .14); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; }
.tile strong { color: var(--color-default-950); }
.tile span { font-size: 14px; color: var(--color-default-700); }

/* --- Price ---------------------------------------------------------------- */
.price-card { --min: 340px; background: var(--color-card); border: 2px solid var(--color-primary); border-radius: var(--radius); overflow: hidden; }
.price-card__main { padding: 28px; gap: 14px; }
.price-card__incl { padding: 28px; background: var(--color-default-100); gap: 14px; }
.eyebrow { font-size: 14px; font-weight: 600; }
.price-amount { display: flex; align-items: baseline; gap: 8px; }
.price-amount__num { font-size: 60px; font-weight: 700; color: var(--color-default-950); line-height: 1; }
.price-amount__unit { font-size: 18px; color: var(--color-default-700); }
.muted { font-size: 14px; color: var(--color-default-700); }
.check-item { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--color-default-950); }
.check-dot { flex: none; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-success); color: #fff; display: flex; align-items: center; justify-content: center; }

/* --- Calculator ----------------------------------------------------------- */
.calc { background: #14432e; color: #fff; }
.calc__inner { --min: 380px; padding-top: 56px; padding-bottom: 56px; gap: 36px; align-items: center; }
.calc h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.25; }
.calc__panel { background: var(--color-card); color: var(--color-default-950); border-radius: var(--radius); padding: 24px; gap: 18px; }
.range-row { display: flex; justify-content: space-between; font-size: 15px; }
.range-row label span { color: var(--color-default-700); }
input[type=range] { accent-color: var(--color-secondary); width: 100%; height: 28px; margin: 0; }
.calc__result { border-top: 1px solid var(--color-border); padding-top: 16px; gap: 4px; }
.calc__big { font-size: 44px; font-weight: 700; color: var(--color-secondary); line-height: 1.1; }

/* --- Battery -------------------------------------------------------------- */
.battery { --min: 340px; padding-top: 56px; padding-bottom: 56px; gap: 32px; align-items: start; }
.battery h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1.25; color: var(--color-default-950); }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: rgba(238, 148, 28, .12); border-radius: var(--radius); }
.kv-label { font-size: 13px; color: var(--color-default-700); }
.kv-value { font-size: 16px; color: var(--color-default-950); }

/* --- Specs ---------------------------------------------------------------- */
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.spec-row dt { flex: 0 0 38%; color: var(--color-default-700); }
.spec-row dd { flex: 1; margin: 0; color: var(--color-default-950); font-weight: 600; text-align: right; }

/* --- FAQ ------------------------------------------------------------------ */
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.faq-q {
  width: 100%;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-card);
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-default-950);
  text-align: left;
  cursor: pointer;
}
.faq-q:hover { background: var(--color-default-100); }
.faq-q__icon { font-size: 22px; color: var(--color-primary); }
.faq-a { padding: 0 16px 16px; font-size: 15px; line-height: 1.7; color: var(--color-default-800); }

/* --- Apply ---------------------------------------------------------------- */
.apply { background: var(--color-primary); }
.apply__inner { --min: 360px; padding-top: 56px; padding-bottom: 72px; gap: 32px; align-items: center; }
.apply h2 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; }
.field-label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-default-900); }
.success-disc { width: 56px; height: 56px; border-radius: var(--radius-full); background: rgba(48, 164, 108, .14); color: var(--color-success); display: flex; align-items: center; justify-content: center; }

/* --- Footer & mobile bar -------------------------------------------------- */
.site-footer { background: var(--color-card); border-top: 1px solid var(--color-border); }
.site-footer__inner { padding-top: 20px; padding-bottom: 88px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--color-default-700); }
.site-footer__links { display: flex; gap: 12px; flex-wrap: wrap; }

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  box-shadow: 0 -1px 4px rgba(130, 143, 163, .15);
}

@media (min-width: 760px) {
  .site-nav__links { display: flex; }
  .mobile-bar { display: none; }
}

/* --- Photos --------------------------------------------------------------- */
.bike-photo { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #05070d; }

/* --- Hero photo gallery --------------------------------------------------- */
.gallery { position: relative; aspect-ratio: 4 / 3; background: #fff; border-radius: var(--radius); overflow: hidden; }
.gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: -3px; }
.gallery__slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; }
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__slide--cutout img { width: 94%; height: auto; object-fit: contain; }
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 0;
  background: rgba(255, 255, 255, .9);
  color: var(--color-default-950);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .85);
}
.gallery__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(15, 23, 42, .3); cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.gallery__dot[aria-current="true"] { width: 22px; background: var(--color-secondary); }

/* --- Ways to own ----------------------------------------------------------- */
.own-card { padding: 22px; }
.tile .own-card__tag { font-size: 13px; font-weight: 600; color: var(--color-default-700); }
.own-card--hot { border: 2px solid var(--color-secondary); background: rgba(238, 148, 28, .06); }
.tile.own-card--hot .own-card__tag { color: var(--color-secondary); }
.hero__cash { font-size: 15px; }
.hero__cash a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero__cash a:hover { color: var(--color-secondary); }