.navbar {
      background: rgba(15,15,15,0.96) !important;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      
    }





:root {
      --primary: #02031f;
      --primary-light: #e8eaf6;
      --booked-bg: #d0d0e4;
      --selected-bg: #020315;
      --selected-border: #e89206aa;
      --seat-bg: #fff;
      --border: #c59100;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #eab83bde; font-family: 'Segoe UI', sans-serif; min-height: 100vh; }

    /* ── NAVBAR ── */
    .navbar-custom {
      background: #fff;
      border-bottom: 1px solid #e0e0ee;
      padding: 12px 32px;
      display: flex;
      align-items: center;
      gap: 20px;
      position: sticky; top: 0; z-index: 100;
      box-shadow: 0 2px 8px rgba(91,95,199,.07);
    }
    .back-btn {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--primary-light); color: var(--primary);
      font-size: 1.1rem; text-decoration: none; border: none; cursor: pointer;
      transition: background .18s;
    }
    .back-btn:hover { background: #d0d3f0; color: var(--primary); }
    .nav-service { font-size: 0.78rem; color: #999; }
    .nav-route { font-size: 1.1rem; font-weight: 700; color: #111; }
    .nav-route .bi-geo-alt-fill { color: var(--primary); }
    .nav-badges { display: flex; gap: 24px; margin-left: auto; }
    .nav-badge-label { font-size: 0.69rem; color: #999; text-transform: uppercase; letter-spacing:.04em; }
    .nav-badge-value { font-size: 0.95rem; font-weight: 700; color: #111; }

    /* ── PAGE ── */
    .page-wrapper { max-width: 1100px; margin: 0 auto; padding: 28px 20px 130px; }
    .page-title { font-size: 1.2rem; font-weight: 700; color: #111; margin-bottom: 22px; }
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 310px;
      gap: 24px;
      align-items: start;
    }

    /* ── BUS CARD ── */
    .bus-card {
      background: #fff; border-radius: 18px; padding: 24px;
      box-shadow: 0 2px 16px rgba(91,95,199,.08);
    }
    .driver-header-row { display: flex; gap: 12px; margin-bottom: 12px; }
    .driver-label {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      font-size: 0.72rem; font-weight: 700; color: var(--primary);
      letter-spacing: .06em; text-transform: uppercase;
      padding: 7px 0; border-radius: 8px; background: var(--primary-light);
    }
    .driver-label.left { flex: 1; }
    .driver-label.right { width: 38%; }

    .bus-layout { display: flex; gap: 12px; }
    .left-column { flex: 1; display: flex; flex-direction: column; gap: 10px; }
    .right-column { width: 38%; display: flex; flex-direction: column; gap: 10px; }

    .seat-group {
      background: var(--primary-light); border-radius: 14px; padding: 10px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .seat-row { display: flex; gap: 8px; }

    /* ── SEAT (checkbox trick) ── */
    .seat-input { display: none; }
    .seat-label-box {
      flex: 1; background: var(--seat-bg); border-radius: 10px;
      padding: 9px 8px 7px; text-align: center;
      border: 2px solid var(--border); cursor: pointer;
      transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
      user-select: none;
    }
    .seat-label-box:hover {
      border-color: var(--primary);
      box-shadow: 0 2px 10px rgba(91,95,199,.2);
      transform: translateY(-2px);
    }
    .seat-input:checked + .seat-label-box {
      background: var(--selected-bg);
      border-color: var(--selected-border);
      box-shadow: 0 3px 14px rgba(91,95,199,.38);
      transform: translateY(-2px);
    }
    .seat-input:checked + .seat-label-box .s-name { color: #fff; }
    .seat-input:checked + .seat-label-box .s-price { color: #cdd1ff; }
    .seat-input:checked + .seat-label-box .s-dir { color: #cdd1ff; }

    .seat-label-box.booked {
      background: var(--booked-bg); border-color: #c0c0d8;
      cursor: not-allowed; pointer-events: none;
    }
    .seat-label-box.booked .s-name { color: #aaa; }
    .seat-label-box.booked .s-price { color: #bbb; }

    .s-name { font-size: 0.82rem; font-weight: 700; color: #111; line-height: 1.2; }
    .s-price { font-size: 0.68rem; color: #888; margin-top: 2px; }
    .s-dir { font-size: 0.58rem; color: #777; }

    /* Washroom */
    .washroom-cell {
      flex: 1; background: #dce0f5; border-radius: 10px; padding: 10px;
      text-align: center; font-size: 0.75rem; font-weight: 700;
      color: var(--primary); letter-spacing: .06em;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }

    /* Legend */
    .legend { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
    .legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: #555; }
    .legend-dot { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--border); }
    .legend-dot.av { background: #fff; }
    .legend-dot.bk { background: var(--booked-bg); border-color: #c0c0d8; }
    .legend-dot.sl { background: var(--selected-bg); border-color: var(--selected-border); }

    /* ── SUMMARY CARD ── */
    .summary-card {
      background: #fff; border-radius: 18px; padding: 24px;
      box-shadow: 0 2px 16px rgba(91,95,199,.08);
      position: sticky; top: 80px;
    }
    .summary-title {
      font-size: 1rem; font-weight: 700; color: #111;
      margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #eee;
    }
    .s-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 9px 0; border-bottom: 1px solid #f4f4f8; font-size: 0.87rem;
    }
    .s-row:last-of-type { border-bottom: none; }
    .s-lbl { color: #777; }
    .s-val { font-weight: 700; color: #111; }
    .s-val.price { color: var(--primary); font-size: 1rem; }

    .seat-tags-wrap { margin: 10px 0 16px; min-height: 38px; }
    .seat-tag {
      display: inline-block; background: var(--primary-light); color: var(--primary);
      border-radius: 6px; padding: 3px 9px; font-size: 0.77rem; font-weight: 600;
      margin: 3px 3px 3px 0;
    }
    .no-seat { font-size: 0.8rem; color: #bbb; font-style: italic; }

    .btn-next {
      width: 100%;
      background: linear-gradient(135deg, #010217 0%, #010212 100%);
      color: #fff; border: none; border-radius: 30px; padding: 14px;
      font-size: 1rem; font-weight: 700; letter-spacing:.03em; cursor: pointer;
      transition: opacity .18s, transform .1s, box-shadow .18s;
      box-shadow: 0 4px 18px rgba(91,95,199,.3); margin-top: 8px;
    }
    .btn-next:hover { opacity:.92; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0, 1, 14, 0.38); }
    .btn-next:active { transform: translateY(0); }

    /* ── MOBILE BOTTOM BAR ── */
    .bottom-bar {
      display: none; position: fixed; bottom: 0; left: 0; right: 0;
      background: #fff; border-top: 1px solid #e0e0ee;
      padding: 12px 18px; z-index: 200;
      box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    }
    .bottom-info { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.88rem; }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .content-grid { grid-template-columns: 1fr; }
      .summary-card { display: none; }
      .bottom-bar { display: block; }
    }
    @media (max-width: 600px) {
      .navbar-custom { padding: 10px 14px; }
      .nav-badges { gap: 14px; }
      .page-wrapper { padding: 14px 10px 130px; }
      .bus-card { padding: 14px; }
      .s-name { font-size: 0.74rem; }
    }
    @media (max-width: 420px) {
      .nav-badges { display: none; }
    }




    /* Footer */
      .footer {
        background: rgb(10, 12, 15);
        color: var(--white);
        padding: 4rem 5% 2rem;
      }

      .footer-grid {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
      }

      .footer-brand h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
      }

      .footer-brand h3 span {
        color: var(--primary);
      }

      .footer-brand p {
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.7;
      }

      .footer-links h4 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        color: var(--primary);
      }

      .footer-links ul {
        list-style: none;
      }

      .footer-links li {
        margin-bottom: 0.75rem;
      }

      .footer-links a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: color 0.3s;
      }

      .footer-links a:hover {
        color: var(--primary);
      }

      .footer-contact p {
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .footer-bottom {
        max-width: 1200px;
        margin: 3rem auto 0;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        color: rgba(255, 255, 255, 0.5);
      }