/* =============================================================================
   RIDEX-style theme overlay (Rydex rebrand, Phase 6)
   =============================================================================
   Purpose: reskin the customer + driver account/dashboard/booking pages
   (login, register, account home, profile, trips, documents, earnings,
   "Book a Ride", "Choose a Ride", "Ride Requests") AND the public
   marketing/landing pages (home, about, contact, privacy, terms - added in
   Phase 4) to match the RIDEX mockup - dark headings, rounded pill buttons,
   softer card shadows, redesigned ride-type picker and status badges.

   Phase 6 (Rydex integration): the primary color variables below were
   switched from the original RIDEX blue (#2F6FED) to the new Rydex green
   (#10B981 / darker #07885D for hover states), per the new Rydex UI
   designs. Every color reference in this file is variable-driven or a
   literal copy of the same brand hex/rgb triplet (verified by a full
   source sweep before making this change - no other blue shade existed
   anywhere in the file), so this was a safe, mechanical, site-wide swap.
   Everything else in this file (layout, shapes, spacing) is unchanged.

   Loaded in master.blade.php right after auth.css and BEFORE the
   @include('landing-page.layouts.css') block, so:
     - It works immediately with no admin setup needed (ships its own
       green default palette).
     - If/when colors are changed later via Admin Panel -> Business
       Settings -> Website Color / Text Color, those DB-driven values will
       still win over this file automatically (they're injected after this
       file loads), so the existing color-customization system keeps working.

   Scope: color variables below are applied site-wide (this is exactly what
   the site's built-in color system already does, so it's low risk and
   purely cosmetic). The SHAPE changes (pill buttons, card radius) were
   originally scoped to only the account/dashboard/booking/ride-request
   pages (.dash-wrap, .auth-card, #bookForm, #bookStoreForm) so the public
   marketing pages were untouched - as of Phase 4 the pill-button rule was
   widened to apply everywhere (see below) and a new "Marketing / landing
   pages" section was appended that scopes card/section treatments
   specifically to the public pages, per your explicit request to restyle
   those too. Phase 4b then added one more fix within that same section
   (see the "Business Statistics band" comment below) after a source-level
   audit of main.css turned up one hardcoded (non-variable-driven) teal
   color the earlier phases' :root overrides couldn't reach.
   ============================================================================= */

:root {
    /* Rydex green palette (overrides the default teal palette in main.css;
       was RIDEX blue #2F6FED through Phase 5, switched to Rydex green in
       Phase 6) */
    --text-primary: #10B981;
    --text-secondary: #EAFAF4;
    --base-rgb: 16, 185, 129;
    --btn-rgb: 16, 185, 129;
    --bs-primary: #10B981;
    --bs-primary-rgb: 16, 185, 129;
    /* base-title/base-white: no live page currently uses these (confirmed
       via a full source sweep of main.css - Phase 4 addition), but they
       default to teal in main.css, so they're covered here too in case
       any future page content relies on them */
    --base-title: #10B981;
    --base-white: #10B981;

    /* Dark, near-navy headings/titles (matches the RIDEX driver dashboard's
       dark sidebar tone used for high-contrast text) */
    --title-color: #101828;
    --title-color-rgb: 16, 24, 40;
    --body-clr: #667085;
    --secondary-body-color: #667085;
}

/* -----------------------------------------------------------------------
   Shared card look - auth pages (login/register/forgot) + dashboard pages
   ----------------------------------------------------------------------- */

.auth-card,
.dash-section {
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

.dash-stat-card,
.dash-nav {
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}

.dash-stat-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
}

.dash-stat-card--highlight {
    border: 1px solid var(--text-primary);
    background: rgba(16, 185, 129, 0.06);
}

/* Rounded "segmented control" look for the account sub-nav */
.dash-nav a.active {
    background: var(--text-primary);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

/* -----------------------------------------------------------------------
   Pill-shaped primary buttons - site-wide as of Phase 4 (originally scoped
   to just the account/booking/auth areas; widened to cover the public
   marketing pages too now that those are in scope - .cmn--btn/.cmn--btn2
   are the site's only "common button" classes, used identically on both
   the dashboard and the marketing pages, so one rule safely covers both)
   ----------------------------------------------------------------------- */

.cmn--btn {
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cmn--btn:hover {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.cmn--btn2 {
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 600;
}

/* -----------------------------------------------------------------------
   Ride-type / vehicle picker cards ("Choose a Ride" - book-options page)
   ----------------------------------------------------------------------- */

.dash-wrap .auth-service-option {
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.dash-wrap .auth-service-option:has(input:checked) {
    border: 2px solid var(--text-primary);
    background: rgba(16, 185, 129, 0.06);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15);
    padding: 13px 15px; /* compensate for the extra 1px border so layout doesn't shift */
}

/* Booking map corners: originally an !important rule targeting #rideMap
   directly (Phase 1). As of Phase 5, #rideMap always carries the
   .ridex-book-map class instead, which sets its own radius (20px, to
   match the redesigned booking card) plus overflow:hidden so Google
   Maps' internal tiles/controls actually get clipped to that radius
   instead of squaring off inside it - seeded !important would have
   fought with and won over that new rule, so it's removed here rather
   than left to silently override the redesign. See .ridex-book-map /
   .ridex-driver-map further down for the current, single source of
   truth for every map's corner radius on this site.
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   Status badges - keep semantic colors (amber/red) but nudge the
   "in progress" badge (ongoing/accepted/out_for_pickup/approved) to the
   new primary so it's consistent. NOTE (Phase 6): this badge now renders
   in the same brand green (#10B981) used everywhere else, which sits
   close in hue to the unrelated "completed" success green main.css uses
   elsewhere on these pages - previously blue vs. green made "in
   progress" vs. "completed" trip statuses easy to tell apart at a
   glance; now both read as "green". Flagged in the delivery notes as a
   cosmetic follow-up if it's confusing in practice - not changed here
   since picking a different accent color wasn't part of the request.
   ----------------------------------------------------------------------- */

.dash-badge--ongoing,
.dash-badge--accepted,
.dash-badge--out_for_pickup,
.dash-badge--approved {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
}

.auth-badge {
    background: rgba(16, 185, 129, 0.12);
    color: var(--text-primary);
}

/* -----------------------------------------------------------------------
   Driver dashboard - left sidebar layout (Phase 1b)
   -----------------------------------------------------------------------
   Driver pages render `_nav.blade.php` as the very first element inside
   `.dash-wrap`, followed by one or more content elements (a back-link,
   `.dash-section`, etc. - varies per page). Rather than editing all 12
   driver Blade page templates to add a sidebar wrapper div, this is done
   with pure CSS: `.dash-wrap:has(.dash-nav--sidebar)` (only true on driver
   pages, since only the driver nav partial carries the `dash-nav--sidebar`
   modifier class) switches the wrap to a 2-column grid, pins the nav to
   column 1 spanning the full height, and every OTHER direct child
   (whatever it is, on whichever page) automatically flows into column 2,
   stacked in document order. Customer pages never get this class, so
   their `.dash-wrap`/`.dash-nav` keep the original top-tab-bar layout
   untouched - this only changes driver pages.
   ----------------------------------------------------------------------- */

.dash-wrap:has(.dash-nav--sidebar) {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
    /* was 1100px, then 1600px - settled on 1300px 2026-08-20 per explicit
       user follow-up ("the layout should be 1300px for the pages you
       edited"). This rule is MORE specific than the general `.dash-wrap`
       width rule further down, so it was the real reason every driver
       page (Documents/Earnings/Withdraw/Profile/Trips/Requests/Security)
       stayed narrow even after the container itself was widened. */
    max-width: 1300px;
}

.dash-wrap:has(.dash-nav--sidebar) > .dash-nav--sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
}

.dash-wrap:has(.dash-nav--sidebar) > *:not(.dash-nav--sidebar) {
    grid-column: 2;
}

.dash-nav--sidebar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 12px;
    position: sticky;
    top: 24px;
}

.dash-nav--sidebar a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    padding: 12px 14px;
}

.dash-nav--sidebar a i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.dash-nav--sidebar__logout {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #edf0f2;
}

.dash-nav--sidebar__logout button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #dc3545;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
}

.dash-nav--sidebar__logout button:hover {
    background: rgba(220, 53, 69, 0.08);
}

/* Below ~900px, fall back to the original horizontal tab-bar look
   instead of a cramped narrow sidebar - matches how the customer pages
   (and this same driver nav, before this change) already behave on
   mobile web. */
@media (max-width: 900px) {
    .dash-wrap:has(.dash-nav--sidebar) {
        display: block;
    }

    .dash-nav--sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        margin-bottom: 20px;
    }

    .dash-nav--sidebar a {
        flex: 1 1 auto;
        justify-content: center;
    }

    .dash-nav--sidebar__logout {
        border-top: none;
        margin-top: 0;
        flex: 1 1 auto;
    }

    .dash-nav--sidebar__logout button {
        justify-content: center;
    }
}

/* -----------------------------------------------------------------------
   Dark sidebar (Phase 3) - matches the RIDEX mockup's dark left nav,
   same treatment as the admin panel's sidebar. This one carries no
   logo (the site logo lives in the shared top header, separate from
   this account-dashboard sidebar), so there's no image-legibility risk
   to work around - the whole `.dash-nav--sidebar` panel can go dark.
   Persists through the <900px mobile fallback too (only the LAYOUT
   reverts to a horizontal bar there, not the color), since the RIDEX
   mobile screens use their own distinct patterns and there's no reason
   to snap back to a light bar on a narrow driver screen.
   ----------------------------------------------------------------------- */

.dash-nav--sidebar {
    background: #111827;
}

.dash-nav--sidebar a {
    color: #CBD5E1;
}

.dash-nav--sidebar a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.dash-nav--sidebar a.active {
    background: var(--text-primary);
    color: #fff;
}

.dash-nav--sidebar__logout {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.dash-nav--sidebar__logout button {
    color: #FCA5A5;
}

.dash-nav--sidebar__logout button:hover {
    background: rgba(220, 53, 69, 0.18);
}

/* =============================================================================
   Marketing / landing pages (Phase 4)
   =============================================================================
   Covers the public pages: Home (index.blade.php), About Us, Contact Us,
   Privacy Policy, Terms & Condition, and their shared header/footer
   partials. The site's existing --text-primary/--bs-primary/--title-color
   variables (set at the top of this file) already recolor most text/links/
   icons automatically, since change_text_color_or_bg() and the theme's own
   CSS already build on those same variables - so this section is mostly
   about SHAPE: rounded cards, softer shadows, and consistent pill buttons
   to match the RIDEX mockup's look, layered onto the site's existing
   layout and content with no Blade template changes.
   ============================================================================= */

/* Top nav bar - subtle elevation + green active/hover state on menu links */
header .navbar-bottom {
    box-shadow: 0 4px 20px rgba(16, 24, 40, 0.06);
}

header .navbar-bottom .menu > li > a.active,
header .navbar-bottom .menu > li > a:hover {
    color: var(--bs-primary);
}

header .navbar-bottom .auth-nav-dropdown__menu {
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* Hero / banner section */
.banner-section .banner-wrapper {
    border-radius: 24px;
    overflow: hidden;
}

/* Business Statistics band (the stat row just under the hero) - main.css
   hardcodes this border/shadow as a literal teal rgba() rather than
   building it from a CSS variable, so no :root override above can reach
   it (same "hardcoded value the theme system can't touch" pattern found
   and fixed repeatedly in the admin panel's charts back in Phase 2b-2d -
   this is the one confirmed instance of it on the public site). */
.basic-info-wrapper {
    border-color: rgba(16, 185, 129, 0.2);
    box-shadow: 0px 5px 20px -10px rgba(16, 185, 129, 0.15);
}

/* "Our Solutions" slider cards */
.ourSolution__item {
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ourSolution__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
}

/* "Our Services" tabs - pill-shaped tab buttons, active tab in primary green */
.service-section .nav-tabs.nav--tabs {
    border-bottom: none;
    gap: 8px;
}

.service-section .nav-tabs.nav--tabs .nav-link {
    border-radius: 999px;
    border: 1px solid rgba(16, 24, 40, 0.1);
    font-weight: 600;
}

.service-section .nav-tabs.nav--tabs .nav-link.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* App Download / Earn Money mini info cards */
.app-download-section .bg-fafafa,
.earn-money-section .bg-fafafa {
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
    border-color: rgba(16, 24, 40, 0.06) !important;
}

/* Testimonials */
.testimonial__item {
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

.testimonial-section .owl-btn {
    background: var(--bs-primary) !important;
}

/* Newsletter band */
.newsletter-section .newsletter--wrapper {
    border-radius: 24px;
    overflow: hidden;
}

.newsletter-form .form-control {
    border-radius: 999px 0 0 999px;
}

.newsletter-form .cmn--btn {
    border-radius: 0 999px 999px 0;
}

/* Footer - green hover accent on links/social icons, matches the rest of
   the reskin's link-hover convention */
footer .footer__wrapper-link a:hover,
footer .footer__wrapper-contact a:hover {
    color: var(--bs-primary);
}

footer .social-icons li a {
    transition: transform 0.15s ease;
}

footer .social-icons li a:hover {
    transform: translateY(-2px);
}

/* Simple content pages (About Us / Privacy Policy / Terms & Condition) -
   rounded page header banner */
.page-header {
    border-radius: 20px;
    overflow: hidden;
}

/* Contact Us page - icon circles in the new primary green, rounded info cards */
.contact-info-wrapper .item {
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}

.contact-info-wrapper .item .icon {
    background: rgba(16, 185, 129, 0.1);
    color: var(--bs-primary);
}

/* =============================================================================
   Booking flow + driver requests layout redesign (Phase 5)
   =============================================================================
   This section is a genuine LAYOUT redesign, not just a color/shape overlay
   like everything above - it targets new classes added directly in the
   rebuilt book.blade.php, book-options.blade.php, customer trips/show.blade.php
   and driver requests.blade.php templates, to match the RIDEX mockup's
   split-view booking screen (form + live map side by side) and the driver
   dashboard's request-card + map layout. Every existing element ID/route/
   AJAX call those templates already relied on was left untouched - only the
   surrounding markup and these styles are new, so none of the working
   booking/matching/tracking logic underneath had to change.
   ============================================================================= */

/* ---- Book a Ride / Choose a Ride: split "form left, map right" layout ---- */

.ridex-book-section {
    max-width: 1100px;
}

.ridex-book-grid {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 28px;
    align-items: start;
}

.ridex-book-left {
    display: flex;
    flex-direction: column;
}

.ridex-book-right {
    position: sticky;
    top: 24px;
}

.ridex-book-map,
.ridex-book-map-placeholder {
    width: 100%;
    height: 460px;
    border-radius: 20px;
}

.ridex-book-map {
    background: #eef2f8;
    /* Without this, Google Maps' own internal tile/control divs fill the
       container edge-to-edge and ignore the parent's border-radius -
       the map would render with square corners poking out of the
       rounded card regardless of the radius set above. */
    overflow: hidden;
}

.ridex-book-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #eef2f8;
    color: #94A3B8;
    font-size: 14px;
    text-align: center;
    padding: 0 40px;
    pointer-events: none;
}

.ridex-book-map-placeholder i {
    font-size: 32px;
}

.ridex-book-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ridex-book-field__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 34px;
    flex: 0 0 auto;
}

.ridex-book-field__dot--pickup {
    background: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.ridex-book-field__dot--drop {
    background: #F59E0B;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.ridex-book-field__connector {
    width: 2px;
    height: 18px;
    background: repeating-linear-gradient(to bottom, #CBD5E1 0, #CBD5E1 3px, transparent 3px, transparent 6px);
    margin-left: 5px;
}

.ridex-book-field__input {
    flex: 1 1 auto;
}

.ridex-book-field__input label {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    margin-bottom: 4px;
    display: block;
}

.ridex-book-tip {
    font-size: 12px;
    color: #94A3B8;
    margin: 4px 0 16px;
}

.ridex-book-payment {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.ridex-book-payment__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}

.ridex-book-payment__label {
    display: block;
    font-size: 11px;
    color: #94A3B8;
}

.ridex-book-payment__value {
    display: block;
    font-size: 14px;
}

.ridex-book-submit {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* ---- Choose a Ride: Mini/Sedan/SUV-style vehicle cards ---- */

.ridex-ride-type-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.ridex-ride-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    border: 2px solid rgba(16, 24, 40, 0.08);
    border-radius: 16px;
    padding: 16px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ridex-ride-type-card input {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.ridex-ride-type-card:has(input:checked) {
    border-color: var(--bs-primary);
    background: rgba(16, 185, 129, 0.06);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15);
}

.ridex-ride-type-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 4px;
}

.ridex-ride-type-card__name {
    font-weight: 600;
    font-size: 14px;
}

.ridex-ride-type-card__seats {
    font-size: 11px;
    color: #94A3B8;
}

.ridex-ride-type-card__price {
    font-weight: 700;
    font-size: 15px;
    margin-top: 4px;
}

.ridex-ride-type-card__price-was {
    font-weight: 400;
    font-size: 12px;
    color: #94A3B8;
    margin-left: 4px;
}

.ridex-ride-type-card__note {
    font-size: 10px;
    color: #F59E0B;
}

.ridex-fare-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
    padding-top: 14px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #667085;
}

.ridex-fare-summary strong {
    font-size: 20px;
    color: var(--title-color);
}

/* ---- Trip page: status hero (icon + title/badge row), customer + driver
   trip detail pages ("do everything" pass) - reuses each page's existing
   .dash-badge--{status} modifier classes for the icon circle's background/
   text color, so it always stays in sync with whatever colors those
   badges already use site-wide instead of introducing a second,
   possibly-inconsistent color mapping. ---- */

.ridex-trip-hero {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ridex-trip-hero__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 auto;
}

.ridex-trip-hero__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Trip page: "Finding you a driver" search hero (Phase 5) ---- */

.ridex-searching-card {
    text-align: center;
    padding: 48px 24px;
}

.ridex-searching-card__spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(16, 185, 129, 0.15);
    border-top-color: var(--bs-primary);
    margin: 0 auto 20px;
    animation: ridex-spin 0.9s linear infinite;
}

@keyframes ridex-spin {
    to { transform: rotate(360deg); }
}

.ridex-searching-card__title {
    font-size: 22px;
    margin-bottom: 6px;
}

.ridex-searching-card__subtitle {
    color: #667085;
    margin-bottom: 20px;
}

.ridex-searching-card__route {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    font-size: 13px;
    color: #667085;
    background: #F7F9FC;
    border-radius: 12px;
    padding: 12px 18px;
}

.ridex-searching-card__route i {
    color: var(--bs-primary);
    margin-right: 6px;
}

.ridex-trip-map {
    width: 100%;
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
}

/* ---- Driver Ride Requests: two-column layout + persistent map (Phase 5) ---- */

.ridex-driver-section {
    max-width: 1100px;
}

.ridex-wallet-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
}

.ridex-wallet-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}

.ridex-wallet-card__label {
    display: block;
    font-size: 11px;
    color: #94A3B8;
}

.ridex-wallet-card__value {
    display: block;
    font-size: 18px;
}

.ridex-wallet-card__link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-primary);
    white-space: nowrap;
}

.ridex-driver-grid {
    display: grid;
    grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 24px;
    align-items: start;
}

.ridex-driver-grid__right {
    position: sticky;
    top: 24px;
}

.ridex-driver-map,
.ridex-driver-map-placeholder {
    width: 100%;
    height: 520px;
    border-radius: 20px;
}

.ridex-driver-map {
    background: #eef2f8;
    overflow: hidden;
}

.ridex-driver-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #eef2f8;
    color: #94A3B8;
    font-size: 14px;
    text-align: center;
    padding: 0 40px;
    pointer-events: none;
}

.ridex-driver-map-placeholder i {
    font-size: 32px;
}

/* ---- Ride request cards (moved here from requests.blade.php's old inline
   <style> block, so Phase 5's redesign is the only place these are
   defined - colors updated from the original teal to the RIDEX blue) ---- */

.ride-req-online-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

.ride-req-online-toggle input[disabled] + span {
    color: #6c757d;
    cursor: not-allowed;
}

.ride-req-zone-line {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 4px;
}

.ride-req-status-line {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 16px;
}

.ride-req-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ride-req-card {
    border: 1px solid #edf0f2;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
}

.ride-req-card__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ride-req-card__fare {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-primary);
}

.ride-req-card__route {
    font-size: 14px;
    margin-bottom: 4px;
}

.ride-req-card__route span {
    color: #6c757d;
}

.ride-req-card__meta {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 14px;
}

.ride-req-card__actions {
    display: flex;
    gap: 8px;
}

.ride-req-accept-btn {
    background: #16A34A;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    flex: 1 1 auto;
}

.ride-req-accept-btn:hover {
    background: #128038;
    color: #fff;
}

.ride-req-reject-btn {
    background: #fff;
    color: #dc3545;
    border: 1px solid #f1c1c7;
    border-radius: 999px;
    padding: 10px 22px;
    font-weight: 600;
    flex: 1 1 auto;
}

.ride-req-reject-btn:hover {
    background: #fff5f6;
}

.ride-req-accept-btn:disabled,
.ride-req-reject-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ride-req-empty {
    text-align: center;
    color: #6c757d;
    font-size: 13px;
    padding: 24px 0;
}

/* ---- Trip page: chat + pay panel colors (moved from show.blade.php's old
   inline <style> blocks, recolored teal -> blue, same reason as above) ---- */

.trip-cancel-btn {
    background: #fff;
    color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 600;
}

.trip-cancel-btn:hover {
    background: #dc3545;
    color: #fff;
}

.trip-pay-btn {
    background: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 600;
}

.trip-pay-btn:hover {
    background: #07885D;
    color: #fff;
}

.trip-pay-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.trip-pay-note {
    color: #dc3545;
    font-size: 13px;
    margin: 6px 0 0;
}

.trip-pay-gateways {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trip-pay-gateway-btn {
    background: #fff;
    color: var(--title-color, #212529);
    border: 1px solid #dcdfe3;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 500;
}

.trip-pay-gateway-btn:hover {
    background: #f8f9fa;
}

.trip-chat-messages {
    max-height: 320px;
    overflow-y: auto;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trip-chat-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.trip-chat-bubble strong {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 2px;
}

.trip-chat-bubble--me {
    align-self: flex-end;
    background: rgba(16, 185, 129, 0.14);
    color: var(--title-color, #212529);
    border-bottom-right-radius: 4px;
}

.trip-chat-bubble--driver {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #edf0f2;
    color: var(--title-color, #212529);
    border-bottom-left-radius: 4px;
}

.trip-chat-bubble time {
    display: block;
    font-size: 10px;
    color: #6c757d;
    margin-top: 4px;
}

.trip-chat-form {
    display: flex;
    gap: 8px;
}

.trip-chat-form input {
    flex: 1;
}

.trip-chat-send-btn {
    background: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 600;
}

.trip-chat-send-btn:hover {
    background: #07885D;
    color: #fff;
}

.trip-chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.trip-chat-empty {
    text-align: center;
    color: #6c757d;
    font-size: 13px;
    padding: 20px 0;
    margin: 0;
}

.trip-chat-disabled-note {
    text-align: center;
    color: #6c757d;
    font-size: 13px;
    margin: 10px 0 0;
}

/* ---- Mobile fallback: stack every new split layout to a single column,
   same ~900px breakpoint used everywhere else in this reskin ---- */

@media (max-width: 900px) {
    .ridex-book-grid,
    .ridex-driver-grid {
        display: block;
    }

    .ridex-book-right,
    .ridex-driver-grid__right {
        margin-top: 20px;
        position: relative;
        top: 0;
    }

    .ridex-book-map,
    .ridex-book-map-placeholder,
    .ridex-driver-map,
    .ridex-driver-map-placeholder {
        height: 280px;
    }

    .ridex-wallet-card__link {
        display: block;
        margin-left: 0;
        margin-top: 6px;
    }
}

/* =============================================================================
   Homepage HERO - rebuilt to match rydex-homepage-responsive.html's
   <section class="hero"> exactly (2-column grid: copy+booking-card on the
   left, a large map card on the right), replacing the old stacked
   "banner then separate floating card" arrangement.
   =============================================================================
   Class names below intentionally mirror the mockup's own naming
   (.ridex-hero, .ridex-hero__copy, .ridex-hero__booking, etc.) with the
   ridex-hero prefix, layered under a "ridex-hero-section > .container" so
   it composes cleanly with the rest of this site's Bootstrap-based layout.
   The old .ridex-home-booking__* classes (Book a Ride widget, its own
   separate delivery) are RETIRED by this section - the same widget now
   lives INSIDE the hero's left column as .ridex-hero__booking, using the
   exact same element IDs (#homeBookingMap, #homePickupAddress, etc.) so
   the widget's existing JavaScript (unchanged, still in index.blade.php)
   keeps working without modification. #homeBookingMap itself now fills the
   full right-column map card instead of a small thumbnail squeezed inside
   the booking card - a real interactive Google Map in the exact spot the
   mockup shows a (fake, CSS-only) map illustration.
   ============================================================================= */
.ridex-hero-section {
    padding: 24px 0 8px;
}

.ridex-hero {
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.2fr);
    gap: 34px;
    align-items: center;
}

.ridex-hero__copy {
    padding: 12px 0;
}

.ridex-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #07885D;
    background: var(--text-secondary, #EAFAF4);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

.ridex-hero__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-primary, #10B981);
    display: inline-block;
}

.ridex-hero__title {
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin: 0 0 14px;
    color: var(--title-color, #101828);
    font-weight: 800;
    max-width: 620px;
}

.ridex-hero__subtitle {
    margin: 0 0 22px;
    color: var(--body-clr, #667085);
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
}

/* ---- Booking card (the "Book a Ride" widget, moved inside the hero) ---- */
.ridex-hero__booking {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 26px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.14);
    padding: 20px;
    margin-bottom: 20px;
}

.ridex-hero__booking-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.ridex-hero__booking-title strong {
    font-size: 15px;
    color: var(--title-color, #101828);
}

.ridex-hero__booking-title span {
    color: #07885D;
    background: var(--text-secondary, #EAFAF4);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

.ridex-hero__fields {
    position: relative;
    padding-left: 22px;
}

.ridex-hero__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ridex-hero__field-body {
    flex: 1;
}

.ridex-hero__field label {
    display: block;
    font-size: 10.5px;
    color: #8e959a;
    font-weight: 700;
    margin-bottom: 3px;
}

.ridex-hero__field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--title-color, #101828);
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    height: auto;
}

.ridex-hero__field {
    background: #F5F7F8;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 11px 13px;
    margin-left: -22px;
    padding-left: 35px;
}

.ridex-hero__field:focus-within {
    background: #fff;
    border-color: #bde9da;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

.ridex-hero__dot {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 3;
}

.ridex-hero__dot--pickup {
    background: var(--text-primary, #10B981);
}

.ridex-hero__dot--drop {
    border-radius: 3px;
    background: var(--title-color, #101828);
}

.ridex-hero__connector {
    position: absolute;
    left: 17px;
    top: 34px;
    width: 2px;
    height: 26px;
    background: repeating-linear-gradient(to bottom, #D0D5DD 0, #D0D5DD 4px, transparent 4px, transparent 8px);
    z-index: 2;
}

.ridex-hero__fare-btn {
    width: 100%;
    margin-top: 6px;
    border: 0;
    border-radius: 15px;
    padding: 14px 18px;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    background: linear-gradient(135deg, var(--text-primary, #10B981), #099466);
    box-shadow: 0 13px 28px rgba(16, 185, 129, 0.24);
}

.ridex-hero__fare-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ridex-hero__hint {
    font-size: 12px;
    color: var(--body-clr, #667085);
    margin: 10px 0 0;
    text-align: center;
}

/* ---- "Ride now / Schedule" pills - visual only, matching the mockup.
   "Ride now" reflects what this booking form actually does (submits an
   immediate ride request). "Schedule" has no booking flow behind it yet,
   so it's marked with a "coming soon" tooltip rather than acting like a
   working button that does nothing when clicked. ---- */
.ridex-hero__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 13px 0;
}

.ridex-hero__option-btn {
    border: 1px solid rgba(16, 24, 40, 0.08);
    background: #fff;
    border-radius: 12px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #474e53;
}

.ridex-hero__option-btn--active {
    border-color: transparent;
    background: var(--text-secondary, #EAFAF4);
    color: #07885D;
}

.ridex-hero__option-btn--soon {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Trust pills ---- */
.ridex-hero__trust {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ridex-hero__trust-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    padding: 8px 12px;
    color: #5c6469;
    font-size: 11.5px;
    font-weight: 700;
}

.ridex-hero__trust-pill::before {
    content: "✓";
    color: var(--text-primary, #10B981);
    font-weight: 800;
}

.ridex-hero__app-btns {
    margin-top: 4px;
}

/* ---- Map card (right column) ---- */
.ridex-hero__map-card {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.14);
    background: #dfe9e2;
}

.ridex-hero__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ridex-hero__map-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- "Drivers nearby" live-card overlay, matching the mockup's
   .live-card. Deliberately does NOT show a fabricated ETA number (the
   mockup's "3 min" isn't backed by real data anywhere in this app) -
   the copy instead points at the real, working next step (entering a
   destination shows real pricing/estimates on the booking page). ---- */
.ridex-hero__live-card {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 420px;
    z-index: 4;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 42px rgba(20, 28, 35, 0.14);
    border-radius: 18px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.ridex-hero__live-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--text-secondary, #EAFAF4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #07885D;
    flex: none;
}

.ridex-hero__live-main strong {
    font-size: 12px;
    display: block;
    color: var(--title-color, #101828);
}

.ridex-hero__live-main span {
    font-size: 10.5px;
    color: var(--body-clr, #667085);
    display: block;
    margin-top: 3px;
}

@media (max-width: 600px) {
    .ridex-hero__live-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 11px 12px;
    }
}

@media (max-width: 1050px) {
    .ridex-hero {
        grid-template-columns: 1fr;
    }

    .ridex-hero__booking {
        max-width: none;
    }

    .ridex-hero__map-card {
        min-height: 420px;
    }
}

@media (max-width: 600px) {
    .ridex-hero__title {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .ridex-hero__eyebrow {
        display: none;
    }

    .ridex-hero__booking {
        padding: 15px;
        border-radius: 19px;
    }

    .ridex-hero__map-card {
        min-height: 260px;
        border-radius: 20px;
    }

    .ridex-hero__trust {
        display: none;
    }
}

/* =============================================================================
   "Built for everyday journeys" benefits section - new, matches the
   mockup's <section class="section"> below the hero. Static marketing
   copy describing real, already-shipped platform capabilities (fare
   estimates, live tracking, flexible payment methods) - not fabricated
   figures, so safe to add without any backend data source.
   ============================================================================= */
.ridex-benefits-section {
    padding: 48px 0;
}

.ridex-benefits-section__head {
    margin-bottom: 24px;
}

.ridex-benefits-section__head h2 {
    font-size: 28px;
    letter-spacing: -0.6px;
    color: var(--title-color, #101828);
    margin: 0 0 6px;
    font-weight: 800;
}

.ridex-benefits-section__head p {
    color: var(--body-clr, #667085);
    font-size: 13.5px;
    margin: 0;
}

.ridex-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ridex-benefit {
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 20px;
    padding: 22px;
}

.ridex-benefit__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--text-secondary, #EAFAF4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 15px;
}

.ridex-benefit strong {
    font-size: 15px;
    color: var(--title-color, #101828);
    display: block;
}

.ridex-benefit p {
    font-size: 12.5px;
    color: var(--body-clr, #667085);
    line-height: 1.65;
    margin: 8px 0 0;
}

@media (max-width: 900px) {
    .ridex-benefits {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Rydex auth pages redesign (Phase 6b)
   =============================================================================
   Purpose: wrap the EXISTING login/register forms (customer + driver) in a
   split "form + visual panel" shell matching the Rydex mockup's auth
   screens, add a phone/email login tab toggle, and give inputs a
   left-icon treatment. Field set, validation, and routes are UNCHANGED -
   this only changes how the existing .auth-card form is presented, plus
   one small additive backend change (email as an alternate login lookup,
   see the delivered AuthController.php files) so the new email tab isn't
   just decorative.
   ============================================================================= */

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.auth-shell .auth-card {
    box-shadow: none;
    border-radius: 0;
    padding: 32px 24px;
}

@media (min-width: 576px) {
    .auth-shell .auth-card {
        padding: 48px 44px;
    }
}

/* Rebuilt 2026-08-20 to match rydex-user-login-responsive.html's
   .visual-side exactly: a light "map" background (roads/parks/route/pins,
   same illustrative technique as the homepage hero's map card) with a
   floating glass card at the bottom holding the badge/heading/paragraph/
   benefit pills - replacing the previous solid green gradient panel,
   which looked quite different from the mockup's light, mapped aesthetic. */
.auth-shell__visual {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(30deg, transparent 46%, rgba(255, 255, 255, .78) 47%, rgba(255, 255, 255, .78) 51%, transparent 52%) 0 0/190px 175px,
        linear-gradient(-22deg, transparent 44%, rgba(255, 255, 255, .74) 45%, rgba(255, 255, 255, .74) 49%, transparent 50%) 0 0/230px 195px,
        linear-gradient(90deg, rgba(119, 175, 138, .2) 1px, transparent 1px) 0 0/82px 82px,
        linear-gradient(rgba(119, 175, 138, .18) 1px, transparent 1px) 0 0/82px 82px,
        #dce8e1;
}

.auth-shell__visual::before,
.auth-shell__visual::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #bad5c0;
    opacity: .8;
}

.auth-shell__visual::before {
    width: 220px;
    height: 160px;
    right: 8%;
    top: 10%;
}

.auth-shell__visual::after {
    width: 180px;
    height: 220px;
    left: 4%;
    bottom: 5%;
}

.auth-shell__visual-road {
    position: absolute;
    background: #fff;
    border: 1px solid #d5ddd8;
}

.auth-shell__visual-road--r1 {
    width: 125%;
    height: 24px;
    left: -10%;
    top: 50%;
    transform: rotate(-7deg);
}

.auth-shell__visual-road--r2 {
    width: 24px;
    height: 125%;
    left: 63%;
    top: -10%;
    transform: rotate(11deg);
}

.auth-shell__visual-route {
    position: absolute;
    left: 26%;
    top: 22%;
    width: 43%;
    height: 52%;
    border-left: 5px solid var(--text-primary, #10B981);
    border-bottom: 5px solid var(--text-primary, #10B981);
    border-radius: 0 0 0 80px;
    transform: rotate(-8deg);
}

.auth-shell__visual-pin {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    background: var(--title-color, #171c1e);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.auth-shell__visual-pin::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    left: 10px;
    top: 10px;
}

.auth-shell__visual-pin--start {
    left: 23%;
    top: 18%;
    background: var(--text-primary, #10B981);
}

.auth-shell__visual-pin--end {
    left: 67%;
    top: 72%;
}

.auth-shell__visual-content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 26px;
    z-index: 3;
}

.auth-shell__visual-card {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.14);
}

.auth-shell__visual-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    color: #07885D;
    background: var(--text-secondary, #EAFAF4);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.auth-shell__visual h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -.5px;
    color: var(--title-color, #101828);
    font-weight: 800;
}

.auth-shell__visual p {
    margin: 0;
    font-size: 12.5px;
    color: var(--body-clr, #667085);
    line-height: 1.65;
}

.auth-shell__visual-points {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-shell__visual-points li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    font-size: 10.5px;
    font-weight: 700;
    color: #5d656a;
}

.auth-shell__visual-points li i {
    color: var(--text-primary, #10B981);
    font-size: 11px;
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .auth-shell__visual {
        display: none;
    }
}

/* ---- Eyebrow badge above the auth card's H1 ---- */
.auth-card__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    color: #07885D;
    background: var(--text-secondary, #EAFAF4);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* ---- "or continue with" divider + social buttons ---- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: #9aa0a4;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(16, 24, 40, 0.08);
}

.auth-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}

.auth-social-btn {
    border: 1px solid rgba(16, 24, 40, 0.08);
    background: #fff;
    border-radius: 13px;
    padding: 11px;
    font-size: 12.5px;
    font-weight: 700;
    color: #41484d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-social-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Terms microcopy under the form ---- */
.auth-card__terms {
    font-size: 10.5px;
    color: #9aa0a4;
    line-height: 1.6;
    text-align: center;
    margin: 18px auto 0;
}

.auth-card__terms a {
    color: #6b7278;
    text-decoration: underline;
}

/* Phone / Email login tab toggle */
.auth-tabs {
    display: inline-flex;
    background: var(--text-secondary, #EAFAF4);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 22px;
    gap: 4px;
}

.auth-tabs button {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--title-color, #101828);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.auth-tabs button.active {
    background: var(--text-primary, #10B981);
    color: #fff;
}

/* Icon-prefixed inputs - reuses the Line Awesome icon font already loaded
   site-wide (same font the password-toggle eye icon already uses) */
.auth-input-icon {
    position: relative;
}

.auth-input-icon .form-control {
    padding-left: 42px;
}

.auth-input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 16px;
    pointer-events: none;
}

.auth-input-icon .auth-password-toggle {
    right: 12px;
}

/* =============================================================================
   Rydex account pages redesign (Phase 6c) - My Trips (card list, replacing
   the old plain table) and Profile (sectioned cards + avatar), matching the
   Rydex mockup. Underlying data/routes/logic are UNCHANGED - "Book again"
   reuses the existing pickup/destination query-string prefill the homepage
   widget already added to the booking page; "Receipt" opens the trip's own
   detail page (which already shows the full fare breakdown); "Support"
   links to the existing Contact Us page. No new tables, no new columns.
   ============================================================================= */

.trip-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.trip-filter-tabs a {
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--soft, #f5f7f8);
    color: var(--title-color, #101828);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
}

.trip-filter-tabs a.active {
    background: var(--text-primary, #10B981);
    color: #fff;
}

.trip-card-list {
    display: grid;
    gap: 16px;
}

.trip-card {
    background: #fff;
    border: 1px solid var(--line, #edf0f2);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
}

.trip-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.trip-card__ref {
    font-size: 12px;
    color: #98a2b3;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.trip-card__route {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 14px;
    position: relative;
    padding-left: 20px;
}

.trip-card__route::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #cbd5e1 0 4px, transparent 4px 8px);
}

.trip-card__route-point {
    position: relative;
    font-size: 13px;
    color: var(--title-color, #101828);
}

.trip-card__route-point::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-primary, #10B981);
}

.trip-card__route-point--drop::before {
    background: #F04438;
}

.trip-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--line, #edf0f2);
    border-bottom: 1px solid var(--line, #edf0f2);
    margin-bottom: 14px;
}

.trip-card__meta div span {
    display: block;
    font-size: 11px;
    color: #98a2b3;
    margin-bottom: 2px;
}

.trip-card__meta div strong {
    font-size: 13px;
    color: var(--title-color, #101828);
}

.trip-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trip-card__actions a,
.trip-card__actions button {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--line, #e3e6ea);
    background: #fff;
    color: var(--title-color, #101828);
    cursor: pointer;
}

.trip-card__actions a.primary,
.trip-card__actions button.primary {
    background: var(--text-primary, #10B981);
    border-color: var(--text-primary, #10B981);
    color: #fff;
}

.trip-card__actions a.danger,
.trip-card__actions button.danger {
    color: #dc3545;
    border-color: #f1c1c7;
    background: none;
}

@media (max-width: 470px) {
    .trip-card__meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Profile page */
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(160deg, #10B981 0%, #07885D 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--title-color, #101828);
}

.profile-header p {
    margin: 0;
    font-size: 13px;
    color: #6c757d;
}

/* =============================================================================
   Rydex customer Profile page rebuild (2026-08-20)
   =============================================================================
   Replaces the old single-column profile page (the `.profile-header`/
   `.profile-avatar` rules just above are now unused dead code, left in
   place rather than risk deleting something else might reference) with a
   sidebar + side-menu + multi-section layout matching
   rydexprofileresponsive.html. Reuses `.dash-section--card` for every
   card, `.auth-input-icon`/`.auth-password-field`/`.cmn--btn`/
   `.cmn--btn2` for every form field and button - only the
   profile-specific chrome (sidebar card, side menu, info rows,
   preference toggles, payment list) is new here.
   ============================================================================= */
.rdx-profile-head {
    margin-bottom: 20px;
}
.rdx-profile-head__eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--text-primary, #07885D);
    background: var(--text-secondary, #eafaf4);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .4px;
}
.rdx-profile-head h1 {
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 12px 0 5px;
    color: var(--ink, #161a1d);
}
.rdx-profile-head p {
    margin: 0;
    color: var(--muted, #737a80);
    font-size: 14px;
    max-width: 640px;
}

.rdx-profile-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.rdx-profile-side {
    display: grid;
    gap: 18px;
}

.rdx-profile-card {
    padding: 24px;
    text-align: center;
}
.rdx-profile-avatar-wrap {
    position: relative;
    width: 96px;
    margin: 0 auto 14px;
}
.rdx-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 26px;
    background: linear-gradient(145deg, #d8e9e2, #eef6f2);
    color: var(--text-primary, #07885D);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 800;
    overflow: hidden;
}
.rdx-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rdx-profile-avatar-edit {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    border: 3px solid #fff;
    background: var(--text-primary, #10B981);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    margin: 0;
}
.rdx-profile-card h2 {
    font-size: 18px;
    margin: 0;
    color: var(--title-color, #101828);
}
.rdx-profile-card > p {
    font-size: 11px;
    color: var(--muted, #737a80);
    margin: 6px 0 12px;
}
.rdx-profile-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--text-secondary, #eafaf4);
    color: var(--text-primary, #07885D);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.rdx-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
}
.rdx-profile-stat {
    background: var(--soft, #f5f7f8);
    border-radius: 13px;
    padding: 11px 7px;
}
.rdx-profile-stat strong {
    display: block;
    font-size: 15px;
    color: var(--ink, #161a1d);
}
.rdx-profile-stat span {
    display: block;
    font-size: 9px;
    color: var(--muted, #737a80);
    margin-top: 3px;
}

.rdx-profile-menu {
    padding: 10px;
    display: grid;
    gap: 3px;
}
.rdx-profile-menu__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 13px;
    text-decoration: none;
    color: #555d62;
    font-size: 12px;
    font-weight: 700;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
}
.rdx-profile-menu__item i {
    width: 20px;
    text-align: center;
    font-size: 15px;
}
.rdx-profile-menu__item.active,
.rdx-profile-menu__item:hover {
    background: var(--text-secondary, #eafaf4);
    color: var(--text-primary, #07885D);
}
.rdx-profile-menu__item--danger {
    color: #dc3545;
}
.rdx-profile-menu__item--danger:hover {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

.rdx-profile-content {
    display: grid;
    gap: 18px;
}
.rdx-profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.rdx-profile-section-head h3 {
    font-size: 15px;
    margin: 0 0 4px;
    color: var(--title-color, #101828);
}
.rdx-profile-section-head p {
    font-size: 10.5px;
    color: var(--muted, #737a80);
    margin: 0;
}
.rdx-profile-radio-row {
    display: flex;
    gap: 14px;
    padding-top: 6px;
}
.rdx-profile-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.rdx-profile-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eff1f2;
}
.rdx-profile-info-row:last-child {
    border-bottom: 0;
}
.rdx-profile-info-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--soft, #f5f7f8);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.rdx-profile-info-row__main {
    flex: 1;
    min-width: 0;
}
.rdx-profile-info-row__main strong {
    display: block;
    font-size: 12px;
    color: var(--ink, #161a1d);
}
.rdx-profile-info-row__main span {
    display: block;
    font-size: 10.5px;
    color: var(--muted, #737a80);
    margin-top: 3px;
}
.rdx-profile-emergency-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eff1f2;
}

.rdx-profile-preferences {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.rdx-profile-preference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line, #e8eaed);
    border-radius: 14px;
    padding: 13px;
    cursor: pointer;
    margin: 0;
}
.rdx-profile-preference__left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rdx-profile-preference__icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--soft, #f5f7f8);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.rdx-profile-preference strong {
    font-size: 11px;
    display: block;
    color: var(--ink, #161a1d);
}
.rdx-profile-preference span {
    font-size: 9px;
    color: var(--muted, #737a80);
    display: block;
    margin-top: 3px;
}
.rdx-profile-preferences__note,
.rdx-profile-payments__note {
    font-size: 10.5px;
    color: var(--muted, #737a80);
    line-height: 1.6;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #eff1f2;
}

.rdx-switch {
    width: 40px;
    height: 23px;
    border-radius: 999px;
    background: #dfe3e5;
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
}
.rdx-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.rdx-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    transition: .2s;
    pointer-events: none;
}
.rdx-switch__track::after {
    content: "";
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 3px;
    left: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: .2s;
}
.rdx-switch input:checked ~ .rdx-switch__track {
    background: var(--text-primary, #10B981);
}
.rdx-switch input:checked ~ .rdx-switch__track::after {
    left: 20px;
}

.rdx-profile-payment-list {
    display: grid;
    gap: 10px;
}
.rdx-profile-payment {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line, #e8eaed);
    border-radius: 14px;
    padding: 13px;
}
.rdx-profile-payment__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--soft, #f5f7f8);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.rdx-profile-payment__main {
    flex: 1;
    min-width: 0;
}
.rdx-profile-payment__main strong {
    font-size: 12px;
    display: block;
    color: var(--ink, #161a1d);
}
.rdx-profile-payment__main span {
    font-size: 10px;
    color: var(--muted, #737a80);
    margin-top: 4px;
    display: block;
}
.rdx-profile-password-form {
    margin-top: 4px;
}

.row-action {
    border: 1px solid var(--line, #e8eaed);
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 750;
    color: #50575d;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.row-action:hover {
    border-color: var(--text-primary, #10B981);
    color: var(--text-primary, #07885D);
}
.row-action[disabled] {
    opacity: .55;
    cursor: not-allowed;
}
.row-action[disabled]:hover {
    border-color: var(--line, #e8eaed);
    color: #50575d;
}

@media (max-width: 1000px) {
    .rdx-profile-layout {
        grid-template-columns: 1fr;
    }
    .rdx-profile-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 760px) {
    .rdx-profile-side {
        grid-template-columns: 1fr;
    }
    .rdx-profile-preferences {
        grid-template-columns: 1fr;
    }
    .rdx-profile-radio-row {
        flex-wrap: wrap;
    }
    .rdx-profile-info-row {
        flex-wrap: wrap;
    }
    .rdx-profile-info-row .row-action {
        margin-left: 52px;
    }
}

.dash-section--card {
    background: #fff;
    border: 1px solid var(--line, #edf0f2);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 20px;
}

/* =============================================================================
   Rydex driver pages redesign (Phase 6d-visual) - Documents, Earnings,
   Withdraw, and Profile. Underlying fields/routes/logic are UNCHANGED;
   this only adds icon accents to the existing .dash-stat-card / .dash-doc-*
   / .auth-status classes already in auth.css, plus a dashed upload-zone
   treatment around the existing file inputs. No new stat numbers are
   introduced here - the same 4 figures (Available to Withdraw, Wallet
   Balance, Total Withdrawn, Referral Earnings) that were already being
   safely calculated stay exactly as they were, just restyled.
   ============================================================================= */

.dash-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-stat-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--text-secondary, #EAFAF4);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.dash-stat-card--highlight .dash-stat-card__icon {
    background: var(--text-primary, #10B981);
    color: #fff;
}

.upload-zone {
    border: 1.5px dashed var(--line, #dcdfe3);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    background: var(--soft, #f8fafb);
    margin-bottom: 6px;
}

.upload-zone i {
    font-size: 26px;
    color: var(--text-primary, #10B981);
    margin-bottom: 6px;
    display: block;
}

.upload-zone .form-control {
    max-width: 360px;
    margin: 10px auto 0;
}

.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.verify-banner i {
    font-size: 22px;
}

/* =============================================================================
   Rydex customer Dashboard + Saved Places (Phase 7)
   =============================================================================
   Scoped to the customer account pages only (.rdx-* classes are unique to
   the dashboard/places views, same isolation approach as every earlier
   phase's .dash-*/.trip-*/.auth-* additions). Reuses .dash-stat-card
   (Phase 6d), .dash-section--card and .dash-badge--{status} (Phase 6c)
   rather than duplicating them.
   ============================================================================= */

.rdx-dash-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.rdx-dash-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary, #07885D);
    background: var(--text-secondary, #eafaf4);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .4px;
}
.rdx-dash-hero h1 {
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 12px 0 5px;
    color: var(--ink, #161a1d);
}
.rdx-dash-hero p {
    margin: 0;
    color: var(--muted, #737a80);
    font-size: 14px;
}
.rdx-dash-hero__actions {
    display: flex;
    gap: 10px;
}

/* Reverted 2026-08-20 back to the original 2-column layout (left:
   booking/stats/trips, right: wallet/places/promo/help side by side) -
   the previous single-column change was a misread of what the user
   actually wanted and was explicitly asked to be reversed. Back to the
   state this was in before that edit. */
.rdx-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .6fr);
    gap: 20px;
    align-items: start;
}
.rdx-dash-left, .rdx-dash-right {
    display: grid;
    gap: 18px;
}
.rdx-card-link {
    font-size: 11.5px;
    color: var(--text-primary, #07885D);
    text-decoration: none;
    font-weight: 750;
    white-space: nowrap;
}

/* Quick-book mini card */
.rdx-book-mini {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr .8fr;
    padding: 0;
    min-height: 210px;
}
.rdx-book-mini__copy {
    padding: 24px;
}
.rdx-book-mini__copy h2 {
    font-size: 22px;
    letter-spacing: -.5px;
    margin: 0 0 6px;
    color: var(--ink, #161a1d);
}
.rdx-book-mini__copy p {
    font-size: 12.5px;
    color: var(--muted, #737a80);
    line-height: 1.6;
    margin: 0 0 16px;
}
.rdx-book-mini__fields {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}
.rdx-book-mini__field {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 9px;
    align-items: center;
    background: var(--soft, #f5f7f8);
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 11px 12px;
}
.rdx-book-mini__field:focus-within {
    background: #fff;
    border-color: #bdebdc;
}
.rdx-book-mini__static {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ink, #161a1d);
}
.rdx-book-mini__field input {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ink, #161a1d);
}
.rdx-book-mini__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-primary, #10B981);
    justify-self: center;
}
.rdx-book-mini__dot--end {
    border-radius: 2px;
    background: #222;
}
.rdx-book-mini__cta {
    display: inline-block;
    width: 100%;
    text-align: center;
    border: 0;
    border-radius: 13px;
    padding: 12px;
    background: var(--text-primary, #10B981);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.rdx-book-mini__map {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(28deg, transparent 45%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.78) 50%, transparent 51%) 0 0/140px 120px,
        linear-gradient(-18deg, transparent 46%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.75) 51%, transparent 52%) 0 0/170px 150px,
        #dfe9e2;
}
.rdx-book-mini__map-route {
    position: absolute;
    left: 31%;
    top: 23%;
    width: 40%;
    height: 52%;
    border-left: 5px solid var(--text-primary, #10B981);
    border-bottom: 5px solid var(--text-primary, #10B981);
    border-radius: 0 0 0 70px;
    transform: rotate(-7deg);
}
.rdx-book-mini__pin {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #161a1d;
    border: 4px solid white;
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.rdx-book-mini__pin--start {
    left: 28%;
    top: 19%;
    background: var(--text-primary, #10B981);
}
.rdx-book-mini__pin--end {
    left: 67%;
    top: 72%;
}

/* Upcoming ride card */
.rdx-upcoming__banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #c7efdf;
    background: var(--text-secondary, #eefaf6);
    border-radius: 14px;
    padding: 11px 13px;
    margin-bottom: 16px;
    font-size: 12px;
}
.rdx-upcoming__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.rdx-upcoming__route {
    position: relative;
    padding-left: 26px;
}
.rdx-upcoming__route:before {
    content: "";
    position: absolute;
    left: 7px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background: linear-gradient(var(--text-primary, #10B981), #222);
}
.rdx-upcoming__stop {
    position: relative;
    margin-bottom: 18px;
}
.rdx-upcoming__stop:last-child {
    margin-bottom: 0;
}
.rdx-upcoming__stop:before {
    content: "";
    position: absolute;
    left: -26px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-primary, #10B981);
}
.rdx-upcoming__stop--end:before {
    border-radius: 2px;
    background: #222;
}
.rdx-upcoming__stop small {
    font-size: 10px;
    color: #90969b;
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}
.rdx-upcoming__stop strong {
    font-size: 12.5px;
    display: block;
    margin-top: 4px;
    font-weight: 650;
}
.rdx-upcoming__driver {
    background: var(--soft, #f5f7f8);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rdx-upcoming__driver--waiting {
    color: var(--muted, #737a80);
    font-size: 12px;
    font-weight: 650;
}
.rdx-upcoming__driver--waiting i {
    color: var(--text-primary, #10B981);
}
.rdx-upcoming__driver-pic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--text-secondary, #dce8e2);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.rdx-upcoming__driver-info {
    flex: 1;
    min-width: 0;
}
.rdx-upcoming__driver-info strong {
    font-size: 12px;
    display: block;
}
.rdx-upcoming__driver-info div {
    font-size: 10.5px;
    color: var(--muted, #737a80);
    margin-top: 2px;
}
.rdx-circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--line, #e5e7eb);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink, #161a1d);
    flex-shrink: 0;
}
.rdx-upcoming__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.rdx-upcoming__actions form {
    flex: 1;
}
.rdx-upcoming__actions button {
    width: 100%;
    border: 1px solid var(--line, #e5e7eb);
    background: #fff;
    border-radius: 10px;
    padding: 9px;
    font-size: 11px;
    font-weight: 750;
}
.rdx-upcoming__track {
    flex: 1;
    text-align: center;
    border: 1px solid var(--text-primary, #10B981);
    background: var(--text-primary, #10B981);
    color: #fff;
    border-radius: 10px;
    padding: 9px;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

/* Recent trips list */
.rdx-recent-list {
    display: grid;
}
.rdx-recent-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eff1f2;
    text-decoration: none;
    color: inherit;
}
.rdx-recent-item:last-child {
    border-bottom: 0;
}
.rdx-recent-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--soft, #f5f7f8);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.rdx-recent-item__main {
    min-width: 0;
}
.rdx-recent-item__main strong {
    font-size: 12px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rdx-recent-item__main div {
    font-size: 10.5px;
    color: var(--muted, #737a80);
    margin-top: 3px;
}
.rdx-recent-item__price {
    text-align: right;
}
.rdx-recent-item__price strong {
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
}

/* Wallet card */
.rdx-wallet-card {
    padding: 20px;
    color: #fff;
    overflow: hidden;
    position: relative;
    background: linear-gradient(145deg, #17201c, #26312d);
}
.rdx-wallet-card:after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(16, 185, 129, .16);
    right: -45px;
    top: -40px;
}
.rdx-wallet-card small {
    opacity: .65;
    font-size: 11px;
}
.rdx-wallet-card strong {
    display: block;
    font-size: 27px;
    margin: 7px 0 16px;
    position: relative;
    z-index: 2;
}
.rdx-wallet-card__actions {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 2;
}
.rdx-wallet-card__btn {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    opacity: .6;
    cursor: not-allowed;
}
.rdx-wallet-card__btn--link {
    opacity: 1;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.rdx-wallet-card__btn--link:hover {
    background: rgba(255,255,255,.16);
}

/* Saved places list (dashboard mini list + full manage list) */
.rdx-places-list, .rdx-places-manage-list {
    display: grid;
}
.rdx-place {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid #eff1f2;
    text-decoration: none;
    color: inherit;
}
.rdx-place:last-child {
    border-bottom: 0;
}
.rdx-place__icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--soft, #f5f7f8);
    color: var(--text-primary, #10B981);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.rdx-place strong {
    font-size: 12px;
    display: block;
}
.rdx-place span {
    font-size: 10.5px;
    color: var(--muted, #737a80);
    display: block;
    margin-top: 3px;
}
.rdx-place__arrow {
    margin-left: auto;
    color: #8a9197;
}
.rdx-place--manage {
    padding: 14px 4px;
}
.rdx-place__manage-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.rdx-place__edit-btn, .rdx-place__delete-btn {
    border: 1px solid var(--line, #e5e7eb);
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink, #161a1d);
}
.rdx-place__delete-btn {
    color: #c0392b;
    border-color: #f1c6c0;
}

/* Promo card */
.rdx-promo-card {
    padding: 18px;
    background: linear-gradient(135deg, #fff8e8, #fffdf7);
    border-color: #f6e7bd;
}
.rdx-promo-card__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.rdx-promo-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff2c8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.rdx-promo-card strong {
    font-size: 12.5px;
}
.rdx-promo-card p {
    font-size: 10.5px;
    color: var(--muted, #737a80);
    line-height: 1.5;
    margin: 5px 0 0;
}
.rdx-promo-card__code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed #e5c56d;
    background: #fff;
    border-radius: 11px;
    padding: 9px 10px;
    font-size: 10px;
    font-weight: 800;
    margin-top: 12px;
    cursor: pointer;
}

@media (max-width: 1000px) {
    .rdx-dash-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .rdx-dash-hero {
        align-items: flex-start;
    }
    .rdx-dash-hero h1 {
        font-size: 24px;
    }
    /* Was `display:none` on mobile (matching the mockup, which relies on
       its own bottom tab bar instead) - re-enabled 2026-08-20 per explicit
       user request that "My trips"/"Book a ride" stay above the wallet
       card on every screen size, not just desktop. Stacked full-width
       under the greeting instead of sitting to its right, since there's
       no room for them side-by-side at this width. */
    .rdx-dash-hero__actions {
        width: 100%;
    }
    .rdx-dash-hero__actions .cmn--btn,
    .rdx-dash-hero__actions .cmn--btn2 {
        flex: 1 1 0;
        text-align: center;
    }
    .rdx-book-mini {
        grid-template-columns: 1fr;
    }
    .rdx-book-mini__map {
        height: 140px;
        order: -1;
    }
    .rdx-upcoming__grid {
        grid-template-columns: 1fr;
    }
    .rdx-place--manage {
        flex-wrap: wrap;
    }
    .rdx-place__manage-actions {
        margin-left: 47px;
        margin-top: 8px;
    }
}

/* -----------------------------------------------------------------------
   Mobile bottom tab bar (customer account section only) - new feature
   added to match the Rydex dashboard mockup's mobile navigation. Rendered
   by `_nav.blade.php` on every customer account page (dashboard, trips,
   wallet, saved places, profile, security), so it's consistent across the
   whole section rather than dashboard-only. Hidden above 760px - the
   existing top `.dash-nav` tab strip stays the primary navigation there.
   The public marketing site's own mobile nav is a separate, still-open
   question (see project notes) and is intentionally NOT touched here.
   ----------------------------------------------------------------------- */
.rdx-bottom-nav {
    display: none;
}
@media (max-width: 760px) {
    .rdx-bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 50;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(16px);
        border: 1px solid var(--line, #e8eaed);
        border-radius: 19px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, .10);
        padding: 7px;
    }
    .rdx-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        border: 0;
        background: transparent;
        border-radius: 13px;
        padding: 8px 5px;
        font-size: 9px;
        color: #747b80;
        font-weight: 700;
        text-decoration: none;
    }
    .rdx-bottom-nav a i {
        font-size: 17px;
    }
    .rdx-bottom-nav a.active {
        background: var(--text-secondary, #eafaf4);
        color: var(--text-primary, #07885D);
    }
    /* Reserve room so the fixed bar never covers the last card on any
       account page (dashboard's "Need help?" card, trips list, etc.) */
    body:has(.rdx-bottom-nav) .dash-wrap {
        padding-bottom: 90px;
    }
}

/* -----------------------------------------------------------------------
   Wider desktop layout - customer account section + login/register
   (2026-08-20, explicit user request: "make the user dashboard, user
   page, login user page wide on web").

   Both areas were being squeezed by TWO layers of width limit stacked on
   top of each other: Bootstrap's own `.container` caps out around
   1140-1320px even on very large monitors, and on the login/register
   pages the card additionally sat inside a `col-lg-10`/`col-xl-9`-style
   Bootstrap column, which shrank it to another ~75-83% of that already-
   capped container - so on a wide desktop screen the actual login card
   was rendering at well under 1000px, and the dashboard under ~1300px.
   This raises both ceilings. The dashboard's own two-column grid
   (`.rdx-dash-grid`, fr-based) and the login/register split panel
   (`.auth-shell`, also fr-based) both already stretch to fill whatever
   width their wrapper gives them, so widening the wrapper is enough -
   no other markup changes needed. Doesn't affect anything below the
   Bootstrap breakpoint where these containers already sit at 100% width
   (i.e. tablet/mobile are unaffected - `.auth-shell`/`.dash-wrap` still
   collapse to one column per their own existing responsive rules).

   ROUND 2 (same day): user reported login was wide but the customer
   account/dashboard pages and driver account pages were NOT. Two
   separate causes, both fixed below:
   1. `.dash-wrap:has(.dash-nav--sidebar)` (driver pages) sets its OWN
      max-width - 1100px, more specific than the `.container` rule below
      - so widening the container alone never reached it. Fixed at its
      own declaration further up this file (search "was 1100px").
   2. Belt-and-suspenders: added `!important` and a rule directly on
      `.dash-wrap` itself (not just its ancestor `.container`), in case
      some other stylesheet in the load order (bootstrap/main.css, not
      fully available to inspect in this environment) was winning on
      specificity/order in a way that wasn't reproducible from the cached
      files here. This can't make things narrower than intended - it only
      forces the width that was always the goal. See the driver
      `account.blade.php` fix in this same delivery for the other half
      of the driver-account-page fix (that page had a structural issue,
      not just a CSS one - it never got pulled into the sidebar grid).
   ----------------------------------------------------------------------- */
/* ROUND 3 (2026-08-20): user asked for 1300px specifically, on all the
   pages touched by this widening work - was 1600px (dashboard/account)
   and 1500px (login/register). Settled on one consistent number,
   1300px, everywhere below rather than two slightly different ones. */
.container:has(> .dash-wrap) {
    max-width: 1300px !important;
}

.container:has(.auth-shell) {
    max-width: 1300px !important;
}

.row > [class*="col-"]:has(> .auth-shell) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.dash-wrap {
    max-width: 1300px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Widening the shell gives the visual side panel more room, but the form
   itself (inputs, buttons) would otherwise stretch to match - an 800px+
   wide text input looks broken, not "wide". Cap the form column's actual
   content at a normal reading width and center it in the now-larger
   column, so the PAGE feels wide while the form stays comfortable. */
@media (min-width: 992px) {
    .auth-shell .auth-card {
        max-width: 460px;
        width: 100%;
        margin: 0 auto;
    }
}

/* =============================================================================
   Rydex Wallet page (Phase 8)
   ============================================================================= */
.rdx-wallet-page-card {
    color: #fff;
    background: linear-gradient(145deg, #17201c, #26312d);
    padding: 22px;
}
.rdx-wallet-page-card small {
    opacity: .65;
    font-size: 12px;
}
.rdx-wallet-page-card strong {
    display: block;
    font-size: 32px;
    margin: 8px 0 4px;
}
.rdx-wallet-page-card__label {
    font-size: 11px;
    opacity: .6;
}
.rdx-wallet-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.rdx-wallet-gateway {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}
.rdx-wallet-gateway:has(input:checked) {
    border-color: var(--text-primary, #10B981);
    background: var(--text-secondary, #eafaf4);
}
.rdx-wallet-gateway input {
    accent-color: var(--text-primary, #10B981);
}

/* ============================================================
   Rydex Security / Logged-in Devices (Phase 9)
   ============================================================ */
.rdx-device-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rdx-device-item {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    padding: 14px 16px;
}
.rdx-device-item--current {
    border-color: var(--text-primary, #10B981);
    background: var(--text-secondary, #eafaf4);
}
.rdx-device-item__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-secondary, #eafaf4);
    color: var(--text-primary, #10B981);
    font-size: 18px;
}
.rdx-device-item--current .rdx-device-item__icon {
    background: #fff;
}
.rdx-device-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.rdx-device-item__label {
    font-weight: 650;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rdx-device-item__meta {
    font-size: 12px;
    color: var(--text-light, #667085);
    margin-top: 2px;
}
.rdx-device-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--text-primary, #10B981);
    color: #fff;
}
.rdx-device-item__action {
    flex: none;
}
.rdx-device-item__current-note {
    font-size: 12px;
    color: var(--text-light, #667085);
    font-style: italic;
}
.rdx-device-item__logout {
    border: 1px solid #fca5a5;
    background: #fff;
    color: #dc2626;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}
.rdx-device-item__logout:hover {
    background: #fef2f2;
}
@media (max-width: 560px) {
    .rdx-device-item {
        flex-wrap: wrap;
    }
    .rdx-device-item__action {
        width: 100%;
    }
    .rdx-device-item__logout {
        width: 100%;
    }
}

/* =============================================================================
   Site-wide Header & Footer restyle (Rydex reskin gap-fix)
   =============================================================================
   Why this section exists: every earlier reskin phase restyled individual
   PAGES (login, dashboard, my trips, profile, etc.) but the top navbar and
   footer wrapping EVERY page (marketing pages, auth pages, and account/
   dashboard pages alike - they're all rendered via one shared
   partials/_header.blade.php + partials/_footer.blade.php, included from
   master.blade.php) were never touched. Confirmed live: this old bar/footer
   was the one piece of "chrome" present unchanged on literally every single
   page, which is why the whole site still read as "not matching the
   designs" even after individual pages were rebuilt.

   Deliberately CSS-only, no Blade markup changes - same low-risk technique
   used successfully for the Phase 1b driver sidebar conversion. Every
   dynamic/functional piece (business logo, social links, app-store
   buttons, quick-login dropdown, contact info, blog link visibility,
   my-account/login state) is untouched; only spacing, color, shape, and
   typography are restyled to match the Rydex topbar/footer designs
   (rydex-homepage-responsive.html's <header class="topbar"> and
   rydex-footer-top-footer-down-responsive.html).
   ============================================================================= */

/* ---- Top navbar ---- */
.navbar-bottom {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.navbar-bottom-wrapper {
    border-radius: 0;
    padding: 14px 22px;
}

.navbar-bottom .logo img {
    max-height: 40px;
    width: auto;
}

.navbar-bottom-wrapper .menu li a {
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--body-clr);
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar-bottom-wrapper .menu li a:hover,
.navbar-bottom-wrapper .menu li a.active,
.navbar-bottom-wrapper .menu li a.dropdown-toggle.active {
    background: var(--text-secondary);
    color: #07885D;
}

.navbar-bottom-wrapper .menu li a.cmn--btn {
    background: none;
}

.navbar-bottom-wrapper .menu li a.cmn--btn:hover,
.navbar-bottom-wrapper .menu li a.cmn--btn.active {
    background: var(--text-primary);
    color: #fff;
}

.auth-nav-dropdown__menu {
    border: none;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
    padding: 18px;
    margin-top: 10px !important;
}

.auth-nav-dropdown__menu .cmn--btn {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

.auth-quick-links {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12.5px;
}

.auth-quick-links a {
    color: var(--body-clr);
}

.auth-quick-links a:hover {
    color: #07885D;
}

.nav-toggle span {
    background: var(--title-color);
}

/* ---- Footer ---- */
.footer-top {
    background: #fff;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.footer__wrapper-widget .cont .logo img {
    max-height: 38px;
    width: auto;
}

.footer__wrapper-widget h6 {
    color: var(--title-color);
    font-weight: 700;
}

.footer__wrapper-link a,
.footer__wrapper-contact a,
.footer__wrapper-contact div {
    color: var(--body-clr);
    font-size: 13.5px;
    transition: color 0.15s ease;
}

.footer__wrapper-link a:hover,
.footer__wrapper-contact a:hover {
    color: #07885D;
}

.footer__wrapper-contact .icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--text-secondary);
    padding: 8px;
    object-fit: contain;
}

.social-icons {
    display: flex;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.social-icons li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(16, 24, 40, 0.1);
    background: #F5F8F8;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.social-icons li a:hover {
    background: var(--text-secondary);
    border-color: var(--text-primary);
}

.social-icons li a img {
    width: 16px;
    height: 16px;
}

.app-btns img {
    border-radius: 10px;
}

.footer-bottom {
    background: #17201C;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
}

.footer-bottom a {
    color: #fff;
}

.newsletter-section .cmn--btn {
    background: var(--text-primary);
    border-color: var(--text-primary);
}