:root {
  --acblue: #0033a0;
  --ac-alert-blue: #acc7fe ;
  --acgreen: #c4d600;
  --ac-alert-green: #f7ff93;
  --acorange: #FE8F1C;
  --ac-alert-orange: #ffcf9f;
  --acblue-hover: #001b57;
  --acgreen-hover: #6c7500;
  --acorange-hover: #864703;
  --aclightgrey: #cfcfcf;
  --acdarkgrey: #222222;
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

.btn-ac-blue, .btn-acblue, .ac-blue, .bg-acblue{
    background-color: var(--acblue);
    color: #fff!important;
}
.btn-ac-blue:hover, .btn-acblue:hover{
    background-color: var(--acblue-hover);
    color: #fff!important;
    text-decoration: none;
}

.btn-ac-green, .btn-acgreen, .ac-green, .bg-acgreen{
    background-color: var(--acgreen);
    color: #000 !important;
    
}

.btn-ac-green:hover, .btn-acgreen:hover{
    background-color: var(--acgreen-hover);
    color: #fff !important;
    text-decoration: none;
}

.btn-ac-orange, .btn-acorange, .ac-orange, .bg-acorange{
    background-color: var(--acorange);
    color: #000 !important;
}

.btn-ac-orange:hover, .btn-acorange:hover {
    background-color: var(--acorange-hover);
    color: #000 !important;
    text-decoration: none;
}

.btn-outline-acblue, .btn-outline-ac-blue {
    color: var(--acblue);
    color: #0033a0;
    background-color: transparent!important;
    border: 2px solid #0033a0!important;
}

.btn-outline-acgreen, .btn-outline-ac-green {
    color: #000!important;
    background-color: transparent!important;
    border: 2px solid var(--acgreen);
}

.btn-outline-acorange, .btn-outline-ac-orange {
    color: #000!important;
    background-color: transparent!important;
    border: 2px solid var(--acorange);
}

.ac-blue .btn-link {
    color:#fff;
}

.ac-green .btn-link {
    color:#000;
}

.ac-orange .btn-link {
    color:#000;
}

.pills-acgreen .nav-link.active, .pills-acgreen .show>.nav-link, .tabs-acgreen {
    background-color: var(--acgreen)!important;
}

.pills-acorange .nav-link.active, .pills-acorange .show>.nav-link, .tabs-acorange {
    background-color: var(--acorange)!important;
}

.pills-acblue .nav-link.active, .pills-acblue .show>.nav-link, .tabs-acblue {
    background-color: var(--acblue)!important;
}

.pills-aclightgrey .nav-link.active, .pills-aclightgrey .show>.nav-link, .tabs-aclightgrey {
    background-color: var(--aclightgrey)!important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Moved from Public/index.php inline styles */
    :root { --line: #d8d8d8; }
    * { scrollbar-width: thin; }
    *::-webkit-scrollbar { width: 7px; height: 7px; }
    html, body { margin: 0; height: 100%; font-family: Arial, sans-serif; }
    .topbar { background: var(--acblue); color: #fff; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    .topbar-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
    .topbar-brand img { height: 34px; width: auto; display: block; }
    .topbar-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-layout { display: flex; height: calc(100% - 56px); }
    #map-canvas { position: relative; flex: 1; min-height: 0; }
    #map-canvas-inner { height: 100%; width: 100%; }
    #filtersPane { width: 360px; border-right: 1px solid var(--line); background: #f4f7fb; overflow-y: auto; }
    .sidebar-search { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
    .sidebar-search input { border: none; outline: none; width: 100%; font-size: 0.95rem; }
    .sidebar-search select { width: 100%; }
    .sidebar-search .btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 30px; height: 30px; padding: 0; }
    .services-drawer-toggle { border: 1px solid #c9d6ef; background: #fff; border-radius: 8px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
    .services-drawer-toggle .fa { transition: transform 180ms ease; }
    .services-drawer-toggle:hover .fa { transform: translateX(1px); }
    .sidebar-tabs { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; margin-bottom: 0.75rem; }
    .sidebar-tabs button { border: none; border-radius: 10px; padding: 0.45rem 0.5rem; background: transparent; font-weight: 600; }
    .sidebar-tabs button.active { background: var(--acblue); color: #fff; }
    .nav-tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
    .nav-tools .btn-link { text-decoration: none; font-weight: 600; padding: 0; }
    .group { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 0.75rem; }
    .group > .group-title { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 0.95rem; }
    .group .content { padding: 0.65rem 0.75rem; }
    .checkline { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0; font-size: 0.92rem; }
    .checkline i { width: 16px; color: var(--acblue); text-align: center; }
    .checkline.hidden-by-search { display: none; }
    .drawer-list .list-group-item { padding: 0.35rem 0.5rem; border-color: #e2e8f0; }
    .drawer-link { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; color: #0d47a1; text-decoration: none; }
    .drawer-link:hover, .drawer-link:focus { text-decoration: underline; color: #0a3a86; }
    .drawer-link i { width: 16px; color: var(--acblue); text-align: center; }
    .locations-overlay {
        position: absolute;
        inset: 0;
        background: #f4f7fb;
        z-index: 30;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 220ms ease;
        border-left: 1px solid var(--line);
    }
    .locations-overlay.is-open { transform: translateX(0); }
    .locations-overlay-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem;
        border-bottom: 1px solid var(--line);
        background: #fff;
    }
    .locations-overlay-body { padding: 0.65rem 0.75rem; overflow-y: auto; flex: 1; }
    .locations-overlay-list { display: none; }
    .locations-overlay-list.is-active { display: block; }
    #des-tabs {
        position: fixed;
        left: 0;
        top: 56px;
        width: 360px;
        height: calc(100vh - 56px);
        overflow: auto;
        background: #fff;
        border-right: 1px solid var(--line);
        z-index: 1060;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        transform: translateX(-100%);
        transition: transform 240ms ease;
    }
    #des-tabs.is-open { transform: translateX(0); }
    .tabs-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); }
    .infobox-tabs { display: inline-flex; gap: 0.35rem; align-items: center; }
    .infobox-tab-btn { border: 1px solid #c9d6ef; background: #fff; color: #334155; border-radius: 999px; padding: 0.3rem 0.55rem; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
    .infobox-tab-btn:hover { background: #eff6ff; color: #0b3b8d; }
    .infobox-tab-btn.is-active { background: var(--acblue); color: #fff; border-color: var(--acblue); }
    #close-infocanvas-x { font-weight: 600; text-decoration: none; }
    .tabs-body { padding: 0; overflow: hidden; }
    .info-tab-viewport { width: 100%; overflow: hidden; }
    .info-tab-track { width: 200%; display: flex; transition: transform 280ms ease; }
    #des-tabs.is-directions-tab .info-tab-track { transform: translateX(-50%); }
    .info-tab-panel { width: 50%; flex: 0 0 50%; padding: 0.75rem; }
    .info-marker { border-left: 4px solid var(--acblue); padding-left: 0.75rem; }
    .info-marker img { max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 0.5rem; }
    .route-shell { border: 1px solid var(--line); border-radius: 12px; padding: 0.65rem; background: #f8fbff; }
    .route-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
    .direction-type-icons { display: flex; gap: 0.35rem; }
    .direction-type-icons .btn { border: 1px solid #c9d6ef; background: #fff; padding: 0.3rem 0.55rem; }
    .direction-type-icons .btn.active { background: var(--acblue); color: #fff; border-color: var(--acblue); }
    .route-clear { border: none; background: transparent; color: var(--acblue); font-weight: 600; }
    .destination-header__input-layout { display: grid; grid-template-columns: 24px 1fr auto; gap: 0.55rem; align-items: center; margin-bottom: 0.55rem; }
    .destination-header__marker-icons { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
    .start-icon, .end-icon { width: 10px; height: 10px; border-radius: 50%; display: block; }
    .start-icon { background: #0d6efd; }
    .end-icon { background: #dc3545; }
    .dots { width: 2px; flex: 1; min-height: 20px; background: repeating-linear-gradient(to bottom, #9ca3af 0, #9ca3af 3px, transparent 3px, transparent 6px); }
    .destination-header__input-section input { width: 100%; border: 1px solid #c9d6ef; border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.88rem; margin-bottom: 0.35rem; background: #fff; }
    .swap-button { border: 1px solid #c9d6ef; background: #fff; border-radius: 8px; width: 32px; height: 32px; }
    .get-directions-btn { width: 100%; }
    .modes-legacy { display: none; }
    .sidebar-hidden { display: none !important; }
    #origin-mode-select { border: 1px solid #c9d6ef; border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.88rem; background: #fff; width: 100%; margin-bottom: 0.35rem; }


    @media (max-width: 991.98px) {
        .app-layout { height: calc(100% - 56px); }
        #filtersPane { width: 86vw; max-width: 360px; border-right: none; }
        #des-tabs { width: 86vw; max-width: 360px; }
    }

    @media (min-width: 992px) {
        #filtersPane { position: relative; }
    }