:root {
  --rh-blue: #0b3d91;
  --rh-blue-soft: #e8f0ff;
  --rh-yellow: #f5c400;
  --rh-yellow-deep: #e6b000;
  --ink: #10233f;
  --muted: #64748b;
  --line: #e8edf5;
  --bg: #f3f6fb;
  --card: #ffffff;
  --danger: #ef4444;
  --radius: 18px;
  --shadow: 0 8px 24px rgba(11, 61, 145, 0.07);
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --side-w: 248px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

#web-shell {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
}
#web-side {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 18px 14px 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
}
#web-frame {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#web-chrome { flex: none; z-index: 20; }
#web-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 22px 28px;
}
#web-main #phone {
  width: 100%;
  max-width: none;
  margin: 0;
  height: auto;
  min-height: 100%;
}

body.rl-boot #web-shell {
  grid-template-columns: 1fr;
}
body.rl-boot #web-side { display: none !important; }
body.rl-boot #web-main { padding: 0; }
body.rl-boot #web-main #phone { max-width: none; }

/* Sidebar */
.rl-side-brand {
  padding: 6px 10px 16px;
  display: grid;
  gap: 4px;
}
.rl-side-brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.rl-side-brand small {
  font-size: 11px;
  font-weight: 700;
  color: var(--rh-blue);
  letter-spacing: -0.01em;
  opacity: 0.85;
}
.rl-side-nav {
  display: grid;
  gap: 2px;
}
.rl-side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 650;
  color: #334155;
  text-align: left;
  transition: background .15s, color .15s;
}
.rl-side-link .ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  color: var(--rh-blue);
  flex: none;
}
.rl-side-link .ico svg { width: 17px; height: 17px; }
.rl-side-link:hover { background: #f8fafc; color: var(--rh-blue); }
.rl-side-link.on {
  background: var(--rh-blue-soft);
  color: var(--rh-blue);
  font-weight: 750;
}
.rl-side-link.on .ico {
  background: #fff;
  box-shadow: 0 4px 10px rgba(11, 61, 145, 0.1);
}
.rl-side-rule {
  height: 1px;
  background: var(--line);
  margin: 10px 8px;
}
.rl-side-label {
  margin: 2px 12px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Top header */
.rl-top {
  display: grid;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr) auto !important;
  gap: 14px;
  align-items: center;
  padding: 14px 22px 10px;
  background: transparent;
}
.rl-loc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}
.rl-loc .pin { color: var(--rh-blue); flex: none; display: grid; place-items: center; }
.rl-loc .pin svg { width: 18px; height: 18px; }
.rl-loc > span:not(.pin):not(.chev) {
  flex: 1;
  min-width: 0;
}
.rl-loc small {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.1;
}
.rl-loc b {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--rh-blue) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: none !important;
  word-break: break-word !important;
}
.rl-loc .chev { margin-left: auto; flex: none; color: var(--muted); display: grid; }
.rl-loc .chev svg { width: 16px; height: 16px; }

.rl-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}
.rl-search svg { color: #94a3b8; width: 18px; height: 18px; flex: none; }
.rl-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
}
.rl-search input::placeholder { color: #94a3b8; font-weight: 500; }
.rl-search:focus-within {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(47, 108, 245, 0.12);
}

.rl-actions { display: flex; align-items: center; gap: 10px; }
.rl-icon-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--rh-blue);
}
.rl-icon-btn svg { width: 19px; height: 19px; }
.rl-icon-btn:hover { background: var(--rh-blue-soft); }
.rl-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--danger);
  box-shadow: 0 0 0 2px #fff;
}
.rl-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--rh-blue);
  color: #fff;
  font-weight: 750;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(11, 61, 145, 0.25);
}
.rl-login svg { width: 16px; height: 16px; }
.rl-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
}
.rl-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2f6cf5, #0b3d91);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.rl-user-copy { text-align: left; line-height: 1.15; }
.rl-user-copy small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.rl-user-copy b { display: block; font-size: 14px; color: var(--rh-blue); font-weight: 800; }
.rl-user .chev { color: var(--muted); }
.rl-user .chev svg { width: 16px; height: 16px; }

.rl-chips-wrap {
  padding: 4px 22px 12px;
}
.rl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rl-chip {
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rl-chip:hover { color: var(--rh-blue); border-color: #bfdbfe; }
.rl-chip.on {
  background: var(--rh-blue);
  border-color: var(--rh-blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(11, 61, 145, 0.22);
}
.rl-chip-more { letter-spacing: 1px; min-width: 42px; flex: none; }
.rl-mod-pop {
  position: fixed;
  z-index: 80;
  width: min(460px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  padding: 12px;
}
.rl-mod-pop[hidden] { display: none !important; }
.rl-mod-pop-title {
  margin: 0 4px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.rl-mod-pop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.rl-mod-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #f8fafc;
  color: #1e293b;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}
.rl-mod-pop-item .ico {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--rh-blue);
  flex: none;
}
.rl-mod-pop-item .ico svg { width: 18px; height: 18px; }
.rl-mod-pop-item:hover { background: #eff6ff; border-color: #bfdbfe; }
.rl-mod-pop-item.on { background: var(--rh-blue); color: #fff; }
.rl-mod-pop-item.on .ico { color: #fff; }

/* Desktop home dashboard polish */
html.rl-desktop:not(.rl-compact) #phone .screen.auth-mode:has(.rh-body),
html.rl-desktop:not(.rl-compact) body.rl-home #phone .screen,
html.rl-desktop:not(.rl-compact) #phone .screen:has(.hd.rlx) {
  padding: 0 0 24px !important;
  max-width: none !important;
}
/* Services (home) must never collapse to a blank white pane on desktop. */
html.rl-desktop:not(.rl-compact) body.rl-home #web-main {
  overflow: auto !important;
  background: #f4f7fb;
}
html.rl-desktop:not(.rl-compact) body.rl-home #web-main #phone.phone,
html.rl-desktop:not(.rl-compact) body.rl-home #web-main #phone {
  height: auto !important;
  min-height: 70vh !important;
  overflow: visible !important;
  display: block !important;
  background: #f4f7fb !important;
}
html.rl-desktop:not(.rl-compact) body.rl-home #phone .screen {
  height: auto !important;
  min-height: 70vh !important;
  overflow: visible !important;
  flex: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #f4f7fb !important;
}
html.rl-desktop:not(.rl-compact) body.rl-home #phone .hd.rlx,
html.rl-desktop:not(.rl-compact) body.rl-home #phone .rlx-mosaic {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 240px;
}
html.rl-desktop:not(.rl-compact) #phone .rh-lock {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-body {
  background: transparent !important;
  padding: 0 !important;
  display: grid;
  gap: 8px;
}
html.rl-desktop:not(.rl-compact) #phone .rh-promos {
  margin: 0 0 10px !important;
  position: relative !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-promos .promo-track {
  display: flex !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-promos .promo-track::-webkit-scrollbar { display: none !important; }
html.rl-desktop:not(.rl-compact) #phone .rh-banner {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  scroll-snap-align: start !important;
  display: block !important;
  min-height: 240px !important;
  border-radius: 24px !important;
  padding: 36px 40px !important;
  text-align: left !important;
  border: 0 !important;
  background:
    linear-gradient(105deg, rgba(8, 28, 68, 0.82) 0%, rgba(11, 61, 145, 0.42) 48%, rgba(11, 61, 145, 0.12) 100%),
    var(--rh-banner-img) center / cover no-repeat,
    linear-gradient(135deg, #1d4ed8, #0b3d91) !important;
  box-shadow: 0 18px 40px rgba(11, 61, 145, 0.16) !important;
  color: #fff;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner.tone-food {
  background:
    linear-gradient(105deg, rgba(67, 32, 8, 0.78) 0%, rgba(180, 83, 9, 0.35) 50%, rgba(180, 83, 9, 0.08) 100%),
    var(--rh-banner-img) center / cover no-repeat !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner.tone-ride {
  background:
    linear-gradient(105deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 64, 175, 0.4) 50%, rgba(30, 64, 175, 0.1) 100%),
    var(--rh-banner-img) center / cover no-repeat !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner.tone-grocery {
  background:
    linear-gradient(105deg, rgba(20, 83, 45, 0.78) 0%, rgba(22, 163, 74, 0.35) 50%, rgba(22, 163, 74, 0.08) 100%),
    var(--rh-banner-img) center / cover no-repeat !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner.tone-shop {
  background:
    linear-gradient(105deg, rgba(76, 29, 149, 0.78) 0%, rgba(124, 58, 237, 0.35) 50%, rgba(124, 58, 237, 0.08) 100%),
    var(--rh-banner-img) center / cover no-repeat !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner.tone-pharmacy {
  background:
    linear-gradient(105deg, rgba(19, 78, 74, 0.8) 0%, rgba(20, 184, 166, 0.35) 50%, rgba(20, 184, 166, 0.08) 100%),
    var(--rh-banner-img) center / cover no-repeat !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner-copy { max-width: 48% !important; display: grid !important; gap: 0 !important; }
html.rl-desktop:not(.rl-compact) #phone .rh-banner-copy b {
  font-size: 34px !important;
  line-height: 1.12 !important;
  color: #fff !important;
  letter-spacing: -0.035em !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner-copy b span { color: var(--rh-yellow) !important; }
html.rl-desktop:not(.rl-compact) #phone .rh-banner-copy p {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 42ch;
  margin: 10px 0 18px !important;
  font-weight: 600 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner-cta {
  display: inline-flex !important;
  width: fit-content !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: var(--rh-yellow) !important;
  color: #1f2937 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner-badge {
  position: absolute !important;
  width: 78px !important;
  height: 78px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  top: 22px !important;
  right: 22px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  line-height: 1.15 !important;
  background: var(--rh-yellow) !important;
  color: #1f2937 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-promos .promo-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-promos .promo-dots button {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
  padding: 0 !important;
  border: 0 !important;
  transition: width .2s, background .2s;
}
html.rl-desktop:not(.rl-compact) #phone .rh-promos .promo-dots button.on {
  width: 22px !important;
  background: #0b3d91 !important;
}

html.rl-desktop:not(.rl-compact) #phone .svc-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 8px 0 18px !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-tile {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(118px, 1fr) auto !important;
  align-items: stretch !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
  gap: 0 !important;
  min-height: 188px !important;
  transition: transform .15s, box-shadow .15s;
}
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-food { background: linear-gradient(180deg, #fffaf2, #ffe8c2) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-taxi { background: linear-gradient(180deg, #f5f9ff, #dce9ff) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-flight { background: linear-gradient(180deg, #f0f7ff, #dbeafe) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-hotel { background: linear-gradient(180deg, #fff5f7, #ffe4e9) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-bills { background: linear-gradient(180deg, #f0fdf4, #dcfce7) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-groc { background: linear-gradient(180deg, #fffaf0, #ffe8c2) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-mall { background: linear-gradient(180deg, #f7faff, #e7f0ff) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-svc { background: linear-gradient(180deg, #f5f3ff, #e0e7ff) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-parcel { background: linear-gradient(180deg, #f5f9ff, #e3eefc) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-gift { background: linear-gradient(180deg, #fff7ed, #ffedd5) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-pharm { background: linear-gradient(180deg, #f0fdfa, #ccfbf1) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-prop { background: linear-gradient(180deg, #fff1f2, #ffe4e6) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-vehicle { background: linear-gradient(180deg, #eff6ff, #dbeafe) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-jobs { background: linear-gradient(180deg, #f3fbf6, #dcfce7) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-more { background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important; }
html.rl-desktop:not(.rl-compact) #phone .svc-media {
  display: block !important;
  width: 100% !important;
  min-height: 118px !important;
  overflow: hidden !important;
  background: transparent !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 118px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-media--collage {
  display: grid !important;
  place-items: stretch !important;
  background: #eef2f7 !important;
  padding: 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-more-collage {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 102px !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-more-collage img {
  width: 100% !important;
  height: 100% !important;
  min-height: 48px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-copy {
  display: grid !important;
  gap: 2px !important;
  padding: 10px 12px 12px !important;
  background: rgba(255,255,255,0.72) !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-ico {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-card,
html.rl-desktop:not(.rl-compact) #phone .pop-card {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  text-align: left !important;
  overflow: hidden !important;
  padding: 0 0 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-media,
html.rl-desktop:not(.rl-compact) #phone .pop-media {
  display: block !important;
  background: #f1f5f9 !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-media img,
html.rl-desktop:not(.rl-compact) #phone .pop-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-body,
html.rl-desktop:not(.rl-compact) #phone .pop-body {
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-go {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  border-radius: 999px !important;
  background: var(--rh-yellow) !important;
  color: #1f2937 !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-card {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  padding: 0 0 12px !important;
  overflow: hidden !important;
  text-align: left !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-hit {
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
  text-align: left !important;
  padding: 0 12px 8px !important;
  border: 0 !important;
  background: transparent !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-media {
  display: block !important;
  width: calc(100% + 24px) !important;
  margin: 0 -12px 4px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-add {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  border-radius: 8px !important;
  background: var(--rh-yellow) !important;
  color: #1f2937 !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 800 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner-cta {
  display: inline-flex !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
  background: var(--rh-yellow) !important;
  border-radius: 999px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-banner-badge {
  position: absolute !important;
  border-radius: 999px !important;
  background: var(--rh-yellow) !important;
  color: #1f2937 !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(11, 61, 145, 0.14);
}
html.rl-desktop:not(.rl-compact) #phone .svc-lab {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-copy small {
  font-size: 11px !important;
  font-weight: 650 !important;
  color: #64748b !important;
  line-height: 1.25 !important;
}

html.rl-desktop:not(.rl-compact) #phone .rh-sec {
  padding: 14px 0 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-sec h2 {
  font-size: 22px !important;
  font-family: var(--display);
}
html.rl-desktop:not(.rl-compact) #phone .rh-hscroll {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px !important;
  overflow: visible !important;
  padding: 0 0 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-hscroll.rh-offers,
html.rl-desktop:not(.rl-compact) #phone .rh-hscroll.rh-pop,
html.rl-desktop:not(.rl-compact) #phone .rh-hscroll.rh-rec {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html.rl-desktop:not(.rl-compact) #phone .offer-card,
html.rl-desktop:not(.rl-compact) #phone .pop-card,
html.rl-desktop:not(.rl-compact) #phone .rec-card {
  width: auto !important;
  flex: none !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-media,
html.rl-desktop:not(.rl-compact) #phone .pop-media {
  height: 140px !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-body,
html.rl-desktop:not(.rl-compact) #phone .pop-body {
  padding: 14px 16px 8px !important;
  min-height: 88px !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-body b,
html.rl-desktop:not(.rl-compact) #phone .pop-body b {
  font-size: 16px !important;
}
html.rl-desktop:not(.rl-compact) #phone .offer-go,
html.rl-desktop:not(.rl-compact) #phone .rec-add {
  width: 34px !important;
  height: 34px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-media {
  height: 140px !important;
  font-size: 0 !important;
  border-radius: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-card b {
  font-size: 15px !important;
  color: #0f172a !important;
  padding-right: 36px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-meta {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-meta i {
  color: #f59e0b !important;
  font-style: normal !important;
}
html.rl-desktop:not(.rl-compact) #phone .rec-card strong {
  font-size: 15px !important;
  color: #0b3d91 !important;
}

html.rl-desktop:not(.rl-compact) #phone .home-live {
  margin: 0 0 12px;
}

@media (max-width: 1500px) {
  html.rl-desktop:not(.rl-compact) #phone .svc-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1360px) {
  :root { --side-w: 84px; }
  #web-side {
    padding: 14px 8px 20px;
  }
  .rl-side-brand {
    padding: 4px 4px 12px;
    justify-items: center;
  }
  .rl-side-brand img {
    height: 28px;
  }
  .rl-side-brand small { display: none; }
  .rl-side-link {
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    font-size: 10px;
    text-align: center;
    line-height: 1.15;
  }
  .rl-side-link .ico {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .rl-side-link .ico svg { width: 16px; height: 16px; }
  .rl-side-rule { margin: 8px 4px; }
  html.rl-desktop:not(.rl-compact) #phone .svc-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .rh-hscroll.rh-offers,
  html.rl-desktop:not(.rl-compact) #phone .rh-hscroll.rh-pop,
  html.rl-desktop:not(.rl-compact) #phone .rh-hscroll.rh-rec {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .rh-banner {
    min-height: 180px !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .rh-banner-copy { max-width: 58% !important; }
  html.rl-desktop:not(.rl-compact) #phone .rh-banner-copy b {
    font-size: clamp(22px, 2.2vw, 28px) !important;
  }
}

/* Food marketplace — full layout on desktop */
html.rl-desktop:not(.rl-compact) body.rl-food #web-main { padding-right: 18px; }
html.rl-desktop:not(.rl-compact) #phone .screen:has(.food-desk) {
  max-width: none !important;
  padding: 0 0 24px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-desk {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
html.rl-desktop:not(.rl-compact) #phone .food-main { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; min-width: 0; }
html.rl-desktop:not(.rl-compact) #phone .food-dish-grid,
html.rl-desktop:not(.rl-compact) #phone .food-rest-grid,
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid,
html.rl-desktop:not(.rl-compact) #phone .store-cat-rail,
html.rl-desktop:not(.rl-compact) #phone .food-dish,
html.rl-desktop:not(.rl-compact) #phone .food-rest,
html.rl-desktop:not(.rl-compact) #phone .mod-card {
  min-width: 0 !important;
  max-width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  min-height: 220px !important;
  padding: 36px 40px !important;
  border-radius: 24px !important;
  color: #fff !important;
  overflow: hidden !important;
  background-color: #0b3d91 !important;
  background-image:
    linear-gradient(105deg, rgba(8,28,68,0.88) 0%, rgba(11,61,145,0.55) 48%, rgba(11,61,145,0.2) 100%),
    var(--food-hero-img) !important;
  background-size: cover, cover !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 16px 36px rgba(11, 61, 145, 0.18) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-hero-copy { display: grid !important; gap: 8px !important; max-width: 46% !important; }
html.rl-desktop:not(.rl-compact) #phone .food-hero-tag {
  display: inline-flex !important;
  width: fit-content !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
  background: #f5c400 !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-hero-copy b {
  font-size: 34px !important;
  line-height: 1.12 !important;
  color: #fff !important;
  letter-spacing: -0.035em !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-hero-copy p {
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-hero-cta {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 6px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #1f2937 !important;
  background: #f5c400 !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-hero-badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 86px !important;
  height: 86px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: #0b3d91 !important;
  border: 3px solid #f5c400 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-cuisines {
  display: flex !important;
  gap: 10px !important;
  overflow: auto !important;
  scrollbar-width: none;
}
html.rl-desktop:not(.rl-compact) #phone .food-cuisine {
  flex: none !important;
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  min-width: 76px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-cuisine-ico {
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  background: #fff !important;
  border: 2px solid #e8edf5 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-cuisine-ico img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-cuisine.on { color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-cuisine.on .food-cuisine-ico {
  border-color: #0b3d91 !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.18) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-sec-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-sec-head h2 {
  margin: 0 !important;
  font-size: 22px !important;
  color: #0b3d91 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-sec-head button { color: #0b3d91 !important; font-weight: 750 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-filters { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
html.rl-desktop:not(.rl-compact) #phone .food-filter {
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-filter.on {
  background: #0b3d91 !important;
  border-color: #0b3d91 !important;
  color: #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-media {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-photo,
html.rl-desktop:not(.rl-compact) #phone .food-rest-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-emoji { display: none !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rest-logo {
  position: absolute !important;
  left: 10px !important;
  bottom: -14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border: 2px solid #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-fav {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.92) !important;
  color: #94a3b8 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-fav.on { color: #ef4444 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rest-body {
  padding: 20px 12px 12px !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rest-body b { color: #0b3d91 !important; font-size: 14px !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rest-meta { font-size: 12px !important; color: #64748b !important; font-weight: 600 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rest-meta i { color: #f59e0b !important; font-style: normal !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rest-cta {
  margin-top: 8px !important;
  width: 100% !important;
  border-radius: 999px !important;
  background: #f5c400 !important;
  color: #1f2937 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-grid.store-cat-rail-grid.cols-4,
html.rl-desktop:not(.rl-compact) #phone .food-dish-grid.store-cat-rail-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-media {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  font-size: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  background: transparent !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-flash-head h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-flash-ico {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #fef3c7 !important;
  font-size: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-flash-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .ride-flash-grid,
html.rl-desktop:not(.rl-compact) #phone .flight-flash-grid,
html.rl-desktop:not(.rl-compact) #phone .hotel-flash-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-navy .food-sec-head h2,
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-navy .mod-sec h2 { color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-navy .food-sec-head button { color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-rose .food-sec-head h2,
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-rose .mod-sec h2 { color: #9f1239 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-rose .food-sec-head button { color: #9f1239 !important; }
html.rl-desktop:not(.rl-compact) #phone .flight-route-grid,
html.rl-desktop:not(.rl-compact) #phone .hotel-dest-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route.flight-route,
html.rl-desktop:not(.rl-compact) #phone .mod-route.hotel-dest {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  text-align: left !important;
}
html.rl-desktop:not(.rl-compact) #phone .flight-route-media,
html.rl-desktop:not(.rl-compact) #phone .hotel-dest-media {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #eff6ff !important;
  flex-shrink: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .hotel-dest-media {
  background: #ffe4e6 !important;
}
html.rl-desktop:not(.rl-compact) #phone .flight-route-media img,
html.rl-desktop:not(.rl-compact) #phone .hotel-dest-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .flight-route-copy,
html.rl-desktop:not(.rl-compact) #phone .hotel-dest-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route.flight-route:hover {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route.hotel-dest:hover {
  border-color: #fda4af !important;
  background: #fff1f2 !important;
}

/* Hotels booking strip — same pattern as flights */
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-book-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.75fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-book-grid > .stack {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-book-grid > .stack b {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-book-grid > .stack input,
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-book-grid > .stack select {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-field-go {
  margin: 0 !important;
  min-height: 46px !important;
  min-width: 128px !important;
  width: auto !important;
  white-space: nowrap !important;
  align-self: end !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  grid-column: auto !important;
}
@media (max-width: 900px) {
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-field-dest {
    grid-column: 1 / -1 !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--hotels .hotel-field-go {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}
html.rl-desktop:not(.rl-compact) #phone .food-flash-grid .food-dish.is-deal {
  border-color: #fde68a !important;
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.12) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-badge {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  z-index: 1 !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 5px 7px !important;
  border-radius: 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-old {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  margin-left: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-row strong + .food-dish-old,
html.rl-desktop:not(.rl-compact) #phone .food-dish-row {
  flex-wrap: wrap !important;
  gap: 2px 6px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rec-grid .food-dish {
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-empty {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #64748b !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-fav {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.92) !important;
  color: #94a3b8 !important;
  display: grid !important;
  place-items: center !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-fav.on { color: #ef4444 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-dish-body {
  position: relative !important;
  padding: 10px 10px 12px !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-body b {
  font-size: 13px !important;
  color: #0b3d91 !important;
  padding-right: 28px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 700 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-row strong { color: #0f172a !important; font-size: 14px !important; }
html.rl-desktop:not(.rl-compact) #phone .food-dish-row i { color: #f59e0b !important; font-style: normal !important; }
html.rl-desktop:not(.rl-compact) #phone .food-dish-add {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #f5c400 !important;
  color: #1f2937 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail {
  position: sticky !important;
  top: 8px !important;
  max-height: calc(100dvh - 140px) !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 22px !important;
  padding: 16px !important;
  display: grid !important;
  gap: 12px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-head h2 { margin: 0 !important; font-size: 18px !important; color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-head button { color: #ef4444 !important; font-size: 12px !important; font-weight: 750 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-list { display: grid !important; gap: 10px !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-item {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-copy { display: grid !important; gap: 2px !important; min-width: 0 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-copy b { font-size: 13px !important; color: #0f172a !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-copy small { color: #64748b !important; font-weight: 700 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  background: #f8fafc !important;
  border-radius: 999px !important;
  padding: 2px 6px !important;
  width: fit-content !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-step button {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 800 !important;
  color: #0b3d91 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-promo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  background: #f8fafc !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-promo input {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  width: 100% !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-promo button {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: #0b3d91 !important;
  color: #fff !important;
  font-weight: 800 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-sum { display: grid !important; gap: 8px !important; }
html.rl-desktop:not(.rl-compact) #phone .food-rail-sum > div {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-total {
  padding-top: 8px !important;
  border-top: 1px solid #eef2f7 !important;
  color: #0b3d91 !important;
  font-weight: 800 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-rail-total strong { font-size: 20px !important; color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .food-checkout {
  width: 100% !important;
  border-radius: 14px !important;
  background: #f5c400 !important;
  color: #1f2937 !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  padding: 14px 16px !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-eta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #e8f0ff !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-promo-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  text-align: left !important;
  background: linear-gradient(135deg, #fff7d6, #ffe08a) !important;
  color: #0b3d91 !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-promo-cta {
  background: #0b3d91 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
html.rl-desktop:not(.rl-compact) #phone .page-title:has(+ .food-desk),
html.rl-desktop:not(.rl-compact) #phone .home-head:has(+ .food-desk) {
  display: none;
}

@media (max-width: 1280px) {
  html.rl-desktop:not(.rl-compact) #phone .food-rest-grid,
  html.rl-desktop:not(.rl-compact) #phone .food-dish-grid,
  html.rl-desktop:not(.rl-compact) #phone .food-flash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .food-dish-grid.store-cat-rail-grid.cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .food-desk {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1099px) {
  /* Phone / tablet: shell chrome off — mobile Super App fills the viewport */
  #web-shell { grid-template-columns: 1fr; background: #fff; }
  #web-side,
  #web-chrome { display: none !important; }
  #web-main {
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
  }
}

/* Shared desktop module shells (Grocery → Bills) — unique tones, Food-style layout */
html.rl-desktop:not(.rl-compact) body.rl-mod #web-main { padding-right: 18px; }
html.rl-desktop:not(.rl-compact) #phone .screen:has(.mod-desk) {
  max-width: none !important;
  padding: 0 0 24px !important;
}
html.rl-desktop:not(.rl-compact) #phone .page-title:has(+ .mod-desk),
html.rl-desktop:not(.rl-compact) #phone .home-head:has(+ .mod-desk),
html.rl-desktop:not(.rl-compact) #phone .module-nav:has(+ .mod-desk),
html.rl-desktop:not(.rl-compact) #phone .deliver:has(+ .mod-desk),
html.rl-desktop:not(.rl-compact) #phone .searchbar:has(+ .mod-desk) {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
html.rl-desktop:not(.rl-compact) #phone .mod-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  min-width: 0;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  min-height: 220px !important;
  padding: 36px 40px !important;
  border-radius: 24px !important;
  color: #fff !important;
  overflow: hidden !important;
  background-color: #0b3d91 !important;
  background-image:
    linear-gradient(105deg, rgba(8,28,68,0.88) 0%, rgba(11,61,145,0.5) 48%, rgba(11,61,145,0.18) 100%),
    var(--mod-hero-img) !important;
  background-size: cover, cover !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-green {
  background-color: #166534 !important;
  background-image:
    linear-gradient(105deg, rgba(20,83,45,0.9) 0%, rgba(22,163,74,0.45) 50%, rgba(22,163,74,0.15) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-teal {
  background-color: #0f766e !important;
  background-image:
    linear-gradient(105deg, rgba(19,78,74,0.9) 0%, rgba(20,184,166,0.4) 50%, rgba(20,184,166,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-violet {
  background-color: #5b21b6 !important;
  background-image:
    linear-gradient(105deg, rgba(76,29,149,0.9) 0%, rgba(124,58,237,0.45) 50%, rgba(124,58,237,0.15) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-amber {
  background-color: #b45309 !important;
  background-image:
    linear-gradient(105deg, rgba(120,53,15,0.9) 0%, rgba(245,158,11,0.4) 50%, rgba(245,158,11,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-sky {
  background-color: #0369a1 !important;
  background-image:
    linear-gradient(105deg, rgba(12,74,110,0.9) 0%, rgba(14,165,233,0.4) 50%, rgba(14,165,233,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-indigo {
  background-color: #3730a3 !important;
  background-image:
    linear-gradient(105deg, rgba(49,46,129,0.9) 0%, rgba(99,102,241,0.4) 50%, rgba(99,102,241,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-navy {
  background-color: #0b3d91 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-rose {
  background-color: #9f1239 !important;
  background-image:
    linear-gradient(105deg, rgba(136,19,55,0.9) 0%, rgba(244,63,94,0.4) 50%, rgba(244,63,94,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-emerald {
  background-color: #047857 !important;
  background-image:
    linear-gradient(105deg, rgba(6,78,59,0.9) 0%, rgba(16,185,129,0.4) 50%, rgba(16,185,129,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero.tone-orange {
  background-color: #c2410c !important;
  background-image:
    linear-gradient(105deg, rgba(154,52,18,0.9) 0%, rgba(249,115,22,0.4) 50%, rgba(249,115,22,0.12) 100%),
    var(--mod-hero-img) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy {
  display: grid !important;
  gap: 8px !important;
  max-width: min(48%, 34rem) !important;
}
@media (max-width: 1180px) {
  html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy {
    max-width: min(58%, 36rem) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy b {
    font-size: clamp(22px, 2.4vw, 30px) !important;
  }
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero-tag {
  display: inline-flex !important;
  width: fit-content !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
  background: #f5c400 !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy b {
  font-size: 32px !important;
  line-height: 1.12 !important;
  color: #fff !important;
  letter-spacing: -0.03em !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy p {
  margin: 0 !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero-cta {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 6px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #1f2937 !important;
  background: #f5c400 !important;
  border-radius: 999px !important;
  padding: 11px 18px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-hero-badge {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 86px !important;
  height: 86px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: rgba(15, 23, 42, 0.55) !important;
  border: 3px solid #f5c400 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-cats {
  display: flex !important;
  gap: 10px !important;
  overflow: auto !important;
  scrollbar-width: none;
  padding-bottom: 2px;
}
html.rl-desktop:not(.rl-compact) #phone .mod-cat {
  flex: none !important;
  display: grid !important;
  justify-items: center !important;
  gap: 6px !important;
  min-width: 76px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: transparent !important;
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-cat-ico {
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  background: #fff !important;
  border: 2px solid #e8edf5 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-cat-ico img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-cat.on { color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-cat.on .mod-cat-ico {
  border-color: #0b3d91 !important;
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.16) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-green .mod-cat.on { color: #166534 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-green .mod-cat.on .mod-cat-ico { border-color: #16a34a !important; background: #dcfce7 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-teal .mod-cat.on { color: #0f766e !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-teal .mod-cat.on .mod-cat-ico { border-color: #14b8a6 !important; background: #ccfbf1 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-violet .mod-cat.on { color: #5b21b6 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-violet .mod-cat.on .mod-cat-ico { border-color: #7c3aed !important; background: #ede9fe !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-indigo .mod-cat.on { color: #3730a3 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-indigo .mod-cat.on .mod-cat-ico { border-color: #4f46e5 !important; background: #e0e7ff !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .mod-cat.on { color: #c2410c !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .mod-cat.on .mod-cat-ico { border-color: #f97316 !important; background: #ffedd5 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-sec {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-sec h2 {
  margin: 0 !important;
  font-size: 22px !important;
  color: #0b3d91 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-green .mod-sec h2 { color: #166534 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-teal .mod-sec h2 { color: #0f766e !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-violet .mod-sec h2 { color: #5b21b6 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-amber .mod-sec h2 { color: #b45309 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .mod-sec h2 { color: #0369a1 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .food-sec-head h2 { color: #0369a1 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .food-sec-head button { color: #0369a1 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .mod-cat.on { color: #0369a1 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .mod-cat.on .mod-cat-ico {
  border-color: #0ea5e9 !important;
  background: #e0f2fe !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-parcel-cats {
  margin: 0 0 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.parcel-book {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
  align-items: end !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.parcel-book .parcel-field-note {
  grid-column: 1 / -1 !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-flash-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-route-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route.parcel-route {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  text-align: left !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route.parcel-route:hover {
  border-color: #7dd3fc !important;
  background: #f0f9ff !important;
  transform: translateY(-1px) !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-route-media {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #e0f2fe !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-route-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-route-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-route-copy b {
  font-size: 13px !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}
html.rl-desktop:not(.rl-compact) #phone .parcel-route-copy small {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0369a1 !important;
}
@media (max-width: 1100px) {
  html.rl-desktop:not(.rl-compact) #phone .parcel-flash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .parcel-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-indigo .mod-sec h2 { color: #3730a3 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-rose .mod-sec h2 { color: #9f1239 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-emerald .mod-sec h2 { color: #047857 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .mod-sec h2 { color: #c2410c !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-sec button { color: inherit !important; font-weight: 750 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-store-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-store {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-store-media {
  display: block !important;
  width: 100% !important;
  height: 126px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-store-photo,
html.rl-desktop:not(.rl-compact) #phone .mod-store-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-store-emoji { display: none !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-store-body {
  padding: 12px !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-store-body b { color: #0f172a !important; font-size: 14px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-store-meta { font-size: 12px !important; color: #64748b !important; font-weight: 600 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-store-meta i { color: #f59e0b !important; font-style: normal !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-store-cta {
  margin-top: 8px !important;
  width: 100% !important;
  border-radius: 999px !important;
  background: #f5c400 !important;
  color: #1f2937 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid {
  display: grid !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-4,
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-5,
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-6 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card {
  position: relative !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-media {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  font-size: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  background: transparent !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-off {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
  background: #fff7ed !important;
  color: #ea580c !important;
  border: 1px solid #fdba74 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-fav {
  position: absolute !important;
  top: auto !important;
  bottom: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.92) !important;
  color: #94a3b8 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2 !important;
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-fav.on { color: #ef4444 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-card-body {
  position: relative !important;
  padding: 10px 10px 12px !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-body b {
  font-size: 13px !important;
  color: #0f172a !important;
  padding-right: 28px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-body small { color: #64748b !important; font-weight: 600 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-card-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 700 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-row strong { color: #0f172a !important; font-size: 14px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-card-row i { color: #f59e0b !important; font-style: normal !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-card-add {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #f5c400 !important;
  color: #1f2937 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-banner-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-mini-banner {
  text-align: left !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ecfeff, #ccfbf1) !important;
  border: 1px solid #99f6e4 !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-mini-banner.alt {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border-color: #fed7aa !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-mini-banner b { color: #0f172a !important; font-size: 16px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-mini-banner span { color: #64748b !important; font-weight: 600 !important; font-size: 13px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-panel {
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 20px !important;
  padding: 18px !important;
  display: grid !important;
  gap: 12px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-field {
  display: grid !important;
  gap: 6px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-field span {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #64748b !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-field input,
html.rl-desktop:not(.rl-compact) #phone .mod-panel .stack input,
html.rl-desktop:not(.rl-compact) #phone .mod-panel .stack select {
  width: 100% !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 650 !important;
  background: #f8fafc !important;
}

/* Flights booking strip — clean aligned columns */
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights > .seg,
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights > .trip-seg {
  grid-column: 1 / -1 !important;
  width: max-content !important;
  max-width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) 40px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 0.85fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid.is-round {
  grid-template-columns: minmax(0, 1.2fr) 40px minmax(0, 1.2fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .stack {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .stack b {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-swap {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 999px !important;
  border: 1px solid #dbe3ef !important;
  background: #fff !important;
  color: #0b3d91 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 0 2px !important;
  align-self: end !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-go {
  margin: 0 !important;
  min-height: 46px !important;
  min-width: 128px !important;
  width: auto !important;
  white-space: nowrap !important;
  align-self: end !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  grid-column: auto !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .stack input,
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .stack select {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .flight-top,
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .pair,
html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid > .desk-dates {
  display: contents !important;
}
@media (max-width: 900px) {
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-book-grid.is-round {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-depart,
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-return,
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-pax,
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-cabin {
    grid-column: span 1 !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-depart { grid-column: 1 / 2 !important; }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-return { grid-column: 3 / 4 !important; }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-pax { grid-column: 1 / 2 !important; }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-cabin { grid-column: 3 / 4 !important; }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-swap {
    justify-self: center !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-panel.desk-book--flights .flight-field-go {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}
/* Book your flight — desktop split layout */
html.rl-desktop:not(.rl-compact) #phone .fb-page {
  padding: 0 4px 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.78fr) !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-main {
  display: grid !important;
  gap: 14px !important;
  padding: 0 !important;
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-side {
  display: block !important;
  position: sticky !important;
  top: 12px !important;
  align-self: start !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-pay-mobile {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-hero {
  padding: 20px !important;
  border-radius: 24px !important;
  gap: 16px !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-hero-end b {
  font-size: 28px !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-block {
  padding: 16px 18px !important;
  border-radius: 22px !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-perks {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-form .pair {
  grid-template-columns: 1fr 1fr !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-pay-card {
  padding: 18px !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-pay-actions {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-pay-actions .fb-pay-btn,
html.rl-desktop:not(.rl-compact) #phone .fb-pay-actions .primary.fb-pay-btn,
html.rl-desktop:not(.rl-compact) #phone .fb-hold-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-pay-actions .fb-pay-btn,
html.rl-desktop:not(.rl-compact) #phone .fb-pay-actions .primary.fb-pay-btn {
  border: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-hold-btn {
  border: 1.5px solid #93c5fd !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}
@media (max-width: 1100px) {
  html.rl-desktop:not(.rl-compact) #phone .fb-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .fb-perks {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 900px) {
  html.rl-desktop:not(.rl-compact) #phone .fb-layout {
    grid-template-columns: 1fr !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .fb-side {
    display: none !important;
    position: static !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .fb-pay-mobile {
    display: block !important;
  }
}

/* Active Flight results — 4-up modern card grid */
html.rl-desktop:not(.rl-compact) #phone .af-page {
  display: grid !important;
  gap: 0 !important;
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-page > .page-title,
html.rl-desktop:not(.rl-compact) #phone .af-lock > .page-title {
  padding: 4px 4px 8px !important;
}
html.rl-desktop:not(.rl-compact) #web-main:has(#flight-results),
html.rl-desktop:not(.rl-compact) #web-main:has(#stay-results) {
  overflow: auto !important;
}
html.rl-desktop:not(.rl-compact) #web-main:has(#flight-results) #phone,
html.rl-desktop:not(.rl-compact) #web-main:has(#stay-results) #phone {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .screen:has(#flight-results),
html.rl-desktop:not(.rl-compact) #phone .screen:has(#stay-results) {
  overflow: visible !important;
  height: auto !important;
}
html.rl-desktop:not(.rl-compact) #phone #flight-results.af-page {
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
}
html.rl-desktop:not(.rl-compact) #phone #flight-results .af-lock,
html.rl-desktop:not(.rl-compact) #phone #stay-results .af-lock {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  background: var(--bg) !important;
  padding-bottom: 12px;
}
html.rl-desktop:not(.rl-compact) #phone #flight-results .af-lock .af-summary {
  margin-bottom: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone #flight-results .stay-filters {
  position: sticky !important;
  top: 156px !important;
  max-height: calc(100dvh - 240px) !important;
  overflow: auto;
  align-self: start;
  z-index: 3;
}
html.rl-desktop:not(.rl-compact) #phone .af-page > .fare-head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 4px 14px !important;
  align-items: center !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-page .fare-chip {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-page .fare-chip--count {
  background: #eef4ff !important;
  color: #1d4ed8 !important;
  border-color: #dbe7ff !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-summary {
  margin: 0 4px 14px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-summary-route {
  min-width: 0 !important;
  flex: 1 !important;
  display: grid !important;
  gap: 4px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-summary-path {
  display: block !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-summary-meta {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-summary-edit {
  min-height: 40px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #3b82f6 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-tools {
  margin: 0 4px 16px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  background: #fff !important;
  border: 1px solid #e8eef6 !important;
  display: grid !important;
  gap: 14px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-tools-top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-seg {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  flex: 1 !important;
  max-width: 420px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-seg-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-seg-btn.on {
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-chip-group {
  display: grid !important;
  gap: 8px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-chip-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-chip-scroller {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-chip.on {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-tools-row {
  display: grid !important;
  grid-template-columns: minmax(220px, 360px) !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-select {
  display: grid !important;
  gap: 6px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-select select {
  width: 100% !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 11px 36px 11px 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-tools-count {
  margin: 0 0 0 auto !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #eef2f7 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 4px 8px !important;
  align-items: stretch !important;
}
html.rl-desktop:not(.rl-compact) #phone .fb-hold,
html.rl-desktop:not(.rl-compact) #phone .fb-pax-card,
html.rl-desktop:not(.rl-compact) #phone .fb-bag-grid {
  border-radius: 18px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-card {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  height: 100% !important;
  padding: 18px 16px 16px !important;
  border-radius: 22px !important;
  border: 1px solid #e8eef6 !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-leg-block,
html.rl-desktop:not(.rl-compact) #phone .af-fare-bits {
  min-width: 0 !important;
  max-width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-card:hover {
  transform: translateY(-2px) !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-card--cheap {
  border-color: #86efac !important;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 42%) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-cheap {
  left: 16px !important;
  font-size: 11px !important;
  padding: 5px 11px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-logo .airline {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-air {
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-air b {
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-route {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(48px, 1.15fr) minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-end {
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-end b {
  font-size: 22px !important;
  letter-spacing: -0.03em !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-end small {
  font-size: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-path {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding-bottom: 16px !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-fare-bit {
  max-width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-plane {
  width: 34px !important;
  height: 34px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-meta b {
  font-size: 15px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-foot {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
  align-items: center !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-foot b {
  font-size: 20px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-detail {
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: #1d4ed8 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 16px rgba(29, 78, 216, 0.22) !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-detail:hover {
  background: #1e40af !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-more-chip {
  margin-top: 2px !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-page-actions {
  padding: 10px 4px 8px !important;
  max-width: 280px !important;
}
html.rl-desktop:not(.rl-compact) #phone .af-edit-search {
  width: 100% !important;
  border-radius: 14px !important;
  min-height: 46px !important;
}
@media (max-width: 1280px) {
  html.rl-desktop:not(.rl-compact) #phone .af-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 980px) {
  html.rl-desktop:not(.rl-compact) #phone .af-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

html.rl-desktop:not(.rl-compact) #phone .mod-ride-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-ride-card {
  display: grid !important;
  gap: 8px !important;
  justify-items: center !important;
  padding: 12px 12px 16px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 2px solid #e8edf5 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-ride-card.on {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-ride-media {
  display: block !important;
  width: 100% !important;
  height: 88px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-ride-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-ride-ico { font-size: 36px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-ride-card b { color: #0f172a !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-ride-card small { color: #0b3d91 !important; font-weight: 800 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-ride-card em { font-style: normal !important; color: #64748b !important; font-size: 12px !important; font-weight: 650 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-amber .food-sec-head h2 { color: #b45309 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-amber .food-sec-head button { color: #b45309 !important; }
html.rl-desktop:not(.rl-compact) #phone .ride-deal-meta {
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  margin-top: -2px !important;
}
html.rl-desktop:not(.rl-compact) #phone .ride-route-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route.ride-route:hover {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-quote {
  padding: 16px !important;
  border-radius: 16px !important;
  background: #e0f2fe !important;
  color: #0c4a6e !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-quote b { font-size: 24px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-svc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-svc-card {
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-svc-hit {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  width: 100% !important;
  border: 0 !important;
  background: #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-svc-photo {
  display: block !important;
  height: 140px !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-svc-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-svc-copy {
  display: grid !important;
  gap: 4px !important;
  padding: 14px 14px 16px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-svc-emoji { display: none !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-svc-hit b { color: #0f172a !important; font-size: 15px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-svc-hit small { color: #64748b !important; font-weight: 650 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-svc-hit strong { color: #3730a3 !important; font-size: 16px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-route-grid,
html.rl-desktop:not(.rl-compact) #phone .mod-dest-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route,
html.rl-desktop:not(.rl-compact) #phone .mod-dest {
  text-align: left !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  display: grid !important;
  gap: 4px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-route b,
html.rl-desktop:not(.rl-compact) #phone .mod-dest b { color: #0f172a !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-route small,
html.rl-desktop:not(.rl-compact) #phone .mod-dest small { color: #64748b !important; font-weight: 700 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-emerald .food-sec-head h2,
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-emerald .mod-sec h2 { color: #047857 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-emerald .food-sec-head button { color: #047857 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-bill-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-tile {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 0 !important;
  justify-items: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  text-align: left !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
  min-height: 0 !important;
  transition: transform .15s, box-shadow .15s !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1) !important;
  border-color: #a7f3d0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-ico {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 16px 14px 0 !important;
  border-radius: 14px !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-ico .svg {
  width: 22px !important;
  height: 22px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-copy {
  display: grid !important;
  gap: 4px !important;
  padding: 12px 14px 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-copy b {
  font-size: 15px !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-bill-copy small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-pay-copy {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-pay-copy b {
  font-size: 14px !important;
  color: #0f172a !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-pay-copy small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-pay-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-pay {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid #eef2f7 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-pay-brand {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .food-sec-head h2,
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .mod-sec h2 { color: #c2410c !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .food-sec-head button { color: #c2410c !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cats-wrap {
  margin: 0 0 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cats {
  margin: 0 !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  row-gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cats-wrap.is-expanded .mod-gift-cats {
  max-width: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cat-more .mod-cat-ico-more {
  display: grid !important;
  place-items: center !important;
  background: #fff7ed !important;
  color: #c2410c !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cat-more.on .mod-cat-ico-more {
  background: #c2410c !important;
  color: #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-filters {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 12px 16px !important;
  align-items: end !important;
  margin: 0 0 18px !important;
}
@media (max-width: 900px) {
  html.rl-desktop:not(.rl-compact) #phone .mod-gift-filters {
    grid-template-columns: 1fr !important;
  }
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-filter-label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-country-col,
html.rl-desktop:not(.rl-compact) #phone .mod-gift-search-col {
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd {
  position: relative !important;
  z-index: 8 !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd .iat-dd-toggle {
  min-height: 48px !important;
  border-radius: 14px !important;
  border-color: #e8edf5 !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd.open .iat-dd-toggle {
  border-color: #fdba74 !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12) !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd .gift-dd-panel,
html.rl-desktop:not(.rl-compact) #phone .gift-dd .iat-dd-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  margin-top: 0 !important;
  z-index: 30 !important;
  max-height: min(340px, 52vh) !important;
  display: flex !important;
  flex-direction: column !important;
  border-color: #e8edf5 !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14) !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd .iat-dd-list {
  max-height: 260px !important;
  overflow: auto !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd-loading {
  padding: 8px 12px 12px !important;
  margin: 0 !important;
  font-size: 11px !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd-flag {
  width: 28px !important;
  height: 20px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  flex: none !important;
  background: #f1f5f9 !important;
}
html.rl-desktop:not(.rl-compact) #phone .gift-dd-flag.ph {
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #c2410c !important;
  background: #fff7ed !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-search {
  margin: 0 !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid #e8edf5 !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cats .mod-cat-ico {
  overflow: hidden !important;
  background: #fff7ed !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-cats .mod-cat-ico img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift {
  text-align: left !important;
  padding: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  display: grid !important;
  grid-template-rows: 110px auto !important;
  gap: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  min-height: 196px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1) !important;
  border-color: #fdba74 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-media {
  display: block !important;
  background: linear-gradient(180deg, #fff7ed, #ffedd5) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 110px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 28px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-fallback[hidden] {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift-copy {
  display: grid !important;
  gap: 4px !important;
  padding: 12px 14px 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-gift b { color: #0f172a !important; font-size: 14px !important; line-height: 1.25 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-gift small { color: #64748b !important; font-weight: 650 !important; font-size: 12px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-gift strong { color: #c2410c !important; font-size: 14px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-gift.is-skel .mod-gift-media,
html.rl-desktop:not(.rl-compact) #phone .mod-gift.is-skel b,
html.rl-desktop:not(.rl-compact) #phone .mod-gift.is-skel small,
html.rl-desktop:not(.rl-compact) #phone .mod-gift.is-skel strong {
  background: #e2e8f0 !important;
  color: transparent !important;
  border-radius: 8px !important;
  min-height: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-sum { display: grid !important; gap: 10px !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-sum-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 650 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-sum-row b { color: #0f172a !important; text-align: right !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-sum-note {
  margin: 0 !important;
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-empty {
  margin: 0 !important;
  color: #64748b !important;
  font-weight: 650 !important;
  padding: 12px 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk .food-rail-head h2 { color: inherit !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-green .food-rail-head h2 { color: #166534 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-teal .food-rail-head h2 { color: #0f766e !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-violet .food-rail-head h2 { color: #5b21b6 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-amber .food-rail-head h2 { color: #b45309 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .food-rail-head h2 { color: #0369a1 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .wallet-activity .sec-head h2 { color: #0c4a6e !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .wallet-switch button.on {
  color: #0369a1 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-sky .rcpt-rail .food-rail-head h2 { color: #0369a1 !important; }
html.rl-desktop:not(.rl-compact) #phone .rcpt--desk {
  box-shadow:
    0 22px 48px rgba(29, 78, 216, 0.12),
    0 0 0 1px rgba(47, 108, 245, 0.08) !important;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt-desk-grid {
  overflow: hidden;
  border-radius: 28px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--desk .rcpt-hero {
  position: relative;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--desk .rcpt-hero::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt-rail .rcpt-act {
  min-height: 48px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--flight .ftix {
  margin: 0 20px 12px;
  border-radius: 24px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--flight .ftix-iata {
  font-size: 42px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--flight .ftix-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  padding: 8px 22px 18px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--flight .ftix-head {
  padding: 20px 24px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--flight .ftix-air b {
  font-size: 17px;
}
html.rl-desktop:not(.rl-compact) #phone .rcpt--flight .ftix-pnr b {
  font-size: 24px;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk .wallet-body {
  padding: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk .wal-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-indigo .food-rail-head h2 { color: #3730a3 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-navy .food-rail-head h2 { color: #0b3d91 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-rose .food-rail-head h2 { color: #9f1239 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-emerald .food-rail-head h2 { color: #047857 !important; }
html.rl-desktop:not(.rl-compact) #phone .mod-desk.tone-orange .food-rail-head h2 { color: #c2410c !important; }

@media (max-width: 1280px) {
  html.rl-desktop:not(.rl-compact) #phone .mod-desk {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-store-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-4,
  html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-5,
  html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-svc-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-bill-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-gift-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-route-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-dest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-hero {
    min-height: 200px !important;
    padding: 28px 32px !important;
  }
}

/* Mid desktop: chrome + modules stay inside the viewport */
@media (max-width: 1360px) {
  .rl-top {
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr) auto !important;
    gap: 8px;
    padding: 10px 14px 6px;
  }
  .rl-loc {
    min-height: 44px;
    padding: 6px 10px;
  }
  .rl-loc b {
    max-width: none !important;
    font-size: 12px !important;
    white-space: normal !important;
  }
  .rl-search { min-height: 44px; }
  .rl-icon-btn { width: 42px; height: 42px; }
  .rl-user { padding: 3px 8px 3px 3px; }
  .rl-user-copy { display: none; }
  .rl-chips-wrap {
    padding: 2px 14px 10px;
    overflow: visible;
  }
  .rl-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rl-chips::-webkit-scrollbar { display: none; }
  .rl-chip {
    flex: none;
    padding: 8px 12px;
    font-size: 12.5px;
  }
  #web-main { padding: 0 14px 20px; }
  html.rl-desktop:not(.rl-compact) body.rl-mod #web-main,
  html.rl-desktop:not(.rl-compact) body.rl-food #web-main {
    padding-right: 14px;
  }
  html.rl-desktop:not(.rl-compact) #phone .food-desk,
  html.rl-desktop:not(.rl-compact) #phone .mod-desk {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    gap: 14px !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-hero {
    min-height: 180px !important;
    padding: 24px 28px !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-store-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-4,
  html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-5,
  html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.cols-6,
  html.rl-desktop:not(.rl-compact) #phone .food-dish-grid,
  html.rl-desktop:not(.rl-compact) #phone .food-rest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-svc-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-bill-grid,
  html.rl-desktop:not(.rl-compact) #phone .mod-gift-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy {
    max-width: min(62%, 36rem) !important;
  }
  html.rl-desktop:not(.rl-compact) #phone .mod-hero-copy b {
    font-size: clamp(20px, 2.2vw, 28px) !important;
  }
}

/*
 * Compact web (<1100): identical to /super/ mobile app.
 * Desk module CSS is scoped to :not(.rl-compact); only shell chrome is hidden here.
 */
html.rl-desktop.rl-compact #web-shell {
  grid-template-columns: 1fr !important;
  height: 100dvh;
  background: #fff;
}
html.rl-desktop.rl-compact #web-side,
html.rl-desktop.rl-compact #web-chrome {
  display: none !important;
}
html.rl-desktop.rl-compact #web-frame {
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
html.rl-desktop.rl-compact #web-main {
  padding: 0 !important;
  overflow: hidden;
  height: 100%;
  background: #fff;
}
html.rl-desktop.rl-compact #web-main #phone.phone {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
}

/* Richchat ticket: HRM-style fill — ticket list + thread scroll independently; composer stays pinned */
html.rl-desktop:not(.rl-compact) body.rl-chat #web-frame,
html.rl-desktop:not(.rl-compact) body.rl-msg-open #web-frame {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #web-main,
html.rl-desktop:not(.rl-compact) body.rl-msg-open #web-main {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 16px 12px !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #web-main #phone.phone,
html.rl-desktop:not(.rl-compact) body.rl-msg-open #web-main #phone.phone,
html.rl-desktop:not(.rl-compact) body.rl-msg-open #web-main #phone {
  flex: 1 1 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .statusbar {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .screen.chat-mode {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-app {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-list-pane,
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-conv {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-list-ul {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-stage {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-messages {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-composer,
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-closed,
html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-attach-pending {
  flex: none !important;
  flex-shrink: 0 !important;
}
@media (max-width: 980px) {
  html.rl-desktop:not(.rl-compact) body.rl-chat #phone .rc-app {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) !important;
  }
}

/* Join Agent / Company / Dealer — desktop */
html.rl-desktop:not(.rl-compact) #phone .rj-page {
  max-width: 720px;
  margin: 0 auto;
  gap: 14px;
  padding: 8px 24px 36px;
}
html.rl-desktop:not(.rl-compact) #phone .rj-hero {
  min-height: 180px;
  padding: 28px 28px 24px;
  border-radius: 24px;
}
html.rl-desktop:not(.rl-compact) #phone .rj-hero h2 { font-size: 28px; max-width: 58%; }
html.rl-desktop:not(.rl-compact) #phone .rj-hero p { max-width: 52%; font-size: 14px; }
html.rl-desktop:not(.rl-compact) #phone .rj-hero-art {
  max-width: 190px;
  max-height: 160px;
  right: 18px;
  bottom: -4px;
}
html.rl-desktop:not(.rl-compact) #phone .rj-perks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
html.rl-desktop:not(.rl-compact) #phone .rj-perk {
  flex-direction: column;
  min-height: 100%;
}
html.rl-desktop:not(.rl-compact) #phone .rj-card {
  padding: 20px;
  border-radius: 22px;
}
html.rl-desktop:not(.rl-compact) #phone .rj-fields-2,
html.rl-desktop:not(.rl-compact) #phone .rj-page.tone-prop .rj-card:nth-of-type(2) .rj-fields,
html.rl-desktop:not(.rl-compact) #phone .rj-page.tone-vehicle .rj-card:nth-of-type(2) .rj-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html.rl-desktop:not(.rl-compact) #phone .rj-actions {
  grid-template-columns: 1fr 1fr;
  max-width: none;
}
html.rl-desktop:not(.rl-compact) #phone .rj-cta {
  position: static;
  max-width: 360px;
}

/* Property / Vehicles / Jobs desk hubs */
html.rl-desktop:not(.rl-compact) #phone .desk-hub {
  max-width: 1040px;
  margin: 0 auto;
  padding: 4px 4px 36px;
  display: grid;
  gap: 14px;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .page-title,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .hero,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .join-banner,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .seg,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .trip-seg,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .cats,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .desk-filters,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .desk-book,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .trip-form,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .sec-head,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .trip-scroll,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .why,
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .panel {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: none;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .page-title {
  margin: 0 0 2px;
  padding: 0;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .page-title .back {
  display: none;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub > .page-title h1 {
  font-size: 28px;
  letter-spacing: -0.03em;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .hero {
  margin: 0;
  border-radius: 28px;
  min-height: 168px;
  padding: 36px 40px;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .hero .hero-copy h2 {
  font-size: 32px;
  max-width: 16ch;
  line-height: 1.12;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .hero .hero-copy p {
  font-size: 15px;
  max-width: 42ch;
  margin-top: 10px;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .hero-bill-art span {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .hero-bill-art .svg {
  width: 22px;
  height: 22px;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .join-banner {
  max-width: none;
  margin: 0;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(47, 108, 245, 0.12);
  background: linear-gradient(180deg, #f5f9ff, #eef4ff);
  box-shadow: none;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .join-banner b {
  font-size: 15px;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .seg,
html.rl-desktop:not(.rl-compact) #phone .desk-hub .trip-seg {
  margin: 0;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .cats,
html.rl-desktop:not(.rl-compact) #phone .desk-hub .desk-filters {
  margin: 0;
  padding: 0;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .desk-book,
html.rl-desktop:not(.rl-compact) #phone .desk-hub .trip-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 0;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #eef2f7;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .desk-book .desk-go,
html.rl-desktop:not(.rl-compact) #phone .desk-hub .desk-book .primary {
  grid-column: 1 / -1;
}
html.rl-desktop:not(.rl-compact) #phone .desk-hub .prop-layout.grid,
html.rl-desktop:not(.rl-compact) #phone .desk-hub .veh-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Hotel search results: 4 cards per row on desktop grid view */
@media (min-width: 1100px) {
  html.rl-desktop #phone .prop-layout.hotel-results-grid,
  html.rl-desktop #phone .prop-layout.hotel-results-grid.grid,
  html.rl-desktop #web-main #phone .prop-layout.hotel-results-grid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 4px 16px !important;
  }
}
html.rl-desktop:not(.rl-compact) body.rl-hub .rl-chips-wrap {
  display: none;
}

/*
  Desktop Profile / Account / Member: .screen is overflow:auto but grows with
  content (scrollHeight === clientHeight), so it becomes a dead scrollport that
  traps wheel events and makes the profile feel "hung" (can't scroll past tools).
  Let #web-main own scrolling for these pages.
*/
html.rl-desktop:not(.rl-compact) #web-main:has(.bp-page) {
  overflow: auto !important;
}
html.rl-desktop:not(.rl-compact) #web-main:has(.bp-page) #phone.phone {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .screen:has(> .bp-page) {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: none !important;
  display: block !important;
  min-height: 0 !important;
}

/* Social feed desktop: FB-style soft canvas, locked right rail */
html.rl-desktop:not(.rl-compact) body.rl-social #web-main {
  background: #f0f2f5;
  padding: 0 18px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.rl-desktop:not(.rl-compact) body.rl-social #web-main #phone.phone {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.rl-desktop:not(.rl-compact) body.rl-social #phone .screen {
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
html.rl-desktop:not(.rl-compact) body.rl-social #phone .statusbar {
  display: none !important;
}
html.rl-desktop:not(.rl-compact) body.rl-social .rl-top .rl-loc {
  opacity: 0.92;
}

html.rl-desktop:not(.rl-compact) #phone .food-dish-media {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #fff !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-dish-media img {
  object-fit: cover !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
html.rl-desktop:not(.rl-compact) #phone .grid-2 .pcard-media,
html.rl-desktop:not(.rl-compact) #phone .grid-2 .pimg {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Centered flash popup on desktop viewport */
html.rl-desktop .rl-flash,
#web-shell > .rl-flash {
  position: fixed !important;
  inset: 0 !important;
  z-index: 400 !important;
}
html.rl-desktop .rl-flash-card {
  width: min(100%, 400px) !important;
  padding: 32px 28px 22px !important;
  border-radius: 26px !important;
}
html.rl-desktop .rl-flash-msg {
  font-size: 18px !important;
}

/* Flight/hotel hold Pay now — full width inside card */
html.rl-desktop:not(.rl-compact) #phone .hotel-hold-card .hotel-hold-pay,
html.rl-desktop:not(.rl-compact) #phone .hotel-hold-card .primary.hotel-hold-pay,
html.rl-desktop:not(.rl-compact) #phone .hotel-hold-card .hotel-hold-later {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html.rl-desktop:not(.rl-compact) #phone .svc-tile.tone-apt { background: linear-gradient(180deg, #f0fdfa, #ccfbf1) !important; }

/* Stay results: filters + listing (desktop web) */
html.rl-desktop:not(.rl-compact) #phone .screen:has(.stay-desk) {
  max-width: none !important;
  padding: 8px 0 28px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-toolbar {
  padding: 0 4px 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-desk,
html.rl-desktop:not(.rl-compact) #phone .stay-desk.no-map {
  display: grid !important;
  grid-template-columns: 268px minmax(0, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-filters,
html.rl-desktop:not(.rl-compact) #phone .stay-main {
  min-width: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-filters {
  display: flex !important;
  position: sticky !important;
  top: 128px !important;
  max-height: calc(100dvh - 210px) !important;
  padding: 16px !important;
  align-self: start;
  z-index: 3;
}
/* With filters beside listings, prefer 3 balanced cards — not a cramped 4-up */
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.hotel-results-grid,
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.hotel-results-grid.grid,
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.apt-results-grid,
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.apt-results-grid.grid,
html.rl-desktop #web-main #phone .stay-main .prop-layout.hotel-results-grid.grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
  align-items: stretch !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main .stay-result-card {
  height: 100% !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.grid .stay-card-media {
  height: 148px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main .stay-result-card .photo-frame,
html.rl-desktop:not(.rl-compact) #phone .stay-main .stay-result-card .prop-photo,
html.rl-desktop:not(.rl-compact) #phone .stay-main .stay-result-card .photo-frame.stay-ph {
  height: 148px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-price-range {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-filters .stay-price-input {
  min-height: 48px !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  border: 1px solid transparent !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.list .stay-result-card--list {
  grid-template-columns: 180px minmax(0, 1fr) 170px !important;
  gap: 16px !important;
  padding: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.list .stay-card-media {
  width: 180px !important;
  max-width: 180px !important;
  height: 136px !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.list .stay-card-media .photo-frame,
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.list .stay-card-media .prop-photo,
html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.list .stay-card-media .apt-photo {
  width: 100% !important;
  height: 136px !important;
  max-height: 136px !important;
  aspect-ratio: auto !important;
}
@media (min-width: 1680px) {
  html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.hotel-results-grid.grid,
  html.rl-desktop:not(.rl-compact) #phone .stay-main .prop-layout.apt-results-grid.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
html.rl-compact #phone .stay-desk,
html.rl-compact #phone .stay-desk.no-map {
  display: block !important;
}
html.rl-compact #phone .stay-desk > .stay-filters { display: none !important; }
html.rl-desktop:not(.rl-compact) #phone .stay-main .af-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
html.rl-desktop:not(.rl-compact) #phone .stay-main > .af-tools-count {
  margin: 0 4px 12px auto !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-card {
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) 180px !important;
  gap: 16px !important;
  padding: 14px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-card-photo,
html.rl-desktop:not(.rl-compact) #phone .rh-photo-frame,
html.rl-desktop:not(.rl-compact) #phone .rh-photo-frame img {
  height: 156px !important;
}
html.rl-desktop:not(.rl-compact) #phone .rh-card-name { font-size: 17px !important; }

html.rl-desktop:not(.rl-compact) :is(body.rl-ride, body.rl-dispatch) #web-main {
  padding: 0 !important;
  overflow: hidden;
}
html.rl-desktop:not(.rl-compact) :is(body.rl-ride, body.rl-dispatch) #phone {
  height: 100% !important;
  min-height: 0;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f4f7f4;
}
html.rl-desktop:not(.rl-compact) :is(body.rl-ride, body.rl-dispatch) #phone .screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #f4f7f4;
}
html.rl-desktop:not(.rl-compact) :is(body.rl-ride, body.rl-dispatch) #phone .statusbar,
html.rl-desktop:not(.rl-compact) :is(body.rl-ride, body.rl-dispatch) #phone .nav { display: none !important; }
html.rl-desktop:not(.rl-compact) #phone .tx-book {
  display: grid !important;
  grid-template-columns: minmax(420px, 480px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  margin: 0;
}
html.rl-desktop:not(.rl-compact) #phone .tx-panel {
  order: 0;
  height: 100%;
  overflow: auto;
  margin: 0;
  border-radius: 0;
  padding: 32px 32px 24px 36px;
  box-shadow: 10px 0 36px rgba(30, 50, 38, 0.04);
}
html.rl-desktop:not(.rl-compact) #phone .tx-panel h1 { font-size: 34px; max-width: 12ch; }
html.rl-desktop:not(.rl-compact) #phone .tx-parcel .tx-panel {
  padding: 22px 28px 16px 32px;
}
html.rl-desktop:not(.rl-compact) #phone .tx-parcel .tx-panel h1 { max-width: 11ch; font-size: 30px; margin-bottom: 4px; }
html.rl-desktop:not(.rl-compact) #phone .tx-map {
  order: 0;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}
html.rl-desktop:not(.rl-compact) #phone .tx-map-top { top: 22px; left: 22px; }
html.rl-desktop:not(.rl-compact) #phone .tx-trip { left: 22px; right: auto; bottom: 22px; min-width: 280px; }
html.rl-desktop:not(.rl-compact) #phone .tx-rides { gap: 10px; }
html.rl-desktop:not(.rl-compact) #phone .tx-ride { min-height: 148px; }

/* Wide On-Demand row on the desktop home grid */
html.rl-desktop:not(.rl-compact) #phone .svc-tile.is-tail {
  grid-column: span var(--tail-span, 1) !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-tile.is-tail .svc-media--collage,
html.rl-desktop:not(.rl-compact) #phone .svc-tile.is-tail .svc-more-collage {
  height: 168px !important;
  min-height: 0 !important;
  max-height: 168px !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-tile.is-tail .svc-more-collage img {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide {
  grid-column: 1 / -1;
  min-height: 156px;
  padding: 18px 22px 18px 26px;
  border-radius: 22px;
  gap: 18px;
  transition: transform .15s, box-shadow .15s;
}
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(13, 148, 136, 0.16);
}
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide b {
  font-size: 28px;
  letter-spacing: -0.035em;
}
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide p {
  font-size: 15px;
  max-width: 46ch;
  margin-top: 2px;
}
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide .hd-end { gap: 16px; }
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide .hd-go {
  width: 44px;
  height: 44px;
}
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide .hd-arr { font-size: 26px; }
html.rl-desktop:not(.rl-compact) #phone .svc-grid .hd-tile.hd-wide .hd-art {
  width: 220px;
  height: 124px;
  border-radius: 18px;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.rl-slide,
html.rl-desktop:not(.rl-compact) #phone .mod-store-grid.rl-slide,
html.rl-desktop:not(.rl-compact) #phone .food-dish-grid.rl-slide,
html.rl-desktop:not(.rl-compact) #phone .hscroll.rl-slide {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 14px !important;
  max-width: 100%;
  min-width: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html.rl-desktop:not(.rl-compact) #phone .mod-card-grid.rl-slide > *,
html.rl-desktop:not(.rl-compact) #phone .mod-store-grid.rl-slide > *,
html.rl-desktop:not(.rl-compact) #phone .food-dish-grid.rl-slide > *,
html.rl-desktop:not(.rl-compact) #phone .hscroll.rl-slide > * {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  min-width: 0 !important;
  scroll-snap-align: start;
}

/* Store + booking pages: lock the right order rail, scroll only the middle */
html.rl-desktop:not(.rl-compact) #web-main:has(.food-desk),
html.rl-desktop:not(.rl-compact) #web-main:has(.mod-desk) {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
html.rl-desktop:not(.rl-compact) #web-main:has(.food-desk) #phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.mod-desk) #phone {
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.rl-desktop:not(.rl-compact) #phone .screen:has(.food-desk),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.mod-desk) {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}
html.rl-desktop:not(.rl-compact) #phone .screen > .food-desk,
html.rl-desktop:not(.rl-compact) #phone .screen > .mod-desk,
html.rl-desktop:not(.rl-compact) #phone .wallet-page:has(.mod-desk),
html.rl-desktop:not(.rl-compact) #phone .hub-page:has(.mod-desk) {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
html.rl-desktop:not(.rl-compact) #phone .wallet-page > .mod-desk,
html.rl-desktop:not(.rl-compact) #phone .hub-page > .mod-desk,
html.rl-desktop:not(.rl-compact) #phone .food-desk,
html.rl-desktop:not(.rl-compact) #phone .mod-desk {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  align-items: stretch !important;
}
html.rl-desktop:not(.rl-compact) #phone .food-main,
html.rl-desktop:not(.rl-compact) #phone .mod-main {
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 28px;
  align-content: start;
  scrollbar-width: thin;
}
html.rl-desktop:not(.rl-compact) #phone .food-cuisines,
html.rl-desktop:not(.rl-compact) #phone .mod-cats {
  min-height: 112px !important;
  height: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-self: start;
}
html.rl-desktop:not(.rl-compact) #phone .food-desk > .food-rail,
html.rl-desktop:not(.rl-compact) #phone .mod-desk > .food-rail {
  position: relative !important;
  top: auto !important;
  align-self: start;
  height: auto;
  max-height: 100% !important;
  overflow: auto !important;
}

/* Solo feed photos/videos: full-bleed shell, centered media */
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1:not(.is-video),
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-photo,
html.rl-desktop:not(.rl-compact) .rl-feed-list .rl-post-media.is-1:not(.is-video),
html.rl-desktop:not(.rl-compact) .rl-feed-list .rl-post-media.is-1.is-photo,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1:not(.is-video),
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1.is-photo {
  aspect-ratio: var(--rl-media-ar, 4 / 5) !important;
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(90vh, 920px) !important;
  background: #0b1220 !important;
  margin: 8px 0 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  contain: layout style !important;
  overflow: hidden !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-video,
html.rl-desktop:not(.rl-compact) .rl-feed-list .rl-post-media.is-1.is-video,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1.is-video {
  aspect-ratio: var(--rl-video-ar, 9 / 16) !important;
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(90vh, 920px) !important;
  background: #0b1220 !important;
  margin: 8px 0 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1:not(.is-video) .rl-post-tile,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-photo .rl-post-tile,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-video .rl-post-tile,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-video .rl-post-video,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1:not(.is-video) .rl-post-tile,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1.is-video .rl-post-tile,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1.is-video .rl-post-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: block !important;
  background: transparent !important;
}
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1:not(.is-video) .rl-post-img,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1:not(.is-video) .rl-post-tile > img,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-photo .rl-post-img,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1:not(.is-video) .rl-post-img,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-video video,
html.rl-desktop:not(.rl-compact) .rl-post-media.is-1.is-video .rl-post-video video,
html.rl-desktop:not(.rl-compact) #phone .rl-post-media.is-1.is-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
}

/* Desktop Reels: fit full video — no head crop */
html.rl-desktop:not(.rl-compact) .rl-reel-video,
html.rl-desktop:not(.rl-compact) #phone .rl-reel-video {
  object-fit: contain !important;
  object-position: center center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: #000 !important;
}

/* Desktop LIVE discovery: always 3 cards per row + scrollable panel */
html.rl-desktop .rl-live,
html.rl-desktop .rl-live.is-desk,
html.rl-desktop:not(.rl-compact) .rl-live.is-desk,
html.rl-desktop #phone .rl-live {
  max-width: min(1100px, 100%) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}
html.rl-desktop body.rl-social #phone .screen:has(.rl-live),
html.rl-desktop:not(.rl-compact) body.rl-social #phone .screen:has(.rl-live) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html.rl-desktop .rl-live-cats,
html.rl-desktop #phone .rl-live-cats {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  background: #f7f8fa !important;
  padding-top: 6px !important;
}
html.rl-desktop .rl-live-grid,
html.rl-desktop .rl-live-grid.is-desk,
html.rl-desktop #phone .rl-live-grid,
html.rl-desktop #phone .rl-live-grid.is-desk,
html.rl-desktop:not(.rl-compact) .rl-live-grid.is-desk,
html.rl-desktop:not(.rl-compact) #phone .rl-live-grid.is-desk {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: none !important;
  width: 100% !important;
  gap: 18px 16px !important;
}

/* FINAL: desktop tall-page scroll unlock (profile / monetization / subscriptions / …). */
html.rl-desktop:not(.rl-compact) #web-main:has(.bp-page),
html.rl-desktop:not(.rl-compact) #web-main:has(.bp-profile),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-mz-desk),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-mz-page),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-sub-desk),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-sub-page),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-ref-page),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-rw-desk),
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-rw-page) {
  overflow: auto !important;
  overflow-y: auto !important;
}
html.rl-desktop:not(.rl-compact) #web-main:has(.bp-page) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.bp-profile) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-mz-desk) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-mz-page) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-sub-desk) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-sub-page) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-ref-page) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-rw-desk) #phone.phone,
html.rl-desktop:not(.rl-compact) #web-main:has(.rl-rw-page) #phone.phone {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}
html.rl-desktop:not(.rl-compact) #phone .screen:has(.bp-page),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.bp-profile),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-mz-desk),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-mz-page),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-sub-desk),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-sub-page),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-ref-page),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-rw-desk),
html.rl-desktop:not(.rl-compact) #phone .screen:has(.rl-rw-page),
html.rl-desktop:not(.rl-compact) body.rl-social #phone .screen:has(.bp-page),
html.rl-desktop:not(.rl-compact) body.rl-social #phone .screen:has(.bp-profile) {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: none !important;
  display: block !important;
  min-height: 0 !important;
}
/* Page cards must not use overflow:hidden — it traps wheel on tall forms. */
html.rl-desktop:not(.rl-compact) .rl-mz-page,
html.rl-desktop:not(.rl-compact) .rl-sub-desk .rl-sub-page,
html.rl-desktop:not(.rl-compact) .rl-rw-page,
html.rl-desktop:not(.rl-compact) .rl-ref-page {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}


/* Richlance Business day-mode sidebar (wins over stale CDN/SW navy) */
#web-side {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(47, 108, 245, 0.06), transparent 52%),
    radial-gradient(100% 45% at 100% 100%, rgba(245, 196, 0, 0.05), transparent 48%),
    #ffffff !important;
  border-right: 1px solid #e8edf5 !important;
  color: #0f172a !important;
  padding: 18px 12px 18px;
  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.03);
}
.rl-side-brand small {
  color: #64748b !important;
}
.rl-side-label {
  color: #94a3b8 !important;
}
.rl-side-link {
  color: #334155 !important;
}
.rl-side-link .ico {
  background: #f1f5f9 !important;
  color: #1d4ed8 !important;
}
.rl-side-link:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}
.rl-side-link.on {
  background: linear-gradient(120deg, #2f6cf5 0%, #6366f1 55%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(47, 108, 245, 0.22);
}
.rl-side-link.on .ico {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.rl-side-rule {
  background: #e8edf5 !important;
}
.rl-side-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rl-side-pro {
  margin-top: auto;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(245, 196, 0, 0.16), transparent 50%),
    linear-gradient(180deg, #f8fbff, #fff);
  border: 1px solid #e8edf5;
  display: grid;
  gap: 8px;
}
.rl-side-pro .crown {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f5c400, #f59e0b);
  color: #10233f;
  font-size: 16px;
}
.rl-side-pro b { font-size: 14px; font-weight: 850; color: #0f172a; }
.rl-side-pro p { margin: 0; font-size: 12px; line-height: 1.35; color: #64748b; }
.rl-side-pro button {
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  background: #f5c400;
  color: #10233f;
  font-weight: 850;
  font-size: 12.5px;
}
.rl-top .rl-search input::placeholder {
  color: #94a3b8;
}