@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Noto+Sans+Devanagari:wght@300;400;500;600;700;800&display=swap');

:root {
  --sy-navy: #0b2533;
  --sy-navy-2: #123848;
  --sy-deep: #071a24;
  --sy-gold: #c19a4e;
  --sy-gold-2: #d9b972;
  --sy-cream: #f6f3ea;
  --sy-white: #ffffff;
  --sy-text: #16303d;
  --sy-muted: #758692;
  --sy-green: #45b67a;
  --sy-red: #d95656;
  --sy-purple: #7563d8;
  --sy-line: #dce4e7;
  --sy-shadow: 0 24px 70px rgba(7, 26, 36, .12);
  /* Bootstrap components (buttons, forms, cards, tables, modals, etc.) read
     this variable for their base font. Default here is English;
     html[lang="mr"] below overrides it to Noto Sans Devanagari. */
  --bs-body-font-family: 'Poppins', sans-serif;
  /* Extra breathing room added on top of .container's own gutter for the
     big hero/section wrappers below — grows with viewport instead of the
     flat ~12px Bootstrap's container gutter stays at on its own, so large
     headings don't sit right at the edge on tablet/desktop. */
  --sy-edge-pad: clamp(4px, 2vw, 32px);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: #f7f8f5;
  color: var(--sy-text);
  /* Comfortable line-height so Marathi matras (vowel marks above/below the
     base character) have room to render without touching adjacent lines. */
  line-height: 1.6;
}

/* ===== Locale-aware font system =====
   Poppins has no Devanagari glyphs at all, so under a single unconditional
   `font-family: 'Poppins', sans-serif` every Marathi character was silently
   falling back to whatever Devanagari font the visitor's OS happens to
   ship — inconsistent across systems, and several of them render the
   loanword vowel signs (the ॅ/ॉ marks used in transliterated words like
   व्हॉट्सॲप) badly, causing broken matras, overlapping glyphs or clipping.
   Noto Sans Devanagari is a proper Devanagari-native font pairing visually
   with Poppins, so it's loaded explicitly for html[lang="mr"] instead of
   ever reaching that fallback. Every element below that used to hard-code
   font-family: 'Poppins' now inherits instead, so this pair of rules is the
   single place the locale/font decision is made for the whole site —
   buttons, inputs, navigation, headings, cards, forms, tables and footer
   all pick it up through ordinary inheritance. */
html[lang="en"],
html[lang="en"] body {
  font-family: 'Poppins', sans-serif;
}

html[lang="mr"],
html[lang="mr"] body {
  font-family: 'Noto Sans Devanagari', sans-serif;
  --bs-body-font-family: 'Noto Sans Devanagari', sans-serif;
}

/* Native form controls don't inherit the body font in every browser's
   default UA stylesheet, so it's set explicitly per locale here. Font
   Awesome's own .fa/.fas/.far/.fab rules (loaded via its own stylesheet)
   take priority over this via specificity, so icon glyphs are unaffected. */
button,
input,
select,
textarea,
option {
  font-family: inherit;
}

html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] option {
  font-family: 'Poppins', sans-serif;
}

html[lang="mr"] button,
html[lang="mr"] input,
html[lang="mr"] select,
html[lang="mr"] textarea,
html[lang="mr"] option {
  font-family: 'Noto Sans Devanagari', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.display-title {
  font-family: inherit;
  letter-spacing: .01em;
  /* Long localized headings (route names, bus names) wrap at word
     boundaries instead of overflowing their container. */
  overflow-wrap: break-word;
}

a {
  text-decoration: none
}

img {
  max-width: 100%
}

.sy-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(7, 26, 36, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sy-header .navbar {
  min-height: 80px
}

.sy-header-phone {
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}

.sy-header-phone:hover {
  color: #c19a4e;
}

.sy-footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, .12);
  transition: transform .15s, box-shadow .15s;
}

.sy-footer-social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.sy-footer-social a.sy-social-whatsapp {
  background: #25d366;
}

.sy-footer-social a.sy-social-facebook {
  background: #1877f2;
}

.sy-footer-social a.sy-social-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Multi-column footer (public.php / member.php layouts) — brand+social,
   quick links, contact, laid out in three columns above the existing
   copyright bar (.footer-bottom, unchanged). */
.sy-footer {
  background: #071a24;
  color: #fff;
}

.sy-footer-tagline {
  font-size: .9rem;
  color: #fff;
  max-width: 320px;
  margin-bottom: 4px;
}

.sy-footer-about {
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  max-width: 340px;
  margin-bottom: 18px;
}

.sy-footer-heading {
  color: #c19a4e;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sy-footer-links a {
  color: #fff;
  font-size: .92rem;
  text-decoration: none;
  transition: color .15s;
}

.sy-footer-links a:hover {
  color: #c19a4e;
}

/* Floating Call / WhatsApp buttons — fixed to the bottom-left on every
   public/member page, stacked vertically. Left side deliberately, so they
   never collide with the PWA "Install App" prompt (bottom-right). */
.sy-float-contact {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sy-float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  transition: transform .15s;
}

.sy-float-btn:hover {
  color: #fff;
  transform: scale(1.08);
}

.sy-float-call {
  background: #0b2533;
}

.sy-float-whatsapp {
  background: #25D366;
}

@media (max-width: 480px) {
  .sy-float-contact {
    left: 14px;
    bottom: 14px;
    gap: 10px;
  }

  .sy-float-btn {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }
}

.sy-brand {
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.1;
}

.sy-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.sy-brand-name {
  font-size: 1em;
  font-weight: 800;
}

.sy-brand-tagline {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .65);
  text-align: center;
}

@media (max-width: 480px) {
  .sy-brand {
    font-size: 1.05rem;
  }

  .sy-brand-tagline {
    font-size: .64rem;
  }
}

.sy-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 4px 16px 4px 16px;
  display: grid;
  place-items: center;
  background: var(--sy-gold);
  color: var(--sy-deep);
  transform: rotate(-4deg);
}

.sy-brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
}

.sy-nav .nav-link {
  color: rgba(255, 255, 255, .76);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .75rem .85rem !important;
  position: relative;
}

.sy-nav .nav-link:after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .35rem;
  height: 2px;
  background: var(--sy-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: .25s;
}

.sy-nav .nav-link:hover,
.sy-nav .nav-link.active {
  color: #fff
}

.sy-nav .nav-link:hover:after,
.sy-nav .nav-link.active:after {
  transform: scaleX(1)
}

.sy-user-pill {
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 999px;
  padding: .55rem .85rem;
  font-size: .82rem;
  line-height: 1.2;
  background: rgba(255, 255, 255, .05);
  transition: .2s;
}

a.sy-user-pill:hover {
  color: var(--sy-gold);
  border-color: var(--sy-gold);
  background: rgba(255, 255, 255, .09);
}

.sy-btn {
  display: inline-block;
  border: 0;
  border-radius: 0 14px 0 14px;
  padding: .82rem 1.25rem;
  font-weight: 700;
  /* Keeps buttons compact under the site-wide body line-height (1.6, set
     for comfortable paragraph/Marathi reading) — a wider Marathi label
     still gets full breathing room from the padding, not extra line gap. */
  line-height: 1.2;
  transition: .25s;
}

.sy-btn-gold {
  position: relative;
  overflow: hidden;
  background: var(--sy-gold);
  color: #fff
}

.sy-btn-gold:hover {
  background: var(--sy-gold-2);
  color: #fff;
  transform: translateY(-2px)
}

/* Continuous white shine sweep across every gold CTA button, repeating on
   a loop (not just on hover) — matches dbstech.in's .shine-btn effect. */
.sy-btn-gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-25deg);
  animation: sy-btn-shine 2.2s infinite;
}

@keyframes sy-btn-shine {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-btn-gold::before {
    animation: none;
    display: none;
  }
}

.sy-btn-dark {
  background: var(--sy-navy);
  color: #fff
}

.sy-btn-dark:hover {
  background: var(--sy-deep);
  color: #fff;
  transform: translateY(-2px)
}

.sy-btn-outline {
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  background: transparent
}

.sy-btn-outline:hover {
  border-color: var(--sy-gold);
  color: var(--sy-gold)
}

/* Member header's name dropdown (click to reveal Profile / Logout) */
.sy-member-menu .dropdown-toggle {
  max-width: 220px;
}

.sy-member-menu .dropdown-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sy-member-menu .dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(8, 35, 48, .18);
  padding: 8px;
  min-width: 200px;
}

.sy-member-menu .dropdown-item {
  border-radius: 8px;
  padding: .55rem .75rem;
  font-weight: 600;
  color: var(--sy-navy);
}

.sy-member-menu .dropdown-item:hover,
.sy-member-menu .dropdown-item:focus {
  background: #faf3e2;
  color: var(--sy-gold);
}

.sy-hero {
  background:
    radial-gradient(circle at 88% 12%, rgba(193, 154, 78, .20), transparent 22%),
    linear-gradient(135deg, #071a24 0%, #0d2f3e 52%, #123848 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 7vw, 62px) 0 clamp(50px, 8vw, 70px);
}

.sy-hero:after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -140px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(255, 255, 255, .018), 0 0 0 116px rgba(255, 255, 255, .012);
}

.sy-kicker {
  display: inline-block;
  color: var(--sy-gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(193, 154, 78, .12);
  border-radius: 999px;
  padding: .3rem .85rem;
}

.sy-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  /* 1.05 (not the tighter .9 this used to be) keeps Devanagari matras from
     being clipped when Marathi headings wrap to 2-3 lines. */
  line-height: 1.12;
  font-weight: 800;
  max-width: 620px
}

.sy-hero p {
  color: rgba(255, 255, 255, .72);
  max-width: 620px
}

/* "Book Seat" page hero heading (public/search.php) only. Scoped under
   .sy-hero (rather than a bare class, which .sy-hero h1/p above would
   still win against on specificity) because .sy-hero is shared with the
   member dashboard hero, which has different, shorter text and wasn't
   part of this fix — the 3rem-5.8rem size there was fine, this page's
   longer sentence just needed to come down independently. */
.sy-hero .booking-hero-title {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.18;
  max-width: 620px;
  margin: 0;
  font-size: clamp(30px, 2.6vw, 40px);
}

@media (max-width: 1199.98px) {
  .sy-hero .booking-hero-title {
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.2;
  }
}

@media (max-width: 767.98px) {
  .sy-hero .booking-hero-title {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.22;
  }
}

@media (max-width: 374.98px) {
  .sy-hero .booking-hero-title {
    font-size: 21px;
    line-height: 1.25;
  }
}

.sy-hero .booking-hero-subtitle {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
}

.sy-route-card {
  background: #fff;
  color: var(--sy-text);
  border-radius: 0 28px 0 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
  padding: 24px;
  position: relative;
  z-index: 2;
}

.sy-route-card .route-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sy-muted);
  font-weight: 700
}

.sy-route-stop {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.sy-route-stop > div:last-child {
  /* Lets long localized place names wrap/shrink instead of pushing the
     route icon column wider (flex items don't shrink below their content's
     width by default). */
  min-width: 0;
  overflow-wrap: break-word;
}

.sy-route-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef3f2;
  color: var(--sy-navy);
  flex: 0 0 42px;
}

.sy-route-icon.end {
  background: var(--sy-gold);
  color: var(--sy-deep)
}

.sy-route-line {
  height: 28px;
  border-left: 1px dashed #9fb1b7;
  margin-left: 21px;
}

.sy-section {
  padding: clamp(38px, 6vw, 54px) 0
}

.sy-section-title {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1
}

.sy-section-sub {
  color: var(--sy-muted)
}

/* Bus-listing "Recommended Buses" date heading (search.php / dashboard.php).
   Split out from .sy-section-title because the localized date string is
   wider in Marathi and needs its own, more gradual mobile scale-down —
   .sy-section-title is shared with unrelated headings that don't. */
#recommendedBuses {
  /* .sy-section's own top padding wasn't enough breathing room above this
     specific header block — scoped here via the existing id (identical
     markup in search.php and dashboard.php) rather than raising
     .sy-section's padding globally, which would affect unrelated sections
     that didn't ask for extra top space. */
  margin-top: clamp(30px, 6vw, 78px);
}

.recommended-label {
  font-size: clamp(.875rem, 2vw, 1.25rem);
  line-height: 1.4;
  margin-bottom: clamp(8px, 1vw, 14px);
}

.date-heading {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  /* Desktop ceiling (3.4rem) matches the previous shared size exactly —
     only the smaller-screen scaling below is new. */
  font-size: clamp(2.75rem, 4.5vw, 3.4rem);
}

@media (max-width: 767.98px) {
  .date-heading {
    font-size: clamp(2.1rem, 6vw, 2.75rem);
    line-height: 1.18;
  }
}

@media (max-width: 375.98px) {
  .date-heading {
    /* Fixed rather than clamped: at this width vw-based scaling has too
       little room to work with, so a single tuned value is more
       predictable. Comfortably fits the longest Marathi month name
       ("सप्टेंबर") without wrapping mid-word; if the full string doesn't
       fit on one line it wraps naturally, e.g. "०१ सप्टेंबर" / "२०२६". */
    font-size: 1.85rem;
    line-height: 1.22;
  }
}

.sy-card {
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 0 24px 0 24px;
  box-shadow: 0 14px 40px rgba(8, 35, 48, .06);
}

.route-card-title {
  font-size: clamp(22px, 2vw, 20px);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 10px;
}

@media (max-width: 576px) {
  .route-card-title {
    font-size: 20px;
    line-height: 1.25;
  }
}

.sy-card-dark {
  background: var(--sy-navy);
  color: #fff;
  border-radius: 0 24px 0 24px;
  box-shadow: var(--sy-shadow);
}

.sy-card-accent {
  background: var(--sy-gold);
  color: var(--sy-deep);
  border-radius: 0 24px 0 24px;
}

.sy-stat {
  padding: 22px;
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}

.sy-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(8, 35, 48, .10);
}

.sy-stat .num {
  font-family: inherit;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.15;
  margin-top: 2px;
}

.sy-stat .label {
  color: var(--sy-muted);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.sy-stat i {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(8, 35, 48, .06);
  font-size: 1.05rem;
  opacity: 1;
  color: var(--sy-deep);
}

.sy-notice {
  background: #fff;
  border-left: 4px solid var(--sy-gold);
  padding: 20px 22px;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 12px 30px rgba(8, 35, 48, .05)
}

.sy-book-panel {
  background: linear-gradient(145deg, #0a202c, #123848);
  color: #fff;
  border-radius: 0 30px 0 30px;
  padding: 28px;
}

.sy-form .form-control,
.sy-form .form-select {
  min-height: 50px;
  border-radius: 0 12px 0 12px;
  border-color: #dce4e6;
  box-shadow: none;
}

.sy-form .form-control:focus,
.sy-form .form-select:focus {
  border-color: var(--sy-gold);
  box-shadow: 0 0 0 .2rem rgba(193, 154, 78, .15)
}

.sy-page-hero {
  background: linear-gradient(135deg, #071a24, #123848);
  color: #fff;
  padding: clamp(32px, 6vw, 42px) 0 clamp(36px, 6vw, 48px);
  position: relative;
  overflow: hidden;
}

.sy-page-hero:after {
  content: "";
  position: absolute;
  /* Same 220px ceiling as before (desktop unchanged) but shrinks on
     smaller screens so it doesn't crowd the heading text next to it. */
  width: clamp(120px, 18vw, 220px);
  height: clamp(120px, 18vw, 220px);
  border: 50px solid rgba(193, 154, 78, .08);
  border-radius: 50%;
  right: 6%;
  top: -90px;
}

@media (max-width: 576px) {
  .sy-page-hero:after {
    opacity: .5;
    transform: scale(.7);
  }
}

/* .sy-hero / .sy-page-hero / .sy-section all only had vertical padding of
   their own, relying entirely on the nested .container's flat ~12px
   gutter for horizontal inset — fine on mobile, but it left headings
   sitting noticeably close to the edge on tablet/desktop. This adds the
   extra growing inset on top of that gutter, shared across every page
   that uses one of these three wrappers instead of a one-off per page. */
.sy-hero,
.sy-page-hero,
.sy-section {
  padding-inline: var(--sy-edge-pad);
}

/* Shared "interior page hero" heading/subtitle — used by every .sy-page-hero
   section (profile, checkout, seats, pass details, my bookings, notices,
   help, reviews, car registration, ...) in place of Bootstrap's fixed-size
   .display-3, which never scaled down for smaller screens at all. */
.sy-page-hero-title {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  max-width: 100%;
  margin: 0;
  /* Ceiling (4rem/64px) matches the previous fixed .display-3 size exactly
     — desktop looks the same as before, only the mobile/tablet scale-down
     is new. */
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

@media (max-width: 767.98px) {
  .sy-page-hero-title {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -.015em;
  }
}

.sy-page-hero-subtitle {
  font-family: inherit;
  font-size: clamp(.95rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  margin-top: clamp(10px, 1.5vw, 18px);
  margin-bottom: 0;
  max-width: 700px;
}

/* Negative letter-spacing suits bold Latin headings but compresses
   Devanagari conjuncts/matras, so it's switched off for these two large
   headings specifically when Marathi is selected. */
html[lang="mr"] .sy-page-hero-title,
html[lang="mr"] .date-heading {
  letter-spacing: normal;
}

.sy-breadcrumb {
  color: rgba(255, 255, 255, .6);
  font-size: .83rem
}

.sy-breadcrumb span {
  color: var(--sy-gold)
}

.sy-seat-shell {
  background: #fff;
  border-radius: 0 28px 0 28px;
  border: 1px solid #e7ecec;
  box-shadow: var(--sy-shadow);
  padding: 24px
}

.sy-bus-head {
  background: var(--sy-navy);
  color: #fff;
  border-radius: 0 18px 0 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.sy-seat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 12px;
  max-width: 620px;
  margin: auto;
  /* Safety net only — the column minimums above are tuned so this never
     actually engages on supported phone widths, but if a seat count ever
     needs more room than the viewport has, only this grid scrolls
     horizontally, never the whole page. */
  overflow-x: auto;
}

/* ===== Coach seat map (public/seats.php) =====
   A visual bus body: driver cabin at the top, a 6-column deck (2 seats +
   aisle + 3 seats per row) and a full-width rear bench, matching the
   physical 50-seater. */
.sy-bus {
  max-width: 360px;
  margin: 0 auto;
  background: linear-gradient(#ffffff, #f7f9f9);
  border: 2px solid var(--sy-line);
  border-radius: 26px 26px 20px 20px;
  padding: 14px;
  box-shadow: inset 0 0 0 4px #fff, 0 18px 40px rgba(7, 26, 36, .10);
}

.sy-bus-cabin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 12px;
  border-bottom: 2px dashed var(--sy-line);
  margin-bottom: 14px;
}

.sy-bus-cabin-rear {
  border-bottom: 0;
  border-top: 2px dashed var(--sy-line);
  margin-bottom: 0;
  margin-top: 14px;
  padding: 12px 4px 4px;
  justify-content: center;
}

.sy-bus-front {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sy-muted);
}

.sy-bus-wheel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px 8px 10px 10px;
  background: var(--sy-navy);
  color: var(--sy-gold);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sy-bus-deck {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sy-bus-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.sy-bus-aisle,
.sy-bus-gap {
  /* empty spacer cells — the aisle and the front-door gap */
}

.sy-bus .seat {
  min-height: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 10px 10px 8px 8px;
  font-size: .8rem;
  padding: 0;
}

.sy-bus .seat .seat-label {
  position: relative;
  z-index: 1;
}

/* headrest nub */
.sy-bus .seat:after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 6px;
  border-radius: 6px 6px 0 0;
  background: #d3dcde;
}

.sy-bus .seat.selected:after {
  background: var(--sy-gold);
}

.sy-bus .seat.booked:after {
  background: #efcaca;
}

.sy-bus .seat.reserved:after {
  background: #d8cef4;
}

.sy-bus .seat.blocked:after {
  background: #d8e0e2;
}

@media (max-width: 400px) {
  .sy-bus {
    max-width: 100%;
  }

  .sy-bus .seat {
    font-size: .72rem;
  }
}

.sy-seat-grid .aisle {
  visibility: hidden
}

.seat {
  min-height: 52px;
  border-radius: 8px 8px 16px 16px;
  border: 1px solid #cfdadc;
  background: #fff;
  color: var(--sy-navy);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: .2s;
  cursor: pointer;
}

.seat:before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 5px;
  border-radius: 999px;
  background: #e9eff0;
}

.seat:hover:not(:disabled) {
  border-color: var(--sy-gold);
  transform: translateY(-2px)
}

.seat.selected {
  background: var(--sy-gold);
  border-color: var(--sy-gold);
  color: var(--sy-deep)
}

.seat.selected:before {
  background: rgba(7, 26, 36, .28)
}

.seat.booked,
.seat:disabled.booked {
  background: #f7e2e2;
  border-color: #efcaca;
  color: #a33b3b;
  cursor: not-allowed
}

.seat.reserved,
.seat:disabled.reserved {
  background: #ece8fb;
  border-color: #d8cef4;
  color: #6351a6;
  cursor: not-allowed
}

.seat.blocked,
.seat:disabled.blocked {
  background: #e8edee;
  border-color: #d8e0e2;
  color: #86959b;
  cursor: not-allowed
}

.sy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .78rem;
  color: var(--sy-muted)
}

.sy-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 6px
}

.sy-dot.a {
  border: 1px solid #cfdadc;
  background: #fff
}

.sy-dot.s {
  background: var(--sy-gold)
}

.sy-dot.b {
  background: #f0c7c7
}

.sy-dot.r {
  background: #d8cef4
}

.sy-dot.x {
  background: #d8e0e2
}

.sy-summary {
  position: sticky;
  top: 100px;
  background: var(--sy-navy);
  color: #fff;
  border-radius: 0 26px 0 26px;
  padding: 26px;
  box-shadow: var(--sy-shadow);
}

.sy-summary .muted {
  color: rgba(255, 255, 255, .56);
  font-size: .78rem
}

.sy-seat-number {
  font-family: inherit;
  font-size: 3.8rem;
  font-weight: 800;
  color: var(--sy-gold);
  line-height: 1.1
}

.sy-booking-item {
  background: #fff;
  border: 1px solid #e6ecec;
  border-radius: 0 20px 0 20px;
  padding: 22px;
  transition: .2s;
  box-shadow: 0 10px 30px rgba(8, 35, 48, .04)
}

.sy-booking-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(8, 35, 48, .08)
}

/* Receipt-style ticket, rendered off-screen and only ever captured as an
   image by the "Share Receipt" button (html2canvas) — never shown on the
   page itself, so its layout/width is fixed rather than responsive. */
.sy-receipt-card {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 380px;
  background: #fff;
  border: 2px solid var(--sy-navy);
  border-radius: 14px;
  padding: 22px 24px;
  font-family: inherit;
}

.sy-receipt-header {
  text-align: center;
  border-bottom: 2px dashed #d8dede;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.sy-receipt-logo {
  display: block;
  margin: 0 auto 8px;
  border-radius: 8px;
}

.sy-receipt-brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--sy-navy);
}

.sy-receipt-title {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #c19a4e;
  font-weight: 700;
  margin-top: 2px;
}

.sy-receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
  color: var(--sy-muted);
  padding: 6px 0;
  border-bottom: 1px solid #f0f3f3;
}

.sy-receipt-row b {
  color: var(--sy-navy);
  text-align: right;
}

.sy-receipt-footer {
  text-align: center;
  font-size: .75rem;
  color: var(--sy-muted);
  margin-top: 14px;
}

.sy-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2
}

.sy-status.confirmed {
  background: #e5f5ec;
  color: #29704b
}

.sy-status.cancelled {
  background: #f7e5e5;
  color: #9e3c3c
}

.sy-status.completed {
  background: #edf0f1;
  color: #596b73
}

/* Pass renewal request statuses — pending reuses the site's own gold/amber
   accent (already used for kickers) rather than a new color; rejected
   reuses the same red as .cancelled since both mean "did not go through". */
.sy-status.pending {
  background: #fdf3e3;
  color: #927a22
}

.sy-status.rejected {
  background: #f7e5e5;
  color: #9e3c3c
}

.sy-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.sy-btn:disabled:hover {
  transform: none;
}

/* Schedule Type badge (Morning/Evening/Night) — same pill shape/size as
   .sy-status, reusing the brand's own gold/navy palette instead of new
   colors so it reads as part of the same badge family. */
.sy-schedule {
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sy-schedule.morning {
  background: rgba(193, 154, 78, .22);
  color: #927a22
}

.sy-schedule.evening {
  background: rgba(11, 37, 51, .1);
  color: var(--sy-navy)
}

.sy-schedule.night {
  background: rgba(11, 37, 51, .2);
  color: var(--sy-navy-2)
}

.sy-login {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(7, 26, 36, .96) 0%, rgba(7, 26, 36, .88) 48%, rgba(7, 26, 36, .64) 100%),
    url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?auto=format&fit=crop&w=1800&q=85') center/cover;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 50px 0;
}

.sy-login-brand {
  font-size: clamp(1.15rem, 3.5vw, 1.6rem);
  font-weight: 800;
  color: #fff
}

.sy-login-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.12
}

.sy-login-box {
  background: #fff;
  color: var(--sy-text);
  border-radius: 0 32px 0 32px;
  padding: 34px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
}

.sy-login-box .form-control {
  min-height: 54px;
  border-radius: 0 12px 0 12px
}

.sy-pass {
  background:
    radial-gradient(circle at 92% 15%, rgba(193, 154, 78, .28), transparent 18%),
    linear-gradient(135deg, #071a24, #123848);
  color: #fff;
  border-radius: 0 30px 0 30px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.sy-pass:after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 180px;
  height: 180px;
  border: 28px solid rgba(255, 255, 255, .05);
  border-radius: 50%
}

.sy-empty {
  padding: 48px;
  text-align: center;
  background: #fff;
  border: 1px dashed #cad6d9;
  border-radius: 0 22px 0 22px;
  color: var(--sy-muted)
}

@media(max-width:1199.98px) {
  /* Matches navbar-expand-xl below (public header, #publicNav) — the
     collapsed-menu background/padding must switch at the same width the
     navbar itself actually collapses at. */
  .sy-header .navbar-collapse {
    background: var(--sy-deep);
    padding: 16px;
    margin-top: 10px
  }
}

/* The member header (#memberNav) collapses at navbar-expand-xxl (1400px)
   instead of xl — it carries more content than the public header (6 nav
   links plus a profile pill, language switcher and logout, versus the
   public header's shorter nav and single account button), so it needs
   the extra room before going inline or the row wraps/crowds. This
   extends the same collapsed-menu treatment above through the 1200-1399px
   gap that the public header doesn't need (it's already inline there). */
@media(max-width:1399.98px) {
  .sy-header #memberNav {
    background: var(--sy-deep);
    padding: 16px;
    margin-top: 10px
  }

  #memberNav .header-actions {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 12px;
    padding-top: 14px;
  }
}

/* Keeps two-word nav labels ("Book Seat", "My Bookings") from wrapping
   onto a second line when the expanded navbar is inline — safe because
   both headers only go inline once there's enough room (see the xl/xxl
   breakpoints above and on the member navbar itself). */
.sy-nav .nav-link {
  white-space: nowrap;
}

@media(max-width:991.98px) {
  .sy-summary {
    position: static
  }
}

@media(max-width:767.98px) {
  .sy-header .navbar {
    min-height: 68px
  }

  /* .sy-hero padding/font-size and .sy-login-title font-size already
     scale fluidly via clamp() on their base rules above — no fixed
     mobile override needed here. */

  .sy-seat-shell {
    padding: 16px
  }

  .sy-seat-grid {
    gap: 6px
  }

  .seat {
    min-height: 46px
  }

  .sy-login {
    background: linear-gradient(135deg, #071a24, #123848)
  }
}

@media(max-width:359.98px) {
  /* Guarantees the 5-column seat grid (4 seats + 1 aisle marker) never
     needs more room than the narrowest supported phones actually have,
     so the page itself never gains a horizontal scrollbar. */
  .sy-seat-shell {
    padding: 10px
  }

  .sy-seat-grid {
    grid-template-columns: repeat(5, minmax(38px, 1fr));
    gap: 4px
  }

  .seat {
    min-height: 42px;
    font-size: .9rem
  }
}


/* ===== English / Marathi language switch ===== */
.language-switcher {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  gap: 2px
}

.lang-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.2;
  transition: .2s
}

.lang-btn.active {
  background: var(--sy-gold);
  color: var(--sy-deep)
}

.lang-btn:hover {
  color: #fff
}

.sy-login .language-switcher {
  position: absolute;
  right: 24px;
  top: 22px;
  z-index: 5
}

.sy-login .lang-btn.active {
  background: var(--sy-gold)
}

.admin-lang-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #eef1ee;
  border-radius: 999px
}

.admin-lang-switch .lang-btn {
  color: #50616a
}

.admin-lang-switch .lang-btn.active {
  background: #c19a4e;
  color: #071a24
}

@media(max-width:1199.98px) {
  /* Matches navbar-expand-xl — once the nav collapses, the switcher sits
     inline in the stacked menu instead of the end of a horizontal row. */
  .language-switcher {
    margin: 8px 0
  }
}

@media(max-width:991.98px) {
  .sy-login .language-switcher {
    right: 12px;
    top: 12px
  }
}

/* ADMIN PANEL - COMPLETE RESPONSIVE FIX */
.admin-body {
  --admin-sidebar-width: 270px;
  background: #f5f7f6;
  min-height: 100vh
}

/* Sidebar is a flex column with exactly 3 stretches: a fixed brand header,
   a nav list that's the only part allowed to scroll, and a fixed
   language/logout footer — so on a short viewport with many nav items
   (Dashboard...Settings) the brand and Logout stay reachable/visible
   instead of the whole sidebar (brand included) scrolling as one block. */
.sidebar {
  width: var(--admin-sidebar-width);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, #071a24, #0b2533);
  padding: 24px 18px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 30px rgba(7, 26, 36, .08)
}

.sidebar-top,
.sidebar-bottom {
  flex: 0 0 auto;
}

/* "View Website" — lives once in the sidebar header (same spot on every
   admin page) rather than being injected per-page, so it never has to
   guess at a page's own title/actions layout (some pages, like Dashboard,
   have neither). */
.sidebar-view-site {
  display: inline-flex;
  align-items: center;
  margin: 10px 12px 0;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(193, 154, 78, .12);
  color: #c19a4e;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: .2s;
}

.sidebar-view-site:hover {
  background: rgba(193, 154, 78, .22);
  color: #d8b56a;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  /* Bootstrap's .nav sets flex-wrap:wrap; combined with .flex-column that
     turns a too-tall item list into a hidden 2nd column (clipped by
     overflow-x:hidden) instead of scrolling — nowrap forces a single
     column so overflow-y:auto is what handles the extra items. */
  flex-wrap: nowrap;
}

.sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 10px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar .brand {
  color: #fff !important;
  font-size: 1.0rem;
  font-weight: 800;
  margin-bottom: 30px !important;
  display: block
}

.sidebar .dot {
  color: #c19a4e
}

.sidebar .small {
  color: rgba(255, 255, 255, .45) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px
}

.sidebar .nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  color: #fff !important;
  padding: 13px 15px;
  margin-bottom: 6px;
  border-radius: 0 14px 0 14px;
  font-size: 14px;
  font-weight: 600;
  transition: .25s
}

.sidebar .nav-link i {
  width: 22px;
  margin-right: 10px;
  color: #c19a4e
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: #c19a4e;
  color: #071a24 !important;
  transform: translateX(4px)
}

.sidebar .nav-link:hover i,
.sidebar .nav-link.active i {
  color: #071a24
}

.sidebar hr {
  border-color: rgba(255, 255, 255, .12);
  margin: 22px 0
}

/* width is explicit — calc(100% - sidebar) — rather than relying on plain
   block auto-width to implicitly work out the same number. Both are
   mathematically identical, but being explicit means this can never
   silently regress if something else on the page later constrains
   .admin-main's box (e.g. a flex/grid ancestor where auto no longer means
   "fill remaining space"). Never combine width:100% with margin-left here
   without the calc() — that literal combination overflows the viewport by
   a full sidebar-width and reintroduces the body-wide horizontal scrollbar. */
.admin-main {
  margin-left: var(--admin-sidebar-width);
  width: calc(100% - var(--admin-sidebar-width));
  min-width: 0;
  min-height: 100vh;
  padding: clamp(20px, 2.5vw, 32px);
  background: #f5f7f6
}

/* Every table/card/filter-bar inside is a plain block element, so it
   already fills .admin-main's content width on its own — these just make
   that explicit/defensive rather than relying on it implicitly. */
.admin-main .table-card,
.admin-main .admin-filter-bar {
  width: 100%;
  min-width: 0;
}

.admin-main .page-title {
  font-size: clamp(28px, 4vw, 28px);
  line-height: 1.15;
  font-weight: 800;
  color: #0b2533;
  margin-bottom: 24px
}

/* Responsive page header toolbar — title on the left, an actions cluster
   (Add X, and the JS-injected Export CSV button) grouped together on the
   right. Previously the Export CSV button was appended as a 3rd sibling
   next to the title and the "Add X" button inside one space-between row,
   which spread all three apart instead of keeping the two buttons
   together — .admin-page-actions is that grouping wrapper. */
.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.admin-page-header .page-title {
  margin-bottom: 0;
}

.admin-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .admin-page-actions {
    width: 100%;
  }

  .admin-page-actions > * {
    flex: 1 1 auto;
  }
}

/* Per-row Edit/Status/Delete (and similar) action buttons — wraps neatly
   instead of overlapping/clipping in a narrow table cell or mobile card. */
.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-main .stat-card {
  border: none;
  border-radius: 0 22px 0 22px;
  box-shadow: 0 12px 35px rgba(7, 26, 36, .06);
  background: #fff
}

.table-card {
  background: #fff;
  border-radius: 0 22px 0 22px;
  overflow: hidden;
  border: 1px solid #e7ecec;
  box-shadow: 0 12px 35px rgba(7, 26, 36, .05)
}

.table-card .table-responsive {
  width: 100%;
}

.table-card .table {
  width: 100%;
}

/* Trips list — desktop-only column proportions so Route (the one column
   with genuinely variable-length content, e.g. "Karanjade → GST Bhavan,
   Mazgaon") gets the extra width instead of it sitting unused after the
   narrower fixed-format columns (date/time/fare/status are all short,
   predictable strings). table-layout:fixed only has any effect while the
   table actually renders as a table — .table-stack's mobile breakpoint
   below switches everything to display:block, which ignores table-layout
   entirely, so this never fights the mobile card view. Route text still
   wraps normally (never break-all) if a name doesn't fit on one line. */
@media (min-width: 768px) {
  .trips-table {
    table-layout: fixed;
  }

  .trips-table th:nth-child(1), .trips-table td:nth-child(1) { width: 4%; }
  .trips-table th:nth-child(2), .trips-table td:nth-child(2) { width: 9%; }
  .trips-table th:nth-child(3), .trips-table td:nth-child(3) { width: 7%; }
  .trips-table th:nth-child(4), .trips-table td:nth-child(4) { width: 24%; overflow-wrap: break-word; }
  .trips-table th:nth-child(5), .trips-table td:nth-child(5) { width: 8%; }
  .trips-table th:nth-child(6), .trips-table td:nth-child(6) { width: 8%; }
  .trips-table th:nth-child(7), .trips-table td:nth-child(7) { width: 7%; }
  .trips-table th:nth-child(8), .trips-table td:nth-child(8) { width: 13%; overflow-wrap: break-word; }
  .trips-table th:nth-child(9), .trips-table td:nth-child(9) { width: 7%; }
  .trips-table th:nth-child(10), .trips-table td:nth-child(10) { width: 13%; }
}

/* Members list — desktop-only column proportions so Name/Pickup Point (the
   two variable-length text columns) take the extra width instead of it
   sitting unused after the narrower fixed-format columns (ID/Status are
   short, predictable strings; Action is a fixed cluster of 3 buttons). */
@media (min-width: 768px) {
  .members-table {
    table-layout: fixed;
  }

  .members-table th:nth-child(1), .members-table td:nth-child(1) { width: 10%; }
  .members-table th:nth-child(2), .members-table td:nth-child(2) { width: 20%; overflow-wrap: break-word; }
  .members-table th:nth-child(3), .members-table td:nth-child(3) { width: 15%; }
  .members-table th:nth-child(4), .members-table td:nth-child(4) { width: 25%; overflow-wrap: break-word; }
  .members-table th:nth-child(5), .members-table td:nth-child(5) { width: 10%; }
  .members-table th:nth-child(6), .members-table td:nth-child(6) { width: 20%; }
}

/* Search/filter toolbar shown above every admin listing table — same card
   language as .table-card (radius, border, shadow) so it reads as one
   connected unit rather than a new UI element. Field/button layout itself
   comes from each form's own Bootstrap .row/.col-* classes (already
   responsive — they stack below their breakpoint on their own), so this
   only styles the shared card chrome, not a duplicate grid system. */
.admin-filter-bar {
  background: #fff;
  border-radius: 0 22px 0 22px;
  border: 1px solid #e7ecec;
  box-shadow: 0 12px 35px rgba(7, 26, 36, .05);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.admin-filter-bar .form-label {
  font-size: .78rem;
  font-weight: 600;
  color: #6b7c85;
  margin-bottom: 4px;
}

.admin-filter-bar .form-control,
.admin-filter-bar .form-select {
  width: 100%;
  min-width: 0;
}

/* Cross-browser 12-hour Hour/Minute/AM-PM time picker (Add/Edit Trip) — the
   3 selects are plain .form-select, so they already match every other
   dropdown on the form; this only keeps them compact and non-overflowing
   instead of each stretching to the column's full width. */
.sy-time-picker {
  flex-wrap: nowrap;
}

.sy-time-picker .form-select {
  flex: 1 1 0;
  min-width: 64px;
  padding-left: 8px;
  padding-right: 24px;
}

@media(max-width:420px) {
  .sy-time-picker .form-select {
    min-width: 0;
    padding-left: 6px;
    padding-right: 20px;
  }
}

@media(max-width:767.98px) {
  .admin-filter-bar {
    padding: 14px;
  }
}

.table-card .table thead th {
  background: #0b2533;
  color: #fff;
  border: 0;
  padding: 15px
}

.table-card .table tbody td {
  padding: 14px 15px;
  vertical-align: middle
}

.admin-mobile-header {
  display: none
}

.admin-overlay {
  display: none
}

@media(max-width:991.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease
  }

  .sidebar.show {
    transform: translateX(0)
  }

  .admin-main {
    margin-left: 0;
    /* Sidebar is off-canvas below this breakpoint, so the width calc()
       above (100% minus sidebar) must reset to the full viewport width —
       otherwise this leaves exactly the sidebar's width as blank space on
       the right, the same "not using full width" bug this fixes for desktop. */
    width: 100%;
    padding: 80px clamp(14px, 4vw, 20px) 20px
  }

  .admin-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #071a24;
    padding: 0 16px;
    z-index: 1040
  }

  .mobile-brand {
    color: #fff;
    font-size: 22px;
    font-weight: 800
  }

  .admin-menu-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 0 12px 0 12px;
    background: #c19a4e;
    color: #071a24
  }

  .admin-overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1045
  }
}

@media(max-width:767.98px) {
  .admin-main {
    padding: 78px clamp(12px, 4vw, 16px) 20px
  }

  .table-responsive {
    overflow-x: auto
  }

  .table-card table {
    min-width: 700px
  }
}

/* Opt-in "table row -> mobile card" pattern (Home Page acceptance's
   preferred Option B), for tables whose view also adds
   data-label="Column Name" to every <td> — that data-label becomes the
   visible field name once the real <thead> is hidden. One centralized
   rule here rather than a bespoke media query per admin view (see Members
   for the reference implementation). The last cell is treated as the
   actions cell (buttons, not a single value) and laid out differently. */
@media (max-width: 767.98px) {
  .table-card.table-stack .table-responsive {
    overflow-x: visible;
  }

  .table-card.table-stack table,
  .table-card.table-stack thead,
  .table-card.table-stack tbody,
  .table-card.table-stack tr,
  .table-card.table-stack td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .table-card.table-stack thead {
    display: none;
  }

  .table-card.table-stack tbody tr {
    padding: 12px 15px;
    border-bottom: 8px solid #f5f7f6;
  }

  .table-card.table-stack tbody tr:last-child {
    border-bottom: 0;
  }

  .table-card.table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }

  .table-card.table-stack td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: #6b7c85;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: left;
    flex: 0 0 auto;
  }

  .table-card.table-stack td:last-child {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 10px;
  }

  .table-card.table-stack td:last-child::before {
    display: none;
  }

  /* The "no matching records" row is one wide colspan cell, not a
     field/value pair — center it instead of the default label/value split. */
  .table-card.table-stack td[colspan] {
    justify-content: center;
    text-align: center;
  }

  /* Opt-in per-cell override for longer free text (a review's feedback, an
     activity log description, vehicle details, a member note) — the default
     label-left/value-right row reads badly once the value wraps to several
     lines, so this stacks label-above/value-below and left-aligns instead. */
  .table-card.table-stack td.td-block {
    display: block;
    text-align: left;
  }

  .table-card.table-stack td.td-block::before {
    display: block;
    margin-bottom: 4px;
  }
}

/* Defensive sizing for the future — this project has no Bootstrap modals
   today, but any that get added should never exceed the viewport. */
.modal-dialog {
  width: calc(100% - 32px);
  margin: 16px auto;
}


/* ===== Advanced browse-first bus booking flow ===== */
.bms-flow-hero {
  padding-top: 72px;
  padding-bottom: 84px
}

@media (max-width: 575.98px) {
  .bms-flow-hero {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .bms-flow-hero .row.g-5 {
    --bs-gutter-y: 1.25rem;
  }

  .sy-route-card {
    padding: 18px;
  }
}

.ride-card {
  transition: .25s
}

.ride-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(8, 35, 48, .11)
}

.route-mini {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: 12px
}

.route-mini b,
.route-mini small {
  display: block
}

.route-mini small {
  color: var(--sy-muted);
  margin-top: 4px
}

.route-arrow {
  text-align: center;
  color: var(--sy-gold);
  font-size: 1.25rem
}

/* Bus features icon grid — home page "Why Choose Our Buses" section. */
.sy-feature-item {
  height: 100%;
  text-align: center;
  padding: 24px 14px;
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 0 18px 0 18px;
  box-shadow: 0 10px 28px rgba(8, 35, 48, .05);
  transition: transform .2s, box-shadow .2s;
}

.sy-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(8, 35, 48, .1);
}

.sy-feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(193, 154, 78, .12);
  color: var(--sy-gold);
  font-size: 1.3rem;
}

.sy-feature-label {
  font-weight: 700;
  color: var(--sy-navy);
  font-size: .9rem;
  line-height: 1.35;
}

.commercial-cta {
  background: linear-gradient(135deg, #071a24, #123848);
  color: #fff;
  border-radius: 0 28px 0 28px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: var(--sy-shadow)
}

.commercial-cta h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  margin-bottom: .35rem;
}

.commercial-cta p {
  color: rgba(255, 255, 255, .68)
}

.sy-summary #selectedSeatsText {
  word-break: break-word
}

@media(max-width:767.98px) {
  .commercial-cta {
    flex-direction: column;
    align-items: flex-start
  }

  .route-mini {
    grid-template-columns: 1fr 32px 1fr
  }

  .ride-card .sy-btn {
    width: 100%;
    margin-top: 12px
  }
}

/* Recommended Buses — BookMyShow-style poster card carousel */
.bus-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 6px 4px 22px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.bus-carousel::-webkit-scrollbar {
  height: 8px
}

.bus-carousel::-webkit-scrollbar-thumb {
  background: var(--sy-line);
  border-radius: 99px
}

.bus-poster-card {
  flex: 0 0 250px;
  scroll-snap-align: start;
  display: block;
  background: #fff;
  color: var(--sy-text);
  border: 1px solid #e8ece8;
  border-radius: 0 22px 0 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(8, 35, 48, .06);
  transition: .25s;
}

.bus-poster-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(8, 35, 48, .16);
}

.bus-poster-img {
  position: relative;
  height: 150px;
  background: linear-gradient(135deg, #0d2f3e, #123848);
}

.bus-poster-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bus-poster-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .5);
  font-size: 2.2rem;
}

.bus-poster-seats {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(7, 26, 36, .8);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: 999px;
}

.bus-poster-body {
  padding: 14px 16px 18px;
}

.bus-poster-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.bus-poster-route {
  font-size: .8rem;
  color: var(--sy-muted);
  margin-bottom: 10px;
}

.bus-poster-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e3e8e3;
  font-size: .95rem;
  font-weight: 700;
  color: var(--sy-navy);
}

.bus-poster-meta i {
  color: #c19a4e;
}

.bus-poster-fare {
  color: var(--sy-navy);
  font-weight: 800;
  font-size: 1rem;
}

.bus-poster-from {
  display: block;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sy-muted);
}

/* Stacked list of every route a trip can be boarded from (its own route,
   plus each additional boarding point), each with its own fare — replaces
   the single-line route + fare pair when a trip has boarding points. */
.bus-poster-routes {
  margin-bottom: 10px;
}

.bus-poster-routes-hint {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #927a22;
  margin-bottom: 6px;
}

.bus-poster-route-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  padding: 9px 10px;
  min-height: 62px;
  margin-bottom: 6px;
  border: 1px solid #e3e8e3;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: .2s;
}

.bus-poster-route-row:hover,
.bus-poster-route-row:focus-visible {
  border-color: #c19a4e;
  background: #fbf6ea;
}

.bus-poster-route-name {
  flex: 1;
  color: var(--sy-navy);
  font-weight: 600;
}

.bus-poster-route-fare {
  color: var(--sy-navy);
  font-weight: 800;
  font-size: .92rem;
  white-space: nowrap;
}

.bus-poster-route-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c19a4e;
  color: #fff;
  font-size: .68rem;
  flex-shrink: 0;
}

.bus-poster-top-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Front-end Schedule filter (Morning/Evening/Night) pill toggle — sits
   above the bus results, wraps naturally on narrow screens instead of
   overflowing. */
.schedule-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-filter-pill {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid #e7ecec;
  background: #fff;
  color: var(--sy-navy);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: .2s;
  white-space: nowrap;
}

.schedule-filter-pill:hover {
  border-color: var(--sy-gold);
  color: var(--sy-navy);
}

.schedule-filter-pill.active {
  background: var(--sy-gold);
  border-color: var(--sy-gold);
  color: var(--sy-navy);
}

/* On narrow screens a horizontal-scroll strip of 210px slivers is hard to
   read — stack the cards full-width in a single column instead. This also
   gives each card enough of its own room that the fixed bottom-left
   Call/WhatsApp buttons don't end up sitting over route/fare text the way
   they could with a narrow card. */
@media(max-width:575.98px) {
  .bus-carousel {
    flex-direction: column;
    overflow-x: visible;
  }

  .bus-poster-card {
    flex-basis: auto;
    width: 100%;
  }
}

/* Sold-out state (Today's Available Buses) — same card, no new color, just
   dimmed and non-interactive since it's a <div> here rather than an <a>. */
.bus-poster-card.sold-out {
  opacity: .55;
  cursor: not-allowed;
}

.bus-poster-card.sold-out:hover {
  transform: none;
  box-shadow: 0 14px 40px rgba(8, 35, 48, .06);
}

/* Site footer (public.php / member.php layouts) — copyright and developer
   credit share a single row, split to opposite ends. Uses the footer's own
   existing dark navy background; no new color scheme. */
.footer-bottom {
  padding: 25px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-bottom-inner {
  width: min(92%, 1600px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-copyright,
.footer-credit {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.footer-credit {
  text-align: right;
}

.footer-credit strong {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.footer-credit-link {
  color: inherit;
  text-decoration: none;
}

.footer-credit-link:hover {
  color: var(--sy-gold);
}

@media (max-width: 576px) {
  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .footer-credit {
    text-align: center;
  }
}

/* PWA install/update UI (injected by assets/js/pwa.js) — kept in its own
   section since it's shared across all three layouts, not tied to any one
   page's markup. */
.sy-pwa-banner {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  background: var(--sy-navy);
  color: #fff;
  padding: 12px 16px;
  border-radius: 0 14px 0 14px;
  box-shadow: 0 12px 35px rgba(7, 26, 36, .25);
  font-size: .9rem;
  flex-wrap: wrap;
}

.sy-pwa-banner-action {
  border: 0;
  border-radius: 0 10px 0 10px;
  padding: .5rem 1rem;
  font-weight: 700;
  background: var(--sy-gold);
  color: var(--sy-navy);
  cursor: pointer;
  white-space: nowrap;
}

.sy-pwa-banner-close {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.sy-pwa-install-wrap {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
}

.sy-pwa-install-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  border: 0;
  border-radius: 0 14px 0 14px;
  padding: .82rem 1.25rem;
  font-weight: 700;
  background: var(--sy-gold);
  color: var(--sy-navy);
  box-shadow: 0 12px 35px rgba(7, 26, 36, .25);
  cursor: pointer;
  white-space: nowrap;
}

.sy-pwa-install-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: skewX(-25deg);
  animation: sy-btn-shine 2.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sy-pwa-install-btn::before {
    animation: none;
    display: none;
  }
}

/* This banner is always on screen (no dismiss button — see pwa.js), so the
   page must leave it room: pwa.js adds .sy-has-install-banner to <body>
   while it's showing, which (a) pads the bottom of the page so content
   (e.g. a CTA button or the footer credit line) can scroll clear of it
   instead of sitting permanently underneath it, and (b) lifts the floating
   Call/WhatsApp buttons above it so the two fixed clusters never overlap. */
body.sy-has-install-banner {
  padding-bottom: 76px;
}

body.sy-has-install-banner .sy-float-contact {
  bottom: 88px;
}

@media (max-width: 420px) {
  .sy-pwa-banner {
    font-size: .82rem;
    padding: 10px 12px;
  }

  .sy-pwa-install-wrap {
    left: 16px;
    right: 16px;
    justify-content: flex-end;
  }

  .sy-pwa-install-btn {
    flex: 1 1 auto;
  }

  body.sy-has-install-banner {
    padding-bottom: 92px;
  }

  body.sy-has-install-banner .sy-float-contact {
    bottom: 104px;
  }
}

/* iOS has no programmatic PWA install API — tapping Install there shows
   this instead, explaining the manual Share-sheet steps. */
.sy-pwa-ios-hint-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 51, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1200;
}

.sy-pwa-ios-hint-card {
  background: #fff;
  color: var(--sy-text, #1b2a33);
  width: 100%;
  max-width: 420px;
  margin-bottom: 18px;
  border-radius: 18px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}

.sy-pwa-ios-hint-card p {
  font-weight: 600;
  margin-bottom: 14px;
}

.sy-pwa-ios-hint-icon {
  color: #c19a4e;
  margin-bottom: 16px;
}

.sy-pwa-ios-hint-close {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--sy-navy, #0b2533);
  color: #fff;
  font-weight: 700;
  padding: .7rem 1rem;
  cursor: pointer;
}

/* =====================================================================
   Global mobile-friendly safety net
   Most users open this site on a phone, so guard against the common
   mobile breakages: sideways page scroll, wide tables/pre blocks, and
   headings/words that push past the viewport edge.
   ===================================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
table {
  max-width: 100%;
}

/* Any wide data table becomes horizontally scrollable inside its own box
   instead of stretching the page. Wrap tables in .table-responsive where
   possible; this rule catches the ones that aren't wrapped. */
.sy-card > table,
.admin-main table,
main table {
 
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Comfortable tap targets on touch screens */
@media (max-width: 767.98px) {

  .sy-btn,
  .btn,
  .nav-link,
  .form-control,
  .form-select {
    min-height: 44px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sy-card {
    padding: 1rem !important;
  }

  /* Stack any two-column flex header rows on small screens */
  .d-flex.justify-content-between {
    flex-wrap: wrap;
  }
}

/* =====================================================================
   Public home page (public/home.php)
   Reuses .sy-hero / .sy-section / .sy-card / .sy-btn / .sy-kicker /
   .sy-schedule / .bus-poster-card from the rest of the site — the classes
   below only cover layout the home page needs that no existing page did
   (hero visual image, benefit cards, about split, final CTA band, review
   grid), kept in the same navy/gold/asymmetric-radius language.
   ===================================================================== */
.home-hero-visual {
  position: relative;
  z-index: 2;
}

.home-hero-visual img {
  width: 100%;
  height: clamp(220px, 32vw, 380px);
  object-fit: cover;
  border-radius: 0 32px 0 32px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  display: block;
}

.home-benefit-card {
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 0 24px 0 24px;
  box-shadow: 0 14px 40px rgba(8, 35, 48, .06);
  padding: 26px 22px;
  height: 100%;
  transition: .25s;
}

.home-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(8, 35, 48, .12);
}

.home-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sy-navy);
  color: var(--sy-gold);
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.home-benefit-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.home-benefit-card p {
  color: var(--sy-muted);
  margin: 0;
  font-size: .92rem;
}

/* Member home page "Quick Actions" tiles — short icon+label links, so a
   compact centered card of its own rather than reusing .home-benefit-card
   (built for a longer icon+title+paragraph blurb). Shares the same navy/gold
   icon treatment (.home-benefit-icon) for a consistent look. */
.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: #fff;
  border: 1px solid #e8ece8;
  border-radius: 0 22px 0 22px;
  box-shadow: 0 14px 40px rgba(8, 35, 48, .06);
  padding: 22px 12px;
  height: 100%;
  color: var(--sy-text);
  text-decoration: none;
  transition: .25s;
}

.quick-action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(8, 35, 48, .12);
  color: var(--sy-text);
}

.quick-action-card .home-benefit-icon {
  margin-bottom: 2px;
}

.quick-action-card span {
  font-weight: 700;
  font-size: .9rem;
}

#about-us {
  scroll-margin-top: 100px;
}

.home-about-visual img {
  width: 100%;
  height: clamp(240px, 30vw, 360px);
  object-fit: cover;
  border-radius: 0 32px 0 32px;
  box-shadow: var(--sy-shadow);
  display: block;
}

.home-final-cta {
  background:
    radial-gradient(circle at 12% 20%, rgba(193, 154, 78, .16), transparent 24%),
    linear-gradient(135deg, #071a24 0%, #0d2f3e 55%, #123848 100%);
  color: #fff;
  border-radius: 0 40px 0 40px;
  padding: clamp(40px, 6vw, 60px) clamp(24px, 5vw, 56px);
  text-align: center;
  box-shadow: var(--sy-shadow);
}

.home-final-cta h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 10px;
}

.home-final-cta p {
  color: rgba(255, 255, 255, .72);
  max-width: 560px;
  margin: 0 auto 24px;
}

.home-review-card {
  height: 100%;
}

.home-review-stars {
  color: var(--sy-gold);
  font-size: 1rem;
  letter-spacing: 2px;
}

.home-review-text {
  color: var(--sy-text);
  margin: 12px 0 16px;
}

.home-review-name {
  font-weight: 700;
  margin: 0;
}

.home-review-date {
  color: var(--sy-muted);
  font-size: .78rem;
}

.home-book-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sy-navy);
  font-weight: 700;
  font-size: .82rem;
  margin-top: 8px;
}

.bus-poster-book-btn {
  text-align: center;
  font-size: .85rem;
  padding: .6rem 1rem;
}

@media (max-width: 991.98px) {
  .home-hero-visual {
    margin-top: 32px;
  }

  .home-about-visual {
    margin-bottom: 24px;
  }
}

/* Shared checkbox multi-select dropdown (admin filter bars — see .sy-ms JS
   in layouts/admin.php). Button looks like a normal .form-select; clicking
   it opens a checkbox list instead of a native <select multiple>. */
.sy-ms {
  position: relative;
}

.sy-ms-toggle {
  width: 100%;
  cursor: pointer;
  background-color: #fff;
  text-align: left;
}

.sy-ms-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid #dde3e0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  max-height: 230px;
  overflow-y: auto;
  padding: 6px 0;
}

.sy-ms.open .sy-ms-panel {
  display: block;
}

.sy-ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: .88rem;
  cursor: pointer;
  margin: 0;
}

.sy-ms-option:hover {
  background: #f5f7f6;
}

.sy-ms-option input {
  margin: 0;
}