/* Bus sun side (F553) — visual CTA: card, per-route pill, carrier nav item, mini coach.
   Markup: shared/bus_sun_side_cta.php. Cool = shade (teal), warm = sun (site orange).
   Themes: :root[data-theme="dark"] like the rest of the site. */
.nkd-bsc,.bss-page,.bc-ctx-nav__item--sun,.bsc-scope{
  --bsc-shade:#0E9F9A; --bsc-shade-2:#BFEAE6; --bsc-sun:#F59E0B; --bsc-sun-2:#FFE2B0;
  --bsc-ink:var(--n8-ink,#1A2530); --bsc-mut:var(--n8-mut,#5D6B77); --bsc-line:var(--n8-line,#D3DCE2);
  --bsc-surf:var(--n8-surface,#fff); --bsc-pri:var(--n8-primary,#0e2879); --bsc-pri-fg:var(--n8-primary-fg,#fff);
  --bsc-body:#F4F6F9; --bsc-body-st:#7D8C9B; --bsc-seat:#ffffff;
}
:root[data-theme="dark"] .nkd-bsc,:root[data-theme="dark"] .bss-page,:root[data-theme="dark"] .bc-ctx-nav__item--sun,:root[data-theme="dark"] .bsc-scope{
  --bsc-shade:#2CC7C0; --bsc-shade-2:#134A4A; --bsc-sun:#FFB020; --bsc-sun-2:#5A3E12;
  --bsc-body:#1A2430; --bsc-body-st:#5A6B7D; --bsc-seat:#2A3644;
}

/* ---- mini coach: one <symbol id="bsc-sym">, every icon a <use>; state via custom properties ---- */
.bsc-bus{display:block; overflow:visible;
  --bsc-hl:var(--bsc-body); --bsc-hr:var(--bsc-body); --bsc-sl:var(--bsc-seat); --bsc-sr:var(--bsc-seat);
  --bsc-sun-l:none; --bsc-sun-r:none; --bsc-of:1; --bsc-om:1; --bsc-ob:1; --bsc-anim:bsc-sweep; --bsc-ty:40px}
.bsc-bus[data-shade="left"]{--bsc-hl:var(--bsc-shade-2); --bsc-hr:var(--bsc-sun-2); --bsc-sl:var(--bsc-shade); --bsc-sr:var(--bsc-sun); --bsc-sun-r:inline}
.bsc-bus[data-shade="right"]{--bsc-hr:var(--bsc-shade-2); --bsc-hl:var(--bsc-sun-2); --bsc-sr:var(--bsc-shade); --bsc-sl:var(--bsc-sun); --bsc-sun-l:inline}
.bsc-bus[data-shade="any"]{--bsc-hl:var(--bsc-shade-2); --bsc-hr:var(--bsc-shade-2)}
.bsc-bus[data-zone="front"]{--bsc-om:.35; --bsc-ob:.35; --bsc-anim:none; --bsc-ty:24px}
.bsc-bus[data-zone="middle"]{--bsc-of:.35; --bsc-ob:.35; --bsc-anim:none; --bsc-ty:43px}
.bsc-bus[data-zone="back"]{--bsc-of:.35; --bsc-om:.35; --bsc-anim:none; --bsc-ty:62px}
.bsc-hl{fill:var(--bsc-hl)} .bsc-hr{fill:var(--bsc-hr)}
.bsc-body{fill:none; stroke:var(--bsc-body-st); stroke-width:1.6}
.bsc-glass{fill:var(--bsc-body-st); opacity:.45}
.bsc-aisle{fill:var(--bsc-body-st); opacity:.18}
.bsc-s{stroke:var(--bsc-body-st); stroke-width:.6}
.bsc-l{fill:var(--bsc-sl)} .bsc-r{fill:var(--bsc-sr)}
.bsc-l.bsc-zf,.bsc-r.bsc-zf{opacity:var(--bsc-of)} .bsc-l.bsc-zm,.bsc-r.bsc-zm{opacity:var(--bsc-om)} .bsc-l.bsc-zb,.bsc-r.bsc-zb{opacity:var(--bsc-ob)}
.bsc-sunc{fill:#FFC531; stroke:#E07B00; stroke-width:1}
.bsc-ray{stroke:#F59E0B; stroke-width:1.4; stroke-linecap:round; fill:none; animation:bsc-glow 1.6s ease-in-out infinite}
.bsc-sun-l{display:var(--bsc-sun-l)} .bsc-sun-r{display:var(--bsc-sun-r)}
.bsc-sweep{transform:translateY(var(--bsc-ty)); animation:var(--bsc-anim) 6s ease-in-out infinite}
@keyframes bsc-sweep{0%{transform:translateY(16px)}50%{transform:translateY(62px)}100%{transform:translateY(16px)}}
@keyframes bsc-glow{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .bsc-sweep,.bsc-ray{animation:none!important} }

/* ---- big card ---- */
a.nkd-bsc--card{display:flex; align-items:center; gap:14px; width:100%; min-height:88px; padding:12px 14px; box-sizing:border-box;
  border-radius:16px; border:1px solid var(--bsc-line); text-decoration:none!important; color:var(--bsc-ink)!important; background:var(--bsc-surf);
  background:linear-gradient(100deg,color-mix(in srgb,var(--bsc-shade) 14%,var(--bsc-surf)) 0%,var(--bsc-surf) 52%,color-mix(in srgb,var(--bsc-sun) 20%,var(--bsc-surf)) 100%);
  box-shadow:0 2px 10px rgba(16,30,42,.08); transition:transform .15s,box-shadow .15s,border-color .15s; position:relative; overflow:hidden; text-align:start}
a.nkd-bsc--card:hover,a.nkd-bsc--card:focus-visible{transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,30,42,.14); border-color:var(--bsc-shade)}
a.nkd-bsc--card:focus-visible{outline:3px solid var(--bsc-shade); outline-offset:2px}
.nkd-bsc__art{flex:0 0 auto; width:56px; height:70px; display:flex; align-items:center; justify-content:center;
  background:var(--bsc-surf); border-radius:12px; border:1px solid var(--bsc-line)}
.nkd-bsc__art .bsc-bus{width:50px; height:64px}
.nkd-bsc__txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.nkd-bsc__t{font-size:17px; font-weight:800; line-height:1.2}
.nkd-bsc__s{font-size:14px; line-height:1.35; color:var(--bsc-mut)}
.nkd-bsc__go{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px;
  background:var(--bsc-pri); color:var(--bsc-pri-fg); font-weight:700; font-size:14px; white-space:nowrap}
:root[data-theme="dark"] .nkd-bsc__go{background:var(--bsc-shade); color:#06201F}
[dir="rtl"] .nkd-bsc__go svg{transform:scaleX(-1)}
@media (max-width:520px){
  a.nkd-bsc--card{flex-wrap:wrap; gap:10px 12px}
  .nkd-bsc__txt{flex-basis:calc(100% - 72px)}
  .nkd-bsc__go{flex:1 1 100%; justify-content:center}
}
a.nkd-bsc--sm{min-height:64px; padding:8px 10px; gap:10px}
a.nkd-bsc--sm .nkd-bsc__art{width:40px; height:50px}
a.nkd-bsc--sm .nkd-bsc__art .bsc-bus{width:36px; height:46px}
a.nkd-bsc--sm .nkd-bsc__t{font-size:15px}
a.nkd-bsc--sm .nkd-bsc__go{min-height:44px; padding:0 12px}
@media (max-width:520px){ a.nkd-bsc--sm .nkd-bsc__txt{flex-basis:auto} a.nkd-bsc--sm .nkd-bsc__go{flex:0 0 auto} a.nkd-bsc--sm .nkd-bsc__gol{display:none} }

/* ---- per-route pill ---- */
a.nkd-bsc--pill{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:3px 12px 3px 6px; border-radius:999px; box-sizing:border-box;
  border:1.5px solid color-mix(in srgb,var(--bsc-shade) 55%,var(--bsc-line)); text-decoration:none!important; color:var(--bsc-ink)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bsc-shade) 14%,var(--bsc-surf)),color-mix(in srgb,var(--bsc-sun) 14%,var(--bsc-surf)));
  font-size:14px; font-weight:700; line-height:1.15; white-space:nowrap; vertical-align:middle; transition:border-color .15s,box-shadow .15s}
a.nkd-bsc--pill:hover,a.nkd-bsc--pill:focus-visible{border-color:var(--bsc-shade); box-shadow:0 2px 8px rgba(14,159,154,.25)}
a.nkd-bsc--pill .bsc-bus{width:24px; height:30px; flex:0 0 auto}
a.nkd-bsc--pill.is-loading .nkd-bsc__pt{opacity:.7}
a.nkd-bsc--pill.is-ready{border-color:var(--bsc-shade)}

/* ---- carrier page section nav item ---- */
.bc-ctx-nav__item--sun{display:inline-flex!important; align-items:center; gap:6px}
.bc-ctx-nav__item--sun .bsc-bus{width:16px; height:20px; flex:0 0 auto}

/* ---- coach map rows ---- */
.bsc-idx{margin-inline-start:8px}
