/* ===========================================================
   7busticket — bus ticket booking homepage
   Built on Bootstrap 5. This file: brand tokens, Bootstrap
   variable overrides, and the bespoke ticket/board pieces
   Bootstrap has no component for.

   Brand green sampled from logo.png: #00BF63.
   --primary is a darkened, WCAG AA-safe shade of that same
   green for text/links/buttons; --accent is the exact bright
   logo green, used only where it sits behind dark text or as
   a non-text decorative fill (badges, dots, borders).
   =========================================================== */

:root {
  --bg: #FFFFFF;
  --bg-soft: #F2F6F4;
  --surface: #FFFFFF;
  --ink: #545454;
  --ink-muted: #6E6E6E;
  --primary: #0A7D48;
  --primary-dark: #063D24;
  --accent: #00BF63;
  --accent-ink: #0E2A1C;
  --line: #E1E8E4;
  --shadow: 0 16px 34px -18px rgba(10, 61, 36, 0.3);

  --font-display: "Sarabun", "Leelawadee UI", "Segoe UI", system-ui, sans-serif;
  --font-body: "Sarabun", "Leelawadee UI", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 10, 125, 72;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);
  --bs-border-color: var(--line);
  --bs-border-radius: 0.7rem;
  --bs-border-radius-lg: 1rem;
}

:root[data-theme="dark"] {
  --bg: #0B1712;
  --bg-soft: #101F19;
  --surface: #101F19;
  --ink: #E7EFEA;
  --ink-muted: #96A79E;
  --primary: #2ED888;
  --primary-dark: #071510;
  --accent: #00D673;
  --accent-ink: #0B2418;
  --line: #1E3128;
  --shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1712;
    --bg-soft: #101F19;
    --surface: #101F19;
    --ink: #E7EFEA;
    --ink-muted: #96A79E;
    --primary: #2ED888;
    --primary-dark: #071510;
    --accent: #00D673;
    --accent-ink: #0B2418;
    --line: #1E3128;
    --shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { line-height: 1.65; }

h1, h2, h3, .navbar-brand { font-family: var(--font-display); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4vw + 1rem, 3.2rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); line-height: 1.25; }
h3 { font-size: 1.1rem; }
p { color: var(--ink-muted); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-muted-2 { color: var(--ink-muted); }
.bg-soft { background: var(--bg-soft); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1080;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.75em 1.2em; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-display); font-weight: 600; }
.btn-accent {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: var(--shadow);
}
.btn-accent:hover, .btn-accent:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }

/* ---------- Navbar ---------- */
.site-navbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-navbar .navbar-brand { color: var(--primary); display: inline-flex; align-items: center; gap: 0.5em; letter-spacing: 0.01em; }
.site-navbar .nav-link { color: var(--ink); font-weight: 500; }
.site-navbar .nav-link:hover, .site-navbar .nav-link:focus { color: var(--primary); }
.hotline { color: var(--primary); font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.site-footer .hotline { color: var(--primary); }
.site-footer .hotline:hover { color: var(--primary-dark); }
.site-navbar .navbar-toggler { border-color: var(--line); }

/* ---------- Hero ---------- */
.hero { background: var(--bg); padding-block: 56px 72px; text-align: center; }
.eyebrow {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.8rem; color: var(--primary); margin-bottom: 0.8em;
}
.hero-intro { max-width: 640px; }
.hero h1 { color: var(--ink); }
.hero-sub { color: var(--ink-muted); font-size: 1.08rem; max-width: 52ch; }

.trust-pills {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0; margin: 1.4rem 0 0;
}
.trust-pills li {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 0.4em 0.9em; font-size: 0.82rem; font-weight: 500;
}
.trust-pills svg { color: var(--primary); flex: none; }
.hero-photo {
  width: 100%; max-width: 920px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
  margin: 2.2em auto 0; display: block; box-shadow: var(--shadow); border: 1px solid var(--line);
}
@media (min-width: 576px) { .hero-photo { aspect-ratio: 16 / 9; } }
@media (min-width: 992px) { .hero-photo { aspect-ratio: 21 / 9; } }

.hero-carousel {
  width: 100%; max-width: 920px; margin: 2.2em auto 0; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.hero-carousel .carousel-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 576px) { .hero-carousel .carousel-item img { aspect-ratio: 16 / 9; } }
@media (min-width: 992px) { .hero-carousel .carousel-item img { aspect-ratio: 21 / 9; } }
.hero-carousel-caption {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  background: rgba(20, 26, 23, 0.6); color: #fff; font-size: 0.8rem; font-weight: 600;
  padding: 0.35em 0.9em; border-radius: 999px;
}
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { width: 52px; opacity: 1; }
.hero-carousel-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: background 0.15s ease;
}
.hero-carousel .carousel-control-prev:hover .hero-carousel-arrow,
.hero-carousel .carousel-control-next:hover .hero-carousel-arrow { background: #fff; }
.hero-carousel-indicators { margin-bottom: 10px; gap: 5px; }
.hero-carousel-indicators [data-bs-target] {
  width: 7px; height: 7px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.55);
  border: none; opacity: 1; margin: 0;
}
.hero-carousel-indicators .active { background-color: #fff; }
.hero-stats {
  list-style: none; display: flex; gap: 0; padding: 0; margin: 2.2rem 0 0;
}
.hero-stats li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 2rem; border-left: 1px solid var(--line);
}
.hero-stats li:first-child { border-left: none; padding-left: 0; }
.hero-stats strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--primary); }
.hero-stats span { font-size: 0.8rem; color: var(--ink-muted); }

/* ---------- Ticket search card ---------- */
.ticket-card {
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  border-radius: 16px;
  width: 100%;
  max-width: 920px;
  box-sizing: border-box;
  padding: 22px 26px 26px;
  margin-top: 2.4rem;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.18);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
}
.ticket-label {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; color: var(--primary); margin: 0 0 1em; font-weight: 700;
}
/* The BusX widget mounts into this div with its own CSS, which can set a
   fixed/min width wider than our card and force it to overflow or hug one
   side. Cap every element it renders to the card's own width so their
   layout has to reflow within us instead of pushing past our bounds. */
#busx-search-form,
#busx-search-form * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#busx-search-form { width: 100%; }

/* Location autocomplete dropdown: confirmed via DevTools that BusX paints
   every suggestion row's background on .list-item-action and its nested
   children (.box-stop/.stop-name/.stop-from/.province-from), driven by
   data-color, on every row rather than just the hovered one. Reset the row
   AND every descendant to the same background in both states — resetting
   only the row itself left child spans with their own leftover white/green
   fill, showing as a mismatched box around the text. */
#busx-search-form .list-item-action,
#busx-search-form .list-item-action * {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
#busx-search-form .list-item-action:hover,
#busx-search-form .list-item-action:hover *,
#busx-search-form .list-item-action:focus,
#busx-search-form .list-item-action:focus * {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
}

/* ---------- Sections ---------- */
.section { padding-top: 64px; padding-bottom: 64px; }
.section-head { margin-bottom: 2.2rem; }
.section-head p { max-width: 60ch; }

/* ---------- Route cards ---------- */
.route-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: transform 0.18s ease, box-shadow 0.18s ease; height: 100%; }
.route-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.route-line { position: relative; height: 2px; background-image: linear-gradient(to right, var(--line) 50%, transparent 50%); background-size: 10px 2px; margin: 4px 0 12px; }
.route-line .stop { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); }
.route-line .stop-from { left: 0; background: var(--primary); }
.route-line .stop-to { right: 0; background: var(--accent); }

.route-stops { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.route-sub { font-size: 0.78rem; color: var(--ink-muted); }
.route-meta dt { font-size: 0.7rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.route-meta dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem; }
.price { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--primary); }
.price span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.68rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Partner companies ---------- */
.company-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 12px; height: 100%;
  text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.company-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.company-card img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; }
.company-fallback {
  width: 56px; height: 56px; border-radius: 8px; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--primary);
}
.company-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; }
.company-count { font-size: 0.72rem; color: var(--ink-muted); margin: 0; }

/* ---------- Company directory ---------- */
.directory-card {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 16px; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.directory-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.directory-card-top { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.directory-card-top img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; flex: none; }
.directory-card-top .company-fallback { width: 44px; height: 44px; font-size: 1.1rem; flex: none; }
.directory-card-name { font-weight: 700; color: var(--ink); font-size: 0.98rem; line-height: 1.3; }
.directory-card-stats { display: flex; gap: 18px; margin: 0; }
.directory-card-stats dt { font-size: 0.66rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.directory-card-stats dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.directory-card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
.directory-card-phone { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.directory-card-phone:hover { text-decoration: underline; }
.price-level-badge {
  font-size: 0.7rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-muted);
}
.price-level-badge.price-level-below { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.price-level-badge.price-level-above { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-ink); }

/* ---------- Breadcrumb ---------- */
.breadcrumb-nav { padding-top: 18px; }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
  font-size: 0.82rem; color: var(--ink-muted);
}
.breadcrumb-list li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }
.breadcrumb-list a { color: var(--ink-muted); }
.breadcrumb-list a:hover { color: var(--primary); }
.breadcrumb-list li[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Company profile header ---------- */
.company-banner {
  width: 100%; height: 260px; object-fit: cover; border-radius: 16px;
  display: block; margin-bottom: 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.company-header { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.company-header-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); flex: none; }
.company-header-logo.company-fallback { font-size: 1.8rem; }
.company-description { color: var(--ink-muted); }

/* ---------- Stat blocks ---------- */
.stat-block {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 16px; text-align: center;
}
.stat-block strong { display: block; font-family: var(--font-mono); font-size: 1.3rem; color: var(--primary); }
.stat-block span { font-size: 0.75rem; color: var(--ink-muted); }

.class-bar-track { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.class-bar-fill { height: 100%; border-radius: 999px; background: var(--primary); }

/* ---------- Ticket counters ---------- */
.counter-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; height: 100%; }
.counter-name { font-weight: 700; color: var(--ink); margin: 0 0 4px; font-size: 0.92rem; }
.counter-address { font-size: 0.8rem; color: var(--ink-muted); margin: 0 0 6px; }

/* ---------- Gallery figures (company profile images) ---------- */
.gallery-figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); height: 100%; }
.gallery-figure img { width: 100%; height: 150px; object-fit: cover; display: block; }

/* ---------- Screenshot figures (route.php search-result examples) ----------
   Unlike .gallery-figure, these are tall UI screenshots — cropping to a fixed
   height cuts content off, so show them at their natural aspect ratio. */
.screenshot-figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.screenshot-figure img { width: 100%; height: auto; display: block; }

/* ---------- Features ---------- */
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); margin-bottom: 14px;
}

/* ---------- How it works ---------- */
.how-section { background: var(--bg-soft); }

.step-shot-frame {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow); aspect-ratio: 9 / 15.6;
}
.step-shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.step-num-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.35);
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--primary); color: #fff; padding-block: 44px; }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { opacity: 0.82; }
.cta-band .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.cta-band .btn-accent:hover, .cta-band .btn-accent:focus { background: color-mix(in srgb, var(--accent) 88%, black); border-color: color-mix(in srgb, var(--accent) 88%, black); color: var(--accent-ink); }

/* ---------- FAQ accordion (faq.php) ---------- */
.faq-accordion { --bs-accordion-border-color: var(--line); --bs-accordion-active-color: var(--primary); --bs-accordion-active-bg: var(--bg-soft); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 25%, transparent); }
.faq-accordion .accordion-button:not(.collapsed) { font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-soft); color: var(--ink-muted); border-top: 1px solid var(--line); font-size: 0.92rem; }
.site-footer h4 { color: var(--ink); font-family: var(--font-display); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--primary); }
.site-footer .navbar-brand { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-muted); }

/* ---------- Route filter bar (routes.php) ---------- */
.route-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.route-filter-bar input[type="search"] { flex: 1 1 220px; }
.route-filter-bar select { flex: 0 1 160px; }

/* ---------- Route directory cards (routes.php, station.php destinations) ---------- */
.route-directory-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; height: 100%; }
.route-directory-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.route-directory-card-link { display: block; color: inherit; text-decoration: none; }

/* Generated destination card art (no photo dependency — see jd_destination_hues()).
   Text sits directly on the gradient, no separate white body section. */
.route-directory-card-art { position: relative; width: 100%; min-height: 160px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.route-directory-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 65%); pointer-events: none; }
.route-directory-card-art > * { position: relative; z-index: 1; }
.route-directory-card-region { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.route-directory-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.art-stat-label { font-size: 0.66rem; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.04em; }
.art-stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; color: #fff; }
.art-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; color: #fff; }

/* ---------- Route link inside a .route-card (index/company/route pages) ---------- */
a.route-stops { text-decoration: none; color: var(--ink); }
a.route-stops:hover { color: var(--primary); }

/* ---------- Trip item cards (route.php schedule) ---------- */
.trip-item-card { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); height: 100%; }
.trip-item-card.is-best { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.trip-item-badge { position: absolute; top: -10px; right: 14px; background: var(--primary); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.trip-item-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; flex: none; }
.trip-item-company { display: block; font-weight: 700; color: var(--ink); font-size: 0.92rem; text-decoration: none; margin: 0; }
.trip-item-company:hover { color: var(--primary); }
.trip-item-class-badge { display: inline-block; background: var(--bg-soft); color: var(--primary); font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-top: 3px; }
.trip-item-destination { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--ink); }

/* ---------- Station fallback icon (stations.php directory) ---------- */
.station-fallback svg { color: var(--primary); }

/* ---------- Pagination (routes.php) ---------- */
.pagination .page-link { color: var(--primary); }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }