/* 客户站点与司机 H5 样式；来源、跨页基线及 Bootstrap/i18n/可访问性适配见 ADR-0033 与 ui-inventory。 */

:root {
    --brand: #472f92;
    --brand-hover: #361c82;
    --brand-secondary: #ffde2f;
    --brand-secondary-hover: #f2d229;
    --brand-soft: #f1edfa;
    --brand-dark: #ffde2f;
    --ink: #101828;
    --ink-2: #556073;
    --form-label: #344054;
    --muted: #667085;
    --muted-2: #98a2b3;
    --line: #e4e7ec;
    --soft: #f6f8fb;
    --navy: #0e1728;
    --success: #22a06b;
    --blue: #0d6efd;
    --green: #12a879;
    --green-soft: #eaf8f3;
    --yellow: #ffc107;
    --yellow-soft: #fffbed;
    --red: #dc3545;
    --red-soft: #fff0f1;
    --orange: #fd8a00;
    --pink: #e300aa;
    --purple: #8000ff;
    --shadow-sm: 0 10px 30px rgba(16, 24, 40, .08);
    --shadow-md: 0 18px 55px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--bs-body-font-family);
  color: var(--ink-2);
  font-size: .95rem;
  font-weight: 500;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 700;
}
a:hover { color: var(--brand-hover); }
a.underline { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 800 !important; }
/* Bootstrap 5.3.8 的 .h1-.h6 类选择器特异性 (0,1,0) 高于上一条的元素选择器 (0,0,1)，元素带 class="h4"
   一类时会压过上面这条、回落到未赋值的 --bs-heading-color。此处用同特异性的类选择器补色，
   放在 web.css（晚于 bootstrap.min.css 载入）靠源码顺序胜出。P05/P17/P19/P22/P23 等页的
   .card-section-heading、会员中心面板标题等同一根因，不再逐页单独处理。 */
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); }
p { font-weight: 500; line-height: 1.5rem; }
img { max-width: 100%; }
button, input, select { font: inherit; }

/* 焦点环兜底。它是 (0,1,0),压不过 Bootstrap 那族 (0,2,0) 的 outline: 0(.btn / .form-control /
   .nav-link / .navbar-toggler / .form-check-input / .btn-close / .accordion-button 等),实际到达面
   因此是裸 <a>、.dropdown-item、不带 .btn 的 <button> 与自定义 tabindex 元素;那族各由自己的具名
   规则给指示。不写 !important——兜底只在没人管时给一个环,既有具名规则要能照常压过它。
   alpha 取 .7 = 白底 4.43:1;原来的 .45 只有 2.39:1,不到 WCAG 2.2 SC 1.4.11 要求的 3:1。 */
:focus-visible {
  outline: 3px solid rgba(71, 47, 146, .7);
  outline-offset: 2px;
}

/* 深色底上紫环对比不足:透明页头(滚动前后同为紫底)与页脚改用品牌黄,与 .checkout-site-header 同一手法。 */
.site-header.header-transparent :focus-visible,
.site-footer :focus-visible {
  outline-color: rgba(255, 222, 47, .75);
}

/* 透明页头里的下拉菜单是白底面板,黄环在白底上约 1.4:1,收回紫环。 */
.site-header.header-transparent .dropdown-menu :focus-visible {
  outline-color: rgba(71, 47, 146, .7);
}

@media (max-width: 991.98px) {
  /* 折叠菜单展开后同样是白底面板(见下方 .navbar-collapse 的 background: #fff),同理收回紫环;
     页头折叠按钮不在面板内,继续用黄环。 */
  .site-header.header-transparent .navbar-collapse :focus-visible {
    outline-color: rgba(71, 47, 146, .7);
  }
}

.btn { min-height: 44px; padding: .55rem .95rem; border-radius: 50px; font-weight: 700; }
.btn-primary {
  color: #fff;
  background-color: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active,.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}
.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus, .btn-outline-primary:active {
    color: #fff;
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}
.btn-secondary {
    color: var(--ink);
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:active, .btn-secondary.active {
    color: var(--ink);
    background-color: var(--brand-secondary-hover);
    border-color: var(--brand-secondary-hover);
}
.btn-link {
    color: var(--brand);
}
/* Wallet 表头说明按钮:p-0 会把 btn-link 压缩到图标本身的尺寸,触屏点不中;
   min-width/min-height 40px 补足 WCAG 2.5.5 触控目标下限,不改变图标视觉大小(WPA-B)。 */
.wallet-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}
.accordion-button:not(.collapsed) {
    color: var(--ink);
    background-color: transparent;
    box-shadow: none;
}
.accordion-button:focus {
    border-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25);
}
.card {
    overflow: hidden;
    border: 1px solid #dfe4ec;
    border-radius: var(--checkout-card-radius, 16px);
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .065);
    /* Bootstrap 5.3.8 的 .card 直接把 color 设成 var(--bs-body-color)（出厂 #212529），
       未走可覆写的 --bs-card-color；稿件用 Bootstrap 5.1.1、.card 不声明 color，天然继承
       body 的 --ink-2。.card-body 的 color 取 var(--bs-card-color)，该变量在 .card 上声明
       为空值，按 CSS 自定义属性规则在 color 上判定 computed-value 无效、回落为继承值，
       即直接取这里的显式值——因此只改这一处即可让 .card 与 .card-body 一起对齐。 */
    color: var(--ink-2);
}
.card-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid #e7eaf0;
    background: #fafbfc;
}
.card-title { color: var(--ink); font-weight: 800; }
.card-subtitle { font-size: .82rem; }
.card-body { padding: 1.5rem; }
.card-link { font-weight: 600; }
/* Bootstrap 5.3.8 的 .text-secondary 用 --bs-secondary-rgb（出厂 108,117,125，即 #6c757d）而不是
   --muted，且带 !important；稿件（Bootstrap 5.1.1）里同一工具类取 #667085（style.css 的 --muted）。
   用同选择器 + !important 在 web.css（晚于 bootstrap.min.css 载入）覆盖，不改
   --bs-secondary-rgb 变量本身以免连带 .bg-secondary/.border-secondary/.badge 等其他消费面。 */
.text-secondary { color: var(--muted) !important; }
.filter-accordion .accordion-body {
    padding: 0rem 1.25rem 1rem 1.25rem;
}
.form-check {
    font-size: .9rem;
    color: var(--muted);
    font-weight: 500;
}
.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}
.fw-800 {
    font-weight: 800;
}
.text-white-75 { color: rgba(255,255,255,.75); }
.bg-soft { background: var(--soft); }
.section-padding { padding: 50px 0; }
.min-vh-70 { min-height: 690px; }
.benefit-strip span { opacity: .9; }
.skip-link { z-index: 2000; }

.site-header {
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.site-header .navbar { background: rgba(255,255,255,.97); }
.site-header.scrolled .navbar { box-shadow: 0 8px 30px rgba(15, 23, 42, .08); }
.brand-mark { font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.navbar-brand.header-logo-link { color: var(--brand); }
.brand-mark > span:last-child > span { color: var(--brand); }
.header-logo-stack {
  position: relative;
  display: block;
  width: 130px;
  height: 35px;
  flex: 0 0 200px;
}
.header-logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 130px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
.header-logo-primary {
  opacity: 1;
  transform: translateY(0);
}
.brand-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; transform: rotate(-6deg);
}
.brand-light { color: #fff !important; }
.navbar .nav-link {
  color: #344054; font-size: .92rem; font-weight: 700; padding: .65rem .8rem !important;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--brand); }
.navbar .btn { padding: .45rem .85rem; min-height: auto; font-size: .92rem; }
@media (max-width: 767.98px) { .navbar .btn-light { border-color: var(--line); } }

.hero-section {
  padding-top: 82px;
  min-height: 850px;
  background:
    linear-gradient(90deg, rgba(4, 11, 20, .88) 0%, rgba(4, 11, 20, .64) 44%, rgba(4, 11, 20, .1) 75%),
    url("/images/web/slider/bus.jpg") center 58% / cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 25%, transparent 0 28%, rgba(4, 11, 20, .12) 56%, rgba(4, 11, 20, .3) 100%);
}
.hero-content { z-index: 1; }
.eyebrow, .section-kicker {
  display: block; text-transform: uppercase; letter-spacing: .13em;
  font-size: .72rem; font-weight: 800;
}
.section-kicker { color: var(--brand); }
.hero-section h1 { line-height: 1.08; letter-spacing: -.035em; }
.booking-panel {
  position: absolute; left: 12px; right: 12px; bottom: -84px;
  background: #fff; border-radius: 16px; padding: 28px;
  border: 1px solid rgba(255,255,255,.5);
}
.booking-tabs { gap: .35rem; }
.booking-tabs .nav-link {
  color: #475467; font-weight: 700; font-size: .9rem; border-radius: 999px;
  background: #f2f4f7; padding: .62rem 1rem;
}
.booking-tabs .nav-link.active { background: var(--ink); color: #fff; }
.booking-panel .form-label { font-size: .74rem; font-weight: 800; color: #475467; margin-bottom: .45rem; }
.booking-panel .form-control, .booking-panel .form-select {
  min-height: 50px; border: 1px solid var(--line); border-radius: 10px;
  font-size: .9rem; padding-left: 2.55rem;
}
.booking-panel .form-select { padding-left: .85rem; }
.input-icon { position: relative; }
.input-icon > i {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  z-index: 2; color: var(--brand);
}
.booking-panel .btn-lg { min-height: 50px; border-radius: 10px; font-size: .92rem; font-weight: 800; }

.info-card {
  position: relative; border-radius: 12px; padding: 24px 64px 24px 22px;
  border: 1px solid transparent;
}
.info-card p { font-size: .82rem; line-height: 1.7; }
.info-green { background: #f0fbf5; border-color: #d7f0e3; }
.info-purple { background: #f7f2ff; border-color: #e9ddff; }
.info-blue { background: #edf9fb; border-color: #d4eff3; }
.info-icon {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: var(--shadow-sm); color: var(--brand);
}

.section-heading { max-width: 750px; margin-bottom: 25px; }
.section-heading h2 { font-size: clamp(1.6rem, 4vw, 1.8rem); font-weight: 800; letter-spacing: -.035em; margin: .5rem 0 .8rem; }
.section-heading p { color: var(--muted); margin-bottom: 0; line-height: 1.75; }
/* 订单摘要与支付结果(稿件 payment-result.html)。以下四段与稿件 style.css 的
   .success-icon / .access-icon / .support-panel / .order-summary-shell h3 取值逐字相同。 */
.order-summary-shell h3 {
  font-size: clamp(.95rem, 1vw, 1.2rem);
  letter-spacing: -.025em;
}
/* 失败与确认中两枚圆章稿件没有画,几何沿用 .success-icon,配色各自在下方定义。 */
.success-icon,
.payment-result-failed-icon,
.payment-result-pending-icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 2.4rem;
}
.success-icon {
  background: var(--success);
  box-shadow: 0 10px 25px rgba(25, 135, 84, 0.24);
}
.access-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 13px;
  color: var(--brand);
  background: #f1edfa;
  font-size: 1.3rem;
}
/* 稿件 payment-result.html 的处理中提示框(style.css .alert/.alert-warning);收窄到本类,不连带收银台过期态。 */
.payment-result-processing {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 16px;
  color: #8b6800;
  background-color: #fffcef;
  border-color: #f2df8c;
}
.payment-result-processing i {
  flex: 0 0 auto;
  font-size: 1.25rem;
}
.payment-result-processing h3 {
  margin-bottom: 5px;
  font-size: .95rem;
  letter-spacing: normal;
}
.payment-result-processing p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
}
.support-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 16px;
}
.support-panel h3 {
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: normal;
}
.support-panel p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}
/* 支付失败与收银台不可用共用的警示圆章,配色取 danger。 */
.payment-result-failed-icon {
  background: #dc3545;
  box-shadow: 0 10px 25px rgba(220, 53, 69, .24);
  font-weight: 800;
  line-height: 1;
}
/* 支付与充值共用的确认中圆章,配色取 warning;白字在黄底上对比度不足,字形用深色。 */
.payment-result-pending-icon {
  color: #212529;
  background: #ffc107;
  box-shadow: 0 10px 25px rgba(255, 193, 7, .24);
}
.payment-result-reference code,
.support-panel code { word-break: break-all; }
@media (max-width: 767.98px) {
  .support-panel { flex-direction: column; align-items: stretch; }
  .support-panel .btn { width: 100%; }
}
.category-card {
  position: relative; min-height: 145px; padding: 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  border-radius: 14px; border: 1px solid var(--line); background: #fff;
  font-weight: 800; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.category-card:hover, .category-card.active { transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: rgba(227,59,46,.35); }
.category-vehicle { font-size: 2.4rem; filter: grayscale(.1); }

.about-collage { position: relative; min-height: 500px; }
.about-img { object-fit: cover; box-shadow: var(--shadow-md); }
.about-img-main { width: 66%; height: 430px; border-radius: 34px 8px 34px 8px; }
.about-img-small { position: absolute; right: 0; width: 43%; height: 210px; border-radius: 14px; border: 7px solid var(--soft); }
.about-img-small.top { top: 10px; }
.about-img-small.bottom { bottom: 10px; }
.experience-badge {
  position: absolute; left: 49%; top: 50%; transform: translate(-50%,-50%);
  width: 128px; height: 128px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border: 8px solid rgba(255,255,255,.75); box-shadow: var(--shadow-sm);
}
.experience-badge strong { font-size: 1.9rem; }
.experience-badge span { font-size: .65rem; max-width: 75px; }
.feature-row { display: flex; gap: .9rem; align-items: flex-start; }
.feature-check {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: var(--success);
}
.avatar-stack { display: flex; align-items: center; }
.avatar-stack img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; margin-left: -10px; }
.avatar-stack img:first-child { margin-left: 0; }
.avatar-stack > span { display: flex; flex-direction: column; margin-left: 10px; font-size: .78rem; }
.avatar-stack small { color: var(--muted); }

.car-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 8px 26px rgba(16,24,40,.04); transition: transform .22s ease, box-shadow .22s ease;
}
.car-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.car-card-media { position: relative; height: 190px; overflow: hidden; background: #eef1f5; }
.car-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.car-card:hover .car-card-media img { transform: scale(1.04); }
.car-card-media .badge { position: absolute; left: 12px; top: 12px; }
.heart-btn {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 8px 20px rgba(16,24,40,.12);
}
.heart-btn.active { background: var(--brand); color: #fff; }
.car-card-body { padding: 18px; }
.car-card-body h3 a:hover { color: var(--brand); }
.rating { white-space: nowrap; font-size: .76rem; font-weight: 800; }
.rating i { color: #f5a623; }
.car-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.car-specs span { font-size: .68rem; color: #475467; border-radius: 8px; background: #f7f8fa; padding: 8px 5px; text-align: center; }
.car-specs i { margin-right: 3px; color: var(--brand); }
.car-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 15px; }
.car-card-footer strong { font-size: 1.15rem; color: var(--brand); }
.car-card-footer small { color: var(--muted); font-size: .68rem; }

.how-section { position: relative; overflow: hidden; }
.step-list { display: flex; flex-direction: column; gap: 28px; }
.step-item { display: flex; gap: 14px; }
.step-item > span {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 6px rgba(227,59,46,.1);
}
.step-item h3 { font-size: .95rem; font-weight: 800; margin-bottom: 5px; }
.step-item p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.work-car-wrap { position: relative; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.work-car-wrap img { position: relative; z-index: 2; width: 115%; max-width: 520px; filter: drop-shadow(0 30px 24px rgba(16,24,40,.22)); }
.work-shape { position: absolute; border-radius: 35px; transform: rotate(-7deg); }
.shape-one { width: 72%; height: 52%; background: var(--brand); top: 25%; left: 13%; }
.shape-two { width: 54%; height: 35%; background: #a5b72b; bottom: 11%; left: 25%; transform: rotate(5deg); }

.location-card { position: relative; height: 230px; display: block; overflow: hidden; border-radius: 14px; box-shadow: var(--shadow-sm); }
.location-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.location-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(4,11,20,.8) 100%); }
.location-card span { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 1; color: #fff; display: flex; flex-direction: column; }
.location-card strong { font-size: .95rem; }
.location-card small { font-size: .66rem; opacity: .78; margin-top: 2px; }
.location-card:hover img { transform: scale(1.06); }

.stats-panel { background: linear-gradient(145deg, #3b2187, #6543b3); color: #fff; padding: 38px 28px; border-radius: 14px; overflow: hidden; position: relative; }
.stats-panel::before, .stats-panel::after { content: ""; position: absolute; border-radius: 50%; }
.stats-panel::before { width: 120px; height: 120px; background: var(--brand); right: -62px; bottom: -62px; }
.stats-panel::after { width: 70px; height: 70px; background: #ffde2f; right: -12px; bottom: -42px; }
.stats-panel .row > div { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.stats-panel i { font-size: 1.2rem; color: #cbd5e1; }
.stats-panel strong { font-size: 1.85rem; font-weight: 800; }
.stats-panel span { color: rgba(255,255,255,.65); font-size: .72rem; }

.carousel-indicators [data-bs-target] { background-color: var(--brand); width: 24px; height: 4px; border: 0; border-radius: 4px; }

.pricing-section { background: var(--navy); position: relative; overflow: hidden; }
.pricing-section::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 22px 22px; }
.pricing-stack { display: flex; flex-direction: column; gap: 14px; }
.price-card { background: #fff; border-radius: 12px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.price-card.featured { background: var(--brand); color: #fff; transform: scale(1.025); }
.price-card span { text-transform: uppercase; font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.price-card h3 { margin: 5px 0 2px; font-size: 1.55rem; font-weight: 800; }
.price-card h3 small { font-size: .7rem; font-weight: 600; opacity: .65; }
.price-card p { margin: 0; color: var(--muted); font-size: .72rem; }
.price-card.featured p { color: rgba(255,255,255,.75); }
.dark-accordion { --bs-accordion-bg: transparent; --bs-accordion-color: #fff; --bs-accordion-border-color: rgba(255,255,255,.12); --bs-accordion-btn-bg: transparent; --bs-accordion-btn-color: #fff; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: #fff; }
.dark-accordion .accordion-button { padding-left: 0; font-size: .9rem; font-weight: 700; box-shadow: none; }
.dark-accordion .accordion-button::after { filter: invert(1); }
.dark-accordion .accordion-body { padding-left: 0; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.7; }

.blog-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; transition: transform .22s ease, box-shadow .22s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.blog-card > a { display: block; height: 220px; overflow: hidden; }
.blog-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover img { transform: scale(1.04); }
.blog-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .66rem; margin-bottom: 12px; }
.blog-meta span { color: var(--brand); background: rgba(227,59,46,.08); padding: 5px 8px; border-radius: 999px; font-weight: 800; }
.blog-card h3 { font-size: 1rem; line-height: 1.55; font-weight: 800; }
.blog-card h3 a:hover { color: var(--brand); }
.read-link { font-size: .75rem; font-weight: 800; color: var(--brand); }

.app-banner { background: #eaf0f7; border-radius: 14px; padding: 54px 58px 10px; position: relative; overflow: hidden; }
.app-banner::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: #ffc928; right: 17%; bottom: -150px; }
.store-download-badge { display: flex; flex-wrap: wrap; gap: 9px; }
.store-download-badge img { width: 130px; }
.app-car { position: relative; z-index: 1; width: 115%; max-width: 590px; margin-bottom: -12px; filter: drop-shadow(0 20px 22px rgba(16,24,40,.2)); }

.site-footer { background: #0b1220; color: #fff; }
.footer-title { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; margin-bottom: 18px; color: #fff; }
/* 稿件的 .footer-links 未覆盖 margin,依赖 Bootstrap Reboot 的 ul 默认 margin-bottom:1rem;此处保留该 1rem 而不是清零,
   否则最高的一列(Support,6 条链接)矮 16px,页尾整体随之矮 16px(G9)。.contact-list 目前站内零消费方,继续整体清零。 */
.footer-links { list-style: none; padding: 0; margin: 0 0 1rem; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.footer-links li + li { margin-top: 10px; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .78rem; }
.footer-links a:hover { color: #fff; }
.contact-list { display: grid; gap: 16px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: .8rem; }
.contact-list i { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--brand); }
.contact-list span { display: flex; flex-direction: column; }
.contact-list small { color: rgba(255,255,255,.45); font-size: .62rem; margin-bottom: 2px; }
.newsletter-form .form-control, .newsletter-form .btn { min-height: 45px; font-size: .78rem; }
.newsletter-form .form-control { border-radius: 10px; border-color: #d8dee8; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.45); font-size: .7rem; }
.footer-bottom a { color: rgba(255,255,255,.65); font-weight: 700; }
.footer-bottom a:hover,
.footer-bottom a:focus-visible { color: #fff; }
.social-links { display: flex; gap: 9px; }
/* Bootstrap 5.3 的 navbar-brand 内边距取自 .navbar 上的变量,页脚不在 .navbar 内会落成 0;按稿补回 5px。 */
.site-footer .navbar-brand { padding-block: .3125rem; }
/* 无地址时的禁用态 span 与链接同一圆底,只有链接响应悬停。 */
.social-links a,
.social-links .social-link-disabled { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; }
.social-links .social-link-disabled { cursor: default; }
.social-links a:hover { background: var(--brand); }
.back-to-top { position: fixed; right: 22px; bottom: 150px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease; z-index: 1040; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

.page-hero { padding: 150px 0 20px; color: #fff; background: radial-gradient(circle at 82% 20%, rgba(255, 222, 47, .22), transparent 25%), linear-gradient(135deg, #2f1b70 0%, var(--brand) 50%, #6543b3 100%); }
/* Search 与 SEO 线路页的可见标题是 <p>:那一页有桌面与移动两套 Hero 标题、两者只有一套在屏上,
   都写成 <h1> 会让文档里出现两个 h1(爬虫按 DOM 数,不按可见性),只留一个又会在另一档的 display:none
   容器里、读屏拿不到。因此改成一个 visually-hidden 的 <h1> + 两个 <p>,选择器在此并列。
   line-height 与 h1 的 Bootstrap reboot 取值相同,对既有 .page-hero h1 是等值补写。 */
.page-hero h1,
.page-hero .page-hero-title { color: #fff; font-weight: 600 !important; letter-spacing: -.03em; font-size: 1.8rem; line-height: 1.2; }
/* Search 与 SEO 线路页的失败态只有 Hero + 搜索表单两块,总高不到一个视口,页脚下方会露出一条
   body 底色的空白带(1440×900 实测 152px,页脚自身 307px)。Hero 的 padding-top 已经让出固定页头,
   本容器从 main 顶端起算,因此一个视口高恰好把页脚顶部推到视口底部;由此产生的一个页脚高度的滚动是接受的。
   取 dvh 不取 vh 的理由同 `.site-state-page`:移动端浏览器工具栏收起时 100vh 大于可见高度,会挤出一条
   本不需要的滚动,而这两档失败态正是短页。壳级 flex 修法会一次影响全部客户页,不在本页范围内。 */
.search-state-page { min-height: 100dvh; }

.search-summary { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 14px; padding: 20px; position: relative; z-index: 2; }
.filter-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 20px; position: sticky; top: 100px; }
.filter-card h2 { font-size: 1.2rem; font-weight: 800; }
.filter-card .form-check-label { font-size: .78rem; color: #475467; }
.filter-block + .filter-block { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.list-toolbar p { margin: 0; color: var(--muted); font-size: .82rem; }
.car-list-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 18px; }
.car-list-card .media { height: 100%; min-height: 230px; }
.car-list-card .media img { width: 100%; height: 100%; object-fit: cover; }
.car-list-card .content { padding: 22px; }
.car-list-card .price { font-size: 1.25rem; font-weight: 800; color: var(--brand); }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.detail-gallery .main-photo { height: 440px; }
.detail-gallery .sub-photo { height: 212px; }
.detail-section { border-bottom: 1px solid var(--line); padding: 30px 0; }
.detail-section h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 18px; }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.spec-box { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #fff; }
.spec-box i { color: var(--brand); font-size: 1.2rem; }
.spec-box span { display: block; color: var(--muted); font-size: .66rem; margin-top: 8px; }
.spec-box strong { display: block; font-size: .82rem; margin-top: 2px; }
.booking-card { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: #fff; box-shadow: var(--shadow-sm); position: sticky; top: 100px; }
.booking-card .price-big { font-size: 1.8rem; font-weight: 800; color: var(--brand); }
.booking-card .form-control, .booking-card .form-select { min-height: 48px; border-radius: 9px; }
.review-bar { height: 8px; border-radius: 999px; background: #edf0f3; overflow: hidden; }
.review-bar > span { display: block; height: 100%; background: #f5a623; border-radius: inherit; }
.owner-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.owner-card img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }

@media (max-width: 1199.98px) {
  .hero-section { min-height: 900px; }
  .booking-panel { bottom: -110px; }
  .benefit-strip { margin-top: 110px; }
  .car-specs { grid-template-columns: 1fr; }
  .work-car-wrap img { width: 105%; }
}

@media (max-width: 991.98px) {
  .section-padding { padding: 74px 0; }
  .site-header .navbar-collapse { background: #fff; padding: 16px; border-radius: 12px; margin-top: 10px; box-shadow: var(--shadow-sm); }
  .hero-section { min-height: 1020px; background-position: 67% center; }
  .hero-section h1 { max-width: 650px; }
  .booking-panel { bottom: -155px; }
  .benefit-strip { margin-top: 155px; }
  .about-collage { max-width: 650px; margin-inline: auto; }
  .work-car-wrap { min-height: 280px; }
  .work-car-wrap img { max-width: 480px; }
  .app-car { width: 85%; }
  .page-hero { padding-top: 110px; }
  .page-hero h1,
  .page-hero .page-hero-title {font-size: 1.5rem;}
  .filter-card, .booking-card { position: static; }
}

@media (max-width: 767.98px) {
  .section-padding { padding: 62px 0; }
  .hero-section { min-height: 1090px; }
  .min-vh-70 { min-height: 590px; }
  .hero-section h1 { font-size: 2.65rem; }
  .booking-panel { bottom: -270px; padding: 20px; }
  .benefit-strip { margin-top: 270px; }
  .booking-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .booking-tabs .nav-link { white-space: nowrap; }
  .about-collage { min-height: 430px; }
  .about-img-main { height: 365px; }
  .about-img-small { height: 170px; }
  .experience-badge { width: 110px; height: 110px; }
  .location-card { height: 205px; }
  .app-banner { padding: 36px 26px 0; }
  .app-banner h2 { font-size: 2rem; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-hero { padding-top: 100px; padding-bottom: 20px; }
  .page-hero h1,
  .page-hero .page-hero-title {font-size: 1.2rem;}
  .detail-gallery .main-photo { height: 330px; }
  .detail-gallery .sub-photo { height: 160px; }
}

@media (max-width: 575.98px) {
  .hero-section { min-height: 1140px; }
  .hero-section h1 { font-size: 2.2rem; }
  .booking-panel { left: 8px; right: 8px; bottom: -332px; }
  .benefit-strip { margin-top: 332px; }
  .about-collage { min-height: 380px; }
  .about-img-main { width: 77%; height: 330px; }
  .about-img-small { width: 45%; height: 145px; border-width: 5px; }
  .experience-badge { left: 57%; }
  .car-card-media { height: 210px; }
  .car-specs { grid-template-columns: repeat(3,1fr); }
  .work-car-wrap img { width: 115%; }
  .price-card { padding: 18px; }
  .app-car { width: 120%; margin-left: -10%; }
  .search-summary { margin-top: -20px; }
  .list-toolbar { align-items: flex-start; flex-direction: column; }
}

/* 移除针对 Bootstrap 5.1 的 .z-1 与 .text-bg-light/-success/-warning 垫片:5.3.8 自带这四个,    静态副本会按源序压过原生实现并冻结 --bs-bg-opacity。 */

.site-header.header-transparent {
  color: #fff;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.header-transparent .header-topbar {
  min-height: 38px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: .72rem;
  font-weight: 700;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* 顶栏文字色只作用于顶栏自身的链接与控件: 漏掉 :not(.dropdown-item) 时这两条会压过
   .compact-dropdown .dropdown-item 的深色(3 类 + 类型选择器胜过 2 类), 白色文字落在白色菜单面上,
   顶端未滚动时国家与语言菜单整列不可读。 */
.site-header.header-transparent .header-topbar a:not(.dropdown-item),
.site-header.header-transparent .topbar-control { color: rgba(255,255,255,.9); }
.topbar-control { border: 0; background: transparent; padding: 0; font-size: .72rem; font-weight: 700; }
.topbar-count { position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: #a5b72b; color: #101828; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; }
.site-header.header-transparent .navbar { background: #472f92d9; transition: background .25s ease, box-shadow .25s ease, padding .25s ease; }
.site-header.header-transparent .brand-mark { color: #fff; }
.site-header.header-transparent .navbar .nav-link { color: rgba(255,255,255,.92); }
.site-header.header-transparent .navbar .nav-link:hover,
.site-header.header-transparent .navbar .nav-link.active { color: #fff; }
.site-header.header-transparent .navbar .nav-link.active { position: relative; }
.site-header.header-transparent .navbar .nav-link.active::after { content: ""; position: absolute; left: 50%; bottom: .15rem; width: 24px; height: 3px; border-radius: 3px; transform: translateX(-50%); background: var(--brand-dark); }
.site-header.header-transparent .theme-toggle { color: #fff; }
.site-header.header-transparent .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
/* Bootstrap 的 .navbar-toggler:focus 自带 outline:0 并把指示交给 box-shadow,而视图上的 shadow-none 是
   box-shadow:none !important——两者相加等于零指示,顶部那条 :focus-visible 兜底也压不过它(0,2,0)。
   透明页头上的颜色由上面深色底那条覆盖(0,4,0)接管,这里只负责把环拿回来。 */
.site-header .navbar-toggler:focus-visible { outline: 3px solid rgba(71, 47, 146, .7); outline-offset: 2px; }
/* 滚动态同为紫底,字标不切换。 */
.site-header.scrolled { background: rgba(255,255,255,.98); box-shadow: 0 8px 30px rgba(15,23,42,.09); }
.site-header.scrolled .header-topbar { color: #fff; background: var(--brand-hover); }
.site-header.scrolled .header-topbar a:not(.dropdown-item),
.site-header.scrolled .topbar-control { color: #fff; }
.site-header.scrolled .navbar { background: var(--brand); padding-top: .7rem !important; padding-bottom: .7rem !important; }
.site-header.scrolled .brand-mark { color: var(--ink); }
.site-header.scrolled .navbar .nav-link { color: #fff; }
.site-header.scrolled .navbar .nav-link:hover,
.site-header.scrolled .navbar .nav-link.active { color: #fff; }
.site-header.scrolled .theme-toggle { color: var(--ink); }
.site-header.scrolled .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
.site-header.scrolled .nav-actions .btn-light { border: 1px solid var(--line); }

.bus-booking-panel { padding: 0; overflow: hidden; border-radius: 15px; }
/* tab 外壳浮在面板上沿(负外边距),与稿件 index.html 的 service-tabs-wrap 同款。 */
.service-tabs-wrap {
  width: fit-content;
  max-width: 100%;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
  margin: -25px 16px 0;
}
.booking-panel-body { padding: 16px; }
.trip-type .form-check-label { font-size: .82rem; font-weight: 700; color: #475467; }
.trip-type .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.booking-tagline { font-size: .83rem; font-weight: 800; color: var(--ink); }
/* 末列与稿件一致固定 130px(index.html/.search-submit 同款窄按钮,短文案两行显示)。文案变长(语言差异、
   未来文案调整)时不再靠撑宽这一列承接——固定轨道宽度不变,交给 .search-submit 允许换行(见下),
   在同一 130px 宽度内多占一行高度,不会撑破 .booking-panel 容器造成整页横向溢出。 */
.bus-search-form { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .82fr) minmax(0, .82fr) minmax(0, .9fr) 130px; border: 1px solid var(--line); border-radius: 10px; overflow: visible; }
.search-field { min-height: 104px; padding: 15px 17px; border-right: 1px solid var(--line); background: #fff; }
.search-field label { display: block; color: #667085; font-size: .69rem; font-weight: 800; margin-bottom: 8px; }
.search-value { display: flex; align-items: flex-start; gap: 10px; }
.search-value > i { color: var(--brand); margin-top: 7px; }
.search-value > div { min-width: 0; flex: 1; }
.search-value .form-control,
.search-value .form-select { border: 0; min-height: auto; border-radius: 0; padding: 0; box-shadow: none; font-weight: 800; color: var(--ink); background-color: transparent; }
.search-value small { display: block; color: #667085; font-size: .66rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-route { position: absolute; z-index: 999; left: calc(21% - 14px); top: 51%; width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(123, 123, 123, 0.25);}
/* 与稿件同款窄按钮(固定 130px 列宽,见上)。短文案(当前三语「Search Buses」/「搜索巴士」/「Cari Bas」)
   在这个宽度下自然换行成两行,与稿件一致;超长文案(未来调整)同样靠换行占用更多行高,不做省略号裁切、
   不再让列宽被撑宽——列宽固定后撑宽会连带撑破 .booking-panel 容器造成整页横向溢出。完整文案落 title
   (见 _SearchForm.cshtml)兜底极端情形下的可读性。 */
.search-submit { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .3rem; min-width: 0; margin: -1px; border-radius: 0 10px 10px 0; font-weight: 800; white-space: normal; line-height: 1.2; }
.search-submit > span { min-width: 0; }
.search-submit > i { flex: 0 0 auto; }

.route-card { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .22s ease, box-shadow .22s ease; }
.route-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.route-card-image { position: relative; height: 170px; overflow: hidden; }
.route-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.route-card:hover .route-card-image img { transform: scale(1.05); }
.route-card-image .badge { position: absolute; top: 12px; left: 12px; }
.route-card-body { padding: 17px; }
.route-card-body > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; }
.route-card-body > div i { color: var(--brand); }
.route-card-body > span { display: block; margin-top: 10px; color: var(--muted); font-size: .72rem; }
.route-card-body b { color: var(--brand); font-size: .92rem; }

.bus-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 26px rgba(16,24,40,.04); transition: transform .22s ease, box-shadow .22s ease; }
.bus-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.bus-card-media { position: relative; height: 215px; background: #e9edf2; overflow: hidden; }
.bus-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bus-card:hover .bus-card-media img { transform: scale(1.04); }
.bus-card-media .badge { position: absolute; left: 12px; top: 12px; }
.bus-card-body { padding: 20px; }
.operator-name { color: var(--brand); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
.journey-timeline { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 10px; background: #f8fafc; border-radius: 10px; padding: 13px; }
.journey-timeline > div { display: flex; flex-direction: column; }
.journey-timeline strong { font-size: 1rem; }
.journey-timeline small { color: var(--muted); font-size: .62rem; margin-top: 2px; }
.journey-timeline > span { display: flex; flex-direction: column; align-items: center; color: var(--brand); position: relative; }
.journey-timeline > span::before,
.journey-timeline > span::after { content: ""; position: absolute; top: 8px; width: 32%; height: 1px; background: #cbd5e1; }
.journey-timeline > span::before { left: 0; }
.journey-timeline > span::after { right: 0; }
.journey-timeline > span small { color: var(--muted); white-space: nowrap; margin-top: 4px; }
.bus-amenities { display: flex; flex-wrap: wrap; gap: 7px; }
.bus-amenities span { background: #f5f7fa; color: #475467; border-radius: 7px; padding: 7px 9px; font-size: .65rem; font-weight: 700; }
.bus-amenities i { color: var(--brand); margin-right: 4px; }
.bus-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.bus-card-footer > div { display: flex; align-items: baseline; flex-wrap: wrap; }
.bus-card-footer small { width: 100%; color: var(--muted); font-size: .62rem; }
.bus-card-footer strong { font-size: 1.25rem; color: var(--brand); }
.bus-card-footer span { color: var(--muted); font-size: .65rem; margin-left: 3px; }
.static-heart { position: static; flex: 0 0 36px; border: 1px solid var(--line); box-shadow: none; }

.bus-illustration-card { min-height: 430px; border-radius: 28px; position: relative; overflow: hidden; background: linear-gradient(145deg, #182337, #0d1524); display: flex; align-items: center; justify-content: center; }
.bus-illustration-card::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--brand); opacity: .9; top: 55px; right: 70px; }
.bus-illustration-card::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; background: #a5b72b; opacity: .82; bottom: -40px; left: 40px; }
.bus-illustration-icon { position: relative; z-index: 2; color: #fff; font-size: 10rem; filter: drop-shadow(0 25px 25px rgba(0,0,0,.25)); }
.road-line { position: absolute; left: 0; right: 0; bottom: 75px; height: 5px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 35px, transparent 35px 65px); }
.floating-ticket, .floating-rating { position: absolute; z-index: 3; background: #fff; color: var(--ink); border-radius: 12px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; padding: 13px 15px; }
.floating-ticket { left: 22px; top: 28px; }
.floating-ticket > i { color: var(--brand); font-size: 1.4rem; }
.floating-ticket div, .floating-rating { flex-direction: column; align-items: flex-start; }
.floating-ticket strong, .floating-rating strong { font-size: .78rem; }
.floating-ticket small, .floating-rating small { color: var(--muted); font-size: .6rem; }
.floating-rating { right: 22px; bottom: 26px; gap: 2px; }
.floating-rating > i { color: #f5a623; }

.offer-section { padding-top: 78px; padding-bottom: 78px; }
.offer-card { position: relative; overflow: hidden; border-radius: 18px; padding: 42px; min-height: 300px; color: #fff; }
.offer-card-primary { background: linear-gradient(135deg, var(--brand), #f36b5f); }
.offer-card-dark { background: linear-gradient(135deg, #101828, #25334c); }
.offer-label { display: inline-block; text-transform: uppercase; letter-spacing: .1em; font-size: .65rem; font-weight: 800; background: rgba(255,255,255,.17); border-radius: 999px; padding: 7px 10px; }
.offer-card h2 { max-width: 520px; font-weight: 800; margin: 18px 0 10px; }
.offer-card p { max-width: 500px; color: rgba(255,255,255,.82); }
.offer-icon { position: absolute; right: 34px; bottom: -34px; font-size: 10rem; color: rgba(255,255,255,.13); transform: rotate(-10deg); }
.bus-app-banner { padding-bottom: 45px; }
.app-phone { width: 230px; height: 360px; margin: 0 auto -90px; border: 9px solid #101828; border-radius: 34px; background: #f0f0f0 url('/images/web/app/home.jpg?v=tliner') no-repeat top / 100%; box-shadow: 0 25px 40px rgba(16,24,40,.2); position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.app-phone > i { position: absolute; top: 14px; font-size: 1rem; color: #101828; }
.phone-ticket { width: 82%; background: #fff; border-radius: 15px; padding: 18px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.phone-ticket span { font-weight: 800; }
.phone-ticket i { color: var(--brand); }
.phone-ticket strong, .phone-ticket small { grid-column: 1 / -1; }
.phone-ticket strong { color: var(--brand); margin-top: 15px; }
.phone-ticket small { color: var(--muted); font-size: .62rem; }

.bus-page-hero { background: linear-gradient(135deg, rgba(16,24,40,.94), rgba(29,41,57,.86)), url("/images/web/slider/bus.jpg") center / cover no-repeat; }
.search-summary .form-control, .search-summary .form-select { border-radius: 9px; font-size:0.9rem;}
.bus-list-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: 18px; transition: box-shadow .2s ease, transform .2s ease; }
.bus-list-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.bus-list-card .media { height: 100%; min-height: 265px; }
.bus-list-card .media img { width: 100%; height: 100%; object-fit: cover; }
.bus-list-card .content { padding: 22px; }
.bus-list-card .price { font-size: 1.3rem; font-weight: 800; color: var(--brand); }
.breadcrumb-dark .breadcrumb-item a { color: rgba(255,255,255,.68); }
.breadcrumb-dark .breadcrumb-item.active { color: #fff; }
.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }
.bus-interior-placeholder { border-radius: 12px; background: linear-gradient(145deg, #f3f5f8, #e5eaf0); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--brand); gap: 8px; }
.bus-interior-placeholder i { font-size: 2.1rem; }
.bus-interior-placeholder span { color: var(--ink); font-weight: 800; font-size: .78rem; }
.journey-summary { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 20px; align-items: center; }
.journey-summary > div:not(.route-line) { display: flex; flex-direction: column; }
.journey-summary strong { font-size: 1.8rem; }
.journey-summary small { color: var(--muted); font-size: .72rem; line-height: 1.6; }
.route-date { color: var(--brand); font-size: .65rem; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.route-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; color: var(--brand); }
.route-line > span { height: 2px; background: #d4dae2; }
.route-line i { width: 40px; height: 40px; border-radius: 50%; background: rgba(227,59,46,.1); display: flex; align-items: center; justify-content: center; }
.route-line small { grid-column: 1 / -1; text-align: center; margin-top: 7px; }
.seat-layout { background: #f7f9fc; border: 1px solid var(--line); border-radius: 18px; padding: 24px; max-width: 560px; }
.driver-seat { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font-size: .7rem; margin-bottom: 18px; }
.seat-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .65rem; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.seat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.seat-dot { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.seat-dot.available { background: #fff; border: 1px solid #aeb7c4; }
.seat-dot.selected { background: var(--brand); }
.seat-dot.occupied { background: #cbd5e1; }
.seat-grid { display: grid; grid-template-columns: repeat(5, 46px); gap: 11px; justify-content: center; padding: 24px 0; }
.seat-button { width: 46px; height: 42px; border: 1px solid #aeb7c4; border-radius: 8px 8px 5px 5px; background: #fff; color: #475467; font-size: .65rem; font-weight: 800; transition: .15s ease; }
.seat-button:nth-child(5n+3) { visibility: hidden; pointer-events: none; }
.seat-button:hover:not(:disabled), .seat-button.selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.seat-button:disabled { background: #cbd5e1; border-color: #cbd5e1; color: #7b8796; cursor: not-allowed; }
.seat-exit { color: var(--muted); font-size: .68rem; text-align: right; border-top: 1px solid var(--line); padding-top: 14px; }

@media (max-width: 1199.98px) {
  .bus-booking-panel { bottom: -105px; }
  .benefit-strip { margin-top: 105px; }
  .bus-search-form { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .82fr) minmax(0, .82fr) minmax(0, .9fr) 115px; }
}
@media (max-width: 991.98px) {
  .site-header.header-transparent .navbar-collapse { background: #fff; padding: 16px; border-radius: 12px; margin-top: 10px; box-shadow: var(--shadow-sm); }
  .site-header.header-transparent .navbar-collapse .nav-link { color: #344054; }
  .site-header.header-transparent .navbar-collapse .nav-link.active { color: var(--brand); }
  .site-header.header-transparent .navbar-collapse .nav-link.active::after { left: 0; transform: none; }
  .site-header.header-transparent .navbar-collapse .theme-toggle { color: var(--ink); }
  .site-header.header-transparent .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
  .site-header .navbar-collapse .nav-link:hover { color: var(--brand); }
  .bus-booking-panel { bottom: -275px; }
  .benefit-strip { margin-top: 275px; }
  .bus-search-form { grid-template-columns: 1fr 1fr; overflow: hidden; }
  .search-field { border-bottom: 1px solid var(--line); }
  .search-field:nth-of-type(2n) { border-right: 0; }
  .search-submit { min-height: 62px; grid-column: 1 / -1; border-radius: 0; }
  .swap-route { left: calc(50% - 16px); top: 18%; }
  .bus-illustration-card { min-height: 360px; }
  .app-phone { margin-bottom: -110px; }
}
@media (max-width: 767.98px) {
  .bus-booking-panel { bottom: -430px; left: 8px; right: 8px; }
  .benefit-strip { margin-top: 430px; }
  .bus-search-form { grid-template-columns: 1fr; }
  .search-field { min-height: 92px; border-right: 0; }
  .swap-route { top: 18%; right: 18px; left: auto; transform: rotate(90deg); }
  .journey-summary { grid-template-columns: 1fr; text-align: center; }
  .journey-summary .text-end { text-align: center !important; }
  .route-line { width: 80%; margin: 0 auto; }
  .seat-grid { grid-template-columns: repeat(5, 40px); gap: 8px; }
  .seat-button { width: 40px; height: 38px; }
  .offer-card { padding: 30px; }
  .app-phone { width: 210px; height: 350px; }
}
@media (max-width: 575.98px) {
  .bus-booking-panel { bottom: -474px; }
  .benefit-strip { margin-top: 474px; }
  .bus-card-media { height: 205px; }
  .journey-timeline { grid-template-columns: 1fr 1fr 1fr; }
  .bus-list-card .media { min-height: 210px; }
  .seat-layout { padding: 16px 10px; }
  .seat-grid { grid-template-columns: repeat(5, 36px); gap: 7px; }
  .seat-button { width: 36px; height: 35px; font-size: .58rem; }
  .bus-illustration-icon { font-size: 7rem; }
  .floating-ticket { left: 12px; top: 14px; }
  .floating-rating { right: 12px; bottom: 15px; }
}

.site-header .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .15);
  padding: 8px;
  margin-top: 10px;
}
.site-header .dropdown-toggle::after { margin-left: .45rem; vertical-align: .14em; }
.compact-dropdown { min-width: 190px; }
.compact-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 9px;
  color: #344054;
  font-size: .85rem;
  font-weight: 700;
}
.compact-dropdown .dropdown-item:hover,
.compact-dropdown .dropdown-item.active {
  color: var(--brand);
  background: #fffcef;
}
.country-flag {
  display: block;
  width: 26px;
  height: 16px;
  min-width: 26px;
  flex: 0 0 26px;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
  background: #fff;
  image-rendering: auto;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .18), 0 1px 2px rgba(16, 24, 40, .12);
}
.country-option-flag { margin-right: 2px; }
/* 没有旗帜图的市场在紧凑档里的回落标:占位与旗帜同宽,按钮宽度不随市场变。 */
.country-code-fallback {
  display: block;
  min-width: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
}
[data-country-button] {
  white-space: nowrap;
  line-height: 1;
}
[data-country-button] [data-country-label] { line-height: 1.2; }
.currency-selector-button,
[data-currency-button] {
  white-space: nowrap;
  line-height: 1;
}
.currency-display {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  min-width: 0;
}
.currency-code {
  color: inherit;
  font-weight: 800;
  letter-spacing: .025em;
}
.currency-separator {
  color: currentColor;
  opacity: .58;
}
.currency-name {
  color: inherit;
  font-weight: 600;
  opacity: .86;
}
.currency-dropdown-menu { min-width: 230px; }
.currency-dropdown-menu .currency-option {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.currency-option-code {
  font-weight: 800;
  letter-spacing: .025em;
}
.currency-option-name {
  color: #667085;
  font-weight: 600;
}
.currency-option.active .currency-option-name,
.currency-option:hover .currency-option-name { color: inherit; }
.nav-dropdown { min-width: 285px; }
.nav-dropdown .dropdown-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  color: #344054;
}
.nav-dropdown .dropdown-item > i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--brand);
  background: var(--brand-soft);
}
.nav-dropdown .dropdown-item span { display: flex; flex-direction: column; line-height: 1.25; }
.nav-dropdown .dropdown-item strong { font-size: .85rem; }
.nav-dropdown .dropdown-item small { margin-top: 2px; color: var(--muted); font-size: .75rem; font-weight: 500; }
.nav-dropdown .dropdown-item:hover { background: #f8fafc; color: var(--brand); }
.mobile-nav-utilities { padding-top: 12px; border-top: 1px solid var(--line); }
.mobile-country-button,
.mobile-currency-button,
.mobile-language-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #344054;
  background: #fff;
  font-size: .78rem;
  font-weight: 800;
}
.mobile-currency-button .currency-name { overflow: hidden; text-overflow: ellipsis; }

.transport-heading .section-kicker { font-size: .62rem; }
.transport-helper { color: #667085; font-size: .75rem; font-weight: 700; }
/* 搜索面板住在本节内部并向下探出横幅;isolation 把面板的 z-index 关在本节的层叠上下文里,
   紧随其后的信任区用负外边距上移,不给本节显式层级就会盖住面板探出的下半截。 */
.hero-static-section { padding-top: 0; background: #fff; position: relative; isolation: isolate; z-index: 2; }
.hero-static-banner { position: relative; isolation: isolate; display: flex; padding-top: 150px; width: 100%; min-height: 500px; overflow: hidden; background-color: var(--brand); background-image: url("/images/web/slider/hero.jpg"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; }
.hero-static-banner::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(15, 0, 89, 1) 0%, rgba(47, 28, 99, .7) 50%, rgba(8, 18, 30, 0) 100%), linear-gradient(90deg, rgba(26, 11, 89, .1) 0%, rgba(71, 47, 146, .1) 40%, rgba(8, 18, 30, 0) 70%); }
.hero-static-content { position: relative; z-index: 2; }
.hero-static-content h1 { margin-top: 20px; font-size: 1.9rem; line-height: 2.35rem; text-shadow: 2px 2px 16px rgb(44, 61, 134); }
.hero-static-content .lead { margin-bottom: 30px; font-size: 1.15rem; font-weight: 600; text-shadow: 2px 2px 16px rgb(44, 61, 134); }
.hero-static-content .lead span { color: var(--brand-secondary); }
.hero-static-content .lead strong { text-decoration: underline; }
/* 横幅右下的巴士插图;两只车头灯是 ::before/::after 的光斑,按图片百分比定位,reduced-motion 下不闪。 */
.hero-bus { position: absolute; right: 50px; bottom: 15px; width: 580px; }
.hero-bus img { display: block; width: 100%; height: auto; }
.hero-bus::before,
.hero-bus::after { position: absolute; z-index: 2; content: ""; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 250, 190, .95) 45%, rgba(255, 230, 100, .6) 65%, transparent 100%); box-shadow: 0 0 8px 3px rgba(255, 255, 255, .95), 0 0 20px 8px rgba(255, 245, 180, .7), 0 0 40px 15px rgba(255, 220, 100, .35); filter: blur(1px); opacity: 0; animation: heroBusHeadlightBlink 4s infinite; }
.hero-bus::before { top: 76%; left: 69%; width: 9%; height: 4%; transform: rotate(16deg); }
.hero-bus::after { top: 77%; left: 91%; width: 6%; height: 4%; transform: rotate(-20deg); }
@keyframes heroBusHeadlightBlink {
  0%, 8% { opacity: 0; }
  11%, 19% { opacity: 1; }
  23% { opacity: 0; }
  27%, 36% { opacity: 1; }
  40%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bus::before,
  .hero-bus::after { animation: none; opacity: 0; }
}
.hero-booking-container { position: relative !important; z-index: 6; margin-top: -20px; }
.hero-booking-container .booking-panel { position: relative; right: auto; bottom: auto; left: auto; width: 100%; }

/* 推荐线路条(稿件 .booking-featured-route*):Hero 标题下方的玻璃胶囊,巴士图标沿容器循环平移,reduced-motion 下定格居中。 */
.booking-featured-route { position: static; z-index: auto; width: fit-content; max-width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; margin: 0 auto; padding: .36rem .78rem; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; color: var(--brand); background: rgba(255, 255, 255, .92); box-shadow: 0 8px 24px rgba(31, 20, 83, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .92rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.booking-featured-route-label { display: inline-flex; align-items: center; gap: .32rem; margin-right: .08rem; padding-right: .52rem; border-right: 1px solid rgba(88, 63, 153, .14); color: #667085; font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.booking-featured-route-bus { position: relative; flex: 0 0 30px; width: 30px; height: 30px; display: block; overflow: hidden; border-radius: 999px; color: var(--brand); background: #472f9212; }
.booking-featured-route-bus img { position: absolute; top: 50%; left: 0; width: 30px; line-height: 1; will-change: transform; animation: bookingRouteBusMove 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .booking-featured-route-bus img { animation: none; left: 50%; transform: translate(-50%, -50%); }
}
.booking-featured-route-stop { color: var(--brand); }
.booking-featured-route-arrow { color: var(--brand); font-size: .62rem; }

@media (max-width: 1670px) {
  .hero-static-banner { min-height: 450px; }
  .hero-static-content h1 { margin-top: 10px; }
  .hero-bus { right: 150px; width: 500px; }
}
@media (max-width: 1400px) {
  .hero-bus { right: 50px; }
}
@media (max-width: 991.98px) {
  .hero-static-banner { min-height: 350px; padding-top: 80px; }
  .hero-static-content h1 { margin-top: 30px; font-size: 1.3rem; }
  .hero-static-content .lead { margin-bottom: 20px; font-size: .95rem; }
  .hero-bus { right: 10px; width: 300px; }
}
@media (max-width: 767.98px) {
  .hero-static-banner { min-height: 450px; }
  .hero-static-content h1 { font-size: 1.6rem; }
  .hero-bus { bottom: 0; }
  .hero-booking-container { margin-top: 55px; }
}
@media (max-width: 575.98px) {
  .hero-static-banner { min-height: 450px; background-position: left bottom; }
  .hero-static-content h1 { font-size: 1.2rem; line-height: 1.6rem; }
  .hero-static-content .lead { font-size: .8rem; }
  .hero-bus { left: 50px; }
  .booking-featured-route-label { display: none; }
  .hero-booking-container { margin-top: 40px; }
}
@keyframes bookingRouteBusMove {
  from { transform: translate3d(-100%, -50%, 0); }
  to { transform: translate3d(24px, -50%, 0); }
}
.transport-tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  width: auto;
  max-width: 100%;
  overflow: visible;
}
.transport-tabs .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 0;
  border-radius: 0;
  color: #667085;
  background: transparent;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.transport-tabs .nav-link::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  max-width: calc(100% - 24px);
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--brand);
  content: "";
  transform: translateX(-50%);
  transition: width .2s ease;
}
.transport-tabs .nav-link:hover { color: var(--brand); background: rgba(16, 24, 40, .025); }
.transport-tabs .nav-link.active { color: var(--brand); font-weight: 800; }
.transport-tabs .nav-link.active::after { width: 96px; }
.transport-tabs .nav-link:focus-visible {
  z-index: 1;
  border-radius: 8px;
  outline: 3px solid rgba(88, 63, 153, .3);
  outline-offset: -4px;
}
.transport-tabs .nav-link strong { overflow: hidden; font: inherit; text-overflow: ellipsis; }
.transport-tabs .nav-link:disabled { color: #98a2b3; background: transparent; cursor: not-allowed; opacity: 1; }
.transport-tabs .nav-link:disabled:hover { color: #98a2b3; background: transparent; }
.transport-tabs .nav-link:disabled::after { display: none; }
.coming-soon {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 999px;
  color: #7a5d00;
  background: rgba(255, 222, 47, .25);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.transport-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: .95rem;
  line-height: 1;
}
.active-transport-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #475467;
  background: #f4f6f8;
  font-size: .68rem;
  font-weight: 800;
}
.active-transport-label i { color: var(--brand); }
.transport-form-stage { position: relative; min-height: 106px; }
.transport-form { display: none; width: 100%; }
.transport-form.is-active { display: grid; animation: transportFormIn .32s cubic-bezier(.2,.75,.25,1) both; }
.transport-form.is-leaving { display: grid; position: absolute; inset: 0; pointer-events: none; animation: transportFormOut .14s ease both; }
@keyframes transportFormIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes transportFormOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}

@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover > .nav-dropdown { display: block; margin-top: 0; }
}
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { max-height: calc(100vh - 95px); }
  .nav-dropdown { min-width: 100%; box-shadow: none !important; margin-top: 2px !important; }
  .nav-dropdown .dropdown-item { grid-template-columns: 30px 1fr; }
  .nav-dropdown .dropdown-item > i { width: 30px; height: 30px; }
  .transport-form-stage { min-height: 273px; }
}
@media (max-width: 767.98px) {
  .booking-panel-body { padding: 17px; }
  .site-header.header-transparent .navbar .nav-link.active::after { left: 8%; }
  .transport-heading { text-align: left; }
  .transport-helper { display: none; }
  .transport-form-stage { min-height: 528px; }
  }
@media (max-width: 575.98px) {
  .service-tabs-wrap { padding: 0 8px; }
  .transport-tabs .nav-link { gap: 6px; min-height: 48px; padding: .65rem .5rem; font-size: .8125rem; }
  .transport-tab-icon { font-size: .875rem; }
  .transport-tabs .nav-link.active::after { width: 80px; }
  .active-transport-label { align-self: flex-start; }
  .transport-form-stage { min-height: 528px; }
}
@media (prefers-reduced-motion: reduce) {
  .transport-form.is-active,
  .transport-form.is-leaving { animation: none; }
}



.bus-booking-panel,
.transport-form-stage,
.transport-form.is-active {
    overflow: visible;
}

.location-trigger-field {
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
}

    .location-trigger-field:hover {
        background: #fcfcfd;
    }

    .location-trigger-field.is-location-open {
        z-index: 7;
        background: #fff;
        box-shadow: inset 0 0 0 2px rgb(255, 243, 187);
    }

/* 输入框即 typeahead(ADR-0083):可编辑,光标可见,与面板内不再有第二个搜索框。 */
.location-trigger {
    cursor: text;
    text-overflow: ellipsis;
}

/* 焦点环由容器给,不是这里:顶部的 :focus-visible 兜底压不过 Bootstrap 的 .form-control:focus
   { outline: 0 }(0,1,0 对 0,2,0),而 .search-value .form-control 又把 box-shadow 关了,
   这个输入自己无论如何画不出环。删掉下面这条只是让它变回 Bootstrap 那条,指示照样没有。 */
    .location-trigger:focus {
        outline: 0;
    }

/* 每端一个清除按钮,沿用回程日期 date-clear-button 的形态;贴在 .search-value 行尾、图标列之外。 */
.location-clear-button {
    align-self: flex-start;
    margin-top: 2px;
}

.location-dropdown-panel {
    position: fixed;
    z-index: 2055;
    overflow: hidden;
    max-height: min(470px, calc(100dvh - 24px));
    contain: layout paint;
    transform-origin: top left;
    will-change: top, left, max-height;
    border: 1px solid #dce2ea;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(16, 24, 40, .18);
    animation: locationDropdownIn .18s ease both;
}

    .location-dropdown-panel[hidden] {
        display: none;
    }

    .location-dropdown-panel.is-above {
        transform-origin: bottom left;
        animation-name: locationDropdownInAbove;
    }

.location-dropdown-heading {
    padding: 13px 22px 8px;
    color: #98a2b3;
    background: #fff;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.location-dropdown-list {
    min-height: 0;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.location-option {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 22px;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    text-align: left;
    transition: color .16s ease, background .16s ease, padding-left .16s ease;
}

    .location-option:first-child {
        border-top: 0;
    }

    .location-option:hover,
    .location-option:focus,
    .location-option.is-keyboard-active {
        outline: 0;
        color: var(--brand);
        background: #fff7f5;
        padding-left: 26px;
    }

    .location-option-text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .location-option strong {
        font-size: 1rem;
        line-height: 1.25;
    }

    .location-option small {
        color: #667085;
        font-size: .78rem;
        line-height: 1.45;
    }

    /* EBW 热门位的徽标。margin-left:auto 把它推到行尾,标题与副标题那一列继续按内容宽度收缩。 */
    .location-option-badge {
        flex: none;
        margin-left: auto;
        padding: 3px 9px;
        border-radius: 999px;
        color: var(--brand);
        background: #fff2ee;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

/* 被渲染上限截掉的条数。它在滚动列表之外,始终可见。 */
.location-dropdown-more {
    margin: 0;
    padding: 10px 22px;
    border-top: 1px solid var(--line);
    color: #667085;
    background: #fbfbfd;
    text-align: center;
    font-size: .72rem;
}

    .location-dropdown-more[hidden] {
        display: none;
    }

/* 交换两端后反向不可售的提示(S6):占表单栅格整行、贴在字段下方;是提示不是错误,不用 alert 配色。
   带上表单选择器提高特异性:首页 hero 里的 p 有居中 + max-width 的规则,会把这一行缩成文字宽并居中。 */
.bus-search-form .search-route-hint {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 17px;
    border-top: 1px solid #fde68a;
    color: #92400e;
    background: #fffbeb;
    font-size: .78rem;
}

    .search-route-hint[hidden] {
        display: none;
    }

/* 等待期加载态:列表保留上一批行,这一行只在列表下方提示结果还没到。 */
.location-dropdown-loading {
    margin: 0;
    padding: 10px 22px;
    border-top: 1px solid var(--line);
    color: #667085;
    font-size: .72rem;
}

/* 可达图不可用时的降级提示(S8):列出全部地点但不做校验,访客要看得出联动此刻没有生效。 */
.location-dropdown-degraded {
    margin: 0;
    padding: 8px 22px;
    border-bottom: 1px solid #fde68a;
    color: #92400e;
    background: #fffbeb;
    font-size: .72rem;
}

    .location-dropdown-loading[hidden],
    .location-dropdown-degraded[hidden] {
        display: none;
    }

.location-dropdown-empty {
    margin: 0;
    padding: 30px 22px;
    color: #667085;
    text-align: center;
    font-size: .82rem;
}

@keyframes locationDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes locationDropdownInAbove {
    from {
        opacity: 0;
        transform: translateY(5px) scale(.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 767.98px) {
    .location-dropdown-panel {
        border-radius: 13px;
    }

    .location-dropdown-heading {
        padding-inline: 18px;
    }

    .location-option {
        padding: 14px 18px;
    }

        .location-option:hover,
        .location-option:focus,
        .location-option.is-keyboard-active {
            padding-left: 22px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .transport-form.is-active,
    .transport-form.is-leaving,
    .location-dropdown-panel {
        animation: none;
    }

    .location-option {
        transition: none;
    }
}

.date-trigger-field,
.traveler-trigger-field {
  position: relative;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.date-trigger-field:hover,
.traveler-trigger-field:hover {
  background: #faf9ff;
}

/* 三个复合字段的焦点环一律由容器给,触发器自己都画不出环(见各自的 outline:0 那条)。
   .traveler-trigger-field 的 :focus-within 不能省:is-traveler-open 只在点击打开面板时才加上
   (search-form.js),键盘 Tab 停在触发器上而没打开面板时一点指示都没有。.location-trigger-field
   同理,它原有的 is-location-open 那圈 #fff3bb 在白底上 1.12:1;两条同权、本组在后,聚焦期间由这条接管。
   alpha 取 .7 = 白底 3.83:1,过 WCAG 2.2 SC 1.4.11 的 3:1;原来的 .2 只有 1.38:1,与被它顶掉的那圈同档。 */
.date-trigger-field:focus-within,
.date-trigger-field.is-date-active,
.location-trigger-field:focus-within,
.traveler-trigger-field:focus-within,
.traveler-trigger-field.is-traveler-open {
  z-index: 8;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(88, 63, 153, .7);
}

.date-trigger-field input[type="date"] {
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.date-trigger-field input[type="date"]:focus {
  outline: 0;
}

.date-trigger-field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
}

.date-optional-label {
  display: inline-block;
  margin-left: 5px;
  color: #98a2b3;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: baseline;
}

.date-return-field input[type="date"]:invalid:not(:focus):not(:placeholder-shown) {
  color: var(--ink);
}

.traveler-trigger {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
}

.traveler-trigger:focus {
  outline: 0;
}

.traveler-dropdown-panel {
  position: fixed;
  z-index: 2060;
  width: min(380px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #dce2ea;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(16, 24, 40, .2);
  transform-origin: top left;
  animation: travelerDropdownIn .18s ease both;
}

.traveler-dropdown-panel[hidden] {
  display: none;
}

.traveler-dropdown-panel.is-above {
  transform-origin: bottom left;
  animation-name: travelerDropdownInAbove;
}

.traveler-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}

.traveler-dropdown-header strong {
  font-size: .95rem;
  font-weight: 800;
}

.traveler-dropdown-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #475467;
  background: #f4f6f8;
}

.traveler-dropdown-close:hover,
.traveler-dropdown-close:focus {
  color: var(--brand);
  background: #f0edfa;
  outline: 0;
}

.traveler-dropdown-body {
  max-height: min(330px, calc(100dvh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.traveler-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
}

.traveler-row + .traveler-row {
  border-top: 1px solid var(--line);
}

.traveler-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.traveler-copy strong {
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
}

.traveler-copy small {
  margin-top: 3px;
  color: #667085;
  font-size: .7rem;
  line-height: 1.4;
}

.traveler-counter {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 36px 34px 36px;
  align-items: center;
  gap: 6px;
}

.traveler-counter-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d0d5dd;
  border-radius: 50%;
  color: var(--brand);
  background: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.traveler-counter-button:hover:not(:disabled),
.traveler-counter-button:focus-visible {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  outline: 0;
}

.traveler-counter-button:disabled {
  color: #98a2b3;
  border-color: #e4e7ec;
  background: #f7f8fa;
  cursor: not-allowed;
  opacity: .7;
}

.traveler-count {
  min-width: 34px;
  color: var(--ink);
  text-align: center;
  font-size: .92rem;
  font-weight: 800;
}

.traveler-dropdown-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.traveler-dropdown-actions .btn {
  min-width: 92px;
  min-height: 42px;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 800;
}

@keyframes travelerDropdownIn {
  from { opacity: 0; transform: translateY(-5px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes travelerDropdownInAbove {
  from { opacity: 0; transform: translateY(5px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 575.98px) {
  .traveler-dropdown-panel {
    border-radius: 13px;
  }

  .traveler-dropdown-header,
  .traveler-row,
  .traveler-dropdown-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .traveler-row {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .traveler-dropdown-panel {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .benefit-strip { margin-top: 0px; }
  .transport-form-stage { min-height: 377px; }
}

@media (max-width: 767.98px) {
  .benefit-strip { margin-top: 0px; }
  .transport-form-stage { min-height: 620px; }
}

@media (max-width: 575.98px) {
  .benefit-strip { margin-top: 0px; }
}

.date-trigger-field {
  position: relative;
  cursor: pointer;
  isolation: isolate;
}

.date-trigger-field .date-field-content {
  position: relative;
  z-index: 2;
  width: 100%;
  align-items: flex-start;
  pointer-events: none;
}

.date-trigger-field .date-field-content > i {
  flex: 0 0 auto;
}

.date-display-wrap {
  min-width: 0;
  flex: 1;
}

.date-display-value {
  display: block;
  min-height: 1.35em;
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-display-value.is-placeholder {
  color: #98a2b3;
  font-weight: 500;
  margin-top:7px;
}

.date-trigger-field .date-native-input {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.date-trigger-field .date-native-input::-webkit-calendar-picker-indicator,
.date-trigger-field .date-native-input::-webkit-inner-spin-button,
.date-trigger-field .date-native-input::-webkit-clear-button {
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -webkit-appearance: none;
}

.date-clear-button {
  position: relative;
  z-index: 5;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: -2px -2px 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #667085;
  background: #f2f4f7;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.date-clear-button:hover,
.date-clear-button:focus-visible {
  color: #fff;
  background: var(--brand);
  outline: 0;
  transform: scale(1.05);
}

.date-clear-button[hidden] {
  display: none !important;
}

.date-trigger-field:hover {
  background: #faf9ff;
}

/* 与上面那组是同一声明的重复,alpha 必须同步:这一条在后,只改上面那组的话日期字段仍取旧值。 */
.date-trigger-field:focus-within,
.date-trigger-field.is-date-active {
  z-index: 8;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(88, 63, 153, .7);
}

@media (prefers-reduced-motion: reduce) {
  .date-clear-button {
    transition: none;
  }
}

.signin-dropdown {
  position: relative;
}

.signin-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  white-space: nowrap;
}

.signin-email-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signin-dropdown-toggle::after {
  margin-left: .2rem;
  vertical-align: .12em;
  transition: transform .2s ease;
}

.signin-dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.signin-dropdown-menu {
  min-width: 180px;
  padding: 8px;
  margin-top: 10px !important;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .15);
}

.signin-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 9px;
  color: #344054;
  font-size: .85rem;
  font-weight: 700;
}

.signin-dropdown-menu .dropdown-item i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border-radius: 8px;
  color: var(--brand);
  background: rgba(88, 63, 153, .09);
}

.signin-dropdown-menu .dropdown-item:hover,
.signin-dropdown-menu .dropdown-item:focus,
.signin-dropdown-menu .dropdown-item:active {
  color: var(--brand);
  background: #f7f5fc;
}

/* 桌面导航行只许一行:主菜单与右侧按钮不折行,空间不足时只收缩账号胶囊与账号标签(省略号,完整值在 title)。
   胶囊与账号标签的文案长度随语言和账号名变化,不设上限时会把主菜单挤成两行。 */
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    min-width: 0;
  }

  .navbar .navbar-nav {
    flex-shrink: 0;
  }

  .navbar .navbar-nav .nav-link,
  .nav-actions > .btn {
    white-space: nowrap;
  }

  .nav-actions {
    min-width: 0;
    flex: 0 1 auto;
  }

  .nav-actions > .btn {
    flex-shrink: 0;
  }

  /* 1200–1399px 容器 1140px:马来文的菜单与两枚按钮文案最长,实测超出容器 134px,这一段只对马来文隐藏下载按钮。 */
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    html:lang(ms) .nav-actions > .nav-download-app {
      display: none !important;
    }
  }

  /* 992–1199px 容器 960px:马来文主菜单按默认内边距会超出容器 41px,收窄横向内边距。 */
  @media (max-width: 1199.98px) {
    .navbar .navbar-nav .nav-link {
      padding-left: .5rem !important;
      padding-right: .5rem !important;
    }
  }

  .signin-dropdown {
    flex-shrink: 0;
  }

  /* 登录态下拉按钮里是账号名,允许随空间收缩;匿名态的「登录」按钮文案短且无省略号承接,不收缩。 */
  .signin-dropdown-account {
    display: flex;
    flex-shrink: 1;
    min-width: 0;
  }

  .signin-dropdown-account .signin-dropdown-toggle {
    min-width: 0;
    max-width: 240px;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .signin-dropdown-account .signin-dropdown-toggle {
    max-width: 220px;
  }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    min-width: 0;
  }

  .nav-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .nav-actions a {
    width: 100%;
  }

  .signin-dropdown {
    width: 100%;
    min-width: 0;
  }

  .signin-dropdown-toggle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .signin-dropdown-menu {
    position: static !important;
    width: 100%;
    min-width: 100%;
    margin-top: 8px !important;
    transform: none !important;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .1);
  }
}

.promo-section {
  overflow: hidden;
}

.promo-section-head .section-heading p,
.promo-subsection-copy {
    color: var(--muted);
}

.promo-view-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 30px;
  color: var(--brand);
  font-weight: 800;
}

.promo-view-more i {
  font-size: 1.1rem;
}

.promo-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.promo-filter-tab {
  min-width: 64px;
  padding: .65rem 1.05rem;
  border: 1px solid rgba(16, 24, 40, .14);
  border-radius: 14px;
  color: #344054;
  background: #fff;
  font-weight: 700;
  line-height: 1;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  font-size: 14px;
  white-space: nowrap;
}

.promo-filter-tab:hover,
.promo-filter-tab:focus-visible {
  color: var(--brand);
  border-color: rgba(88, 63, 153, .28);
  background: #fbfaff;
  outline: 3px solid rgba(88, 63, 153, .18);
  outline-offset: 2px;
}

.promo-filter-tab.is-active {
  color: var(--brand);
  border-color: rgba(88, 63, 153, .18);
  background: rgba(88, 63, 153, .1);
  box-shadow: inset 0 0 0 1px rgba(88, 63, 153, .04);
}

@media (max-width: 767.98px) {
  .promo-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .promo-filter-tab { padding: .65rem; min-width: auto; }
  .promo-view-more { font-size: 13px; }

  .promo-filter-tabs::-webkit-scrollbar {
    display: none;
  }
}

.content-slider {
  position: relative;
  --slider-gap: 20px;
  --slider-control-size: 48px;
  padding-inline: var(--slider-control-gutter);
}

.content-slider-controls {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 5;
  height: 0;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.content-slider-button {
  position: absolute;
  top: 50%;
  width: var(--slider-control-size);
  height: var(--slider-control-size);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 24, 40, .12);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
  pointer-events: auto;
  transform: translateY(-50%);
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease, visibility .18s ease;
}

.content-slider-prev {
  left: -25px;
}

.content-slider-next {
  right: -25px;
}

.content-slider-button:hover:not(:disabled) {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 12px 30px rgba(88, 63, 153, .24);
  transform: translateY(-50%) scale(1.04);
}

.content-slider-button:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 3px;
}

.content-slider-button:disabled {
  cursor: not-allowed;
  opacity: .32;
  box-shadow: none;
}

.content-slider-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.content-slider-viewport::-webkit-scrollbar {
  display: none;
}

.content-slider-viewport:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 5px;
  border-radius: 18px;
}

.content-slider-track {
  display: flex;
  align-items: stretch;
  gap: var(--slider-gap);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: .75rem 0 .75rem;
}

.content-slider-item {
  flex: 0 0 var(--slider-item-width, 280px);
  width: var(--slider-item-width, 280px);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.offers-slider .content-slider-item {
  display: flex;
}

.offers-slider .promo-card {
  width: 100%;
  height: auto;
}

.content-slider-item[hidden] {
  display: none !important;
}

.promo-card {
  display: flex;
  height: auto;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 24, 40, .08);
  transition: transform .22s ease, box-shadow .22s ease;
}

.promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .12);
}

.promo-card-banner {
  position: relative;
  padding: 1.05rem;
}
.promo-card-banner.is-placeholder { aspect-ratio: 16 / 9; }

.promo-card-bus .promo-card-banner {
  background: linear-gradient(135deg, #ffe69b 0%, #ffcf59 55%, #ffc145 100%);
}

.promo-card-ferry .promo-card-banner {
  background: linear-gradient(135deg, #dff6ff 0%, #b8e5ff 45%, #73cbff 100%);
}

.promo-card-mix .promo-card-banner {
  background: linear-gradient(135deg, #fff0f6 0%, #ffd0e1 50%, #ffb3cf 100%);
}

.promo-card-bus-light .promo-card-banner {
  background: linear-gradient(135deg, #ece8ff 0%, #d6ccff 48%, #b6a6ff 100%);
}

.promo-card-banner::before,
.promo-card-banner::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  opacity: .22;
}

.promo-card-banner::before {
  right: -52px;
  bottom: -52px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, .46);
}

.promo-card-banner::after {
  top: 18px;
  right: 18px;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, .3);
}

.promo-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.3rem 1.3rem 1.4rem;
}

.promo-card-body h3 {
  margin-bottom: .7rem;
  font-size: 1.16rem;
  line-height: 1.35;
  font-weight: 800;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.35em);
}

.promo-card-body p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.promo-card-meta {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.05rem;
}

.promo-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #475467;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.promo-card-meta i {
  color: var(--brand);
}

.promo-card-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
}

.promo-card-footer .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.promo-code-pill {
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px dashed rgba(88, 63, 153, .36);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(88, 63, 153, .06);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .05em;
  width: fit-content;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-code-pill:focus-visible,
.promo-card .btn:focus-visible,
.promo-news-link:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 3px;
}

.promo-code-pill.is-copied {
  border-style: solid;
  border-color: rgba(88, 63, 153, .5);
}

.promo-code-pill.is-copy-failed {
  border-style: solid;
  border-color: #e33b2e;
  color: #e33b2e;
  background: rgba(227, 59, 46, .06);
}

.promo-chip {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  z-index: 2;
  padding: .25rem .65rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(16, 24, 40, .72);
  font-size: .7rem;
  font-weight: 500;
}

.promo-art {
  position: absolute;
  left: 1.05rem;
  right: auto;
  bottom: 1.05rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 2rem;
  color: #101828;
}

.promo-art-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: .65rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #101828;
  background: #ffde2f;
  text-shadow: none;
  box-shadow: 0 5px 16px rgba(16, 24, 40, .16);
}

.promo-art strong span { font-size: .62em; }
.promo-inline-note { color: #667085; font-size: .82rem; font-weight: 700; }
.promo-art strong {
  font-size: clamp(2.5rem, 4vw, 2.5rem);
  line-height: .95;
  font-weight: 800;
  color: #fff;
}

.promo-art small {
  margin-top: .4rem;
  color: rgba(16, 24, 40, .8);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}

.promo-subsection-title {
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 800;
}

.promo-news-card {
  display: grid;
  height: auto;
  min-height: 100%;
  grid-template-columns: minmax(0, 1.45fr) 132px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .08);
}

.promo-news-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.25rem;
}

.promo-news-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-bottom: .9rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(88, 63, 153, .08);
  font-size: .73rem;
  font-weight: 800;
}

.promo-news-copy h4 {
  margin-bottom: .6rem;
  font-size: 1.08rem;
  line-height: 1.38;
  font-weight: 800;
}

.promo-news-copy p {
  margin-bottom: .95rem;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.6;
}

.promo-news-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin-top: auto;
  color: var(--ink);
  font-weight: 800;
}

.promo-news-link i {
  transition: transform .18s ease;
}

.promo-news-link:hover i {
  transform: translateX(2px);
}

.promo-news-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.3rem;
}

.promo-news-media::before,
.promo-news-media::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: .22;
}

.promo-news-media::before {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, .32);
}

.promo-news-media::after {
  top: 18px;
  right: 14px;
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, .18);
}

.promo-news-media > i {
  position: relative;
  z-index: 1;
}

.promo-news-media-ferry {
  background: linear-gradient(180deg, #2ab7ca 0%, #1499b8 100%);
}

.promo-news-media-seat {
  background: linear-gradient(180deg, #ff8a65 0%, #ef5350 100%);
}

.promo-news-media-trip {
  background: linear-gradient(180deg, #7e57c2 0%, #5e35b1 100%);
}

.content-slider-dots {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: 1rem;
}

.content-slider-dot {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.content-slider-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
  transform: translate(-50%, -50%);
  transition: width .2s ease, background-color .2s ease;
}

.content-slider-dot.is-active::before {
  width: 28px;
  background: var(--brand);
}

.content-slider-dot:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 3px;
}

@media (max-width: 991.98px) and (min-width: 768px) {
  .content-slider {
    --slider-control-size: 44px;
    --slider-control-gutter: 54px;
  }
}

@media (max-width: 767.98px) {
  .content-slider {
    padding-inline: 0;
  }

  .content-slider-controls {
    display: none;
  }

  .content-slider-dots {
    display: flex;
  }

  .promo-news-card {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .promo-news-media {
    min-height: 100%;
  }
}

@media (max-width: 575.98px) {
  .promo-card-banner {
    min-height: 190px;
  }

  .promo-card-body {
    padding: 1.1rem 1.05rem 1.15rem;
  }

  .promo-card-body h3 {
    font-size: 1.05rem;
  }

  .promo-card-footer {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .promo-card-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .promo-news-card {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .promo-news-copy {
    padding: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-slider-viewport {
    scroll-behavior: auto;
  }

  .promo-card,
  .content-slider-button,
  .content-slider-dot,
  .promo-news-link i {
    transition: none;
  }
}

/* Member's Benefits:样式表逐段取自最新首页稿(深紫渐变底、玻璃态卡、黄色强调)。 */
.member-benefits-section {
    position: relative;
    overflow: hidden;
    color: #344054;
}

    .member-benefits-section::before,
    .member-benefits-section::after {
        position: absolute;
        border: 1px solid rgba(88, 63, 153, .1);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .member-benefits-section::before {
        top: 350px;
        right: 110px;
        width: 360px;
        height: 360px;
    }

    .member-benefits-section::after {
        bottom: 420px;
        left: 550px;
        width: 230px;
        height: 230px;
    }

    .member-benefits-section > .container {
        position: relative;
        z-index: 1;
    }

    .member-benefits-section .section-kicker {
        color: var(--brand);
    }

    .member-benefits-section h2 {
        color: #2d2351;
    }

    .member-benefits-section .section-heading > p {
        color: #667085;
    }

.member-benefits-slider {
    overflow: visible;
}

    .member-benefits-slider .content-slider-viewport {
        overflow-x: auto;
        overflow-y: hidden;
    }

.member-benefits-track {
    align-items: stretch;
}

.member-benefit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.55rem;
    overflow: hidden;
    border: 1px solid #e9e5f2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 5px 12px rgba(45, 35, 81, .1);
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

    .member-benefit-card::after {
        position: absolute;
        right: -48px;
        bottom: -58px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: rgba(53, 47, 255, 0.03);
        content: "";
        pointer-events: none;
    }

/* 有链接的卡整张可点;Coming Soon 一类没有链接的卡没有悬停反馈。 */
.member-benefit-card--clickable {
    color: inherit;
    cursor: pointer;
}

    .member-benefit-card--clickable:hover,
    .member-benefit-card--clickable:focus-visible {
        color: inherit;
        transform: translateY(-4px);
        border-color: rgba(88, 63, 153, .22);
        background: #fff;
        box-shadow: 0 18px 40px rgba(45, 35, 81, .12);
    }

    .member-benefit-card--clickable:focus-visible {
        outline: 3px solid rgba(88, 63, 153, .38);
        outline-offset: 3px;
    }

.member-benefit-icon {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 1.35rem;
}

.member-benefit-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 72px);
    min-height: 30px;
    margin-bottom: 1.25rem;
    padding: .42rem .75rem;
    border: 1px solid rgba(88, 63, 153, .12);
    border-radius: 999px;
    color: var(--brand);
    background: rgba(88, 63, 153, .06);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
}

    .member-benefit-badge.comingsoon {
        color: #806300;
        background: var(--yellow-soft);
    }

.member-benefit-card h3 {
    max-width: 85%;
    margin: 0 0 .75rem;
    color: #2d2351;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
}

.member-benefit-card > p {
    margin: 0 0 1.25rem;
    color: #667085;
    font-size: .94rem;
    line-height: 1.7;
}

.member-benefit-card .promo-card-meta {
    position: relative;
    z-index: 1;
    color: #475467;
}

    .member-benefit-card .promo-card-meta span {
        color: #475467;
    }

    .member-benefit-card .promo-card-meta i {
        color: var(--brand);
    }

.member-benefit-code {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0 .7rem;
    align-items: center;
    margin-bottom: 1.15rem;
    padding: .8rem .9rem;
    border: 1px dashed rgba(88, 63, 153, .25);
    border-radius: 13px;
    color: var(--brand);
    background: rgba(88, 63, 153, .04);
}

    .member-benefit-code > i {
        grid-row: 1 / 3;
        color: var(--brand);
        font-size: 1.15rem;
    }

    .member-benefit-code > span {
        color: #98a2b3;
        font-size: .68rem;
        font-weight: 700;
    }

    .member-benefit-code > strong {
        color: #2d2351;
        font-size: .88rem;
        letter-spacing: .06em;
    }

.member-benefit-highlight {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.15rem;
    padding: .85rem .95rem;
    border: 1px solid #e9e5f2;
    border-radius: 13px;
    color: #2d2351;
    background: #f9f8fc;
}

.member-benefit-highlight-yellow {
    color: #2d2351;
    border-color: rgba(255, 222, 47, .65);
    background: rgba(255, 222, 47, .5);
}

.member-benefit-highlight-value {
    flex: 0 0 auto;
    color: var(--brand);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}

.member-benefit-highlight > span:last-child {
    color: #667085;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
}

.member-benefit-highlight-yellow > span:last-child {
    color: rgba(45, 35, 81, .75);
}

.member-benefit-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    min-height: 44px;
    margin-top: auto;
    color: var(--brand);
    font-size: .88rem;
    font-weight: 800;
}

    .member-benefit-link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        border: 1px solid rgba(88, 63, 153, .18);
        border-radius: 50%;
        background: rgba(88, 63, 153, .05);
        transition: transform .18s ease, background-color .18s ease;
    }

.member-benefit-card--clickable:hover .member-benefit-link,
.member-benefit-card--clickable:focus-visible .member-benefit-link {
    color: #3f287f;
}

    .member-benefit-card--clickable:hover .member-benefit-link i,
    .member-benefit-card--clickable:focus-visible .member-benefit-link i {
        transform: translateX(3px);
        background: rgba(88, 63, 153, .1);
    }

.member-benefits-section .content-slider-button {
    color: var(--brand);
    border-color: #e5e0ef;
    background: #fff;
    box-shadow: 0 8px 22px rgba(45, 35, 81, .1);
}

    .member-benefits-section .content-slider-button:hover:not(:disabled) {
        color: var(--brand);
        border-color: rgba(88, 63, 153, .25);
        background: #faf9fd;
        box-shadow: 0 10px 26px rgba(45, 35, 81, .14);
    }

    .member-benefits-section .content-slider-button:focus-visible {
        outline-color: rgba(88, 63, 153, .3);
    }

.member-benefits-section .content-slider-dot::before {
    background: #d0d5dd;
}

.member-benefits-section .content-slider-dot.is-active::before {
    background: var(--brand);
}

.member-benefits-section .content-slider-dot:focus-visible {
    outline-color: rgba(88, 63, 153, .3);
}

.member-benefits-slider .content-slider-button:disabled {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .member-benefit-card {
        min-height: 350px;
    }
}

@media (max-width: 767.98px) {
    .member-benefits-section {
        overflow: hidden;
    }

    .member-benefit-card {
        min-height: 350px;
        padding: 1.35rem;
    }

    .member-benefit-icon {
        top: 1.15rem;
        right: 1.15rem;
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 575.98px) {
    .member-benefit-card h3 {
        max-width: 100%;
        padding-right: 44px;
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .member-benefit-card,
    .member-benefit-link i {
        transition: none;
    }
}

.promo-card-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(135deg, #201f3e 0%, var(--brand) 68%, #ffde2f 140%);
}

.promo-banner-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.promo-card-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
}

.promo-card-banner::after {
  content: none;
}

.promo-card-banner.is-image-error .promo-banner-image {
  display: none;
}

.promo-card-banner.is-image-error {
  min-height: 220px;
}

.promo-card-bus .promo-card-banner.is-image-error {
  background: linear-gradient(135deg, #201f3e 0%, var(--brand) 72%, #ffde2f 150%);
}

.promo-card-ferry .promo-card-banner.is-image-error {
  background: linear-gradient(135deg, #183b63 0%, #2b7a9a 55%, var(--brand) 120%);
}

.promo-card-mix .promo-card-banner.is-image-error {
  background: linear-gradient(135deg, #3d285f 0%, #7b4da8 58%, #ffde2f 150%);
}

.promo-card-bus-light .promo-card-banner.is-image-error {
  background: linear-gradient(135deg, #3d2d6f 0%, #725db2 66%, #ffde2f 155%);
}

@media (max-width: 575.98px) {
  .promo-card-banner {
    min-height: 190px;
  }
}

.why-book-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 222, 47, .13), transparent 23%),
    radial-gradient(circle at 92% 82%, rgba(88, 63, 153, .11), transparent 26%),
    #f7f6fb;
}

.why-book-header {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.why-book-header .section-kicker {
  color: var(--brand);
}

.why-book-header h2 {
  margin: .55rem 0 0;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
}

.why-book-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.why-book-card {
  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.65rem;
  overflow: hidden;
  border: 1px solid rgba(88, 63, 153, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.why-book-card:hover {
  transform: translateY(-5px);
  border-color: rgba(88, 63, 153, .24);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .11);
}

.why-book-icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  color: var(--brand);
  background: rgba(88, 63, 153, .1);
  font-size: 1.45rem;
}

.why-book-icon.red {
  color: var(--red);
  background: rgba(255, 113, 113, 0.21);
}

.why-book-icon.blue {
  color: var(--blue);
  background: rgba(13, 110, 253, 0.11);
}

.why-book-icon.green {
  color: var(--green);
  background: rgba(25, 135, 84, 0.11);
}

.why-book-icon.yellow {
  color: var(--yellow);
  background: rgba(255, 193, 7, 0.13);
}

.why-book-icon-notification > span {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand-secondary);
}

.why-book-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: .8rem;
  border-radius: 999px;
  color: var(--brand);
  font-size: .72rem;
  font-weight: 800;
}

.why-book-label-safety {
  color: #5a4300;
  background: rgba(255, 222, 47, .32);
}

.why-book-card h3 {
  margin-bottom: .65rem;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
}

.why-book-card p {
  margin: 0;
  color: #667085;
  font-size: .91rem;
  line-height: 1.7;
}

.why-book-link {
  display: inline-flex;
  align-items: center;
  margin-top: .85rem;
  color: var(--brand);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}

.why-book-link:hover,
.why-book-link:focus-visible {
  color: var(--brand);
  text-decoration: underline;
}

.why-book-visual {
  width: 100%;
  min-height: 58px;
  margin-top: auto;
  padding-top: 1.25rem;
}

.route-visual {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--brand);
}

.route-visual .route-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(88, 63, 153, .36) 0 8px, transparent 8px 13px);
}

.route-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(88, 63, 153, .08);
}

.route-dot-start {
  background: var(--brand);
}

.route-dot-end {
  background: var(--brand-secondary);
}

.pass-visual {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--brand);
}

.pass-visual > i {
  font-size: 1.65rem;
}

.pass-code {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(88, 63, 153, .3);
  border-radius: 10px;
  background: #fbfaff;
  font-size: 1.3rem;
}

.pass-check {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 50%;
  color: #3f3300;
  background: var(--brand-secondary);
  font-weight: 800;
}

.notification-visual {
  display: grid;
  gap: .45rem;
}

.notification-visual span,
.complaint-visual span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #475467;
  font-size: .76rem;
  font-weight: 700;
}

.notification-visual i,
.complaint-visual i {
  color: var(--brand);
}

.sos-visual,
.complaint-visual {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sos-badge {
  min-width: 48px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #332900;
  background: var(--brand-secondary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.sos-visual > span:last-child {
  color: #667085;
  font-size: .74rem;
  font-weight: 700;
}

.complaint-status {
  margin-left: auto;
  padding: .35rem .65rem;
  border-radius: 999px;
  color: var(--brand) !important;
  background: rgba(88, 63, 153, .09);
}

@media (max-width: 1199.98px) {
  .why-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-book-card,
  .why-book-card:nth-child(4),
  .why-book-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 767.98px) {
  .why-book-header {
    margin-bottom: 2rem;
  }

  .why-book-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .why-book-card {
    min-height: 0;
    padding: 1.35rem;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-book-card {
    transition: none;
  }

  .why-book-card:hover {
    transform: none;
  }
}

.popular-routes-section {
  position: relative;
}

.popular-routes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.popular-route-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid rgba(88, 63, 153, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 24, 40, .07);
}

.popular-route-card-header {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid #eceef3;
}

.popular-route-heading-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: var(--brand);
  background: rgba(88, 63, 153, .10);
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(88, 63, 153, .05);
}

.popular-route-heading-icon-ferry {
  color: #3f3300;
  background: rgba(255, 222, 47, .40);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 0, .12);
}

.popular-route-type {
  display: block;
  margin-bottom: .18rem;
  color: var(--brand);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.popular-route-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 800;
}

.popular-route-list {
  display: grid;
  gap: .3rem;
  margin: 1rem -.65rem 1.15rem;
}

.popular-route-row > .bi-arrow-right { flex: 0 0 auto; font-size: .9rem; }
/* /bus-tickets 的 Popular Bus Terminals 卡行(稿件 bus-tickets.html)。 */
/* 稿件 route-landing / route-directory-section:路线与场站目录页的国家导航、三列行与卡头。 */
.route-landing .popular-route-row { padding: .35rem .65rem; }
.route-directory-section { scroll-margin-top: 145px; }
.route-directory-section .popular-route-row { min-height: auto; height: 100%; }
.route-directory-section .popular-terminal-details strong { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.45; }
.route-country-nav { scrollbar-width: thin; scrollbar-color: rgba(88, 63, 153, .25) transparent; }
.route-country-nav .nav-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #344054;
  background: #fff;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.route-country-nav .nav-link:hover,
.route-country-nav .nav-link:focus,
.route-country-nav .nav-link.active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 7px 18px rgba(88, 63, 153, .16);
}
.route-country-nav .nav-link:focus-visible { outline: 3px solid rgba(88, 63, 153, .22); outline-offset: 2px; }
.route-country-nav .nav-link.disabled { color: #98a2b3; border-color: #e4e7ec; background: #f8fafc; box-shadow: none; cursor: default; opacity: 1; }
@media (max-width: 767.98px) {
  .route-country-nav { margin-right: -.75rem; padding-right: .75rem; }
  .route-country-nav .nav-link { font-size: .78rem; }
  .route-directory-section { scroll-margin-top: 115px; }
}
/* 场站详情页:侧栏吸顶与稿件的 alert 形态的预订提示。 */
@media (min-width: 992px) {
  .terminal-info-sidebar { position: sticky; top: 110px; align-self: flex-start; }
  .terminal-info-sidebar .booking-card { position: static; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; }
}
.bus-terminal-detail-page .alert { display: flex; align-items: flex-start; gap: 14px; border-radius: 16px; }
.bus-terminal-detail-page .alert i { flex: 0 0 auto; font-size: 1.25rem; }
.bus-terminal-detail-page .alert h2 { margin-bottom: 5px; font-size: .95rem; }
.bus-terminal-detail-page .alert p { margin: 0; font-size: .85rem; line-height: 1.6; }
.bus-terminal-detail-page .alert-primary { color: var(--ink-2); background-color: #faf9ff; border-color: #e6e1ff; }
.bus-terminal-detail-page .alert-primary i { color: var(--brand); }
.popular-terminal-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: var(--ink);
  line-height: 1.35;
}
.popular-terminal-details strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: .84rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popular-terminal-details small {
  margin-top: .18rem;
  color: #667085;
  font-size: .68rem;
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .popular-terminal-details strong { font-size: .76rem; }
  .popular-terminal-details small { font-size: .64rem; }
}
/* 稿件对 .alert 的全局排布只在本页的 Bus Travel Guide 提示框里用到,限定在 .bus-tickets-guide 之下,不改别处的 alert。 */
.bus-tickets-guide .alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 16px;
}
.bus-tickets-guide .alert i { flex: 0 0 auto; font-size: 1.25rem; }
.bus-tickets-guide .alert h3 { margin-bottom: 5px; font-size: .95rem; }
.bus-tickets-guide .alert p { margin: 0; font-size: .85rem; line-height: 1.6; }
.bus-tickets-guide .alert-primary { color: var(--ink-2); background-color: #faf9ff; border-color: #e6e1ff; }
.bus-tickets-guide .alert-primary i { color: var(--brand); }
.popular-route-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.popular-route-row:hover {
  color: var(--brand);
  border-color: rgba(88, 63, 153, .12);
  background: rgba(88, 63, 153, .055);
  transform: translateX(2px);
}

.popular-route-row:active {
  background: rgba(88, 63, 153, .10);
  transform: translateX(1px);
}

.popular-route-row:focus-visible,
.popular-route-view-all:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 3px;
}

.popular-route-journey {
  display: grid;
  grid-template-columns: minmax(0, auto) 18px minmax(0, auto);
  align-items: center;
  justify-content: start;
  gap: .55rem;
  min-width: 0;
  color: var(--ink);
  font-size: .84rem;
}

.popular-route-journey strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.popular-route-journey i {
  color: var(--brand);
  font-size: .78rem;
  text-align: center;
}

.popular-route-price {
  min-width: 92px;
  color: var(--brand);
  font-size: .88rem;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.popular-route-price small {
  color: #667085;
  font-size: .68rem;
  font-weight: 600;
}

.popular-route-view-all {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin-top: auto;
  padding: .65rem .15rem;
  color: var(--brand);
  font-size: .82rem;
  font-weight: 800;
  width: fit-content;
}

.popular-route-view-all i {
  transition: transform .18s ease;
}

.popular-route-view-all:hover i {
  transform: translateX(3px);
}

.bus-booking-panel.is-route-prefilled {
  animation: routePrefillPulse .65s ease;
}

@keyframes routePrefillPulse {
  0%, 100% { box-shadow: 0 18px 48px rgba(16, 24, 40, .16); }
  45% { box-shadow: 0 0 0 5px rgba(88, 63, 153, .20), 0 22px 55px rgba(16, 24, 40, .18); }
}

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

@media (max-width: 575.98px) {
  .popular-routes-header {
    margin-bottom: 2rem;
  }

  .popular-route-card {
    padding: 1.15rem;
    border-radius: 18px;
  }

  .popular-route-row {
    gap: .65rem;
    padding-inline: .45rem;
  }

  .popular-route-journey {
    grid-template-columns: minmax(0, auto) 14px minmax(0, auto);
    gap: .35rem;
    font-size: .76rem;
  }

  .popular-route-price {
    min-width: 76px;
    font-size: .78rem;
  }

  .popular-route-price small {
    display: block;
    margin-bottom: .05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popular-route-row,
  .popular-route-view-all i {
    transition: none;
  }

  .popular-route-row:hover,
  .popular-route-row:active,
  .popular-route-view-all:hover i {
    transform: none;
  }

  .bus-booking-panel.is-route-prefilled {
    animation: none;
  }
}

@media (min-width: 992px) {
  .results-filter-sidebar {
    align-self: stretch;
  }

  .results-filter-sidebar .filter-panel {
    position: sticky;
    top: calc(var(--desktop-header-height, 110px) + 16px);
  }
}

.filter-panel {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe4ec;
  border-radius: .875rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .04);
}

.filter-panel-header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.25rem;
  border-bottom: 1px solid #e5e9f0;
}

.filter-panel-title {
  margin: 0;
  color: #101828;
  font-size: 1.05rem;
  font-weight: 800;
}

.filter-quick-section {
  padding: .9rem 1.25rem 1rem;
  border-bottom: 1px solid #e5e9f0;
  background: #fff;
}

.filter-quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.filter-quick-option {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.filter-quick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.filter-quick-label {
  min-height: 40px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .5rem .7rem;
  border: 1px solid #d6dde7;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

  .filter-quick-label:hover {
    border-color: rgba(88, 63, 153, .4);
    background: #faf9fd;
    color: var(--brand);
  }

.filter-quick-input:focus-visible + .filter-quick-label {
  border-color: var(--brand);
  outline: 3px solid rgba(88, 63, 153, .16);
  outline-offset: 2px;
}

.filter-quick-input:checked + .filter-quick-label {
  border-color: rgba(88, 63, 153, .45);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 750;
}

.filter-quick-icon {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: .9rem;
}

.filter-quick-text {
  min-width: 0;
}

.filter-quick-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}

.filter-quick-selected {
  display: none;
  flex: 0 0 auto;
  color: var(--brand);
  font-size: .75rem;
}

.filter-quick-input:checked + .filter-quick-label .filter-quick-count {
  color: var(--brand);
}

.filter-quick-input:checked + .filter-quick-label .filter-quick-selected {
  display: inline-block;
}

@media (max-width: 991.98px) {
  .filter-quick-label {
    min-height: 44px;
  }
}

@media (max-width: 359.98px) {
  .filter-quick-option {
    flex: 1 1 100%;
  }

  .filter-quick-label {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-quick-label {
    transition: none;
  }
}

.filter-reset-btn,
.active-filter-clear {
  min-height: 44px;
  color: var(--brand);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.filter-panel .accordion {
  --bs-accordion-color: var(--ink-2);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: #101828;
  --bs-accordion-active-bg: #fff;
}

.filter-panel .accordion-item {
  border: 0;
  border-bottom: 1px solid #e5e9f0;
  background: #fff;
}

.filter-panel .accordion-item:last-child {
  border-bottom: 0;
}

.filter-panel .accordion-button,
.filter-panel .accordion-button:not(.collapsed) {
  min-height: 54px;
  gap: .7rem;
  padding: .92rem 1.25rem;
  color: #101828;
  background: #fff;
  box-shadow: none;
  font-size: .86rem;
  font-weight: 800;
}

.filter-panel .accordion-button:hover {
  background: #faf9fd;
}

.filter-panel .accordion-button:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: -3px;
}

.filter-panel .accordion-button::after {
  width: .78rem;
  height: .78rem;
  margin-left: auto;
  background-size: .78rem;
}

.filter-accordion-icon {
  width: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: .9rem;
}

.filter-panel .accordion-body {
  padding: 0 1.25rem 1.15rem;
}

.filter-option {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .45rem;
  padding-left: 0;
}

.filter-option:last-child {
  margin-bottom: 0;
}

.filter-option .form-check-input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  border: 1px solid #d6dde7;
  border-radius: 4px;
  box-shadow: none;
}

.filter-option .form-check-input:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(88, 63, 153, .16);
}

.filter-option .form-check-input:checked {
  border-color: var(--brand);
  background-color: var(--brand);
}

.filter-option .form-check-label {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #475467;
  font-size: .76rem;
  line-height: 1.4;
  cursor: pointer;
}

.filter-option .form-check-input:checked + .form-check-label {
  color: var(--brand);
  font-weight: 700;
}

.filter-count {
  margin-left: auto;
  color: #98a2b3;
  font-size: .68rem;
  font-weight: 700;
}

.filter-rating-label {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
}

.filter-rating-label i {
  color: #f5a623;
  font-size: .72rem;
}

.price-range-filter {
  width: 100%;
}

.filter-price-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
  color: #667085;
  font-size: .74rem;
}

.filter-price-values strong {
  color: #101828;
  font-size: .78rem;
}

.dual-range-wrapper {
  position: relative;
  width: 100%;
  height: 30px;
  isolation: isolate;
}

.range-track,
.range-selected {
  position: absolute;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}

.range-track {
  right: 0;
  left: 0;
  z-index: 1;
  background: #d9dee8;
}

.range-selected {
  left: var(--range-start, 0%);
  right: calc(100% - var(--range-end, 100%));
  z-index: 2;
  background: var(--brand);
}

.range-input {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 30px;
  margin: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

.range-input-min { z-index: 4; }
.range-input-max { z-index: 5; }
.range-input:focus { z-index: 6; }

.range-input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.range-input::-moz-range-track,
.range-input::-moz-range-progress {
  height: 4px;
  background: transparent;
}

.range-input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 2px 5px rgba(16, 24, 40, .16);
  pointer-events: auto;
  cursor: grab;
  appearance: none;
  -webkit-appearance: none;
}

.range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 2px 5px rgba(16, 24, 40, .16);
  pointer-events: auto;
  cursor: grab;
}

.range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px rgba(88, 63, 153, .18);
}

.range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px rgba(88, 63, 153, .18);
}

.filter-offcanvas {
  --bs-offcanvas-width: min(390px, 100vw);
  background: #f6f8fb;
}

.filter-offcanvas .offcanvas-header {
  flex: 0 0 auto;
  min-height: 60px;
  padding: .95rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e5e9f0;
}

.filter-offcanvas .offcanvas-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.filter-offcanvas-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #e3e7ee;
  box-shadow: 0 -8px 24px rgba(21, 29, 54, .08);
}

.filter-offcanvas-footer .btn {
  min-height: 48px;
  font-size: .82rem;
  font-weight: 800;
}

.active-filter-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin: -.25rem 0 1rem;
}

.active-filter-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.active-filter-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .65rem;
  border: 1px solid rgba(88, 63, 153, .22);
  border-radius: 999px;
  background: #f7f4fc;
  color: var(--brand);
  font-size: .72rem;
  font-weight: 700;
}

.active-filter-chip:hover,
.active-filter-chip:focus-visible {
  border-color: var(--brand);
  background: #f1edfa;
}

.filter-empty-state {
  margin-bottom: 1rem;
  padding: 2.25rem 1.25rem;
  border: 1px dashed #d7dce5;
  border-radius: 16px;
  background: #fff;
  color: #667085;
  text-align: center;
}

.filter-empty-state > i {
  display: block;
  margin-bottom: .75rem;
  color: var(--muted-2);
  font-size: 1.6rem;
}

.results-toolbar-count {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  .active-filter-bar {
    align-items: center;
  }

  .active-filter-clear {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-panel .accordion-button::after {
    transition: none;
  }
}

#busListContainer .trip-card.bus-list-card {
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

#busListContainer .trip-card.bus-list-card:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 63, 153, .22);
  box-shadow: 0 16px 36px rgba(16, 24, 40, .09);
}

#busListContainer .trip-card.bus-list-card > .card-body {
  padding: 0;
}

.trip-card-main-row {
  min-height: 158px;
  padding: 20px 0;
}

.trip-operator-block,
.trip-journey-block,
.trip-fare-block,
.trip-action-block {
  padding: 0 20px;
}

.trip-operator-block,
.trip-journey-block,
.trip-fare-block {
  border-right: 1px solid #e4e7ec;
}

.trip-operator-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.trip-operator-logo {
  display: block;
  width: 122px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.trip-operator-name {
  margin: 11px 0 3px;
  color: #101828;
  font-size: .95rem;
  font-weight: 800;
}

.trip-service-class {
  margin: 0;
  color: #8a929f;
  font-size: .72rem;
  line-height: 1.45;
}

.trip-amenities {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.trip-amenity-icon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #7f8793;
  background: transparent;
  font-size: .9rem;
}

.trip-amenity-icon:hover,
.trip-amenity-icon:focus-visible {
  color: var(--brand);
  background: rgba(88, 63, 153, .08);
  outline: none;
}

.trip-journey-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trip-time-grid,
.trip-mobile-time-row {
  display: grid;
  align-items: center;
  gap: 14px;
}

.trip-time-grid {
  grid-template-columns: minmax(90px, .85fr) minmax(80px, .9fr) minmax(112px, 1.25fr);
}

.trip-mobile-time-row {
  grid-template-columns: minmax(72px, .85fr) minmax(72px, .95fr) minmax(94px, 1.2fr);
}

.trip-time-point {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.trip-time-point strong {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.trip-seat-count {
  margin-top: 4px;
  color: var(--muted);
  font-size: .72rem;
}

.trip-duration-line {
  min-width: 0;
  color: #8a929f;
  font-size: .72rem;
  text-align: center;
}

.trip-duration-line > span {
  display: block;
  margin-bottom: 5px;
  white-space: nowrap;
}

/* 到达时刻缺失的兜底文案不是时刻:按次级小字渲染,行高仍占时刻字形那一行(1.2rem × 1.2),
   单行省略、完整文案由视图上的 title 承接,避免在时间位折成两行把卡片撑高。 */
.trip-time-point strong.is-unavailable {
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.44rem;
  text-overflow: ellipsis;
}

.trip-duration-line.is-unavailable > span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.trip-duration-line > div {
  position: relative;
  height: 1px;
  background: #d9dee6;
}

.trip-duration-line > div::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #c8ced8;
  border-right: 1px solid #c8ced8;
  transform: translateY(-50%) rotate(45deg);
}

.trip-location-grid,
.trip-mobile-location-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.trip-location-grid > div,
.trip-mobile-location-row > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.trip-location-grid strong,
.trip-mobile-location-row strong {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
}

.trip-location-grid span,
.trip-mobile-location-row span {
  margin-top: 2px;
  color: #98a2b3;
  font-size: .7rem;
}

.trip-fare-block,
.trip-action-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trip-fare-block {
  gap: 14px;
}

.trip-fare-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.trip-fare-row > i {
  margin-top: 2px;
  color: #9299a5;
  font-size: 1rem;
}

.trip-fare-row > div {
  display: flex;
  flex-direction: column;
}

.trip-fare-row strong {
  color: #101828;
  font-size: .91rem;
  font-weight: 800;
  white-space: nowrap;
}

.trip-fare-row del {
  margin-top: 2px;
  color: #a4aab3;
  font-size: .68rem;
  white-space: nowrap;
}

.trip-fare-return {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: .68rem;
  white-space: nowrap;
}

.trip-fare-return > i {
  font-size: .6rem;
}

.trip-action-block {
  align-items: center;
  gap: 12px;
  text-align: center;
}

.trip-select-btn {
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.15rem;
  border: 1px solid var(--brand);
  color: #fff;
  background:var(--brand);
  font-weight: 600;
  box-shadow: none;
}

.trip-select-btn:hover,
.trip-select-btn:focus-visible {
  color: #fff;
  border-color: var(--brand-hover);
  background: var(--brand-hover);
  box-shadow: 0 0 0 4px rgba(255, 222, 47, .23);
}

.trip-card-footer-row {
  min-height: 58px;
  margin: 0 20px;
  padding: 12px 0;
  border-top: 1px solid #e4e7ec;
}

.trip-meta-primary {
  min-width: 0;
}

.trip-rating-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 5px;
  color: #fff;
  background: #12a879;
  font-size: .72rem;
  font-weight: 700;
}

.trip-meta-link {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  color: var(--brand);
  background: transparent;
  font-size: .76rem;
  font-weight: 600;
}

.trip-meta-link:hover,
.trip-meta-link:focus-visible {
  color: var(--brand-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.trip-meta-divider {
  width: 1px;
  height: 14px;
  background: #d0d5dd;
}

.trip-status-list {
  min-width: 0;
}

.trip-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  color: #7a828e;
  background: #f8f9fb;
  font-size: .7rem;
  line-height: 1.2;
}

.trip-status-voucher {
  border-color: #ff4e82;
  color: #e53d71;
  background: #fff8fb;
}

.trip-card-mobile {
  padding: 22px 20px;
}

.trip-card-mobile .trip-operator-logo {
  width: 112px;
  height: 38px;
}

.trip-mobile-time-row {
  margin-top: 20px;
}

.trip-mobile-location-row {
  margin-top: 18px;
}

.trip-mobile-fare-actions {
  margin-top: 22px;
}

.trip-mobile-fares {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.trip-card-divider {
  margin: 20px 0 17px;
  border-color: #e4e7ec;
  opacity: 1;
}

.trip-mobile-operator-row p {
  color: #101828;
  font-size: .76rem;
  line-height: 1.5;
}

.trip-mobile-operator-row p span {
  color: #8a929f;
}

.trip-info-modal .modal-content {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .2);
}

.trip-info-modal .modal-body {
  color: #475467;
  line-height: 1.7;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .trip-operator-block,
  .trip-journey-block,
  .trip-fare-block,
  .trip-action-block {
    padding-inline: 14px;
  }

  .trip-time-grid {
    grid-template-columns: minmax(88px, .85fr) minmax(76px, .9fr) minmax(108px, 1.25fr);
    gap: 9px;
  }

  .trip-location-grid {
    gap: 12px;
  }

  .trip-status-badge {
    font-size: .62rem;
  }
}

@media (max-width: 575.98px) {
  #busListContainer .trip-card.bus-list-card {
    border-radius: 18px;
  }

  .trip-card-mobile {
    padding: 19px 17px;
  }

  .trip-mobile-time-row {
    gap: 8px;
  }

  .trip-time-point strong {
    font-size: 1.08rem;
  }

  .trip-duration-line {
    font-size: .66rem;
  }

  .trip-location-grid strong,
  .trip-mobile-location-row strong {
    font-size: .76rem;
  }

  .trip-mobile-location-row {
    gap: 12px;
  }

  .trip-fare-row strong {
    font-size: .84rem;
  }

  .trip-select-btn {
    min-width: 88px;
  }

  .trip-meta-primary {
    gap: 4px !important;
  }

  .trip-meta-link {
    padding-inline: 3px;
    font-size: .7rem;
  }
}
.trip-policy-link {
  cursor: pointer;
}

.trip-policy-link:hover,
.trip-policy-link:focus-visible {
  color: var(--brand);
  border-color: rgba(88, 63, 153, .4);
  background: rgba(88, 63, 153, .06);
  outline: none;
}

.trip-more-info-modal {
  --trip-modal-bg: #eef2f7;
}

.trip-more-info-modal .modal-dialog {
  max-width: min(1180px, calc(100vw - 2rem));
}

.trip-more-info-modal .modal-content {
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 24px;
  background: var(--trip-modal-bg);
  box-shadow: 0 30px 90px rgba(16, 24, 40, .24);
}

.trip-more-info-modal .modal-header {
  min-height: 72px;
  flex: 0 0 auto;
  padding: 18px 24px;
  border-bottom: 1px solid #e1e6ee;
  background: #fff;
}

.trip-more-info-modal .modal-title {
  color: #101828;
  font-weight: 800;
}

.trip-modal-route {
  max-width: 720px;
  overflow: hidden;
  color: #667085;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-more-info-modal .btn-close {
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px auto;
  border-radius: 50%;
  background-size: 14px;
  opacity: .72;
}

.trip-more-info-modal .btn-close:focus-visible {
  box-shadow: 0 0 0 4px rgba(88, 63, 153, .18);
}

.trip-info-tab-wrapper {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  overflow-x: auto;
  border-bottom: 1px solid #dfe4ec;
  background: #fff;
  scrollbar-width: none;
}

.trip-info-tab-wrapper::-webkit-scrollbar {
  display: none;
}

.trip-info-tabs {
  min-width: max-content;
  padding: 0 12px;
  border-bottom: 0;
}

.trip-info-tabs .nav-item {
  min-width: 132px;
}

.trip-info-tabs .nav-link {
  min-height: 52px;
  width: 100%;
  padding: 14px 18px 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #8290a7;
  background: transparent;
  font-size: .8rem;
  font-weight: 700;
}

.trip-info-tabs .nav-link:hover,
.trip-info-tabs .nav-link:focus-visible {
  color: var(--brand);
  border-color: transparent transparent rgba(88, 63, 153, .28);
  outline: none;
}

.trip-info-tabs .nav-link.active {
  color: var(--brand);
  border-color: transparent transparent var(--brand);
  background: #fff;
}

.trip-more-info-modal .modal-body {
  overflow-y: auto;
  padding: 24px;
  color: #475467;
  background: var(--trip-modal-bg);
}

.trip-modal-card {
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .04);
}

.trip-modal-card-heading {
  margin-bottom: 18px;
}

.trip-modal-kicker {
  color: #344054;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.trip-stop-timeline {
  position: relative;
}

.trip-stop-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 30px;
}

.trip-stop-item:last-child {
  padding-bottom: 0;
}

.trip-stop-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: -3px;
  left: 6px;
  width: 2px;
  background: #d9d0ee;
}

.trip-stop-marker {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-top: 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px rgba(88, 63, 153, .18);
}

.trip-stop-time {
  display: block;
  margin-bottom: 4px;
  color: #344054;
  font-size: 1.08rem;
  font-weight: 800;
}

.trip-stop-content h4 {
  margin: 0 0 4px;
  color: #344054;
  font-size: .9rem;
  font-weight: 700;
}

.trip-stop-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #dfe4ec;
  border-radius: 999px;
  color: #5c6b82;
  background: #f8fafc;
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}

.trip-stop-address {
  color: #8290a7;
  font-size: .78rem;
  font-style: normal;
  line-height: 1.55;
}

.trip-stop-contact,
.trip-map-link {
  display: block;
  width: fit-content;
  margin-top: 3px;
  color: #667085;
  font-size: .74rem;
}

.trip-map-unavailable {
  display: block;
  width: fit-content;
  margin-top: 3px;
  color: #8290a7;
  font-size: .74rem;
}

.trip-map-link {
  color: var(--brand);
  font-weight: 700;
}

.trip-map-link:hover,
.trip-map-link:focus-visible {
  color: var(--brand-hover);
  text-decoration: underline;
  outline: none;
}

.trip-terminal-gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  background: #dfe6ef;
}

.trip-info-side-column {
  position: sticky;
  top: 0;
}

.trip-modal-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trip-modal-amenities span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #e5e1f2;
  border-radius: 999px;
  color: #5c4a91;
  background: #fbfaff;
  font-size: .68rem;
  font-weight: 600;
}

.trip-modal-empty-note {
  color: #667085;
  font-size: .8rem;
}

.trip-summary-list {
  display: grid;
  gap: 12px;
}

.trip-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef1f5;
}

.trip-summary-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.trip-summary-list dt {
  color: #8290a7;
  font-size: .72rem;
  font-weight: 600;
}

.trip-summary-list dd {
  margin: 0;
  color: #344054;
  font-size: .74rem;
  font-weight: 800;
  text-align: right;
}

.trip-gallery-count {
  color: #667085;
  font-size: .72rem;
  font-weight: 700;
}

.trip-photo-carousel {
  overflow: hidden;
  border-radius: 16px;
  background: #d8e0eb;
}

.trip-photo-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.trip-photo-carousel .carousel-control-prev,
.trip-photo-carousel .carousel-control-next {
  width: 64px;
}

.trip-photo-carousel .carousel-control-prev-icon,
.trip-photo-carousel .carousel-control-next-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(16, 24, 40, .72);
  background-size: 20px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .22);
}

.trip-photo-thumb {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 11px;
  background: transparent;
}

.trip-photo-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.trip-photo-thumb:hover,
.trip-photo-thumb:focus-visible,
.trip-photo-thumb.active {
  border-color: var(--brand);
  outline: none;
}

.trip-photo-empty {
  padding: 56px 24px;
  text-align: center;
}

.trip-photo-empty i {
  display: block;
  margin-bottom: 12px;
  color: #98a2b3;
  font-size: 2.2rem;
}

.trip-photo-empty h4 {
  color: #344054;
  font-size: 1rem;
  font-weight: 800;
}

.trip-overall-rating {
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 1px solid #e8ecf2;
}

.trip-overall-rating strong {
  color: #344054;
  font-size: 2.5rem;
  line-height: 1;
}

.trip-overall-rating > span {
  color: #98a2b3;
  font-size: 1rem;
}

.trip-rating-stars,
.trip-review-stars {
  color: #f4b400;
}

.trip-overall-rating .trip-rating-stars {
  margin: 10px 0 4px;
}

.trip-overall-rating small {
  color: #8290a7;
  font-size: .72rem;
}

.trip-rating-categories {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.trip-rating-category > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: #5d6b82;
  font-size: .72rem;
}

.trip-rating-category b {
  color: #344054;
}

.trip-rating-category .progress {
  height: 7px;
  border-radius: 999px;
  background: #dbe2ec;
}

.trip-rating-category .progress-bar {
  border-radius: inherit;
  background: var(--brand);
}

.trip-review-sort {
  width: auto;
  min-width: 150px;
}

.trip-review-list {
  display: grid;
}

.trip-review-item {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid #e7ebf1;
}

.trip-review-item:first-child {
  padding-top: 0;
}

.trip-review-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.trip-review-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: rgba(88, 63, 153, .1);
  font-size: .72rem;
  font-weight: 800;
}

.trip-review-item h4,
.trip-review-item h5 {
  color: #344054;
  font-weight: 800;
}

.trip-review-item h4 {
  margin: 0;
  font-size: .82rem;
}

.trip-review-item time {
  color: #98a2b3;
  font-size: .68rem;
}

.trip-review-item h5 {
  margin: 15px 0 5px;
  font-size: .78rem;
}

.trip-review-item p {
  margin: 0;
  color: #667085;
  font-size: .75rem;
  line-height: 1.65;
}

.trip-review-stars {
  white-space: nowrap;
  font-size: .72rem;
}

.trip-policy-table {
  --bs-table-bg: transparent;
  color: #475467;
  font-size: .72rem;
}

.trip-policy-table > :not(caption) > * > * {
  padding: .75rem .65rem;
  border-bottom-color: #e6eaf0;
}

.trip-policy-table thead th {
  color: #667085;
  font-size: .66rem;
  font-weight: 700;
}

/* 来源标为不可用的政策档位:不能与可用档位长得一样。 */
.trip-policy-table tbody tr.trip-policy-row-disabled {
  color: #98a2b3;
  text-decoration: line-through;
}

.trip-policy-mobile-list {
  display: grid;
  gap: 10px;
}

.trip-policy-mobile-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 1.2fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e6eaf0;
}

.trip-policy-mobile-list span {
  color: #8290a7;
  font-size: .7rem;
}

.trip-policy-mobile-list strong {
  color: #344054;
  font-size: .72rem;
}

.trip-policy-note {
  display: flex;
  gap: 9px;
  padding: 12px;
  border-radius: 11px;
  color: #5d6b82;
  background: #f6f7fb;
  font-size: .7rem;
  line-height: 1.55;
}

.trip-policy-note i {
  color: var(--brand);
}

.trip-policy-see-all {
  color: var(--brand);
  font-size: .72rem;
  font-weight: 700;
}

.trip-policy-see-all:hover,
.trip-policy-see-all:focus-visible {
  color: var(--brand-hover);
  text-decoration: underline;
  outline: none;
}

.min-w-0 {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .trip-more-info-modal .modal-dialog {
    max-width: calc(100vw - 1rem);
    margin: .5rem auto;
  }

  .trip-more-info-modal .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .trip-info-side-column {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .trip-more-info-modal .modal-dialog {
    max-width: none;
    margin: 0;
  }

  .trip-more-info-modal .modal-content {
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .trip-more-info-modal .modal-header {
    min-height: 64px;
    padding: 14px 16px;
  }

  .trip-modal-route {
    max-width: 245px;
  }

  .trip-info-tabs {
    width: 100%;
    padding: 0;
  }

  .trip-info-tabs .nav-item {
    min-width: 88px;
    flex: 1 0 auto;
  }

  .trip-info-tabs .nav-link {
    min-height: 48px;
    padding: 13px 12px 10px;
    font-size: .72rem;
  }

  .trip-more-info-modal .modal-body {
    padding: 14px;
  }

  .trip-modal-card {
    padding: 15px;
    border-radius: 15px;
  }

  .trip-stop-item {
    gap: 10px;
  }

  .trip-terminal-gallery img {
    border-radius: 9px;
  }

  .trip-photo-carousel .carousel-item img {
    aspect-ratio: 4 / 3;
  }

  .trip-photo-carousel .carousel-control-prev,
  .trip-photo-carousel .carousel-control-next {
    width: 52px;
  }

  .trip-photo-carousel .carousel-control-prev-icon,
  .trip-photo-carousel .carousel-control-next-icon {
    width: 38px;
    height: 38px;
  }

  .trip-review-item {
    gap: 10px;
  }

  .trip-review-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .trip-policy-mobile-list > div {
    grid-template-columns: 1fr 1fr;
  }
}

.trip-gallery-feature-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.trip-gallery-feature-button:focus-visible {
  outline: 4px solid rgba(88, 63, 153, .7);
  outline-offset: -4px;
}

.trip-gallery-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 8;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  background: rgba(16, 24, 40, .78);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .24);
}

.trip-photo-carousel.is-lightbox {
  position: fixed;
  inset: 16px;
  z-index: 2000;
  display: flex;
  align-items: center;
  border-radius: 18px;
  background: rgba(8, 14, 26, .96);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}

.trip-photo-carousel.is-lightbox .carousel-inner,
.trip-photo-carousel.is-lightbox .carousel-item,
.trip-photo-carousel.is-lightbox .trip-gallery-feature-button {
  width: 100%;
}

.trip-photo-carousel.is-lightbox .carousel-item img {
  width: 100%;
  max-height: calc(100vh - 64px);
  aspect-ratio: auto;
  object-fit: contain;
}

.trip-gallery-lightbox-open {
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .trip-photo-carousel.is-lightbox {
    inset: 0;
    border-radius: 0;
  }

  .trip-gallery-close {
    top: 12px;
    right: 12px;
  }
}

.trip-more-info-modal .trip-more-info-content {
  display: flex;
  max-height: 90vh;
  overflow: hidden;
  flex-direction: column;
  background: #f4f6f9;
}

.trip-more-info-modal .trip-more-info-header {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.trip-more-info-modal .modal-body.more-info-scroll-container {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: #f4f6f9;
}

.trip-more-info-modal .more-info-nav {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  min-height: 58px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 12px;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .04);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.trip-more-info-modal .more-info-nav::-webkit-scrollbar {
  display: none;
}

.trip-more-info-modal .more-info-nav-link {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.15rem;
  color: #7b8499;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}

.trip-more-info-modal .more-info-nav-link::after {
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
  content: "";
  transition: background-color .2s ease;
}

.trip-more-info-modal .more-info-nav-link:hover,
.trip-more-info-modal .more-info-nav-link:focus-visible {
  color: var(--brand);
  background: rgba(88, 63, 153, .045);
}

.trip-more-info-modal .more-info-nav-link:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: -3px;
}

.trip-more-info-modal .more-info-nav-link.active {
  color: var(--brand);
}

.trip-more-info-modal .more-info-nav-link.active::after {
  background: var(--brand);
}

.trip-more-info-modal .more-info-sections {
  padding: 24px;
}

.trip-more-info-modal .more-info-section {
  position: relative;
  scroll-margin-top: 78px;
  margin: 0 0 24px;
}

.trip-more-info-modal .more-info-section:last-child {
  margin-bottom: 0;
}

.trip-more-info-modal .more-info-section::before {
  display: block;
  height: 1px;
  margin-top: -1px;
  content: "";
}

@media (min-width: 992px) {
  .trip-more-info-modal .modal-dialog {
    max-width: min(1180px, calc(100vw - 48px));
  }

  .trip-more-info-modal .modal-content {
    max-height: 90vh;
  }
}

@media (max-width: 767.98px) {
  .trip-more-info-modal .more-info-nav {
    min-height: 54px;
    padding-inline: 4px;
  }

  .trip-more-info-modal .more-info-nav-link {
    min-width: 92px;
    min-height: 54px;
    padding: .8rem 1rem;
    font-size: .76rem;
  }

  .trip-more-info-modal .more-info-nav-link::after {
    right: .8rem;
    left: .8rem;
  }

  .trip-more-info-modal .more-info-sections {
    padding: 14px;
  }

  .trip-more-info-modal .more-info-section {
    scroll-margin-top: 70px;
    margin-bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trip-more-info-modal .modal-body.more-info-scroll-container {
    scroll-behavior: auto;
  }

  .trip-more-info-modal .more-info-nav-link,
  .trip-more-info-modal .more-info-nav-link::after {
    transition: none;
  }
}

#photosSection .photo-carousel-wrapper {
  overflow: visible;
  margin-top: .25rem;
}

#photosSection .photo-thumbnail-track {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#photosSection .photo-thumbnail-track::-webkit-scrollbar {
  display: none;
}

#photosSection .photo-thumbnail {
  flex: 0 0 180px;
  width: 180px;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #eef2f7;
  box-shadow: 0 5px 16px rgba(16, 24, 40, .07);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#photosSection .photo-thumbnail:hover,
#photosSection .photo-thumbnail:focus-visible {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 8px 22px rgba(88, 63, 153, .16);
  transform: translateY(-2px);
}

#photosSection .photo-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#photosSection .photo-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #dfe3ea;
  border-radius: 50%;
  color: #344054;
  background: #fff;
  box-shadow: 0 8px 22px rgba(16, 24, 40, .13);
  transform: translateY(-50%);
  transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}

#photosSection .photo-nav:hover:not(:disabled),
#photosSection .photo-nav:focus-visible:not(:disabled) {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  outline: none;
}

#photosSection .photo-nav:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#photosSection .photo-nav-prev { left: -22px; }
#photosSection .photo-nav-next { right: -22px; }

.trip-photo-lightbox[hidden] {
  display: none;
}

.trip-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 12, 23, .92);
  backdrop-filter: blur(5px);
}

.trip-photo-lightbox-panel {
  width: min(1180px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  color: #fff;
  background: #0b1220;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52);
}

.trip-photo-lightbox-header {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px 12px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.trip-photo-lightbox-header h2 { color: #fff; }

.trip-photo-lightbox-count {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: .75rem;
}

.trip-photo-lightbox-close,
.trip-photo-lightbox-nav {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.trip-photo-lightbox-close:hover,
.trip-photo-lightbox-close:focus-visible,
.trip-photo-lightbox-nav:hover:not(:disabled),
.trip-photo-lightbox-nav:focus-visible:not(:disabled) {
  color: #101828;
  background: #fff;
  outline: none;
}

.trip-photo-lightbox-nav:disabled {
  opacity: .25;
  cursor: default;
}

.trip-photo-lightbox-stage {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 18px;
  min-height: min(720px, calc(94vh - 68px));
  padding: 20px;
}

.trip-photo-lightbox-figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.trip-photo-lightbox-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(94vh - 145px);
  object-fit: contain;
  border-radius: 12px;
}

.trip-photo-lightbox-figure figcaption {
  color: rgba(255, 255, 255, .76);
  font-size: .82rem;
  text-align: center;
}

.trip-photo-preview-open {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  #photosSection .photo-thumbnail {
    flex-basis: 160px;
    width: 160px;
  }
}

@media (max-width: 767.98px) {
  #photosSection .photo-nav {
    display: none;
  }

  #photosSection .photo-thumbnail-track {
    gap: .75rem;
    padding-right: 22%;
  }

  #photosSection .photo-thumbnail {
    flex-basis: calc((100% - .75rem) / 2);
    width: calc((100% - .75rem) / 2);
    min-width: 132px;
  }

  .trip-photo-lightbox {
    padding: 0;
  }

  .trip-photo-lightbox-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .trip-photo-lightbox-stage {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 6px;
    min-height: calc(100vh - 68px);
    padding: 12px 8px;
  }

  .trip-photo-lightbox-nav {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .trip-photo-lightbox-figure img {
    max-height: calc(100vh - 150px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #photosSection .photo-thumbnail-track {
    scroll-behavior: auto;
  }

  #photosSection .photo-thumbnail {
    transition: none;
  }
}

#seatSelectionModal .modal-dialog {
  --bs-modal-width: 1180px;
}

#seatSelectionModal .modal-content {
  max-height: min(90vh, 980px);
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #f2f5f8;
  box-shadow: 0 28px 80px rgba(16, 24, 40, .22);
}

#seatSelectionModal .seat-selection-header {
  min-height: 72px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
}

#seatSelectionModal .modal-title {
  color: var(--ink);
  font-weight: 800;
  text-align: center;
}

#seatSelectionModal .seat-header-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  background: #f7f8fa;
  color: #667085;
  font-size: 1.1rem;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

#seatSelectionModal .seat-info-button {
  color: var(--brand);
  background: rgba(88, 63, 153, .08);
  border-color: transparent;
}

#seatSelectionModal .seat-header-icon:hover,
#seatSelectionModal .seat-header-icon:focus-visible {
  border-color: rgba(88, 63, 153, .36);
  background: #fff;
  color: var(--brand);
  outline: 3px solid rgba(88, 63, 153, .14);
  outline-offset: 2px;
}

#seatSelectionModal .seat-selection-body {
  padding: 24px;
  overflow-y: auto;
  background: #f2f5f8;
}

#seatSelectionModal .selected-trip-summary,
#seatSelectionModal .seat-legend-wrapper {
  position: static;
  top: auto;
  z-index: auto;
}

#seatSelectionModal .deck-navigation {
  position: sticky;
  top: 0;
  z-index: 15;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 -4px 18px;
  padding: 12px 4px;
  background: rgba(242, 245, 248, .96);
  backdrop-filter: blur(10px);
}

#seatSelectionModal .deck-nav-button {
  min-height: 48px;
  padding: .7rem 1rem;
  border: 1px solid #dce2ea;
  border-radius: 999px;
  background: #fff;
  color: #68758c;
  font-weight: 800;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#seatSelectionModal .deck-nav-button:hover,
#seatSelectionModal .deck-nav-button:focus-visible {
  border-color: rgba(88, 63, 153, .45);
  color: var(--brand);
  outline: 3px solid rgba(88, 63, 153, .14);
  outline-offset: 2px;
}

#seatSelectionModal .deck-nav-button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 20px rgba(88, 63, 153, .2);
}

#seatSelectionModal .deck-section {
  scroll-margin-top: 88px;
}

#seatSelectionModal .seat-deck-card {
  border: 1px solid #e4e7ec;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .05);
}

#seatSelectionModal .seat-trip-summary {
    margin-bottom: 18px;
    padding: 22px 24px;
    border-radius: 20px;
    border: 1px solid #e4e7ec;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .05);
}

#seatSelectionModal .seat-trip-logo-wrap {
  width: 100px;
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#seatSelectionModal .seat-trip-logo-wrap img {
  width: 100px;
  object-fit: contain;
}

#seatSelectionModal .seat-trip-operator,
#seatSelectionModal .seat-trip-class {
  display: inline-block;
}

#seatSelectionModal .seat-trip-operator {
  color: var(--brand);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

#seatSelectionModal .seat-trip-class {
  margin-top: 3px;
  color: #98a2b3;
  font-size: .82rem;
  font-weight: 700;
}

#seatSelectionModal .seat-trip-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #dfe4ec;
  border-radius: 999px;
  color: #667085;
  background: #f8fafc;
  font-size: .76rem;
  font-weight: 700;
}

#seatSelectionModal .seat-trip-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

#seatSelectionModal .seat-route-point {
  min-width: 0;
}

#seatSelectionModal .seat-route-point time {
  display: block;
  margin-bottom: 8px;
  color: #344054;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 800;
  line-height: 1;
}

#seatSelectionModal .seat-route-point strong,
#seatSelectionModal .seat-route-point span {
  display: block;
}

#seatSelectionModal .seat-route-point strong {
  color: #475467;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
}

#seatSelectionModal .seat-route-point span {
  margin-top: 2px;
  color: #98a2b3;
  font-size: .76rem;
}

#seatSelectionModal .seat-route-journey {
  padding-top: 2px;
  color: #98a2b3;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
}

#seatSelectionModal .seat-route-journey > div {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  align-items: center;
  margin-top: 10px;
  color: var(--brand);
}

#seatSelectionModal .seat-route-journey > div > i:not(.bi) {
  height: 1px;
  background: #d7dde6;
}

#seatSelectionModal .seat-route-journey .bi {
  font-size: 1rem;
}

#seatSelectionModal .seat-legend-panel {
  margin-bottom: 22px;
  padding: 15px 20px;
  border-radius: 16px;
}

#seatSelectionModal .seat-choice-legend {
  color: #667085;
  font-size: .78rem;
  font-weight: 700;
}

#seatSelectionModal .seat-swatch {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
}

#seatSelectionModal .seat-swatch-available {
  border: 2px solid #dce2ea;
  background: #fff;
}

#seatSelectionModal .seat-swatch-occupied {
  border: 2px solid #ffc2c2;
  background: #ffe7e7;
}

#seatSelectionModal .seat-swatch-selected {
  border: 2px solid var(--brand);
  background: var(--brand);
}

#seatSelectionModal .seat-deck-card {
  min-height: 100%;
  padding: 28px 24px 32px;
  border-radius: 28px;
}

#seatSelectionModal .seat-deck-card h3 {
  margin-bottom: 18px;
  color: #475467;
  font-size: .95rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#seatSelectionModal .driver-cabin-indicator {
  width: fit-content;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  padding: 7px 18px;
  border: 1px solid #dfe4ec;
  border-radius: 999px;
  color: #98a2b3;
  background: #f8fafc;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

#seatSelectionModal .driver-cabin-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12b76a;
}

/* 驾驶舱按来源舵向靠边(IsLeftSteering),与 EBW 桌面端一致;数据未到前保持稿件的居中形态。 */
#seatSelectionModal .driver-cabin-indicator.is-left {
  margin-left: 0;
  margin-right: auto;
}

#seatSelectionModal .driver-cabin-indicator.is-right {
  margin-left: auto;
  margin-right: 0;
}

#seatSelectionModal .seat-auto-notice {
  margin-bottom: 18px;
}

#seatSelectionModal .autoseat .alert-primary { color: var(--ink-2); background-color: #faf9ff; border-color: #e6e1ff; }
#seatSelectionModal .autoseat small { font-size: .66rem; }
/* 稿件的全局 .alert / .list 规则收窄到自动排座说明框(ui-inventory §2.0 第一条):flex 居中、圆角 16px、列表行高与项间距。 */
#seatSelectionModal .autoseat .alert { display: flex; align-items: center; gap: 14px; border-radius: 16px; }
#seatSelectionModal .autoseat .alert ul { margin-bottom: 0; }
#seatSelectionModal .autoseat .list { padding-left: 1.2rem; color: var(--ink-2); font-size: .84rem; line-height: 1.75; }
#seatSelectionModal .autoseat .alert .list li { padding: 0; }

#seatSelectionModal .seat-choice-grid {
  display: grid;
  /* 列数由 search-results.js 按该层绘图坐标跨度写入 --seat-grid-columns;过道 = 没有座位落位的空列。 */
  grid-template-columns: repeat(var(--seat-grid-columns, 4), 52px);
  gap: 10px 12px;
  justify-content: center;
}

#seatSelectionModal .seat-choice {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#seatSelectionModal .seat-choice-available {
  border: 2px solid #dce2ea;
  background: #fff;
  color: #8a9ab1;
}

/* 封锁图上空闲座保留 available 外观但被禁用,:hover 对 disabled 按钮仍会匹配——
   不加 :not(:disabled) 时不可点的座位悬停还有上浮动效,与读屏播报的「不可选」互相矛盾。 */
#seatSelectionModal .seat-choice-available:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(88, 63, 153, .48);
  color: var(--brand);
  box-shadow: 0 8px 18px rgba(88, 63, 153, .12);
}

#seatSelectionModal .seat-choice-occupied {
  border: 2px solid #ffc2c2;
  background: #ffe7e7;
  color: #ef4545;
  cursor: not-allowed;
  opacity: 1;
}

#seatSelectionModal .seat-choice-selected {
  border: 2px solid var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(88, 63, 153, .24);
}

#seatSelectionModal .seat-choice:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 3px;
}

#seatSelectionModal .seat-selection-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex: 0 0 auto;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 24px;
  align-items: center;
  margin: 24px -24px -24px;
  padding: 18px 24px;
  border-top: 1px solid #e4e7ec;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -12px 30px rgba(16, 24, 40, .08);
}

#seatSelectionModal .seat-selection-footer.is-visible {
  display: grid;
  animation: seatSummaryIn .2s ease-out;
}

@keyframes seatSummaryIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#seatSelectionModal .seat-selection-summary {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

#seatSelectionModal .seat-selection-summary > div {
  display: flex;
  flex-direction: column;
}

#seatSelectionModal .summary-label {
  color: #98a2b3;
  font-size: .78rem;
  font-weight: 600;
}

#seatSelectionModal [data-selected-seat-numbers] {
  color: #667085;
  font-size: 1rem;
}

#seatSelectionModal [data-selected-seat-total] {
  color: var(--brand);
  font-size: 1.5rem;
  line-height: 1.1;
}

#seatSelectionModal .seat-continue-button {
  min-height: 54px;
  border-radius: 999px;
  font-weight: 800;
}

#seatSelectionModal .seat-continue-button:disabled {
  color: #98a2b3;
  border-color: #e4e7ec;
  background: #eaecf0;
  opacity: 1;
}

#seatSelectionModal .seat-count-requirement {
  grid-column: 1 / -1;
  color: #667085;
}

@media (prefers-reduced-motion: reduce) {
  #seatSelectionModal .seat-selection-footer.is-visible {
    animation: none;
  }

  #seatSelectionModal .deck-nav-button {
    transition: none;
  }
}

@media (max-width: 1199.98px) {
  #seatSelectionModal .seat-trip-route {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .9fr) minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  #seatSelectionModal .deck-navigation {
    display: grid;
  }
}

@media (max-width: 767.98px) {
  #seatSelectionModal .modal-content {
    max-height: 100%;
    border-radius: 0;
  }

  #seatSelectionModal .seat-selection-header {
    min-height: 64px;
    padding: 9px 14px;
  }

  #seatSelectionModal .seat-selection-body {
    padding: 16px;
  }

  #seatSelectionModal .seat-trip-summary {
    padding: 18px;
    border-radius: 18px;
  }

  #seatSelectionModal .seat-trip-logo-wrap {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  #seatSelectionModal .seat-trip-logo-wrap img {
    width: 42px;
  }

  #seatSelectionModal .seat-trip-route {
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
    gap: 8px;
  }

  #seatSelectionModal .seat-route-point time {
    font-size: 1.1rem;
  }

  #seatSelectionModal .seat-route-point strong {
    font-size: .79rem;
  }

  #seatSelectionModal .seat-route-point span,
  #seatSelectionModal .seat-route-journey {
    font-size: .68rem;
  }

  #seatSelectionModal .seat-legend-panel {
    padding: 13px 15px;
  }

  #seatSelectionModal .seat-choice-legend {
    gap: 12px !important;
    font-size: .72rem;
  }

  #seatSelectionModal .seat-deck-card {
    padding: 26px 14px 30px;
    border-radius: 24px;
  }

  #seatSelectionModal .seat-choice-grid {
    grid-template-columns: repeat(var(--seat-grid-columns, 4), 50px);
    gap: 8px;
  }

  #seatSelectionModal .seat-choice {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
  }

  #seatSelectionModal .seat-selection-footer {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 22px -16px -16px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }

  #seatSelectionModal .seat-selection-summary {
    gap: 18px;
  }

  #seatSelectionModal .seat-continue-button {
    width: 100%;
  }
}

@media (max-width: 389.98px) {
  #seatSelectionModal .seat-choice-grid {
    grid-template-columns: repeat(var(--seat-grid-columns, 4), 46px);
    gap: 6px;
  }

  #seatSelectionModal .seat-choice {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
}

#seatSelectionModal .choose-seat-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(90vh, 980px);
  overflow: hidden;
  background: #f4f6f9;
}

#seatSelectionModal .choose-seat-modal > .seat-selection-header {
  position: static;
  top: auto;
  z-index: auto;
  flex: 0 0 auto;
}

#seatSelectionModal .choose-seat-modal > .deck-navigation {
  position: static;
  top: auto;
  z-index: auto;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 1rem;
  border-bottom: 1px solid #e3e7ee;
  background: #f4f6f9;
  backdrop-filter: none;
}

#seatSelectionModal .choose-seat-modal > .seat-selection-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  padding: 1.5rem;
  background: #f4f6f9;
}

#seatSelectionModal .seat-selection-scroll .selected-trip-summary,
#seatSelectionModal .seat-selection-scroll .seat-legend-wrapper,
#seatSelectionModal .seat-selection-scroll .deck-section,
#seatSelectionModal .seat-selection-scroll .seat-deck-card > h3 {
  position: static;
  top: auto;
  z-index: auto;
}

#seatSelectionModal .seat-selection-scroll .deck-section {
  scroll-margin-top: 16px;
}

#seatSelectionModal .choose-seat-modal > .seat-selection-footer {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e3e7ee;
  background: #fff;
  box-shadow: 0 -8px 24px rgba(21, 29, 54, .08);
}

#seatSelectionModal .choose-seat-modal > .seat-selection-footer.is-visible {
  display: grid;
  animation: bookingFooterIn .2s ease-out;
}

@keyframes bookingFooterIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  #seatSelectionModal .choose-seat-modal > .deck-navigation {
    display: grid;
  }
}

@media (min-width: 992px) {
  #seatSelectionModal .choose-seat-modal > .deck-navigation {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #seatSelectionModal .choose-seat-modal {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #seatSelectionModal .choose-seat-modal > .seat-selection-scroll {
    padding: 1rem;
  }

  #seatSelectionModal .choose-seat-modal > .seat-selection-footer {
    grid-template-columns: 1fr;
    gap: .875rem;
    padding: .875rem 1rem calc(.875rem + env(safe-area-inset-bottom));
  }

  #seatSelectionModal .choose-seat-modal > .seat-selection-footer .seat-continue-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #seatSelectionModal .choose-seat-modal > .seat-selection-scroll {
    scroll-behavior: auto;
  }

  #seatSelectionModal .choose-seat-modal > .seat-selection-footer.is-visible {
    animation: none;
  }
}

#seatSelectionModal .choose-seat-modal > .seat-selection-scroll {
  scroll-padding-top: 92px;
}

#seatSelectionModal .seat-selection-scroll > .deck-navigation {
  position: sticky;
  top: -16px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 -1.5rem 1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e3e7ee;
  background: rgba(244, 246, 249, .98);
  backdrop-filter: blur(10px);
}

#seatSelectionModal .seat-selection-scroll > .deck-navigation + .seat-decks-section {
  position: relative;
}

#seatSelectionModal .seat-selection-scroll .deck-section {
  scroll-margin-top: 96px;
}

#seatSelectionModal .choose-seat-modal.has-seat-selection > .seat-selection-scroll {
  padding-bottom: 2rem;
}

@media (min-width: 992px) {
  #seatSelectionModal .seat-selection-scroll > .deck-navigation {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #seatSelectionModal .seat-selection-scroll > .deck-navigation {
    margin-right: -1rem;
    margin-left: -1rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #seatSelectionModal .seat-selection-scroll > .deck-navigation {
    backdrop-filter: none;
  }
}

#tripMoreInfoModal .trip-terminal-gallery {
  align-items: center;
  flex-wrap: wrap;
}

#tripMoreInfoModal .terminal-photo-thumbnail {
  position: relative;
  display: block;
  width: 150px;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #eef2f7;
  cursor: zoom-in;
  box-shadow: 0 5px 16px rgba(16, 24, 40, .07);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#tripMoreInfoModal .terminal-photo-thumbnail::after {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(16, 24, 40, .72);
  font-family: "bootstrap-icons";
  font-size: .82rem;
  content: "\f52a";
  pointer-events: none;
}

#tripMoreInfoModal .terminal-photo-thumbnail:hover,
#tripMoreInfoModal .terminal-photo-thumbnail:focus-visible {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 9px 24px rgba(88, 63, 153, .18);
  transform: translateY(-2px);
}

#tripMoreInfoModal .terminal-photo-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#tripMoreInfoModal .more-info-action-footer {
  flex: 0 0 auto;
  padding: 1rem 1.5rem;
  background: #fff;
  border-top: 1px solid #e3e7ee;
  box-shadow: 0 -8px 24px rgba(21, 29, 54, .08);
}

#tripMoreInfoModal .more-info-action-footer-inner {
  width: 100%;
}

#tripMoreInfoModal .more-info-action-footer .btn {
  min-height: 52px;
  width: 100%;
  padding-inline: 2rem;
  border-color: var(--brand);
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(88, 63, 153, .18);
}

#tripMoreInfoModal .more-info-action-footer .btn:hover,
#tripMoreInfoModal .more-info-action-footer .btn:focus-visible {
  border-color: var(--brand-hover);
  background: var(--brand-hover);
}

#tripMoreInfoModal .more-info-action-footer .btn:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .22);
  outline-offset: 3px;
}

#tripMoreInfoModal .more-info-action-footer .btn:disabled {
  cursor: wait;
  opacity: .72;
}

#tripMoreInfoModal .more-info-action-message {
  color: #b42318;
  font-size: .78rem;
  line-height: 1.5;
  text-align: left;
}

@media (min-width: 992px) {
  #tripMoreInfoModal .more-info-action-footer {
    display: flex;
    justify-content: flex-end;
  }

  #tripMoreInfoModal .more-info-action-footer-inner {
    width: auto;
    min-width: 280px;
    max-width: 390px;
  }

  #tripMoreInfoModal .more-info-action-footer .btn {
    min-width: 280px;
  }
}

@media (max-width: 991.98px) {
  #tripMoreInfoModal .more-info-action-footer {
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  #tripMoreInfoModal .more-info-action-footer-inner,
  #tripMoreInfoModal .more-info-action-footer .btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  #tripMoreInfoModal .terminal-photo-thumbnail {
    width: min(138px, 38vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tripMoreInfoModal .terminal-photo-thumbnail {
    transition: none;
  }
}

.mobile-search-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
}

.mobile-search-summary-copy {
  min-width: 0;
  padding-top: .15rem;
}

.mobile-search-summary h1,
.mobile-search-summary .mobile-search-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 4.6vw, 1.2rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.mobile-search-summary p {
  color: rgba(255, 255, 255, .8);
  font-size: .78rem;
  line-height: 1.45;
}

.mobile-edit-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 72px;
  min-height: 44px;
  padding: .55rem .8rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.mobile-edit-search-btn:hover,
.mobile-edit-search-btn:focus-visible,
.mobile-edit-search-btn[aria-expanded="true"] {
  border-color: #fff;
  background: #fff;
  color: var(--brand);
}

.mobile-edit-search-btn:active {
  transform: translateY(1px);
}

.mobile-edit-search-btn:focus-visible {
  outline: 3px solid rgba(255, 222, 47, .62);
  outline-offset: 3px;
  box-shadow: none;
}

.mobile-search-panel-collapse.collapse.show {
  overflow: visible;
}

.mobile-search-panel-collapse.collapsing {
  overflow: hidden;
}

@media (min-width: 992px) {
  .mobile-search-panel-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }
}

@media (max-width: 991.98px) {
  .bus-page-hero .container {
    position: relative;
  }

  .mobile-search-panel-region {
    position: relative;
    z-index: 4;
  }

  .mobile-search-panel-collapse .search-summary {
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .mobile-search-panel-collapse.show,
  .mobile-search-panel-collapse.collapsing {
    padding-bottom: 1rem;
  }

  .mobile-search-panel-collapse .search-summary,
  .mobile-search-panel-collapse .bus-search-form {
    overflow: visible;
  }
}

@media (max-width: 767.98px) {
  .page-hero.bus-page-hero {
    padding-top: 100px;
    padding-bottom: 1.25rem;
  }

  .mobile-search-panel-collapse .search-summary {
    margin-top: .875rem;
    padding: 1rem;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-edit-search-btn {
    transition: none;
  }
}

.mobile-results-toolbar {
  --bs-gutter-x: .75rem;
}

.mobile-results-toolbar > [class*="col-"] {
  min-width: 0;
}

.results-toolbar-btn,
.results-sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-width: 0;
  min-height: 48px;
  padding: .7rem .85rem;
  border: 1px solid #d8dce6;
  border-radius: .75rem;
  background: #fff;
  color: #344054;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.results-sort-btn {
  justify-content: flex-start;
  min-width: 190px;
  padding: .75rem 1rem;
  text-align: left;
}

.results-toolbar-btn i,
.results-sort-btn i {
  flex: 0 0 auto;
  font-size: 1rem;
}

.results-sort-btn.dropdown-toggle::after {
  flex: 0 0 auto;
  margin-left: auto;
}

.results-toolbar-label,
.sort-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-toolbar-btn:hover,
.results-toolbar-btn:focus-visible,
.results-toolbar-btn[aria-expanded="true"],
.results-sort-btn:hover,
.results-sort-btn:focus-visible,
.results-sort-btn[aria-expanded="true"] {
  border-color: var(--brand);
  background: #f7f4fc;
  color: var(--brand);
  box-shadow: none;
}

.results-toolbar-btn[aria-expanded="true"],
.results-sort-btn[aria-expanded="true"] {
  background: #f1edfa;
}

.results-toolbar-btn:focus-visible,
.results-sort-btn:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 2px;
}

.mobile-sort-control,
.mobile-sort-control .dropdown,
.mobile-sort-control [data-sort-component] {
  min-width: 0;
  height: 100%;
}

.mobile-sort-control .results-sort-btn {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.results-sort-menu {
  min-width: 220px;
  margin-top: .5rem !important;
  padding: .5rem;
  border: 1px solid #e1e5ec;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(21, 29, 54, .12);
}

.results-sort-menu .dropdown-item {
  min-height: 42px;
  padding: .65rem .75rem;
  border-radius: .5rem;
  color: #344054;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}

.results-sort-menu .dropdown-item:hover,
.results-sort-menu .dropdown-item:focus {
  background: #f5f2fb;
  color: var(--brand);
}

.results-sort-menu .dropdown-item.active,
.results-sort-menu .dropdown-item:active {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 991.98px) {
  .results-sort-menu {
    min-width: 100%;
  }
}

@media (max-width: 359.98px) {
  .results-toolbar-btn,
  .results-sort-btn {
    gap: .4rem;
    padding-inline: .6rem;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .results-toolbar-btn,
  .results-sort-btn {
    transition: none;
  }
}

.results-toolbar-btn.has-active-filters {
  border-color: var(--brand);
  background: #f1edfa;
  color: var(--brand);
}

@media (min-width: 992px) {
  .results-filter-sidebar {
    align-self: stretch;
    min-width: 0;
  }

  .results-filter-sidebar .filter-panel {
    position: sticky;
    top: calc(var(--desktop-header-height, 126px) + 16px);
    height: min(
      var(--desktop-filter-fill-height, 9999px),
      calc(100dvh - var(--desktop-header-height, 126px) - 24px)
    );
    max-height: none;
    margin-bottom: calc(-1 * var(--desktop-results-bottom-padding, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

.trip-direction-selector {
  width: 100%;
  scroll-margin-top: 88px;
}

.trip-direction-row,
.trip-direction-column,
.trip-direction-card,
.trip-direction-main,
.trip-direction-route,
.trip-date-control {
  min-width: 0;
}

.trip-direction-desktop {
  overflow: hidden;
  border: 1px solid #dfe3ea;
  border-radius: .875rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .05);
}

.trip-direction-column {
  display: flex;
}

.trip-direction-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: 1 1 auto;
  background: #f1f1f4;
  color: #344054;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.trip-direction-column + .trip-direction-column .trip-direction-card {
  border-left: 1px solid #dfe3ea;
}

.trip-direction-main {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .42rem;
  cursor: pointer;
}

.trip-direction-card-return .trip-direction-main {
  padding-bottom: 2.35rem;
}

.trip-direction-topline,
.trip-direction-route {
  display: flex;
  align-items: center;
  min-width: 0;
}

.trip-direction-topline {
  gap: .42rem;
}

.trip-direction-label {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.trip-direction-complete {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-size: 1.2rem;
}

.trip-direction-route {
  gap: .55rem;
  font-size: .9rem;
  line-height: 1.35;
}

.trip-direction-route strong {
  min-width: 0;
  font-weight: 800;
}

.trip-direction-route i {
  flex: 0 0 auto;
  color: #667085;
}

.trip-direction-selected-meta {
  color: #667085;
  font-size: .72rem;
  font-weight: 700;
}

.trip-direction-date-control {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: .35rem;
  padding: .75rem 1rem .75rem .25rem;
}

.date-nav-btn,
.trip-date-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #dce2ea;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
}

.date-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  padding: 0;
}

.trip-date-btn {
  min-width: 126px;
  padding: .55rem .8rem;
  white-space: nowrap;
  font-size: .76rem;
}


.date-nav-btn:hover:not(:disabled),
.date-nav-btn:focus-visible:not(:disabled),
.trip-date-btn:hover,
.trip-date-btn:focus-visible {
  border-color: var(--brand);
  background: #f5f2fb;
  color: var(--brand);
  outline: none;
}

.date-nav-btn:focus-visible,
.trip-date-btn:focus-visible,
.trip-tab:focus-visible,
.trip-direction-main:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(88, 63, 153, .22);
  outline: none;
}

.date-nav-btn:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.trip-direction-remove {
  position: absolute;
  left: 1.1rem;
  bottom: .62rem;
  min-height: 30px;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: .7rem;
  font-weight: 700;
}

.trip-direction-card.active {
  z-index: 2;
  background: var(--brand);
  color: #fff;
}

.trip-direction-card.active .trip-direction-route i,
.trip-direction-card.active .trip-direction-selected-meta {
  color: rgba(255, 255, 255, .82);
}

.trip-direction-card.active .date-nav-btn,
.trip-direction-card.active .trip-date-btn {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.trip-direction-card.active .date-nav-btn:hover:not(:disabled),
.trip-direction-card.active .date-nav-btn:focus-visible:not(:disabled),
.trip-direction-card.active .trip-date-btn:hover,
.trip-direction-card.active .trip-date-btn:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--brand);
}

.trip-direction-card.active .trip-direction-remove {
  color: #fff;
}

.trip-direction-selector.has-return [data-trip-direction-column="depart"] .trip-direction-card.active::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -10px;
  width: 20px;
  height: 20px;
  background: var(--brand);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.trip-direction-selector.has-return [data-trip-direction-column="return"] .trip-direction-card.active::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  background: var(--brand);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

.trip-direction-card:not(.active):hover,
.trip-direction-card:not(.active):focus-within {
  background: #ebe7f5;
  color: var(--brand);
}

.trip-direction-main:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(88, 63, 153, .3);
}

.trip-direction-card.active .trip-direction-main:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}

.trip-direction-remove:hover,
.trip-direction-remove:focus-visible {
  color: var(--brand);
  text-decoration: underline;
  outline: none;
}

.trip-direction-card.active .trip-direction-remove:hover,
.trip-direction-card.active .trip-direction-remove:focus-visible {
  color: #fff;
}

.trip-direction-mobile {
  overflow: hidden;
  border-radius: .875rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .07);
}

.trip-tabs {
  overflow: hidden;
  border: 1px solid #e3e7ee;
  border-bottom: 0;
  border-radius: .875rem .875rem 0 0;
}

.trip-tab-column {
  min-width: 0;
}

.trip-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 52px;
  padding: .65rem .75rem;
  border: 0;
  border-radius: 0;
  background: #f1f1f4;
  color: #101828;
  font-weight: 800;
  transition: background-color .18s ease, color .18s ease;
}

.trip-tab-column + .trip-tab-column .trip-tab {
  border-left: 1px solid #e3e7ee;
}

.trip-tab.active {
  background: var(--brand);
  color: #fff;
}

.trip-tab:not(.active):hover,
.trip-tab:not(.active):focus-visible {
  background: #e9e5f3;
  color: var(--brand);
}

.trip-tab-complete {
  color: #56d364;
  font-size: .86rem;
}

.trip-mobile-journey-panel {
  border: 1px solid #e3e7ee;
  border-top: 0;
  border-radius: 0 0 .875rem .875rem;
  background: #fff;
}

.trip-date-row {
  min-height: 76px;
  padding: .85rem 1rem;
}

.trip-route {
  min-width: 0;
  gap: .5rem;
  color: #101828;
  font-size: .86rem;
  line-height: 1.35;
}

.trip-route strong {
  font-weight: 800;
  white-space: normal;
}

.trip-route-arrow {
  flex: 0 0 auto;
  color: #667085;
  font-size: 1.05rem;
}

.trip-date-controls {
  flex: 0 0 auto;
  gap: .3rem;
}

.trip-date-controls .trip-date-btn {
  min-width: 104px;
}

.trip-mobile-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 1rem .8rem;
}

.trip-mobile-meta-row:empty {
  display: none;
}

.trip-mobile-selection-meta {
  min-width: 0;
  color: #667085;
  font-size: .72rem;
  font-weight: 700;
}

.trip-direction-remove-mobile {
  position: static;
  min-height: 44px;
  margin-left: auto;
  padding: .25rem 0;
  flex: 0 0 auto;
}

.results-heading-copy {
  min-width: 0;
}

.results-journey-heading {
  margin: 0 0 .2rem;
  color: #101828;
  font-size: .95rem !important;
  font-weight: 800;
}

.results-count-line {
  margin: 0;
}

#busListContainer.results-reloading {
  opacity: .58;
  transition: opacity .15s ease;
}

@media (min-width: 992px) {
  .trip-direction-selector {
    scroll-margin-top: calc(var(--desktop-header-height, 96px) + 16px);
  }

  .trip-direction-selector.has-return [data-trip-direction-column="depart"],
  .trip-direction-selector.has-return [data-trip-direction-column="return"] {
    flex: 0 0 auto;
    width: 50%;
  }

  .trip-direction-selector.is-one-way [data-trip-direction-column="depart"] {
    width: 100%;
  }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .trip-direction-card {
    grid-template-columns: minmax(0, 1fr) 160px;
  }

  .trip-direction-date-control {
    flex-wrap: wrap;
    justify-content: center;
    padding-left: .25rem;
  }

  .trip-date-btn {
    order: -1;
    width: 100%;
  }
}

@media (max-width: 991.98px) {
  .trip-direction-selector.has-return [data-trip-tab-column="depart"],
  .trip-direction-selector.has-return [data-trip-tab-column="return"] {
    flex: 0 0 auto;
    width: 50%;
  }

  .trip-direction-selector.is-one-way [data-trip-tab-column="depart"] {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .trip-date-row {
    gap: .65rem !important;
    padding-inline: .8rem;
  }

  .trip-route {
    font-size: .8rem;
    gap: .35rem;
  }

  .trip-date-controls {
    gap: .2rem;
  }

  .trip-date-controls .trip-date-btn {
    min-width: 94px;
    padding-inline: .45rem;
    font-size: .71rem;
  }
}

@media (max-width: 359.98px) {
  .trip-date-row {
    flex-wrap: wrap;
  }

  .trip-date-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trip-direction-card,
  .trip-tab,
  .date-nav-btn,
  .trip-date-btn,
  #busListContainer.results-reloading {
    transition: none;
  }
}

.trip-direction-card.completed:not(.active),
.trip-tab.completed:not(.active) {
  background: #fff;
  color: var(--ink);
}

.trip-direction-card.completed:not(.active) .trip-direction-route i,
.trip-direction-card.completed:not(.active) .trip-direction-selected-meta {
  color: var(--ink);
}

.trip-direction-card.is-disabled,
.trip-direction-card.is-disabled:hover,
.trip-direction-card.is-disabled:focus-within {
  border-color: #e1e5ec;
  background: #f1f1f4;
  color: #98a2b3;
  box-shadow: none;
}

.trip-direction-card.is-disabled .trip-direction-main,
.trip-direction-card.is-disabled .trip-direction-date-control,
.trip-direction-card.is-disabled .trip-direction-remove {
  cursor: not-allowed;
}

.trip-direction-card.is-disabled .trip-direction-route i,
.trip-direction-card.is-disabled .trip-direction-selected-meta,
.trip-direction-card.is-disabled .trip-direction-complete {
  color: #98a2b3;
}

.trip-direction-card.is-disabled .date-nav-btn,
.trip-direction-card.is-disabled .trip-date-btn {
  border-color: #e1e5ec;
  background: #f7f7f9;
  color: #98a2b3;
  opacity: .72;
  cursor: not-allowed;
}

.trip-tab:disabled,
.trip-tab:disabled:hover,
.trip-tab:disabled:focus-visible {
  border-color: #e1e5ec;
  background: #f1f1f4;
  color: #98a2b3;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .trip-direction-selector.has-return .trip-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trip-direction-selector.has-return [data-trip-tab-column="depart"],
  .trip-direction-selector.has-return [data-trip-tab-column="return"] {
    width: auto;
    max-width: none;
  }
}

:root {
  --checkout-header-height: 76px;
  --checkout-card-radius: 16px;
  --checkout-field-height: 50px;
}

.checkout-body {
  min-height: 100vh;
  color: var(--ink);
  background: #f4f5f8;
}

.checkout-site-header {
  z-index: 1030;
  min-height: var(--checkout-header-height);
  border-bottom: 1px solid rgba(16, 24, 40, .08);
  background: #31245f;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .11);
}

.checkout-header-inner {
  min-height: var(--checkout-header-height);
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
}

.checkout-brand,
.checkout-back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.checkout-brand { justify-self: start; }
.checkout-brand-word {
  color: #ffde2f;
  font-size: 1.35rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .035em;
}

.checkout-back-link {
  justify-self: end;
  gap: .4rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
}

.checkout-back-link:hover,
.checkout-back-link:focus-visible { color: #ffde2f; }

.checkout-header-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  font-weight: 800;
}

.checkout-header-progress span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.checkout-header-progress .is-complete { color: rgba(255,255,255,.82); }
.checkout-header-progress .is-complete i { color: #5ee3a5; }
.checkout-header-progress .is-current { color: #fff; }
.checkout-progress-number {
  width: 24px;
  height: 24px;
  justify-content: center;
  border-radius: 50%;
  color: #31245f;
  background: #ffde2f;
}

.checkout-main { min-height: calc(100vh - var(--checkout-header-height)); }
.checkout-page { max-width: 1320px; }
.checkout-page-heading { max-width: 760px; }
.checkout-page-heading h1 {
  color: #14213d;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
}
.checkout-page-heading > p:last-child { color: #667085; line-height: 1.65; }
.checkout-eyebrow {
  color: var(--brand);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.checkout-card {
  overflow: hidden;
  border: 1px solid #dfe4ec;
  border-radius: var(--checkout-card-radius);
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .065);
}

.checkout-card .card-body { padding: 1.5rem; }
.checkout-card h2,
.checkout-card h3 { color:var(--ink); font-weight: 800;}
.checkout-card h4 { color:var(--ink-2); font-weight: 600; font-size:.9rem }
.checkout-card p { color:var(--muted); font-weight: 600; font-size:.9rem }
.checkout-card .form-label {
  margin-bottom: .45rem;
  color: #344054;
  font-size: .78rem;
  font-weight: 700;
}

/* 稿件把这套字段样式写在全局 .form-control/.form-select/.input-group-text 上,取值与下面逐字相同
   ——注意它用的是 --checkout-field-height,即稿件自己把 Checkout 的字段尺寸提升成了全站基底。
   这里按 .nav-pills → .account-nav 的同一判据(见 web.css 内该处注释)收窄到 .checkout-card 之内:
   放开写会把 53 个页面里所有裸 .form-control 一并改掉,而各页面族的字段尺寸由各自的卡按稿定。
   需要字段基底的页面族在自己的作用域内补,不要把这一段提回全局。 */
.checkout-card .form-control,
.checkout-card .form-select,
.checkout-card .input-group-text {
  min-height: var(--checkout-field-height);
  border-color: #d8dee8;
  border-radius: 10px;
  color: #101828;
  background-color: #fff;
  font-size: .88rem;
  box-shadow: none;
}

/* More Info 弹窗(/search 与线路页)的评价排序下拉按同一稿件字段基底补在弹窗作用域内。 */
.trip-more-info-modal .form-select {
  min-height: var(--checkout-field-height);
  border-color: #d8dee8;
  border-radius: 10px;
  color: #101828;
  background-color: #fff;
  font-size: .88rem;
  box-shadow: none;
}

.checkout-card .input-group .input-group-text { border-radius: 10px 0 0 10px; }
.checkout-card .input-group .form-control,
.checkout-card .input-group .form-select { border-radius: 0 10px 10px 0; }
.checkout-card .form-control:focus,
.checkout-card .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(88, 63, 153, .14);
}
.checkout-card .form-control.is-invalid,
.checkout-card .form-select.is-invalid { border-color: #dc3545; }
.checkout-card .invalid-feedback { font-size: .72rem; }

.checkout-section-heading {
    display: flex;
    align-items: center;
}
.checkout-section-heading p { font-size: .82rem; line-height: 1.55; }
.checkout-section-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--brand);
  background: #f1edfa;
  font-size: 1.15rem;
}

.quick-signin-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.2fr);
  align-items: center;
  gap: 18px;
  padding: 1rem;
  border: 1px solid #e4e7ec;
  border-radius: 13px;
  background: #fafbfc;
}
.quick-signin-panel > div:first-child { display: flex; flex-direction: column; }
.quick-signin-panel strong { color: #14213d; font-size: .9rem; }
.quick-signin-panel span { margin-top: 3px; color: #667085; font-size: .73rem; }
.quick-signin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-signin-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  color: #344054;
  background: #fff;
  font-size: .75rem;
  font-weight: 800;
}
.quick-signin-btn:hover,
.quick-signin-btn:focus-visible { border-color: var(--brand); color: var(--brand); background: #f8f6fc; }
.quick-signin-apple { color: #fff; border-color: #101010; background: #101010; }
.quick-signin-apple:hover,
.quick-signin-apple:focus-visible { color: #fff; border-color: #2a2a2a; background: #2a2a2a; }
.google-mark { margin: 0 !important; color: #4285f4 !important; font-size: 1rem !important; font-weight: 800; }

.checkout-country-select .input-group-text { width: 48px; justify-content: center; padding: .5rem; }
.checkout-country-select img { width: 25px; height: 17px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16,24,40,.16); }
.checkout-privacy-note {
  min-height: var(--checkout-field-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .72rem .85rem;
  border: 1px solid #bcd0e6;
  border-radius: 10px;
  color: #365d82;
  background: #f4f9ff;
  font-size: .72rem;
  line-height: 1.45;
}
.checkout-privacy-note i { color: var(--brand); font-size: 1rem; }

.passenger-forms { display: grid; gap: 1rem; }
.passenger-form {
  overflow: hidden;
  border: 1px solid #dfe4ec;
  border-radius: 13px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.passenger-form.is-complete { border-color: #b8dfca; background: #fbfffc; }
.passenger-form-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: .9rem 1rem;
  border-bottom: 1px solid #e7eaf0;
  background: #fafbfc;
}
.passenger-form-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}
.passenger-number {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 50%;
    color: #fff;
    background: var(--brand);
    font-weight: 800;
}
.passenger-form-heading h3 { margin: 0; font-size: .9rem; }
.passenger-form-heading span {
    color: #fff;
    font-size: .7rem;
}
.passenger-complete-icon { color: #22a06b; font-size: 1.15rem; }
.passenger-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #667085;
  background: transparent;
}
.passenger-toggle:disabled { opacity: .35; cursor: default; }
.passenger-form-body { padding: 1rem; }
.passenger-save-check { font-size: .76rem; color: #475467; }
.passenger-save-check .form-check-input { margin-top: .18em; }

.insurance-benefits .insurance-benefit {
  height: 100%;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  padding: .85rem;
  border: 1px solid #e0e5f0;
  border-radius: 12px;
  background: #f1f4ff;
}
.insurance-benefit i { color: var(--brand); font-size: 1.15rem; }
.insurance-benefit strong { margin-top: .65rem; color: #14213d; font-size: .84rem; }
.insurance-benefit span { margin-top: .15rem; color: #667085; font-size: .68rem; line-height: 1.35; }

.checkout-choice-list { display: grid; gap: .7rem; }
.checkout-choice-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: .8rem 1rem;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.checkout-choice-row:hover { border-color: rgba(88,63,153,.45); background: #fbfaff; }
    .checkout-choice-row.is-selected {
        border-color: rgba(88,63,153,.45);
        background: #f5f2fb;
        box-shadow: inset 0 0 0 1px rgba(88,63,153,.05);
    }
    .checkout-choice-row.warning.is-selected {
        border-color: #fff6e1;
        background: rgba(255, 193, 7, 0.06);
        box-shadow: inset 0 0 0 1px rgba(88,63,153,.05);
    }
.checkout-choice-row .form-check-input { width: 20px; height: 20px; margin: 0; }
.checkout-choice-row > span {
  display: flex;
  flex-direction: column;
}
.checkout-choice-row strong {
  color: #344054;
  font-size: .8rem;
}
.checkout-choice-row small {
  display: block;
  margin-top: 3px;
  color: #667085;
  font-size: .7rem;
  line-height: 1.4;
}
.checkout-choice-check { color: var(--brand); opacity: 0; }
.warning .checkout-choice-check {
    color: var(--yellow);
    opacity: 0;
}
.checkout-choice-row.is-selected .checkout-choice-check { opacity: 1; }
.boarding-qr-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.boarding-qr-row-head .success-badge,
.boarding-qr-row-head .warning-badge,
.boarding-qr-badge-muted { min-height: 20px; padding: .1rem .45rem; font-size: .68rem; }
.boarding-qr-badge-muted {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef0f4;
  color: #667085;
  font-weight: 800;
}
.boarding-qr-row-terminal { margin-top: 2px; color: #344054; font-size: .78rem; font-weight: 600; }
.boarding-qr-row-price { color: var(--brand); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.boarding-qr-row-price s { color: #98a2b3; font-weight: 600; }

.checkout-addon-card .checkout-section-heading {
  align-items: flex-start;
}
.checkout-addon-card .checkout-section-heading > .ms-2 {
  min-width: 0;
  flex: 1 1 auto;
}
.checkout-addon-card .checkout-section-heading p {
  line-height: 1.45;
}
.checkout-addon-card .success-badge,
.checkout-addon-card .warning-badge {
  flex: 0 0 auto;
  margin-top: .35rem;
}
.checkout-addon-unavailable {
  padding: .7rem .8rem;
  border: 1px solid #f4d7a1;
  border-radius: 10px;
  color: #835b13;
  background: #fff9ed;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.45;
}
.promo-entry .input-group .btn {
  min-width: 110px;
  border-radius: 0 10px 10px 0;
  font-size: .78rem;
  font-weight: 800;
}
.promo-feedback {
  min-height: 21px;
  margin-top: .45rem;
  color: #667085;
  font-size: .72rem;
  line-height: 1.45;
}
.promo-applied {
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: .8rem;
  border: 1px solid #a9d7bd;
  border-radius: 12px;
  background: #f2fbf5;
}
.promo-applied-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #22a06b;
}
.promo-applied > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.promo-applied strong {
  color: #207a43;
  font-size: .82rem;
  letter-spacing: .04em;
}
.promo-applied small {
  margin-top: 2px;
  color: #47725a;
  font-size: .7rem;
  line-height: 1.4;
}
.promo-applied .btn {
  min-height: 44px;
  font-size: .72rem;
  font-weight: 800;
}

.payment-method-unavailable-card {
  overflow: visible;
}
.payment-method-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: .9rem;
  border: 1px solid #c9dff2;
  border-radius: 12px;
  color: #365d82;
  background: #f1f8ff;
}
.payment-method-unavailable > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--brand);
  font-size: 1rem;
}
.payment-method-unavailable > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.payment-method-unavailable strong {
  color: #294d70;
  font-size: .82rem;
}
.payment-method-unavailable span {
  color: #4d6e8e;
  font-size: .74rem;
  line-height: 1.45;
}
.payment-method-placeholder-list {
  display: grid;
  gap: .6rem;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}
.payment-method-placeholder {
  min-height: 60px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: .75rem .9rem;
  border: 1px solid #e0e5ed;
  border-radius: 11px;
  color: #667085;
  background: #fafbfc;
}
.payment-method-placeholder > i {
  color: #98a2b3;
  font-size: 1rem;
}
.payment-method-placeholder > span {
  min-width: 0;
  color: #667085;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.payment-method-placeholder > small {
  color: #98a2b3;
  font-size: .68rem;
  white-space: nowrap;
}
.checkout-pay-now-block {
  padding-top: .1rem;
}
.checkout-action-divider {
  height: 1px;
  margin-bottom: 1.1rem;
  background: #e4e7ec;
}
.checkout-pay-now-block .checkout-pay-button {
  margin-top: 0;
}
.checkout-policy-agreement {
  color: #667085;
  font-size: .74rem;
  line-height: 1.45;
}
.checkout-policy-agreement .form-check-input {
  margin-top: .15rem;
}
.checkout-policy-unavailable {
  color: #98a2b3;
  font-size: .68rem;
  line-height: 1.4;
}

.checkout-detail-accordion { --bs-accordion-border-color: #e4e7ec; --bs-accordion-btn-padding-x: .85rem; --bs-accordion-btn-padding-y: .8rem; }
.checkout-detail-accordion .accordion-item { overflow: hidden; border-radius: 10px; }
.checkout-detail-accordion .accordion-button {
  min-height: 44px;
  color: var(--brand);
  background: #fff;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: none;
}
.checkout-detail-accordion .accordion-button:not(.collapsed) { color: var(--brand); background: #f8f6fc; }
.checkout-detail-accordion .accordion-body { color:var(--muted); font-size: .75rem; line-height: 1.65; }
.checkout-detail-accordion a { color: var(--brand); text-decoration: underline; }

.refund-protection-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.refund-protection-summary > div {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  padding: .8rem;
  border-radius: 11px;
  background: #f8f7fc;
}
.refund-protection-summary span { color: #667085; font-size: .65rem; }
.refund-protection-summary strong { margin-top: .35rem; color: #344054; font-size: .74rem; line-height: 1.4; }
[data-refund-card].is-selected { border-color: #bcaee1; background: #fbf9ff; }
.checkout-terms-copy { color: #667085; font-size: .7rem; line-height: 1.5; }
.checkout-terms-copy a { color: var(--brand); text-decoration: underline; }

.boarding-qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 18px;
  align-items: center;
}
.boarding-qr-options { display: grid; gap: .7rem; }
.boarding-qr-option {
  min-height: 70px;
  display: grid;
  grid-template-columns: auto 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: .8rem;
  border: 1px solid #d8dee8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.boarding-qr-option.is-selected { border-color: #8bc9a8; background: #f3faf5; }
.boarding-qr-option .form-check-input { width: 20px; height: 20px; margin: 0; }
.boarding-qr-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--brand); background: #f1edfa; }
.boarding-qr-option > span:nth-of-type(2) { display: flex; flex-direction: column; }
.boarding-qr-option strong { color: #344054; font-size: .78rem; }
.boarding-qr-option small { margin-top: 3px; color: #667085; font-size: .68rem; }
.boarding-qr-price { color: var(--brand); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.boarding-pass-illustration {
  position: relative;
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--brand);
  background: linear-gradient(145deg, #f2eefa, #fff9d8);
  font-size: 4rem;
}
.boarding-pass-qr { position: absolute; right: 18px; bottom: 16px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #14213d; background: #fff; font-size: 1.2rem; box-shadow: 0 8px 20px rgba(16,24,40,.12); }

.voucher-entry .input-group .btn { min-width: 110px; border-radius: 0 10px 10px 0; font-size: .78rem; font-weight: 800; }
.voucher-feedback { min-height: 21px; margin-top: .45rem; font-size: .72rem; }
.voucher-feedback.is-error { color: #b42318; }
.voucher-feedback.is-loading { color: #667085; }
/* 正文里的模态触发器用 button(无 href 的 a 不可聚焦),撤掉 .btn 的触控高度、边框与字号,排版随所在段落,与稿件的行内链接一致。 */
.voucher-modal-link { min-height: 0; border: 0; font-size: inherit; line-height: inherit; vertical-align: baseline; }
.voucher-applied {
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: .8rem;
  border: 1px solid #a9d7bd;
  border-radius: 12px;
  background: #f2fbf5;
}
.voucher-applied-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #22a06b; }
.voucher-applied > span:nth-child(2) { display: flex; flex-direction: column; }
.voucher-applied strong { color: #207a43; font-size: .82rem; letter-spacing: .04em; }
.voucher-applied small { margin-top: 2px; color: #47725a; font-size: .7rem; }
.voucher-applied .btn { min-height: 44px; font-size: .72rem; font-weight: 800; }

.payment-options { display: grid; gap: 0; padding: 0; border: 1px solid #d8dee8; border-radius: 13px; overflow: hidden; }
.payment-option {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 58px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: .8rem 1rem;
  border-bottom: 1px solid #e4e7ec;
  background: #fff;
  cursor: pointer;
  transition: background-color .18s ease;
}
.payment-option:last-of-type { border-bottom: 0; }
.payment-option:hover { background: #faf9fd; }
.payment-option.is-selected { background: #f5f2fb; }
.payment-option .form-check-input { width: 21px; height: 21px; margin: 0; }
.payment-option img { width: 58px; height: 30px; object-fit: contain; object-position: left center; }
.payment-option > span { display: flex; flex-direction: column; }
.payment-option strong { color: #344054; font-size: .8rem; }
.payment-option small { margin-top: 3px; color: #667085; font-size: .68rem; }
.payment-option-chevron { color: #98a2b3; }
.payment-method-fields {
  padding: 1rem;
  border-bottom: 1px solid #e4e7ec;
  background: #fcfcfd;
}
.secure-payment-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: .85rem;
  border-radius: 11px;
  color: #365d82;
  background: #eef7ff;
}
.secure-payment-note i { margin-top: 2px; color: var(--brand); }
.secure-payment-note span { display: flex; flex-direction: column; font-size: .7rem; line-height: 1.45; }
.secure-payment-note strong { color: #294d70; font-size: .76rem; }

.booking-summary-sticky { position: static; }
.journey-summary-heading {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 80px;
  align-items: center;
  gap: 10px;
}
.journey-status-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background:var(--brand); }
.checkout-card-kicker { display: block; color:var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.journey-operator-logo {
    display: block;
    width: 80px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
}
.compact-journey-timeline {
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e4e7ec;
}
.compact-journey-timeline > div:not(.compact-journey-line) { display: flex; flex-direction: column; }
.compact-journey-timeline strong { color:var(--ink); font-size: .9rem; }
.compact-journey-timeline span { margin-top: 4px; color:var(--muted-2); font-size: .7rem; line-height: 1.35; font-weight: 500;}
.compact-journey-line { display: flex; flex-direction: column; align-items: center; color: #667085; font-size: .62rem; }
.compact-journey-line i { position: relative; width: 100%; height: 1px; margin-top: 8px; background: #cbd5e1; }
.compact-journey-line i::before,
.compact-journey-line i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); transform: translateY(-50%); }
.compact-journey-line i::before { left: 0; }
.compact-journey-line i::after { right: 0; }
.journey-summary-meta { display: grid; gap: .45rem; margin-top: .9rem; color:var(--muted); font-size: .75rem; font-weight:500;}
.journey-summary-meta span { display: flex; align-items: center; gap: 6px; }
.journey-summary-meta i { color: var(--brand); }
.journey-detail-list { display: grid; gap: .65rem; margin: 0; }
.journey-detail-list > div { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 10px; }
.journey-detail-list dd { margin: 0; color:var(--ink-2); font-weight: 700; }

.currency-pill { padding: .35rem .55rem; border-radius: 999px; color: var(--brand); background: #f1edfa; font-size: .65rem; font-weight: 800; }
.payment-breakdown { display: grid; gap: .65rem; }
.payment-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color:var(--muted); font-size:.9rem; font-weight:500; }
.payment-breakdown > div span { min-width: 0; overflow-wrap: anywhere; }
.payment-breakdown strong { margin-left: auto; color: #344054; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.payment-breakdown-detail { padding-left: .8rem; color: var(--muted-2) !important; font-size: .75rem !important; }
.payment-discount-line { color: #207a43 !important; }
.payment-discount-line strong { color:var(--ink); }
.payment-total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #d8dee8;
}
.payment-total-row span { color:var(--ink); font-weight: 800; }
.payment-total-row small { color: var(--muted); font-size: .75rem; font-weight: 500; }
.payment-total-row strong { color: var(--ink); font-size: 1.35rem; font-weight: 800; }
.checkout-pay-button {
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 1rem;
  border-radius: 11px;
  font-weight: 800;
}
.checkout-pay-button:disabled,
.mobile-payment-footer .btn:disabled { cursor: not-allowed; opacity: .55; }
/* Pay Now 的忙态(报价在飞 / 点击链进行中 / 导航提交中)与禁用态分开:禁用只留给真正不可用(降不透明度),
   忙态不降不透明度、屏蔽点击并加 spinner;脚本只切 aria-busy,不往按钮里塞标记。
   data-busy-spinner 是同一效果的通用 opt-in 属性,不给全部 aria-busy 按钮加转圈——ajax.js 的
   beginSubmitLoading 还会自己往未预先禁用的提交者里插一份 spinner,通用规则会双转圈。 */
[data-checkout-pay-now][aria-busy="true"],
[data-busy-spinner][aria-busy="true"],
.mobile-payment-footer .btn[aria-busy="true"] { pointer-events: none; cursor: progress; opacity: 1; }
[data-checkout-pay-now][aria-busy="true"]::before,
[data-busy-spinner][aria-busy="true"]::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  vertical-align: -.125em;
  border: .16em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
/* 重报期间只有触发所在的卡片进忙态(加购卡与支付方式卡,都是 .checkout-card):卡头保留可读,其余内容变暗并屏蔽点击。 */
.checkout-card[aria-busy="true"] .card-body > :not(.checkout-section-heading) { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.checkout-card[aria-busy="true"] .checkout-section-heading::after {
  content: "";
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: .75rem;
  border: .18em solid var(--brand);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
.checkout-addon-card[aria-busy="true"] .checkout-section-heading::after { margin-top: .35rem; }
/* Pay Now 点击后的阻塞项红字:自绘选项行、支付网关区与政策勾选没有 Bootstrap 的 .invalid-feedback 可挂,由脚本切 hidden。 */
.checkout-field-feedback,
.checkout-card .checkout-field-feedback { margin: .5rem 0 0; color: #dc3545; font-size: .72rem; line-height: 1.4; }
.mobile-policy-feedback { grid-column: 1 / -1; margin-top: 0; }
/* 阻塞项定位的滚动目标:避让粘性页头与移动底部条;block:center 之外的小屏兜底。 */
.checkout-card,
.checkout-card .form-control,
.checkout-card .form-select,
.checkout-choice-list,
.mobile-ticketing-policy-agreement {
  scroll-margin-top: calc(var(--checkout-header-height) + 16px);
  scroll-margin-bottom: 120px;
}
@media (prefers-reduced-motion: reduce) {
  [data-checkout-pay-now][aria-busy="true"]::before,
  [data-busy-spinner][aria-busy="true"]::before,
  .checkout-card[aria-busy="true"] .checkout-section-heading::after { animation: none; border-right-color: currentColor; opacity: .5; }
}
.payment-action-help { color: #667085; text-align: center; font-size: .66rem; line-height: 1.4; }
.checkout-payment-status { padding: .75rem; border-radius: 9px; font-size: .7rem; line-height: 1.45; }
.checkout-payment-status.is-success { color: #207a43; background: #edf9f1; }
.checkout-payment-status.is-error { color: #b42318; background: #fff1f0; }
.checkout-validation-summary { border-radius: 12px; font-size: .78rem; }

.mobile-booking-summary-card .checkout-card-toggle {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 1rem;
  border: 0;
  color: #14213d;
  background: #fff;
  text-align: left;
}
.checkout-card-toggle > span:first-child { min-width: 0; display: flex; flex-direction: column; }
.checkout-card-toggle > span:first-child strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.mobile-summary-total { display: flex; flex-direction: column; text-align: right; }
.mobile-summary-total small { color: #667085; font-size: .6rem; }
.mobile-summary-total strong { color: var(--brand); font-size: .84rem; }
.checkout-card-toggle > i { transition: transform .2s ease; }
.checkout-card-toggle:not(.collapsed) > i { transform: rotate(180deg); }
.mobile-trip-summary { display: grid; gap: .8rem; padding-top: .85rem; border-top: 1px solid #e4e7ec; }
.mobile-trip-summary-item { display: grid; gap: .25rem; }
.mobile-trip-summary-item strong { color: #14213d; font-size: .76rem; }
.mobile-trip-summary-item span { color: #667085; font-size: .67rem; line-height: 1.4; }

.mobile-payment-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(170px, 48%);
  align-items: center;
  gap: 14px;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid #d8dee8;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -10px 28px rgba(16,24,40,.12);
  backdrop-filter: blur(12px);
}
.mobile-payment-footer > div { display: flex; }
.mobile-payment-footer > div span { color: #667085; font-size: .65rem; }
.mobile-payment-footer > div strong { color: #14213d; font-size: 1.05rem; }
.mobile-payment-footer .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 800; }
.checkout-policy-modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(16,24,40,.22); }
.checkout-policy-modal-content .modal-body { color: #475467; font-size: .82rem; line-height: 1.7; }

.checkout-card :where(button, input, select, a):focus-visible,
.checkout-back-link:focus-visible,
.checkout-brand:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 2px;
}
.checkout-site-header :where(a, button):focus-visible { outline-color: rgba(255,222,47,.75); }

@media (min-width: 992px) {
  .checkout-summary-column { align-self: stretch; }
  .booking-summary-sticky {
    position: sticky;
    top: calc(var(--checkout-header-height) + 140px);
    max-height: calc(100vh - var(--checkout-header-height) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 3px;
  }
  .checkout-layout,
  .checkout-page,
  .checkout-summary-column { overflow: visible; transform: none; contain: none; }
  .passenger-toggle { pointer-events: none; visibility: hidden; }
}

@media (max-width: 1199.98px) {
  .checkout-card .card-body { padding: 1.25rem; }
  .quick-signin-panel { grid-template-columns: 1fr; }
  .journey-summary-card .card-body,
  .payment-summary-card .card-body { padding: 1.1rem; }
}

@media (max-width: 991.98px) {
  .checkout-body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .checkout-header-inner { grid-template-columns: 1fr auto; }
  .checkout-header-progress { display: none; }
  .checkout-page-heading { margin-top: .25rem; }
  .checkout-summary-column { display: none; }
  .passenger-toggle:not(:disabled) { cursor: pointer; }
  .passenger-form.is-collapsed .passenger-form-body { display: none; }
  .passenger-form.is-collapsed .passenger-form-header { border-bottom: 0; }
  .passenger-form.is-collapsed .passenger-toggle i { transform: rotate(-90deg); }
}

@media (max-width: 767.98px) {
  :root { --checkout-header-height: 64px; }
  .checkout-header-inner { min-height: var(--checkout-header-height); gap: 12px; }
  .checkout-brand-word { font-size: 1.05rem; }
  .checkout-back-link { font-size: .75rem; }
  .checkout-page { padding-right: 12px; padding-left: 12px; }
  .checkout-page-heading h1 { font-size: 1.65rem; }
  .checkout-page-heading > p:last-child { font-size: .82rem; }
  .checkout-card { border-radius: 14px; }
  .checkout-card .card-body { padding: 1rem; }
  .checkout-section-heading { gap: 10px; }
  .checkout-section-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .quick-signin-actions { grid-template-columns: 1fr; }
  .refund-protection-summary { grid-template-columns: 1fr; }
  .refund-protection-summary > div { min-height: auto; }
  .boarding-qr-layout { grid-template-columns: 1fr; }
  .boarding-pass-illustration { display: none; }
  .payment-option { grid-template-columns: auto 48px minmax(0,1fr) auto; padding-inline: .75rem; }
  .payment-option img { width: 48px; }
  .checkout-choice-row { padding-inline: .8rem; }
}

@media (max-width: 575.98px) {
  .insurance-benefits .insurance-benefit { min-height: 108px; }
  .boarding-qr-option { grid-template-columns: auto 34px minmax(0,1fr); }
  .boarding-qr-price { grid-column: 3; justify-self: start; }
  .voucher-entry .input-group { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .voucher-entry .input-group .form-control,
  .voucher-entry .input-group .btn { width: 100%; border-radius: 10px !important; }
  .voucher-applied { grid-template-columns: 34px minmax(0,1fr); }
  .voucher-applied .btn { grid-column: 2; justify-self: start; padding-left: 0; }
  .mobile-payment-footer { grid-template-columns: minmax(0,1fr) minmax(150px, 52%); padding-inline: .75rem; }
  .checkout-addon-card .checkout-section-heading { flex-wrap: wrap; }
  .checkout-addon-card .checkout-section-heading > .ms-2 { flex: 1 1 calc(100% - 48px); }
  .checkout-addon-card .success-badge,
  .checkout-addon-card .warning-badge { margin-top: .65rem; margin-left: 48px !important; }
  .promo-entry .input-group { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .promo-entry .input-group .form-control,
  .promo-entry .input-group .btn { width: 100%; border-radius: 10px !important; }
  .promo-applied { grid-template-columns: 34px minmax(0,1fr); }
  .promo-applied .btn { grid-column: 2; justify-self: start; padding-left: 0; }
  .payment-method-placeholder > small { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .passenger-form,
  .checkout-choice-row,
  .payment-option,
  .checkout-card-toggle > i { transition: none; }
}

.journey-summary-cards {
  display: grid;
  gap: 1rem;
}

.journey-summary-cards > .journey-summary-card {
  margin-bottom: 0 !important;
}

.checkout-mobile-journey-slot:empty {
  display: none !important;
}

.mobile-total-trigger {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0;
  border: 0;
  color: #111c38;
  background: transparent;
  text-align: left;
}

.mobile-total-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mobile-total-copy .small {
  color: #667085;
  font-size: .68rem;
}

.mobile-total-copy strong {
  color: #111c38;
  font-size: 1.08rem;
  line-height: 1.25;
  white-space: nowrap;
}

.mobile-total-trigger > i {
  flex: 0 0 auto;
  color: var(--brand);
  transition: transform .2s ease;
}

.mobile-total-trigger[aria-expanded="true"] > i {
  transform: rotate(180deg);
}

.mobile-total-trigger:hover,
.mobile-total-trigger:focus-visible {
  color: var(--brand);
}

.mobile-total-trigger:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .25);
  outline-offset: 4px;
  border-radius: 8px;
}

.mobile-price-summary-sheet.offcanvas-bottom {
  --bs-offcanvas-height: min(80vh, 720px);
  height: min(80vh, 720px);
  max-height: calc(100dvh - env(safe-area-inset-top));
  overflow: hidden;
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  background: #fff;
  box-shadow: 0 -18px 50px rgba(21, 29, 54, .2);
}

.mobile-price-summary-sheet .offcanvas-header {
  position: relative;
  flex: 0 0 auto;
  padding: 1.65rem 1.25rem 1rem;
  border-bottom: 1px solid #e3e7ee;
  touch-action: pan-x;
}

.mobile-sheet-drag-handle {
  position: absolute;
  top: .55rem;
  left: 50%;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #d0d5dd;
  transform: translateX(-50%);
}

.mobile-price-summary-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.25rem;
}

.mobile-price-summary-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 42%);
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem calc(.875rem + env(safe-area-inset-bottom));
  border-top: 1px solid #e3e7ee;
  background: #fff;
  box-shadow: 0 -8px 24px rgba(21, 29, 54, .09);
}

.mobile-price-summary-footer > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mobile-price-summary-footer > div span {
  color: #667085;
  font-size: .72rem;
  font-weight: 700;
}

.mobile-price-summary-footer > div small {
  font-size: .62rem;
  font-weight: 500;
}

.mobile-price-summary-footer > div strong {
  color: #111c38;
  font-size: 1.18rem;
  white-space: nowrap;
}

.mobile-price-summary-footer .btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: .75rem;
  font-weight: 800;
}

.mobile-price-summary-sheet.is-touch-dragging {
  transition: none !important;
}

@media (min-width: 992px) {
  .desktop-journey-summary-slot {
    display: block;
  }
}

@media (max-width: 991.98px) {
  .checkout-layout {
    align-items: start !important;
  }

  .checkout-mobile-journey-slot {
    margin-bottom: 0;
  }

  .checkout-mobile-journey-slot .journey-summary-cards {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .checkout-mobile-journey-slot .journey-summary-card {
    display: block;
    border-radius: 1rem;
  }

  .checkout-page {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-payment-footer {
    z-index: 1030;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 42%);
    gap: .75rem;
    padding: .875rem 1rem calc(.875rem + env(safe-area-inset-bottom));
  }

  .mobile-payment-footer .btn {
    min-height: 52px;
  }
}

@media (max-width: 575.98px) {
  .mobile-price-summary-footer,
  .mobile-payment-footer {
    grid-template-columns: minmax(0, 1fr) minmax(138px, 46%);
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .mobile-price-summary-body {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.bus-search-form .search-field.has-search-error {
  position: relative;
  z-index: 1;
  background: #fff7f7;
  box-shadow: inset 0 0 0 2px rgba(220, 53, 69, .35);
}

.bus-search-form [aria-invalid="true"]:focus-visible {
  outline: 3px solid rgba(220, 53, 69, .22);
  outline-offset: 3px;
}

.bus-search-validation-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: .7rem 1rem;
  color: #b42318;
  background: #fff1f0;
  border-top: 1px solid #fecdca;
  font-size: .78rem;
  font-weight: 700;
}

.search-submit[aria-busy="true"] {
  cursor: wait;
}

.buyer-login-area {
  padding-top: .25rem;
}

.buyer-login-prompt {
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid #e1e5ec;
  border-radius: .875rem;
  background: #fbfcfe;
}

.buyer-login-toggle {
  min-height: 44px;
  border-radius: .75rem;
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 800;
}

/* 稿件只对这组交互态给了规则,取 var(--brand);静态态稿件没有规则。
   两处都走 token,否则静态 #583f99 与交互态 #472f92 是两种紫,悬停时颜色会跳。 */
.buyer-login-toggle:hover,
.buyer-login-toggle:focus-visible,
.buyer-login-toggle[aria-expanded="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.buyer-login-card {
  overflow: hidden;
  border: 1px solid #e1e5ec;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21, 29, 54, .05);
}

.buyer-login-card .card-body {
  padding: 1.25rem;
}

.buyer-login-card-heading {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
}

.buyer-login-card-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background: #f1edfa;
  color: #583f99;
  font-size: 1.15rem;
}

.login-info-alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1rem;
  border: 1px solid #d9e6f3;
  border-radius: .625rem;
  background: #eef7fc;
  color: #315c75;
  font-size: .875rem;
  line-height: 1.55;
}

.buyer-login-card .form-control,
.buyer-login-card .input-group .btn {
  min-height: 44px;
}

.buyer-login-actions .btn {
  min-width: 132px;
}

.buyer-login-help-links a {
  color: #583f99;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-panel-feedback {
  min-height: 0;
  color: #667085;
  font-size: .8125rem;
  font-weight: 600;
}

.login-panel-feedback.is-error {
  color: #b42318;
}

.login-panel-feedback.is-success {
  color: #207a43;
}

.login-panel-feedback.is-demo {
  padding: .75rem .875rem;
  border: 1px solid #eadf9b;
  border-radius: .625rem;
  background: #fffbea;
  color: #5f4d00;
}

.social-login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #7b8499;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.social-login-divider::before,
.social-login-divider::after {
  flex: 1;
  height: 1px;
  background: #dfe3ea;
  content: "";
}

.social-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 48px;
  border: 1px solid #d8dce6;
  border-radius: .75rem;
  background: #fff;
  color: #101828;
  font-weight: 700;
}

.social-login-btn:hover,
.social-login-btn:focus-visible {
  border-color: #583f99;
  background: #f7f4fc;
  color: #583f99;
}

.social-login-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.buyer-login-card :focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .buyer-login-prompt {
    align-items: stretch !important;
  }

  .buyer-login-toggle,
  .buyer-login-actions .btn {
    width: 100%;
  }

  .buyer-login-card .card-body {
    padding: 1rem;
  }

}

.buyer-information-card {
  overflow: visible;
}

.buyer-information-card .card-body {
  position: relative;
  z-index: 2;
}

/* EBW Ticket Collector 同款的按程乘客拆分:行标签 4 / 控件 8,控件内 2-4-6。 */
.checkout-pax-split .checkout-pax-row + .checkout-pax-row,
.checkout-pax-split [data-pax-leg] + [data-pax-leg] {
  margin-top: .5rem;
}

.checkout-pax-split [data-pax-update-note] {
  margin-top: .75rem;
}

.checkout-pax-help {
  color: #472f92;
  line-height: 1;
}

/* 拆分改动触发的重报价只锁这一块,买家其余字段照常可填。 */
.checkout-pax-split[aria-busy="true"] {
  opacity: .55;
  pointer-events: none;
}

.contact-number-field {
  position: relative;
  flex-wrap: nowrap;
  min-height: 48px;
  border: 1px solid #d8dee8;
  border-radius: .625rem;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.contact-number-field:focus-within {
  border-color: #583f99;
  box-shadow: 0 0 0 3px rgba(88, 63, 153, .14);
}

.contact-number-field.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .1);
}

.contact-number-field .contact-country-dropdown {
  position: static;
  flex: 0 0 auto;
}

.contact-number-field .country-code-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 112px;
  min-height: 46px;
  padding: .625rem .75rem;
  border: 0;
  border-right: 1px solid #d8dee8;
  border-radius: .575rem 0 0 .575rem;
  background: #f8fafc;
  color: #344054;
  font-weight: 700;
  box-shadow: none;
}

.contact-number-field .country-code-trigger:hover,
.contact-number-field .country-code-trigger:focus-visible,
.contact-number-field .country-code-trigger[aria-expanded="true"] {
  background: #f3f0fa;
  color: #583f99;
}

.contact-number-field .country-code-trigger:focus-visible {
  outline: 3px solid rgba(88, 63, 153, .7);
  outline-offset: -3px;
}

.contact-number-field .country-code-trigger::after {
  margin-left: auto;
}

.contact-number-field > .form-control {
  min-width: 0;
  min-height: 46px;
  border: 0 !important;
  border-radius: 0 .575rem .575rem 0 !important;
  background: transparent;
  box-shadow: none !important;
}

.contact-country-flag {
  display: block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .14);
}

.country-code-menu {
  z-index: 1085;
  width: min(430px, calc(100vw - 2rem));
  max-width: none;
  padding: .65rem;
  border: 1px solid #dfe4ec;
  border-radius: .875rem;
  background: #fff;
  box-shadow: 0 18px 48px rgba(21, 29, 54, .18);
}

.country-code-search-wrap {
  position: relative;
  padding: .15rem .15rem .65rem;
}

.country-code-search-wrap > i {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 2;
  color: #667085;
  transform: translateY(calc(-50% - .25rem));
}

.checkout-card .country-code-search {
  min-height: 44px;
  padding-left: 2.4rem;
  border-radius: .625rem !important;
}

.country-code-options {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.contact-country-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-height: 48px;
  padding: .65rem .75rem;
  border-radius: .625rem;
  color: #344054;
  white-space: normal;
}

.contact-country-option:hover,
.contact-country-option:focus-visible {
  background: #f7f4fc;
  color: #583f99;
}

.contact-country-option.active,
.contact-country-option[aria-selected="true"] {
  background: #f1f1f4;
  color: #101828;
  font-weight: 700;
}

.country-option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.25;
}

.country-option-copy small {
  margin-top: .15rem;
  color: #7b8499;
  font-size: .7rem;
}

.country-dial-code {
  color: #667085;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.country-code-empty {
  padding: 1rem .75rem;
  color: #667085;
  font-size: .8rem;
  text-align: center;
}

.contact-number-feedback {
  margin-top: .4rem;
}

.contact-number-field.is-invalid + .contact-number-feedback {
  display: block;
}

.contact-number-complete {
  display: block;
  margin-top: .4rem;
  color: #667085;
  font-size: .72rem;
}

@media (max-width: 575.98px) {
  .contact-number-field .country-code-trigger {
    min-width: 104px;
    padding-right: .625rem;
    padding-left: .625rem;
  }

  .country-code-menu {
    width: min(390px, calc(100vw - 2rem));
  }
}

.passenger-demo-note {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .9rem;
  border: 1px solid #e1ddf1;
  border-radius: .75rem;
  color: #51466f;
  background: #f8f6fc;
  font-size: .76rem;
  line-height: 1.5;
}
.passenger-demo-note i {
  flex: 0 0 auto;
  margin-top: .05rem;
  color: #583f99;
  font-size: 1rem;
}
.passenger-form[data-passenger-demo] {
  border-color: #dfe4ec;
  background: #fff;
}
.passenger-form[data-passenger-demo] .passenger-form-header {
  background: #fafbfc;
}
.passenger-form[data-passenger-demo] .form-control,
.passenger-form[data-passenger-demo] .form-select {
  min-height: var(--checkout-field-height, 48px);
  border-color: #d8dee8;
  border-radius: .65rem;
  background-color: #fff;
  box-shadow: none;
}
.passenger-form[data-passenger-demo] .form-control:focus,
.passenger-form[data-passenger-demo] .form-select:focus {
  border-color: #583f99;
  box-shadow: 0 0 0 .2rem rgba(88, 63, 153, .14);
}
.passenger-demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .3rem .6rem;
  border: 1px solid #e5ddf6;
  border-radius: 999px;
  color: #583f99;
  background: #f6f2fc;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 575.98px) {
  .passenger-form[data-passenger-demo] .passenger-form-header {
    align-items: flex-start;
  }
  .passenger-demo-badge {
    margin-top: .1rem;
  }
}

.payment-method-demo-card,
.payment-method-groups-card {
  overflow: visible;
}

.success-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: #dff8ea;
    color: #087a4b;
    font-size: .75rem;
    font-weight: 800;
}

.warning-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: rgba(255, 193, 7, 0.13);
    color: #d28001;
    font-size: .75rem;
    font-weight: 800;
}

.payment-method-demo-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.payment-method-accordion {
  display: grid;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 1rem;
  --bs-accordion-inner-border-radius: 1rem;
}

.payment-method-group {
  overflow: hidden;
  border: 1px solid #e1e5ec !important;
  border-radius: 1rem !important;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21, 29, 54, .05);
}

.payment-method-group .payment-group-toggle,
.payment-method-group .payment-group-toggle:not(.collapsed) {
  min-height: 60px;
  padding: 1rem 1.1rem;
  background: #faf9fd;
  color: #344054;
  box-shadow: none;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-method-group .payment-group-toggle:hover {
  background: #faf9fd;
  color: #583f99;
}

.payment-method-group .payment-group-toggle:focus-visible {
  position: relative;
  z-index: 2;
  box-shadow: inset 0 0 0 2px #583f99;
}

.payment-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: .65rem;
  color: #667085;
  font-size: 1rem;
}

.payment-method-group .accordion-body {
  padding: 0 1.1rem .4rem;
}

.payment-method-list {
  display: grid;
}

.payment-method-item,
.payment-method-option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 28px;
  align-items: center;
  gap: .9rem;
  min-height: 78px;
  padding: .85rem 0;
  border-top: 1px solid #e7ebf2;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.payment-method-item:first-child,
.payment-method-option:first-child {
  border-top: 0;
}

.payment-method-item:hover,
.payment-method-option:hover {
  background: #faf9fd;
}

.payment-method-item:focus-within,
.payment-method-option:focus-within {
  position: relative;
  z-index: 1;
  border-radius: .75rem;
  outline: 2px solid #583f99;
  outline-offset: -2px;
  padding:.85rem .85rem;
}

.payment-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 45px;
  overflow: hidden;
  border: 1px solid #dce2ea;
  border-radius: .65rem;
  background: #fff;
}

.payment-logo-wrap img {
  width: 50px;
  height: 45px;
  object-fit: contain;
}

.payment-method-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .25rem;
  color: #344054;
}

.payment-method-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

.payment-card-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.payment-method-copy img {
    width: 28px;
}

.payment-method-copy small {
  color: #8a96ad;
  font-size: .72rem;
  line-height: 1.45;
}

.payment-preferred-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: #dff8ea;
  color: #087a4b;
  font-size: .62rem;
  font-weight: 800;
}

/* 服务端组装的条目 HTML(EBW 骨架):外层 label.payment-method-option 承担边框/悬停/单选框列,
   内层 .payment-method-item 只做「图标 + 内容」两列,取值沿用上面的 logo-wrap / copy / title / card-icons。 */
.payment-method-option {
  grid-template-columns: minmax(0, 1fr) 28px;
}

.payment-method-option > .payment-method-item,
.form-check-label > .payment-method-item,
[data-reschedule-locked-route] > .payment-method-item {
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  border: 0;
  cursor: inherit;
}

.payment-method-option > .payment-method-item:hover {
  background: transparent;
}

.payment-method-item > .payment-content:first-child {
  grid-column: 1 / -1;
}

.payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 45px;
  overflow: hidden;
  border: 1px solid #dce2ea;
  border-radius: .65rem;
  background: #fff;
}

.payment-icon img {
  width: 50px;
  height: 45px;
  object-fit: contain;
}

.payment-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: .25rem;
  color: #344054;
}

.payment-title {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}

.payment-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-logo img {
  width: 28px;
}

.payment-description {
  color: #8a96ad;
  font-size: .72rem;
  line-height: 1.45;
}

.payment-description strong {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: #dff8ea;
  color: #087a4b;
  font-size: .62rem;
  font-weight: 800;
}

.payment-fee-note {
  color: #2774e6;
  font-weight: 700;
}

.payment-method-radio {
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #c8d2e1;
  box-shadow: none;
  cursor: pointer;
}

.payment-method-radio:checked {
  border-color: #583f99;
  background-color: #583f99;
}

.payment-method-radio:focus-visible {
  box-shadow: 0 0 0 .22rem rgba(88, 63, 153, .18);
}

/* 运行时付不出去的条目降级显示(D18):数据库选了但点不中,靠灰阶 + not-allowed 光标区分于真正可选的行。 */
.payment-method-item.is-disabled,
.payment-method-option.is-disabled {
  cursor: not-allowed;
  opacity: .5;
}

.payment-method-item.is-disabled:hover,
.payment-method-option.is-disabled:hover {
  background: transparent;
}

.payment-method-item.is-disabled .payment-method-radio,
.payment-method-option.is-disabled .payment-method-radio {
  cursor: not-allowed;
}

@media (max-width: 575.98px) {
  .payment-method-demo-card .card-body,
  .payment-method-groups-card .card-body {
    padding-inline: 1rem;
  }

  .payment-method-group .payment-group-toggle,
  .payment-method-group .payment-group-toggle:not(.collapsed) {
    min-height: 56px;
    padding: .9rem;
    font-size: .72rem;
  }

  .payment-method-group .accordion-body {
    padding-inline: .9rem;
  }

  .payment-method-item {
    grid-template-columns: 50px minmax(0, 1fr) 26px;
    gap: .75rem;
    min-height: 72px;
  }

  .payment-logo-wrap {
    width: 48px;
    height: 44px;
  }

  .payment-logo-wrap img {
    width: 38px;
    height: 30px;
  }

  .payment-method-title {
    font-size: .84rem;
  }
}

.checkout-payment-action-card {
  border-color: #e1e5ec;
  background: #fff;
}

.checkout-payment-action-card .card-body {
  padding: 1.5rem;
}

.checkout-payment-action-card .checkout-pay-button,
.mobile-fixed-pay-button {
  min-height: 56px;
  border-radius: 12px;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 800;
}

.checkout-payment-action-card .checkout-pay-button:hover,
.checkout-payment-action-card .checkout-pay-button:focus-visible,
.mobile-fixed-pay-button:hover,
.mobile-fixed-pay-button:focus-visible {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.checkout-payment-action-card .payment-action-help {
  max-width: 620px;
  margin-inline: auto;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}

.mobile-price-summary-total-only {
  display: block;
}

.mobile-price-summary-total-only > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 991.98px) {
  .checkout-page {
    padding-bottom: calc(142px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-payment-footer {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 42%);
    grid-template-areas:
      "total action"
      "reminder reminder";
    gap: .55rem .75rem;
    padding: .75rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  }

  .mobile-payment-footer .mobile-total-trigger {
    grid-area: total;
    min-width: 0;
  }

  .mobile-payment-footer .mobile-fixed-pay-button {
    grid-area: action;
    min-height: 52px;
    width: 100%;
  }

  .mobile-payment-reminder {
    grid-area: reminder;
    color: var(--muted);
    font-size: .64rem;
    line-height: 1.35;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .mobile-payment-footer {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 44%);
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .mobile-payment-reminder {
    font-size: .6rem;
  }
}

@media (max-width: 991.98px) {
  .checkout-page {
    padding-bottom: calc(178px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-payment-footer {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 42%);
    grid-template-areas:
      "agreement agreement"
      "total action";
    gap: .65rem .75rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  }

  .mobile-ticketing-policy-agreement {
    grid-area: agreement;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-height: 44px;
    margin: 0;
    padding: .55rem .75rem;
    border: 1px solid #e1e5ec;
    border-radius: .75rem;
    background: #f8f7fc;
    color: var(--ink-2);
  }

  .mobile-ticketing-policy-agreement .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: .08rem 0 0;
    cursor: pointer;
  }

  .mobile-ticketing-policy-agreement .mobile-ticketing-policy-copy {
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: default;
  }

  .mobile-ticketing-policy-agreement .mobile-ticketing-policy-copy a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .mobile-ticketing-policy-agreement .mobile-ticketing-policy-copy a:hover,
  .mobile-ticketing-policy-agreement .mobile-ticketing-policy-copy a:focus-visible {
    color: var(--brand-hover);
  }

  .mobile-payment-footer .mobile-total-trigger {
    grid-area: total;
  }

  .mobile-payment-footer .mobile-fixed-pay-button {
    grid-area: action;
  }

  .mobile-payment-reminder {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .checkout-page {
    padding-bottom: calc(188px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-payment-footer {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 44%);
  }
}

@media (max-width: 991.98px) {
  .mobile-price-summary-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 42%);
    align-items: center;
    gap: .75rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e3e7ee;
    box-shadow: 0 -8px 24px rgba(21, 29, 54, .08);
  }

  .mobile-price-summary-total-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
  }

  .mobile-price-summary-total-row > span {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.25;
  }

  .mobile-price-summary-total-row > span small {
    font-size: .66rem;
  }

  .mobile-price-summary-total-row > strong {
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.3;
    white-space: nowrap;
  }

  .mobile-price-summary-pay-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 800;
  }

  .mobile-price-summary-pay-button:hover,
  .mobile-price-summary-pay-button:focus-visible {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
  }
}

@media (max-width: 399.98px) {
  .mobile-price-summary-footer {
    grid-template-columns: 1fr;
  }
}

:root {
  --auth-soft: #f5f3fb;
  --auth-purple-dark: #2f1a70;
  --auth-purple: #45269c;
  --auth-purple-light: #6f4fd1;
}

.login-password-toggle,
.register-password-toggle,
[data-toggle-login-password] {
  min-width: 104px;
  font-weight: 700;
}

.card-section-heading {
  display: flex;
  align-items: center;
}

.card-section-heading p {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
}

.card-section-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--brand);
  background: #f1edfa;
  font-size: 1.15rem;
}

.auth-form .form-label,
.profile-form .form-label {
  margin-bottom: .45rem;
  color: var(--form-label);
  font-size: .9rem;
  font-weight: 700;
}

.auth-form .form-check {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: .65rem;
  padding-left: 0;
}

.auth-form .form-check-input {
  flex: 0 0 20px;
  float: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #98a2b3;
}

.auth-form .form-check-label {
  display: flex;
  min-height: 44px;
  align-items: center;
  cursor: pointer;
}

/* 会员中心外壳内(稿件 manage.html)的提示条配色与圆角、表格与字段基底。稿件把这三组写在全局 .alert/.table/.form-control 上,
   按 §2.0 第一条收窄到 .account-shell。字段基底刻意不写 background:它与 Bootstrap 的 :disabled 同为 (0,2,0),
   写了会把钱包/卡片预览面板 fieldset[disabled] 里的灰底压成白色。排在 .profile-form 基底之前,资料表单仍按自己那一份。 */
/* 稿件 .alert 的 flex 排布不搬:稿件里带图标的提示条都在标记上写了 d-flex,而我方不可用态、校验摘要一类
   提示条的子元素是块级段落与列表,整体改成 flex 行会把它们左右并排。 */
.account-shell .alert { border-radius: 16px; }

.account-shell .alert-primary {
  color: var(--ink-2);
  background-color: #faf9ff;
  border-color: #e6e1ff;
}

.account-shell .alert-primary i { color: var(--brand); }

.account-shell .alert-warning {
  color: #8b6800;
  background-color: #fffcef;
  border-color: #f2df8c;
}

.account-shell .table {
  color: var(--ink-2);
  font-size: .9rem;
}

.account-shell th { color: var(--ink); }

/* 钱包表头说明触发器是按钮(可访问性偏离,见视图注释),稿件是行内 span:去掉 .btn 的 44px 最小高与 padding 行高,
   否则表头行被撑到 48px。 */
.account-shell .wallet-hint {
  min-height: 0;
  line-height: 1;
  vertical-align: baseline;
  border: 0;
}

.account-shell .table-secondary {
  --bs-table-bg: #f6f8fb;
  --bs-table-color: var(--ink);
  color: var(--ink);
}

.account-shell .table > :not(:last-child) > :last-child > * { border-bottom-color: var(--muted); }

.account-shell .form-control,
.account-shell .form-select,
.account-shell .input-group-text {
  min-height: var(--checkout-field-height);
  border-color: #d8dee8;
  border-radius: 10px;
  color: #101828;
  font-size: .88rem;
  box-shadow: none;
}

/* 焦点态一起搬:上一条与 Bootstrap 的 .form-control:focus 同为 (0,2,0) 且排在后面,box-shadow:none 会连焦点环一起压掉。 */
.account-shell .form-control:focus,
.account-shell .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(88, 63, 153, .14);
}

.account-shell .form-label {
  margin-bottom: .45rem;
  color: var(--form-label);
  font-size: .9rem;
  font-weight: 700;
}

.account-shell .input-group .input-group-text,
.account-shell .input-group > .btn:first-child { border-radius: 10px 0 0 10px; }
.account-shell .input-group .form-control,
.account-shell .input-group .form-select { border-radius: 0 10px 10px 0; }

/* .profile-form .input-group-text 是资料页手机号那个 +60 前缀。稿件把 .input-group-text 与
   .form-control/.form-select 写在同一条全局基底里(见本文件 .checkout-card 那一段的同款收窄),
   而本作用域此前只列了后两者,前缀因此整格落回 Bootstrap 出厂值:左侧圆角 6px、底色 #f8f9fa、
   边框 #dee2e6、字号 16px,与紧贴的输入框四项都不同——
   四项都出现在同一行里,区号比它后面的号码更大更灰。取值不另定,直接并入本作用域既有的那一份。 */
.auth-form .form-control,
.auth-form .form-select,
.profile-form .form-control,
.profile-form .form-select,
.profile-form .input-group-text,
.auth-input-button {
  min-height: 50px;
  border-color: #d8dee8;
  border-radius: 10px;
  color: #101828;
  background: #fff;
  font-size: .88rem;
  box-shadow: none;
}

.auth-form .form-control:focus,
.auth-form .form-select:focus,
.profile-form .form-control:focus,
.profile-form .form-select:focus {
  border-color: var(--auth-purple-light);
  box-shadow: 0 0 0 3px rgba(69, 38, 156, .12);
}

/* 收窄基底的另一半连带代价(上面那条焦点规则是第一半)。.profile-form .form-control 与 Bootstrap 的
   .form-control:disabled 同为 (0,2,0),而本文件排在后面,于是它的 background: #fff 压掉那条灰底——
   禁用字段(资料模态里的 Email 与 Nationality 两个只读输入,以及只读降级态下整个 fieldset)看起来仍可编辑。
   稿件不会有这个问题:它的基底写在全局 (0,1,0)、低于 :disabled。取值照 Bootstrap 的 --bs-secondary-bg,
   渲染结果因此与稿件一致。 */
.profile-form .form-control:disabled,
.profile-form .form-select:disabled {
  background: #e9ecef;
  opacity: 1;
}

/* 占位符取稿件全局 .form-control::placeholder 的值。不声明它会落到 Bootstrap 的
   rgba(33, 37, 41, .75),那个灰几乎与真实输入同深,读者分不出字段里是提示还是自己填的内容。 */
.auth-form .form-control::placeholder {
  color: #98a2b3;
  opacity: 1;
}

/* 整页回帖的服务端字段错误。.auth-form .form-control 的边框色是 (0,2,0) 且排在 Bootstrap 之后,
   .is-invalid 与 .input-validation-error 都压不过它,因此在本作用域里再声明一次。红色与
   .contact-number-field.is-invalid 同值,手机号那一组与其余字段看起来是同一种错误。 */
.auth-form .form-control.input-validation-error,
.auth-form .form-select.input-validation-error,
.auth-form .form-check-input.input-validation-error,
.profile-form .form-control.input-validation-error,
.profile-form .form-select.input-validation-error {
  border-color: #dc3545;
}

.auth-form .auth-field-error.field-validation-error,
.profile-form .auth-field-error.field-validation-error {
  display: block;
  margin-top: .4rem;
  color: #dc3545;
  font-size: .8rem;
}

/* 输入组的外侧圆角。稿件把这一对写在全局(它同时管 checkout 与搜索面),按 ui-inventory §2.0
   第一条收窄到本作用域;选择器与 Bootstrap 把内侧两角归零的那两条同形,只改另一侧的两个角。
   取值等于本作用域的字段圆角 10px,按钮与它紧贴的输入框同一弧度。缺这两条的后果实测有两处:web.css 的
   .btn { border-radius: 50px } 会让密码显示按钮以胶囊右边缘贴在输入框上;而注册页的手机号输入
   是输入组的第二个元素,Bootstrap 归零左侧两角后四个角一起变直角。 */
.auth-form .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.auth-form .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.auth-input-button {
  min-width: 50px;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  color: #667085;
}

.auth-input-button:hover,
.auth-input-button:focus-visible {
  color: var(--auth-purple);
  background: #f7f5fc;
}

.auth-form .form-text,
.profile-form .form-text {
  color: #7c8495;
  font-size: .7rem;
}

.auth-switch-copy {
  margin: 0;
  color: #667085;
  font-size: .8rem;
  text-align: center;
}

.auth-switch-copy a { font-weight: 800; }

.auth-alert {
  margin-bottom: 1.25rem;
  border: 0;
  border-radius: 12px;
  font-size: .78rem;
  line-height: 1.55;
}

.auth-alert i { margin-right: .45rem; }

.auth-password-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.auth-password-meter span {
  height: 4px;
  border-radius: 6px;
  background: #e9e6ef;
}

.auth-password-meter[data-strength="1"] span:nth-child(-n+1) { background: #dc3545; }
.auth-password-meter[data-strength="2"] span:nth-child(-n+2) { background: #f59e0b; }
.auth-password-meter[data-strength="3"] span:nth-child(-n+3) { background: #18a56f; }
.auth-password-meter[data-strength="4"] span:nth-child(-n+4) { background: #18a56f; }

.auth-legal {
  color: #667085;
  font-size: .72rem;
  line-height: 1.55;
}

.auth-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 20px;
  color: #11885b;
  background: #e7f7ef;
  font-size: 1.65rem;
}

/* 侧栏。稿件把这些值写在全局 .nav-pills 上,落地收窄到 .account-nav 之内——
   前台其它页面也用 nav-pills,放开写会连带改掉它们。 */
.account-nav .nav-link {
  margin: 4px 0;
  padding: 12px 20px;
  border-radius: 10px;
  color: #6c757d;
  transition: all .3s ease;
}

.account-nav .nav-link:hover,
.account-nav .nav-link:focus-visible {
  color: var(--brand);
  background-color: #faf9ff;
}

.account-nav .nav-link.active {
  color: var(--brand);
  background-color: #faf9ff;
  border: 1px solid #e6e1ff;
}

/* 侧栏分组(稿件 style.css 的「Manage - Side Menu」段)。稿件把 .account-menu-parent 与 .account-submenu
   写成全局,落地同上面几条一样收窄到 .account-nav 之内——前台其它页面也用 nav-pills。
   chevron 只靠父按钮的 aria-expanded 转向:那个属性由 Bootstrap 的声明式 collapse 自己维护,
   所以展开态零脚本、服务端首屏渲染的 aria-expanded="true" 也已经是转好的方向。 */
.account-nav .account-menu-parent .account-menu-chevron {
  transition: transform .2s ease;
}

.account-nav .account-menu-parent[aria-expanded="true"] .account-menu-chevron {
  transform: rotate(180deg);
}

.account-nav .account-submenu .nav-link {
  padding-left: 1rem;
  font-size: .925rem;
}

.account-nav .account-submenu .nav-link::before {
  content: "";
  width: .35rem;
  height: .35rem;
  margin-right: .65rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  flex: 0 0 auto;
}

.account-nav .account-submenu .nav-link.active::before {
  opacity: 1;
}

/* 破坏性动作项(ADR-0062 的 danger 变体)。带图标,所以不要子项那个圆点。
   三条状态选择器必须比 .account-nav .nav-link:hover / :focus-visible(0,3,0)同权或更高,
   否则 hover 与键盘焦点时颜色会落回品牌紫——收窄基底时漏搬伴随状态是本批已踩过一次的坑。
   稿件写的是 :focus;我方全站用 :focus-visible(见上面 .account-nav .nav-link 那组),此处随我方。 */
.account-nav .account-submenu .account-menu-danger::before {
  display: none;
}

.account-nav .account-menu-danger {
  padding-left: .75rem;
  border: 0;
  border-radius: .5rem;
  color: var(--bs-danger);
}

.account-nav .account-menu-danger:hover,
.account-nav .account-menu-danger:focus-visible,
.account-nav .account-menu-danger.active {
  color: #b02a37;
  background-color: rgba(220, 53, 69, .08);
}

/* 区块标题右侧的动作按钮。窄屏改为整行按钮,否则标题与按钮会挤在一行里各自换行。
   稿件把这个类贴在包住按钮的 div 上,我方直接贴在按钮本身。两种写法都要撑满窄屏,
   所以窄屏那段同时给自身和后代 .btn 设 width,照抄稿件的 wrapper 结构也不会静默失效。 */
.section-heading-action {
  margin-left: auto;
}

.profile-card {
  overflow: hidden;
  border: 1px solid #e1ddeb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(45, 32, 84, .07);
}

/* display: block 是在挡全局那条 .card-header(flex + justify-content: space-between,与稿件逐字相同,
   稿件自己只往里放「一个标题 + 一个动作按钮」)。会员中心这批卡头放的是「标题 + 说明」两个块级子元素,
   落到那条 flex 行里就变成标题与说明左右并排;下面 h3 的 margin-bottom: .35rem 只有在竖排时才有意义,
   它在 flex 行里是死值——本卡按它判定竖排才是这批卡头本来的形态。1440 下并排勉强读得通,390 实测
   (ms-MY「Laporan」+ 四行说明)标题被竖直居中在说明左侧,读起来像贴在段落中间的一个标签。 */
.profile-content-card .card-header {
  display: block;
  padding: 24px 28px;
  border-bottom-color: #ebe7f1;
  background: #fff;
}

.profile-content-card .card-header h3 {
  margin: 0 0 .35rem;
  font-size: 1.12rem;
  font-weight: 800;
}

.profile-content-card .card-header p {
  margin: 0;
  color: #667085;
  font-size: .77rem;
}

.profile-content-card .card-body { padding: 28px; }

.profile-security-note {
  display: flex;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid #eadfbc;
  border-radius: 12px;
  color: #70591f;
  background: #fffaf0;
  font-size: .74rem;
  line-height: 1.55;
}

.profile-security-note i { color: #c69412; font-size: 1rem; }

/* 会员中心用 <code> 打印订单参考号、投诉短码这类标识(等宽有助于逐字核对,这一点保留),但 code 的颜色
   谁都没声明过,于是取 Bootstrap 的 --bs-code-color #d63384——全站唯一一处品红,读者会把它当成链接。
   稿件根本不用 code,它把同类标识写成 text-dark fw-bold 的普通文字。这里只改颜色、不动等宽:
   收窄到 .account-shell,因为其余页面族的 code(若有)由各自的卡按稿定。 */
.account-shell code { color: var(--ink); }

/* SH01 ①:订单卡不在 .page-hero 内,fixed-top 页头只靠 .page-hero 的 padding-top 让位;移动端自由滚动
   停在任意位置都可能让某张卡的顶部一行恰好停在页头下沿,被页头盖住一部分(不摘 fixed-top,补让位)。
   scroll-snap 让滚动停止时贴齐到卡片顶部而不是停在半张卡的位置:卡顶 scroll-margin-top 留出页头净高,
   容器 scroll-snap-type 用 proximity(不用 mandatory)——自由滚动仍然顺畅,只在松手位置接近某张卡边界时
   才吸附过去,不强迫每次滚动都定格。--desktop-header-height 由 site-shell.js 在页头未叠加 .scrolled 时写入,
   所以滚动后读到的是冻结在未滚动时的高度——而 .scrolled 只改配色不改高度,
   所以拿它做让位量只会富余、不会不足。落点保证只在 proximity 命中时成立
   (松手位置靠近卡边界);自由滚动停在任意位置时的遮挡是 fixed 定位的固有行为,
   CSS 里没有任何东西能阻止它。
   */
@media (max-width: 767.98px) {
  .account-shell .account-booking-card {
    scroll-snap-align: start;
    scroll-margin-top: calc(var(--desktop-header-height, 84px) + 8px);
  }

  /* scroll-snap-type 只对**滚动容器**生效。.d-grid 是 display:grid、没有 overflow,不是滚动容器,
     打在它上面整段声明全是死的(卡级审查在 Chrome 里读 window.scrollY 实测:请求 640/655/700/900
     原样得到 640/655/700/900,零吸附)。卡片的最近滚动容器是视口,所以要打在 html 上;
     用 :has() 收窄,作用面仍只有渲染订单卡的那一页。 */
  html:has(.account-shell .account-booking-card) {
    scroll-snap-type: y proximity;
  }
}

/* MC09:/account/bookings 的卡片网格,移植自 manage.html 的 .booking-status / .booking-empty-state /
   .empty-state-illustration(取 --trustliner-purple → var(--brand)、--trustliner-yellow-soft → var(--yellow-soft)、
   --trustliner-text → var(--muted) 三处 token 对应关系)。全部收窄到 .account-shell:
   卡容器复用既有 .card;标记上另挂一个 .account-booking-card 供上方 FD01 移动端滚动吸附规则选中,
   本表(MC09 这一段)自身不为它定义样式,只作断言抓手。
   前缀刻意不叫 .booking-card——那个类名已被 checkout 的 sticky 价格卡占用(:518,position: sticky),
   复用会让订单卡跟着吸顶。 */

/* 05 卡:四色状态药丸,移植自 manage.html 的 .booking-status / .status-dot(取值为稿件字面色值,
   稿件本身未用 token,原样保留)。取代原先按枚举名恒定同色的 .account-booking-status——
   Status 现在是本方推导出的四档枚举(CustomerBookingStatus),不再是 EBW 原样透传的文本,
   能够真按状态分色,与筛选 tab 用的同一套词汇对齐。 */
.account-shell .booking-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 750;
}

.account-shell .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.account-shell .booking-status-success {
  color: #08775c;
  background: #e6f8f2;
}

.account-shell .booking-status-active {
  color: #2f64bf;
  background: #eaf2ff;
}

.account-shell .booking-status-pending {
  color: #d28001;
  background: rgba(255, 193, 7, .13);
}

.account-shell .booking-status-cancelled {
  color: #b43b4b;
  background: #fff0f2;
}

/* 05 卡:订单卡的动作行,移植自 manage.html 的 .booking-card-actions。 */
.account-shell .booking-card-actions {
  display: flex;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--line);
}

.account-shell .booking-card-actions .btn {
  flex: 1;
}

/* 05 卡:移动端筛选抽屉,移植自 manage.html 的 .booking-filter-sheet / .offcanvas-footer。 */
.account-shell .booking-filter-sheet {
  height: auto !important;
  max-height: 88vh;
  border-radius: 24px 24px 0 0;
}

.account-shell .offcanvas-footer {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--line);
}

/* 筛选区页签与移动端筛选按钮,移植自 manage.html 的 .booking-status-tabs / .booking-status-tab /
   .horizontal-scroller / .booking-filter-icon-btn。稿件里 .horizontal-scroller 声明在后,其 padding 覆盖页签组的
   padding-bottom,这里合并成同一结果。页签不折行、横向滚动承接长文案(与稿件同一选择)。
   05 卡:tab 改成真实链接(<a>)后不再有 :disabled 状态,原先那条禁用态样式随之退场。 */
.account-shell .booking-status-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.account-shell .booking-status-tabs::-webkit-scrollbar {
  display: none;
}

.account-shell .booking-status-tab {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: #fff;
  font-weight: 650;
  white-space: nowrap;
  transition: all .2s ease;
}

.account-shell .booking-status-tab:hover {
  color: var(--brand);
  border-color: rgba(88, 63, 153, .4);
}

.account-shell .booking-status-tab.active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.account-shell .booking-filter-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--brand);
  background: #fff;
}

.account-shell .account-booking-empty-state {
  padding: 58px 24px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, var(--soft));
  text-align: center;
}

.account-shell .account-booking-empty-illustration {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  border-radius: 28px;
  color: var(--brand);
  background: var(--yellow-soft);
  font-size: 2.3rem;
}

.account-shell .account-booking-empty-illustration span {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: .9rem;
}

.account-shell .account-booking-empty-state h3 { margin-bottom: 8px; }

.account-shell .account-booking-empty-state p {
  max-width: 440px;
  margin: 0 auto 20px;
  color: var(--muted);
}

/* 05 卡:窄屏下压缩状态药丸字号、把动作行的按钮堆叠成整宽单列,移植自稿件 575.98 断点的
   .booking-status / .booking-card-actions 两条(那个断点里其余选择器服务的是另一张票面卡,与本页无关)。 */
@media (max-width: 575.98px) {
  .account-shell .booking-status {
    padding: 6px 9px;
    font-size: .74rem;
  }

  .account-shell .booking-card-actions {
    flex-direction: column;
  }

  .account-shell .booking-card-actions .btn {
    width: 100%;
  }
}

.auth-form :where(button, input, select, a):focus-visible,
.account-shell :where(button, input, select, a):focus-visible {
  outline: 3px solid rgba(69, 38, 156, .25);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .footer-bottom a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  .profile-content-card .card-header,
  .profile-content-card .card-body { padding: 20px; }

  .section-heading-action {
    width: 100%;
    margin-top: 1rem;
    margin-left: 0;
  }

  .section-heading-action .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .account-shell * { scroll-behavior: auto !important; transition: none !important; }
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 69, 38, 156;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-hover);
  --bs-btn-disabled-border-color: var(--brand-hover);
}

/* 稿件给 .btn-outline-primary 写的是 background-color: #fff。Bootstrap 5.3.8 的组件底色
   只认 --bs-btn-bg(出厂 transparent),直接写 background-color 会被 .btn 自己的 var() 声明盖掉,
   所以这里落到 token 上;透明底在浅灰区块(.page-body 的 --soft)上会透出灰色。 */
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 69, 38, 156;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: var(--brand);
}

.btn-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--brand-secondary);
  --bs-btn-border-color: var(--brand-secondary);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--brand-secondary-hover);
  --bs-btn-hover-border-color: var(--brand-secondary-hover);
  --bs-btn-focus-shadow-rgb: 255, 222, 47;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--brand-secondary-hover);
  --bs-btn-active-border-color: var(--brand-secondary-hover);
  --bs-btn-disabled-color: var(--ink);
  --bs-btn-disabled-bg: var(--brand-secondary);
  --bs-btn-disabled-border-color: var(--brand-secondary);
}

.page-body {
  min-height: 100vh;
  background: var(--soft);
}

.page-body .site-header.header-transparent {
  background: var(--brand);
}

.page-body .site-header.header-transparent .header-topbar {
  background: rgba(10, 7, 29, .22);
}


.page-main {
  padding-top: calc(var(--desktop-header-height, 132px) + 36px);
  padding-bottom: 72px;
}

@media (max-width: 991.98px) {
  .page-main { padding-top: calc(var(--desktop-header-height, 84px) + 24px); }
}

/* 全局态页面(500 与 404)。卡片取稿件信息卡的最终值(index/deals 稿的居中状态卡:620px 上限、
   2.5rem 内边距、20px 圆角、虚线描边、58px 品牌软底圆形图标),不另起一套视觉。
   min-height 是这两页独有的一条:正文只有一句话时页脚会停在视口中部、下方留一条 var(--soft) 空白带;
   两个减数与 .page-main 自己的上下内边距同源(桌面 36+72、移动 24+72),所以卡片区正好填满页头下沿到首屏底之间。
   取 dvh 不取 vh:移动端浏览器工具栏收起时 100vh 大于可见高度,会给这两页挤出一条本不需要的滚动。 */
.site-state-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--desktop-header-height, 132px) - 108px);
}

@media (max-width: 991.98px) {
  .site-state-page { min-height: calc(100dvh - var(--desktop-header-height, 84px) - 96px); }
}

.site-state-card {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  border: 1px dashed #ccd2dc;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}

.site-state-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 1.45rem;
}

.site-state-card h1 {
  margin-bottom: .55rem;
  font-size: 1.2rem;
}

.site-state-card p {
  max-width: 470px;
  margin: 0 auto 1.25rem;
  color: var(--muted);
  line-height: 1.65;
}

/* requestId 是给截图定位日志用的辅助行,只压小字号,间距沿用上面那条 p 规则,不与正文抢层级。 */
.site-state-meta {
  font-size: .78rem;
}

@media (max-width: 575.98px) {
  .site-state-card { padding: 2rem 1rem; }
}

/* 一次性提示(TempData flash)。固定定位而不是排进文档流:页头是 fixed-top,而 home 与 hero 两种外壳的
   首屏直接从 .page-hero 起、自己带足了避开页头的上内边距,排进流里的提示会整条落在页头下面被盖住。
   z-index 取 1020:必须低于 Bootstrap 给 .fixed-top 的 1030,否则这条 680px 宽的居中提示会盖住页头的
   语言/国家/账号下拉与移动端 navbar 折叠面板(992–1200px 视口下它几乎占满宽)。
   与 .skip-link 的 2000 也不冲突,键盘用户的跳转链接仍在最上层。 */
.site-flash {
  position: fixed;
  top: calc(var(--desktop-header-height, 132px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1020;
  width: min(680px, calc(100% - 2rem));
}

@media (max-width: 991.98px) {
  .site-flash { top: calc(var(--desktop-header-height, 84px) + 8px); }
}

.input-group > .register-dial-code { flex: 0 0 105px; width: 105px; }

/* 跳转链接。稿件只给了 `z-index: 2000`,而这一条不起作用:Bootstrap 是通过 `:not(:focus)` 给    `.visually-hidden-focusable` 定位的,获得焦点后元素回到 `position: static`——而 z-index 对 static 元素无效。链接随即排进正常流、落在固定头部下方,视力正常的键盘用户什么也看不到(WCAG 2.4.7)。选择器精确对应 Bootstrap    自己的条件——它在 `:not(:focus):not(:focus-within)` 时隐藏,因此显形态就是 `:focus, :focus-within`    ——两边不对称会留下一种「既没隐藏也没定位」的状态。 */
.skip-link:focus,
.skip-link:focus-within {
  position: fixed;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--brand);
  font-size: .82rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.newsletter-form .form-control { min-width: 0; }
.newsletter-form .btn { flex-shrink: 0; white-space: nowrap; }

.newsletter-feedback {
  margin-top: 10px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--brand-secondary);
}

.newsletter-feedback:empty { display: none; }

.popular-routes-grid.is-single { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  .popular-routes-grid.is-single .popular-route-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}

.recent-searches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-size: .78rem;
}

.recent-searches-label {
  color: #667085;
  font-weight: 700;
}

.recent-search-chip,
.recent-searches-clear {
  padding: .3rem .75rem;
  border: 1px solid rgba(88, 63, 153, .18);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(88, 63, 153, .05);
  font-size: .76rem;
  font-weight: 700;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.recent-search-chip:hover,
.recent-searches-clear:hover {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.recent-searches-clear {
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
}

.search-submit.is-loading { cursor: progress; opacity: .75; }

/* Recent Search 页沿用 Website 稿的 Bus 历史卡布局;卡片内容由本地脚本以 textContent 回填。 */
.recent-search-list {
  display: grid;
  gap: .85rem;
}

.recent-search-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.recent-search-card:hover {
  border-color: rgba(88, 63, 153, .28);
  box-shadow: 0 12px 28px rgba(42, 28, 78, .08);
  transform: translateY(-2px);
}

.recent-search-type {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .75rem;
  color: var(--brand);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.recent-search-type-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--brand);
  background: #f1edfa;
}

.recent-search-route {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(70px, 150px) minmax(110px, auto);
  gap: .8rem;
  align-items: center;
  margin-bottom: 1rem;
}

.recent-search-route strong {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 800;
}

.recent-search-route-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--brand);
}

.recent-search-route-line span {
  height: 1px;
  background: #d8d3e4;
}

.recent-search-route-line i {
  margin-inline: .4rem;
}

.recent-search-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.recent-search-meta > span {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700;
}

.recent-search-meta small {
  margin-bottom: .1rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}

.recent-search-actions {
  min-width: 145px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.recent-search-remove {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: .85rem;
  font-weight: 700;
}

.recent-search-remove:hover {
  color: var(--red);
}

.recent-search-empty {
  border: 1px dashed var(--line);
  border-radius: 14px;
}

@media (max-width: 767.98px) {
  .recent-search-card {
    grid-template-columns: 1fr;
  }

  .recent-search-route {
    grid-template-columns: minmax(0, 1fr) minmax(55px, 90px) minmax(0, 1fr);
  }

  .recent-search-actions {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    align-items: center;
  }

  .recent-search-actions .btn,
  .recent-search-actions .recent-search-remove {
    flex: 1 1 0;
  }
}

.section-heading h1 {
  font-size: clamp(2rem, 4vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin: .5rem 0 .8rem;
}

.popular-route-heading-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
}

.popular-route-rating {
  margin: 1rem 0 1.15rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
}

.popular-route-rating .bi-star-fill { color: var(--brand-secondary); }

.track-map { padding-bottom: 1rem; }

.track-map .map-canvas { height: 22rem; }

.track-map .map-vehicle { cursor: default; }

.track-status { font-weight: 600; }

@media (max-width: 575.98px) {
  .track-map .map-canvas { height: 15rem; margin: 0 .75rem; }
}

.quick-access-card {
    position: relative;
    overflow: hidden;
    border-color: var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(42, 28, 78, 0.055);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .quick-access-card::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        background: var(--brand-secondary);
        content: "";
    }

    .quick-access-card:hover {
        border-color: rgba(88, 63, 153, 0.3);
        box-shadow: 0 14px 32px rgba(42, 28, 78, 0.1);
        transform: translateY(-3px);
    }

    .quick-access-card .card-body {
        display: flex;
        min-height: 240px;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.35rem;
    }

.quick-access-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    border-radius: 14px;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 1.3rem;
}

.quick-access-card h3 {
    color: var(--ink);
    font-size: 1rem;
}

.quick-access-card p {
    margin-bottom: 1.25rem;
    font-size: 0.78rem;
    line-height: 1.65;
}

.quick-access-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
}

    .quick-access-link i {
        transition: transform 0.2s ease;
    }

    .quick-access-link:hover i {
        transform: translateX(3px);
    }

.regional-support-section {
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border-radius: 18px;
    background: radial-gradient( circle at 100% 0, rgba(255, 222, 47, 0.1), transparent 22% ), #f7f6fb;
}

.regional-support-list {
    display: grid;
    gap: 1rem;
}

.regional-support-card {
    display: grid;
    grid-template-columns: minmax(145px, 0.9fr) minmax(195px, 1.2fr) minmax(180px, 1.1fr) minmax(245px, 1.45fr) minmax(175px, 0.95fr);
    gap: 1.25rem;
    align-items: center;
    min-height: 104px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(42, 28, 78, 0.055);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .regional-support-card:hover {
        border-color: rgba(88, 63, 153, 0.22);
        box-shadow: 0 14px 32px rgba(42, 28, 78, 0.09);
        transform: translateY(-2px);
    }

.regional-country {
    min-width: 0;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.regional-flag {
    flex: 0 0 34px;
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    line-height: 1;
}

.regional-country-name {
    margin: 0 0 0.15rem;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 800;
}

.regional-country-time {
    display: block;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 600;
}

.regional-info-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--muted);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.25;
    text-transform: uppercase;
}

.regional-info-group {
    min-width: 0;
}

.regional-language-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

    .regional-language-list span {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0.3rem 0.55rem;
        border-radius: 999px;
        color: var(--brand);
        background: var(--brand-soft);
        font-size: 0.64rem;
        font-weight: 700;
        white-space: nowrap;
    }

.regional-contact-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.regional-contact-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 0.95rem;
}

.regional-whatsapp-icon {
    color: #16815f;
    background: #e8f8f2;
}

.regional-contact-row strong {
    display: block;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

/* 稿件这一行是 nowrap,但它的营运日文案最长只有 "Monday to Sunday / Public Holidays";
   我方 resx 的对应文案更长(en 41 字符、ms-MY 37 字符),1440 下实测被裁掉
   (scrollWidth 204 > clientWidth 171)。因此只让这一行回到 normal,
   上面那条 strong(时间段 "09:00-18:00",三语都是 11 字符)保留稿件的 nowrap。 */
.regional-contact-row small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.63rem;
    white-space: nowrap;
}

.regional-support-actions {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: stretch;
    justify-content: center;
}

.regional-whatsapp-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--brand);
    border-radius: 12px;
    color: #fff;
    background: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

    .regional-whatsapp-button:hover,
    .regional-whatsapp-button:focus {
        color: #fff;
        border-color: var(--brand-hover);
        background: var(--brand-hover);
        box-shadow: 0 9px 22px rgba(88, 63, 153, 0.2);
    }

.regional-secondary-link {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--brand);
    font-size: 0.67rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

    .regional-secondary-link i {
        font-size: 0.72rem;
    }

@media (max-width: 1199.98px) {
    .regional-support-card {
        grid-template-columns: minmax(140px, 0.9fr) minmax(175px, 1.1fr) minmax(175px, 1fr) minmax(215px, 1.25fr);
        gap: 1rem;
    }

    .regional-support-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding-top: 0.85rem;
        border-top: 1px solid var(--line);
    }

    .regional-whatsapp-button {
        min-width: 175px;
    }

    .regional-secondary-link {
        min-width: 175px;
    }
}

@media (max-width: 991.98px) {
    .regional-support-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .regional-country {
        grid-column: 1 / -1;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--line);
    }

    .regional-support-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .regional-support-section {
        padding: 0;
        background: transparent;
    }

    .regional-support-card {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1.15rem;
        border-radius: 16px;
    }

    .regional-country {
        grid-column: auto;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--line);
    }

    .regional-info-group,
    .regional-contact-row {
        padding-bottom: 0.9rem;
        border-bottom: 1px solid #f0eef3;
    }

        .regional-contact-row strong,
        .regional-contact-row small {
            white-space: normal;
        }

    .regional-support-actions {
        grid-column: auto;
        flex-direction: column;
        padding-top: 0;
        border-top: 0;
    }

    .regional-whatsapp-button,
    .regional-secondary-link {
        width: 100%;
        min-width: 0;
    }

    .regional-secondary-link {
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .regional-support-card {
        transition: none;
    }
}

.faq-section .btn-outline-primary:hover, .faq-section .btn-outline-primary:focus, .faq-section .btn-outline-primary.focus, .faq-section .btn-outline-primary:active, .faq-section .btn-outline-primary.active, .faq-section .btn-outline-primary.disabled, .faq-section .btn-outline-primary:disabled {
    color: var(--brand);
    background-color: #fff;
    border-color: var(--brand);
}

.faq-group {
    margin-top: 2rem;
}

/* F12(B):FAQ 区上方单枚 Bus Tickets 静态页签,取值同稿件 help-centre.html:394-417 的 .menu-tabs */
.menu-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 13px;
    background: var(--soft);
}

.menu-tabs .nav-link {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    color: var(--brand);
    background: transparent;
    font-weight: 700;
    text-align: center;
}

.menu-tabs .nav-link.active {
    color: #fff;
    background: var(--brand);
    cursor: default;
}

.faq-accordion {
    display: grid;
    gap: 0.7rem;
}

    .faq-accordion .accordion-item {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .faq-accordion .accordion-item:has( .accordion-button:not(.collapsed) ) {
            border-color: #e6e1ff;
            box-shadow: 0 9px 22px rgba(42, 28, 78, 0.08);
        }

    .faq-accordion .accordion-button {
        position: relative;
        min-height: 58px;
        padding: 1rem 3.75rem 1rem 1.15rem;
        border: 0;
        color: var(--ink);
        background: #fff;
        font-size: 0.84rem;
        font-weight: 800;
        line-height: 1.45;
        box-shadow: none;
    }

        .faq-accordion .accordion-button:hover {
            color: var(--brand);
            background: #fbfaff;
        }

        .faq-accordion .accordion-button:focus {
            border: 0;
            box-shadow: none;
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            color: var(--brand);
            background: #fbfaff;
        }

        .faq-accordion .accordion-button::after {
            position: absolute;
            top: 50%;
            right: 1rem;
            width: 28px;
            height: 28px;
            margin: 0;
            border-radius: 50%;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23472f92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 14px;
            transform: translateY(-50%);
            transform-origin: center;
            transition: transform 0.2s ease, background-color 0.2s ease;
            content: "";
        }

        .faq-accordion .accordion-button:not(.collapsed)::after {
            background-color: #fff;
            transform: translateY(-50%) rotate(180deg);
        }

    .faq-accordion .accordion-body {
        padding: 0 1.15rem 1.2rem;
        color: var(--ink-2);
        background: #fbfaff;
        font-size: 0.78rem;
        line-height: 1.75;
    }

#report-page {
    --report-border: var(--line);
    --report-surface: #fff;
    --report-soft: #faf9ff;
    --report-purple-ring: rgba(71, 47, 146, .14);
    --report-yellow-soft: #fffbea;
}

/* 稿件把字段基底写成全局 .form-control/.form-select，我方按 ui-inventory §2.0 第一条收窄到各页面族作用域，
   而本作用域此前没有那一份，三个字段落回了 Bootstrap 出厂值（实测数字见 findings §4 D1）。
   必须排在 .report-trip-select / .report-description 之前:那两条与本条同特异度,靠后置覆盖 min-height 与圆角。
   焦点态必须一起搬:本条带 ID、特异度 (1,1,0) 高于 Bootstrap 的 .form-control:focus (0,2,0),
   只搬基底会让 box-shadow:none 连焦点态一起赢下来,而 Bootstrap 同时设了 outline:0——三个字段就没有任何
   键盘焦点指示了。稿件不会有这个问题:它的基底在全局 (0,1,0)、低于 :focus。.checkout-card 与 .auth-form
   两处收窄同样各带一条焦点规则，原因相同。 */
#report-page .form-control,
#report-page .form-select {
  min-height: 50px;
  border-color: #d8dee8;
  border-radius: 10px;
  color: #101828;
  background-color: #fff;
  font-size: .88rem;
  box-shadow: none;
}
#report-page .form-control:focus,
#report-page .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(88, 63, 153, .14);
}
#report-page .form-label {
  margin-bottom: .45rem;
  color: var(--form-label);
  font-size: .9rem;
  font-weight: 700;
}

    #report-page .report-hero-copy {
        max-width: 680px;
        margin-top: .65rem;
        font-size: .88rem;
        line-height: 1.7;
    }

    #report-page .report-form {
        width: 100%;
    }

    #report-page .report-card {
        overflow: visible;
        border-radius: 22px;
        border-color: #e2e6ed;
        box-shadow: 0 16px 42px rgba(16, 24, 40, .075);
    }

    #report-page .report-heading {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--report-border);
    }

        #report-page .report-heading .card-section-icon {
            flex: 0 0 46px;
            width: 46px;
            height: 46px;
            border-radius: 14px;
            color: var(--brand);
            background: var(--brand-soft);
            font-size: 1.2rem;
        }

        #report-page .report-heading p {
            max-width: 700px;
            color: var(--muted);
            font-size: .82rem;
            line-height: 1.65;
        }

    #report-page .report-section {
        min-width: 0;
        margin-bottom: 30px; padding-bottom:30px;
        border: 0;
        border-bottom: 1px solid var(--report-border);
    }

    #report-page .report-section-title {
        float: none;
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        margin: 0 0 1.15rem;
        padding: 0;
        color: var(--ink);
        font-size: .98rem;
        font-weight: 800;
        line-height: 1.35;
    }

        #report-page .report-section-title > span:last-child {
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        #report-page .report-section-title small {
            display: block;
            margin-top: .2rem;
            color: var(--muted);
            font-size: .72rem;
            font-weight: 500;
            line-height: 1.5;
        }

    #report-page .report-section-number {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        background: var(--brand);
        box-shadow: 0 0 0 5px rgba(71, 47, 146, .07);
        font-size: .73rem;
        font-weight: 800;
    }

    #report-page .report-trip-field {
        position: relative;
    }

    #report-page .report-trip-icon {
        position: absolute;
        top: 50%;
        left: 1rem;
        z-index: 2;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        color: var(--brand);
        background: var(--brand-soft);
        transform: translateY(-50%);
        pointer-events: none;
    }

    #report-page .report-trip-select {
        min-height: 62px;
        padding-left: 4.15rem;
        padding-right: 2.75rem;
        border-radius: 13px;
        font-weight: 700;
    }

    #report-page .report-category-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .8rem;
    }

    #report-page .report-category-item {
        position: relative;
        min-width: 0;
    }

    #report-page .report-category-input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #report-page .report-category-option {
        position: relative;
        min-height: 78px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        align-items: center;
        gap: .75rem;
        width: 100%;
        margin: 0;
        padding: .85rem .95rem;
        border: 1px solid #dfe4ec;
        border-radius: 14px;
        color: #475467;
        background: #fff;
        cursor: pointer;
        transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

        #report-page .report-category-option:hover {
            border-color: rgba(71, 47, 146, .36);
            background: #fcfbff;
            transform: translateY(-1px);
        }

    #report-page .report-category-icon {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        color: var(--brand);
        background: var(--brand-soft);
        font-size: 1.08rem;
        transition: color .18s ease, background .18s ease;
    }

    #report-page .report-category-label {
        min-width: 0;
        color: inherit;
        font-size: .84rem;
        font-weight: 800;
    }

    #report-page .report-category-check {
        color: var(--brand);
        opacity: 0;
        transform: scale(.78);
        transition: opacity .18s ease, transform .18s ease;
    }

    #report-page .report-category-input:checked + .report-category-option {
        color: var(--brand);
        border-color: var(--brand);
        background: var(--brand-soft);
        box-shadow: 0 8px 20px rgba(71, 47, 146, .1);
    }

        #report-page .report-category-input:checked + .report-category-option .report-category-icon {
            color: #fff;
            background: var(--brand);
        }

        #report-page .report-category-input:checked + .report-category-option .report-category-check {
            opacity: 1;
            transform: scale(1);
        }

    #report-page .report-category-input:focus-visible + .report-category-option {
        border-color: var(--brand);
        box-shadow: 0 0 0 4px var(--report-purple-ring);
        outline: 0;
    }

    #report-page .report-description {
        min-height: 168px;
        padding: .9rem 1rem;
        border-radius: 13px;
        line-height: 1.6;
        resize: vertical;
    }

    #report-page .report-field-footer {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        margin-top: .55rem;
        color: var(--muted-2);
        font-size: .68rem;
        line-height: 1.5;
    }

    #report-page .report-character-count {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #report-page .report-evidence-types {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .8rem;
    }

    #report-page .report-evidence-type {
        min-height: 116px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        margin: 0;
        padding: .9rem;
        border: 1px solid #dfe4ec;
        border-radius: 14px;
        color: #475467;
        background: #fff;
        text-align: center;
        cursor: pointer;
        transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

        #report-page .report-evidence-type:hover,
        #report-page .report-evidence-type:focus-within {
            color: var(--brand);
            border-color: rgba(71, 47, 146, .38);
            background: #fcfbff;
            box-shadow: 0 7px 18px rgba(16, 24, 40, .055);
            transform: translateY(-1px);
        }

        #report-page .report-evidence-type:focus-within {
            box-shadow: 0 0 0 4px var(--report-purple-ring);
        }

    #report-page .report-evidence-icon {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .2rem;
        border-radius: 12px;
        color: var(--brand);
        background: var(--brand-soft);
        font-size: 1.15rem;
    }

    #report-page .report-evidence-type strong {
        color: var(--ink);
        font-size: .8rem;
        font-weight: 800;
    }

    #report-page .report-evidence-type small {
        color: var(--muted-2);
        font-size: .62rem;
        font-weight: 600;
    }

    #report-page .report-upload-zone {
        min-height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        width: 100%;
        padding: 1.35rem;
        border: 1.5px dashed #cfd6e2;
        border-radius: 16px;
        color: #475467;
        background: #fafbfc;
        text-align: center;
        cursor: pointer;
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }

        #report-page .report-upload-zone:hover,
        #report-page .report-upload-zone:focus-within,
        #report-page .report-upload-zone.is-dragover {
            border-color: var(--brand);
            background: #faf8ff;
            box-shadow: 0 0 0 4px rgba(71, 47, 146, .07);
        }

    #report-page .report-upload-icon {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: var(--brand);
        background: var(--brand-soft);
        font-size: 1.35rem;
    }

    #report-page .report-upload-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .25rem;
    }

        #report-page .report-upload-copy strong {
            color: var(--ink);
            font-size: .8rem;
            font-weight: 750;
        }

        #report-page .report-upload-copy small {
            color: var(--muted-2);
            font-size: .68rem;
            line-height: 1.5;
        }

    #report-page .report-file-list:not(:empty) {
        display: grid;
        gap: .6rem;
        margin-top: .8rem;
    }

    #report-page .report-file-item {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .7rem .8rem;
        border: 1px solid var(--report-border);
        border-radius: 11px;
        background: #fff;
    }

        #report-page .report-file-item > i {
            flex: 0 0 auto;
            color: var(--brand);
            font-size: 1rem;
        }

    #report-page .report-file-name {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        color: var(--ink);
        font-size: .74rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #report-page .report-file-meta {
        flex: 0 0 auto;
        color: var(--muted-2);
        font-size: .65rem;
    }

    #report-page .report-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .75rem;
        margin-top: 1.5rem;
    }

        #report-page .report-actions .btn {
            min-height: 48px;
            padding-inline: 1.35rem;
        }

    #report-page .report-cancel-button {
        border: 1px solid var(--line);
        color: #475467;
        background: #fff;
    }

        #report-page .report-cancel-button:hover,
        #report-page .report-cancel-button:focus-visible {
            color: var(--brand);
            border-color: rgba(71, 47, 146, .3);
            background: #faf9ff;
        }

@media (max-width: 991.98px) {
    #report-page .report-card {
        border-radius: 18px;
    }

    #report-page .report-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #report-page .report-hero-copy {
        max-width: 520px;
        font-size: .8rem;
    }

    #report-page .report-heading {
        margin-bottom: .25rem !important;
        padding-bottom: 1.2rem;
    }

        #report-page .report-heading .card-section-icon {
            flex-basis: 42px;
            width: 42px;
            height: 42px;
        }

    #report-page .report-section {
        padding: 1.4rem 0;
    }

    #report-page .report-section-title {
        margin-bottom: 1rem;
    }

    #report-page .report-category-option {
        min-height: 72px;
        grid-template-columns: 36px minmax(0, 1fr) 18px;
        gap: .6rem;
        padding: .75rem;
    }

    #report-page .report-category-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    #report-page .report-evidence-type {
        min-height: 104px;
        padding: .75rem .55rem;
    }

    #report-page .report-upload-zone {
        min-height: 138px;
        padding: 1.1rem;
    }

    #report-page .report-field-footer {
        flex-direction: column;
        gap: .2rem;
    }

    #report-page .report-character-count {
        white-space: normal;
    }
}

@media (max-width: 575.98px) {
    #report-page > .container-xl,
    #report-page > section.container-xl {
        padding-right: .85rem;
        padding-left: .85rem;
    }

    #report-page .report-card {
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(16, 24, 40, .055);
    }

    #report-page .report-heading .card-section-heading {
        align-items: flex-start;
    }

    #report-page .report-section-number {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: .68rem;
    }

    #report-page .report-section-title {
        gap: .7rem;
        font-size: .9rem;
    }

        #report-page .report-section-title small {
            font-size: .68rem;
        }

    #report-page .report-trip-select {
        min-height: 58px;
        padding-left: 3.9rem;
        font-size: .8rem;
    }

    #report-page .report-trip-icon {
        left: .8rem;
        width: 36px;
        height: 36px;
    }

    #report-page .report-category-grid {
        gap: .6rem;
    }

    #report-page .report-category-option {
        min-height: 68px;
        grid-template-columns: 34px minmax(0, 1fr) 16px;
        gap: .5rem;
        padding: .65rem;
        border-radius: 12px;
    }

    #report-page .report-category-icon {
        width: 34px;
        height: 34px;
        font-size: .95rem;
    }

    #report-page .report-category-label {
        font-size: .76rem;
    }

    #report-page .report-description {
        min-height: 150px;
    }

    #report-page .report-evidence-types {
        gap: .6rem;
    }

    #report-page .report-evidence-type {
        min-height: 96px;
        border-radius: 12px;
    }

    #report-page .report-evidence-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 1.05rem;
    }

    #report-page .report-evidence-type strong {
        font-size: .74rem;
    }

    #report-page .report-evidence-type small {
        display: none;
    }

    #report-page .report-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .65rem;
        margin-top: 1.2rem;
    }

        #report-page .report-actions .btn {
            width: 100%;
            min-width: 0;
            min-height: 50px;
        }
}

@media (max-width: 420px) {
    #report-page .report-category-grid {
        grid-template-columns: 1fr;
    }

    #report-page .report-category-option {
        min-height: 62px;
    }

    #report-page .report-evidence-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #report-page .report-evidence-type {
        min-width: 0;
        padding-right: .35rem;
        padding-left: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #report-page .report-category-option,
    #report-page .report-category-icon,
    #report-page .report-category-check,
    #report-page .report-evidence-type,
    #report-page .report-upload-zone {
        transition: none;
    }
}

.quick-access-card-sos::before {
    background: #dc3545;
}

.quick-access-card-sos .quick-access-icon {
    color: #b42318;
    background: #fff1f0;
}

.sos-page-hero .sos-hero-copy {
    max-width: 760px;
    margin-inline: auto;
}

    .sos-page-hero .sos-hero-copy p {
        max-width: 650px;
        margin-inline: auto;
        font-size: .9rem;
        line-height: 1.65;
    }

.sos-shell {
    width: min(100%, 1100px);
    margin-inline: auto;
}

.sos-assistance-card,
.sos-report-card,
.sos-contacts-card {
    border-radius: 20px;
}

.sos-report-card,
.sos-contacts-card {
    margin-top: 1.25rem;
}

.sos-report-card {
    overflow: hidden;
    border-color: rgba(71, 47, 146, .14);
    background: linear-gradient(135deg, #fff 0%, #fcfaff 100%);
}

.sos-report-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.35rem 1.5rem;
}

.sos-report-icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 6px rgba(71, 47, 146, .035);
    font-size: 1.35rem;
}

.sos-report-copy {
    min-width: 0;
}

    .sos-report-copy h2 {
        margin: .3rem 0 .4rem;
        font-size: 1.1rem;
    }

    .sos-report-copy p {
        max-width: 680px;
        margin: 0;
        color: var(--muted);
        font-size: .74rem;
        line-height: 1.6;
    }

.sos-card-body {
    padding: clamp(1.4rem, 3vw, 2.5rem);
}

.sos-state[hidden] {
    display: none !important;
}

.sos-card-intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 2rem;
}

.sos-intro-icon,
.sos-confirm-icon,
.sos-request-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sos-intro-icon {
    width: 74px;
    height: 74px;
    margin-bottom: 1rem;
    color: #fff;
    background: var(--red);
    box-shadow: 0 0 0 10px rgba(220, 53, 69, .09);
    font-size: 2rem;
}

.sos-card-intro .section-kicker {
    margin-bottom: .45rem;
}

.sos-card-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.55rem, 2.6vw, 2rem);
    letter-spacing: -.025em;
}

.sos-card-copy {
    max-width: 680px;
    margin: .75rem auto 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.7;
}

.sos-options-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sos-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sos-option-wrap {
    position: relative;
    min-width: 0;
}

.sos-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.sos-option {
    position: relative;
    min-height: 205px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink-2);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 7px 18px rgba(16, 24, 40, .035);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

    .sos-option:hover {
        transform: translateY(-2px);
        border-color: rgba(71, 47, 146, .24);
        box-shadow: var(--shadow-sm);
    }

.sos-option-input:focus-visible + .sos-option {
    outline: 3px solid rgba(71, 47, 146, .22);
    outline-offset: 3px;
}

.sos-option-input:checked + .sos-option {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
}

.sos-option-input:checked + .sos-option-medical {
    border-color: rgba(220, 53, 69, .58);
    background: #fff8f8;
}

.sos-option-input:checked + .sos-option-breakdown {
    border-color: rgba(235, 189, 0, .72);
    background: #fffdf3;
}

.sos-option-input:checked + .sos-option-toilet {
    border-color: rgba(71, 47, 146, .55);
    background: #faf9ff;
}

.sos-option-check {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dee8;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    font-size: .8rem;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.sos-option-input:checked + .sos-option .sos-option-check {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
    transform: scale(1.04);
}

.sos-option-input:checked + .sos-option-medical .sos-option-check {
    border-color: var(--red);
    background: var(--red);
}

.sos-option-input:checked + .sos-option-breakdown .sos-option-check {
    color: var(--ink);
    border-color: var(--brand-secondary);
    background: var(--brand-secondary);
}

.sos-option-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 1.35rem;
}

.sos-option-medical .sos-option-icon {
    color: #b42318;
    background: #fff0f1;
}

.sos-option-breakdown .sos-option-icon {
    color: #6f5600;
    background: #fff8d8;
}

.sos-option-toilet .sos-option-icon {
    color: var(--brand);
    background: var(--brand-soft);
}

.sos-option-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .sos-option-copy strong {
        color: var(--ink);
        font-size: .98rem;
        font-weight: 800;
        line-height: 1.3;
    }

    .sos-option-copy small {
        margin-top: .4rem;
        color: var(--muted);
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.6;
    }

.sos-option-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-top: auto;
    padding: .32rem .62rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
}

.sos-option-medical .sos-option-tag {
    color: #b42318;
    background: #fff0f1;
}

.sos-option-breakdown .sos-option-tag {
    color: #6f5600;
    background: #fff8d8;
}

.sos-option-toilet .sos-option-tag {
    color: var(--brand);
    background: var(--brand-soft);
}

.sos-location-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dfe8e4;
    border-radius: 16px;
    background: #f8fcfa;
}

.sos-location-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #08775c;
    background: #e6f8f2;
    font-size: 1.2rem;
}

.sos-location-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.sos-location-label {
    color: #08775c;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sos-location-copy strong {
    margin-top: .2rem;
    color: var(--ink);
    font-size: .92rem;
}

.sos-location-copy > span:last-child {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
}

.sos-location-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    color: #08775c;
    background: #e6f8f2;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.sos-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(18, 168, 121, .11);
}

.sos-action-area {
    max-width: 720px;
    margin: 1.5rem auto 0;
}

.sos-primary-action {
    width: min(100%, 510px);
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #98a2b3;
    background: #e9edf2;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .sos-primary-action:not(:disabled):hover {
        transform: translateY(-1px);
        filter: brightness(.97);
    }

    .sos-primary-action:not(:disabled):focus-visible,
    .sos-cancel-action:focus-visible,
    .sos-modal-activate:focus-visible,
    .sos-another-request:focus-visible,
    .sos-contact-item:focus-visible {
        outline: 3px solid rgba(71, 47, 146, .22);
        outline-offset: 3px;
        box-shadow: none;
    }

    .sos-primary-action.is-medical,
    .sos-modal-activate {
        color: #fff;
        border-color: var(--red);
        background: var(--red);
        box-shadow: 0 12px 26px rgba(220, 53, 69, .2);
    }

    .sos-primary-action.is-breakdown {
        color: var(--ink);
        border-color: var(--brand-secondary);
        background: var(--brand-secondary);
        box-shadow: 0 12px 26px rgba(255, 222, 47, .18);
    }

    .sos-primary-action.is-toilet {
        color: #fff;
        border-color: var(--brand);
        background: var(--brand);
        box-shadow: 0 12px 26px rgba(71, 47, 146, .18);
    }

    .sos-primary-action:disabled {
        color: #98a2b3;
        border-color: #e9edf2;
        background: #e9edf2;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 1;
    }

    .sos-primary-action.is-medical:focus-visible,
    .sos-modal-activate:focus-visible {
        outline-color: rgba(220, 53, 69, .3);
    }

.sos-safety-note {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .75rem;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.55;
}

    .sos-safety-note i {
        margin-top: .08rem;
        color: var(--brand);
    }

.sos-active-state,
.sos-request-state {
    max-width: 780px;
    margin-inline: auto;
    padding-block: .5rem;
    text-align: center;
}

.sos-active-icon {
    position: relative;
    width: 92px;
    height: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: .5rem auto 1.2rem;
    border-radius: 50%;
    color: #fff;
    background: var(--red);
    box-shadow: 0 0 0 11px rgba(220, 53, 69, .09);
    font-size: 2rem;
}

    .sos-active-icon::before {
        content: "";
        position: absolute;
        inset: -18px;
        border: 2px solid rgba(220, 53, 69, .18);
        border-radius: 50%;
        animation: sosPulseRing 1.8s ease-out infinite;
    }

.sos-active-kicker {
    display: block;
    margin-bottom: .45rem;
    color: var(--red);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sos-active-state h2,
.sos-request-state h2 {
    margin-bottom: .55rem;
    font-size: clamp(1.55rem, 2.5vw, 1.95rem);
    letter-spacing: -.02em;
}

.sos-active-state h2 {
    color: #b42318;
}

.sos-active-state > p,
.sos-request-state > p {
    max-width: 610px;
    margin: 0 auto;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.7;
}

.sos-status-list {
    display: grid;
    gap: .7rem;
    margin: 1.6rem 0;
    text-align: left;
}

.sos-status-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

    .sos-status-row.is-complete {
        border-color: #dcefe7;
        background: #f9fdfb;
    }

    .sos-status-row.is-pending {
        background: #fafbfc;
    }

.sos-status-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--brand);
    background: var(--brand-soft);
}

.sos-status-row.is-complete .sos-status-icon,
.sos-status-row.is-complete .sos-status-result {
    color: #08775c;
}

.sos-status-row.is-complete .sos-status-icon {
    background: #e6f8f2;
}

.sos-status-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .sos-status-copy strong {
        color: var(--ink);
        font-size: .84rem;
    }

    .sos-status-copy small {
        margin-top: .18rem;
        color: var(--muted);
        font-size: .66rem;
        line-height: 1.45;
    }

.sos-status-result {
    color: var(--muted-2);
    font-size: 1rem;
}

.sos-spinner {
    animation: sosSpin 1s linear infinite;
}

.sos-cancel-action {
    min-width: 180px;
    color: #475467;
    border: 1px solid var(--line);
    background: #f6f8fb;
}

    .sos-cancel-action:hover,
    .sos-cancel-action:focus {
        color: var(--ink);
        border-color: #d0d5dd;
        background: #eef1f5;
    }

.sos-request-state-icon {
    width: 76px;
    height: 76px;
    margin: .5rem auto 1rem;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 1.75rem;
}

.sos-request-state.is-breakdown .sos-request-state-icon {
    color: #6f5600;
    background: #fff8d8;
}

.sos-request-state.is-toilet .sos-request-state-icon {
    color: var(--brand);
    background: var(--brand-soft);
}

.sos-request-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.4rem 0 1.25rem;
    text-align: left;
}

/* 乘客侧请求只带回车牌一格(没有位置文字),单格时占满整行,不留半行空白。 */
.sos-request-summary:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }

    .sos-request-summary > div {
        padding: .9rem 1rem;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fafbfc;
    }

    .sos-request-summary span,
    .sos-request-summary strong {
        display: block;
    }

    .sos-request-summary span {
        color: var(--muted);
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .sos-request-summary strong {
        margin-top: .25rem;
        color: var(--ink);
        font-size: .82rem;
    }

.sos-another-request {
    min-width: 190px;
}

.sos-contacts-body {
    display: grid;
    grid-template-columns: minmax(230px, .8fr) minmax(0, 1.45fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.35rem 1.5rem;
}

.sos-contacts-heading h2 {
    margin: .3rem 0 .4rem;
    font-size: 1.1rem;
}

.sos-contacts-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.6;
}

.sos-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.sos-contact-item {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    min-height: 74px;
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .sos-contact-item:hover {
        color: inherit;
        transform: translateY(-1px);
        border-color: rgba(71, 47, 146, .22);
        box-shadow: 0 10px 24px rgba(16, 24, 40, .065);
    }

.sos-contact-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1rem;
}

    .sos-contact-icon.is-operations {
        color: var(--brand);
        background: var(--brand-soft);
    }

    .sos-contact-icon.is-emergency {
        color: #b42318;
        background: #fff0f1;
    }

.sos-contact-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .sos-contact-copy small {
        color: var(--muted);
        font-size: .63rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .sos-contact-copy strong {
        margin-top: .18rem;
        overflow-wrap: anywhere;
        color: var(--ink);
        font-size: .82rem;
    }

.sos-contact-arrow {
    color: var(--muted-2);
    font-size: .85rem;
}

.sos-contact-meta {
    margin: .85rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .18rem .6rem;
}

    .sos-contact-meta dt {
        color: var(--muted);
        font-size: .63rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .sos-contact-meta dd {
        margin: 0;
        overflow-wrap: anywhere;
        color: var(--ink);
        font-size: .78rem;
    }

.sos-confirm-modal .modal-dialog {
    max-width: 500px;
}

.sos-confirm-body {
    padding: 2rem;
}

.sos-confirm-icon {
    width: 66px;
    height: 66px;
    margin-bottom: 1rem;
    color: #b42318;
    background: #fff0f1;
    box-shadow: 0 0 0 9px rgba(220, 53, 69, .045);
    font-size: 1.55rem;
}

.sos-confirm-body h2 {
    margin-bottom: .6rem;
}

.sos-confirm-body p {
    max-width: 410px;
    margin: 0 auto;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.7;
}

.sos-confirm-actions {
    display: flex;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.4rem;
}

    .sos-confirm-actions .btn {
        min-width: 135px;
    }

.sos-modal-activate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

@keyframes sosPulseRing {
    0% {
        opacity: .75;
        transform: scale(.88);
    }

    75%, 100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes sosSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 991.98px) {
    .sos-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sos-option-wrap:last-child {
        grid-column: 1 / -1;
    }

        .sos-option-wrap:last-child .sos-option {
            min-height: 175px;
        }

    .sos-contacts-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    .sos-page-hero .sos-hero-copy p {
        font-size: .82rem;
    }

    .sos-shell {
        width: 100%;
    }

    .sos-assistance-card,
    .sos-report-card,
    .sos-contacts-card {
        border-radius: 16px;
    }

    .sos-report-body {
        grid-template-columns: 1fr;
        gap: .85rem;
        padding: 1.2rem;
    }

    .sos-card-body {
        padding: 1.2rem;
    }

    .sos-card-intro {
        margin-bottom: 1.4rem;
    }

    .sos-intro-icon {
        width: 64px;
        height: 64px;
        box-shadow: 0 0 0 8px rgba(71, 47, 146, .045);
        font-size: 1.7rem;
    }

    .sos-option-grid {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .sos-option-wrap:last-child {
        grid-column: auto;
    }

        .sos-option,
        .sos-option-wrap:last-child .sos-option {
            min-height: 0;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-areas:
                "icon copy"
                "tag tag";
            gap: .7rem .85rem;
            align-items: center;
            padding: 1rem;
        }

    .sos-option-icon {
        grid-area: icon;
        width: 46px;
        height: 46px;
    }

    .sos-option-copy {
        grid-area: copy;
        padding-right: 2rem;
    }

    .sos-option-tag {
        grid-area: tag;
        justify-self: start;
        margin-top: 0;
    }

    .sos-location-panel {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sos-location-status {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .sos-primary-action {
        width: 100%;
        min-height: 52px;
        font-size: .8rem;
    }

    .sos-safety-note {
        text-align: left;
    }

    .sos-active-icon {
        width: 78px;
        height: 78px;
        font-size: 1.7rem;
    }

    .sos-status-row {
        padding: .8rem;
    }

    .sos-request-summary {
        grid-template-columns: 1fr;
    }

    .sos-contacts-body {
        padding: 1.2rem;
    }

    .sos-contact-grid {
        grid-template-columns: 1fr;
    }

    .sos-confirm-body {
        padding: 1.5rem 1.2rem;
    }

    .sos-confirm-actions {
        flex-direction: column-reverse;
    }

        .sos-confirm-actions .btn {
            width: 100%;
        }
}

@media (max-width: 575.98px) {
    .sos-card-title {
        font-size: 1.42rem;
    }

    .sos-card-copy {
        font-size: .8rem;
    }

    .sos-option-copy strong {
        font-size: .9rem;
    }

    .sos-option-copy small {
        font-size: .7rem;
    }

    .sos-location-panel {
        gap: .75rem;
        padding: .9rem;
    }

    .sos-location-icon {
        width: 42px;
        height: 42px;
    }

    .sos-status-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .65rem;
    }

    .sos-status-icon {
        width: 34px;
        height: 34px;
    }

    .sos-status-copy strong {
        font-size: .78rem;
    }

    .sos-contact-item {
        min-height: 70px;
        padding: .7rem .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sos-option,
    .sos-primary-action,
    .sos-contact-item,
    .sos-option-check {
        transition: none;
    }

        .sos-option:hover,
        .sos-option-input:checked + .sos-option,
        .sos-primary-action:not(:disabled):hover,
        .sos-contact-item:hover {
            transform: none;
        }

    .sos-active-icon::before,
    .sos-spinner {
        animation: none;
    }
}

.review-dim {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.review-dim-label {
    float: none;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0;
    width: auto;
}

.review-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.25rem;
}

    .review-stars input {
        height: 1px;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 1px;
    }

    .review-stars label {
        color: #d5cfe6;
        cursor: pointer;
        font-size: 1.35rem;
        line-height: 1;
        transition: color 0.15s ease;
    }

    .review-stars input:checked ~ label,
    .review-stars label:hover,
    .review-stars label:hover ~ label {
        color: var(--brand-secondary);
    }

    .review-stars input:focus-visible + label {
        border-radius: 4px;
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

.review-static-stars i {
    color: #d5cfe6;
    font-size: 1rem;
}

    .review-static-stars i.is-lit {
        color: var(--brand-secondary);
    }

/* 常用乘客簿卡片的字段标签与取值(移植自 manage.html 的 .passenger-detail-*,稿件里 .passenger-details 本身没有规则,只是 Bootstrap 栅格行)。 */
.passenger-detail-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.passenger-detail-value {
    display: block;
    color: var(--ink);
    font-size: 0.95rem;
}

/* Track 状态条、速度小卡与 Safety & support(移植自 track.html 的 .track-*,只取本页用到的那些)。
   稿件把状态色写在 chip 自己的 .track-status-on-time 上,而它只画过准点一档;这里改挂在状态条根节点的
   is-on-time / is-delayed / is-offline 上——指示点与徽章要一起换色,一个类比两处各换一次少一次漏改。 */
.track-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e2e6ed;
    border-radius: 14px;
    background: #fff;
}

.track-status-main,
.track-status-copy,
.track-status-side,
.track-status-chip {
    display: flex;
    align-items: center;
}

.track-status-main {
    min-width: 0;
    gap: 0.8rem;
}

.track-live-indicator {
    position: relative;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(34, 160, 107, 0.12);
}

    .track-live-indicator::after {
        content: "";
        position: absolute;
        inset: -7px;
        border: 2px solid rgba(34, 160, 107, 0.3);
        border-radius: inherit;
        animation: trackPulse 1.8s ease-out infinite;
    }

.track-status-copy {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

    .track-status-copy strong {
        max-width: 100%;
        overflow: hidden;
        color: var(--ink);
        font-size: 0.95rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .track-status-copy small {
        margin-top: 0.22rem;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 600;
    }

.track-status-side {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.track-status-chip {
    min-height: 34px;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    color: #475467;
    background: var(--soft);
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.track-status-bar.is-on-time .track-status-state {
    color: #08775c;
    background: #e6f8f2;
}

.track-status-bar.is-delayed .track-status-state {
    color: #8a5a00;
    background: #fff4e5;
}

.track-status-bar.is-delayed .track-live-indicator {
    background: var(--yellow);
    box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
}

    .track-status-bar.is-delayed .track-live-indicator::after {
        border-color: rgba(255, 193, 7, 0.35);
    }

/* 离线档不脉动:那圈扩散画的是「还在上报」,车已经没有新鲜定位时它是假信号。 */
.track-status-bar.is-offline .track-live-indicator {
    background: var(--muted-2);
    box-shadow: 0 0 0 5px rgba(152, 162, 179, 0.16);
}

    .track-status-bar.is-offline .track-live-indicator::after {
        animation: none;
        opacity: 0;
    }

.track-panel {
    min-width: 0;
}

.track-panel-kicker {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--muted-2);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.track-bus-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.track-bus-icon {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 7px 18px rgba(71, 47, 146, 0.2);
}

    .track-bus-icon i {
        font-size: 1.2rem;
    }

.track-bus-summary-text {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

    .track-bus-summary-text strong {
        color: var(--ink);
        font-size: 1rem;
        font-weight: 800;
    }

    .track-bus-summary-text small {
        margin-top: 0.15rem;
        color: var(--muted);
        font-size: 0.75rem;
    }

/* 稿件这枚小状态只画过准点一档(绿底)。它与状态条上那枚徽章显示的是同一个档位,
   所以三档都给出来、取值与徽章逐条相同;两处由 track-trip.js 的 applyState 一起换。 */
.track-mini-status {
    flex: 0 0 auto;
    padding: 0.36rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

.track-mini-status.is-on-time {
    color: #08775c;
    background: #e6f8f2;
}

.track-mini-status.is-delayed {
    color: #8a5a00;
    background: #fff4e5;
}

.track-mini-status.is-offline {
    color: #475467;
    background: var(--soft);
}

.track-info-list {
    display: grid;
    gap: 0;
    margin-top: 0.35rem;
}

.track-info-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid #edf0f4;
}

    .track-info-row:last-child {
        border-bottom: 0;
    }

    .track-info-row > i {
        color: var(--brand);
        font-size: 0.9rem;
    }

    .track-info-row span {
        min-width: 0;
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 600;
    }

    .track-info-row strong {
        max-width: 150px;
        overflow: hidden;
        color: var(--ink);
        font-size: 0.72rem;
        font-weight: 800;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* 稿件「Seat occupancy」那一块。分母是 EBW 可售总座位,与上面 Seats 那一行是同样的两个数,
   不是第三个来源;两者一起显示、一起隐藏。 */
.track-occupancy {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.track-occupancy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
}

    .track-occupancy-head strong {
        color: var(--brand);
        font-size: 0.68rem;
    }

/* 稿件这两条进度条是自绘的 div + span;这里改用 Bootstrap 的 .progress,只覆盖高度与配色。
   几何、宽度动画与 role/aria 语义交给组件本身,不重复造一个已有的东西(rules/frontend.md)。 */
.track-occupancy-bar,
.track-journey-bar {
    height: 7px;
    border-radius: 999px;
    background: #eceff4;
}

    .track-occupancy-bar .progress-bar,
    .track-journey-bar .progress-bar {
        background: var(--brand);
    }

.track-journey-bar {
    margin-bottom: 0.6rem;
}

/* 占位值与「消息发给客服不是司机」这类块级说明。比 track-safety-note 大一档:
   它们说的是数据从哪来、点下去会发生什么,不是装饰性小字。 */
.track-panel-note {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.5;
}

.track-driver-inline {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* 稿件这里是一张司机照片。我方没有任何照片来源,因此圆底里放图标,不留一个空的照片框。 */
.track-driver-avatar {
    display: inline-flex;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 3px solid #fff;
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 1.5rem;
    box-shadow: 0 0 0 1px rgba(71, 47, 146, 0.12), 0 6px 16px rgba(16, 24, 40, 0.1);
}

.track-driver-copy {
    flex: 1;
    min-width: 0;
}

    .track-driver-copy > strong {
        display: block;
        overflow: hidden;
        color: var(--ink);
        font-size: 0.95rem;
        font-weight: 800;
        text-overflow: ellipsis;
    }

.track-driver-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.7rem;
}

.track-driver-rating {
    color: var(--ink);
    font-weight: 700;
}

    .track-driver-rating i {
        color: #f5a623;
    }

/* 稿件这枚圆钮是拨号图标。渲染成消息入口:它通向运营支持渠道,而那条渠道只收消息(§8 拍板 6)。 */
.track-driver-call {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(71, 47, 146, 0.16);
    border-radius: 50%;
    color: var(--brand);
    background: var(--brand-soft);
    font-size: 1rem;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

    .track-driver-call:hover,
    .track-driver-call:focus-visible {
        color: #fff;
        border-color: var(--brand);
        background: var(--brand);
    }

.track-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.track-action-btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 800;
}

.track-sos-btn,
.track-sos-btn:hover,
.track-sos-btn:focus,
.track-sos-btn:active {
    color: #fff;
    border-color: var(--red);
    background: var(--red);
}

    .track-sos-btn:hover {
        filter: brightness(0.94);
    }

    .track-sos-btn:focus-visible,
    .track-report-btn:focus-visible {
        outline: 3px solid rgba(88, 63, 153, 0.22);
        outline-offset: 2px;
        box-shadow: none;
    }

    .track-sos-btn:focus-visible {
        outline-color: rgba(220, 53, 69, 0.3);
    }

.track-report-btn {
    color: var(--brand);
    border-color: rgba(71, 47, 146, 0.32);
    background: #fff;
}

    .track-report-btn:hover,
    .track-report-btn:focus {
        color: #fff;
        border-color: var(--brand);
        background: var(--brand);
    }

.track-safety-note {
    margin: 0.65rem 0 0;
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1.5;
    text-align: center;
}

@keyframes trackPulse {
    0% {
        opacity: 0.65;
        transform: scale(0.72);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .track-live-indicator::after {
        animation: none;
    }
}

/* 下面五个断点的 track-* 规则逐属性取自稿件 track.html 的 assets/css/style.css;稿件同段那些落在
   逐站时间线(ADR-0045)与示意 SVG 地图族上的规则在我方零对象,不移植。
   四个宽度断点按 max-width 降序排,与稿件同序:同特异度下后者胜,颠倒顺序会让 575.98 的取值被 991.98 盖掉。 */
@media (max-width: 1199.98px) {
    .track-info-row strong {
        max-width: 125px;
    }
}

@media (max-width: 991.98px) {
    .track-info-row strong {
        max-width: min(45vw, 330px);
    }
}

@media (max-width: 767.98px) {
    .track-status-bar {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.85rem;
    }

    .track-status-side {
        justify-content: flex-start;
    }

    .track-driver-inline {
        gap: 0.75rem;
    }

    .track-panel .card-body {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .track-status-copy strong {
        font-size: 0.86rem;
    }

    /* 窄屏车牌会换行,小状态跟着垂直居中就会掉到第二行中间;按稿一起顶到上沿。 */
    .track-bus-summary {
        align-items: flex-start;
    }

    .track-status-side {
        gap: 0.4rem;
    }

    .track-status-chip {
        min-height: 32px;
        padding: 0.36rem 0.58rem;
        font-size: 0.64rem;
    }

    /* 稿件那张深色独立地图卡换成了会员中心卡体系,但窄屏收圆角这一条对两种外壳同样成立。 */
    .track-map-card {
        border-radius: 15px;
    }

    .track-info-row {
        grid-template-columns: 22px minmax(0, 1fr) minmax(85px, auto);
        gap: 0.45rem;
    }

    .track-info-row strong {
        max-width: 115px;
        white-space: normal;
    }

    .track-driver-avatar {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }

    .track-driver-inline {
        gap: 11px;
    }

    .track-driver-meta {
        gap: 4px 8px;
    }

    .track-action-btn {
        min-height: 48px;
        padding-inline: 0.7rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 380px) {
    .track-action-grid {
        grid-template-columns: 1fr;
    }
}

/* 订单详情的行程档(移植自 manage.html 的 .booking-trip-tabs / .trip-overview / .trip-label,只取本页用到的那些)。
   稿件用 --trustliner-border 画 trip-overview 的下边线,本站的同名 token 是 --line。 */
.booking-trip-tabs {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 13px;
    background: var(--soft);
}

.booking-trip-tabs .nav-link {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    color: var(--brand);
    background: transparent;
    font-weight: 700;
    text-align: center;
}

.booking-trip-tabs .nav-link.active {
    color: #fff;
    background: var(--brand);
}

.trip-overview {
    border-bottom: 1px solid var(--line);
}

.trip-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 7px;
    color: var(--brand);
    background: #f1edfa;
    font-size: 0.75rem;
    font-weight: 800;
}

.trip-overview h3 {
    margin: 10px 0 4px;
    font-size: 1.16rem;
    font-weight: 800;
}

.trip-overview p {
    margin: 0;
}

/* 追踪页「本页跟踪的是去程」那一句。它是页面对数据范围的声明,不是装饰性小字,因此比 track-safety-note 大一档。 */
.track-leg-note {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.contact-number-field .contact-dial-select {
    flex: 0 0 min(46%, 220px);
    max-width: 220px;
    border-radius: 10px 0 0 10px;
}

/* .checkout-review-footer 与 .mobile-payment-footer 挂在同一个元素上,不得在这里重定义 grid-template-areas
   或 .checkout-page 的 padding-bottom:两者同为单类选择器、同一媒体区间,文件内后出现的会盖掉上方
   "agreement agreement" / "total action" 那组,政策勾选框失去 agreement 区域后被自动放置到总价与 Pay Now 之间。 */

@media (max-width: 575.98px) {
    .contact-number-field .contact-dial-select {
        flex-basis: 48%;
        max-width: 48%;
    }
}
.ebw-member-benefit { flex: 0 0 var(--slider-item-width, 280px); width: var(--slider-item-width, 280px); min-width: 0; }
.preserve-source-text { white-space: pre-wrap; }
.home-placeholder-card { position: relative; display: flex; min-height: 360px; flex-direction: column; overflow: hidden; padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid #ddd9ef; border-radius: 28px; background: #fff; box-shadow: 0 14px 38px rgba(33, 27, 72, .07); color: var(--muted); }
.home-placeholder-card::after { content: ''; position: absolute; right: -82px; bottom: -82px; width: 190px; height: 190px; border-radius: 50%; background: #f8f7fc; }
.home-placeholder-badge { align-self: flex-start; padding: .65rem 1.15rem; border-radius: 999px; background: #f2f0f8; color: var(--brand); font-size: .82rem; font-weight: 800; }
.home-placeholder-icon { position: absolute; top: clamp(1.75rem, 4vw, 3rem); right: clamp(1.75rem, 4vw, 3rem); display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border: 1px solid #ddd9ef; border-radius: 50%; background: #f2f0f8; color: var(--brand); font-size: 1.65rem; }
.home-placeholder-copy { position: relative; z-index: 1; max-width: 760px; margin-top: clamp(3.5rem, 8vw, 6rem); }
.home-placeholder-card h3 { margin: 0 0 1rem; color: var(--ink); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; }
.home-placeholder-card p { max-width: 720px; margin: 0; font-size: clamp(.95rem, 1.8vw, 1.2rem); line-height: 1.65; }
.home-placeholder-action { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .7rem; align-self: flex-start; margin-top: auto; color: var(--brand); font-weight: 800; }
.home-placeholder-action:hover, .home-placeholder-action:focus-visible { color: var(--brand-hover); }
.popular-route-list .home-placeholder-card { min-height: 285px; grid-column: 1 / -1; margin-top: .25rem; padding: 1.75rem; border-radius: 20px; box-shadow: none; }
.popular-route-list .home-placeholder-icon { top: 1.5rem; right: 1.5rem; width: 52px; height: 52px; font-size: 1.25rem; }
.popular-route-list .home-placeholder-copy { margin-top: 2.75rem; }
.popular-route-list .home-placeholder-card h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
/* 首页「Why Choose Trustliner?」与「Travel With Greater Confidence」两区块:样式表逐段取自最新首页稿。 */
/* =========================================================
   特色长卡区块
   ========================================================= */
.features-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 8% 18%, rgba(255, 222, 47, .13), transparent 23% ), radial-gradient( circle at 92% 82%, rgba(71, 47, 146, .11), transparent 26% ), #f7f6fb;
}

/* 特性区(稿件 2026-10-09 .behind-journey-section):左对齐导语、三张深入卡与照片拼版、座位四档。 */
.trust-feature-stack { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.trust-feature-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); align-items: stretch; gap: clamp(2rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid rgba(71, 47, 146, .12); border-radius: 28px; background: rgba(255, 255, 255, .97); box-shadow: 0 12px 34px rgba(16, 24, 40, .06), inset 0 1px 0 rgba(255, 255, 255, .8); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.trust-feature-card:hover { transform: translateY(-3px); border-color: rgba(71, 47, 146, .2); box-shadow: 0 20px 50px rgba(16, 24, 40, .09); }
.trust-feature-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.trust-feature-titlebar { display: grid; grid-template-columns: 68px minmax(0, 1fr) 52px; align-items: center; gap: 1rem; margin-bottom: 1.35rem; padding-bottom: 1.35rem; border-bottom: 1px solid rgba(71, 47, 146, .12); }
.trust-feature-number { width: 68px; height: 68px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; color: #fff; background: var(--brand); box-shadow: 0 10px 24px rgba(71, 47, 146, .18); font-size: 1.25rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.trust-feature-title-copy { min-width: 0; }
.trust-feature-titlebar h3 { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 800 !important; line-height: 1.12; letter-spacing: -.04em; }
.trust-feature-subtitle { display: inline-flex; width: fit-content; margin: .1rem 0 .55rem; color: var(--brand); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trust-feature-title-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 1.25rem; }
.trust-feature-card--driver .trust-feature-title-icon { color: #8a6800; background: var(--yellow-soft); }
.trust-feature-card--tracking .trust-feature-title-icon { color: var(--green); background: var(--green-soft) }
.trust-feature-card--comfort .trust-feature-title-icon { color: var(--brand); background: var(--brand-soft) }
.trust-feature-lead { max-width: 720px; margin: 0; color: #5e6879; font-size: .92rem; line-height: 1.75; }
.trust-feature-list { list-style: none; display: grid; gap: 1.1rem; margin: 1.6rem 0 0; padding: 0; }
.trust-feature-list--two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-feature-list li { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: .75rem; }
.trust-feature-list-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--brand); background: var(--brand-soft); font-size: .92rem; }
.trust-feature-list strong { display: block; margin-top: .05rem; color: var(--ink); font-size: .82rem; font-weight: 800; line-height: 1.4; }
.trust-feature-list li div > span { display: block; margin-top: .18rem; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.trust-feature-note { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: .9rem; margin-top: 1.6rem; padding: 1rem 1.1rem; border: 1px solid rgba(18, 168, 121, .12); border-radius: 16px; background: #fffbed; }
.trust-feature-note--safety { border-color: rgba(255, 222, 47, .55); background: #fffbed; }
.trust-feature-note-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #9a7600; background: #fff; box-shadow: 0 5px 15px rgba(16, 24, 40, .06); }
.trust-feature-note--safety .trust-feature-note-icon { color: #9a7600; }
.trust-feature-note strong { display: block; color: var(--ink); font-size: .82rem; font-weight: 800; }
.trust-feature-note p { margin: .25rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.trust-subfeature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.trust-subfeature { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: #fbfcfe; }
.trust-subfeature--break { background: #fbfcfe; }
.trust-subfeature-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .8rem; border-radius: 12px; font-size: 1rem; }
.trust-subfeature-icon-danger { color: var(--red); background: rgba(220, 53, 69, .1); }
.trust-subfeature-icon-yellow { color: #9a7600; background: #fffbed; }
.trust-subfeature-label { display: block; margin-bottom: .3rem; color: var(--brand); font-size: .6rem; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.trust-subfeature h4 { margin: 0 0 .5rem; color: var(--ink); font-size: 1rem; font-weight: 800 !important; line-height: 1.4; }
.trust-subfeature p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.trust-chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.trust-chip-list span { display: inline-flex; padding: .38rem .55rem; border: 1px solid rgba(220, 53, 69, .11); border-radius: 999px; color: #5c4347; background: #fff4f5; font-size: .63rem; font-weight: 700; }
.trust-seat-classes-kicker { display: block; margin-bottom: .18rem; color: var(--brand); font-size: .58rem; font-weight: 800; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; }
.trust-seat-classes-header h4 { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 800 !important; line-height: 1.35; }
.trust-seat-class { margin-bottom: 20px; }
.trust-seat-classes-note { flex: 0 1 235px; margin-bottom: 5px; color: #7a7288; font-size: .6rem; line-height: 1.45; text-align: right; }
.trust-seat-class-photo { width: 100%; height: 200px; max-height: 200px; aspect-ratio: 16 / 9; display: block; overflow: hidden; object-fit: cover; object-position: center; background: #e9e6f0; border-radius: 15px; }
.trust-seat-class-body { min-width: 0; padding: .72rem .72rem .75rem; }
.trust-seat-class h5 { margin: 0 0 .5rem; color: var(--ink); font-size: .85rem; font-weight: 800 !important; line-height: 1.3; }
.trust-seat-class-features { list-style: none; display: flex; flex-wrap: wrap; gap: .28rem; margin: 0; padding: 0; }
.trust-seat-class-features li { display: inline-flex; align-items: center; min-height: 22px; padding: .22rem .38rem; border: 1px solid rgba(71, 47, 146, .1); border-radius: 999px; color: #625a70; background: #f8f6fc; font-size: .63rem; font-weight: 750; line-height: 1.25; }
@media (max-width: 820px) {
  .trust-seat-class-photo { height: 150px; max-height: 150px; }
}
@media (max-width: 767.98px) {
  .trust-seat-classes { padding: .9rem; }
  .trust-seat-classes-header { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .trust-seat-classes-note { flex-basis: auto; max-width: 100%; text-align: left; }
  .trust-seat-class { width: 100%; }
  .trust-seat-class-photo { aspect-ratio: 16 / 9; height: auto; max-height: none; }
}
.trust-feature-media { position: relative; min-width: 0; min-height: 520px; height: 100%; margin: 0; overflow: hidden; border-radius: 24px; background: #e9edf3; box-shadow: 0 12px 30px rgba(16, 24, 40, .08); }
.trust-feature-card--driver .trust-feature-media { background: radial-gradient(circle at 78% 20%, rgba(255, 222, 47, .22), transparent 30%), var(--yellow-soft); }
@media (min-width: 992px) {
  .trust-feature-card--reverse .trust-feature-copy { grid-column: 2; grid-row: 1; }
  .trust-feature-card--reverse .trust-feature-media { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1199.98px) {
  .trust-feature-card { grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 2rem; }
  .trust-feature-media { min-height: 500px; }
}
@media (max-width: 991.98px) {
  .trust-feature-card { grid-template-columns: 1fr; gap: 1.75rem; }
  .trust-feature-card--reverse .trust-feature-copy, .trust-feature-card--reverse .trust-feature-media { grid-column: auto; grid-row: auto; }
  .trust-feature-titlebar { grid-template-columns: 62px minmax(0, 1fr) 48px; }
  .trust-feature-number { width: 62px; height: 62px; border-radius: 16px; font-size: 1.1rem; }
  .trust-feature-title-icon { width: 48px; height: 48px; }
  .trust-feature-media { min-height: 440px; }
}
@media (max-width: 767.98px) {
  .trust-feature-stack { gap: 1.25rem; }
  .trust-feature-card { grid-template-columns: 1fr; gap: 1.15rem; padding: 1.3rem; border-radius: 20px; }
  .trust-feature-titlebar { grid-template-columns: 54px minmax(0, 1fr); gap: .8rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; }
  .trust-feature-number { width: 54px; height: 54px; align-self: start; border-radius: 14px; font-size: 1rem; }
  .trust-feature-titlebar h3 { font-size: clamp(1.55rem, 6vw, 1.9rem); }
  .trust-feature-subtitle { margin-top: .3rem; font-size: .78rem; line-height: 1.45; }
  .trust-feature-title-icon { display: none; }
  .trust-feature-lead { font-size: .86rem; }
  .trust-feature-list--two-col, .trust-subfeature-grid { grid-template-columns: 1fr; }
  .trust-feature-list { gap: .9rem; }
  .trust-feature-media { min-height: 0; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; }
  .trust-feature-media { border-radius: 18px; }
}
@media (max-width: 575.98px) {
  .trust-feature-card { padding: 1.1rem; }
  .trust-feature-titlebar { grid-template-columns: 48px minmax(0, 1fr); gap: .75rem; }
  .trust-feature-number { width: 48px; height: 48px; border-radius: 12px; font-size: .9rem; }
  .trust-feature-titlebar h3 { font-size: 1.45rem; line-height: 1.15; }
  .trust-feature-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .trust-feature-note { grid-template-columns: 38px minmax(0, 1fr); padding: .9rem; }
  .trust-feature-note-icon { width: 38px; height: 38px; }
  .trust-feature-media { min-height: 320px; }
}
@media (max-width: 420px) {
  .trust-feature-card { padding: 1rem; }
  .trust-feature-titlebar { grid-template-columns: 44px minmax(0, 1fr); }
  .trust-feature-number { width: 44px; height: 44px; font-size: .82rem; }
  .trust-feature-titlebar h3 { font-size: 1.3rem; }
  .trust-feature-media { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-feature-card { transition: none; }
  .trust-feature-card:hover { transform: none; }
}
.trust-feature-actions { display: flex; justify-content: flex-start; margin-top: 1.25rem; }
.trust-feature-cta { min-width: 200px; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
@media (max-width: 575.98px) {
  .trust-feature-actions { display: block; }
  .trust-feature-cta { width: 100%; min-width: 0; }
}
.trust-feature-actions--combined { align-items: center; gap: 1rem; flex-wrap: wrap; }
.trust-feature-secondary-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--brand); font-size: .95rem; font-weight: 800; }
.trust-feature-secondary-link i { transition: transform .18s ease; }
.trust-feature-secondary-link:hover i { transform: translateX(3px); }
@media (max-width: 575.98px) {
  .trust-feature-actions--combined { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
  .trust-feature-secondary-link { justify-content: center; width: 100%; }
}
@media (max-width: 767.98px) {
  .trust-feature-copy { display: contents; }
  .trust-feature-titlebar { order: 1; margin-bottom: 0; }
  .trust-feature-media { order: 2; }
  .trust-feature-lead { order: 3; }
  .trust-feature-list, .trust-subfeature-grid { order: 4; margin-top: 0; }
  .trust-feature-note { order: 5; margin-top: 0; }
  .trust-feature-actions { order: 6; margin-top: 0; }
}
.features-section.behind-journey-section { position: relative; overflow: hidden; padding-top: clamp(5rem, 8vw, 8rem); padding-bottom: clamp(5rem, 8vw, 8rem); background: #fff; }
.behind-journey-intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .82fr); align-items: end; column-gap: clamp(2.5rem, 7vw, 7rem); row-gap: clamp(1.5rem, 2.5vw, 2rem); margin: 0; padding-bottom: clamp(3rem, 5vw, 5rem); border-bottom: 1px solid #dcd8e3; text-align: left; }
.behind-journey-intro .section-kicker { grid-column: 1; display: inline-flex; align-items: center; gap: .75rem; justify-self: start; margin: 0; color: var(--brand); background: transparent; font-size: .68rem; letter-spacing: .15em; }
.behind-journey-intro .section-kicker::before { width: 34px; height: 3px; flex: 0 0 34px; background: var(--brand-secondary); content: ""; }
.behind-journey-intro h2 { grid-column: 1; max-width: 800px; margin: 0; color: var(--ink); font-size: clamp(2.65rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -.06em; }
.behind-journey-intro > p { grid-column: 2; grid-row: 1 / span 2; max-width: 510px; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.behind-journey-section .trust-feature-stack { display: grid; gap: 0; }
.behind-journey-section .trust-feature-card { min-width: 0; display: grid; align-items: start; gap: clamp(2.5rem, 6vw, 6rem); padding: 6rem 0; border: 0; border-bottom: 1px solid #dcd8e3; border-radius: 0; background: transparent; box-shadow: none; transition: none; scroll-margin-top: 110px; }
.behind-journey-section .trust-feature-card:last-child { padding-bottom: 0; border-bottom: 0; }
.behind-journey-section .trust-feature-card:hover { transform: none; border-color: #dcd8e3; box-shadow: none; }
.behind-journey-section .trust-feature-copy { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.behind-journey-section .trust-feature-titlebar { display: grid; grid-template-columns: clamp(76px, 8vw, 118px) minmax(0, 1fr); align-items: start; gap: 1.5rem; margin: 0 0 1.75rem; padding: 0; border: 0; }
.behind-journey-section .trust-feature-number { width: auto; height: auto; display: block; border-radius: 0; color: rgba(88, 63, 153, .16); background: transparent; box-shadow: none; font-size: 7rem; font-weight: 800; line-height: .78; letter-spacing: -.09em; }
.behind-journey-section .trust-feature-title-copy { min-width: 0; display: flex; flex-direction: column; }
.behind-journey-section .trust-feature-titlebar h3 { order: 2; max-width: 650px; margin: .7rem 0 0; color: var(--ink); font-size: 3rem; line-height: 1.02; letter-spacing: -.055em; }
.behind-journey-section .trust-feature-subtitle { order: 1; display: inline-flex; align-items: center; gap: .65rem; width: auto; margin: 0; color: var(--brand); font-size: .75rem; letter-spacing: .15em; }
.behind-journey-section .trust-feature-subtitle::before { width: 28px; height: 3px; flex: 0 0 28px; background: var(--brand-secondary); content: ""; }
.behind-journey-section .trust-feature-title-icon { display: none; }
.behind-journey-section .trust-feature-lead { max-width: 680px; margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.85; }
.behind-journey-section .trust-feature-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.behind-journey-section .trust-feature-list li { min-width: 0; display: block; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.behind-journey-section .trust-feature-list-icon { display: none; }
.behind-journey-section .trust-feature-list strong { display: block; margin: 0; color: var(--ink); font-size: .9rem; font-weight: 800; line-height: 1.4; }
.behind-journey-section .trust-feature-list li div > span { display: block; margin: .28rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.58; }
.behind-journey-section .trust-feature-note { display: block; margin: 2rem 0 0; padding: 1rem 0 1rem 1.25rem; border: 0; border-left: 4px solid var(--brand-secondary); border-radius: 0; background: transparent; }
.behind-journey-section .trust-feature-note-icon { display: none; }
.behind-journey-section .trust-feature-note strong { color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.behind-journey-section .trust-feature-note p { max-width: 590px; margin: .45rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.behind-journey-section .trust-feature-media { position: relative; min-width: 0; min-height: 0; height: auto; aspect-ratio: auto; margin: 0; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.trust-photo-story { display: grid; gap: 14px; }
.trust-photo-placeholder { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1rem, 2.5vw, 1rem); overflow: hidden; border-top: 5px solid var(--brand-secondary); color: var(--ink); background: var(--brand-soft); border-radius: 15px; }
.trust-photo-placeholder > span, .trust-photo-placeholder > strong { position: relative; z-index: 1; display: block; }
.trust-photo-placeholder > span { margin-top: .45rem; margin-bottom: .45rem; color: var(--brand); font-size: .62rem; font-weight: 800; line-height: 1.35; letter-spacing: .11em; }
.trust-photo-placeholder > strong { max-width: 460px; color: var(--ink); font-size: .85rem; font-weight: 800; line-height: 1.4; }
.trust-photo-story figcaption { color: var(--muted); font-size: .75rem; line-height: 1.5; letter-spacing: .035em; }
.trust-photo-story img { width: 100%; height: 100%; display: block; object-fit: cover; }
.behind-journey-section .trust-feature-card--driver { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); }
.behind-journey-section .trust-feature-card--driver .trust-feature-media { grid-column: 1; grid-row: 1; }
.behind-journey-section .trust-feature-card--driver .trust-feature-copy { grid-column: 2; grid-row: 1; }
.trust-photo-story--safety { grid-template-columns: minmax(0, 1.42fr) minmax(190px, .58fr); grid-template-rows: repeat(2, minmax(0, 1fr)) auto; }
.trust-photo-story--safety .trust-photo-primary { grid-row: 1 / 3; min-height: 540px; }
.trust-photo-story--safety .trust-photo-support { min-height: 263px; }
.behind-journey-section .trust-feature-card--comfort { grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 0; }
.behind-journey-section .trust-feature-card--comfort .trust-feature-copy { grid-column: 1; grid-row: 1; }
.behind-journey-section .trust-feature-card--comfort .trust-feature-media { position: sticky; top: 120px; grid-column: 2; grid-row: 1; align-self: start; }
.behind-journey-section .trust-feature-card--comfort > .trust-seat-classes { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(3rem, 5vw, 4.5rem); }
.behind-journey-section .trust-feature-card--comfort > .trust-feature-actions { grid-column: 1 / -1; grid-row: 3; }
.trust-photo-story--comfort { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; height: auto; min-height: 0; }
.trust-photo-story--comfort .trust-photo-placeholder { min-height: 0; }
.trust-photo-story--comfort .trust-photo-primary { grid-column: 1 / -1; grid-row: 1; min-height: 0; max-height: 550px; }
.trust-photo-story--comfort .trust-photo-support { grid-row: 2; min-height: 0; max-height: 250px; }
.trust-photo-story--comfort .trust-photo-placeholder > img { width: 100%; height: 100%; min-height: 0; flex: 0 0 auto; display: block; object-fit: cover; }
.trust-photo-story--comfort figcaption { grid-column: 1 / -1; padding-top: .25rem; color: var(--brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trust-comfort-proof-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.trust-comfort-proof-list > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.trust-comfort-proof-list dt { color: #211a2a; font-size: .9rem; font-weight: 800; line-height: 1.4; }
.trust-comfort-proof-list dd { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.58; }
.behind-journey-section .trust-subfeature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 2.25rem; }
.behind-journey-section .trust-subfeature { min-width: 0; padding: 1.5rem 1.25rem 1.5rem 0; border: 0; border-radius: 0; background: transparent; }
.behind-journey-section .trust-subfeature + .trust-subfeature { padding-right: 0; padding-left: 1.25rem; border-left: 1px solid var(--line); }
.behind-journey-section .trust-subfeature-icon { display: none; }
.behind-journey-section .trust-subfeature-label { margin-bottom: .5rem; color: var(--brand); font-size: .6rem; letter-spacing: .11em; }
.behind-journey-section .trust-subfeature h4 { margin: 0 0 .55rem; color: var(--ink); font-size: 1.05rem; line-height: 1.35; }
.behind-journey-section .trust-subfeature p { color: var(--muted); font-size: .85rem; line-height: 1.65; }
.behind-journey-section .trust-chip-list { display: none; }
.behind-journey-section .trust-seat-classes { grid-column: 1 / -1; margin-top: 2rem; padding: 2rem 0 0; border: 0; border-top: 4px solid var(--brand-secondary); border-radius: 0; background: transparent; }
.behind-journey-section .trust-seat-classes-header h4 { font-size: 1.2rem; }
.behind-journey-section .trust-seat-classes-note { color: #817a87; font-size: .62rem; }
.behind-journey-section .trust-seat-class-body { padding: 0; }
.behind-journey-section .trust-seat-class h5 { margin: .6rem 0; color: var(--ink); font-size: .86rem; }
.behind-journey-section .trust-seat-class-features { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.behind-journey-section .trust-seat-class-features li { min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font-size: .8rem; font-weight: 700; }
.behind-journey-section .trust-seat-class-features li + li::before { margin-right: .6rem; color: var(--brand-secondary); content: "•"; }
.behind-journey-section .trust-feature-actions { margin-top: 1.5rem; }
.behind-journey-section .trust-feature-secondary-link { min-height: 44px; }
.behind-journey-section .trust-feature-card--tracking { grid-template-columns: 1fr; grid-template-areas: "media" "copy"; gap: clamp(2.5rem, 5vw, 4.5rem); }
.behind-journey-section .trust-feature-card--tracking .trust-feature-media { grid-area: media; }
.behind-journey-section .trust-feature-card--tracking .trust-feature-copy { grid-area: copy; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); grid-template-areas: "title list" "lead list" "note actions"; align-items: start; gap: 1.4rem clamp(2.75rem, 6vw, 6rem); }
.behind-journey-section .trust-feature-card--tracking .trust-feature-titlebar { grid-area: title; margin-bottom: 0; }
.behind-journey-section .trust-feature-card--tracking .trust-feature-lead { grid-area: lead; }
.behind-journey-section .trust-feature-card--tracking .trust-feature-list { grid-area: list; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin-top: 0; }
.behind-journey-section .trust-feature-card--tracking .trust-feature-note { grid-area: note; margin-top: 0; }
.behind-journey-section .trust-feature-card--tracking .trust-feature-actions { grid-area: actions; align-self: end; margin-top: 0; }
.trust-photo-story--reliability { grid-template-columns: minmax(0, 1.5fr) minmax(220px, .5fr); grid-template-rows: repeat(2, minmax(0, 1fr)) auto; }
.trust-photo-story--reliability .trust-photo-primary { grid-row: 1 / 3; min-height: 560px; }
.trust-photo-story--reliability .trust-photo-support { min-height: 273px; }
.trust-photo-story--reliability figcaption { grid-column: 1 / -1; padding-top: 1rem; }
.trust-journey-route { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; }
.trust-journey-route::before { position: absolute; top: 7px; right: 16.66%; left: 16.66%; height: 2px; background: var(--line); content: ""; }
.trust-journey-route li { position: relative; z-index: 1; min-width: 0; text-align: center; }
.trust-journey-route li > span { width: 14px; height: 14px; display: block; margin: 0 auto .7rem; border: 4px solid #fff; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.trust-journey-route li:nth-child(2) > span { background: var(--brand-secondary); box-shadow: 0 0 0 2px #a88f08; }
.trust-journey-route strong, .trust-journey-route small { display: block; padding: 0 .5rem; }
.trust-journey-route strong { color: var(--brand); font-size: .85rem; font-weight: 800; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.trust-journey-route small { margin-top: .2rem; color: var(--muted); font-size: .75rem; line-height: 1.4; }
@media (max-width: 1199.98px) {
  .behind-journey-section .trust-feature-card { gap: 3rem; }
  .behind-journey-section .trust-feature-card--driver { grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); }
  .behind-journey-section .trust-feature-card--comfort { grid-template-columns: minmax(350px, .95fr) minmax(0, 1.05fr); column-gap: 3rem; row-gap: 0; }
  .trust-photo-story--comfort { height: auto; }
  .trust-photo-story--safety .trust-photo-primary { min-height: 500px; }
  .trust-photo-story--safety .trust-photo-support { min-height: 243px; }
}
@media (max-width: 991.98px) {
  .behind-journey-intro { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .behind-journey-intro .section-kicker, .behind-journey-intro h2, .behind-journey-intro > p { grid-column: 1; grid-row: auto; }
  .behind-journey-intro > p { max-width: 700px; }
  .behind-journey-section .trust-feature-card, .behind-journey-section .trust-feature-card--driver, .behind-journey-section .trust-feature-card--comfort, .behind-journey-section .trust-feature-card--tracking { display: flex; flex-direction: column; gap: 1.75rem; }
  .behind-journey-section .trust-feature-copy, .behind-journey-section .trust-feature-card--tracking .trust-feature-copy { display: contents; }
  .behind-journey-section .trust-feature-titlebar, .behind-journey-section .trust-feature-card--tracking .trust-feature-titlebar { order: 1; margin: 0; }
  .behind-journey-section .trust-feature-media, .behind-journey-section .trust-feature-card--comfort .trust-feature-media { position: relative; top: auto; order: 2; width: 100%; }
  .behind-journey-section .trust-feature-lead, .behind-journey-section .trust-feature-card--tracking .trust-feature-lead { order: 3; max-width: 720px; }
  .behind-journey-section .trust-feature-list, .behind-journey-section .trust-feature-card--tracking .trust-feature-list, .trust-comfort-proof-list { order: 4; width: 100%; max-width: 760px; margin-top: 0; }
  .behind-journey-section .trust-subfeature-grid { order: 5; width: 100%; margin-top: 0; }
  .behind-journey-section .trust-feature-card--comfort > .trust-seat-classes { order: 6; width: 100%; margin-top: 0; }
  .behind-journey-section .trust-feature-note, .behind-journey-section .trust-feature-card--tracking .trust-feature-note { order: 6; max-width: 720px; margin-top: 0; }
  .behind-journey-section .trust-feature-actions, .behind-journey-section .trust-feature-card--tracking .trust-feature-actions { order: 7; margin-top: 0; }
  .trust-photo-story--comfort { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; height: auto; }
  .trust-photo-story--reliability .trust-photo-primary { min-height: 500px; }
  .trust-photo-story--reliability .trust-photo-support { min-height: 243px; }
}
@media (max-width: 767.98px) {
  .features-section.behind-journey-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .behind-journey-intro { padding-bottom: 3rem; }
  .behind-journey-intro h2 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .behind-journey-section .trust-feature-card { padding: 4.5rem 0; border-radius: 0; }
  .behind-journey-section .trust-feature-titlebar { grid-template-columns: 66px minmax(0, 1fr); gap: 1rem; padding: 0; }
  .behind-journey-section .trust-feature-number { width: auto; height: auto; font-size: 4.2rem; }
  .behind-journey-section .trust-feature-titlebar h3 { font-size: clamp(2rem, 9vw, 3rem); }
  .trust-photo-story--safety, .trust-photo-story--comfort, .trust-photo-story--reliability { grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-rows: auto; height: auto; aspect-ratio: auto; }
  .trust-photo-story--safety .trust-photo-primary, .trust-photo-story--comfort .trust-photo-primary, .trust-photo-story--reliability .trust-photo-primary { grid-column: auto; grid-row: auto; min-height: 340px; }
  .trust-photo-story--comfort .trust-photo-support { grid-column: auto; grid-row: auto; }
  .trust-photo-story--comfort .trust-photo-support { max-height: 350px; }
  .trust-photo-story--safety .trust-photo-support, .trust-photo-story--comfort .trust-photo-support, .trust-photo-story--reliability .trust-photo-support { min-height: 185px; }
  .trust-photo-story--comfort figcaption, .trust-photo-story--reliability figcaption { grid-column: auto; }
  .behind-journey-section .trust-subfeature-grid { grid-template-columns: 1fr; }
  .behind-journey-section .trust-subfeature, .behind-journey-section .trust-subfeature + .trust-subfeature { padding: 1.35rem 0; border-left: 0; }
  .behind-journey-section .trust-subfeature + .trust-subfeature { border-top: 1px solid var(--line); }
  .behind-journey-section .trust-seat-classes-header { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .behind-journey-section .trust-seat-classes-note { flex-basis: auto; text-align: left; }
  .behind-journey-section .trust-seat-class, .behind-journey-section .trust-seat-class:first-child { width: 100%; border-top: 1px solid var(--line); border-left: 0; }
  .behind-journey-section .trust-seat-class:first-child { border-top: 0; }
}
@media (max-width: 575.98px) {
  .behind-journey-section .trust-feature-titlebar { grid-template-columns: 52px minmax(0, 1fr); gap: .75rem; }
  .behind-journey-section .trust-feature-number { font-size: 3.35rem; }
  .behind-journey-section .trust-feature-titlebar h3 { margin-top: .55rem; font-size: clamp(1.75rem, 9vw, 2.4rem); }
  .behind-journey-section .trust-feature-subtitle { font-size: .58rem; letter-spacing: .11em; }
  .trust-photo-placeholder { padding: 1.15rem; }
  .trust-photo-story--safety .trust-photo-primary, .trust-photo-story--comfort .trust-photo-primary, .trust-photo-story--reliability .trust-photo-primary { min-height: 300px; }
  .trust-photo-story--safety .trust-photo-support, .trust-photo-story--comfort .trust-photo-support, .trust-photo-story--reliability .trust-photo-support { min-height: 160px; }
  .behind-journey-section .trust-feature-list, .trust-comfort-proof-list { max-width: none; }
  .behind-journey-section .trust-feature-actions--combined { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .behind-journey-section .trust-feature-card { transition: none; }
}
@media (min-width: 768px) {
  .behind-journey-section .trust-photo-story--safety { grid-template-columns: minmax(0, 1.42fr) minmax(190px, .58fr); grid-template-rows: 400px 400px auto; gap: 14px; }
  .behind-journey-section .trust-photo-story--safety .trust-photo-primary { grid-row: 1 / 3; height: auto; min-height: 0; }
  .behind-journey-section .trust-photo-story--safety .trust-photo-support { height: auto; min-height: 0; }
  .behind-journey-section .trust-photo-story--safety .trust-photo-placeholder > img { flex: 1 1 0; width: 100%; height: auto; min-height: 0; object-fit: cover; }
}








/* =========================================================
   长卡标题栏
   01 / 02 / 03 / 04
   ========================================================= */



/* 序号徽章 01 / 02 / 03 */



/* 标题文字 */






/* 标题栏图标 */






/* =========================================================
   长卡导语
   ========================================================= */



/* =========================================================
   功能列表
   ========================================================= */








/* =========================================================
   隐私 / 安全提示框
   ========================================================= */








/* =========================================================
   AI 车厢协助子卡
   ========================================================= */











/* =========================================================
   紧急原因标签
   ========================================================= */




/* =========================================================
   如厕请求流程
   ========================================================= */






/* =========================================================
   Trustliner 座席等级子卡
   ========================================================= */




















/* =========================================================
   长卡配图
   ========================================================= */





/* 各卡配图裁切 */







/* =========================================================
   桌面端图文交替排布
   ========================================================= */



/* =========================================================
   小桌面
   ========================================================= */



/* =========================================================
   平板
   ========================================================= */

@media (max-width: 991.98px) {

    .why-book-header {
        margin-bottom: 2.5rem;
    }


    /* 文字叠在配图之上 */




    /* 标题 */





    /* 配图 */

    }


/* =========================================================
   移动端
   ========================================================= */

@media (max-width: 767.98px) {

    .why-book-header {
        margin-bottom: 2rem;
    }


    /* 长卡 */




    /* 标题 */








    /* 文字 */



    /* 列表 */




    /* 配图 */





    /* 各卡移动端裁切 */



    }


/* =========================================================
   小屏移动端
   ========================================================= */



/* =========================================================
   超小屏移动端
   ========================================================= */



/* =========================================================
   减少动效
   ========================================================= */


/* =========================================================
   CTA 按钮
   ========================================================= */









/* =========================================================
   移动端内容顺序:标题 → 配图 → 导语 → 功能 → CTA
   ========================================================= */


/* 信任区(稿件 2026-10-09 .trust-usp-section + .trust-pillar-*):三张支柱卡,卡头图标、照片、要点与锚到特性区的链接。 */
.trust-usp-section { position: relative; overflow: hidden; margin-top: -60px; padding-top: 100px; }
.trust-usp-section::before, .trust-usp-section::after { position: absolute; border: 2px solid rgba(148, 115, 253, 0.1); border-radius: 50%; content: ""; pointer-events: none; }
.trust-usp-section::before { top: -165px; right: -100px; width: 360px; height: 360px; }
.trust-usp-section::after { bottom: -210px; left: -150px; width: 420px; height: 420px; }
.trust-usp-heading { max-width: 1000px; margin-bottom: 32px; }
.trust-usp-heading h2 { margin-bottom: 12px; }
.trust-usp-heading p { margin: 0 auto; line-height: 1.7; }
.trust-usp-heading p strong { color: var(--brand); font-weight: 800; text-transform:uppercase; font-size:1.2rem; text-decoration:underline; }
.trust-pillar-grid { position: relative; z-index: 1; }
.trust-pillar-grid > [class*="col-"] { display: flex; }
.trust-pillar-card { position: relative; width: 100%; overflow: hidden; padding: 26px; border: 1px solid #e7e9ef; border-radius: 20px; background: #fff; box-shadow: 0 10px 35px rgba(16, 24, 40, 0.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.trust-pillar-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.trust-pillar-card--safety::before { background: #ffde2f; }
.trust-pillar-card--comfort::before { background: var(--brand); }
.trust-pillar-card--reliability::before { background: #22a06b; }
.trust-pillar-card::after { display: none; }
.trust-pillar-card--safety::after { content: "01"; }
.trust-pillar-card--comfort::after { content: "02"; }
.trust-pillar-card--reliability::after { content: "03"; }
@media (hover: hover) {
  .trust-pillar-card:hover { transform: translateY(-4px); border-color: #dadde6; box-shadow: 0 18px 45px rgba(16, 24, 40, 0.10); }
}
.trust-pillar-header { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 15px; margin-bottom: 0; }
.trust-pillar-icon { display: none; }
.trust-pillar-card--safety .trust-pillar-icon { color: #8b6800; background: #fff7c8; }
.trust-pillar-card--comfort .trust-pillar-icon { color: var(--brand); background: var(--brand-soft); }
.trust-pillar-card--reliability .trust-pillar-icon { color: #16805d; background: #eaf8f3; }
.trust-pillar-title { min-width: 0; }
.trust-pillar-title h3 { margin: 2px 0 0; font-size: 1.35rem; line-height: 1.2; }
.trust-pillar-number { display: none; margin-bottom: 2px; color: var(--muted-2); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.trust-pillar-media { position: relative; flex: 0 0 auto; height: 160px; margin: 15px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.trust-pillar-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.trust-pillar-media-label { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 7px; background: rgba(255, 255, 255, .96); color: var(--brand); font-size: .6rem; font-weight: 800; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; z-index:1; }
.trust-pillar-card--safety .trust-pillar-media-label { color: #806300; }
.trust-pillar-card--reliability .trust-pillar-media-label { color: #16805d; }
.trust-pillar-features { display: flex; flex-direction: column; margin-top: 0; }
.trust-pillar-feature { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.trust-pillar-feature:first-child { padding-top: 0; }
.trust-pillar-feature + .trust-pillar-feature { border-top: 1px solid #eef0f4; }
.trust-pillar-feature-icon { flex: 0 0 50px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50px; font-size: 1.5rem; }
.trust-pillar-card--safety .trust-pillar-feature-icon { color: #8b6800; background: #fffbea; }
.trust-pillar-card--comfort .trust-pillar-feature-icon { color: var(--brand); background: #f7f4fd; }
.trust-pillar-card--reliability .trust-pillar-feature-icon { color: #16805d; background: #f0faf6; }
.trust-pillar-feature h4 { margin: 0 0 5px; font-size: .95rem; font-weight: 800 !important; line-height: 1.4; }
/* 稿件 2026-10-19 起卡内只显示要点标题,说明句隐藏。 */
.trust-pillar-feature p { display: none; }
.trust-pillar-card { display: flex; flex-direction: column; }
.trust-pillar-features { flex: 1 1 auto; }
.trust-pillar-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 8px; padding-top: 17px; border-top: 1px solid #eceef3; color: var(--brand); font-size: .9rem; font-weight: 800; transition: color .2s ease, gap .2s ease; }
.trust-pillar-link:hover { color: var(--brand-hover); }
.trust-pillar-link-icon { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .8rem; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.trust-pillar-link:hover .trust-pillar-link-icon { transform: translateY(3px); background: var(--brand); color: #fff; }
.trust-pillar-card--safety .trust-pillar-link { color: #806300; }
.trust-pillar-card--safety .trust-pillar-link-icon { color: #806300; background: #fff7c8; }
.trust-pillar-card--safety .trust-pillar-link:hover .trust-pillar-link-icon { color: #101828; background: #ffde2f; }
.trust-pillar-card--reliability .trust-pillar-link { color: #16805d; }
.trust-pillar-card--reliability .trust-pillar-link-icon { color: #16805d; background: #eaf8f3; }
.trust-pillar-card--reliability .trust-pillar-link:hover .trust-pillar-link-icon { color: #fff; background: #16805d; }
@media (max-width: 991.98px) {
  .trust-pillar-card { padding: 24px; }
  .trust-pillar-media { height: clamp(180px, 26vw, 240px); }
  .trust-usp-heading { margin-bottom: 26px; }
}
@media (max-width: 767.98px) {
  .trust-usp-heading { margin-bottom: 22px; }
  .trust-usp-heading h2 { font-size: 1.55rem; }
  .trust-usp-heading p { font-size: .85rem; line-height: 1.65; }
  .trust-pillar-grid { --bs-gutter-y: 16px; }
  .trust-pillar-card { padding: 20px; border-radius: 16px; }
  .trust-pillar-header { gap: 12px; padding-bottom: 12px; }
  .trust-pillar-media { height: clamp(160px, 48vw, 190px); margin: 18px 0; border-radius: 12px; }
  .trust-pillar-media-label { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .trust-pillar-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; font-size: 1.15rem; }
  .trust-pillar-title h3 { font-size: 1.2rem; }
  .trust-pillar-feature { gap: 11px; padding: 15px 0; }
  .trust-pillar-feature-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: .85rem; }
  .trust-pillar-feature h4 { font-size: .86rem; }
  .trust-pillar-feature p { font-size: .76rem; line-height: 1.55; }
}























.trust-usp-icon-img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain;
}









#feature-safety,
#feature-comfort,
#feature-reliability {
    scroll-margin-top: 120px;
}

.trust-driver-safety {
    margin-top: 1.35rem;
}


@media (max-width: 767.98px) {







    #feature-safety,
    #feature-comfort,
    #feature-reliability {
        scroll-margin-top: 96px;
    }
}




/* WEBPAGE-06/07：沿用设计稿的页面几何与优惠卡样式；契约不提供样例分类、价格和优惠码，
   因此本段只调整服务端真实内容的呈现。 */
.deals-page {
  min-height: 100vh;
}

.deals-page-content {
  position: relative;
}

.deals-page-heading h2 {
  margin-top: .45rem;
  color: var(--ink);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  letter-spacing: -.03em;
}

.deals-page-heading p {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.7;
}

.deals-result-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .55rem .85rem;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: .78rem;
  font-weight: 800;
}

.deals-filter-card {
  padding: 1.25rem;
  border: 1px solid #e1e5ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .06);
}

.deals-result-badge span {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .38rem;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: .7rem;
}
.deals-filter-layout {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr);
  gap: 1.25rem;
  align-items: end;
}
.deals-select-wrap { position: relative; }
.deals-select-wrap > i {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 2;
  color: var(--brand);
  transform: translateY(-50%);
  pointer-events: none;
}
.deals-select-wrap .form-select {
  min-height: 46px;
  padding-left: 2.7rem;
  border-radius: 12px;
  font-weight: 700;
}
.deals-filter-card .form-label {
  margin-bottom: .55rem;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
}

.deals-filter-tabs {
  margin-bottom: 0;
}

.deals-filter-tabs .promo-filter-tab {
  /* 基类 .promo-filter-tab 是 <a> 默认 display:inline,行内元素不吃 min-height——
     46px 只撑开了外边框,文字仍按行高贴在顶部;改 inline-flex 居中后文字才落在按钮垂直中线。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding-inline: 1rem;
  border-radius: 12px;
}

.deals-filter-tabs .promo-filter-tab.is-active {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 8px 20px rgba(71, 47, 146, .18);
}

.deals-filter-tabs .promo-filter-tab.is-active:hover,
.deals-filter-tabs .promo-filter-tab.is-active:focus-visible {
  color: #fff;
  border-color: var(--brand-hover);
  background: var(--brand-hover);
}

.deals-filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.deals-filter-status i {
  color: var(--brand);
}

.deals-reset-filter {
  min-height: 36px;
  color: var(--brand);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .deals-filter-layout { grid-template-columns: 1fr; }
  .deals-category-filter { min-width: 0; }
  .deals-filter-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 767.98px) {
  .deals-result-badge {
    align-self: flex-start;
  }

  .deals-filter-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .deals-filter-status {
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .deals-filter-status {
    flex-direction: column;
    gap: .5rem;
  }
}

.deals-state-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid #e1e5ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .055);
}

.deals-grid > [class*="col-"] {
  display: flex;
}

.deals-grid .promo-card {
  width: 100%;
}

/* /deals 与 /bus-tickets 的栅格卡维持 16:9 裁切(用户 2026-09-09 拍板):同排卡图原始比例不一导致 banner 高度不齐,
   首页 Offers 滑块按稿件 contain 显示、不在此列。只写在 .deals-grid 之下,不碰详情页共享类名的 banner。 */
.deals-grid .promo-card .promo-card-banner {
  aspect-ratio: 16 / 9;
  min-height: 190px;
}

.deals-grid .promo-banner-image {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Deals 列表空态(稿件 .deals-empty-state):虚线卡、圆形图标、标题与一行说明。 */
.deals-empty-state {
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  border: 1px dashed #ccd2dc;
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.deals-empty-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 1.45rem;
}
.deals-empty-state h3 {
  margin-bottom: .55rem;
  color: var(--ink);
  font-size: 1.2rem;
}
.deals-empty-state p {
  max-width: 470px;
  margin: 0 auto 1.25rem;
  color: var(--muted);
  line-height: 1.65;
}
@media (max-width: 575.98px) {
  .deals-empty-state { padding: 2rem 1rem; }
  .promo-code-pill { width: 100%; justify-content: center; }
  .offer-details-page.is-news .offer-detail-promo-art strong { max-width: 280px; font-size: 2.35rem; }
}

/* WEBPAGE-06：左图右文结构按稿，所有可见内容仍只取 ContentDetailDto。 */
.offer-details-page {
  min-height: 100vh;
}

.offer-details-section {
  position: relative;
}

.offer-detail-back-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .9rem;
  color: var(--brand);
  font-size: .8rem;
  font-weight: 800;
}

.offer-detail-back-link i,
.offer-detail-book-button i {
  transition: transform .18s ease;
}

.offer-detail-back-link:hover i { transform: translateX(-3px); }

.offer-detail-back-link:focus-visible,
.offer-detail-book-button:focus-visible {
  outline: 3px solid rgba(71, 47, 146, .24);
  outline-offset: 3px;
}

.offer-detail-banner {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #201f3e 0%, var(--brand) 68%, #ffde2f 140%);
  box-shadow: 0 18px 46px rgba(16, 24, 40, .13);
}

.offer-detail-banner .offer-detail-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.offer-detail-banner.is-image-error .offer-detail-image { display: none; }
.offer-detail-banner.is-image-error { min-height: 280px; }

.offer-content-card {
  overflow: hidden;
  border: 1px solid #e1e5ec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .055);
}

.offer-content-card-body {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.offer-detail-state .alert { margin-bottom: 0; }

.detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.offer-status-pill,
.offer-country-pill,
.detail-date-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}

.offer-status-pill {
  color: #765b00;
  background: #fff9d9;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 47, .72);
}

.offer-status-pill i {
  color: #d7a900;
}

.offer-country-pill {
  color: var(--brand);
  background: var(--brand-soft);
}

.detail-date-pill {
  color: #475467;
  background: #f3f5f8;
}

.offer-detail-title {
  max-width: 760px;
  margin-bottom: .9rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  line-height: 1.2;
  letter-spacing: -.035em;
}

.offer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.offer-detail-fact {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background: #fbfcfe;
}

.offer-detail-fact-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 1.05rem;
}

.offer-detail-fact > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}

.offer-detail-fact span:not(.offer-detail-fact-icon) {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}

.offer-detail-fact strong {
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.45;
}

.offer-detail-fact .promo-code-pill {
  min-height: 36px;
  padding: .35rem .75rem;
  font-size: .78rem;
}

@media (max-width: 767.98px) {
  .offer-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .offer-detail-fact {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: .85rem;
  }

  .offer-detail-fact-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}

.detail-article-body {
  padding-block: clamp(1.4rem, 3vw, 2.25rem);
}

.detail-article-prose {
  max-width: 760px;
  color: #475467;
}

.detail-article-prose .content-body > :first-child { margin-top: 0; }
.detail-article-prose .content-body > :last-child { margin-bottom: 0; }
.detail-article-prose .content-body p,
.detail-article-prose .content-body li {
  color: #566176;
  font-size: .94rem;
  line-height: 1.82;
}

.detail-article-prose .content-body p { margin: 0 0 .85rem; }
.detail-article-prose .content-body h2,
.detail-article-prose .content-body h3,
.detail-article-prose .content-body h4 {
  margin: 1.35rem 0 .65rem;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.4;
}

.detail-article-prose .content-body ul,
.detail-article-prose .content-body ol {
  margin: .85rem 0;
  padding-left: 1.3rem;
}

.detail-article-prose .content-body li + li { margin-top: .45rem; }
.detail-article-prose .content-body a { font-weight: 700; text-decoration: underline; }

/* 优惠/资讯详情卡的配图角标按稿件放大(deals-details.html 的 .offer-detail-promo-art);共享 .promo-art 的 2.5rem 是列表卡尺寸。 */
.offer-detail-promo-art { left: 1.45rem; right: 1.45rem; bottom: 1.45rem; }
.offer-detail-promo-art strong { display: block; max-width: 620px; font-size: clamp(3.2rem, 7vw, 5rem); letter-spacing: -.055em; overflow-wrap: anywhere; }
.offer-detail-promo-art small { display: block; max-width: 410px; font-size: clamp(1rem, 2vw, 1.25rem); }

/* 详情卡里的正文按稿件是普通段落:不加长文 prose 的上下内边距与放大行高,沿用全站 p 的字号、行高与颜色。 */
.offer-content-card .detail-article-body { padding-block: 0; }
.offer-content-card .detail-article-prose .content-body p { margin: 0 0 1rem; color: var(--ink-2); font-size: inherit; line-height: 1.5rem; }

/* T&C 卡:列表项沿用稿件的 .84rem 小字;只含一段下划线/加粗文字的段落是分组小标题(稿件 text-dark fw-bold mt-5)。
   选择器带上 .detail-article-prose 才压得过上面 prose 的同名后代规则。 */
/* 稿件里标题块 mb-3 之后是 <ol class="offer-terms-list">(margin-top 1.25rem);本卡正文首元素的上外边距被 .detail-article-prose 归零,
   改由容器承担同一段间距。用 padding 而不是 margin:margin 会与标题块的 mb-3 折叠成 20px。 */
.offer-terms-list.detail-article-prose { padding-top: 1.25rem; }
.offer-terms-list.detail-article-prose .content-body li { color: inherit; font-size: .84rem; line-height: 1.75; }
.offer-terms-list.detail-article-prose .content-body li + li { margin-top: .75rem; }
.offer-terms-list.detail-article-prose .content-body > p:has(> u:only-child, > strong:only-child, > b:only-child) {
  margin: 3rem 0 1rem;
  color: #212529;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.5rem;
}

.offer-detail-actions {
  display: flex;
  justify-content: flex-start;
}

.offer-detail-book-button {
  min-width: 150px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-inline: 1.25rem;
}

.offer-section-title {
  margin: .35rem 0 1rem;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  letter-spacing: -.02em;
}

/* T&C 卡的正文是净化后的任意富文本(可能不止一个 ol/ul),因此这里用后代选择器而不是直接类名——
   与稿件把 class 直接写在 <ol> 上不同,写法上的差异不改变最终视觉。 */
.offer-terms-list ol,
.offer-terms-list ul {
  margin: 1.25rem 0 0;
  padding-left: 1.3rem;
  color: #475467;
}

.offer-terms-list li {
  padding-left: .4rem;
  font-size: .84rem;
  line-height: 1.75;
}

.offer-terms-list li + li {
  margin-top: .75rem;
}

.offer-terms-list li::marker {
  font-weight: 800;
}

.offer-detail-book-button:hover i { transform: translateX(3px); }

@media (max-width: 575.98px) {
  .offer-details-section { padding-top: 1.25rem !important; }
  .offer-detail-banner {
    height: auto;
    min-height: 0;
    border-radius: 17px;
  }
  .offer-detail-banner.is-image-error { min-height: 250px; }
  .offer-content-card { border-radius: 17px; }
  .offer-content-card-body { padding: 1.05rem; }
  .offer-detail-title { font-size: 1.5rem; }
  .offer-detail-back-link { margin-bottom: .75rem; }
  .offer-detail-actions { display: block; }
  .offer-detail-book-button { width: 100%; }
  .detail-article-prose .content-body p,
  .detail-article-prose .content-body li { font-size: .88rem; line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-detail-back-link i,
  .offer-detail-book-button i { transition: none; }
}

.bus-terminal-detail-prose {
  max-width: 820px;
  color: #566176;
  font-size: .95rem;
  line-height: 1.8;
}

.bus-terminal-detail-prose > :first-child { margin-top: 0; }
.bus-terminal-detail-prose > :last-child { margin-bottom: 0; }
.bus-terminal-detail-prose a { font-weight: 700; text-decoration: underline; }
.bus-terminal-detail-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.bus-terminal-detail-prose h1,
.bus-terminal-detail-prose h2,
.bus-terminal-detail-prose h3,
.bus-terminal-detail-prose h4 {
  margin: 1.35rem 0 .65rem;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.4;
}

@media (max-width: 575.98px) {
  .bus-terminal-detail-prose { font-size: .9rem; line-height: 1.75; }
}

/* 登录页求助模态的成功提示。移植稿件 assets/css/style.css 的 .feedback-success（两条同名声明块合并成一条，
   稿件把 color/background 拆在第二块里、取值不冲突）。--green-soft 已在本文件顶部的 token 段。 */
.feedback-success {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem .9rem;
  border: 1px solid #bfe8d6;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #08775c;
  background: var(--green-soft);
}

/* ── 下单页 TrustPoint Rewards 与 Trustliner Voucher 两块的稿件样式,逐条移植自稿件样式表
   docs/Website/assets/css/style.css 。按 ADR-0033 决策 2,稿件样式按页面卡按需移植,不整片前置搬运。
   两块的业务能力都还没有可调的契约,结构按稿渲染、控件恒禁用,登记与收回条件见 ADR-0033。 ── */

/* =========================================================
   Trustpoint rewards — checkout
   ========================================================= */
.trustpoint-rewards {
    --easipoint-track: #e9e7ef;
    --easipoint-border: #e4e7ec;
    --easipoint-surface: #faf9ff;
}

.trustpoint-progress-panel {
    max-width: 34rem;
    margin: 0 0 1.5rem auto;
}

.trustpoint-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.4;
}

.trustpoint-progress-copy strong {
        color: var(--form-label);
        font-weight: 800;
        text-align: right;
    }

.trustpoint-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--easipoint-track);
}

.trustpoint-progress .progress-bar {
        border-radius: inherit;
        background: linear-gradient(90deg, var(--brand), #694fc2);
    }

.trustpoint-table-wrap {
    overflow: hidden;
    border: 1px solid var(--easipoint-border);
    border-radius: 12px;
}

.trustpoint-table {
    table-layout: fixed;
    color: var(--ink-2);
    font-size: .8rem;
}

.trustpoint-table > :not(caption) > * > * {
        padding: .85rem 1rem;
        border-color: var(--easipoint-border);
        vertical-align: middle;
    }

.trustpoint-table thead th {
        color: var(--form-label);
        background: var(--soft);
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

.trustpoint-table th:first-child {
        width: 68%;
    }

.trustpoint-table tbody th {
        color: var(--ink-2);
        font-weight: 700;
    }

.trustpoint-table tbody td strong {
        color: var(--ink);
        font-weight: 800;
    }

.trustpoint-balance-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.trustpoint-help {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--brand);
    font-size: .8rem;
    line-height: 1;
}

.trustpoint-help:hover {
        background: var(--brand-hover);
    }

.trustpoint-help:focus-visible,
    .trustpoint-option:focus-within {
        outline: 3px solid rgba(71, 47, 146, .2);
        outline-offset: 2px;
    }

.trustpoint-redeem-panel {
    min-width: 0;
    margin: 1rem 0 0;
    padding: 1rem;
    border: 1px solid var(--easipoint-border);
    border-radius: 12px;
    background: var(--easipoint-surface);
}

.trustpoint-redeem-panel legend {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        color: var(--ink);
        font-size: .88rem;
        font-weight: 800;
    }

.trustpoint-redeem-hint {
    margin: .2rem 0 .85rem;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.45;
}

.trustpoint-options {
    display: grid;
    grid-template-columns: repeat(7, minmax(62px, 1fr));
    gap: .55rem;
}

.trustpoint-option {
    min-width: 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .6rem;
    border: 1px solid #d8dee8;
    border-radius: 9px;
    color: var(--form-label);
    background: #fff;
    font-size: .72rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.trustpoint-option:hover,
    .trustpoint-option:has(.form-check-input:checked) {
        border-color: rgba(71, 47, 146, .45);
        background: var(--brand-soft);
        box-shadow: inset 0 0 0 1px rgba(71, 47, 146, .04);
    }

.trustpoint-option .form-check-input {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        margin: 0;
    }

.trustpoint-redeem-button {
    min-width: 142px;
    margin-top: 1rem;
}

/* =========================================================
   Easybook voucher redemption — checkout
   ========================================================= */
.trustliner-voucher-redemption {
    --voucher-line: #e4e7ec;
}

.trustliner-voucher-redemption .checkout-section-heading {
        width: 100%;
    }

.trustliner-voucher-heading-copy {
    min-width: 0;
}

.trustliner-voucher-heading-action {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 1rem;
}


.trustliner-voucher-guidelines {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trustliner-voucher-guidelines:hover {
        color: var(--brand-hover);
    }

.trustliner-voucher-guidelines {
    font-size: 0.75rem;
}

@media (max-width: 575.98px) {
.trustliner-voucher-guidelines {
        width: auto;
        min-height: 32px;
        justify-content: flex-start;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        text-decoration: underline;
    }
}

.trustliner-voucher-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.trustliner-voucher-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
}

.trustliner-voucher-select,
.trustliner-voucher-clear {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    color: var(--brand);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.trustliner-voucher-select:hover,
    .trustliner-voucher-clear:hover {
        color: var(--brand-hover);
    }

.trustliner-voucher-select:focus-visible,
    .trustliner-voucher-clear:focus-visible {
        outline: 3px solid rgba(71, 47, 146, 0.2);
        outline-offset: 3px;
        border-radius: 4px;
    }

.trustliner-voucher-select i,
    .trustliner-voucher-clear i {
        font-size: 0.9rem;
    }

.trustliner-voucher-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

/* Compact borderless row */
.trustliner-voucher-option {
    position: relative;
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: 20px auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--voucher-line);
    border-radius: 0;
    color: var(--ink-2);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.trustliner-voucher-option[hidden] {
        display: none !important;
    }

.trustliner-voucher-option:hover strong,
    .trustliner-voucher-option:hover > span {
        color: var(--brand);
    }

.trustliner-voucher-option:focus-within {
        outline: 3px solid rgba(71, 47, 146, 0.2);
        outline-offset: 2px;
    }

.trustliner-voucher-option:has(.form-check-input:checked) strong {
        color: var(--brand);
    }

.trustliner-voucher-option .form-check-input {
        width: 20px;
        height: 20px;
        margin: 0;
        border-radius: 4px;
    }

.trustliner-voucher-option strong {
        color: var(--ink);
        font-size: 0.8rem;
        font-weight: 800;
        white-space: nowrap;
    }

.trustliner-voucher-option > span {
        min-width: 0;
        overflow: hidden;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 650;
        letter-spacing: 0.025em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.trustliner-voucher-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding: 0.45rem 0;
    border: 0;
    color: var(--brand);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
}

.trustliner-voucher-toggle:hover {
        color: var(--brand-hover);
    }

.trustliner-voucher-toggle i {
        font-size: 0.75rem;
    }

@media (max-width: 1199.98px) {
.trustpoint-options {
        grid-template-columns: repeat(4, minmax(72px, 1fr));
    }
}

@media (max-width: 767.98px) {
.trustpoint-progress-panel {
        max-width: none;
        margin-bottom: 1.15rem;
    }

.trustpoint-progress-copy {
        flex-direction: column;
        gap: .15rem;
    }

.trustpoint-progress-copy strong {
            text-align: left;
        }

.trustpoint-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

.trustpoint-table,
    .trustpoint-table tbody,
    .trustpoint-table tr,
    .trustpoint-table th,
    .trustpoint-table td {
        display: block;
        width: 100% !important;
    }

.trustpoint-table thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            clip-path: inset(50%);
        }

.trustpoint-table tbody {
            display: grid;
            gap: .65rem;
        }

.trustpoint-table tbody tr {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: .75rem;
                padding: .85rem;
                border: 1px solid var(--easipoint-border);
                border-radius: 10px;
                background: #fff;
            }

.trustpoint-table > :not(caption) > * > * {
            padding: 0;
            border: 0;
        }

.trustpoint-table tbody td {
            width: auto !important;
            color: var(--muted);
            text-align: right;
        }

.trustpoint-table tbody td::before {
                content: attr(data-label);
                display: block;
                margin-bottom: .12rem;
                font-size: .58rem;
                font-weight: 800;
                letter-spacing: .05em;
                text-transform: uppercase;
            }

.trustpoint-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
.trustpoint-redeem-panel {
        padding: .85rem;
    }

.trustpoint-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.trustpoint-redeem-button {
        width: 100%;
    }
}

@media (max-width: 359.98px) {
.trustpoint-table tbody tr {
        grid-template-columns: 1fr;
    }

.trustpoint-table tbody td {
        text-align: left;
    }
}

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

@media (max-width: 767.98px) {
.trustliner-voucher-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
.trustliner-voucher-redemption .checkout-section-heading {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

.trustliner-voucher-redemption .checkout-section-icon {
        grid-column: 1;
        grid-row: 1;
    }

.trustliner-voucher-heading-copy {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0 !important;
    }

.trustliner-voucher-heading-copy h2 {
            font-size: 1.25rem;
            line-height: 1.3;
        }

.trustliner-voucher-heading-copy p {
            margin-top: 0.1rem;
            font-size: 0.82rem;
            line-height: 1.45;
        }

/* Move only the link below the heading content */
    .trustliner-voucher-heading-action {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        margin: 0 0 0;
        padding: 0;
    }

.trustliner-voucher-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

.trustliner-voucher-select,
    .trustliner-voucher-clear {
        width: auto;
    }

.trustliner-voucher-option {
        grid-template-columns: 20px auto minmax(0, 1fr);
        gap: 0.5rem;
    }

.trustliner-voucher-option strong {
            font-size: 0.75rem;
        }

.trustliner-voucher-option > span {
            font-size: 0.65rem;
        }
}

@media (max-width: 359.98px) {
.trustliner-voucher-option {
        grid-template-columns: 20px minmax(0, 1fr);
    }

.trustliner-voucher-option > span {
            grid-column: 2;
            white-space: normal;
            overflow-wrap: anywhere;
        }
}

/* 稿件徽标 badge-sm / badge-primary,只在兑换指引模态与 /recent-search 计数徽标两处作用域内生效。
   Bootstrap 5 的 .badge 默认白字无底色,不挂作用域的页面里这两个类名会让徽标不可见。 */
#recentSearchPage .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
}

#voucherRedemptionGuidelines .badge-sm,
#recentSearchPage .badge-sm {
    padding: 7px 11px;
    font-size: 0.82rem;
    font-weight: 750;
}

#voucherRedemptionGuidelines .badge-primary,
#recentSearchPage .badge-primary {
    color: var(--brand);
    background: var(--brand-soft);
}

/* 稿件 passenger-details.html / voucher.html 兑换指引模态的外框、列表、Reference 区与提示框(style.css),两页同一模态。 */
#voucherRedemptionGuidelines .modal-content {
    border: 1px solid rgba(197, 197, 197, .09);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(16, 24, 40, .22);
}

#voucherRedemptionGuidelines .list {
    padding-left: 1.2rem;
    color: var(--ink-2);
    font-size: .84rem;
    line-height: 1.75;
}

#voucherRedemptionGuidelines .list li {
    padding: .45rem 0;
}

#voucherRedemptionGuidelines .tnc {
    font-size: .84rem;
}

#voucherRedemptionGuidelines .alert {
    display: flex;
    gap: 14px;
    border-radius: 16px;
}

#voucherRedemptionGuidelines .alert i {
    font-size: 1.25rem;
}

#voucherRedemptionGuidelines .alert h4 {
    margin-bottom: 5px;
    font-size: .95rem;
}

#voucherRedemptionGuidelines .alert p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
}

#voucherRedemptionGuidelines .alert-primary {
    color: var(--ink-2);
    background-color: #faf9ff;
    border-color: #e6e1ff;
}

#voucherRedemptionGuidelines .alert-primary i {
    color: var(--brand);
}

/* 下单页 .form-text 说明小字与 Boarding QR 场站名字重(稿件 style.css 全局规则,这里收窄到下单页)。 */
.checkout-page .form-text {
    font-weight: 600;
    font-size: .8rem;
}

.checkout-choice-title {
    font-weight: 800;
}

/* 保险保单正文末尾的句号跟着条款链接显隐:没有链接时不留一个悬空的句号。 */
a[hidden] + .checkout-policy-period {
    display: none;
}

/* 内联登录面板的两个输入用 form= 关联到下单表单之外,但它们物理上仍是下单表单的后代,
   而 Bootstrap 的 .was-validated 校验样式是后代选择器:复核失败给表单加上 was-validated 之后,
   面板里空着的邮箱会被涂成绿色勾。它们不属于那次校验,这里把样式挡回去。 */
.was-validated #buyerLoginPanel .form-control:valid,
.was-validated #buyerLoginPanel .form-control:invalid {
    border-color: var(--bs-border-color);
    background-image: none;
    box-shadow: none;
}

/* 会员权益两块(TrustPoint / Voucher)在未登录时的引导态。稿件没有这一态——那份稿是按已登录画的,
   而这两块只对会员成立;沿用同区域既有的 checkout-privacy-note 视觉体系,不另起一套。 */
.checkout-benefit-signin {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem 1rem;
  border: 1px dashed #d8dee8;
  border-radius: .75rem;
  background: #faf9ff;
  color: var(--ink-2);
  font-size: .8rem;
  line-height: 1.6;
}

.checkout-benefit-signin > i {
  margin-top: .1rem;
  color: var(--brand);
  font-size: 1rem;
}

.checkout-benefit-signin .btn-link {
  font-size: .8rem;
  font-weight: 700;
}

/* 已结束内容的提示条(ADR-0084 决策 8)。用 danger 配色:顾客要在读条款之前就看见它。 */
.offer-ended-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #f0b3ae;
  border-left: 4px solid #b0241c;
  border-radius: 8px;
  background: #fbeceb;
  color: #7f1a14;
  font-size: 14px;
}

.offer-ended-notice i {
  font-size: 18px;
  line-height: 1;
}

.offer-ended-notice-link {
  margin-left: auto;
  font-weight: 600;
  color: #7f1a14;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   订单汇总单块打印(/payment/result 与 /my-bookings 结果页)
   ========================================================= */

/* order-summary-actions.js 点 Print 时给目标块打 data-os-print-target、给其祖先链打 data-os-print-path;
   每一层只留祖先链上的那个子元素,站点页头页脚、支付结果卡片与其他行程/Invoice 块都不进打印。 */
@media print {
    html[data-os-printing] [data-os-print-path] > :not([data-os-print-path]):not([data-os-print-target]) {
        display: none !important;
    }

    html[data-os-printing] [data-os-print-path] {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    html[data-os-printing] [data-print-hidden] {
        display: none !important;
    }
}

/* =========================================================
   My Bookings 页
   ========================================================= */

.my-booking-input-wrap {
    position: relative;
}

    .my-booking-input-wrap > i {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        color: var(--brand);
        font-size: 1.05rem;
        pointer-events: none;
    }

    .my-booking-input-wrap .form-control {
        min-height: 56px;
        padding: .75rem 48px .75rem 46px;
        border: 1px solid #d8dee8;
        border-radius: 12px;
        font-size: .9rem;
    }

        .my-booking-input-wrap .form-control:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 3px rgba(88, 63, 153, .14);
        }

.my-booking-info-button {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    color: var(--brand);
    background: transparent;
}

    .my-booking-info-button:hover,
    .my-booking-info-button:focus-visible {
        color: var(--brand-hover);
        background: rgba(88, 63, 153, .08);
        outline: none;
    }

.my-booking-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.my-booking-inline-link {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

    .my-booking-inline-link:hover,
    .my-booking-inline-link:focus-visible {
        color: var(--brand-hover);
        text-decoration: underline;
    }

.my-booking-accordion {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
}

    .my-booking-accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid var(--line);
    }

        .my-booking-accordion .accordion-item:last-child {
            border-bottom: 0;
        }

    .my-booking-accordion .accordion-button {
        min-height: 66px;
        padding: 18px 20px;
        color: var(--ink);
        background: #fff;
        font-size: .92rem;
        font-weight: 800;
        box-shadow: none;
    }

        .my-booking-accordion .accordion-button:not(.collapsed) {
            color: var(--brand);
            background: #faf9fd;
        }

        .my-booking-accordion .accordion-button:focus-visible {
            position: relative;
            z-index: 2;
            border-color: var(--brand);
            box-shadow: inset 0 0 0 2px rgba(88, 63, 153, .3);
        }

        .my-booking-accordion .accordion-button::after {
            width: 1rem;
            height: 1rem;
            background-size: 1rem;
        }

    .my-booking-accordion .accordion-body {
        padding: 0 20px 20px;
        color: var(--muted);
        font-size: .84rem;
        line-height: 1.7;
        background: #faf9fd;
    }

@media (max-width: 767.98px) {
    .my-booking-form-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .my-booking-accordion .accordion-button {
        min-height: 60px;
        padding: 16px;
        font-size: .86rem;
    }

    .my-booking-accordion .accordion-body {
        padding: 0 16px 18px;
    }
}
/* 支付渠道条:首页与 bus-tickets 页脚上方共用的静态展示。 */
.payment-trust-section {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.payment-trust-strip {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 126px;
    padding: 1.75rem 0;
}

.secure-checkout-label {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .8rem;
    color: var(--ink);
}

.secure-checkout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 2.55rem;
    line-height: 1;
}

.secure-checkout-title {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

    .secure-checkout-title strong {
        font-weight: 800;
    }

.payment-trust-divider {
    align-self: stretch;
    flex: 0 0 1px;
    width: 1px;
    background: var(--line);
}

.payment-channel-list {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payment-channel-item {
    display: flex;
    flex: 0 1 82px;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 46px;
    padding: .55rem .65rem;
    border: 1px solid #e7e9ef;
    border-radius: 10px;
    background: #fff;
}

    .payment-channel-item img {
        display: block;
        width: auto;
        max-width: 100%;
        height: 25px;
        max-height: 25px;
        object-fit: contain;
    }

@media (max-width: 991.98px) {
    .payment-trust-strip {
        flex-direction: column;
        gap: 1.25rem;
        min-height: 0;
        padding: 1.75rem 0 2rem;
    }

    .secure-checkout-label {
        justify-content: center;
    }

    .secure-checkout-title {
        flex-direction: row;
        gap: .3rem;
        font-size: 1.1rem;
    }

    .payment-trust-divider {
        align-self: auto;
        width: min(100%, 220px);
        height: 1px;
    }

    .payment-channel-list {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: .75rem;
    }

    .payment-channel-item {
        flex: 0 1 88px;
    }
}

@media (max-width: 575.98px) {
    .payment-trust-strip {
        padding: 1.5rem 0 1.75rem;
    }

    .secure-checkout-icon {
        font-size: 2.25rem;
    }

    .payment-channel-list {
        gap: .65rem;
    }

    .payment-channel-item {
        flex-basis: calc(33.333% - .45rem);
        max-width: 100px;
        height: 44px;
        padding: .5rem .6rem;
    }
}

@media (max-width: 359.98px) {
    .payment-channel-item {
        flex-basis: calc(50% - .35rem);
        max-width: 112px;
    }
}

/* My Bookings 查询失败提示:稿件全局 .alert 的 flex 排版与圆角收窄到本作用域,图标 1.25rem。 */
.my-booking-notice.alert { display: flex; align-items: center; gap: 14px; border-radius: 16px; }
.my-booking-notice.alert > i { flex: 0 0 auto; font-size: 1.25rem; }