/* ==========================================================================
   REV TORQ Customer PWA — Build 167 "Premium"
   Loaded last. Design tokens + typography + component polish + motion.
   Business logic is untouched; this layer only restyles existing markup.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — see assets/fonts/LICENSE-*) ---------- */
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url("../assets/fonts/saira-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url("../assets/fonts/saira-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Saira Condensed";src:url("../assets/fonts/saira-condensed-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  --rt-font-body:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --rt-font-display:"Saira Condensed","Inter",-apple-system,BlinkMacSystemFont,sans-serif;

  --rt-red-50:#fdf2f3;
  --rt-red-100:#fbe4e7;
  --rt-red-200:#f3c4cb;
  --rt-red-500:#d42d42;
  --rt-red-600:#b92536;
  --rt-red-700:#9b1f2e;
  --rt-red-800:#741624;
  --rt-red-900:#470d16;

  --rt-ink:#17141a;
  --rt-ink-2:#3e393f;
  --rt-muted:#7f777c;
  --rt-muted-2:#a69ea2;
  --rt-line:#ebe5e3;
  --rt-line-2:#f2eeec;
  --rt-surface:#ffffff;
  --rt-bg:#f5f2f0;

  --rt-green-600:#1d8a50;
  --rt-green-50:#eaf7ef;
  --rt-gold-600:#a87a1c;
  --rt-gold-50:#fff7e6;

  --rt-r-xl:24px;
  --rt-r-lg:20px;
  --rt-r-md:14px;
  --rt-r-sm:10px;

  --rt-shadow-sm:0 1px 2px rgba(30,18,20,.05),0 2px 8px rgba(30,18,20,.04);
  --rt-shadow-md:0 1px 2px rgba(30,18,20,.05),0 10px 26px rgba(30,18,20,.07);
  --rt-shadow-red:0 14px 30px -12px rgba(155,31,46,.55);

  --rt-ease:cubic-bezier(.2,.8,.2,1);
  --rt-ease-out:cubic-bezier(.16,1,.3,1);
  --rt-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --rt-dur-1:120ms;
  --rt-dur-2:220ms;
  --rt-dur-3:360ms;
}

/* ---------- 1. Typography ---------- */
body,
.app.rt-light,
.modal,
.toast{
  font-family:var(--rt-font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss03";
}
.app.rt-light button,
.app.rt-light input,
.app.rt-light select,
.app.rt-light textarea,
.modal button,
.modal input,
.modal select,
.modal textarea{font-family:inherit}

/* Display face for titles and big numbers */
.app.rt-light .screen h1,
.app.rt-light .screen h2,
.app.rt-light .rt-home-block-head b,
.modal .sheet h2{
  font-family:var(--rt-font-display);
  font-weight:700;
  letter-spacing:0;
}
.app.rt-light .screen h1{font-size:34px;line-height:1;letter-spacing:-.005em}
.app.rt-light .rt-home-block-head b{font-size:22px!important;line-height:1.05!important;font-weight:700!important;letter-spacing:0!important;color:var(--rt-ink)!important}
.app.rt-light .rt-home-block-head span,
.app.rt-light .rt-eyebrow,
.app.rt-light .rt-prime-checkin-title small,
.app.rt-light .rt-smart-copy>small,
.app.rt-light .rt-prime-bike-copy small{
  font-family:var(--rt-font-body)!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  color:var(--rt-muted)!important;
}

/* Numbers never jitter */
.app.rt-light .rt-member-points-value,
.app.rt-light .rt-prime-checkin-days b,
.app.rt-light .rt-v2-promo-copy>strong,
.app.rt-light .rt-prime-bike-copy em,
.app.rt-light .rt-reward-hero strong,
.app.rt-light .rt-plate,
.app.rt-light .rt-next-service h2{font-variant-numeric:tabular-nums lining-nums}

/* ---------- 2. Greeting ---------- */
.app.rt-light .rt-home-member-welcome{
  margin:18px 2px 10px!important;
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:var(--rt-muted)!important;
}
.app.rt-light .rt-home-member-welcome strong{
  display:block;
  margin-top:2px;
  font-family:var(--rt-font-display);
  font-size:26px;
  line-height:1.05;
  font-weight:700;
  color:var(--rt-ink);
}

/* ---------- 3. Points / tier card (brand red, made richer) ---------- */
.app.rt-light .rt-simple-rider-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  grid-template-columns:minmax(0,1fr) auto 34px!important;
  grid-template-rows:auto auto;
  row-gap:14px!important;
  column-gap:12px!important;
  min-height:0!important;
  padding:18px 16px 16px 18px!important;
  border-radius:var(--rt-r-lg)!important;
  background:
    radial-gradient(120% 150% at 100% 0%,rgba(255,92,112,.55) 0%,rgba(255,92,112,0) 52%),
    linear-gradient(145deg,#c8283b 0%,#a51e30 55%,#7c1523 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18),var(--rt-shadow-red)!important;
  transition:transform var(--rt-dur-1) var(--rt-ease),box-shadow var(--rt-dur-2) var(--rt-ease);
}
/* faint checkered flag texture fading in from the right — ties to the header */
.app.rt-light .rt-simple-rider-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.07) 75%),
    linear-gradient(45deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.07) 75%);
  background-size:22px 22px;
  background-position:0 0,11px 11px;
  -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 35%,#000 100%);
}
/* one slow satin sheen, only on first paint */
.app.rt-light .rt-simple-rider-card::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-60%;
  width:45%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);
  animation:rtSheen 1.6s .5s var(--rt-ease-out) both;
}
@keyframes rtSheen{from{left:-60%}to{left:130%}}
.app.rt-light .rt-simple-point-icon{
  width:42px!important;height:42px!important;flex-basis:42px!important;
  border:0!important;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
  font-family:var(--rt-font-display);
  font-size:20px!important;
  font-weight:700!important;
}
.app.rt-light .rt-simple-points-copy strong{
  font-family:var(--rt-font-display);
  font-size:38px!important;
  line-height:.9!important;
  font-weight:700!important;
  letter-spacing:0!important;
}
.app.rt-light .rt-simple-points-copy small,
.app.rt-light .rt-simple-rider-right small{
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  color:rgba(255,255,255,.96)!important;
  text-shadow:0 1px 2px rgba(60,0,10,.28);
}
.app.rt-light .rt-simple-rider-right{gap:5px!important}
.app.rt-light .rt-simple-rider-right strong{
  font-family:var(--rt-font-display);
  font-size:28px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
}
.app.rt-light .rt-simple-rider-arrow{
  width:32px!important;height:32px!important;
  padding:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  color:#fff!important;
  font-size:0!important;
}
.app.rt-light .rt-simple-rider-arrow::before{
  content:"";
  width:8px;height:8px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  border-radius:1px;
  transform:translateX(-1px) rotate(45deg);
}
/* tier progress row inside the card */
.app.rt-light .rt-rider-progress{
  grid-column:1 / -1;
  display:grid;
  gap:7px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
}
.app.rt-light .rt-rider-progress-label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 2px rgba(60,0,10,.28);
}
.app.rt-light .rt-rider-progress-label b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.app.rt-light .rt-rider-progress-label em{font-style:normal;font-size:11px;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
.app.rt-light .rt-rider-progress i{
  position:relative;
  display:block;
  height:6px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.18);
  overflow:hidden;
}
.app.rt-light .rt-rider-progress i b{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--rt-tier-progress,0%);
  border-radius:inherit;
  background:linear-gradient(90deg,#fff 0%,#ffe0e4 100%);
  box-shadow:0 0 12px rgba(255,255,255,.55);
  transform-origin:left center;
  animation:rtBarGrow .9s .25s var(--rt-ease-out) both;
}
@keyframes rtBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 4. Hero banner ---------- */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-hero:not(.rt-poster)::after{
  background:
    linear-gradient(90deg,rgba(10,7,8,.92) 0%,rgba(10,7,8,.72) 34%,rgba(10,7,8,.18) 62%,rgba(10,7,8,0) 80%),
    linear-gradient(0deg,rgba(10,7,8,.55) 0%,rgba(10,7,8,0) 38%)!important;
}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy{width:min(56%,232px)!important}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>strong{
  font-family:var(--rt-font-display);
  font-style:normal!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:.92!important;
  letter-spacing:0!important;
  color:#ff3b4f!important;
  -webkit-text-fill-color:#ff3b4f;
}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy p{
  font-size:12px!important;
  line-height:1.4!important;
  color:rgba(255,255,255,.84)!important;
  margin:0 0 14px!important;
}
/* primary: solid red pill */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button:not(.rt-simple-promo-detail),
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button.rt-simple-promo-detail:only-of-type,
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button:first-of-type.rt-simple-promo-detail{
  height:38px!important;min-height:38px!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#e0384c 0%,#b92536 100%)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -6px rgba(212,45,66,.7)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
}
/* secondary next to a primary: quiet text link */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button+.rt-simple-promo-detail{
  height:38px!important;min-height:38px!important;
  padding:0 6px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:rgba(255,255,255,.9)!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.45);
  text-underline-offset:4px;
}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button.claimed,
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button.claimed:disabled{
  background:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)!important;
  color:#fff!important;
}
.app.rt-light .rt-v2-slider-dots button{transition:width var(--rt-dur-3) var(--rt-ease-out),background var(--rt-dur-2) ease}

/* ---------- 5. Quick actions ---------- */
.app.rt-light .rt-prime-quick-grid{gap:10px!important}
.app.rt-light .rt-prime-quick-grid>button{
  min-height:104px!important;
  padding:14px 4px 12px!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:1px solid var(--rt-line-2)!important;
  border-radius:var(--rt-r-lg)!important;
  background:var(--rt-surface)!important;
  box-shadow:var(--rt-shadow-sm)!important;
}
.app.rt-light .rt-prime-quick-icon,
.app.rt-light .rt-prime-service-icon,
.app.rt-light .rt-prime-checkin-icon{
  width:46px!important;height:46px!important;
  border-radius:15px!important;
  background:var(--rt-red-50)!important;
  box-shadow:inset 0 0 0 1px var(--rt-red-100)!important;
  color:var(--rt-red-600)!important;
}
.app.rt-light .rt-prime-quick-grid>button.whatsapp .rt-prime-quick-icon{
  background:#ecf8f0!important;
  box-shadow:inset 0 0 0 1px #d4efdd!important;
  color:#1f9d55!important;
}
.app.rt-light .rt-prime-quick-icon .rt-svg-icon,
.app.rt-light .rt-prime-service-icon .rt-svg-icon,
.app.rt-light .rt-prime-checkin-icon .rt-svg-icon{
  width:24px!important;height:24px!important;
  filter:none!important;
}
/* calm: no endless gloss sweep on icons */
.app.rt-light .nav-icon::after,
.app.rt-light .rt-prime-quick-icon::after,
.app.rt-light .rt-prime-service-icon::after,
.app.rt-light .rt-prime-checkin-icon::after{content:none!important;animation:none!important}
.app.rt-light .rt-prime-quick-grid strong{
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:600!important;
  color:var(--rt-ink-2)!important;
}

/* ---------- 6. Bottom navigation ---------- */
.app.rt-light .bottom-nav .nav::after{display:none!important}
.app.rt-light .bottom-nav .nav{gap:4px!important;transition:color var(--rt-dur-2) ease}
.app.rt-light .bottom-nav .nav .nav-icon{
  position:relative;
  overflow:visible!important;
  width:56px!important;height:30px!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#8b8389!important;
  transition:background var(--rt-dur-2) var(--rt-ease),color var(--rt-dur-2) ease,transform var(--rt-dur-2) var(--rt-ease-spring);
}
.app.rt-light .bottom-nav .nav .nav-icon svg{width:23px!important;height:23px!important;filter:none!important}
.app.rt-light .bottom-nav .nav small{color:#8b8389!important;font-weight:600!important;font-size:10.5px!important}
.app.rt-light .bottom-nav .nav.active .nav-icon{
  background:var(--rt-red-100)!important;
  color:var(--rt-red-600)!important;
}
.app.rt-light .bottom-nav .nav.active .nav-icon svg{stroke-width:2.2}
.app.rt-light .bottom-nav .nav.active small{color:var(--rt-red-600)!important;font-weight:700!important}
.app.rt-light .bottom-nav .nav:active .nav-icon{transform:scale(.9)}

/* ---------- 7. Service stepper ---------- */
.app.rt-light .rt-service-progress{--rt-step:0;margin:22px 0 8px!important}
.app.rt-light .rt-service-progress::before{
  left:12.5%!important;right:12.5%!important;top:15px!important;
  height:3px!important;border-radius:3px;
  background:var(--rt-line)!important;
}
.app.rt-light .rt-service-progress::after{
  content:"";
  position:absolute;
  left:12.5%;top:15px;
  height:3px;border-radius:3px;
  width:calc(75% * var(--rt-step) / 3);
  background:linear-gradient(90deg,var(--rt-red-700),var(--rt-red-500));
  transform-origin:left;
  animation:rtBarGrow .8s .15s var(--rt-ease-out) both;
}
.app.rt-light .rt-service-progress>div{z-index:1}
.app.rt-light .rt-service-progress span{
  width:32px!important;height:32px!important;
  background:#fff!important;
  border:2px solid var(--rt-line)!important;
  color:var(--rt-muted-2)!important;
  font-size:12px!important;font-weight:700!important;
}
.app.rt-light .rt-service-progress .done span{
  background:linear-gradient(180deg,var(--rt-red-500),var(--rt-red-700))!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 4px 10px -3px rgba(185,37,54,.55);
}
.app.rt-light .rt-service-progress .active span{
  position:relative;
  background:#fff!important;
  border-color:var(--rt-red-600)!important;
  color:var(--rt-red-600)!important;
  box-shadow:0 0 0 4px var(--rt-red-100);
}
.app.rt-light .rt-service-progress .active span::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid var(--rt-red-500);
  animation:rtPulse 1.8s var(--rt-ease-out) infinite;
}
@keyframes rtPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.app.rt-light .rt-service-progress small{font-size:10.5px!important;font-weight:600!important;color:var(--rt-muted)!important}
.app.rt-light .rt-service-progress .done small{color:var(--rt-ink-2)!important}
.app.rt-light .rt-service-progress .active small{color:var(--rt-red-700)!important;font-weight:700!important}

/* status card: chip sits above the bike name instead of squeezing it */
.app.rt-light .rt-service-bike-row{
  grid-template-columns:64px minmax(0,1fr)!important;
  grid-template-areas:"icon chip" "icon copy";
  align-items:start!important;
  column-gap:14px!important;
  row-gap:8px!important;
}
.app.rt-light .rt-service-bike-row>.rt-service-bike-icon{grid-area:icon;width:64px!important;height:64px!important;border-radius:18px!important;align-self:center}
.app.rt-light .rt-service-bike-row>.rt-service-bike-icon .rt-svg-icon{width:32px!important;height:32px!important}
.app.rt-light .rt-service-bike-row>.status{grid-area:chip;justify-self:start;width:max-content}
.app.rt-light .rt-service-bike-row>div:not(.rt-service-bike-icon){grid-area:copy;min-width:0}
.app.rt-light .rt-service-bike-row h2{margin:2px 0 6px!important;font-size:28px!important;line-height:1!important}

/* status chips: soft tints instead of dark maroon blocks */
.app.rt-light .screen .status{
  border:0!important;
  border-radius:999px!important;
  padding:6px 11px!important;
  background:var(--rt-red-50)!important;
  box-shadow:inset 0 0 0 1px var(--rt-red-100)!important;
  color:var(--rt-red-700)!important;
  font-size:11.5px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
}
.app.rt-light .screen .status.green{
  background:var(--rt-green-50)!important;
  box-shadow:inset 0 0 0 1px #cfeedb!important;
  color:var(--rt-green-600)!important;
}

/* ---------- 8. Setup (onboarding) card ---------- */
.app.rt-light .rt-onboarding{
  padding:18px!important;
  border:1px solid var(--rt-line-2)!important;
  border-radius:var(--rt-r-lg)!important;
  background:var(--rt-surface)!important;
  box-shadow:var(--rt-shadow-sm)!important;
}
.app.rt-light .rt-onboarding-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.app.rt-light .rt-onboarding-head .badge{
  display:inline-block;
  padding:0!important;
  border:0!important;
  background:none!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  color:var(--rt-muted)!important;
}
.app.rt-light .rt-onboarding-head h2{margin:4px 0 4px!important;font-size:24px!important;line-height:1.05!important}
.app.rt-light .rt-onboarding-head p{margin:0!important;font-size:12.5px!important;line-height:1.45!important;color:var(--rt-muted)!important}
.app.rt-light .rt-platform-badge{
  flex:0 0 auto;
  padding:5px 10px!important;
  border-radius:999px!important;
  background:var(--rt-line-2)!important;
  color:var(--rt-ink-2)!important;
  font-size:11px!important;
  font-weight:600!important;
}
.app.rt-light .rt-onboarding .rt-progress{
  height:6px!important;
  margin:14px 0 6px!important;
  border-radius:999px!important;
  background:var(--rt-line-2)!important;
  overflow:hidden;
}
.app.rt-light .rt-onboarding .rt-progress span{
  border-radius:inherit!important;
  background:linear-gradient(90deg,var(--rt-red-700),var(--rt-red-500))!important;
  transform-origin:left;
  animation:rtBarGrow .9s .2s var(--rt-ease-out) both;
}
.app.rt-light .rt-onboarding-step{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  column-gap:12px!important;
  row-gap:10px!important;
  padding:14px 0!important;
  border-top:1px solid var(--rt-line-2)!important;
}
.app.rt-light .rt-onboarding-step>.rt-step-copy{flex:1 1 calc(100% - 42px);min-width:0}
.app.rt-light .rt-onboarding-step:first-of-type{border-top:0!important}
.app.rt-light .rt-onboarding-step>.rt-step-no{
  width:30px!important;height:30px!important;
  display:grid;place-items:center;
  border-radius:50%!important;
  border:0!important;
  background:var(--rt-red-50)!important;
  box-shadow:inset 0 0 0 1.5px var(--rt-red-200)!important;
  color:var(--rt-red-700)!important;
  font-size:13px!important;
  font-weight:700!important;
}
.app.rt-light .rt-onboarding-step .rt-step-copy strong{display:block;font-size:14.5px!important;font-weight:650!important;color:var(--rt-ink)!important}
.app.rt-light .rt-onboarding-step .rt-step-copy .muted{margin-top:3px;font-size:12.5px!important;line-height:1.4!important;color:var(--rt-muted)!important}
/* actions sit under the copy, in a tidy row */
.app.rt-light .rt-onboarding-step>.pill-btn:first-of-type{margin-left:42px!important}
.app.rt-light .rt-onboarding-step .pill-btn{
  display:inline-flex!important;
  align-items:center;justify-content:center;
  height:36px!important;min-height:36px!important;
  margin:0 8px 0 0!important;
  padding:0 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#d4364a,#b92536)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(185,37,54,.7)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:650!important;
}
.app.rt-light .rt-onboarding-step .pill-btn.outline{
  background:#fff!important;
  box-shadow:inset 0 0 0 1px var(--rt-line)!important;
  color:var(--rt-ink-2)!important;
}
.app.rt-light .rt-onboarding-step .pill-btn+.pill-btn{margin-top:0!important}
/* completed steps collapse to one quiet line */
.app.rt-light .rt-onboarding-step.done{flex-wrap:nowrap!important;align-items:center!important}
.app.rt-light .rt-onboarding-step.done>.rt-step-copy{flex:1 1 auto}
.app.rt-light .rt-onboarding-step.done>.rt-step-no{background:var(--rt-green-50)!important;box-shadow:inset 0 0 0 1.5px #bfe6cf!important;color:var(--rt-green-600)!important}
.app.rt-light .rt-onboarding-step.done .rt-step-copy .muted{display:none}
.app.rt-light .rt-onboarding-step.done .rt-step-copy strong{color:var(--rt-muted)!important;font-weight:550!important}
.app.rt-light .rt-onboarding-step.done>.status{padding:4px 10px!important;font-size:10.5px!important}
.app.rt-light .rt-onboarding .rt-guide-link{
  margin-top:6px!important;
  padding:0!important;
  font-size:13px!important;
  font-weight:650!important;
  color:var(--rt-red-600)!important;
}
.app.rt-light .rt-onboarding .rt-guide-link::after{content:" →"}

/* ---------- 9. Header ---------- */
/* crisp edge instead of a muddy 24px shadow smear */
.app.rt-light .topbar{
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 18px -12px rgba(0,0,0,.55)!important;
}
.app.rt-light .topbar.is-scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 12px 24px -12px rgba(0,0,0,.6)!important;
}
/* thin REV TORQ red line along the bottom edge (replaces the 26px "night lip" fade) */
.app.rt-light .topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;top:auto;bottom:0;
  height:2px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(212,45,66,0) 0%,#d42d42 22%,#d42d42 78%,rgba(212,45,66,0) 100%);
  opacity:.9;
}
/* one container, no border-inside-border */
.app.rt-light .rt-topbar-actions{gap:2px!important;padding:3px!important}
.app.rt-light #settingsBtn.icon-btn,
.app.rt-light #bellBtn.icon-btn,
.app.rt-light .rt-topbar-btn,
.app.rt-light #langBtn.rt-lang-btn{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}
.app.rt-light #settingsBtn.icon-btn:active,
.app.rt-light #bellBtn.icon-btn:active,
.app.rt-light .rt-topbar-btn:active,
.app.rt-light #langBtn.rt-lang-btn:active{background:rgba(247,245,243,.16)!important}

/* ---------- 9b. Header flag (Build 168) ----------
   One flag only: the canvas paints an opaque, crisp waving flag. The CSS checker from
   Build 166 stays as an iOS fallback but now uses the same 11px cells and fade, so the two
   never fight with different square sizes. */
.app.rt-light .topbar{background:#080707!important}
.app.rt-light .rt-flag-canvas{
  opacity:1!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.app.rt-light .topbar::before{
  background-color:#080707!important;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.2) 75%),
    linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.2) 75%)!important;
  background-size:22px 22px!important;
  background-position:0 0,11px 11px!important;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 20%,#000 78%)!important;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.1) 20%,#000 78%)!important;
  opacity:1!important;
}
/* logo plate and action pill read as solid glass over the flag */
.app.rt-light .brand{
  background:linear-gradient(180deg,rgba(20,18,17,.92),rgba(8,7,7,.88))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 16px rgba(0,0,0,.35)!important;
}
.app.rt-light .rt-topbar-actions{
  background:rgba(12,11,11,.62)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  -webkit-backdrop-filter:blur(10px) saturate(140%)!important;
  backdrop-filter:blur(10px) saturate(140%)!important;
}

/* ---------- 9c. Light sheets (Build 168) ----------
   The modal lives outside .app, so outline buttons kept the dark-theme white text
   on a white sheet ("Tutup" was invisible). */
body.rt-light-theme .sheet .btn.outline{
  background:#fff!important;
  color:var(--rt-ink-2)!important;
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--rt-line)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.rt-light-theme .sheet .btn:not(.outline):not(.dark):not(.push-soft-btn){
  background:linear-gradient(180deg,#d4364a,#b92536)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px -8px rgba(185,37,54,.7)!important;
}
body.rt-light-theme .sheet .btn{border-radius:999px!important;font-weight:650!important}
body.rt-light-theme .sheet .pill-btn:not(.primary){color:var(--rt-ink-2)!important}
/* sheets slide up instead of popping */
body.rt-light-theme .modal:not(.hidden) .sheet{animation:rtSheetUp var(--rt-dur-3) var(--rt-ease-out) both}
body.rt-light-theme .modal:not(.hidden) .modal-backdrop{animation:rtFadeIn var(--rt-dur-2) ease both}
@keyframes rtSheetUp{from{transform:translate3d(0,32px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes rtFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  body.rt-light-theme .modal:not(.hidden) .sheet,
  body.rt-light-theme .modal:not(.hidden) .modal-backdrop{animation:none!important}
}

/* ---------- 9d. Install bar + bottom nav (Build 168) ----------
   The install reminder stays persistent by design (no close button until the app is
   installed). It is now a slim, solid pill that reads as one unit with the nav, and
   content no longer shows through either of them. */
.app.rt-light .bottom-nav{
  background:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%)!important;
  backdrop-filter:blur(22px) saturate(170%)!important;
  border:1px solid rgba(235,229,227,.9)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -10px rgba(30,18,20,.22)!important;
}
.rt-install-bar{bottom:calc(82px + env(safe-area-inset-bottom))!important}
.rt-install-bar-inner{
  grid-template-columns:30px minmax(0,1fr) auto!important;
  gap:10px!important;
  min-height:50px!important;
  padding:7px 7px 7px 10px!important;
  border:1px solid rgba(235,229,227,.95)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%)!important;
  backdrop-filter:blur(22px) saturate(170%)!important;
  box-shadow:0 10px 26px -10px rgba(30,18,20,.25)!important;
}
.rt-install-bar-inner>img{width:30px!important;height:30px!important;border-radius:9px!important}
.rt-install-bar-copy strong{font-size:12.5px!important;font-weight:700!important;color:var(--rt-ink)!important}
.rt-install-bar-copy small{
  -webkit-line-clamp:1!important;
  display:block!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:10.5px!important;
  font-weight:500!important;
  color:var(--rt-muted)!important;
}
.rt-install-bar-action{
  height:36px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#d4364a,#b92536)!important;
  font-size:11.5px!important;
  font-weight:700!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(185,37,54,.7)!important;
}
body.rt-install-bar-visible .app.rt-light{padding-bottom:calc(150px + var(--safe))!important}

/* ---------- 10. Surfaces & buttons consistency ---------- */
.app.rt-light .rt-prime-checkin-card,
.app.rt-light .rt-prime-bike-card,
.app.rt-light .rt-smart-home,
.app.rt-light .rt-service-current,
.app.rt-light .rt-next-service,
.app.rt-light .rt-service-log-card{
  border:1px solid var(--rt-line-2)!important;
  border-radius:var(--rt-r-lg)!important;
  box-shadow:var(--rt-shadow-sm)!important;
}
.app.rt-light .rt-prime-checkin-cta{
  border-radius:999px!important;
  background:linear-gradient(180deg,#d4364a,#b92536)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(185,37,54,.7)!important;
  font-weight:650!important;
}
.app.rt-light .rt-prime-checkin-cta.done{background:var(--rt-green-50)!important;color:var(--rt-green-600)!important;box-shadow:inset 0 0 0 1px #cfeedb!important}
.app.rt-light .rt-prime-checkin-days button{border-radius:12px!important;transition:transform var(--rt-dur-1) var(--rt-ease),background var(--rt-dur-2) ease}
.app.rt-light .rt-prime-checkin-days b{font-family:var(--rt-font-display);font-size:14px!important;font-weight:700!important}
.app.rt-light .rt-prime-checkin-days small{font-size:8.5px!important;font-weight:500!important}
.app.rt-light .rt-prime-checkin-days button.claimed{background:var(--rt-red-50)!important;border-color:var(--rt-red-100)!important}
.app.rt-light .rt-prime-mileage-button{
  border-radius:999px!important;
  border:1px solid var(--rt-red-100)!important;
  background:var(--rt-red-50)!important;
  font-weight:650!important;
}

.app.rt-light .rt-prime-bike-art{color:var(--rt-red-600)!important;background:var(--rt-red-50)!important}
.app.rt-light .rt-prime-bike-art .rt-svg-icon{width:38px!important;height:38px!important;stroke-width:1.6}
.app.rt-light .rt-prime-bike-copy strong{font-family:var(--rt-font-display);font-size:26px!important;font-weight:700!important;letter-spacing:0!important}
.app.rt-light .rt-rv2-balance strong{font-family:var(--rt-font-display);font-weight:700!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
.app.rt-light .rt-acct-stats b{font-family:var(--rt-font-display);font-size:26px!important;font-weight:700!important;font-variant-numeric:tabular-nums}
.app.rt-light .rt-acct-edit{font-weight:650!important;letter-spacing:0!important}

/* ==========================================================================
   Build 169 — second pass on the remaining screens
   ========================================================================== */

/* ---------- 11. One button language everywhere in the app ---------- */
.app.rt-light .btn:not(.outline):not(.dark):not(.rt-account-logout):not(:disabled),
.app.rt-light .pill-btn.primary:not(:disabled){
  background:linear-gradient(180deg,#d4364a 0%,#b92536 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px -10px rgba(185,37,54,.75)!important;
}
.app.rt-light .btn{border-radius:16px!important;font-weight:650!important;letter-spacing:.005em!important}
.app.rt-light .pill-btn{border-radius:999px!important;font-weight:650!important}
.app.rt-light .btn.outline{border:0!important;background:#fff!important;color:var(--rt-red-700)!important;box-shadow:inset 0 0 0 1px var(--rt-line)!important}
.app.rt-light .btn:disabled,
.app.rt-light .pill-btn:disabled{
  background:#efe9e8!important;
  color:#ab9fa3!important;
  box-shadow:none!important;
  opacity:1!important;
}
/* Log out is a quiet, deliberate action, not the loudest button on the page */
.app.rt-light .btn.rt-account-logout{
  margin-top:18px!important;
  min-height:48px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--rt-red-200)!important;
  color:var(--rt-red-700)!important;
}
.app.rt-light .rt-account-more{margin-bottom:0!important}
.app.rt-light .rt-account-version{margin-top:12px!important;font-size:11px!important;color:var(--rt-muted-2)!important}

/* ---------- 12. Booking wizard ---------- */
.app.rt-light .rt-service-tiles{gap:10px!important}
.app.rt-light .rt-service-tiles button{
  min-height:96px!important;
  padding:14px!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  text-align:left!important;
  gap:10px!important;
  border:1px solid var(--rt-line-2)!important;
  border-radius:var(--rt-r-lg)!important;
  background:#fff!important;
  box-shadow:var(--rt-shadow-sm)!important;
}
.app.rt-light .rt-service-tiles button>span{
  width:40px;height:40px;
  display:grid!important;place-items:center!important;
  border-radius:13px;
  background:var(--rt-red-50);
  box-shadow:inset 0 0 0 1px var(--rt-red-100);
  color:var(--rt-red-600);
}
.app.rt-light .rt-service-tiles button>span .rt-svg-icon{width:22px!important;height:22px!important}
.app.rt-light .rt-service-tiles button strong{font-size:14px!important;font-weight:650!important;line-height:1.25!important;text-align:left!important}
.app.rt-light .rt-service-tiles button.selected{
  background:var(--rt-red-50)!important;
  box-shadow:inset 0 0 0 2px var(--rt-red-600)!important;
}
.app.rt-light .rt-service-tiles button.selected>span{background:var(--rt-red-600);color:#fff;box-shadow:none}
.app.rt-light .rt-service-tiles i{background:var(--rt-red-600)!important;font-size:12px}
.app.rt-light .rt-date-friendly{
  margin-top:8px;
  font-family:var(--rt-font-display);
  font-size:20px;
  font-weight:700;
  color:var(--rt-ink);
}
.app.rt-light .rt-slot-grid button{
  border-radius:14px!important;
  border:1px solid var(--rt-line)!important;
  background:#fff!important;
  box-shadow:none!important;
}
.app.rt-light .rt-slot-grid button span{font-family:var(--rt-font-display);font-size:17px!important;font-weight:700!important;font-variant-numeric:tabular-nums}
.app.rt-light .rt-slot-grid button small{font-size:9.5px!important;font-weight:600!important;color:var(--rt-muted)!important}
.app.rt-light .rt-slot-grid button.selected{
  background:var(--rt-red-600)!important;
  border-color:transparent!important;
  box-shadow:0 8px 18px -8px rgba(185,37,54,.7)!important;
  color:#fff!important;
}
.app.rt-light .rt-slot-grid button.selected span,
.app.rt-light .rt-slot-grid button.selected small{color:#fff!important}
.app.rt-light .rt-slot-grid button.full,
.app.rt-light .rt-slot-grid button:disabled{background:#f4f0ef!important;border-color:transparent!important}
.app.rt-light .textarea,
.app.rt-light textarea.textarea{
  border:1px solid var(--rt-line)!important;
  border-radius:16px!important;
  background:#fff!important;
}
.app.rt-light .textarea:focus{border-color:var(--rt-red-600)!important;box-shadow:0 0 0 3px rgba(185,37,54,.12)!important}
.app.rt-light .rt-booking-summary{
  border:1px solid var(--rt-line-2)!important;
  border-radius:var(--rt-r-md)!important;
  background:#fff!important;
  overflow:hidden;
}
.app.rt-light .rt-booking-summary>div{border-color:var(--rt-line-2)!important}
.app.rt-light .rt-booking-summary strong{font-weight:650!important}
.app.rt-light .rt-wizard-actions{gap:10px!important}
.app.rt-light .rt-wizard-actions .btn{height:auto!important;min-height:52px!important;padding:10px 14px!important;line-height:1.2!important;white-space:normal!important}

/* ---------- 13. Notifications ---------- */
.app.rt-light .rt-promo-hero-icon{
  width:64px;height:64px;
  display:grid;place-items:center;
  border-radius:20px;
  background:var(--rt-red-50);
  box-shadow:inset 0 0 0 1px var(--rt-red-100);
  color:var(--rt-red-600);
  font-size:0!important;
}
.app.rt-light .rt-promo-hero-icon .rt-svg-icon{width:30px;height:30px}
.app.rt-light .rt-notification-card{background:#fff!important}
.app.rt-light .rt-notification-card.unread{background:#fff7f8!important;border-color:var(--rt-red-100)!important}
.app.rt-light .rt-notification-icon{color:var(--rt-red-600);background:var(--rt-red-50)!important;box-shadow:inset 0 0 0 1px var(--rt-red-100)}
.app.rt-light .rt-notification-icon .rt-svg-icon{width:21px;height:21px}
.app.rt-light .rt-notification-icon.tone-neutral{color:var(--rt-ink-2);background:#f3f0ef!important;box-shadow:inset 0 0 0 1px #e9e4e2}
.app.rt-light .rt-notification-icon.tone-green{color:var(--rt-green-600);background:var(--rt-green-50)!important;box-shadow:inset 0 0 0 1px #cfeedb}
.app.rt-light .rt-notification-icon.tone-gold{color:var(--rt-gold-600);background:var(--rt-gold-50)!important;box-shadow:inset 0 0 0 1px #f3e2b8}
.app.rt-light .rt-notification-title span{border-radius:999px!important;font-weight:650!important}

/* ---------- 14. Rewards ---------- */
.app.rt-light .rt-rv2-reward-art strong{font-family:var(--rt-font-display);font-size:30px!important;font-weight:700!important;letter-spacing:0!important}
.app.rt-light .rt-simple-more summary b{font-weight:650}
.app.rt-light .rt-simple-more summary small{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--rt-gold-50);
  box-shadow:inset 0 0 0 1px #f3e2b8;
  color:var(--rt-gold-600)!important;
  font-size:9.5px!important;
  font-weight:700!important;
  letter-spacing:.1em;
  vertical-align:2px;
}
.app.rt-light .rt-rv2-empty{display:grid!important;justify-items:center;gap:6px;padding:26px 18px!important}
.app.rt-light .rt-rv2-empty .rt-empty-icon{
  width:52px;height:52px;margin-bottom:4px;
  display:grid;place-items:center;
  border-radius:18px;
  background:var(--rt-red-50);
  box-shadow:inset 0 0 0 1px var(--rt-red-100);
  color:var(--rt-red-600);
}
.app.rt-light .rt-rv2-empty .rt-empty-icon .rt-svg-icon{width:26px;height:26px}

/* ---------- 15. Account, Food Rider, Service log ---------- */
.app.rt-light .rt-account-menu-icon .rt-svg-icon{width:20px!important;height:20px!important}
.rt-food-rider-benefits article>span{color:var(--rt-red-600)!important;background:var(--rt-red-50)!important;box-shadow:inset 0 0 0 1px var(--rt-red-100)}
.rt-food-rider-benefits article>span .rt-svg-icon{width:18px;height:18px}
.app.rt-light .rt-service-log-actions>span{white-space:nowrap}
.app.rt-light .rt-next-service h2{font-size:34px!important;font-weight:700!important}

/* ==========================================================================
   Build 172 — fixes from a real iPhone
   ========================================================================== */

/* Banner headline: never more than 2 lines; js/premium-motion.js fits the size to the box,
   so a slower/missing font can no longer push it out of the banner. */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  font-weight:700!important;
  line-height:.95!important;
}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy p{-webkit-line-clamp:2}
/* Safe sizes without any script (the script may enlarge them up to 40px when they fit) */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>strong{font-size:min(36px,8.6vw)!important}
.app.rt-light .rt-prime-promo-carousel .rt-food-rider-promo-copy>strong{font-size:min(28px,7vw)!important}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>strong.rt-promo-title-head{font-size:min(22px,5.6vw)!important}

/* Promo title was invisible: an old rule set a transparent text fill for a gradient effect and
   a later one removed the gradient, leaving an empty line. Show it as a small eyebrow instead. */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>span{
  display:block!important;
  max-width:100%!important;
  margin:0 0 6px!important;
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  color:rgba(255,255,255,.74)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}
.app.rt-light .rt-prime-promo-carousel .rt-food-rider-promo-copy>span{color:#ffb1ad!important}

/* Copy that is too tall for the banner (set by fitCopy in js/premium-motion.js) */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy.rt-fit-1 p{-webkit-line-clamp:1!important}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy.rt-fit-0 p{display:none!important}
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>strong.rt-promo-title-head{color:#fff!important;-webkit-text-fill-color:#fff!important;line-height:1!important;-webkit-line-clamp:3!important}
/* "Lihat syarat" sits under the claim button as a compact link, not a second full-height button */
.app.rt-light .rt-prime-promo-carousel .rt-v2-promo-copy>button+.rt-simple-promo-detail{height:28px!important;min-height:28px!important;margin-top:4px!important}

/* Poster banners: show the whole poster (designed artwork must not be cropped) over a
   blurred copy of itself, so any poster size fills the banner nicely. */
.app.rt-light .rt-v2-promo-hero.rt-poster{background:#0c0a0a!important}
.app.rt-light .rt-v2-promo-hero.rt-poster>.rt-poster-bg{
  position:absolute!important;
  inset:-24px!important;
  width:calc(100% + 48px)!important;
  height:calc(100% + 48px)!important;
  object-fit:cover!important;
  filter:blur(18px) brightness(.55) saturate(1.2);
  transform:none!important;
}
.app.rt-light .rt-v2-promo-hero.rt-poster>.rt-poster-img{
  position:absolute!important;
  inset:0!important;
  z-index:1;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
/* the whole poster is the tap target (this button had no styles, so it was a tiny empty box) */
.app.rt-light .rt-v2-promo-hero.rt-poster>.rt-poster-hit{
  position:absolute!important;
  inset:0!important;
  z-index:2;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer;
}

/* "Untuk anda" cards: icon on top, text underneath, so nothing overlaps or gets cut */
.app.rt-light .rt-prime-service-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"icon chev" "copy copy";
  align-items:start!important;
  row-gap:12px!important;
  column-gap:8px!important;
  min-height:0!important;
  padding:14px!important;
  text-align:left!important;
}
.app.rt-light .rt-prime-service-card>.rt-prime-service-icon{grid-area:icon;width:44px!important;height:44px!important}
.app.rt-light .rt-prime-service-card>div{grid-area:copy;min-width:0;gap:3px!important}
.app.rt-light .rt-prime-service-card>b{grid-area:chev;align-self:start;margin-top:2px}
.app.rt-light .rt-prime-service-card small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.rt-light .rt-prime-service-card strong,
.app.rt-light .rt-prime-service-card em{
  white-space:normal!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.app.rt-light .rt-prime-service-card strong{font-size:16px!important;line-height:1.15!important;font-weight:650!important}
.app.rt-light .rt-prime-service-card em{font-size:12px!important;line-height:1.35!important}
@media (max-width:380px){
  /* the grid is one column here, so a row layout reads better */
  .app.rt-light .rt-prime-service-card{grid-template-columns:44px minmax(0,1fr) auto!important;grid-template-areas:"icon copy chev";align-items:center!important}
}

/* ==========================================================================
   Build 174 — long real-world data (names, models, 6-digit points) on small phones
   ========================================================================== */
/* Booking step 1: one wide card per bike, so long models and plates read on one or two lines */
.app.rt-light .rt-vehicle-choice{grid-template-columns:1fr!important}
.app.rt-light .rt-vehicle-choice button{
  min-height:0!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:12px;
  row-gap:2px;
  align-items:center;
  padding:14px 44px 14px 14px!important;
  border-radius:var(--rt-r-lg)!important;
}
.app.rt-light .rt-vehicle-choice button>*:first-child{grid-row:1 / span 3}
.app.rt-light .rt-vehicle-choice button>*:not(:first-child):not(i){grid-column:2;min-width:0}
.app.rt-light .rt-vehicle-choice button strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.app.rt-light .rt-vehicle-choice em{white-space:nowrap}
.app.rt-light .rt-vehicle-choice i{top:50%!important;right:14px!important;transform:translateY(-50%)}
/* Account bike row: long model names stop at two lines */
.app.rt-light .rt-account-bike-row strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.app.rt-light .rt-account-bike-row span{white-space:nowrap}
/* Promo validity line was #ddd on a white card */
.app.rt-light .promo-meta{color:var(--rt-muted)!important;font-weight:600!important;font-size:12px}

/* Build 175 — greeting shows the full name: at most 2 lines, never wider than the screen */
.app.rt-light .rt-home-member-welcome .rt-welcome-name{
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
  font-size:min(26px,7vw);
  line-height:1.08;
}

/* ==========================================================================
   Build 176 — popups & forms (sheets) + floating social button
   ========================================================================== */
/* sheet frame: rounder, grab handle, comfortable padding */
body.rt-light-theme .sheet{
  border:0!important;
  border-radius:28px 28px 0 0!important;
  padding:26px 20px calc(24px + env(safe-area-inset-bottom,0px))!important;
  background:#fff!important;
  box-shadow:0 -18px 50px rgba(20,12,14,.22)!important;
}
body.rt-light-theme .sheet::before{
  content:"";
  position:absolute;
  left:50%;top:9px;
  width:40px;height:4px;
  margin-left:-20px;
  border-radius:4px;
  background:#e6e0de;
}
body.rt-light-theme .sheet-close{
  top:16px!important;right:14px!important;
  width:36px!important;height:36px!important;
  border-radius:50%!important;
  background:#f4f1f0!important;
  color:var(--rt-ink-2)!important;
  font-size:22px!important;
  line-height:1!important;
}
body.rt-light-theme .sheet h2{font-size:26px!important;line-height:1.05!important;margin:4px 44px 8px 0!important;color:var(--rt-ink)!important}
body.rt-light-theme .sheet>#modalBody>p.muted:first-of-type,
body.rt-light-theme .sheet>#modalBody>h2+p{font-size:13.5px!important;line-height:1.45!important;margin:0 0 14px!important}
/* form fields like the login screen */
body.rt-light-theme .sheet .field{margin:12px 0!important}
body.rt-light-theme .sheet .field label{font-size:12px!important;font-weight:600!important;letter-spacing:.02em;color:var(--rt-ink-2)!important;transition:color .2s ease}
body.rt-light-theme .sheet .field:focus-within label{color:var(--rt-red-600)!important}
body.rt-light-theme .sheet .input,
body.rt-light-theme .sheet .select,
body.rt-light-theme .sheet .textarea,
body.rt-light-theme .sheet input:not([type="checkbox"]):not([type="radio"]),
body.rt-light-theme .sheet select,
body.rt-light-theme .sheet textarea{
  min-height:52px;
  border-radius:16px!important;
  border:1px solid var(--rt-line)!important;
  background:#faf8f7!important;
  font-size:16px!important;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
body.rt-light-theme .sheet .input:focus,
body.rt-light-theme .sheet input:focus,
body.rt-light-theme .sheet select:focus,
body.rt-light-theme .sheet textarea:focus{
  background:#fff!important;
  border-color:var(--rt-red-600)!important;
  box-shadow:0 0 0 4px rgba(185,37,54,.12)!important;
}
body.rt-light-theme .sheet .btn{min-height:52px!important;margin-top:8px}
body.rt-light-theme .sheet .card{border-radius:var(--rt-r-md)!important;box-shadow:none!important;border:1px solid var(--rt-line-2)!important;background:#fff!important}

/* one success pattern: red check badge that pops in, title, text, code box */
.sheet :is(.success-icon,.rt-rv2-success-icon,.rt-feedback-success-icon,.spin-icon){
  width:68px!important;height:68px!important;
  margin:6px auto 14px!important;
  display:grid!important;place-items:center!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#e0384c,#b92536)!important;
  color:#fff!important;
  font-size:0!important;
  box-shadow:0 0 0 8px var(--rt-red-50),0 14px 28px -10px rgba(185,37,54,.7)!important;
  animation:rtPopIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.sheet :is(.success-icon,.rt-rv2-success-icon,.rt-feedback-success-icon,.spin-icon) .rt-svg-icon{width:32px;height:32px;stroke-width:2.4}
.sheet .spin-icon.is-soft{background:linear-gradient(180deg,#f6c56a,#d9962c)!important;box-shadow:0 0 0 8px var(--rt-gold-50),0 14px 28px -10px rgba(168,122,28,.6)!important}
@keyframes rtPopIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.sheet :is(.spin-result,.rt-rv2-claim-success,.rt-feedback-success){text-align:center}
.sheet :is(.spin-result,.rt-rv2-claim-success,.rt-feedback-success) h2{margin:4px 0 6px!important}
.sheet .success-icon+h2{text-align:center;margin-right:0!important}
.sheet .success-icon~p{text-align:center}
#modal .rt-rv2-code{
  display:block;
  margin:16px 0!important;
  padding:16px!important;
  border-radius:18px!important;
  background:#faf6f6!important;
  border:1.5px dashed var(--rt-red-200)!important;
  text-align:center;
}
#modal .rt-rv2-code small{display:block!important;font-size:10px!important;font-weight:700!important;letter-spacing:.16em!important;color:var(--rt-muted)!important}
#modal .rt-rv2-code strong{display:block!important;margin-top:6px!important;font-family:var(--rt-font-display);font-size:28px!important;font-weight:700!important;letter-spacing:.06em!important;color:var(--rt-ink)!important}

/* social links now sit in the page (Home "Ikuti REV TORQ" + Akaun); the floating dock covered cards */
.rt-social-dock{display:none!important}
.app.rt-light .rt-social-chips{display:flex;flex-wrap:wrap;gap:8px}
.app.rt-light .rt-social-chips-account{margin:12px 0 4px}
.app.rt-light .rt-social-chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:42px;padding:6px 14px 6px 6px;
  border-radius:999px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--rt-line),var(--rt-shadow-sm);
  color:var(--rt-ink)!important;
  text-decoration:none!important;
  font-size:13px;
}
.app.rt-light .rt-social-chip strong{font-weight:600}
.app.rt-light .rt-social-chip-ic{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;
  border-radius:50%;
  font-weight:800;font-size:15px;line-height:1;
  color:#fff;background:#3e393f;
}
.app.rt-light .rt-social-chip.google .rt-social-chip-ic{background:#fff;color:#4285f4;box-shadow:inset 0 0 0 1px var(--rt-line)}
.app.rt-light .rt-social-chip.tiktok .rt-social-chip-ic{background:#111}
.app.rt-light .rt-social-chip.facebook .rt-social-chip-ic{background:#1877f2;font-family:Georgia,serif}
.app.rt-light .rt-social-chip.instagram .rt-social-chip-ic{background:linear-gradient(45deg,#f9a825,#e1306c 55%,#8e24aa)}
.app.rt-light .rt-social-chip.threads .rt-social-chip-ic{background:#111}
.app.rt-light .rt-social-chip:active{transform:scale(.96)}

/* Build 180 — notification ⋯ menu: only "Padam semua" is red; .section-title button painted both items red */
.app.rt-light .rt-notification-menu-wrap .rt-notification-menu button{color:var(--rt-ink);font-size:14px;font-weight:700;white-space:nowrap}
.app.rt-light .rt-notification-menu-wrap .rt-notification-menu button.danger{color:var(--rt-red-600)}

/* Build 178 — theme picker (Akaun > Tetapan lain > Tema) */
.rt-theme-options{display:grid;gap:10px;margin-top:6px}
.rt-theme-option{
  position:relative;display:flex;align-items:center;gap:14px;
  min-height:60px;padding:10px 44px 10px 12px;
  border:0;border-radius:18px;
  background:#faf8f7;box-shadow:inset 0 0 0 1px var(--rt-line);
  color:var(--rt-ink);text-align:left;font:inherit;font-size:15px;
}
.rt-theme-option.active{box-shadow:inset 0 0 0 2px var(--rt-red-600);background:var(--rt-red-50)}
.rt-theme-option i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--rt-red-600);font-weight:700}
.rt-theme-swatch{width:40px;height:40px;flex:0 0 40px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.rt-theme-swatch.light{background:linear-gradient(135deg,#fff 50%,#f1ecea 50%)}
.rt-theme-swatch.dark{background:linear-gradient(135deg,#1d191a 50%,#100d0e 50%)}
.rt-theme-swatch.auto{background:linear-gradient(135deg,#fff 50%,#1d191a 50%)}
html[data-theme="dark"] .rt-theme-option{background:#151213;color:var(--rt-ink)}
html[data-theme="dark"] .rt-theme-option.active{background:rgba(236,77,96,.13)}

/* ==========================================================================
   MOTION — premium feel (all disabled under prefers-reduced-motion)
   ========================================================================== */

/* Unified press state for anything tappable */
.app.rt-light :is(.btn,.pill-btn,button.card,.rt-prime-quick-grid>button,.rt-simple-rider-card,.rt-prime-mileage-button,.rt-prime-checkin-cta,.rt-prime-bike-main,.rt-smart-home-button,.rt-notification-card,.rt-v2-promo-copy>button),
.modal :is(.btn,.pill-btn){
  transition:transform var(--rt-dur-1) var(--rt-ease),box-shadow var(--rt-dur-2) var(--rt-ease),background-color var(--rt-dur-2) ease,opacity var(--rt-dur-2) ease;
  -webkit-tap-highlight-color:transparent;
}
.app.rt-light :is(.btn,.pill-btn,button.card,.rt-prime-quick-grid>button,.rt-simple-rider-card,.rt-prime-mileage-button,.rt-prime-checkin-cta,.rt-prime-bike-main,.rt-smart-home-button,.rt-notification-card,.rt-v2-promo-copy>button):active:not(:disabled),
.modal :is(.btn,.pill-btn):active:not(:disabled){transform:scale(.97)!important}
/* containers holding buttons should not shrink as a whole */
.app.rt-light section.card:active{transform:none!important}

/* Tab change: content glides in from the side of the tapped tab */
.app.rt-light .screen.rt-enter-fwd{animation:rtEnterFwd var(--rt-dur-3) var(--rt-ease-out) both}
.app.rt-light .screen.rt-enter-back{animation:rtEnterBack var(--rt-dur-3) var(--rt-ease-out) both}
.app.rt-light .screen.rt-enter-fade{animation:rtEnterFade var(--rt-dur-3) var(--rt-ease-out) both}
@keyframes rtEnterFwd{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:none}}
@keyframes rtEnterBack{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:none}}
@keyframes rtEnterFade{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* First paint of Home: sections rise in, lightly staggered (delay set per element by premium-motion.js) */
.app.rt-light .screen>.rt-rise{animation:rtRise .5s var(--rt-ease-out) both}
@keyframes rtRise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

/* Images fade in over a shimmer instead of popping */
.app.rt-light .rt-v2-promo-hero{background-color:#1c1416}
.app.rt-light .rt-img-wait{opacity:0}
.app.rt-light .rt-img-ready{opacity:1;transition:opacity .45s var(--rt-ease)}

/* Skeleton shimmer */
.rt-skel-page{display:grid;gap:14px;padding-top:6px}
.rt-skel{
  position:relative;
  overflow:hidden;
  border-radius:var(--rt-r-md);
  background:#ebe6e4;
}
.rt-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:rtShimmer 1.25s ease-in-out infinite;
}
@keyframes rtShimmer{to{transform:translateX(100%)}}
.rt-skel-line{height:12px;border-radius:6px}
.rt-skel-title{height:30px;width:62%;border-radius:8px}
.rt-skel-eyebrow{height:10px;width:28%;border-radius:5px}
.rt-skel-hero{height:132px;border-radius:var(--rt-r-lg)}
.rt-skel-card{height:84px;border-radius:var(--rt-r-lg)}
.rt-skel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rt-skel-row .rt-skel{height:70px;border-radius:var(--rt-r-md)}

/* Confetti burst (check-in / claim) */
.rt-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.rt-confetti i{
  position:absolute;
  width:8px;height:12px;
  border-radius:2px;
  will-change:transform,opacity;
}

/* Points pop when they change */
.app.rt-light .rt-member-points-value.rt-bump{animation:rtBump .5s var(--rt-ease-spring)}
@keyframes rtBump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .app.rt-light .rt-simple-rider-card::after,
  .app.rt-light .rt-rider-progress i b,
  .app.rt-light .rt-service-progress::after,
  .app.rt-light .rt-service-progress .active span::after,
  .app.rt-light .rt-onboarding .rt-progress span,
  .app.rt-light .screen.rt-enter-fwd,
  .app.rt-light .screen.rt-enter-back,
  .app.rt-light .screen.rt-enter-fade,
  .app.rt-light .screen>.rt-rise,
  .app.rt-light .rt-member-points-value.rt-bump,
  .rt-skel::after{animation:none!important}
  .app.rt-light .rt-img-wait{opacity:1}
  .app.rt-light :is(.btn,.pill-btn,button.card,.rt-prime-quick-grid>button,.rt-simple-rider-card):active{transform:none!important}
}

/* ---------- Small phones ---------- */
@media (max-width:380px){
  .app.rt-light .rt-prime-checkin-title small{letter-spacing:.08em!important;white-space:nowrap}
  .app.rt-light .screen h1{font-size:30px}
  .app.rt-light .rt-simple-points-copy strong{font-size:34px!important}
  .app.rt-light .rt-simple-rider-right strong{font-size:24px!important}
  .app.rt-light .rt-prime-quick-grid{gap:7px!important}
  .app.rt-light .rt-prime-quick-grid>button{min-height:96px!important}
  .app.rt-light .rt-prime-quick-icon{width:42px!important;height:42px!important}
  .app.rt-light .rt-prime-quick-grid strong{font-size:10.5px!important}
}