/* =========================================================
   CARANDCAB — FIND YOUR RIDE V2
   LOCKED ARCHITECTURE

   MOBILE
   - EXACTLY ONE CAR PER ROW
   - FILTERS BUTTON AT TOP
   - FILTERS = BOTTOM DRAWER
   - COMPACT TRIP STRIP

   DESKTOP
   - EXACTLY THREE CARDS PER ROW
   - LEFT FILTER SIDEBAR
   - PREMIUM TEAL HEADER
   - LOGO / TRIP SUMMARY / MODIFY / HELP / LOGIN

   PRIMARY: #0F766E
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {

    --cc-primary: #0F766E;
    --cc-primary-dark: #115E59;
    --cc-primary-light: #E6F4F2;
    --cc-primary-soft: #ECFDF5;

    --cc-black: #101418;
    --cc-dark: #171A1D;

    --cc-text: #20272D;
    --cc-muted: #667085;
    --cc-light: #98A2B3;

    --cc-white: #FFFFFF;
    --cc-page: #F6F8F9;

    --cc-border: #E1E6E8;
    --cc-border-light: #EDF0F2;

    --cc-success: #16803C;
    --cc-danger: #B42318;

    --cc-container: 1240px;

    --cc-radius-sm: 8px;
    --cc-radius-md: 12px;
    --cc-radius-lg: 16px;
    --cc-radius-xl: 20px;

    --cc-shadow-card:
        0 2px 10px rgba(16, 24, 40, .06);

    --cc-shadow-hover:
        0 12px 32px rgba(16, 24, 40, .11);

    --cc-transition: 180ms ease;
}


/* =========================================================
   02. PAGE RESET
========================================================= */

html body #ccRidePageRoot {

    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--cc-page) !important;
    color: var(--cc-text) !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    line-height: 1.4;
}


html body #ccRidePageRoot *,
html body #ccRidePageRoot *::before,
html body #ccRidePageRoot *::after {

    box-sizing: border-box !important;
}


html body #ccRidePageRoot img {

    max-width: 100%;
}


html body #ccRidePageRoot a {

    text-decoration: none !important;
}


html body #ccRidePageRoot button,
html body #ccRidePageRoot input,
html body #ccRidePageRoot select {

    font-family: inherit;
}


html body.ccRideNoScroll {

    overflow: hidden !important;
}


/* =========================================================
   03. COMMON CONTAINER
========================================================= */

html body #ccRidePageRoot .ccRideContainer {

    width: calc(100% - 28px) !important;
    max-width: var(--cc-container) !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   04. PREMIUM HEADER
========================================================= */

html body #ccRidePageRoot .ccRideHeader {

    width: 100% !important;

    background: var(--cc-primary) !important;

    border: 0 !important;

    position: relative;

    z-index: 1000;
}


html body #ccRidePageRoot .ccRideHeaderInner {

    width: min(
        calc(100% - 28px),
        var(--cc-container)
    ) !important;

    min-height: 64px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;
}


/* =========================================================
   LOGO

   PHP uses .cc-header-logo
========================================================= */

html body #ccRidePageRoot .cc-header-logo {

    flex: 0 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    line-height: 0 !important;
}


html body #ccRidePageRoot .cc-header-logo img {

    display: block !important;

    width: 116px !important;

    height: auto !important;

    max-height: 60px !important;

    object-fit: contain !important;
}


/* =========================================================
   OLD LOGO CLASS SUPPORT
========================================================= */

html body #ccRidePageRoot .ccRideLogo {

    flex: 0 0 auto !important;

    display: flex !important;

    align-items: center !important;
}


html body #ccRidePageRoot .ccRideLogo img {

    display: block !important;

    width: 116px !important;

    height: auto !important;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

html body #ccRidePageRoot .ccRideTripSummary {

    display: none !important;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

html body #ccRidePageRoot .ccRideHeaderActions {

    margin-left: auto !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;
}


/* =========================================================
   HEADER HELP / LOGIN
========================================================= */

html body #ccRidePageRoot .ccRideHeaderAction {

    width: 36px !important;
    height: 36px !important;

    min-height: 36px !important;

    padding: 0 !important;

    border-radius: 9px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    background: #FFFFFF !important;

    color: var(--cc-primary) !important;

    border: 1px solid rgba(255,255,255,.8) !important;

    font-size: 15px !important;

    font-weight: 700 !important;
}


html body #ccRidePageRoot .ccRideHeaderAction:hover {

    background: #F3FFFD !important;

    color: var(--cc-primary-dark) !important;
}


html body #ccRidePageRoot .ccRideHeaderAction span {

    display: none !important;
}


/* =========================================================
   MOBILE MODIFY BUTTON
========================================================= */

html body #ccRidePageRoot .ccRideModifyButton {

    display: none !important;
}


/* =========================================================
   05. MOBILE TRIP STRIP
========================================================= */

html body #ccRidePageRoot .ccRideSearchStrip {

    width: 100% !important;

    background: #FFFFFF !important;

    border-bottom: 1px solid var(--cc-border) !important;
}


html body #ccRidePageRoot .ccRideSearchStripInner {

    width: calc(100% - 28px) !important;

    max-width: var(--cc-container) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 9px 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 9px !important;
}


/* Location hidden on mobile */

html body #ccRidePageRoot .ccRideSearchLocation {

    display: none !important;
}


/* Dates */

html body #ccRidePageRoot .ccRideSearchDates {

    min-width: 0 !important;

    flex: 1 1 auto !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;
}


html body #ccRidePageRoot .ccRideSearchDates > span {

    flex: 0 0 auto !important;

    color: var(--cc-primary) !important;

    font-size: 13px !important;

    font-weight: 900 !important;

    line-height: 1 !important;
}


html body #ccRidePageRoot .ccRideSearchDates > div {

    min-width: 0 !important;

    flex: 1 1 0 !important;
}


html body #ccRidePageRoot .ccRideSearchDates > div:first-of-type {

    text-align: right !important;
}


html body #ccRidePageRoot .ccRideSearchDates > div:last-of-type {

    text-align: left !important;
}


html body #ccRidePageRoot .ccRideSearchDates small {

    display: none !important;
}


html body #ccRidePageRoot .ccRideSearchDates strong {

    display: block !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    color: var(--cc-text) !important;

    font-size: 10px !important;

    font-weight: 750 !important;

    line-height: 1.2 !important;
}


/* =========================================================
   MOBILE MODIFY ICON
========================================================= */

html body #ccRidePageRoot .ccRideSearchModify {

    flex: 0 0 34px !important;

    width: 34px !important;
    height: 34px !important;

    min-height: 34px !important;

    padding: 0 !important;

    border: 1px solid var(--cc-border) !important;

    border-radius: 50% !important;

    background: #FFFFFF !important;

    color: var(--cc-primary) !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 0 !important;

    cursor: pointer !important;
}


html body #ccRidePageRoot .ccRideSearchModify i {

    margin: 0 !important;

    font-size: 13px !important;

    color: var(--cc-primary) !important;
}


/* =========================================================
   06. MODIFY PANEL
========================================================= */

html body #ccRidePageRoot .ccRideModifyPanel {

    display: none !important;

    width: 100% !important;

    background: var(--cc-dark) !important;

    color: #FFFFFF !important;

    padding: 18px 14px !important;
}


html body #ccRidePageRoot .ccRideModifyPanel.ccRideModifyOpen {

    display: block !important;
}


html body #ccRidePageRoot .ccRideModifyInner {

    width: 100% !important;

    max-width: var(--cc-container) !important;

    margin: 0 auto !important;
}


html body #ccRidePageRoot .ccRideModifyHeading {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin-bottom: 14px !important;
}


html body #ccRidePageRoot .ccRideModifyIcon {

    width: 38px !important;
    height: 38px !important;

    flex: 0 0 38px !important;

    border-radius: 10px !important;

    background: rgba(255,255,255,.09) !important;

    color: #5EEAD4 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


html body #ccRidePageRoot .ccRideModifyHeading strong {

    display: block !important;

    color: #FFFFFF !important;

    font-size: 14px !important;
}


html body #ccRidePageRoot .ccRideModifyHeading span {

    display: block !important;

    margin-top: 2px !important;

    color: #B8C0C7 !important;

    font-size: 10px !important;
}


html body #ccRidePageRoot .ccRideSearchForm {

    width: 100% !important;

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;
}


html body #ccRidePageRoot .ccRideSearchField label {

    display: block !important;

    margin-bottom: 5px !important;

    color: #D0D5DD !important;

    font-size: 10px !important;

    font-weight: 700 !important;
}


html body #ccRidePageRoot .ccRideSearchField label i {

    margin-right: 4px !important;

    color: #5EEAD4 !important;
}


html body #ccRidePageRoot .ccRideSearchControl {

    width: 100% !important;

    height: 44px !important;

    padding: 0 11px !important;

    border: 1px solid #394047 !important;

    border-radius: 9px !important;

    outline: none !important;

    background: #22272B !important;

    color: #FFFFFF !important;

    font-size: 12px !important;
}


html body #ccRidePageRoot .ccRideSearchControl:focus {

    border-color: #5EEAD4 !important;
}


html body #ccRidePageRoot .ccRideSearchButton {

    width: 100% !important;

    height: 44px !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: var(--cc-primary) !important;

    color: #FFFFFF !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    cursor: pointer !important;
}


html body #ccRidePageRoot .ccRideModifyClose {

    display: none !important;
}


/* =========================================================
   07. INTRO
========================================================= */

html body #ccRidePageRoot .ccRideIntro {

    padding: 23px 0 17px !important;
}


html body #ccRidePageRoot .ccRideIntro .ccRideContainer {

    display: block !important;
}


html body #ccRidePageRoot .ccRideEyebrow {

    display: inline-block !important;

    margin-bottom: 6px !important;

    color: var(--cc-primary) !important;

    font-size: 9px !important;

    font-weight: 850 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}


html body #ccRidePageRoot .ccRideIntro h1 {

    margin: 0 !important;

    color: var(--cc-black) !important;

    font-size: 30px !important;

    line-height: 1.05 !important;

    letter-spacing: -.035em !important;

    font-weight: 800 !important;
}


html body #ccRidePageRoot .ccRideIntro p {

    max-width: 650px !important;

    margin: 8px 0 0 !important;

    color: var(--cc-muted) !important;

    font-size: 12px !important;

    line-height: 1.55 !important;
}


html body #ccRidePageRoot .ccRideAvailability {

    display: none !important;
}


/* =========================================================
   08. LISTING
========================================================= */

html body #ccRidePageRoot .ccRideListing {

    width: 100% !important;

    padding: 0 0 40px !important;
}


html body #ccRidePageRoot .ccRideListingContainer {

    width: 100% !important;

    margin: 0 !important;

    display: block !important;
}


/* =========================================================
   09. MOBILE FILTER DRAWER
========================================================= */

html body #ccRidePageRoot .ccRideFilters {

    position: fixed !important;

    z-index: 5000 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;

    max-height: 88vh !important;

    margin: 0 !important;

    padding: 20px 16px 24px !important;

    border: 0 !important;

    border-radius: 20px 20px 0 0 !important;

    background: #FFFFFF !important;

    box-shadow:
        0 -15px 50px rgba(0,0,0,.20) !important;

    transform: translateY(110%) !important;

    transition: transform 250ms ease !important;

    overflow-y: auto !important;
}


html body #ccRidePageRoot .ccRideFilters.ccRideFiltersOpen {

    transform: translateY(0) !important;
}


html body #ccRidePageRoot .ccRideFilterHeader {

    display: flex !important;

    align-items: flex-start !important;

    justify-content: space-between !important;

    padding-bottom: 15px !important;

    margin-bottom: 17px !important;

    border-bottom: 1px solid var(--cc-border-light) !important;
}


html body #ccRidePageRoot .ccRideFilterHeader span {

    display: block !important;

    color: var(--cc-primary) !important;

    font-size: 9px !important;

    font-weight: 850 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}


html body #ccRidePageRoot .ccRideFilterHeader h2 {

    margin: 3px 0 0 !important;

    color: var(--cc-black) !important;

    font-size: 21px !important;

    line-height: 1.1 !important;
}


html body #ccRidePageRoot .ccRideFilterClose {

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    border: 1px solid var(--cc-border) !important;

    border-radius: 50% !important;

    background: #FFFFFF !important;

    color: var(--cc-text) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;
}


html body #ccRidePageRoot .ccRideFilterGroup {

    margin-bottom: 14px !important;
}


html body #ccRidePageRoot .ccRideFilterGroup label {

    display: block !important;

    margin-bottom: 6px !important;

    color: var(--cc-text) !important;

    font-size: 11px !important;

    font-weight: 750 !important;
}


html body #ccRidePageRoot .ccRideFilterControl {

    width: 100% !important;

    height: 43px !important;

    padding: 0 10px !important;

    border: 1px solid var(--cc-border) !important;

    border-radius: 9px !important;

    outline: none !important;

    background: #FFFFFF !important;

    color: var(--cc-text) !important;

    font-size: 12px !important;
}


html body #ccRidePageRoot .ccRideFilterControl:focus {

    border-color: var(--cc-primary) !important;
}


html body #ccRidePageRoot .ccRideClearFilters {

    width: 100% !important;

    min-height: 42px !important;

    margin-top: 3px !important;

    border-radius: 9px !important;

    background: var(--cc-primary-soft) !important;

    color: var(--cc-primary) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    font-size: 11px !important;

    font-weight: 800 !important;
}


/* =========================================================
   FILTER OVERLAY
========================================================= */

html body #ccRidePageRoot .ccRideFilterOverlay {

    position: fixed !important;

    z-index: 4999 !important;

    inset: 0 !important;

    display: block !important;

    background: rgba(16,20,24,.58) !important;

    backdrop-filter: blur(3px);

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity 200ms ease,
        visibility 200ms ease !important;
}


html body #ccRidePageRoot .ccRideFilterOverlay.ccRideOverlayVisible {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


/* =========================================================
   10. RESULTS
========================================================= */

html body #ccRidePageRoot .ccRideResults {

    width: 100% !important;

    min-width: 0 !important;
}


/* =========================================================
   MOBILE FILTER BUTTON
========================================================= */

html body #ccRidePageRoot .ccRideMobileToolbar {

    width: calc(100% - 28px) !important;

    margin: 0 auto 13px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;
}


html body #ccRidePageRoot .ccRideMobileFilterButton {

    min-height: 40px !important;

    padding: 0 14px !important;

    border: 1px solid var(--cc-primary) !important;

    border-radius: 9px !important;

    background: #FFFFFF !important;

    color: var(--cc-primary) !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    font-size: 11px !important;

    font-weight: 850 !important;

    cursor: pointer !important;
}


html body #ccRidePageRoot .ccRideMobileToolbar > span {

    color: var(--cc-muted) !important;

    font-size: 10px !important;

    font-weight: 700 !important;
}


/* =========================================================
   DESKTOP TOOLBAR HIDDEN ON MOBILE
========================================================= */

html body #ccRidePageRoot .ccRideResultsToolbar {

    display: none !important;
}


/* =========================================================
   11. MOBILE CAR GRID
   HARD LOCK = ONE COLUMN

   These rules deliberately use !important so Bootstrap,
   old CSS and other page CSS cannot create two columns.
========================================================= */

html body #ccRidePageRoot .ccRideGrid,
html body #ccRidePageRoot #ccRideGrid {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 14px !important;

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    grid-template-rows: none !important;

    grid-auto-columns: minmax(0, 1fr) !important;

    grid-auto-flow: row !important;

    gap: 14px !important;

    align-items: start !important;
}


/* =========================================================
   CARD HARD LOCK
========================================================= */

html body #ccRidePageRoot .ccRideGrid > .ccRideCard {

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    float: none !important;

    display: block !important;

    grid-column: auto !important;

    background: #FFFFFF !important;

    border: 1px solid var(--cc-border) !important;

    border-radius: 15px !important;

    overflow: hidden !important;

    box-shadow: var(--cc-shadow-card) !important;
}


/* =========================================================
   12. CARD IMAGE
========================================================= */

html body #ccRidePageRoot .ccRideCardImageWrap {

    position: relative !important;

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    background: #F1F3F4 !important;
}


html body #ccRidePageRoot .ccRideCardImage {

    width: 100% !important;

    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center !important;
}


/* =========================================================
   STATUS
========================================================= */

html body #ccRidePageRoot .ccRideStatus {

    position: absolute !important;

    z-index: 5 !important;

    left: 11px !important;

    top: 11px !important;

    min-height: 27px !important;

    padding: 0 9px !important;

    border-radius: 999px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    font-size: 9px !important;

    font-weight: 850 !important;
}


html body #ccRidePageRoot .ccRideStatusAvailable {

    background: rgba(236,253,245,.96) !important;

    color: var(--cc-success) !important;
}


html body #ccRidePageRoot .ccRideStatusAvailable span {

    width: 6px !important;
    height: 6px !important;

    border-radius: 50% !important;

    background: var(--cc-success) !important;
}


html body #ccRidePageRoot .ccRideStatusUnavailable {

    background: rgba(254,242,242,.97) !important;

    color: var(--cc-danger) !important;
}


/* =========================================================
   FAVOURITE
========================================================= */

html body #ccRidePageRoot .ccRideFavourite {

    position: absolute !important;

    z-index: 6 !important;

    right: 11px !important;

    top: 11px !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    border: 1px solid rgba(255,255,255,.75) !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,.94) !important;

    color: var(--cc-text) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   13. CARD BODY
========================================================= */

html body #ccRidePageRoot .ccRideCardBody {

    width: 100% !important;

    padding: 15px !important;
}


html body #ccRidePageRoot .ccRideCardBrand {

    display: block !important;

    margin-bottom: 4px !important;

    color: var(--cc-primary) !important;

    font-size: 9px !important;

    font-weight: 850 !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}


html body #ccRidePageRoot .ccRideCardHeading h2 {

    margin: 0 !important;

    color: var(--cc-black) !important;

    font-size: 19px !important;

    line-height: 1.15 !important;

    letter-spacing: -.025em !important;

    font-weight: 800 !important;
}


/* =========================================================
   14. FEATURES
========================================================= */

html body #ccRidePageRoot .ccRideFeatures {

    width: 100% !important;

    margin-top: 12px !important;

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 6px !important;
}


html body #ccRidePageRoot .ccRideFeatures span {

    min-height: 30px !important;

    padding: 0 8px !important;

    border: 1px solid var(--cc-border-light) !important;

    border-radius: 8px !important;

    background: #FAFBFB !important;

    color: var(--cc-muted) !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    font-size: 9px !important;

    font-weight: 700 !important;
}


html body #ccRidePageRoot .ccRideFeatures span i {

    width: 22px !important;
    height: 22px !important;

    flex: 0 0 22px !important;

    border-radius: 7px !important;

    background: var(--cc-primary-soft) !important;

    color: var(--cc-primary) !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important;

    margin: 0 !important;
}


/* =========================================================
   15. PRICE
========================================================= */

html body #ccRidePageRoot .ccRidePriceRow {

    width: 100% !important;

    margin-top: 15px !important;

    padding-top: 13px !important;

    border-top: 1px solid var(--cc-border-light) !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: space-between !important;

    gap: 10px !important;
}


html body #ccRidePageRoot .ccRidePriceMain {

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;
}


html body #ccRidePageRoot .ccRidePriceMain span {

    color: var(--cc-muted) !important;

    font-size: 9px !important;

    font-weight: 650 !important;
}


html body #ccRidePageRoot .ccRidePriceMain strong {

    margin-top: 3px !important;

    color: var(--cc-black) !important;

    font-size: 22px !important;

    line-height: 1 !important;

    font-weight: 800 !important;
}


html body #ccRidePageRoot .ccRidePriceMeta {

    display: flex !important;

    align-items: baseline !important;

    gap: 3px !important;

    color: var(--cc-muted) !important;

    font-size: 10px !important;
}


html body #ccRidePageRoot .ccRidePriceMeta strong {

    color: var(--cc-primary) !important;

    font-size: 14px !important;
}


html body #ccRidePageRoot .ccRideTripDuration {

    margin-top: 7px !important;

    color: var(--cc-light) !important;

    font-size: 9px !important;
}


html body #ccRidePageRoot .ccRideTripDuration i {

    margin-right: 4px !important;

    color: var(--cc-primary) !important;
}


/* =========================================================
   16. BOOK BUTTON
========================================================= */

html body #ccRidePageRoot .ccRideCardAction {

    width: 100% !important;

    margin-top: 14px !important;
}


html body #ccRidePageRoot .ccRideBookButton {

    width: 100% !important;

    min-height: 46px !important;

    padding: 0 14px !important;

    border: 0 !important;

    border-radius: 10px !important;

    background: var(--cc-primary) !important;

    color: #FFFFFF !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    font-size: 12px !important;

    font-weight: 850 !important;
}


html body #ccRidePageRoot .ccRideBookButton:hover {

    background: var(--cc-primary-dark) !important;

    color: #FFFFFF !important;
}


html body #ccRidePageRoot .ccRideSoldButton {

    justify-content: center !important;

    background: #E7E9EB !important;

    color: #7A8289 !important;
}


/* =========================================================
   17. TRUST
========================================================= */

html body #ccRidePageRoot .ccRideCardTrust {

    min-height: 30px !important;

    padding-top: 9px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 5px !important;

    color: var(--cc-light) !important;

    font-size: 8px !important;

    text-align: center !important;
}


html body #ccRidePageRoot .ccRideCardTrust i {

    color: var(--cc-primary) !important;
}


/* =========================================================
   18. EMPTY
========================================================= */

html body #ccRidePageRoot .ccRideEmpty {

    grid-column: 1 / -1 !important;

    width: 100% !important;

    min-height: 300px !important;

    padding: 25px !important;

    background: #FFFFFF !important;

    border: 1px solid var(--cc-border) !important;

    border-radius: 15px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;
}


html body #ccRidePageRoot .ccRideEmptyIcon {

    width: 60px !important;
    height: 60px !important;

    border-radius: 17px !important;

    background: var(--cc-primary-soft) !important;

    color: var(--cc-primary) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 24px !important;
}


html body #ccRidePageRoot .ccRideEmpty h2 {

    margin: 16px 0 5px !important;

    color: var(--cc-black) !important;

    font-size: 20px !important;
}


html body #ccRidePageRoot .ccRideEmpty p {

    margin: 0 !important;

    color: var(--cc-muted) !important;

    font-size: 12px !important;
}


html body #ccRidePageRoot .ccRideEmptyButton {

    margin-top: 16px !important;

    min-height: 42px !important;

    padding: 0 17px !important;

    border: 0 !important;

    border-radius: 9px !important;

    background: var(--cc-primary) !important;

    color: #FFFFFF !important;

    font-size: 11px !important;

    font-weight: 800 !important;
}


/* =========================================================
   19. VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    html body #ccRidePageRoot .ccRideHeaderInner {

        width: calc(100% - 22px) !important;
    }


    html body #ccRidePageRoot .ccRideSearchStripInner {

        width: calc(100% - 22px) !important;

        gap: 6px !important;
    }


    html body #ccRidePageRoot .cc-header-logo img,
    html body #ccRidePageRoot .ccRideLogo img {

        width: 106px !important;
    }


    html body #ccRidePageRoot .ccRideSearchDates {

        gap: 5px !important;
    }


    html body #ccRidePageRoot .ccRideSearchDates strong {

        font-size: 9px !important;
    }


    html body #ccRidePageRoot .ccRideSearchModify {

        flex-basis: 32px !important;

        width: 32px !important;

        height: 32px !important;

        min-height: 32px !important;
    }


    html body #ccRidePageRoot .ccRideGrid,
    html body #ccRidePageRoot #ccRideGrid {

        padding-left: 11px !important;

        padding-right: 11px !important;
    }


    html body #ccRidePageRoot .ccRideMobileToolbar {

        width: calc(100% - 22px) !important;
    }


    html body #ccRidePageRoot .ccRideCardBody {

        padding: 14px !important;
    }


    html body #ccRidePageRoot .ccRideCardHeading h2 {

        font-size: 18px !important;
    }
}


/* =========================================================
   20. DESKTOP
   769px AND ABOVE

   IMPORTANT:
   THERE IS NO 2-CARD DESKTOP BREAKPOINT.
   DESKTOP = 3 CARDS.
========================================================= */

@media (min-width: 769px) {

    /* =====================================================
       HEADER
    ===================================================== */

    html body #ccRidePageRoot .ccRideHeader {

        position: sticky !important;

        top: 0 !important;

        background: var(--cc-primary) !important;
    }


    html body #ccRidePageRoot .ccRideHeaderInner {

        width: min(
            calc(100% - 40px),
            var(--cc-container)
        ) !important;

        min-height: 76px !important;

        gap: 20px !important;
    }


    html body #ccRidePageRoot .cc-header-logo img,
    html body #ccRidePageRoot .ccRideLogo img {

        width: 145px !important;
    }


    /* =====================================================
       DESKTOP TRIP SUMMARY
    ===================================================== */

    html body #ccRidePageRoot .ccRideTripSummary {

        flex: 1 1 auto !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 12px !important;
    }


    html body #ccRidePageRoot .ccRideTripItem {

        min-width: 125px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 3px !important;
    }


    html body #ccRidePageRoot .ccRideTripLabel {

        color: rgba(255,255,255,.72) !important;

        font-size: 9px !important;

        font-weight: 800 !important;

        letter-spacing: .07em !important;

        text-transform: uppercase !important;
    }


    html body #ccRidePageRoot .ccRideTripItem strong {

        color: #FFFFFF !important;

        font-size: 11px !important;

        white-space: nowrap !important;
    }


    html body #ccRidePageRoot .ccRideTripDivider {

        color: #99F6E4 !important;

        font-size: 16px !important;

        font-weight: 800 !important;
    }


    /* =====================================================
       DESKTOP MODIFY BUTTON
    ===================================================== */

    html body #ccRidePageRoot .ccRideModifyButton {

        min-height: 37px !important;

        padding: 0 13px !important;

        border: 1px solid rgba(255,255,255,.7) !important;

        border-radius: 999px !important;

        background: rgba(255,255,255,.12) !important;

        color: #FFFFFF !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 6px !important;

        font-size: 11px !important;

        font-weight: 800 !important;

        cursor: pointer !important;

        white-space: nowrap !important;
    }


    html body #ccRidePageRoot .ccRideModifyButton:hover {

        background: #FFFFFF !important;

        color: var(--cc-primary) !important;
    }


    /* =====================================================
       DESKTOP HEADER ACTIONS
    ===================================================== */

    html body #ccRidePageRoot .ccRideHeaderActions {

        margin-left: 0 !important;

        flex: 0 0 auto !important;

        gap: 6px !important;
    }


    html body #ccRidePageRoot .ccRideHeaderAction {

        width: auto !important;

        min-height: 39px !important;

        height: 39px !important;

        padding: 0 11px !important;

        border-radius: 8px !important;

        display: inline-flex !important;

        color: var(--cc-primary) !important;

        background: #FFFFFF !important;

        font-size: 11px !important;
    }


    html body #ccRidePageRoot .ccRideHeaderAction span {

        display: inline !important;
    }


    html body #ccRidePageRoot .ccRideLoginAction {

        border: 1px solid #FFFFFF !important;

        background: #FFFFFF !important;
    }


    /* =====================================================
       HIDE MOBILE TRIP STRIP
    ===================================================== */

    html body #ccRidePageRoot .ccRideSearchStrip {

        display: none !important;
    }


    /* =====================================================
       MODIFY PANEL
    ===================================================== */

    html body #ccRidePageRoot .ccRideModifyPanel {

        padding: 20px !important;
    }


    html body #ccRidePageRoot .ccRideModifyInner {

        width: min(
            calc(100% - 20px),
            var(--cc-container)
        ) !important;
    }


    html body #ccRidePageRoot .ccRideSearchForm {

        grid-template-columns:
            1.2fr
            1fr
            1fr
            auto
            42px !important;

        gap: 10px !important;
    }


    html body #ccRidePageRoot .ccRideModifyClose {

        display: block !important;
    }


    /* =====================================================
       INTRO
    ===================================================== */

    html body #ccRidePageRoot .ccRideIntro {

        padding: 34px 0 28px !important;
    }


    html body #ccRidePageRoot .ccRideIntro .ccRideContainer {

        width: min(
            calc(100% - 40px),
            var(--cc-container)
        ) !important;

        display: flex !important;

        align-items: flex-end !important;

        justify-content: space-between !important;

        gap: 30px !important;
    }


    html body #ccRidePageRoot .ccRideEyebrow {

        font-size: 10px !important;
    }


    html body #ccRidePageRoot .ccRideIntro h1 {

        font-size: clamp(30px, 3vw, 42px) !important;
    }


    html body #ccRidePageRoot .ccRideIntro p {

        font-size: 14px !important;
    }


    html body #ccRidePageRoot .ccRideAvailability {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-end !important;
    }


    html body #ccRidePageRoot .ccRideAvailability strong {

        color: var(--cc-primary) !important;

        font-size: 26px !important;
    }


    html body #ccRidePageRoot .ccRideAvailability span {

        color: var(--cc-muted) !important;

        font-size: 11px !important;
    }


    /* =====================================================
       LISTING
    ===================================================== */

    html body #ccRidePageRoot .ccRideListing {

        padding-bottom: 70px !important;
    }


    html body #ccRidePageRoot .ccRideListingContainer {

        width: min(
            calc(100% - 40px),
            var(--cc-container)
        ) !important;

        margin-left: auto !important;

        margin-right: auto !important;

        display: grid !important;

        grid-template-columns:
            235px
            minmax(0, 1fr) !important;

        gap: 26px !important;

        align-items: start !important;
    }


    /* =====================================================
       DESKTOP FILTER SIDEBAR
    ===================================================== */

    html body #ccRidePageRoot .ccRideFilters {

        position: sticky !important;

        top: 96px !important;

        width: 100% !important;

        max-height: none !important;

        padding: 20px !important;

        border: 1px solid var(--cc-border) !important;

        border-radius: var(--cc-radius-lg) !important;

        box-shadow: var(--cc-shadow-card) !important;

        transform: none !important;

        overflow: visible !important;
    }


    html body #ccRidePageRoot .ccRideFilterClose {

        display: none !important;
    }


    html body #ccRidePageRoot .ccRideFilterOverlay {

        display: none !important;
    }


    /* =====================================================
       DESKTOP TOOLBAR
    ===================================================== */

    html body #ccRidePageRoot .ccRideMobileToolbar {

        display: none !important;
    }


    html body #ccRidePageRoot .ccRideResultsToolbar {

        min-height: 46px !important;

        margin-bottom: 17px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;
    }


    html body #ccRidePageRoot .ccRideResultsCount {

        display: flex !important;

        align-items: baseline !important;

        gap: 7px !important;
    }


    html body #ccRidePageRoot .ccRideResultsCount strong {

        color: var(--cc-black) !important;

        font-size: 17px !important;
    }


    html body #ccRidePageRoot .ccRideResultsCount span {

        color: var(--cc-muted) !important;

        font-size: 11px !important;
    }


    html body #ccRidePageRoot .ccRideSort {

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;
    }


    html body #ccRidePageRoot .ccRideSort label {

        color: var(--cc-muted) !important;

        font-size: 11px !important;
    }


    html body #ccRidePageRoot .ccRideSort select {

        height: 37px !important;

        padding: 0 11px !important;

        border: 1px solid var(--cc-border) !important;

        border-radius: 8px !important;

        background: #FFFFFF !important;

        color: var(--cc-text) !important;

        font-size: 11px !important;

        font-weight: 700 !important;
    }


    /* =====================================================
       DESKTOP GRID
       EXACTLY 3 CARDS
    ===================================================== */

    html body #ccRidePageRoot .ccRideGrid,
    html body #ccRidePageRoot #ccRideGrid {

        width: 100% !important;

        max-width: 100% !important;

        padding: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        grid-template-rows: none !important;

        grid-auto-columns: minmax(0, 1fr) !important;

        grid-auto-flow: row !important;

        gap: 20px !important;
    }


    html body #ccRidePageRoot .ccRideGrid > .ccRideCard {

        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        grid-column: auto !important;
    }


    html body #ccRidePageRoot .ccRideCardImageWrap {

        aspect-ratio: 16 / 10 !important;
    }


    html body #ccRidePageRoot .ccRideCardBody {

        padding: 16px !important;
    }


    html body #ccRidePageRoot .ccRideCardHeading h2 {

        font-size: 18px !important;
    }
}


/* =========================================================
   21. DESKTOP COMPACT WIDTH
   STILL THREE CARDS

   IMPORTANT:
   No 2-card breakpoint.
========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    html body #ccRidePageRoot .ccRideListingContainer {

        grid-template-columns:
            200px
            minmax(0, 1fr) !important;

        gap: 16px !important;
    }


    html body #ccRidePageRoot .ccRideGrid,
    html body #ccRidePageRoot #ccRideGrid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    html body #ccRidePageRoot .ccRideTripSummary {

        gap: 6px !important;
    }


    html body #ccRidePageRoot .ccRideTripItem {

        min-width: 90px !important;
    }


    html body #ccRidePageRoot .ccRideTripItem strong {

        font-size: 9px !important;
    }


    html body #ccRidePageRoot .ccRideTripLabel {

        font-size: 8px !important;
    }


    html body #ccRidePageRoot .ccRideModifyButton {

        padding-left: 9px !important;

        padding-right: 9px !important;

        font-size: 10px !important;
    }


    html body #ccRidePageRoot .ccRideHeaderAction {

        padding-left: 8px !important;

        padding-right: 8px !important;

        font-size: 10px !important;
    }
}


/* =========================================================
   22. FINAL MOBILE HARD LOCK
   THIS IS INTENTIONALLY LAST.

   Nothing after this file should be able to make the
   mobile result area two columns if this stylesheet loads.
========================================================= */

@media (max-width: 768px) {

    html body #ccRidePageRoot .ccRideListingContainer {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
    }


    html body #ccRidePageRoot .ccRideFilters {

        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        top: auto !important;

        width: 100% !important;
    }


    html body #ccRidePageRoot .ccRideGrid,
    html body #ccRidePageRoot #ccRideGrid {

        display: grid !important;

        width: 100% !important;

        max-width: 100% !important;

        grid-template-columns: minmax(0, 1fr) !important;

        grid-template-rows: none !important;

        grid-auto-flow: row !important;

        gap: 14px !important;

        padding-left: 14px !important;

        padding-right: 14px !important;
    }


    html body #ccRidePageRoot .ccRideGrid > .ccRideCard {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        grid-column: auto !important;

        float: none !important;
    }


    html body #ccRidePageRoot .ccRideResults {

        width: 100% !important;

        min-width: 0 !important;
    }


    html body #ccRidePageRoot .ccRideMobileToolbar {

        display: flex !important;
    }


    html body #ccRidePageRoot .ccRideResultsToolbar {

        display: none !important;
    }
}

html body #ccRidePageRoot .ccRideFeatures i {
    color: var(--cc-primary) !important;
    font-size: 12px !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: 1 !important;
}

/* =========================================================
   CARANDCAB — MODIFY HEADER TEAL HIGHLIGHT
   Only visual enhancement — does not change layout
========================================================= */

html body #ccRidePageRoot .ccRideModifyPanel {
    background:
        linear-gradient(
            135deg,
            rgba(15,118,110,.96) 0%,
            rgba(17,94,89,.96) 100%
        ) !important;

    padding: 12px 14px !important;

    border-top: 1px solid rgba(15,118,110,.18);
    border-bottom: 1px solid rgba(15,118,110,.28);

    box-shadow:
        0 4px 16px rgba(15,118,110,.14);
}


/* Highlighted inner area */

html body #ccRidePageRoot .ccRideModifyInner {
    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 14px;

    padding: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* Keep heading clean */

html body #ccRidePageRoot .ccRideModifyHeading {
    margin-bottom: 12px;
}


/* Slightly softer heading icon */

html body #ccRidePageRoot .ccRideModifyIcon {
    background: rgba(255,255,255,.13) !important;
    color: #99F6E4 !important;
    border: 1px solid rgba(255,255,255,.12);
}


/* Text stays readable on teal */

html body #ccRidePageRoot .ccRideModifyHeading strong {
    color: #FFFFFF !important;
}

html body #ccRidePageRoot .ccRideModifyHeading span {
    color: rgba(255,255,255,.75) !important;
}