/* ==========================================================================
   RC TRAVELS - ROYAL THEME
   --------------------------------------------------------------------------
   Royal was chosen from the five palettes that were trialled, so the other
   four (maroon, midnight, emerald, charcoal) and the picker that switched
   between them have been removed.

   The variable system is kept deliberately. Colours live in one block here
   instead of being scattered through the stylesheets, which is what made the
   earlier palette changes so painful - values were baked into individual
   rules, so editing a variable never fully changed the look.

   PALETTE (current - see "THE DARK PURPLE IS GONE" below for the history)
     slate   #223142   brand: structure, headings, active states
     orange  #f97316   the single call-to-action colour
     ink     #17212b   footer and the one dark band

   ONE WARM COLOUR ONLY. Royal originally paired indigo with amber #f2a713,
   but the reference layout uses orange for the search button and nothing else
   warm. Two warm accents competed, so amber was dropped and orange carries
   every call to action.

   --brand-rgb / --accent-rgb hold bare "r, g, b" triplets so they work inside
   rgba() for glows and focus rings. Hex cannot do that.
   ========================================================================== */

/*
   THE DARK PURPLE IS GONE.

   Indigo #3b2f8f was the brand colour and it drove the header, the footer, the
   dark bands, every glow and every active state, which is why purple was
   everywhere. It is replaced by a neutral dark slate for structure and text,
   with orange kept as the single accent - the reference works the same way:
   near-black type on white, one warm colour for the action.

   --brand is now the slate, so everything that referenced it follows
   automatically instead of needing another sweep.
*/
body.gogo,
body.gogo[data-theme="royal"] {
    --brand:        #223142;
    --brand-rgb:    34, 49, 66;
    --brand-hover:  #16212e;
    --brand-alt:    #2f4257;
    --brand-tint:   #eef2f6;
    --brand-tint-2: #dde5ec;

    --accent:       #f97316;
    --accent-rgb:   4, 60, 92;
    --accent-hover: #e25f08;
    --accent-tint:  #eef2f8;
    --accent-ink:   #ffffff;   /* white on this orange clears 4.5:1 */

    --ink:          #17212b;
    --ink-2:        #223142;
    --ink-3:        #37475a;
    --body:         #4d5a68;
    --muted:        #6b7885;
    --muted-2:      #9aa5b1;

    --line:         #e7ebef;
    --line-2:       #cfd6dd;
    --surface:      #ffffff;
    --surface-2:    #f8fafb;
    --surface-3:    #f2f5f7;

    --header-bg:    #ffffff;
    --footer-bg:    #17212b;
    --on-header:    #17212b;

    /* Slate, not purple. Used only by the footer and the one dark band. */
    --hero-grad:    linear-gradient(135deg, #17212b 0%, #223142 60%, #2f4257 100%);
    --dark-grad:    linear-gradient(135deg, #17212b 0%, #223142 70%, #2f4257 100%);
}


/* ==========================================================================
   PART 2 - RULES THAT FOLLOW THE PALETTE
   These had colours written into them directly in gogo.css. Re-declared here
   in terms of the variables; this file loads last, so these win.
   ========================================================================== */

body.gogo .gogo-header {
    background: var(--header-bg);
    border-bottom: 3px solid var(--brand-alt);
}

body.gogo .gogo-footer { background: var(--footer-bg); }
body.gogo .gogo-footer a:hover { color: var(--accent); }

body.gogo .gogo-hero { background: var(--hero-grad); }
body.gogo .gogo-section.dark { background: var(--dark-grad); }

body.gogo .gogo-section.tint,
body.gogo .gogo-section.amber-tint { background: var(--surface-3); }

/* ---- nav ---- */

body.gogo .gogo-nav .links > li > a { color: var(--on-header); }

body.gogo .gogo-nav .links > li > a:hover,
body.gogo .gogo-nav .links > li > a.active { color: var(--accent); }

body.gogo .gogo-phone { color: var(--on-header); }
body.gogo .gogo-phone:hover { color: var(--accent); }
body.gogo .gogo-phone i { color: var(--accent); }

body.gogo .gogo-header .rc-wordmark .travels { color: var(--on-header); }
body.gogo .gogo-header .rc-wordmark .rc { color: var(--accent); }

/* ---- buttons ---- */

body.gogo .btn-brand {
    background: var(--brand);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(var(--brand-rgb), .26);
}

body.gogo .btn-brand:hover {
    background: var(--brand-hover);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(var(--brand-rgb), .34);
}

body.gogo .rc-call-mobile { background: var(--brand); }
body.gogo .rc-call-mobile:hover { background: var(--brand-hover); }

/* ---- accents, rings, cards ---- */

body.gogo :focus-visible { outline: 3px solid rgba(var(--brand-rgb), .55); }

body.gogo .section-head .eyebrow {
    background: var(--brand-tint);
    border: 1px solid rgba(var(--brand-rgb), .18);
    color: var(--brand);
}

body.gogo .section-head h2::after,
body.gogo .search-lead h1::after {
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 100%);
}

body.gogo .cab-card:hover,
body.gogo .fleet-card:hover,
body.gogo .feat-card:hover,
body.gogo .pkg-card:hover,
body.gogo .rate-card:hover { border-color: rgba(var(--brand-rgb), .30); }

body.gogo .faq-item.open { border-color: rgba(var(--brand-rgb), .35); }

body.gogo .route-chip,
body.gogo .route-chip.billing {
    background: var(--brand-tint);
    border-color: rgba(var(--brand-rgb), .28);
    color: var(--brand);
}

body.gogo .billing-basis i { color: var(--brand); }

body.gogo .fab-call { background: var(--brand); }
body.gogo .fab-call .fab-radar { background: rgba(var(--brand-rgb), .45); }

body.gogo .pkg-head { background: var(--brand-tint); }
body.gogo .pkg-row .price { color: var(--brand); }
body.gogo .rate-card { border-top-color: var(--accent); }
body.gogo .rate-card .ico { background: var(--brand-tint); color: var(--brand); }

body.gogo .hero-panel-head i { background: var(--brand-tint); color: var(--brand); }
body.gogo .hero-panel-head .num:hover { color: var(--brand); }

body.gogo .gogo-hero .hero-usp .ico { background: var(--accent); color: var(--accent-ink); }
body.gogo .gogo-hero h1 .accent { color: var(--accent); }
body.gogo .gogo-hero .eyebrow .dot { background: var(--accent); }


/* ==========================================================================
   PART 3 - DESIGN REFINEMENTS
   Vertical rhythm, type scale and card weight. These are the things that made
   the page feel like a template regardless of palette.
   ========================================================================== */

body.gogo .gogo-section { padding: 74px 0; }

@media (max-width: 700px) {
    body.gogo .gogo-section { padding: 48px 0; }
}

body.gogo .section-head { margin-bottom: 40px; }

body.gogo .section-head h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    letter-spacing: -.015em;
    line-height: 1.18;
}

body.gogo .section-head > p {
    font-size: 15.5px;
    color: var(--muted);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

body.gogo .gogo-hero h1 { font-size: clamp(30px, 5vw, 47px); }
body.gogo .gogo-hero .lede { font-size: 16px; max-width: 540px; }

body.gogo .pkg-card,
body.gogo .rate-card,
body.gogo .feat-card,
body.gogo .fleet-card,
body.gogo .cab-card {
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

body.gogo .pkg-card:hover,
body.gogo .rate-card:hover,
body.gogo .feat-card:hover,
body.gogo .fleet-card:hover {
    box-shadow: 0 16px 38px rgba(0, 0, 0, .10);
    transform: translateY(-3px);
}

/* ---- "Why us" band on the dark gradient ---- */

body.gogo .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

body.gogo .why-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
}

body.gogo .why-card:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-3px);
}

body.gogo .why-card .ico {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    display: grid;
    place-items: center;
    font-size: 21px;
}

body.gogo .why-card h3 {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.1;
}

body.gogo .why-card h3 small { font-size: 17px; opacity: .8; }

body.gogo .why-card p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

body.gogo .gogo-section.dark .section-head h2 { color: #ffffff; }
body.gogo .gogo-section.dark .section-head > p { color: rgba(255, 255, 255, .76); }

body.gogo .gogo-section.dark .section-head .eyebrow {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

body.gogo .gogo-section.dark .section-head .eyebrow .dot { background: var(--accent); }


/* ==========================================================================
   PART 4 - THE BOOKING BAND (built to the supplied reference)
   --------------------------------------------------------------------------
   Structure being matched, top to bottom:

     deep navy panel, fading to near-white at the foot
       a large soft circle bleeding off the right edge
       mode switcher .... Cabs | Taxi packages
       trip tabs ........ ONE WAY | ROUND TRIP | LOCAL TRIP | AIRPORT TRIP
       white card ....... From / To / Date / Time
       orange Search button, centred

   The tabs sit ON the card's top edge rather than inside it, which is what
   gives the reference its layered look.
   ========================================================================== */

body.gogo .gogo-search.at-top {
    position: relative;
    /* overflow is clipped on the decorative layer instead of here - clipping
       the band itself sliced the trip tabs in half, because they were pulled
       above the card with a negative transform. */
    padding: 34px 0 56px;
    background: linear-gradient(180deg,
                #1d1a3f 0%,
                #2c2765 34%,
                #6a63b8 72%,
                #eeeef7 100%);
}

/* The oversized circle from the reference. Decorative, so it is pointer-inert
   and hidden from assistive tech by being a pseudo-element. */
body.gogo .gogo-search.at-top::before {
    content: "";
    position: absolute;
    top: 6%;
    right: -12%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%,
                rgba(255, 255, 255, .20) 0%,
                rgba(255, 255, 255, .09) 45%,
                rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top::before { width: 340px; height: 340px; right: -22%; }
}

body.gogo .gogo-search.at-top > * { position: relative; z-index: 1; }

/* ---- lead copy, now on a dark ground ---- */

body.gogo .search-lead { margin-bottom: 22px; }

body.gogo .search-lead h1 {
    color: #ffffff;
    font-size: clamp(24px, 3.6vw, 35px);
    margin-bottom: 8px;
}

body.gogo .search-lead h1 .amber { color: var(--accent); }
body.gogo .search-lead p { color: rgba(255, 255, 255, .80); }

/* The gradient rule under the h1 would cut the panel in half here. */
body.gogo .search-lead h1::after { display: none; }

/* ------------------------------------------------ mode switcher ------- */

body.gogo .book-modes {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 18px;
    padding: 0 16px;
}

body.gogo .book-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 124px;
    padding: 15px 22px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    color: var(--ink-2);
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.gogo .book-mode i { font-size: 19px; color: var(--brand); }

body.gogo .book-mode:hover { transform: translateY(-2px); }

body.gogo .book-mode.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

body.gogo .book-mode.active i { color: #ffffff; }

/* ------------------------------------------------- trip tabs ---------- */

body.gogo .search-card {
    position: relative;
    background: #ffffff;
    border: none;
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(18, 15, 50, .30);
    padding: 0;
}

/* Tabs ride the top edge of the card. */
body.gogo .trip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0 18px;
    margin: 0;
    border: none;
    background: transparent;
}

body.gogo .trip-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 11px;
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 15, 50, .10);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.gogo .trip-pill i { font-size: 15px; color: var(--brand); }

body.gogo .trip-pill:hover { transform: translateY(-2px); }

body.gogo .trip-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(var(--brand-rgb), .38);
}

body.gogo .trip-pill.active i { color: #ffffff; }

/* --------------------------------------------------- fields ----------- */

body.gogo .search-body { padding: 4px 26px 28px; }

body.gogo .airport-strip { padding: 0 26px 6px; }

body.gogo .field > label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
}

/* Flat, low-contrast controls like the reference: a hairline box that only
   gains colour on focus, rather than a heavy filled input. */
body.gogo .field .control {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 13px;
    background: #ffffff;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.gogo .field .control i { color: var(--muted-2); font-size: 14px; flex: none; }

body.gogo .field .control:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12);
}

body.gogo .field .control input,
body.gogo .field .control select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    /* 16px so iOS Safari does not zoom the page on focus. */
    font-size: 16px;
    color: var(--ink);
    font-family: var(--body-font);
}

body.gogo .field .control input::placeholder { color: var(--muted-2); }

body.gogo .swap-btn {
    background: #ffffff;
    border: 1px solid var(--line-2);
    color: var(--brand);
}

body.gogo .swap-btn:hover { background: var(--brand-tint); border-color: var(--brand); }

/* ------------------------------------------- the orange Search CTA ---- */

body.gogo .search-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 26px 26px;
    border: none;
}

body.gogo .search-note { color: var(--muted); font-size: 13px; }
body.gogo .search-note i { color: var(--brand); }

body.gogo .btn-search {
    min-width: 210px;
    justify-content: center;
    padding: 14px 40px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: 0 12px 26px rgba(var(--accent-rgb), .40);
}

body.gogo .btn-search:hover,
body.gogo .btn-search:focus {
    background: var(--accent-hover);
    color: var(--accent-ink);
    box-shadow: 0 16px 32px rgba(var(--accent-rgb), .48);
}

body.gogo .btn-search i { color: var(--accent-ink); }

/* --------------------------------- retired: mode-panel scaffolding ----- */

/* These belonged to a Cabs / Taxi packages switcher that has been removed.
   Kept as inert rules only so any leftover markup cannot render a stray box. */
body.gogo .mode-panel[hidden] { display: none; }

body.gogo .pkg-inline { padding: 26px 26px 30px; }

body.gogo .pkg-inline > p {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 20px;
}

@media (max-width: 700px) {
    body.gogo .gogo-search.at-top { padding: 24px 0 40px; }
    body.gogo .book-mode { min-width: 0; flex: 1 1 0; padding: 13px 12px; font-size: 13px; }
    body.gogo .trip-strip { gap: 6px; }
    body.gogo .trip-pill { padding: 10px 12px; font-size: 11.5px; letter-spacing: .04em; }
    body.gogo .search-body { padding: 4px 16px 22px; }
    body.gogo .search-foot { padding: 0 16px 22px; }
    body.gogo .btn-search { width: 100%; }
}


/* ------------------------------------------ fixed-price route cards ---- */

/* A fixed price is a commitment, so it is visually distinct from an estimate
   rather than styled identically and differing only in a small caption. */
body.gogo .gc-fare-price small { text-transform: uppercase; letter-spacing: .06em; }

body.gogo .gc-fare-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--accent-tint);
    color: #8a4a00;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

/* The fixed-price line reads as the headline number on the card. */
body.gogo .gc-fare-amt { color: var(--brand); }


/* ==========================================================================
   PART 5 - WHITE HEADER
   --------------------------------------------------------------------------
   The top bar is white with the logo in the left corner, matching the
   reference. Everything that was written for a dark bar has to invert with it,
   which is why this block exists rather than just changing --header-bg.

   THE LOGO NEEDS A TILE. The supplied artwork has a flat grey backdrop baked
   into the file, and its "TRAVELS" wordmark and tagline are WHITE. Dropping it
   straight onto a white bar would show a grey rectangle; knocking the grey out
   to transparent would make the white lettering vanish. So the grey is kept and
   presented deliberately - rounded, inset, with a hairline edge - so it reads
   as a brand tile rather than an untrimmed image.
   ========================================================================== */

body.gogo .gogo-header {
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 14px rgba(18, 15, 50, .07);
}

/* ---- nav on white ---- */

body.gogo .gogo-nav .links > li > a {
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 500;
}

body.gogo .gogo-nav .links > li > a:hover { color: var(--brand); }

/* Active page gets the orange underline from the reference, not just colour. */
body.gogo .gogo-nav .links > li > a.active {
    color: var(--accent);
    font-weight: 600;
    position: relative;
}

body.gogo .gogo-nav .links > li > a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--accent);
}

/* ---- phone as an outlined pill, as in the reference ---- */

body.gogo .gogo-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    white-space: nowrap;
    transition: border-color .18s ease, color .18s ease;
}

body.gogo .gogo-phone:hover {
    border-color: var(--brand);
    color: var(--brand);
}

body.gogo .gogo-phone i { color: var(--brand); }

/* ---- burger and mobile menu on white ---- */

body.gogo .gogo-burger span { background: var(--ink); }

@media (max-width: 991px) {
    body.gogo .gogo-nav {
        background: #ffffff;
        border-top: 1px solid var(--line);
        box-shadow: 0 14px 30px rgba(18, 15, 50, .12);
    }

    body.gogo .gogo-nav .links > li > a { color: var(--ink-2); }
    body.gogo .gogo-nav .links > li > a.active::after { display: none; }
}

/* ---- the logo tile ---- */

body.gogo .gogo-header .rc-logo {
    padding: 5px;
    border-radius: 12px;
    background: transparent;
}

body.gogo .gogo-header .rc-logo-img {
    height: 52px;
    width: auto;
    max-width: none;
    border-radius: 9px;
    /* A hairline edge stops the grey tile from looking like a loading artefact
       against the white bar. */
    box-shadow: 0 0 0 1px rgba(18, 15, 50, .08);
    display: block;
}

@media (max-width: 480px) {
    body.gogo .gogo-header .rc-logo-img { height: 42px; }
}

/* Wordmark fallback, if the image is ever missing, must be dark on white. */
body.gogo .gogo-header .rc-wordmark .travels { color: var(--ink); }
body.gogo .gogo-header .rc-wordmark .rc { color: var(--brand); }
body.gogo .gogo-header .rc-wordmark-tag { color: var(--muted); }

/* ---- footer keeps the dark treatment, so its logo tile matches there too ---- */

body.gogo .rc-logo-footer .rc-logo-img {
    height: 74px;
    width: auto;
    max-width: none;
    border-radius: 10px;
}


/* ==========================================================================
   PART 6 - BOOKING BAND, REBUILT
   --------------------------------------------------------------------------
   WHAT WAS ACTUALLY WRONG, rather than the colours I kept changing:

   1. The trip tabs were sliced in half. They were pulled 22px above the card
      with a negative transform, inside a band with overflow:hidden, so the
      band cut straight through them. Fixed by giving the tabs a normal place
      inside the card. No negative offsets anywhere now, so nothing can be
      clipped by its own container again.

   2. The logo rendered as a cramped thumbnail. It was sized by height inside a
      small padded tile, so a square mark came out about 40px wide with a box
      around it. It is now a proper 46px mark with the name set beside it.

   3. The card had a large dead gap above the Search button, because the button
      sat in its own centred block with its own padding on top of the grid's
      bottom margin.

   4. Controls were different heights - the date input, the time select and the
      text inputs each had their own - so the row never lined up.

   These are execution defects, not taste. That is why changing the palette
   three times never helped.
   ========================================================================== */

/* ---- decorative circle now clipped on its own layer ---- */

body.gogo .gogo-search.at-top::before {
    /* Pulled inside the band's own box so it cannot cause a horizontal
       scrollbar now that the band no longer clips. */
    top: 4%;
    right: 0;
    width: 420px;
    height: 420px;
    opacity: .9;
}

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top::before { width: 260px; height: 260px; right: 0; }
}

/* ---- band framing ---- */

body.gogo .gogo-search.at-top {
    padding: 40px 0 64px;
    background: linear-gradient(180deg, #1d1a3f 0%, #2c2765 46%, #4a4394 100%);
}

body.gogo .search-lead { margin-bottom: 26px; }

/* ---- mode switcher ---- */

body.gogo .book-modes { gap: 12px; margin-bottom: 20px; }

body.gogo .book-mode {
    flex-direction: row;
    gap: 9px;
    min-width: 0;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14.5px;
}

body.gogo .book-mode i { font-size: 16px; }

/* ---- the card ---- */

body.gogo .search-card {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    border-radius: 16px;
    box-shadow: 0 24px 54px rgba(12, 10, 40, .34);
    overflow: hidden;   /* safe: nothing is offset outside it any more */
}

/* ---- trip tabs: a segmented strip along the top of the card ---- */

body.gogo .trip-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    justify-content: flex-start;
    padding: 0;
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
    /* hide the scrollbar but keep the scrolling on narrow screens */
    scrollbar-width: none;
}

body.gogo .trip-strip::-webkit-scrollbar { display: none; }

body.gogo .trip-pill {
    flex: 1 0 auto;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border: none;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .05em;
    white-space: nowrap;
}

body.gogo .trip-pill:last-child { border-right: none; }

body.gogo .trip-pill:hover {
    transform: none;
    background: #ffffff;
    color: var(--ink-2);
}

body.gogo .trip-pill.active {
    background: #ffffff;
    color: var(--brand);
    box-shadow: inset 0 -3px 0 var(--brand);
}

body.gogo .trip-pill.active i { color: var(--brand); }
body.gogo .trip-pill i { font-size: 14px; color: var(--muted-2); }

/* ---- fields: one consistent control height, aligned row ---- */

body.gogo .search-body { padding: 22px 24px 6px; }

body.gogo .airport-strip { padding: 16px 24px 0; }

body.gogo .field > label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

/* 52px on every control, including the ones the browser styles itself. */
body.gogo .field .control { height: 52px; border-radius: 10px; }

body.gogo .field .control input,
body.gogo .field .control select {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
}

/* Date and time inputs previously kept their intrinsic height and sat a few
   pixels off the text inputs beside them. */
body.gogo .field .control input[type="date"],
body.gogo .field .control input[type="time"] {
    padding: 0;
    min-width: 0;
}

body.gogo .swap-cell { align-self: end; padding-bottom: 1px; }

body.gogo .swap-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* ---- Add Stop reads as a quiet action, not a floating pill ---- */

body.gogo .add-stop-btn,
body.gogo #btnAddStop {
    background: transparent;
    border: 1px dashed var(--line-2);
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    min-height: 36px;
}

body.gogo .add-stop-btn:hover,
body.gogo #btnAddStop:hover {
    border-color: var(--brand);
    background: var(--brand-tint);
}

/* ---- foot: note left, Search right, no dead space ---- */

body.gogo .search-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px 20px;
    margin-top: 8px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}

body.gogo .search-note { font-size: 12.5px; text-align: left; }

body.gogo .btn-search {
    min-width: 180px;
    min-height: 50px;
    padding: 0 34px;
    border-radius: 10px;
    font-size: 15px;
}

@media (max-width: 760px) {
    body.gogo .gogo-search.at-top { padding: 26px 0 40px; }
    body.gogo .book-mode { flex: 1 1 0; padding: 11px 10px; font-size: 13px; }
    body.gogo .trip-pill { min-height: 48px; padding: 0 16px; font-size: 11.5px; }
    body.gogo .search-body { padding: 16px 14px 4px; }
    body.gogo .search-foot { flex-direction: column; align-items: stretch; padding: 14px; }
    body.gogo .search-note { text-align: center; }
    body.gogo .btn-search { width: 100%; }
}

/* ==========================================================================
   PART 7 - HEADER LOGO, SIZED PROPERLY
   The supplied Icon 2.png is a square transparent mark with no wordmark in it,
   so the name is set alongside rather than relying on a 46px icon to carry it.
   The grey-tile treatment is gone: this artwork has a transparent background,
   so it needs no container.
   ========================================================================== */

body.gogo .gogo-header .rc-logo {
    padding: 0;
    gap: 11px;
    align-items: center;
}

body.gogo .gogo-header .rc-logo-img {
    height: 46px;
    width: 46px;
    max-width: none;
    border-radius: 0;
    box-shadow: none;   /* no tile, no hairline - it is transparent artwork */
    background: transparent;
    object-fit: contain;
}

body.gogo .rc-logo-lockup {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

body.gogo .rc-logo-lockup .l1 {
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .01em;
    color: var(--ink);
}

body.gogo .rc-logo-lockup .l1 span { color: var(--brand); }

body.gogo .rc-logo-lockup .l2 {
    font-family: var(--body-font);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--muted);
    margin-top: 2px;
}

body.gogo .gogo-footer .rc-logo-lockup .l1 { color: #ffffff; }
body.gogo .gogo-footer .rc-logo-lockup .l2 { color: rgba(255,255,255,.7); }

body.gogo .rc-logo-footer .rc-logo-img {
    height: 56px;
    width: 56px;
    border-radius: 0;
}

@media (max-width: 480px) {
    body.gogo .gogo-header .rc-logo-img { height: 38px; width: 38px; }
    body.gogo .rc-logo-lockup .l1 { font-size: 16px; }
    body.gogo .rc-logo-lockup .l2 { display: none; }
}


/* ==========================================================================
   PART 8 - IXIGO-STYLE BOOKING UI
   --------------------------------------------------------------------------
   Structure taken from the reference, top to bottom:

     white page, no dark band anywhere
     mode row ......... icon + label, active one carries a dark underline
     white card ....... rounded, hairline border, soft shadow
       trip toggles ... small outlined pills, active one tinted
       field strip .... ONE connected row divided by hairlines, small grey
                        label above a bold value, orange Search welded to the
                        right-hand end
       helper row ..... quiet reassurance line

   The two ideas doing most of the work:

   1. FIELDS ARE NOT BOXES. The reference uses one bordered strip subdivided by
      thin rules. Six individually bordered inputs is what made the previous
      version look busy and cheap.

   2. NO DARK BAND. Everything sits on white, so the orange Search is the only
      saturated thing above the fold and the eye goes straight to it.
   ========================================================================== */

/* ---------------------------------------------------- 1. white top band -- */

body.gogo .gogo-search.at-top {
    padding: 0 0 34px;
    background: #ffffff;
}

/* The decorative circle belongs to the dark treatment; there is no dark band
   any more, so it goes. */
body.gogo .gogo-search.at-top::before { display: none; }

/* Lead copy: left-aligned and quiet, like the reference's contextual line. */
body.gogo .search-lead {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 20px 0;
    text-align: left;
}

body.gogo .search-lead h1 {
    color: var(--ink);
    font-size: clamp(19px, 2.2vw, 24px);
    margin: 0 0 3px;
}

body.gogo .search-lead h1 .amber { color: var(--accent); }

body.gogo .search-lead p {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0;
}

/* ------------------------------------------------- 2. mode row (tabs) ---- */

body.gogo .book-modes {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 20px 0;
    justify-content: flex-start;
    gap: 30px;
    border: none;
}

body.gogo .book-mode {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 2px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 16px;
    position: relative;
    box-shadow: none;
}

body.gogo .book-mode i { font-size: 21px; color: var(--muted-2); }

body.gogo .book-mode:hover { transform: none; color: var(--ink-2); }
body.gogo .book-mode:hover i { color: var(--brand); }

body.gogo .book-mode.active {
    background: transparent;
    color: var(--ink);
    box-shadow: none;
}

body.gogo .book-mode.active i { color: var(--brand); }

/* The dark underline that marks the active mode in the reference. */
body.gogo .book-mode.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ink);
}

/* ------------------------------------------------------- 3. the card ---- */

body.gogo .search-card {
    max-width: 1180px;
    margin: 10px auto 0;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(18, 15, 50, .09);
    overflow: visible;
}

/* ---- trip toggles: small pills, not a segmented bar ---- */

body.gogo .trip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding: 18px 20px 0;
    background: transparent;
    border-bottom: none;
    overflow: visible;
}

body.gogo .trip-pill {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 18px;
    border: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: #ffffff;
    color: var(--body);
    font-family: var(--body-font);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

body.gogo .trip-pill i { display: none; }   /* the reference labels are text only */

body.gogo .trip-pill:hover {
    background: var(--surface-3);
    color: var(--ink-2);
    transform: none;
}

body.gogo .trip-pill.active {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: none;
    font-weight: 600;
}

/* ---- 4. the field strip: one bordered row, hairline dividers ---- */

body.gogo .search-body { padding: 16px 20px 0; }

body.gogo .search-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

body.gogo .search-grid > .field {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 14px;
    border-right: 1px solid var(--line);
    position: relative;
}

body.gogo .search-grid > .field:hover { background: var(--surface-2); }

body.gogo .field > label {
    font-family: var(--body-font);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    margin-bottom: 2px;
}

/* Controls lose their own borders - the strip provides the only frame. */
body.gogo .field .control {
    height: auto;
    min-height: 28px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    gap: 7px;
}

body.gogo .field .control:focus-within { border: none; box-shadow: none; }

body.gogo .field .control i { display: none; }

body.gogo .field .control input,
body.gogo .field .control select {
    height: 28px;
    line-height: 28px;
    /* Bold value under a light label, as the reference sets it. */
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 0;
}

body.gogo .field .control input::placeholder {
    color: var(--muted-2);
    font-weight: 400;
}

/* The focused cell is tinted rather than ringed, so the strip stays unbroken. */
body.gogo .search-grid > .field:focus-within { background: var(--brand-tint); }

/* swap control sits between From and To without its own column of padding */
body.gogo .swap-cell {
    flex: 0 0 auto;
    align-self: center;
    padding: 0;
    border-right: 1px solid var(--line);
    display: grid;
    place-items: center;
    width: 44px;
    align-self: stretch;
}

body.gogo .swap-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-2);
    background: #ffffff;
    color: var(--brand);
    font-size: 12px;
}

/* ---- 5. orange Search welded to the end of the strip ---- */

body.gogo .search-cta {
    flex: 0 0 auto;
    display: flex;
    border-right: none;
}

body.gogo .search-cta .btn-search {
    height: 100%;
    min-height: 66px;
    min-width: 170px;
    padding: 0 30px;
    border-radius: 0;
    background: var(--accent);
    color: #ffffff;
    font-family: var(--head-font);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    gap: 9px;
}

body.gogo .search-cta .btn-search:hover {
    background: var(--accent-hover);
    color: #ffffff;
    box-shadow: none;
    transform: none;
}

body.gogo .search-cta .btn-search i { color: #ffffff; font-size: 13px; }

/* ---- 6. helper row under the strip ---- */

body.gogo .search-foot {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 20px 18px;
    margin: 0;
    border-top: none;
    background: transparent;
}

body.gogo .search-note { font-size: 12.5px; color: var(--muted); text-align: left; }
body.gogo .search-note i { color: var(--ok); }

/* stops and route readout sit quietly under the strip */
body.gogo .stops-block { padding: 14px 20px 0; }
body.gogo .route-strip { padding: 12px 20px 0; }

/* ---- 7. left-aligned section headings, as the reference does ---- */

body.gogo .section-head { text-align: left; margin-bottom: 26px; }

body.gogo .section-head > p { margin-left: 0; margin-right: 0; }

body.gogo .section-head h2::after { margin-left: 0; margin-right: 0; }

/* ---- 8. narrow screens: the strip becomes a stack ---- */

@media (max-width: 900px) {
    body.gogo .search-grid { flex-wrap: wrap; border-radius: 12px; }

    body.gogo .search-grid > .field {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    body.gogo .swap-cell {
        flex: 1 1 100%;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 8px 0;
    }

    body.gogo .search-cta { flex: 1 1 100%; }
    body.gogo .search-cta .btn-search { width: 100%; min-height: 54px; border-radius: 0; }

    body.gogo .book-modes { gap: 20px; overflow-x: auto; }
    body.gogo .book-mode { font-size: 14.5px; white-space: nowrap; }
    body.gogo .book-mode i { font-size: 18px; }
}

/* ==========================================================================
   PART 9 - BIGGER LOGO
   The reference's mark is a solid tile that carries real weight in the bar, so
   ours is scaled up to match rather than sitting as a small icon.
   ========================================================================== */

body.gogo .gogo-header .rc-logo-img {
    height: 64px;
    width: 64px;
}

body.gogo .rc-logo-lockup .l1 { font-size: 23px; }
body.gogo .rc-logo-lockup .l2 { font-size: 11.5px; }

body.gogo .rc-logo-footer .rc-logo-img { height: 76px; width: 76px; }

@media (max-width: 600px) {
    body.gogo .gogo-header .rc-logo-img { height: 48px; width: 48px; }
    body.gogo .rc-logo-lockup .l1 { font-size: 18px; }
    body.gogo .rc-logo-lockup .l2 { display: none; }
}


/* ==========================================================================
   PART 10 - CORRECTIONS
   ========================================================================== */

/* -------------------------------------- 1. FLOATING BUTTONS: NO DRIFT --- */

/*
   The hover state used `transform: translateY(-3px) scale(1.04)` on a
   position:fixed element that also contains two absolutely positioned,
   animated radar rings. Transforming a fixed element creates a new containing
   block, so the rings re-anchor mid-animation and the whole thing appears to
   jump towards a corner on hover.

   The lift is gone. Hover now only changes the shadow and adds a label, which
   cannot move anything.
*/
body.gogo .fab:hover,
body.gogo .fab:active,
body.gogo .fab:focus {
    transform: none;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28);
}

/* The rings are pinned to the button's own box and are decorative only. */
body.gogo .fab-radar { pointer-events: none; }

/* A real label beside the button, instead of relying on the browser tooltip
   which appears wherever the pointer happens to be. */
body.gogo .fab::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    font-family: var(--body-font);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
    z-index: 3;
}

/* Label opens inward from each side, so it never runs off the screen edge. */
body.gogo .fab-whatsapp::after { left: calc(100% + 12px); }
body.gogo .fab-call::after     { right: calc(100% + 12px); }

body.gogo .fab:hover::after,
body.gogo .fab:focus-visible::after { opacity: 1; }

@media (max-width: 640px) {
    /* No room for labels on a phone, and they would cover the page. */
    body.gogo .fab::after { display: none; }
}

/* ----------------------------------------------- 2. DEAD SPACE ---------- */

/*
   The page was padded for a design with large images in it. With the stock
   artwork gone, several sections were left as a column of text beside an empty
   half. Sections that lost their art column are now single-column and centred,
   and the vertical rhythm is tightened throughout.
*/

body.gogo .gogo-section { padding: 52px 0; }

@media (max-width: 700px) {
    body.gogo .gogo-section { padding: 34px 0; }
}

body.gogo .section-head { margin-bottom: 26px; }

/* howto and drive lost their image columns - collapse the empty track. */
body.gogo .howto-grid,
body.gogo .drive-grid {
    display: block;
    max-width: 860px;
}

body.gogo .howto-copy,
body.gogo .drive-copy { max-width: none; }

/* the hero panel had generous padding to balance a photo that is now gone */
body.gogo .gogo-hero { padding: 42px 0; }

body.gogo .gogo-hero .inner { align-items: center; }

/* about / contact pages: the removed banners leave the first section flush
   against the header, which reads as broken rather than tidy. */
body.gogo .about-section,
body.gogo .contact-section { padding-top: 40px; }

body.gogo .about-image-card img {
    border-radius: 14px;
    display: block;
    width: 100%;
    height: auto;
    /* Portrait photo in a narrow column: cap it so it cannot dominate the page,
       and keep the whole vehicle in frame rather than cropping. */
    max-height: 520px;
    object-fit: contain;
    background: var(--surface-3);
}

/* --------------------------------------- 3. FARE TABLE (fixed prices) --- */

body.gogo .fare-table {
    max-width: 940px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

body.gogo .fare-row {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)) 84px;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}

body.gogo .fare-row:last-child { border-bottom: none; }
body.gogo .fare-row:not(.fare-head):hover { background: var(--surface-2); }

body.gogo .fare-head {
    background: var(--surface-3);
    font-family: var(--head-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

body.gogo .fr-route {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14.5px;
    color: var(--ink);
}

body.gogo .fr-route i { color: var(--muted-2); font-size: 11px; }

body.gogo .fr-price {
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ink);
    text-align: center;
}

body.gogo .fare-head .fr-price { font-weight: 700; color: var(--muted); }

body.gogo .fr-act { text-align: right; }

body.gogo .fr-act a {
    display: inline-block;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

body.gogo .fr-act a:hover { background: var(--accent-hover); color: #fff; }

body.gogo .fare-note {
    max-width: 940px;
    margin: 14px auto 0;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 760px) {
    /* Stack each route into a card, with the vehicle name as a label on each
       price - a 5-column grid at this width is unreadable. */
    body.gogo .fare-head { display: none; }

    body.gogo .fare-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
        padding: 14px;
    }

    body.gogo .fr-route { grid-column: 1 / -1; font-weight: 700; }

    body.gogo .fr-price {
        text-align: left;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }

    body.gogo .fr-price::before {
        content: attr(data-lbl);
        font-family: var(--body-font);
        font-weight: 400;
        color: var(--muted);
    }

    body.gogo .fr-act { grid-column: 1 / -1; text-align: left; }
}

/* ------------------------------- 4. LOCAL PACKAGE CHOOSER (in search) --- */

body.gogo .local-pkg-block { padding: 16px 20px 0; }

body.gogo .local-pkg-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

body.gogo .local-pkg-head strong {
    font-family: var(--head-font);
    font-size: 15px;
    color: var(--ink);
}

body.gogo .local-pkg-head span { font-size: 12.5px; color: var(--muted); }

body.gogo .local-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

body.gogo .local-pkg { cursor: pointer; display: block; }

/* The radio is hidden but still focusable, so keyboard users get the ring. */
body.gogo .local-pkg input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

body.gogo .lp-body {
    display: block;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    padding: 13px 15px;
    transition: border-color .16s ease, background .16s ease;
}

body.gogo .local-pkg:hover .lp-body { border-color: var(--muted-2); }

body.gogo .local-pkg.on .lp-body,
body.gogo .local-pkg input:checked + .lp-body {
    border-color: var(--accent);
    background: var(--accent-tint);
}

body.gogo .local-pkg input:focus-visible + .lp-body {
    outline: 3px solid rgba(var(--brand-rgb), .45);
    outline-offset: 2px;
}

body.gogo .lp-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px dashed var(--line);
}

body.gogo .lp-hrs {
    font-family: var(--head-font);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
}

body.gogo .lp-km { font-size: 12.5px; color: var(--muted); }

body.gogo .lp-rates { display: block; }

body.gogo .lp-rate {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font-size: 13px;
}

body.gogo .lp-rate .v { color: var(--body); }

body.gogo .lp-rate .p {
    font-family: var(--head-font);
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

body.gogo .lp-rate .p.tbd { font-weight: 500; font-size: 12px; color: var(--muted-2); }


/* ==========================================================================
   PART 11 - FLOATING CONTACT DOCK
   --------------------------------------------------------------------------
   The old buttons used the class `fab`, which Font Awesome 6 also defines as
   its brands-font alias, so the icon library was styling our buttons. They also
   positioned themselves independently - one anchored left, one right - and were
   ending up in the middle of the page rather than in a corner.

   Now: one fixed container, both buttons stacked inside it. A single positioned
   parent means they cannot separate, and `rc-fab` cannot collide with anything
   in Font Awesome.

   The old .fab rules in gogo.css are left alone; nothing carries that class any
   more, so they match nothing.
   ========================================================================== */

/* ---- geometry copied from gocabish.com ----

   Their markup is two fixed containers, one per corner, built from Tailwind
   utilities:

     left  : fixed flex left-5  lg:left-15  z-50 bottom-20 lg:bottom-15
     right : fixed flex right-5 lg:right-15 z-50 bottom-20 lg:bottom-15

   Translated (Tailwind lg = 1024px, spacing unit = 0.25rem):

     left-5  / right-5   ->  20px      left-15 / right-15  ->  60px
     bottom-20           ->  80px      lg:bottom-15        ->  60px
     z-50                ->  z-index: 50

   The two things worth copying are that they sit WELL clear of the bottom edge
   rather than hugging it, and that they are inset further from the sides on a
   wide screen. On a phone the extra bottom clearance also keeps them above the
   browser's own toolbar.

   Base values below are the small-screen ones, raised at 1024px, matching how
   their utilities cascade. */
.rc-fab-dock {
    position: fixed;
    bottom: 80px;
    z-index: 50;
    display: flex;
    /* Only the button catches the pointer, not the wrapper's box. */
    pointer-events: none;
}

.rc-fab-left  { left: 20px; }
.rc-fab-right { right: 20px; }

@media (min-width: 1024px) {
    .rc-fab-dock  { bottom: 60px; }
    .rc-fab-left  { left: 60px; }
    .rc-fab-right { right: 60px; }
}

.rc-fab {
    pointer-events: auto;
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 23px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    transition: box-shadow .18s ease, background .18s ease;
}

.rc-fab:hover,
.rc-fab:focus {
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.rc-fab-whatsapp { background: #25d366; }
.rc-fab-whatsapp:hover { background: #1eb955; }

.rc-fab-call { background: var(--brand); }
.rc-fab-call:hover { background: var(--brand-hover); }

.rc-fab > i { position: relative; z-index: 2; line-height: 1; }

/* ---- radar rings, pinned to the button ---- */

.rc-fab-radar {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    animation: rcFabRadar 2.4s ease-out infinite;
    pointer-events: none;
    z-index: 1;
}

.rc-fab-radar.delay { animation-delay: 1.2s; }

.rc-fab-whatsapp .rc-fab-radar { background: rgba(37, 211, 102, .5); }
.rc-fab-call     .rc-fab-radar { background: rgba(var(--brand-rgb), .45); }

@keyframes rcFabRadar {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.85); opacity: 0; }
    100% { transform: scale(1.85); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-fab-radar { animation: none; opacity: .25; transform: scale(1.3); }
}

/* ---- hover label ----
   Each label opens INWARD from its own edge: the left button's label opens to
   the right, the right button's to the left. Opening the wrong way would push
   it off the side of the screen. */

.rc-fab::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--ink);
    color: #fff;
    font-family: var(--body-font);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
    z-index: 3;
}

.rc-fab-left  .rc-fab::after { left:  calc(100% + 12px); }
.rc-fab-right .rc-fab::after { right: calc(100% + 12px); }

.rc-fab:hover::after,
.rc-fab:focus-visible::after { opacity: 1; }

@media (max-width: 640px) {
    /* Position is already handled by the base rules above (20px in, 80px up),
       which match the reference's small-screen values. Only the button size and
       the label change here - a hover label is meaningless on touch and would
       cover content. */
    .rc-fab { width: 48px; height: 48px; font-size: 20px; }
    .rc-fab::after { display: none; }
}

@media print {
    .rc-fab-dock { display: none !important; }
}


/* The Book control is a LinkButton now (it creates the search server-side),
   so it needs the same look the anchor had. */
body.gogo .fr-book {
    display: inline-block;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

body.gogo .fr-book:hover,
body.gogo .fr-book:focus { background: var(--accent-hover); color: #fff; }

/* ========================================================================== 
   INTERACTION FIXES - location suggestions and floating call action
   ========================================================================== */

/* The suggestion list extends below the connected search strip. Clipping the
   strip hid correctly loaded city results behind the stops row. */
body.gogo .search-grid { overflow: visible; }
body.gogo .search-grid > .field:focus-within { z-index: 4000; }

body.gogo .ac-loading,
body.gogo .ac-error {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
}

body.gogo .ac-loading { color: var(--muted); }
body.gogo .ac-error { color: #b91c1c; background: #fef2f2; }

/* Call uses the same orange action colour as Search and primary CTAs. */
body.gogo .rc-fab-call { background: var(--accent); }
body.gogo .rc-fab-call:hover { background: var(--accent-hover); }
body.gogo .rc-fab-call .rc-fab-radar { background: rgba(var(--accent-rgb), .45); }

/* ========================================================================== 
   REFERENCE-STYLE BOOKING HERO
   Clean white header, blue booking stage, floating trip cards and centred CTA.
   RC Travels keeps its own brand, fleet and booking functionality.
   ========================================================================== */

body.gogo .gogo-header .bar {
    max-width: 1220px;
    min-height: 82px;
    padding-left: 20px;
    padding-right: 20px;
}

body.gogo .gogo-header {
    box-shadow: 0 2px 12px rgba(23, 33, 43, .08);
    border-bottom: 1px solid #edf0f4;
}

body.gogo .gogo-nav .links { gap: 28px; }
body.gogo .rc-wa-btn {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), .22);
}
body.gogo .rc-wa-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

body.gogo .gogo-search.at-top {
    min-height: 390px;
    padding: 58px 20px 72px;
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(34, 49, 82, .98) 0%, rgba(91, 107, 146, .90) 46%, #eef2f8 100%);
}

body.gogo .gogo-search.at-top::before {
    display: block;
    top: 28px;
    right: 7%;
    width: 390px;
    height: 390px;
    opacity: 1;
    background: radial-gradient(circle at 38% 35%,
                rgba(255, 255, 255, .22) 0%,
                rgba(255, 255, 255, .12) 48%,
                rgba(255, 255, 255, 0) 70%);
}

body.gogo .search-lead { display: none; }

body.gogo .search-card {
    position: relative;
    max-width: 1180px;
    margin: 104px auto 0;
    padding: 0;
    overflow: visible;
    background: #ffffff;
    border: 1px solid rgba(207, 214, 221, .9);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(25, 37, 67, .20);
}

body.gogo .mode-panel { position: relative; }

body.gogo .trip-strip {
    position: absolute;
    left: 50%;
    top: -58px;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: max-content;
    max-width: calc(100vw - 40px);
    padding: 0;
    gap: 8px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    scrollbar-width: none;
}

body.gogo .trip-pill {
    flex: 0 0 auto;
    min-width: 146px;
    min-height: 58px;
    padding: 0 18px;
    justify-content: center;
    gap: 8px;
    border: 1px solid #dfe4eb;
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, .97);
    color: #303846;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(24, 35, 61, .15);
}

body.gogo .trip-pill i { display: inline-block; color: #49566c; font-size: 15px; }
body.gogo .trip-pill:hover { background: #ffffff; color: var(--brand); transform: translateY(-2px); }
body.gogo .trip-pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(var(--brand-rgb), .28);
}
body.gogo .trip-pill.active i { color: #ffffff; }

body.gogo .airport-strip { padding: 18px 18px 0; }
body.gogo .search-body { position: static; padding: 28px 18px 22px; }

body.gogo .search-grid {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) 42px minmax(210px, 1.35fr) minmax(145px, .78fr) minmax(135px, .7fr);
    align-items: end;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.gogo .search-grid > .field {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body.gogo .search-grid > .field:hover,
body.gogo .search-grid > .field:focus-within { background: transparent; }
body.gogo .search-grid > .field:focus-within { z-index: 4000; }

body.gogo .field > label {
    margin: 0 0 7px;
    color: #303846;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.gogo .field .control {
    display: flex;
    align-items: center;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    gap: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfe4eb;
    border-radius: 9px;
}
body.gogo .field .control i { display: inline-block; color: #8b96a8; font-size: 13px; }
body.gogo .field .control:focus-within {
    border: 1px solid var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .10);
}
body.gogo .field .control input,
body.gogo .field .control select {
    height: 46px;
    line-height: 46px;
    padding: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}
body.gogo .field .control input::placeholder { color: #a2aab6; font-weight: 400; }

body.gogo .swap-cell {
    width: 42px;
    min-height: 48px;
    padding: 0 0 1px;
    border: 0;
    align-self: end;
}
body.gogo .swap-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--brand);
    border-color: #dfe4eb;
}

body.gogo .search-cta {
    position: absolute;
    left: 50%;
    bottom: -27px;
    z-index: 30;
    display: flex;
    justify-content: center;
    transform: translateX(-50%);
}
body.gogo .search-cta .btn-search {
    width: auto;
    min-width: 154px;
    min-height: 54px;
    height: 54px;
    padding: 0 34px;
    justify-content: center;
    border-radius: 8px 8px 0 0;
    background: var(--accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), .30);
}
body.gogo .search-cta .btn-search:hover { background: var(--accent-hover); transform: translateY(-1px); }

body.gogo .stops-block { padding: 12px 0 0; }
body.gogo .route-strip { padding: 12px 0 0; }
body.gogo .search-foot {
    justify-content: center;
    padding: 10px 0 16px;
    margin: 0;
    border: 0;
    background: transparent;
}
body.gogo .search-note { text-align: center; }

body.gogo .gogo-hero {
    width: calc(100% - 40px);
    max-width: 1180px;
    margin: 42px auto 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(23, 33, 43, .15);
}

@media (max-width: 991px) {
    body.gogo .gogo-header .bar { min-height: 72px; padding-left: 14px; padding-right: 14px; }
    body.gogo .gogo-nav .links { gap: 0; }
}

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top { min-height: 0; padding: 42px 12px 66px; }
    body.gogo .gogo-search.at-top::before { width: 300px; height: 300px; right: 0; }
    body.gogo .search-card { margin-top: 88px; }
    body.gogo .trip-strip {
        left: 0;
        top: -66px;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        transform: none;
    }
    body.gogo .trip-pill { min-width: 132px; min-height: 58px; padding: 0 14px; font-size: 11px; }
    body.gogo .search-body { padding: 20px 14px 24px; }
    body.gogo .search-grid { grid-template-columns: 1fr; gap: 12px; }
    body.gogo .search-grid > .field { border: 0; }
    body.gogo .swap-cell { width: 100%; min-height: 34px; padding: 0; }
    body.gogo .swap-btn { transform: rotate(90deg); }
    body.gogo .search-foot { padding-bottom: 20px; }
    body.gogo .gogo-hero { width: calc(100% - 24px); margin-top: 36px; border-radius: 16px; }
}

@media (max-width: 480px) {
    body.gogo .gogo-header .rc-logo-img { width: 52px; height: 52px; }
    body.gogo .rc-logo-lockup .l1 { font-size: 18px; }
    body.gogo .rc-logo-lockup .l2 { font-size: 9px; }
    body.gogo .gogo-search.at-top { padding-left: 10px; padding-right: 10px; }
    body.gogo .trip-pill { min-width: 124px; }
}

/* Final geometry correction from rendered comparison with the supplied image. */
body.gogo .gogo-search.at-top {
    min-height: 0;
    padding-top: 158px;
}
body.gogo .search-card { margin-top: 0; }

@media (min-width: 901px) {
    body.gogo .search-body { padding-bottom: 30px; }
    body.gogo .stops-block {
        position: absolute;
        left: 18px;
        bottom: 10px;
        z-index: 10;
        padding: 0;
    }
    body.gogo .stops-block:has(.stop-row) {
        position: relative;
        left: auto;
        bottom: auto;
        padding: 12px 0 0;
    }
    body.gogo .search-foot { display: none; }
}

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top { padding-top: 114px; }
    body.gogo .search-card { margin-top: 0; }
    body.gogo .stops-block {
        position: relative;
        left: auto;
        bottom: auto;
        padding: 12px 0 0;
    }
    body.gogo .search-foot { display: none; }
}

/* ========================================================================== 
   ORIGINAL RCTRAVELS.IN VISUAL SYSTEM
   First-party maroon/black identity and locally stored client-owned imagery.
   ========================================================================== */
body.gogo,
body.gogo[data-theme="royal"] {
    --brand: #043c5c;
    --brand-rgb: 4, 60, 92;
    --brand-hover: #075275;
    --brand-alt: #111111;
    --brand-tint: #e7f0f5;
    --brand-tint-2: #c9dde8;
    --accent: #043c5c;
    --accent-rgb: 4, 60, 92;
    --accent-hover: #075275;
    --accent-tint: #e7f0f5;
    --ink: #111111;
    --ink-2: #222222;
    --footer-bg: #111111;
    --hero-grad: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
    --dark-grad: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
}

body.gogo .gogo-header {
    background: #111111;
    border: 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
}
body.gogo .gogo-header .bar { min-height: 75px; }
body.gogo .gogo-nav .links > li > a {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
}
body.gogo .gogo-nav .links > li > a:hover,
body.gogo .gogo-nav .links > li > a.active { color: #fcc808; }
body.gogo .gogo-nav .links > li > a.active::after { background: #fcc808; }
body.gogo .gogo-phone { color: #ffffff; border-color: rgba(255,255,255,.35); }
body.gogo .gogo-phone i,
body.gogo .gogo-phone:hover { color: #fcc808; }
body.gogo .gogo-phone:hover { border-color: #fcc808; }
body.gogo .gogo-header .rc-logo-lockup .l1 { color: #ffffff; }
body.gogo .gogo-header .rc-logo-lockup .l1 span,
body.gogo .gogo-header .rc-logo-lockup .l2 { color: #fcc808; }
body.gogo .gogo-burger span { background: #ffffff; }
body.gogo .rc-wa-btn { background: #043c5c; border-color: rgba(255,255,255,.32); box-shadow: none; }
body.gogo .rc-wa-btn:hover { background: #075275; border-color: #fcc808; }

body.gogo .gogo-search.at-top {
    padding: 112px 20px 125px;
    background: #f2f2f2;
}
body.gogo .gogo-search.at-top::before { display: none; }
body.gogo .search-card {
    max-width: 1180px;
    border: 2px solid #111111;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
body.gogo .trip-strip { top: -61px; gap: 8px; }
body.gogo .trip-pill {
    min-width: 145px;
    background: #043c5c;
    border: 1px solid #043c5c;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
    box-shadow: 0 7px 16px rgba(0,0,0,.14);
}
body.gogo .trip-pill i { color: #ffffff; }
body.gogo .trip-pill:hover { background: #075275; color: #ffffff; }
body.gogo .trip-pill.active {
    margin-top: -4px;
    background: #ffffff;
    border: 2px solid #043c5c;
    border-top-width: 4px;
    color: #043c5c;
    box-shadow: 0 7px 18px rgba(0,0,0,.16);
}
body.gogo .trip-pill.active i { color: #043c5c; }
body.gogo .field .control { border-color: #cfcfcf; border-radius: 6px; }
body.gogo .field .control:focus-within { border-color: #043c5c; box-shadow: 0 0 0 3px rgba(4, 60, 92,.10); }
body.gogo .search-cta .btn-search {
    background: #043c5c;
    border-radius: 5px;
    box-shadow: 0 8px 18px rgba(4, 60, 92,.28);
}
body.gogo .search-cta .btn-search:hover { background: #111111; }
body.gogo .add-stop-btn,
body.gogo #btnAddStop {
    background: #ffffff;
    border: 1px solid #043c5c;
    color: #043c5c;
    border-radius: 5px;
}
body.gogo .add-stop-btn:hover,
body.gogo #btnAddStop:hover { background: #043c5c; color: #ffffff; }

@media (min-width: 901px) {
    body.gogo .stops-block {
        left: 18px;
        bottom: -78px;
    }
    body.gogo .stops-block:has(.stop-row) {
        position: relative;
        left: auto;
        bottom: auto;
    }
}

body.gogo .rc-original-hero {
    position: relative;
    width: calc(100% - 40px);
    max-width: 1180px;
    min-height: 430px;
    margin: 46px auto 0;
    overflow: hidden;
    border-radius: 10px;
    background: #111111;
    box-shadow: 0 10px 28px rgba(0,0,0,.20);
}
body.gogo .rc-original-hero-bg {
    position: absolute;
    inset: 0;
    background: url('../img/original-narmada-pujan.jpg') center 45% / cover no-repeat;
}
body.gogo .rc-original-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.66) 48%, rgba(0,0,0,.22) 100%);
}
body.gogo .rc-original-hero-content {
    position: relative;
    z-index: 1;
    max-width: 660px;
    padding: 82px 64px;
    color: #ffffff;
}
body.gogo .rc-original-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: #fcc808;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
body.gogo .rc-original-kicker.dark { color: #043c5c; }
body.gogo .rc-original-hero h1 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.08;
}
body.gogo .rc-original-hero p { margin: 0 0 28px; color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.7; }
body.gogo .rc-original-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.gogo .rc-original-primary,
body.gogo .rc-original-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}
body.gogo .rc-original-primary { background: #043c5c; }
body.gogo .rc-original-primary:hover { background: #075275; color: #ffffff; }
body.gogo .rc-original-whatsapp { background: #25d366; }
body.gogo .rc-original-whatsapp:hover { background: #1eb955; color: #ffffff; }

body.gogo .rc-original-about { background: #ffffff; }
body.gogo .rc-original-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
body.gogo .rc-original-about-photo { min-height: 420px; }
body.gogo .rc-original-about-photo img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 10px;
}
body.gogo .rc-original-about-copy h2 { margin: 0 0 18px; color: #111111; font-size: clamp(30px,4vw,44px); line-height: 1.2; }
body.gogo .rc-original-about-copy h2 span { color: #043c5c; }
body.gogo .rc-original-about-copy p { margin-bottom: 24px; color: #555555; line-height: 1.8; text-align: justify; }
body.gogo .rc-original-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 40px;
}
body.gogo .rc-original-gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #111111;
}

body.gogo .section-head .eyebrow { background: transparent; border: 0; padding: 0; color: #043c5c; text-transform: uppercase; }
body.gogo .section-head .eyebrow .dot { display: none; }
body.gogo .section-head h2 { color: #111111; text-transform: uppercase; }
body.gogo .section-head h2::after { background: #043c5c; }
body.gogo .btn-brand,
body.gogo .fr-book { background: #043c5c; color: #ffffff; }
body.gogo .btn-brand:hover,
body.gogo .fr-book:hover { background: #111111; color: #ffffff; }
body.gogo .feat-card { border-radius: 5px; border-color: #e3e3e3; }
body.gogo .feat-card .ico { background: #111111; color: #ffffff; }
body.gogo .feat-card:hover .ico { background: #043c5c; }

body.gogo .fleet-tabs { display: none; }
body.gogo .fleet-note { text-align: center; }
body.gogo .fleet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.gogo .fleet-card {
    overflow: hidden;
    padding: 18px;
    border: 2px solid #111111;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
body.gogo .fleet-card:hover { border-color: #043c5c; }
body.gogo .fleet-art { height: 190px; margin: 14px -8px; background: #ffffff; }
body.gogo .fleet-art img { width: 100%; height: 100%; object-fit: contain; }
body.gogo .fleet-card h3 { color: #043c5c; }
body.gogo .rate-box { border-color: #d6d6d6; }
body.gogo .rate-box .val { color: #043c5c; }

body.gogo .gogo-section.dark { background: #f2f2f2; }
body.gogo .gogo-section.dark .section-head { display: none; }
body.gogo .rc-original-counters .why-card {
    padding: 24px 16px;
    background: transparent;
    border: 0;
    box-shadow: none;
}
body.gogo .rc-original-counters .why-card:hover { background: #ffffff; }
body.gogo .rc-original-counters .why-card img { width: 100px; height: 100px; margin: 0 auto 14px; object-fit: contain; border-radius: 50%; }
body.gogo .rc-original-counters .why-card h3 { color: #043c5c; font-size: 25px; }
body.gogo .rc-original-counters .why-card p { color: #111111; font-weight: 700; text-transform: uppercase; }

body.gogo .gogo-footer {
    background: linear-gradient(rgba(0,0,0,.91), rgba(0,0,0,.91)),
                url('../img/original-madhya-pradesh-tour.jpg') center / cover no-repeat;
}

/* User-requested floating Call action remains orange. */
body.gogo .rc-fab-call { background: #f97316; }
body.gogo .rc-fab-call:hover { background: #e25f08; }
body.gogo .rc-fab-call .rc-fab-radar { background: rgba(4, 60, 92,.45); }

@media (max-width: 1000px) {
    body.gogo .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.gogo .gogo-nav { background: #111111; border-top-color: rgba(255,255,255,.15); }
    body.gogo .gogo-nav .links > li > a { color: #ffffff; }
    body.gogo .gogo-search.at-top { padding: 114px 10px 100px; }
    body.gogo .rc-original-hero { width: calc(100% - 24px); min-height: 390px; margin-top: 28px; }
    body.gogo .rc-original-hero-content { padding: 62px 28px; }
    body.gogo .rc-original-about-grid { grid-template-columns: 1fr; gap: 28px; }
    body.gogo .rc-original-about-photo,
    body.gogo .rc-original-about-photo img { min-height: 300px; height: 300px; }
    body.gogo .rc-original-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    body.gogo .fleet-grid { grid-template-columns: 1fr; }
    body.gogo .rc-original-gallery { grid-template-columns: 1fr; }
    body.gogo .rc-original-gallery img { height: 220px; }
    body.gogo .rc-original-hero h1 { font-size: 34px; }
    body.gogo .rc-original-hero-actions > a { width: 100%; }
}

/* Keep Add Stop below the calculator card at every viewport size. */
@media (max-width: 900px) {
    body.gogo .search-card { margin-bottom: 76px; }
    body.gogo .stops-block {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: -70px;
        z-index: 10;
        padding: 0;
    }
    body.gogo .stops-block:has(.stop-row) {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 12px 0 0;
    }
}

/* Header colours matched to the supplied reference: white bar, dark links,
   orange active/hover state. No other page styling is changed. */
body.gogo .gogo-header {
    background: #ffffff;
    border-bottom: 1px solid #e7ebef;
    box-shadow: 0 2px 12px rgba(23, 33, 43, .08);
}
body.gogo .gogo-nav .links > li > a { color: #303846; }
body.gogo .gogo-nav .links > li > a:hover,
body.gogo .gogo-nav .links > li > a.active { color: #f97316; }
body.gogo .gogo-nav .links > li > a.active::after { background: #f97316; }
body.gogo .gogo-phone { color: #303846; border-color: #dfe4eb; }
body.gogo .gogo-phone i,
body.gogo .gogo-phone:hover { color: #f97316; }
body.gogo .gogo-phone:hover { border-color: #f97316; }
body.gogo .gogo-header .rc-logo-lockup .l1 { color: #17212b; }
body.gogo .gogo-header .rc-logo-lockup .l1 span { color: #043c5c; }
body.gogo .gogo-header .rc-logo-lockup .l2 { color: #6b7885; }
body.gogo .gogo-burger span { background: #303846; }

@media (max-width: 991px) {
    body.gogo .gogo-nav {
        background: #ffffff;
        border-top-color: #e7ebef;
    }
    body.gogo .gogo-nav .links > li > a { color: #303846; }
    body.gogo .gogo-nav .links > li > a:hover,
    body.gogo .gogo-nav .links > li > a.active { color: #f97316; }
}

/* Full-screen layout: remove inherited 1200px outer caps while retaining
   small responsive edge padding for readability and touch safety. */
body.gogo .gogo-header .bar {
    width: 100%;
    max-width: none;
}
body.gogo .gogo-search.at-top {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
body.gogo .search-card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
body.gogo .gogo-wrap {
    width: 100%;
    max-width: none;
    padding-left: clamp(16px, 2vw, 30px);
    padding-right: clamp(16px, 2vw, 30px);
}
body.gogo .rc-original-hero {
    width: calc(100% - 24px);
    max-width: none;
}

@media (max-width: 900px) {
    body.gogo .search-card { width: 100%; }
    body.gogo .gogo-wrap { padding-left: 14px; padding-right: 14px; }
}

/* Reference-sized calculator band. The inner card follows the live Gogo Cabs
   1250px desktop search width while the client-requested background remains
   edge-to-edge. The locally stored 2620x1000 dotted map is the exact visual
   asset used by the supplied Gocabish reference. */
body.gogo .gogo-search.at-top {
    padding-top: 76px;
    padding-bottom: 89px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.30), rgba(73,10,12,.20)),
        url('../img/calculator-world-map.png') center / cover no-repeat;
}
body.gogo .search-card {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top {
        padding-top: 96px;
        padding-bottom: 88px;
        background-position: center;
    }
    body.gogo .search-card { max-width: none; }
}

/* ==========================================================================
   SUPPLIED KUMBH MELA ARTWORK BEHIND THE HERO COPY
   --------------------------------------------------------------------------
   Applies to the band carrying "Local, Outstation & Airport Cab Services" and
   its supporting line. The file is stored locally rather than hotlinked, so the
   page does not depend on a third-party host staying up.

   The dark left-to-right wash is kept and slightly strengthened: the artwork is
   a bright sunset, and white heading text over it fails contrast without a
   ground behind the copy.
   ========================================================================== */
body.gogo .rc-original-hero-bg {
    background: url('../img/hero-kumbh-mela.webp') center / cover no-repeat;
}
body.gogo .rc-original-hero-overlay {
    background: linear-gradient(90deg,
                rgba(0, 0, 0, .86) 0%,
                rgba(0, 0, 0, .66) 46%,
                rgba(0, 0, 0, .24) 100%);
}


/* ==========================================================================
   CALCULATOR GEOMETRY MEASURED FROM gogocabs.com
   --------------------------------------------------------------------------
   Taken from the live page at a 1440px viewport, not estimated:

     search widget ....... 1250 x 300.17, radius 15px, padding 0 40px 20px
     field row ........... 1170 wide, 118.19 tall
     From / To cells ..... 326 wide      date cells 156 wide      swap 43
     spacing between ..... 10px
     control ............. 74 tall, radius 8px, 18px text
     Search button ....... 292.75 x 56.8, radius 25px, overhanging the card
                           lower edge by ~28px

   GEOMETRY ONLY. Their pink CTA and their internal tab strip are not copied:
   RC Travels keeps its own maroon palette, and the trip tabs stay above the
   card where this build already puts them.

   Desktop only. The measured mobile figures came back from a 764px layout
   rather than a true 390px one, so applying 74px controls there would be
   guesswork - the existing mobile column is left alone.
   ========================================================================== */
@media (min-width: 901px) {
    body.gogo .search-card {
        max-width: 1250px;
        border-radius: 15px;
    }

    /* The reference keeps a clear zone between the field row and the card's
       lower edge, and the Search button straddles that edge. Without the same
       clearance the taller 57px button rides up over the bottom of the To and
       date controls - measured, not guessed. */
    body.gogo .search-body { padding: 22px 40px 46px; }

    body.gogo .search-grid {
        grid-template-columns:
            minmax(210px, 1.6fr) 43px minmax(210px, 1.6fr)
            repeat(4, minmax(132px, 156px));
        gap: 10px;
    }

    body.gogo .field > label { font-size: 13px; margin-bottom: 8px; }

    body.gogo .field .control {
        height: 74px;
        min-height: 74px;
        padding: 0 18px;
        border-radius: 8px;
    }

    body.gogo .field .control input,
    body.gogo .field .control select {
        height: 72px;
        line-height: 72px;
        font-size: 18px;
    }

    body.gogo .swap-cell { width: 43px; min-height: 74px; }

    body.gogo .search-cta .btn-search {
        width: 293px;
        min-width: 293px;
        height: 57px;
        min-height: 57px;
        border-radius: 25px;
        font-size: 20px;
    }
}

/* Mobile: the Search button hangs below the card's lower edge and Add Stop sits
   directly under it, overlapping by ~6px at 390px.

   With no stops added the stop block is absolutely positioned and anchored by
   its BOTTOM edge, so padding cannot push the button down - it grows the box
   upward instead, laying an invisible panel over the card and its controls.
   The anchor itself is moved instead, and the band gains matching room so the
   button still finishes inside it. */
@media (max-width: 900px) {
    body.gogo .stops-block { bottom: -92px; padding-top: 0; }
    body.gogo .stops-block:has(.stop-row) { padding: 12px 0 0; }
    body.gogo .gogo-search.at-top { padding-bottom: 112px; }
}

/* ==========================================================================
   SUPPLIED DOTTED MAP + ADD STOP MOVED INSIDE THE CALCULATOR
   --------------------------------------------------------------------------
   BACKGROUND: the client-supplied dotted map replaces the earlier map asset.
   The source file is 399x300, so `cover` scales it well beyond its native size
   on a desktop-width band. It survives that better than a photograph would -
   it is a flat dot pattern behind a dark wash - but a larger original would
   still render noticeably sharper.

   ADD STOP IS NOW INSIDE THE CARD. It was absolutely positioned and pushed
   outside the lower edge (desktop `bottom: -78px`, mobile `bottom: -92px`).
   It is returned to normal flow, where the markup already places it: inside
   .search-body, directly after the field grid. Nothing moves in the markup, so
   tab order and screen-reader order are unchanged.

   The Search button still overhangs the card's lower edge, so .search-body
   keeps a 46px bottom reserve at BOTH widths - without it the button rides up
   onto the Add Stop row, which is exactly the collision that had to be fixed
   on mobile before. The band's own bottom padding is trimmed to compensate,
   since Add Stop no longer needs room outside the card.
   ========================================================================== */
body.gogo .gogo-search.at-top {
    padding-bottom: 46px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .34), rgba(73, 10, 12, .24)),
        url('../img/calculator-dotted-map.jpg') center / cover no-repeat;
}

body.gogo .stops-block,
body.gogo .stops-block:has(.stop-row) {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    padding: 14px 0 0;
}

body.gogo .search-body { padding-bottom: 46px; }

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top { padding-bottom: 48px; }
    body.gogo .search-card { margin-bottom: 0; }
}

/* ==========================================================================
   HERO ARTWORK: LOOPING ZOOM, STARTED BY THE CURSOR
   --------------------------------------------------------------------------
   The image sits still until the pointer arrives. From then on it runs from its
   largest size down to its smallest and back, looping for as long as the cursor
   stays on the band, and easing back to rest once it leaves.

   Only the background layer scales. The heading, paragraph and buttons sit on
   .rc-original-hero-content above it and are deliberately left alone - scaling
   live text resamples it and makes it blurry mid-animation.

   The parent already clips (overflow: hidden), so the enlarged image cannot
   spill over neighbouring sections.
   ========================================================================== */
@keyframes rcHeroBreathe {
      0% { transform: scale(1.16); }
     50% { transform: scale(1.00); }
    100% { transform: scale(1.16); }
}

body.gogo .rc-original-hero-bg {
    transform: scale(1);
    transform-origin: center;
    transition: transform .5s ease-out;
    will-change: transform;
}

body.gogo .rc-original-hero:hover .rc-original-hero-bg {
    animation: rcHeroBreathe 14s ease-in-out infinite;
}

/* Honour a reduced-motion preference: looping movement is a common migraine and
   vestibular trigger, so it is dropped rather than merely slowed. */
@media (prefers-reduced-motion: reduce) {
    body.gogo .rc-original-hero:hover .rc-original-hero-bg {
        animation: none;
        transform: scale(1.04);
    }
}


/* ==========================================================================
   CALCULATOR REBUILT TO THE SUPPLIED REFERENCE
   --------------------------------------------------------------------------
   Matched from the screenshot:

     plain light band, no background image
     white card, hairline edge, soft shadow, rounded corners
     trip choices as RADIO ROWS inside the card, centred
     outlined fields whose label sits in a notch on the top border
     circular brand swap button between From and To
     "Add Stops" as a text action with a ringed plus, inside the card
     one wide pill Search button, centred, overhanging the lower edge

   COLOUR IS OURS. The reference is pink (#e3004f); every accent here is the
   RC Travels maroon #043c5c, as instructed.

   NOT COPIED, because they are not features this site has: the "Use Google maps
   link" shortcuts, the "Booking for - Single women / Patient / Elder people"
   checkboxes, and the weekday caption under each date. Drawing those would put
   controls on screen that do nothing when clicked.
   ========================================================================== */

/* ---- band: image removed, flat light ground ---- */
body.gogo .gogo-search.at-top {
    padding-top: 34px;
    padding-bottom: 46px;
    background: #f6f6f7;
}

/* ---- card ---- */
body.gogo .search-card {
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* ---- trip choices as radios, inside the card ---- */
body.gogo .trip-strip {
    position: static;
    left: auto;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 20px 40px 4px;
    gap: 10px 30px;
    overflow: visible;
    border: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
}

body.gogo .trip-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #4a4a4a;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* The category icon is replaced by the radio mark itself. */
body.gogo .trip-pill i { display: none; }

body.gogo .trip-pill::before {
    content: "";
    flex: none;
    width: 17px;
    height: 17px;
    border: 2px solid #bdbdbd;
    border-radius: 50%;
    background: #ffffff;
    transition: border-color .16s ease, background .16s ease;
}

body.gogo .trip-pill:hover {
    background: transparent;
    color: #111111;
    transform: none;
}
body.gogo .trip-pill:hover::before { border-color: #043c5c; }

body.gogo .trip-pill.active {
    margin-top: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #111111;
    font-weight: 700;
}

body.gogo .trip-pill.active::before {
    border-color: #043c5c;
    background: radial-gradient(circle at 50% 50%, #043c5c 0 4.5px, #ffffff 5.5px);
}

/* ---- airport sub-choices, same family ---- */
body.gogo .airport-strip { padding: 6px 40px 0; justify-content: center; }
body.gogo .airport-chip {
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    background: #ffffff;
    color: #4a4a4a;
    font-weight: 600;
}
body.gogo .airport-chip:hover { border-color: #043c5c; color: #043c5c; }
body.gogo .airport-chip.active { background: #043c5c; border-color: #043c5c; color: #ffffff; }

/* ---- field row ---- */
body.gogo .search-body { padding: 18px 40px 46px; }

body.gogo .search-grid > .field { position: relative; }

/* The label rides the top border in a notch. Its own background masks the
   border behind it, which is what makes the gap. */
body.gogo .search-grid > .field > label {
    position: absolute;
    top: -8px;
    left: 14px;
    z-index: 2;
    margin: 0;
    padding: 0 6px;
    background: #ffffff;
    color: #6f6f6f;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
}

body.gogo .search-grid .field .control {
    height: 74px;
    min-height: 74px;
    padding: 0 18px;
    border: 1.5px solid #d9d9d9;
    border-radius: 8px;
    background: #ffffff;
}

/* The reference starts the value hard against the field's left padding, with no
   leading glyph, so the icons inside the search fields are dropped. Stop rows
   keep theirs - they need to read as a different kind of row. */
body.gogo .search-grid .field .control > i { display: none; }

body.gogo .search-grid .field .control:focus-within {
    border-color: #043c5c;
    box-shadow: 0 0 0 3px rgba(4, 60, 92, .10);
}

body.gogo .search-grid .field .control input,
body.gogo .search-grid .field .control select {
    height: 70px;
    line-height: 70px;
    font-size: 16px;
    font-weight: 600;
    color: #111111;
}

body.gogo .search-grid .field .control input::placeholder {
    color: #8d8d8d;
    font-weight: 600;
}

/* ---- circular swap between From and To ---- */
body.gogo .swap-cell {
    width: 43px;
    min-height: 74px;
    padding: 0;
    align-self: center;
}

body.gogo .swap-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #043c5c;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(4, 60, 92, .28);
}
body.gogo .swap-btn:hover { background: #075275; color: #ffffff; border: 0; }

/* ---- "Add Stops" as a text action with a ringed plus ---- */
body.gogo .add-stop-btn,
body.gogo #btnAddStop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #043c5c;
    font-size: 15px;
    font-weight: 700;
}

body.gogo .add-stop-btn i,
body.gogo #btnAddStop i {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 9px;
}

body.gogo .add-stop-btn:hover,
body.gogo #btnAddStop:hover {
    background: transparent;
    border: 0;
    color: #075275;
    text-decoration: underline;
}

/* ---- one wide pill CTA, centred on the lower edge ---- */
body.gogo .search-cta .btn-search {
    width: 293px;
    min-width: 293px;
    height: 57px;
    min-height: 57px;
    border-radius: 999px;
    background: #043c5c;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(4, 60, 92, .30);
}
body.gogo .search-cta .btn-search:hover { background: #075275; }
body.gogo .search-cta .btn-search i { display: none; }

@media (max-width: 900px) {
    body.gogo .gogo-search.at-top { padding-top: 26px; padding-bottom: 48px; }
    body.gogo .trip-strip { padding: 16px 14px 4px; gap: 8px 20px; }
    body.gogo .airport-strip { padding: 6px 14px 0; }
    body.gogo .search-body { padding: 18px 14px 46px; }
    body.gogo .search-grid .field .control { height: 62px; min-height: 62px; padding: 0 14px; }
    body.gogo .search-grid .field .control input,
    body.gogo .search-grid .field .control select { height: 58px; line-height: 58px; }
    body.gogo .swap-cell { width: 100%; min-height: 40px; justify-content: center; }

    /* gogo.css has narrow-screen rules that stretch this button to full width
       and bolt a "Swap" caption onto it with ::after. Both are switched off so
       the control stays the round icon button the reference shows - a 40x44 box
       at border-radius 50% renders as an ellipse, not a circle. */
    body.gogo .swap-btn {
        flex: none;
        box-sizing: border-box;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 50%;
    }
    body.gogo .swap-btn::after { content: none; display: none; }

    /* .search-cta is an auto-width absolute box centred with a transform, so a
       percentage width on the button inside it would resolve against its own
       content. A fixed width is used instead. */
    body.gogo .search-cta .btn-search { width: 262px; min-width: 262px; }
}

/* ==========================================================================
   SUPPLIED BANNER ARTWORK BEHIND THE CALCULATOR
   --------------------------------------------------------------------------
   File: img/calculator-banner-bg.png (836x418, supplied as banner_bg_1.png).

   WHITE GROUND, ON REQUEST. An earlier revision put a dark maroon gradient
   behind this artwork because its marks are pale pink (average RGB 235,207,212)
   and mostly semi-transparent - 10,415 visible pixels out of 39,060 sampled,
   9,305 of them partly transparent - so they carry very little contrast. The
   maroon was rejected, so the ground is plain white and the dots read as a soft
   pink pattern.

   The image layer is listed first because the first background layer paints on
   top of the ones after it.
   ========================================================================== */
body.gogo .gogo-search.at-top {
    background:
        url('../img/calculator-banner-bg.png') center / cover no-repeat,
        #ffffff;
}

/* ==========================================================================
   SUPPLIED RC TRAVELS LOGO
   --------------------------------------------------------------------------
   File: img/rctravels-logo.png (400x170, supplied as "Rc Logo-01"). The
   previous mark is kept at img/rctravels-logo-previous.png so this is a
   one-line revert if it is not the right file.

   TWO THINGS THE ARTWORK FORCED:

   1. IT IS A LOCKUP, NOT AN ICON, so the square box had to go. Measuring the
      opaque pixels: the left third spans 137px vertically (the pictorial mark)
      while the right two thirds span only 80-98px and sit lower down - that is
      a wordmark band. Every earlier rule sized this element as a square
      (46x46, 64x64, 52x52, 38x38), which at a 2.35:1 ratio would have rendered
      it about 46x20 inside a 46px box. It is now sized by height with width
      auto.

      Because the wordmark is part of the image, the separate "RC TRAVELS /
      Reliable Rides, Anytime" text lockup beside it is switched off - otherwise
      the company name appears twice, side by side.

   2. IT IS MOSTLY WHITE. Sampling the opaque pixels, near-white dominates
      (about 3x the teal and 15x the amber). The header bar is white, so the
      mark would have all but disappeared on it. Rather than repaint the whole
      header - a white bar with dark links was an explicit earlier decision -
      the logo sits on a dark plate, which is the treatment this file used
      previously for the same reason. The footer bar is already dark, so it
      needs no plate there.
   ========================================================================== */
body.gogo .gogo-header .rc-logo {
    padding: 6px 13px;
    border-radius: 10px;
    background: #111111;
}

body.gogo .gogo-header .rc-logo-img {
    width: auto;
    height: 46px;
    max-width: 210px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    object-fit: contain;
}

/* The supplied artwork already contains the name and the strapline. */
body.gogo .rc-logo-lockup { display: none; }

body.gogo .rc-logo-footer .rc-logo-img {
    width: auto;
    height: 62px;
    max-width: 250px;
    object-fit: contain;
}

@media (max-width: 600px) {
    body.gogo .gogo-header .rc-logo-img { width: auto; height: 38px; max-width: 170px; }
}

@media (max-width: 480px) {
    body.gogo .gogo-header .rc-logo { padding: 5px 10px; }
    body.gogo .gogo-header .rc-logo-img { width: auto; height: 34px; max-width: 155px; }
}

/* ==========================================================================
   REPLACEMENT LOGO: THE PLATE HAS TO MOVE
   --------------------------------------------------------------------------
   The new supplied file (Rc Logo 3-01, 1667x709, same 2.35 lockup ratio) is
   drawn in DARK ink - sampling the opaque pixels, near-black and teal dominate,
   where the previous version was mostly white. So the treatment inverts:

     header (white bar) -> no plate needed, the dark mark reads directly
     footer (dark bar)  -> now needs a LIGHT plate, or the mark disappears

   That is the reverse of what the previous file required, which is why this
   block exists rather than an edit further up.
   ========================================================================== */
body.gogo .gogo-header .rc-logo {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

body.gogo .gogo-header .rc-logo-img { height: 52px; }

body.gogo .rc-logo-footer {
    display: inline-flex;
    padding: 10px 14px;
    border-radius: 10px;
    background: #ffffff;
}

@media (max-width: 600px) {
    body.gogo .gogo-header .rc-logo-img { height: 42px; max-width: 190px; }
}
@media (max-width: 480px) {
    body.gogo .gogo-header .rc-logo { padding: 0; }
    body.gogo .gogo-header .rc-logo-img { height: 36px; max-width: 165px; }
}


/* ==========================================================================
   CALCULATOR TYPOGRAPHY
   --------------------------------------------------------------------------
   Poppins across the calculator - labels, placeholders, values, the trip
   radios, Add Stops and the CTA - so the panel reads as one piece.

   DATES ARE NOT BOLD. The date and time controls inherited the 600 weight that
   suits a placeholder like "Enter your pickup location", which made "18-08-2026"
   sit on the row like a headline. Every control now uses 500, and the date and
   time inputs specifically drop to 400.
   ========================================================================== */
body.gogo .search-card,
body.gogo .search-card input,
body.gogo .search-card select,
body.gogo .search-card button,
body.gogo .search-card label,
body.gogo .book-modes .book-mode {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

body.gogo .search-grid > .field > label { font-weight: 500; letter-spacing: .01em; }

/* The font-family has to be declared at THIS depth, not on `.search-card input`.
   An earlier rule sets `body.gogo .field .control input { font-family: var(--body-font) }`,
   which is more specific than the card-level selector and kept winning - the
   labels changed to Poppins while the inputs stayed on Ubuntu. */
body.gogo .search-grid .field .control input,
body.gogo .search-grid .field .control select {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 500;
}

body.gogo .search-grid .field .control input::placeholder { font-weight: 500; }

/* the actual fix for the bold date */
body.gogo .search-grid .field .control input[type="date"],
body.gogo .search-grid .field .control input[type="time"],
body.gogo .search-grid .field .control select {
    font-weight: 400;
    letter-spacing: .01em;
}

body.gogo .trip-pill,
body.gogo .add-stop-btn,
body.gogo .search-cta .btn-search { font-family: 'Poppins', 'Segoe UI', sans-serif; }


/* ==========================================================================
   CABS / PACKAGES CHOOSER ABOVE THE CALCULATOR
   --------------------------------------------------------------------------
   Built to the supplied reference: two generous rounded tiles, icon stacked
   over the label, the selected one filled and the other white.

   The reference navy is replaced by the RC Travels maroon, and the tiles sit on
   the existing banner band, so this reads as part of the site rather than a
   transplant.
   ========================================================================== */
body.gogo .book-modes {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 620px;
    margin: 0 auto 22px;
    padding: 0;
}

body.gogo .book-mode {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 104px;
    padding: 16px 18px;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 14px;
    background: #ffffff;
    color: #6b6b6b;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

body.gogo .book-mode i { font-size: 26px; color: #6b6b6b; transition: color .18s ease; }

body.gogo .book-mode:hover { transform: translateY(-2px); color: #043c5c; }
body.gogo .book-mode:hover i { color: #043c5c; }

body.gogo .book-mode.active {
    background: #043c5c;
    border-color: #043c5c;
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(4, 60, 92, .32);
}
body.gogo .book-mode.active i { color: #ffffff; }

body.gogo .book-panel[hidden] { display: none; }

/* The packages panel reuses the card treatment so both tabs feel like one
   control surface. */
body.gogo .pkg-panel-card {
    max-width: 1250px;
    margin: 0 auto;
    padding: 26px 30px 30px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

body.gogo .pkg-panel-card .section-head { margin-bottom: 24px; }
body.gogo .pkg-panel-card .section-head h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 8px; }
body.gogo .pkg-panel-card .section-head p { margin: 0; }

@media (max-width: 900px) {
    body.gogo .book-modes { gap: 12px; max-width: none; margin-bottom: 18px; }
    body.gogo .book-mode { min-height: 88px; padding: 13px 12px; font-size: 15px; }
    body.gogo .book-mode i { font-size: 22px; }
    body.gogo .pkg-panel-card { padding: 18px 14px 22px; }
}


/* ==========================================================================
   FIELD-LEVEL VALIDATION MESSAGE
   --------------------------------------------------------------------------
   Search used to post back and answer a missing pickup with a modal, or - on
   Local Trip, where the drop field is hidden - with a failed search. The rule
   is now stated next to the field it applies to, before anything is submitted.
   ========================================================================== */
body.gogo .field-error {
    display: none;
    margin-top: 6px;
    color: #b3261e;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

body.gogo .field-error.show { display: block; }

body.gogo .field.invalid .control {
    border-color: #b3261e;
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .10);
}

body.gogo .pkg-error {
    display: none;
    margin-top: 10px;
    color: #b3261e;
    font-size: 13px;
    font-weight: 600;
}
body.gogo .pkg-error.show { display: block; }

/* ==========================================================================
   ONE CONSISTENT FIELD VOICE
   --------------------------------------------------------------------------
   Every value in the field row now reads the same: Poppins, medium weight, the
   same muted grey. That covers

     "Enter your pickup location" / "Enter your drop location"  (placeholders)
     "18-08-2026"                                              (the date)
     "Select Time" / "Same as pickup"                           (the dropdowns)

   The date needed its own treatment. A native date input paints its value
   through the ::-webkit-datetime-edit shadow parts, which do NOT inherit the
   input's colour on their own, which is why the date stayed dark while the
   placeholders beside it were grey. Each part is addressed so the whole
   dd-mm-yyyy group matches.

   Weight is 500 throughout - matching the placeholders, and still nowhere near
   bold.
   ========================================================================== */
body.gogo .search-grid .field .control input,
body.gogo .search-grid .field .control input[type="date"],
body.gogo .search-grid .field .control select {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 500;
    letter-spacing: .01em;
}

body.gogo .search-grid .field .control input::placeholder {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 500;
    color: #8d8d8d;
    opacity: 1;            /* Firefox dims placeholders by default */
}

/* the date, muted to match the placeholders beside it */
body.gogo .search-grid .field .control input[type="date"],
body.gogo .search-grid .field .control input[type="time"] {
    color: #8d8d8d;
}

body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit,
body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-text,
body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-day-field,
body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-month-field,
body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-year-field {
    color: #8d8d8d;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 500;
}

/* and the time dropdowns */
body.gogo .search-grid .field .control select { color: #8d8d8d; }

/* Typing a real location is a committed value, so it firms up to full ink -
   the muted grey is for prompts and defaults, not for what you entered. */
body.gogo .search-grid .field .control input#txtFrom,
body.gogo .search-grid .field .control input#txtTo { color: #111111; }


/* ==========================================================================
   LOGO IN THE TOP CORNER, UNTOUCHED
   --------------------------------------------------------------------------
   No plate, no tile, no crop, no rounding - the supplied artwork as it is, sized
   by height only so its 2.35 proportions are preserved, sitting in the top-left
   of the bar.
   ========================================================================== */
body.gogo .gogo-header .rc-logo {
    padding: 0;
    margin: 0;
    gap: 0;
    background: transparent;
    border-radius: 0;
}

body.gogo .gogo-header .rc-logo-img {
    height: 56px;
    width: auto;
    max-width: 240px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    object-fit: contain;
}

@media (max-width: 600px) {
    body.gogo .gogo-header .rc-logo-img { height: 44px; max-width: 200px; }
}
@media (max-width: 480px) {
    body.gogo .gogo-header .rc-logo-img { height: 38px; max-width: 170px; }
}

/* ==========================================================================
   CABS / PACKAGES TILES, SCALED DOWN
   --------------------------------------------------------------------------
   The first pass followed the reference's proportions literally, which made the
   tiles the loudest thing on the page - larger than the Search button and
   competing with the calculator they sit above. They are a two-way switch, so
   they only need to be legible and easy to hit, not commanding.

   Roughly 40% shorter and narrower: the row caps at 420px instead of 620px, the
   tiles drop from 104px to 64px tall, the icon from 26px to 18px and the label
   from 17px to 14px. Still comfortably above the 44px minimum touch target.
   ========================================================================== */
body.gogo .book-modes {
    max-width: 420px;
    gap: 10px;
    margin-bottom: 16px;
}

body.gogo .book-mode {
    flex-direction: row;
    gap: 8px;
    min-height: 64px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
}

body.gogo .book-mode i { font-size: 18px; }

@media (max-width: 900px) {
    body.gogo .book-modes { max-width: none; gap: 8px; margin-bottom: 14px; }
    body.gogo .book-mode { min-height: 56px; padding: 9px 12px; font-size: 13.5px; }
    body.gogo .book-mode i { font-size: 16px; }
}

/* ==========================================================================
   INSTANT CAB LINE, CITY CHIPS, TILE GLOW, LOGO OFFSET
   ==========================================================================

   1. THE GLOW AROUND THE TILES IS GONE.
      The selected tile carried `box-shadow: 0 10px 26px rgba(4, 60, 92,.32)` - a
      wide maroon halo that spread the colour past the tile's own edge and made
      it look like the button had grown. It is replaced with a plain neutral
      shadow, so selecting a tile changes the tile and nothing around it.

      The keyboard focus ring is kept, but only for keyboard use: a browser does
      not match :focus-visible on a button that was clicked with a pointer, so
      the ring appears when tabbing and never on click. Removing it outright
      would leave keyboard users with no idea where they are.
   ========================================================================== */
body.gogo .book-mode { box-shadow: 0 2px 6px rgba(0, 0, 0, .07); }

body.gogo .book-mode.active {
    box-shadow: none;
}

body.gogo .book-mode:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .10); }

body.gogo .book-mode:focus { outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .07); }
body.gogo .book-mode.active:focus { box-shadow: none; }

body.gogo .book-mode:focus-visible {
    outline: 2px solid #043c5c;
    outline-offset: 2px;
}

/* 2. INSTANT CAB - one quiet line between the tiles and the calculator. */
body.gogo .instant-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 14px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
}

body.gogo .instant-cab i { font-size: 13px; color: #ffffff; }

body.gogo .instant-cab .ic-label { opacity: .9; }

body.gogo .instant-cab .ic-number {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

body.gogo .instant-cab .ic-number:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* The band behind this line is the supplied artwork over white, so the text
   needs its own ground. It is the brand maroon rather than the near-black it
   started as, which ties it to the Search button and the selected tile instead
   of reading as a separate dark chip. */
body.gogo .instant-cab {
    width: max-content;
    max-width: calc(100% - 28px);
    padding: 7px 16px;
    border-radius: 999px;
    background: #043c5c;
    box-shadow: 0 4px 14px rgba(4, 60, 92, .22);
}

/* 3. LOGO NUDGED RIGHT off the bar's left edge. */
body.gogo .gogo-header .rc-logo { margin-left: 18px; }

@media (max-width: 900px) {
    body.gogo .instant-cab { font-size: 12.5px; margin-bottom: 12px; padding: 6px 14px; }
    body.gogo .gogo-header .rc-logo { margin-left: 8px; }
}

/* ==========================================================================
   SMALLER FLEET CARDS
   --------------------------------------------------------------------------
   The Outstation Cab cards were three to a row at full section width, so each
   one was large enough to dominate the section. Four to a row with tighter
   internals brings them down to a scannable size without losing the photo, the
   seat count or either per-km rate.
   ========================================================================== */
@media (min-width: 992px) {
    body.gogo .fleet-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

body.gogo .fleet-card { padding: 16px; border-radius: 12px; }
body.gogo .fleet-card h3 { font-size: 15.5px; margin: 0 0 5px; }
body.gogo .fleet-card .desc { font-size: 12.5px; min-height: 34px; margin: 0 0 10px; }
body.gogo .fleet-seats { padding: 5px 11px; font-size: 11.5px; margin-bottom: 11px; }
body.gogo .fleet-art { padding: 4px 0 12px; }
body.gogo .fleet-art img { max-height: 68px; }
body.gogo .fleet-rates { gap: 8px; padding-top: 11px; }
body.gogo .fleet-rates .rate-box .lbl { font-size: 10px; margin-bottom: 3px; }
body.gogo .fleet-rates .rate-box .val { font-size: 17px; }
body.gogo .fleet-rates .rate-box .val span { font-size: 11px; }


/* ==========================================================================
   MOBILE PASS
   --------------------------------------------------------------------------
   Tightens the whole page at phone widths rather than only the calculator:
   section rhythm, heading scale, and the grids that were still holding desktop
   column counts. Everything here is width-scoped, so the desktop layout that
   was just measured and signed off is untouched.
   ========================================================================== */
@media (max-width: 700px) {
    body.gogo .gogo-section { padding: 34px 0; }
    body.gogo .section-head { margin-bottom: 24px; }
    body.gogo .section-head h2 { font-size: clamp(21px, 6vw, 27px); }
    body.gogo .section-head > p { font-size: 14px; }

    /* one card per row, full width, no squeezing */
    body.gogo .fleet-grid,
    body.gogo .feat-grid,
    body.gogo .pkg-grid { grid-template-columns: 1fr; gap: 14px; }

    /* the four counters read better two-up than stacked into a long column */
    body.gogo .why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    body.gogo .why-card { padding: 18px 12px; }
    body.gogo .why-card h3 { font-size: 21px; }
    body.gogo .why-card p { font-size: 12.5px; }

    body.gogo .fleet-card .desc { min-height: 0; }
    body.gogo .fleet-art img { max-height: 92px; }

    /* the packages panel is a card inside a band: keep its own padding modest
       so the table inside it gets the width */
    body.gogo .pkg-panel-card { padding: 16px 12px 20px; }
    body.gogo .pkg-panel-card .section-head h2 { font-size: 19px; }

    body.gogo .rc-original-hero { min-height: 0; }
    body.gogo .rc-original-hero-content { padding: 40px 20px; }
    body.gogo .rc-original-hero h1 { font-size: clamp(24px, 7vw, 32px); }
    body.gogo .rc-original-hero p { font-size: 14.5px; margin-bottom: 20px; }
    body.gogo .rc-original-hero-actions { gap: 10px; }
    body.gogo .rc-original-primary,
    body.gogo .rc-original-whatsapp { min-height: 44px; padding: 0 18px; font-size: 14px; }

    body.gogo .gogo-footer { padding-top: 40px; }
    body.gogo .gogo-footer .grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 30px; }
}

/* The fare table is a CSS grid of rows on desktop. On a phone each row becomes a
   stacked block with the vehicle name shown from data-lbl, so a five-column
   price row does not have to fit across 390px. */
@media (max-width: 700px) {
    body.gogo .fare-row.fare-head { display: none; }

    body.gogo .fare-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        padding: 14px 12px;
    }

    body.gogo .fare-row .fr-route {
        grid-column: 1 / -1;
        font-size: 14.5px;
    }

    body.gogo .fare-row .fr-price {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        font-size: 14px;
    }

    body.gogo .fare-row .fr-price::before {
        content: attr(data-lbl);
        color: #6f6f6f;
        font-size: 11.5px;
        font-weight: 600;
    }

    body.gogo .fare-row .fr-act { grid-column: 1 / -1; }
    body.gogo .fare-row .fr-act .fr-book {
        display: block;
        width: 100%;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
    }
}

/* ==========================================================================
   FLEET CARDS: SHORTER, NOT JUST NARROWER
   --------------------------------------------------------------------------
   The previous pass cut the width by going four-up, but each card was still
   428px tall. Two things caused that, and neither was font size:

   1. `.fleet-rates { margin-top: auto }` pins the rates to the card's lower
      edge, and grid items stretch to the tallest sibling by default. Sedan has a
      three-line description, so IT set the height and the other three inherited
      a dead gap between photo and rates. `align-items: start` lets each card be
      its own height, and the rates sit under the photo instead of being pushed
      down.

   2. The description reserved a fixed min-height for the tallest case. It is now
      clamped to two lines, so the reservation is not needed.

   Result is roughly 250px instead of 428px, with the photo, seat count and both
   per-km rates all still shown.
   ========================================================================== */
body.gogo .fleet-grid { align-items: start; }

body.gogo .fleet-card { padding: 14px; }

body.gogo .fleet-card .desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
    margin: 0 0 9px;
    font-size: 12px;
    line-height: 1.45;
}

body.gogo .fleet-card h3 { font-size: 15px; }
body.gogo .fleet-seats { margin-bottom: 9px; padding: 4px 10px; font-size: 11px; }

body.gogo .fleet-art { padding: 2px 0 8px; }
body.gogo .fleet-art img { max-height: 58px; }

body.gogo .fleet-rates { margin-top: 0; padding-top: 9px; gap: 6px; }
body.gogo .fleet-rates .rate-box .val { font-size: 16px; }

@media (max-width: 700px) {
    /* On one card per row there is width to spare, so the photo can breathe -
       but the card still should not run to 400px. */
    body.gogo .fleet-art img { max-height: 78px; }
    body.gogo .fleet-card .desc { -webkit-line-clamp: 3; }
}

/* ==========================================================================
   THE ACTUAL CAUSE OF THE TALL FLEET CARDS
   --------------------------------------------------------------------------
   `body.gogo .fleet-art { height: 190px }` earlier in this file fixed the photo
   frame at 190px. Two previous attempts at shrinking these cards adjusted the
   art PADDING and the image's MAX-HEIGHT, which did nothing to that: the frame
   stayed 190px and the image simply sat letterboxed inside it - a 58px car in a
   190px box, which is the empty space in the screenshot and the 144px gap
   measured between photo and rates.

   The frame height itself is what had to change. The image then fills it with
   object-fit: contain, so the car is drawn as large as the frame allows and
   nothing is cropped.
   ========================================================================== */
body.gogo .fleet-art {
    height: 84px;
    margin: 8px -8px 10px;
}

body.gogo .fleet-art img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

@media (max-width: 700px) {
    /* one per row, so there is room for a bigger photo without a tall card */
    body.gogo .fleet-art { height: 116px; }
}

/* ==========================================================================
   1. FLEET CARDS: EQUAL HEIGHT, SLIGHTLY LARGER, AND THEY LIFT ON HOVER
   --------------------------------------------------------------------------
   Two were tall and two short because the previous pass set
   `align-items: start` - each card became its own height, and Sedan and Premium
   SUV have two-line descriptions where SUV and Kia Carens have one. Ragged, as
   you saw.

   Back to stretch so all four match, with the description holding a fixed
   two-line box so the photo, seats and rates line up across the row. The frame
   grows from 84px to 104px, which is the "a bit bigger" without returning to the
   190px box that caused the original problem.
   ========================================================================== */
body.gogo .fleet-grid { align-items: stretch; }

body.gogo .fleet-card {
    padding: 16px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.gogo .fleet-card .desc {
    -webkit-line-clamp: 2;
    min-height: 2.9em;          /* exactly two lines, so every card agrees */
    margin: 0 0 10px;
    font-size: 12.5px;
}

body.gogo .fleet-art { height: 104px; margin: 10px -8px 12px; }

body.gogo .fleet-rates { margin-top: auto; padding-top: 11px; }

/* The lift a pointer expects on something clickable-looking. */
body.gogo .fleet-card:hover {
    transform: translateY(-4px);
    border-color: #043c5c;
    box-shadow: 0 14px 30px rgba(4, 60, 92, .16);
}

body.gogo .fleet-card:hover .fleet-art img { transform: scale(1.06); }
body.gogo .fleet-art img { transition: transform .25s ease; }


/* ==========================================================================
   2. ONE HEADER TREATMENT FOR EVERY SECTION
   --------------------------------------------------------------------------
   The section headings had drifted apart - some centred, some left, different
   sizes, the eyebrow pill styled three different ways. They are now one system:
   centred column, maroon eyebrow pill, dark heading, muted sub-line.
   ========================================================================== */
body.gogo .section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
}

body.gogo .section-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: #e7f0f5;
    color: #043c5c;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.gogo .section-head .eyebrow .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #043c5c;
}

body.gogo .section-head h2 {
    margin: 0 0 10px;
    color: #111111;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: none;
}

body.gogo .section-head h2::after { display: none; }   /* the old underline rule */

body.gogo .section-head > p {
    margin: 0;
    color: #6f6f6f;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
}

body.gogo .gogo-section.dark .section-head h2 { color: #ffffff; }
body.gogo .gogo-section.dark .section-head > p { color: rgba(255, 255, 255, .78); }
body.gogo .gogo-section.dark .section-head .eyebrow {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}
body.gogo .gogo-section.dark .section-head .eyebrow .dot { background: #ffffff; }


/* ==========================================================================
   3. FARE ROWS REBUILT AS CARDS, TO THE SUPPLIED REFERENCE
   --------------------------------------------------------------------------
   Matched from the screenshot: a grid of light cards, the route across the top
   with a green origin dot, a dashed arrow and a red destination dot, a small
   "STARTING FROM" caption, the price as the headline, and a soft-tinted
   "Book Now" pill on the right.

   Their pink becomes our maroon - that is the only intended difference.

   ONE THING IS DELIBERATELY NOT COPIED: the reference shows a single price per
   card. Ours carries agreed Sedan, SUV and Premium SUV prices for every route,
   so the Sedan figure leads as the "starting from" headline and the other two
   sit beneath it. Dropping two of the three to match the picture exactly would
   have thrown away real prices the client supplied.

   Structural, so it applies to both copies of the table - the Packages tile and
   the section under the hero.
   ========================================================================== */
body.gogo .fare-table {
    display: grid;
    /* 232px only fitted three across the 938px container; 205px gives the four
       per row the reference shows, and still wraps sensibly on tablets. */
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.gogo .fare-row.fare-head { display: none; }   /* the card carries its own labels */

body.gogo .fare-row {
    display: flex;
    flex-direction: column;
    /* An earlier .fare-row rule centres its children, which stopped the Book Now
       pill from taking the card width. Stretch is what a column card wants. */
    align-items: stretch;
    gap: 0;
    padding: 16px 16px 14px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.gogo .fare-row:hover {
    transform: translateY(-3px);
    border-color: rgba(4, 60, 92, .35);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
}

/* ---- route line: green dot, dashed arrow, red dot ---- */
body.gogo .fare-row .fr-route {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 13px;
    border-bottom: 1px solid #f1f1f1;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
}

body.gogo .fare-row .fr-route::before,
body.gogo .fare-row .fr-route::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
body.gogo .fare-row .fr-route::before { background: #16a34a; }   /* origin */
body.gogo .fare-row .fr-route::after  { background: #e11d48; }   /* destination */

body.gogo .fare-row .fr-route b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

body.gogo .fare-row .fr-route b:first-of-type { margin-right: auto; }

/* the arrow between the two names */
body.gogo .fare-row .fr-route i {
    flex: none;
    color: #c9c9c9;
    font-size: 11px;
}

/* ---- prices ---- */
body.gogo .fare-row .fr-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* the headline price */
body.gogo .fare-row .fr-price[data-lbl="Sedan"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin-top: 12px;
    font-size: 23px;
    font-weight: 700;
    color: #111111;
}

body.gogo .fare-row .fr-price[data-lbl="Sedan"]::before {
    content: "STARTING FROM";
    color: #9a9a9a;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
}

/* the other two, quietly underneath */
body.gogo .fare-row .fr-price[data-lbl="SUV"],
body.gogo .fare-row .fr-price[data-lbl="Premium SUV"] {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #4a4a4a;
}

body.gogo .fare-row .fr-price[data-lbl="SUV"]::before,
body.gogo .fare-row .fr-price[data-lbl="Premium SUV"]::before {
    content: attr(data-lbl);
    color: #9a9a9a;
    font-size: 11px;
    font-weight: 500;
}

/* ---- Book Now ---- */
body.gogo .fare-row .fr-act { margin-top: 14px; }

body.gogo .fare-row .fr-act .fr-book {
    display: block;
    width: 100%;
    min-height: 40px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: #e7f0f5;
    color: #043c5c;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

body.gogo .fare-row .fr-act .fr-book:hover { background: #043c5c; color: #ffffff; }

body.gogo .fare-note {
    margin-top: 20px;
    color: #8d8d8d;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 12.5px;
    text-align: center;
}

@media (max-width: 700px) {
    body.gogo .fare-table { grid-template-columns: 1fr; gap: 12px; }
    body.gogo .fare-row { padding: 14px; }
    body.gogo .fare-row .fr-price[data-lbl="Sedan"] { font-size: 21px; }
    body.gogo .fare-row .fr-act .fr-book { min-height: 44px; line-height: 44px; }
}

/* ==========================================================================
   FARE CARDS: BUTTONS ON ONE LINE, ALL FIVE ACROSS, SLIGHTLY LARGER
   --------------------------------------------------------------------------
   1. THE MISALIGNED BOOK NOW BUTTONS. Nashik-Shirdi and Nashik-Mumbai sat a few
      pixels high because the button simply followed the content above it, and
      those two cards have marginally shorter content than their neighbours. The
      cards were already equal height - the button just was not anchored. It now
      takes `margin-top: auto`, which pushes it to the card's lower edge, so
      every button lands on the same line whatever is above it. That holds for
      any future route with a longer name or a missing price.

   2. ALL FIVE IN ONE ROW. auto-fit was choosing four because the container was
      only ~938px wide. The section now uses the same 1250px measure as the
      calculator card above it, and the desktop grid is pinned to five explicit
      columns rather than left to auto-fit.

   3. Slightly larger with it: more padding, a bigger headline price and a taller
      button, which the extra container width pays for.
   ========================================================================== */
body.gogo .fare-row .fr-act { margin-top: auto; padding-top: 14px; }

body.gogo .fare-row {
    padding: 18px 18px 16px;
    justify-content: flex-start;
}

body.gogo .fare-row .fr-price[data-lbl="Sedan"] { font-size: 25px; }
body.gogo .fare-row .fr-route { font-size: 14.5px; padding-bottom: 14px; }
body.gogo .fare-row .fr-act .fr-book { min-height: 42px; line-height: 42px; font-size: 14px; }

@media (min-width: 992px) {
    /* match the calculator's width so five cards have room to breathe */
    body.gogo #packages-fares > .gogo-wrap { max-width: 1250px; margin: 0 auto; }

    body.gogo #packages-fares .fare-table,
    body.gogo #panelPackagesWrap .fare-table {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Line 1491 caps `.fare-table` at max-width 940px, from when it was a five
   column table rather than a card grid. That cap - not the grid - is why the
   cards came out 177px wide inside a 1250px container. Released, so the five
   cards use the full measure and each one is wider than before. */
body.gogo .fare-table { max-width: none; }

/* ==========================================================================
   1. LOCAL TRIP: THE DEAD SPACE IN THE FIELD ROW
   --------------------------------------------------------------------------
   Local Trip hides To, the swap button and both return fields. Their grid
   columns remained declared, so the three surviving fields sat in the first
   three tracks with four empty tracks trailing - the wide gap, and the reason
   the Departure label ran into Pickup Time. Local mode gets its own track list.
   ========================================================================== */
@media (min-width: 901px) {
    body.gogo .search-grid.is-local {
        grid-template-columns: minmax(240px, 1.4fr) minmax(170px, .8fr) minmax(170px, .8fr);
    }
}


/* ==========================================================================
   2. OUTSTATION CABS: ONE PRICE, LARGER
   --------------------------------------------------------------------------
   The card carried One Way and Round Trip side by side with a caption over each.
   Every vehicle currently has the SAME figure for both, so it read as the same
   number printed twice. The round-trip box and both captions are hidden, leaving
   one clear per-km price at a much larger size.

   Worth knowing: this is presentational. tbl_CarVehicleMaster still stores
   OneWayRate and RoundTripRate separately and the fare engine still uses
   whichever applies, so if the client ever prices them differently the second
   figure needs to come back - it is hidden here, not deleted.
   ========================================================================== */
body.gogo .fleet-rates {
    grid-template-columns: 1fr;
    border-top: 1px solid #f1f1f1;
}

body.gogo .fleet-rates .rate-box:last-child { display: none; }
body.gogo .fleet-rates .rate-box .lbl { display: none; }

body.gogo .fleet-rates .rate-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

body.gogo .fleet-rates .rate-box .val {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 27px;
    font-weight: 700;
    color: #043c5c;
    line-height: 1.1;
}

body.gogo .fleet-rates .rate-box .val span {
    font-size: 13px;
    font-weight: 500;
    color: #8d8d8d;
}


/* ==========================================================================
   3. FEATURES OF RC TRAVELS
   --------------------------------------------------------------------------
   Was a flat four-across grid of boxes with an icon tile, all different heights
   and no hierarchy. Now: even cards, a round maroon-tinted icon, a clear title
   and a quiet line under it, with the same lift on hover the other cards use.
   ========================================================================== */
body.gogo .feat-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: stretch;
}

body.gogo .feat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.gogo .feat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(4, 60, 92, .35);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
}

body.gogo .feat-card .ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #e7f0f5;
    color: #043c5c;
    font-size: 19px;
}

body.gogo .feat-card:hover .ico { background: #043c5c; color: #ffffff; }

body.gogo .feat-card h3 {
    margin: 0 0 7px;
    color: #111111;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
}

body.gogo .feat-card p {
    margin: 0;
    color: #6f6f6f;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================================
   4. THE GAP BETWEEN OUTSTATION CAB AND THE FARE CARDS
   --------------------------------------------------------------------------
   Two 52px section paddings met back to back, and the fare note added more on
   top. Tightened where the two sections touch rather than globally, so the rest
   of the page keeps its rhythm.
   ========================================================================== */
body.gogo #packages-fares { padding-bottom: 34px; }
body.gogo #fleet { padding-top: 34px; }
body.gogo #packages-fares .fare-note { margin-top: 16px; margin-bottom: 0; }


/* ==========================================================================
   5. HERO BANNER, MATCHED TO THE SUPPLIED ARTWORK
   --------------------------------------------------------------------------
   Centred column, gold heading, white body copy, no buttons - as in the
   reference. The heading takes a dark shadow because it sits over a bright
   sunset: gold on orange is close to unreadable without one.
   ========================================================================== */
body.gogo .rc-original-hero-content.rc-hero-kumbh {
    max-width: 900px;
    margin: 0 auto;
    padding: 54px 28px;
    text-align: center;
}

body.gogo .rc-hero-kumbh h1 {
    margin: 0 0 14px;
    color: #f6c343;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: clamp(22px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

body.gogo .rc-hero-kumbh p {
    max-width: 760px;
    margin: 0 auto;
    color: #ffffff;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.75;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* The reference is a centred banner, so the left-weighted wash is replaced with
   an even one - a gradient that darkens only the left would leave the right side
   of centred text sitting on bare sunset. */
body.gogo .rc-original-hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .52) 100%);
}

@media (max-width: 700px) {
    body.gogo .rc-original-hero-content.rc-hero-kumbh { padding: 34px 18px; }
    body.gogo .rc-hero-kumbh p { font-size: 13.5px; line-height: 1.7; }
}

/* ==========================================================================
   HERO: TRUE CENTRING, AND A TAP-TO-CHAT NUMBER
   --------------------------------------------------------------------------
   The copy was centred horizontally but sat wherever its own padding put it
   vertically, so on a 430px band it read as top-weighted rather than centred in
   the artwork. The hero is now a centring flex container and the content block
   no longer carries the vertical padding that was doing that job.

   The WhatsApp number sits in the same centred column beneath the paragraph.
   It is 46px tall - above the 44px minimum touch target - because its whole
   purpose is being tapped on a phone.
   ========================================================================== */
body.gogo .rc-original-hero {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.gogo .rc-original-hero-content.rc-hero-kumbh {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 44px 28px;
}

body.gogo .rc-hero-kumbh h1,
body.gogo .rc-hero-kumbh p { width: 100%; }

body.gogo .rc-hero-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    margin-top: 20px;
    padding: 0 22px;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: background .18s ease, transform .18s ease;
}

body.gogo .rc-hero-wa i { font-size: 18px; }

body.gogo .rc-hero-wa:hover {
    background: #1eb955;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 700px) {
    body.gogo .rc-hero-wa { min-height: 48px; font-size: 15px; margin-top: 16px; }
}

/* ==========================================================================
   SEE MORE -> INCLUSIONS / EXCLUSIONS DIALOG (cab list)
   --------------------------------------------------------------------------
   Laid out like the supplied reference: solid header bar with a cab mark and a
   close cross, two tabs with the active one underlined, then a list with an icon
   on every line. The reference's navy and orange become our maroon.
   ========================================================================== */
body.gogo .see-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    background: #ffffff;
    color: #043c5c;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body.gogo .see-more-btn:hover { background: #043c5c; border-color: #043c5c; color: #ffffff; }
body.gogo .see-more-btn:focus { outline: none; }
body.gogo .see-more-btn:focus-visible { outline: 2px solid #043c5c; outline-offset: 2px; }

body.gogo .inex-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147482000;      /* under the floating dock, over everything else */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 17, 17, .55);
}

body.gogo .inex-overlay[hidden] { display: none; }

body.gogo .inex-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 84vh;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

body.gogo .inex-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #043c5c;
    color: #ffffff;
}

body.gogo .inex-head i { font-size: 19px; }

body.gogo .inex-head h4 {
    margin: 0;
    color: #ffffff;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 16.5px;
    font-weight: 600;
}

body.gogo .inex-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
}
body.gogo .inex-close:hover { background: rgba(255, 255, 255, .26); }

body.gogo .inex-tabs { display: flex; border-bottom: 1px solid #ececec; }

body.gogo .inex-tab {
    flex: 1 1 0;
    padding: 14px 10px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: #f7f7f8;
    color: #6f6f6f;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

body.gogo .inex-tab.active {
    background: #ffffff;
    border-bottom-color: #043c5c;
    color: #043c5c;
}
body.gogo .inex-tab:focus { outline: none; }
body.gogo .inex-tab:focus-visible { outline: 2px solid #043c5c; outline-offset: -2px; }

body.gogo .inex-body { padding: 8px 20px 22px; overflow-y: auto; }

body.gogo .inex-body ul { margin: 0; padding: 0; list-style: none; }

body.gogo .inex-body li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    color: #222222;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
}

body.gogo .inex-body li::before {
    content: "\f05a";                 /* circle-info */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: #e7f0f5;
    color: #043c5c;
    font-size: 12px;
}

/* the included list gets a rupee mark, as in the reference */
body.gogo .inex-body .inex-inc li::before { content: "\e1bc"; }

body.gogo .inex-empty { margin: 14px 0; color: #6f6f6f; font-size: 14px; }

@media (max-width: 700px) {
    body.gogo .inex-modal { max-height: 88vh; }
    body.gogo .inex-head h4 { font-size: 15px; }
    body.gogo .inex-tab { font-size: 13.5px; padding: 12px 8px; }
    body.gogo .inex-body li { font-size: 13.5px; }
}

/* See More now sits under Book Now in the price column and matches it exactly -
   same width, same height, same radius - so the pair reads as one stack. Outline
   styling keeps Book Now as the primary action. */
body.gogo .price-card .see-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin: 10px 0 0;
    padding: 0 16px;
    border: 1.5px solid #043c5c;
    border-radius: 8px;
    background: #ffffff;
    color: #043c5c;
    font-size: 14.5px;
    font-weight: 600;
}

body.gogo .price-card .see-more-btn:hover { background: #043c5c; color: #ffffff; }

/* Features of RC Travels: exactly four per row, so the eight cards read as 4
   above and 4 below instead of auto-fit choosing five and orphaning three. */
@media (min-width: 992px) {
    body.gogo .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 701px) and (max-width: 991px) {
    body.gogo .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* See More last in the price column, sitting on the card's bottom edge. */
body.gogo .price-card { display: flex; flex-direction: column; }
body.gogo .price-card .see-more-btn { order: 99; margin-top: 12px; margin-bottom: 0; }

/* Fleet cards: the name and the per-km price carry the card, so both step up.
   Card height is unaffected - the description box and photo frame are unchanged,
   and the title still fits one line at the four-across width. */
body.gogo .fleet-card h3 {
    font-size: 18.5px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
}

body.gogo .fleet-rates .rate-box .val { font-size: 31px; }
body.gogo .fleet-rates .rate-box .val span { font-size: 14.5px; }

@media (max-width: 700px) {
    body.gogo .fleet-card h3 { font-size: 18px; }
    body.gogo .fleet-rates .rate-box .val { font-size: 29px; }
}

/* ==========================================================================
   RESULTS PAGE: BIGGER CAR NAMES AND PRICES, AND A MOBILE PASS
   --------------------------------------------------------------------------
   The homepage fleet cards were raised earlier; the cards on the results page -
   the ones a customer is actually comparing before paying - were still on the
   original smaller type. The model name and the total are the two things being
   compared, so those two lead.
   ========================================================================== */
body.gogo .cab-card .cab-left h3 {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    color: #111111;
}

body.gogo .cab-card .cab-tag {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
}

body.gogo .cab-card .cab-left h5 { font-size: 14.5px; color: #4a4a4a; }

/* the total, and the struck-through original beside it */
body.gogo .price-card .final-price,
body.gogo .price-card .total-amount,
body.gogo .price-card strong {
    font-size: 27px;
    font-weight: 700;
    color: #111111;
}

body.gogo .price-card .old-price { font-size: 15px; }

body.gogo .cab-card .cab-features span,
body.gogo .cab-card .billing-basis { font-size: 13.5px; }


/* ==========================================================================
   WHOLE-SITE MOBILE PASS, PART 2
   --------------------------------------------------------------------------
   The earlier pass covered the homepage. This covers the pages a customer
   reaches after searching - the results list and the booking form - which were
   still laid out for a desktop two-column card.
   ========================================================================== */
@media (max-width: 700px) {

    /* ---- results list: one column, nothing side by side ---- */
    body.gogo .cab-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }

    body.gogo .cab-card .cab-left,
    body.gogo .cab-card .price-card {
        width: 100%;
        max-width: none;
        border-left: 0;          /* the divider only makes sense side by side */
        padding-left: 0;
    }

    body.gogo .cab-card .cab-left h3 { font-size: 21px; }
    body.gogo .price-card .final-price,
    body.gogo .price-card .total-amount,
    body.gogo .price-card strong { font-size: 25px; }

    /* both actions full width and thumb-sized */
    body.gogo .cab-card .book-btn,
    body.gogo .price-card .see-more-btn {
        width: 100%;
        min-height: 48px;
        line-height: 48px;
        padding: 0 16px;
        text-align: center;
    }

    body.gogo .price-card .see-more-btn { line-height: normal; }

    /* ---- trip summary strip on the results page ---- */
    body.gogo .search-summary-card { padding: 14px; }
    body.gogo .summary-content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    body.gogo .summary-box { padding: 10px 12px; }
    body.gogo .summary-box span { font-size: 11.5px; }
    body.gogo .summary-icon { display: none; }   /* an arrow between stacked boxes reads as noise */

    /* ---- booking form ---- */
    body.gogo .booking-grid,
    body.gogo .form-grid,
    body.gogo .customer-grid { grid-template-columns: 1fr !important; gap: 12px; }

    /* 16px keeps iOS Safari from zooming the page when a field is focused */
    body.gogo .booking-input,
    body.gogo input[type="text"],
    body.gogo input[type="tel"],
    body.gogo input[type="email"],
    body.gogo select,
    body.gogo textarea { font-size: 16px; }

    body.gogo .invoice-wrap,
    body.gogo .invoice-card { padding: 16px; }
}

/* ==========================================================================
   BOOKING PAGE "TRIP DETAILS" - BIGGER AND READABLE
   --------------------------------------------------------------------------
   The sizes were set in CabBooking.aspx's own <style> block, and that lost:
   gogo-pages.css carries `.gogo .route-box strong` and `.gogo .trip-info-box
   strong`, which are more specific than the page's `.route-box strong`, so the
   page rule never applied no matter that it loads later. theme.css loads after
   gogo-pages.css, so matching that selector shape here is what actually wins.

   Labels also darken from #999 - grey that light on the #fafafa panel is below
   the 4.5:1 contrast minimum, which is why the block read as washed out.
   ========================================================================== */
body.gogo .route-box > span:first-child,
body.gogo .trip-info-box > span:first-child {
    font-size: 12.5px;
    font-weight: 700;
    color: #6b6b6b;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

body.gogo .route-box label,
body.gogo .route-box b,
body.gogo .route-box strong {
    font-size: 21px;
    font-weight: 700;
    color: #111111;
}

body.gogo .trip-info-box label,
body.gogo .trip-info-box b,
body.gogo .trip-info-box strong {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
}

@media (max-width: 700px) {
    body.gogo .route-box label,
    body.gogo .route-box b,
    body.gogo .route-box strong { font-size: 19px; }

    body.gogo .trip-info-box label,
    body.gogo .trip-info-box b,
    body.gogo .trip-info-box strong { font-size: 16.5px; }
}

/* ==========================================================================
   BOOKING PAGE: WHERE THE FARE CAME FROM
   --------------------------------------------------------------------------
   Two small lines added beside the numbers a customer is checking:

     .rate-note  under Cab Fare  -> "144 km x Rs.12/km . Rs.12/km after this"
     .km-rate    under Distance  -> "Rs.12/km after this"

   Kilometres are whole numbers everywhere now (FareEngine.KmText), so
   "144 km x Rs.12" and the fare beside it genuinely reconcile. That is the
   whole point of these lines - previously the page showed 143.61 KM next to
   Rs.12/KM and a total of Rs.1,723.32, three figures the customer could not
   tie together.

   Prefixed with .gogo because gogo-pages.css already targets
   ".gogo .route-box strong" and friends; matching that specificity is what
   made the earlier Trip Details legibility fix stick.
   ========================================================================== */

body.gogo .rate-note {
    margin: -6px 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7484;
    font-style: normal;
    text-align: right;
}

body.gogo .trip-info-box .km-rate,
body.gogo .km-rate {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    color: #7a828f;
    letter-spacing: .1px;
}

@media (max-width: 600px) {
    body.gogo .rate-note { text-align: left; margin-top: 0; }
    body.gogo .km-rate { font-size: 11px; }
}

/* ==========================================================================
   RESULTS CARDS, REBUILT TO THE SUPPLIED REFERENCE
   --------------------------------------------------------------------------
   Three columns, as in the screenshot: details on the left, artwork and the
   feature list in the middle, price rail on the right, and a discount strip
   across the foot.

   COLOUR IS OURS. The reference is orange-on-white with a purple wordmark;
   every accent here is the RC Travels maroon #043c5c, with the existing orange
   --accent kept for the Book Now button because that is already the one
   call-to-action colour used across the site.

   WHAT IS NOT COPIED: the left-hand "Cab Type" filter panel and the trip
   summary bar from the screenshot. Neither exists on this site, and inventing
   filters for a four-vehicle fleet would be pure decoration.
   ========================================================================== */

body.gogo .cab-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    grid-template-areas:
        "info  price"
        "offer price";
    gap: 0;
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 28px rgba(17, 17, 17, .05);
    overflow: hidden;
    margin-bottom: 20px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.gogo .cab-card:hover {
    border-color: rgba(var(--brand-rgb), .28);
    box-shadow: 0 3px 6px rgba(17, 17, 17, .05), 0 16px 38px rgba(17, 17, 17, .09);
}

body.gogo .cab-info  { grid-area: info; padding: 0; min-width: 0; }
body.gogo .cab-offer { grid-area: offer; }
body.gogo .cab-card .price-card { grid-area: price; }

/* ---------------------------------------------- head: chip, name, icons ---- */

body.gogo .cab-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f2f5;
    flex-wrap: wrap;
}

body.gogo .cab-left { min-width: 0; }

body.gogo .cab-tag {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 6px;
    background: var(--brand-tint);
    border: 1px solid rgba(var(--brand-rgb), .18);
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

body.gogo .cab-left h3 {
    margin: 7px 0 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand);
    letter-spacing: -.2px;
}

body.gogo .cab-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

body.gogo .cab-icons span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #5b6472;
    white-space: nowrap;
}

body.gogo .cab-icons i { color: #8b95a4; font-size: 12.5px; }

/* --------------------------------------------------- body: art + features -- */

body.gogo .cab-body {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 16px 20px 18px;
}

body.gogo .cab-image {
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.gogo .cab-image img {
    max-width: 100%;
    max-height: 118px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .3s ease;
}

body.gogo .cab-card:hover .cab-image img { transform: scale(1.05); }

body.gogo .cab-features { min-width: 0; }

body.gogo .cab-features h5 {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.35;
}

body.gogo .cab-features ul { list-style: none; margin: 0; padding: 0; }

body.gogo .cab-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 4px 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #3f4855;
}

body.gogo .cab-features li strong { font-weight: 600; color: #1d232c; }

body.gogo .cab-features li i {
    flex: 0 0 15px;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--brand);
    text-align: center;
}

/* ------------------------------------------------------- discount strip ---- */

body.gogo .cab-offer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-top: 1px solid #f0f2f5;
    background: #fbf5f5;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
}

body.gogo .cab-offer i { font-size: 11px; }

/* ----------------------------------------------------------- price rail ---- */

body.gogo .cab-card .price-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 18px 18px;
    border-left: 1px solid #eef0f4;
    background: #fcfcfd;
    text-align: right;
}

body.gogo .cab-card .top-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

body.gogo .cab-card .certified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #157347;
}

body.gogo .cab-card .certified i { font-size: 11px; }

body.gogo .cab-card .rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a6d00;
}

body.gogo .cab-card .rating i { color: #f0b400; font-size: 11px; }

body.gogo .cab-card .price-card h4 {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: -.1px;
}

body.gogo .cab-card .billing-basis {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #78818f;
    text-align: right;
}

body.gogo .cab-card .old-price {
    font-size: 13.5px;
    color: #8d96a3;
    text-decoration: line-through;
    margin-bottom: 2px;
}

body.gogo .cab-card .old-price span {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #157347;
    text-decoration: none;
    display: inline-block;
}

body.gogo .cab-card .new-price {
    font-size: 29px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--brand);
    letter-spacing: -1px;
}

body.gogo .cab-card .price-card > p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: #78818f;
}

/* Book Now keeps the site's single orange call-to-action. */
body.gogo .cab-card .book-btn {
    display: block;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 9px;
    border: 0;
    background: var(--accent);
    color: var(--accent-ink, #ffffff);
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .16s ease, transform .1s ease;
}

body.gogo .cab-card .book-btn:hover { filter: brightness(.93); color: #ffffff; text-decoration: none; }
body.gogo .cab-card .book-btn:active { transform: translateY(1px); }

/* See more reads as a quiet secondary, per the reference. */
body.gogo .cab-card .cab-seemore,
body.gogo .cab-card .see-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 9px;
    padding: 11px 16px;
    border-radius: 9px;
    border: 1px solid #e0e4ea;
    background: #ffffff;
    color: #3f4855;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

body.gogo .cab-card .cab-seemore:hover,
body.gogo .cab-card .see-more-btn:hover {
    border-color: rgba(var(--brand-rgb), .32);
    color: var(--brand);
    background: var(--brand-tint);
    text-decoration: none;
}

/* -------------------------------------------------------------- narrower --- */

@media (max-width: 1000px) {
    body.gogo .cab-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "info"
            "offer"
            "price";
    }

    body.gogo .cab-card .price-card {
        border-left: 0;
        border-top: 1px solid #eef0f4;
        text-align: left;
    }

    body.gogo .cab-card .billing-basis { justify-content: flex-start; text-align: left; }
}

@media (max-width: 600px) {
    body.gogo .cab-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body.gogo .cab-image { height: 148px; }
    body.gogo .cab-image img { max-height: 148px; }
    body.gogo .cab-top { padding: 14px 15px 11px; }
    body.gogo .cab-icons { margin-left: 0; gap: 13px; width: 100%; }
    body.gogo .cab-body { padding: 14px 15px 16px; }
    body.gogo .cab-offer { padding: 10px 15px; font-size: 12.5px; }
    body.gogo .cab-card .price-card { padding: 15px; }
    body.gogo .cab-left h3 { font-size: 17.5px; }
    body.gogo .cab-card .new-price { font-size: 27px; }
}

/* ==========================================================================
   RESULTS CARD: WINNING THE TWO FIGHTS THE REBUILD LOST
   --------------------------------------------------------------------------
   Verified in a browser, not assumed. Two earlier rules were beating the block
   above:

   1. "body.gogo .cab-card .cab-left h3" further up this file carries one more
      class than the rule above it, so the vehicle name stayed near-black
      (rgb(17,17,17)) instead of brand maroon. Matched here at equal specificity
      and placed later, so this one wins.

   2. cablist.css sets ".price-card { width: 320px }". The grid track is 268px,
      so the rail was overflowing its own column by 52px. The width is released
      here and the track does the sizing.
   ========================================================================== */

body.gogo .cab-card .cab-left h3 {
    color: var(--brand);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.2px;
    margin: 7px 0 0;
}

body.gogo .cab-card .price-card {
    width: auto;
    max-width: none;
    min-width: 0;
}

/* The rail's own children align right; billing-basis is set left by
   gogo-pages.css, which is fine on a narrow column but reads as a stray
   indent here. */
body.gogo .cab-card .price-card > div { text-align: right; }
body.gogo .cab-card .price-card .billing-basis { text-align: right; }

@media (max-width: 1000px) {
    body.gogo .cab-card .price-card > div,
    body.gogo .cab-card .price-card .billing-basis { text-align: left; }
}

@media (max-width: 600px) {
    body.gogo .cab-card .cab-left h3 { font-size: 17.5px; }
}

/* ==========================================================================
   GRID BALANCE: NO ORPHAN CARDS
   --------------------------------------------------------------------------
   Both grids took a hardcoded column count - four for the fleet, five for the
   fare cards. That is fine until the client adds one more vehicle or route, at
   which point the extra card sits alone on its own row and reads as a bug.

   --cols is now written onto the container by the code-behind, computed from how
   many cards there actually are (BalancedColumns in index.aspx.cs):

     4 cars  -> 4 across        5 cars  -> 3 and 2
     6 cars  -> 3 and 3         7 cars  -> 4 and 3

   The fallbacks in var() keep the old behaviour if the attribute is ever
   missing, so a null count cannot collapse the layout to one column.

   The narrow-screen media queries further up still win, because they come with
   their own explicit column counts and phones want one or two regardless.
   ========================================================================== */

@media (min-width: 992px) {
    body.gogo .fleet-grid {
        grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    }

    body.gogo #packages-fares .fare-table,
    body.gogo #panelPackagesWrap .fare-table {
        grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    }
}

/* ==========================================================================
   BOOKING PAGE: TRIP DETAILS, CONDENSED
   --------------------------------------------------------------------------
   The trip summary was a route panel plus six bordered boxes - roughly a screen
   of information the customer had already chosen, sitting above the form they
   still had to fill in. It is now one route line and a row of small facts, so
   the passenger details start near the top of the page where they belong.

   The old .trip-route / .route-box / .trip-info-grid rules are left in place
   further up this file and in gogo-pages.css. They no longer match anything on
   this page, and removing them would mean auditing every other page that might
   still use those class names.
   ========================================================================== */

body.gogo .trip-brief { margin: 0; }

body.gogo .trip-brief .tb-route {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.2px;
}

body.gogo .trip-brief .tb-route i {
    font-size: 13px;
    color: var(--brand);
    flex: 0 0 auto;
}

body.gogo .trip-brief .tb-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
}

body.gogo .trip-brief .tb-facts li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: #4b5563;
    white-space: nowrap;
}

/* A thin separator between facts instead of six card borders. */
body.gogo .trip-brief .tb-facts > li + li,
body.gogo .trip-brief .tb-facts > div + div > li {
    border-left: 1px solid #e3e7ec;
    padding-left: 18px;
}

body.gogo .trip-brief .tb-facts b {
    font-weight: 600;
    color: var(--ink);
}

body.gogo .trip-brief .tb-facts .km-rate {
    display: inline;
    margin: 0;
    font-size: 12px;
    font-style: normal;
    color: #7a828f;
}

/* asp:Panel renders a div, which would break the flex row - so the panels are
   made transparent to layout and their <li> becomes the flex child. */
body.gogo .trip-brief .tb-facts > div { display: contents; }

@media (max-width: 640px) {
    body.gogo .trip-brief .tb-route { font-size: 17.5px; gap: 8px; }

    body.gogo .trip-brief .tb-facts { gap: 6px 12px; }

    body.gogo .trip-brief .tb-facts li { font-size: 13.5px; white-space: normal; }

    body.gogo .trip-brief .tb-facts > li + li,
    body.gogo .trip-brief .tb-facts > div + div > li {
        padding-left: 12px;
    }
}

/* Local hire enquiry note: takes the place of the Selected Cab card when the
   customer arrives without choosing a vehicle. */
body.gogo .booking-card.enquiry-note {
    border-left: 3px solid var(--brand);
    background: var(--brand-tint);
}

body.gogo .booking-card.enquiry-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #3f4855;
}

/* ==========================================================================
   BOOKING SUMMARY, TIGHTENED
   --------------------------------------------------------------------------
   The summary was set at near-body size with generous row padding, so five
   rows and a note filled the rail and pushed Confirm Booking down. It carries
   four figures; it does not need to shout. The TOTAL still steps up, because
   that is the one number the customer is actually checking.

   Stay Charges was removed from the markup (it was permanently 0.00) and the
   Discount row now only renders when a discount exists.
   ========================================================================== */

body.gogo .price-card { padding: 18px 18px 20px; }

body.gogo .price-card h3 {
    margin: 0 0 13px;
    font-size: 15px;
    letter-spacing: -.1px;
}

body.gogo .price-card .price-row {
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.45;
}

body.gogo .price-card .price-row span { color: #5b6472; }

body.gogo .price-card .price-row strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

body.gogo .price-card .price-divider { margin: 8px 0; }

body.gogo .price-card .total-row {
    margin-top: 9px;
    padding-top: 11px;
    font-size: 14px;
}

body.gogo .price-card .total-row span:last-child,
body.gogo .price-card .total-row strong {
    font-size: 23px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: -.5px;
}

body.gogo .price-card .gst-note {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #7a828f;
}

body.gogo .price-card .terms-box {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
}

body.gogo .price-card .confirm-btn {
    margin-top: 12px;
    min-height: 46px;
    font-size: 15px;
}

/* The rate note under Cab Fare is a footnote, not a row. */
body.gogo .price-card .rate-note {
    margin: -3px 0 8px;
    font-size: 11px;
    line-height: 1.45;
    color: #7a828f;
}

/* A local hire has no destination, so the arrow and drop are hidden. */
body.gogo .trip-brief .tb-to {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   LOGO PALETTE: YELLOW CALL TO ACTION
   --------------------------------------------------------------------------
   Applied by tools\apply-logo-colours.ps1. Removed by the rollback script,
   which restores this file wholesale from palette-backup\maroon.

   The bulk substitution turned every maroon into the logo navy, which is right
   for headings, icons and borders but wrong for buttons: a navy button on a
   navy-accented page disappears. The logo yellow #fcc808 is the action colour,
   with navy #043c5c text on it.

   Navy text on yellow, not white: white on #fcc808 is around 1.7:1 and fails
   badly. Navy on yellow is comfortably past 4.5:1.
   ========================================================================== */

body.gogo,
body.gogo[data-theme="royal"] {
    --accent:       #fcc808;
    --accent-rgb:   252, 200, 8;
    --accent-hover: #e6b400;
    --accent-tint:  #fff8e0;
    --accent-ink:   #043c5c;
}

/* The search button, Book Now, Confirm Booking, fare-card Book.

   !important ON THE TEXT COLOUR IS NOT LAZINESS. gogo.css sets
   ".btn-search { color: #fff !important }" and gogo-pages.css sets
   ".gogo .book-btn { color: #fff !important }". Nothing without !important can
   beat those, whatever its specificity - and white on #fcc808 measures about
   1.7:1, which is illegible. Verified in a browser: the background went yellow
   and the label stayed white until these were added.

   The backgrounds also need help, because several rules further up carry three
   classes (body.gogo .search-cta .btn-search) and would otherwise win. */

body.gogo .search-cta .btn-search,
body.gogo .btn-search,
body.gogo .cab-card .book-btn,
body.gogo .book-btn,
body.gogo .booking-page .confirm-btn,
body.gogo .confirm-btn,
body.gogo .fr-book,
body.gogo .btn-brand,
body.gogo .rc-original-primary,
body.gogo .search-btn,
body.gogo .kumbh-btn,
body.gogo .login-btn,
body.gogo .contact-form button,
body.gogo .contact-form input[type="submit"] {
    background: #fcc808 !important;
    border-color: #fcc808;
    color: #043c5c !important;
    box-shadow: 0 8px 20px rgba(252, 200, 8, .30);
}

body.gogo .search-cta .btn-search i,
body.gogo .btn-search i,
body.gogo .cab-card .book-btn i,
body.gogo .book-btn i,
body.gogo .confirm-btn i { color: #043c5c !important; }

body.gogo .search-cta .btn-search:hover,
body.gogo .btn-search:hover,
body.gogo .btn-search:focus,
body.gogo .cab-card .book-btn:hover,
body.gogo .book-btn:hover,
body.gogo .booking-page .confirm-btn:hover,
body.gogo .confirm-btn:hover,
body.gogo .fr-book:hover,
body.gogo .btn-brand:hover,
body.gogo .rc-original-primary:hover,
body.gogo .search-btn:hover,
body.gogo .kumbh-btn:hover,
body.gogo .login-btn:hover,
body.gogo .contact-form button:hover {
    background: #e6b400 !important;
    border-color: #e6b400;
    color: #043c5c !important;
    filter: none;
    box-shadow: 0 11px 26px rgba(252, 200, 8, .38);
}

/* The fare card Book pill starts as a pale chip and fills on hover, so it needs
   its resting state left alone and only its hover switched. */
body.gogo .fare-row .fr-act .fr-book {
    background: #e7f0f5 !important;
    color: #043c5c !important;
    box-shadow: none;
}

body.gogo .fare-row .fr-act .fr-book:hover {
    background: #fcc808 !important;
    color: #043c5c !important;
}

/* Cyan is the logo's fourth colour. Used sparingly, as the underline accent
   beneath section headings, so it appears without competing with navy. */
body.gogo .section-head h2::after {
    background: linear-gradient(90deg, #fcc808 0%, #54c5d0 100%);
}

/* ==========================================================================
   HOVER STATES IN THE LOGO YELLOW
   --------------------------------------------------------------------------
   THE PROBLEM WITH LITERAL YELLOW TEXT. #fcc808 on white measures about 1.7:1.
   As a hover colour for a nav link it would make the word nearly vanish at the
   moment the customer is pointing at it - the opposite of feedback.

   So the yellow arrives as a SHAPE, not as the text colour: a yellow underline
   sweeps in under the link, and the word itself moves to #8a6600 - a deepened
   version of the same yellow that reads as gold and clears 4.5:1 on white. The
   colour a customer perceives is yellow; the text stays readable.

   The active page keeps its underline permanently, so "you are here" and "you
   are pointing at this" are still distinguishable.
   ========================================================================== */

body.gogo .gogo-nav .links > li > a,
body.gogo .nav-links li a {
    position: relative;
    transition: color .18s ease;
}

body.gogo .gogo-nav .links > li > a:hover,
body.gogo .gogo-nav .links > li > a.active,
body.gogo .nav-links li a:hover,
body.gogo .nav-links li a.active { color: #8a6600; }

/* The sweeping underline. Scaled from the centre rather than animating width, so
   it cannot reflow the text beside it. */
body.gogo .gogo-nav .links > li > a::after,
body.gogo .nav-links li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    border-radius: 3px;
    background: #fcc808;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

body.gogo .gogo-nav .links > li > a:hover::after,
body.gogo .gogo-nav .links > li > a.active::after,
body.gogo .nav-links li a:hover::after,
body.gogo .nav-links li a.active::after {
    background: #fcc808;
    transform: scaleX(1);
}

/* The phone pill in the header picks up the same treatment: yellow border and
   a soft yellow wash, gold text. */
body.gogo .gogo-phone i { color: #8a6600; }

body.gogo .gogo-phone:hover,
body.gogo .phone-btn:hover {
    border-color: #fcc808;
    background: #fff8e0;
    color: #8a6600;
}

body.gogo .gogo-phone:hover i,
body.gogo .phone-btn:hover i { color: #8a6600; }

/* EVERYTHING ELSE THAT HOVERS. One consistent gesture across the site: the
   thing being pointed at picks up a yellow edge and lifts very slightly. */
body.gogo .fleet-card:hover,
body.gogo .fare-row:hover,
body.gogo .feat-card:hover,
body.gogo .pkg-card:hover,
body.gogo .rate-card:hover,
body.gogo .cab-card:hover {
    border-color: #fcc808;
    box-shadow: 0 14px 32px rgba(4, 60, 92, .13);
}

body.gogo .feat-card:hover .ico {
    background: #fcc808;
    color: #043c5c;
}

body.gogo .gogo-footer a:hover,
body.gogo .footer-col ul li a:hover,
body.gogo .popular-routes a:hover { color: #fcc808; }

/* Yellow reads well on the dark footer, so there it can be the text colour. */
body.gogo .social-icons a:hover {
    background: #fcc808;
    color: #043c5c;
}

/* THE TRIP TYPE PILLS: One Way / Round Trip / Local Trip / Airport Trip.

   These are radio-style - a ring drawn with ::before plus a text label, on a
   transparent background. So "border-color: yellow" on the pill itself does
   nothing visible; the ring IS the ::before, and that is what has to change.
   Confirmed by hovering one and reading the computed styles.
   
   On hover the ring goes logo yellow with a soft yellow halo, and the label
   moves to the same readable gold as the nav. The selected pill keeps its navy
   dot so "chosen" never looks the same as "pointed at". */

body.gogo .trip-pill {
    transition: color .18s ease;
}

body.gogo .trip-pill:hover {
    color: #8a6600;
    background: transparent;
}

body.gogo .trip-pill:hover::before {
    border-color: #fcc808;
    box-shadow: 0 0 0 4px rgba(252, 200, 8, .22);
}

/* The selected pill: hovering it brightens the ring but leaves the navy dot, so
   the current choice stays unmistakable. */
body.gogo .trip-pill.active:hover::before {
    border-color: #fcc808;
    box-shadow: 0 0 0 4px rgba(252, 200, 8, .28);
}

body.gogo .trip-pill.active:hover { color: #043c5c; }

/* Keyboard users get the same signal, not a browser default outline. */
body.gogo .trip-pill:focus-visible::before {
    border-color: #fcc808;
    box-shadow: 0 0 0 4px rgba(252, 200, 8, .35);
}

/* The Cabs / Packages tiles above the card take the same gesture. */
body.gogo .book-mode:hover,
body.gogo .book-mode:hover i { color: #8a6600; }

body.gogo .book-mode:hover {
    border-color: #fcc808;
    background: #fff8e0;
}

body.gogo .airport-chip:hover {
    border-color: #fcc808;
    background: #fff8e0;
    color: #8a6600;
}

body.gogo .add-stop-btn:hover,
body.gogo #btnAddStop:hover {
    border-color: #fcc808;
    background: #fff8e0;
    color: #8a6600;
}

body.gogo .cab-card .cab-seemore:hover,
body.gogo .cab-card .see-more-btn:hover,
body.gogo .price-card .see-more-btn:hover {
    border-color: #fcc808;
    background: #fff8e0;
    color: #043c5c;
}

/* Legacy pages: About, Contact, the results filter. Their icons became navy in
   the substitution above; on hover their cards take the same yellow edge. */
body.gogo .icon-box { background: #eef2f8; color: #043c5c; }

body.gogo .contact-card:hover .icon-box,
body.gogo .about-content-card:hover .icon-box {
    background: #fcc808;
    color: #043c5c;
}

body.gogo .modify-search:hover { color: #8a6600; }

/* The trip-type pill strip sits on navy; its active tab keeps white so the
   selected state stays obvious. */
body.gogo .trip-pill.active {
    background: #ffffff;
    color: #043c5c;
}

body.gogo .trip-pill.active i { color: #043c5c; }