/* enable smooth anchor scrolling on supported browsers */
html {
    scroll-behavior: smooth;
}

/* Recent requests small header and wide cards aligned to the right */
.recent-requests-section h2 {
    font-size: 1.05rem;
    /* smaller header */
    margin-bottom: 6px;
}

.cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* align cards to right */
    gap: 12px;
}

/* Minimal CSS for stars */
#testimonials .stars {
    color: #ffc107 !important;
    font-size: 1.05rem;
    line-height: 1;
}

#testimonials .star {
    margin-right: 2px;
}

/* Page-specific modern styles for hero, features and benefits */
.home-hero {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 60%);
}

/* Ensure pagination links are visibly interactive and accept pointer events */
.pagination .page-link {
    cursor: pointer;
    pointer-events: auto;
}

.home-hero .display-5 {
    color: #0b3b66;
    letter-spacing: -0.2px;
}

.feature-card .feature-icon svg {
    display: block;
    margin: 0 auto;
    color: inherit;
}

.feature-card h5 {
    margin-top: 6px;
    margin-bottom: 6px;
}

.benefits-list li {
    margin-bottom: 6px;
}

@media (prefers-color-scheme: dark) {

    /* Use a softer dark background in dark mode instead of pure black so cards feel less harsh */
    #testimonials .card {
        background: #d7e6df22;
        /* dark-gray (not pitch black) */
        border-color: rgba(255, 255, 255, 0.06);
        color: rgba(41, 32, 32, 0.92);
    }

    /* Make muted text slightly lighter for contrast in dark mode */
    #testimonials .card .text-muted {
        color: rgba(58, 53, 53, 0.65) !important;
    }
}

.cards-grid .card {
    flex: 0 0 520px;
    /* wide cards so content fits on single line where possible */
    max-width: 520px;
    min-width: 380px;
}

/* Prevent long labels from wrapping; truncate with ellipsis if too long */
.ride-card .card-text {
    /* truncate on wide screens only */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ride-card .card-body {
    padding: 12px;
}

/* Hero advertisement/banner styling */

.hero-ad {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 12px auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(11, 59, 102, 0.08);
    background: linear-gradient(180deg, #ffffff, #fbfbff);
    /* Use aspect-ratio to reserve a short banner area so images scale without being cropped */
    aspect-ratio: 16 / 6;
    /* wide and short */
}


/* Use background image so we can guarantee the full image is visible without cropping */
.hero-ad {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-ad .ad-logo {
    position: absolute;
    right: 52px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 28px;
    pointer-events: none;
}

/* Lyft page specific hero using background image with a decreasing overlay */
.hero-lyft {
    /* slightly darker overlay to ensure foreground text is readable */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.35) 65%, rgba(0, 0, 0, 0) 100%), url('/images/ride-hero.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #ffffff;
}

.hero-lyft .display-5 {
    color: #ffffff;
    /* ensure headings are visible on the hero image */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.hero-lyft .lead {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Position the hero content visually towards the bottom of the hero (not vertically centered) */
.hero-lyft .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important;
    /* push heading and buttons toward the bottom */
    padding-top: 2.25rem;
    /* keep some space above the content */
    padding-bottom: 2.25rem;
    margin-top: 111px;
}

/* If the row helper still centers items, make sure hero layout aligns to bottom */
.hero-lyft .row.align-items-center {
    align-items: flex-end;
}

/* CTA visual treatment to attract attention while remaining tasteful and accessible */
.hero-lyft .btn-primary {
    background: linear-gradient(135deg, #ff7a59 0%, #ff3b5e 60%);
    border: none;
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 59, 94, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.hero-lyft .btn-primary:hover,
.hero-lyft .btn-primary:focus {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 28px rgba(255, 59, 94, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12);
    outline: none;
}

@media (min-width: 900px) {
    .hero-ad img {
        max-height: 320px;
    }

    /* Pin recent requests to the right as a fixed column on large screens */
    .recent-requests-section {
        position: sticky;
        top: 96px;
        /* adjust to your header height */
        right: 16px;
        margin-left: 470px !important;
        top: 100px;
        width: 520px;
        z-index: 1200;
        background: rgba(255, 255, 255, 0.98);
        padding: 8px;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        /* Make the panel scrollable so long lists don't extend past the viewport */
        max-height: calc(100vh - 140px);
        overflow: auto;
    }

    /* Keep cards stacked inside the column */
    .recent-requests-section .cards-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .cards-grid .card {
        flex: none;
        width: 100%;
        @* max-width: 100%;
        *@ min-width: 0;
    }

    /*
        * Ensure the pinned panel does NOT block clicks on the main content.
        * We make the panel itself ignore pointer events (so clicks pass through)
        * but explicitly re-enable pointer events for interactive descendants
        * (cards, links, inputs, buttons, and the load-more container).
        */
    .recent-requests-section {
        pointer-events: none;
        /* allow clicks to pass through to underlying page */
        z-index: 99999;
    }

    /* re-enable interaction for the parts of the panel that need it */
    .recent-requests-section .cards-grid,
    .recent-requests-section .cards-grid .card,
    .recent-requests-section input,
    .recent-requests-section textarea,
    .recent-requests-section button,
    .recent-requests-section a,
    .recent-requests-section .load-more-container,
    .recent-requests-section .load-more-container .btn {
        pointer-events: auto;
    }

    /* sticky container inside the scrollable panel so the button remains visible */
    .load-more-container {
        position: -webkit-sticky;
        /* Safari */
        position: sticky;
        bottom: 0;
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98));
        padding: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100000;
        pointer-events: auto;
    }

    .load-more-container .btn {
        pointer-events: auto;
        z-index: 100001;
        display: block;
        width: calc(100% - 16px);
        max-width: 420px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .ride-card .card-text {
        white-space: nowrap;
    }
}

@media (max-width: 899px) {

    /* Mobile: make the recent requests inline and full-width */
    .recent-requests-section {
        position: static;
        width: 100%;
        padding: 0;
        box-shadow: none;
    }

    .cards-grid {
        display: flex;
        flex-wrap: wrap;
        /* On small screens align cards to the start so the left edge is visible */
        justify-content: flex-start;
    }

    .cards-grid .card {
        flex: 0 0 100%;
        max-width: 100%;
        /* Remove desktop min-width so cards can shrink to viewport width */
        min-width: 0;
    }

    .ride-card .card-text {
        white-space: normal;
    }

    /* Hide pickup/drop details on small screens only for anonymous users; show for authenticated users */
    body:not(.is-authenticated) .pickup-drop {
        display: none !important;
    }

    /* On small screens keep cards full-width so inline badges (like the recurring badge)
        remain visible without horizontal scrolling. This prevents important badges from
        being clipped or placed off-screen on mobile devices. */
    .cards-grid {
        overflow-x: visible;
        -webkit-overflow-scrolling: auto;
        gap: 12px;
        padding-bottom: 8px;
    }

    .cards-grid .card {
        flex: 0 0 100%;
        @* max-width: 100%;
        *@ min-width: 0;
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .home-hero {
        padding-top: 1.2rem;
    }

    .hero-ad {
        aspect-ratio: 3 / 2;
        /* taller on narrow screens but still compact */
        margin-bottom: 10px;
    }

    .home-hero {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .home-hero img {
        max-height: 240px;
    }

    hero-lyft .btn.btn-lg {
        /* slightly smaller type and padding while keeping a tappable target */
        font-size: 0.95rem;
        padding: 0.45rem 0.9rem;
        line-height: 1.15;
        border-radius: 6px;
    }

    /* reduce the extra horizontal margin so stacked buttons fit nicely */
    .hero-lyft .btn+.btn {
        margin-left: 0.5rem;
    }

    .hero-lyft .hero-content .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 0.6rem !important;
        align-items: center;
        justify-content: center;
    }

    .hero-lyft .hero-content .d-flex.gap-2 .btn {
        width: 77vw;
        /* ~77% of the viewport width */
        max-width: 520px;
        /* reasonable cap on very large small screens */
        min-width: 220px;
        /* avoid becoming too small on tiny viewports */
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        font-size: 1.02rem;
        line-height: 1.2;
        height: auto;
        border-radius: 10px;
        box-sizing: border-box;
    }

    /* Make the primary CTA slightly more prominent in height when using btn-lg */
    .hero-lyft .hero-content .d-flex.gap-2 .btn.btn-lg {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    /* Ensure focus outline remains visible when centered */
    .hero-lyft .hero-content .d-flex.gap-2 .btn:focus {
        outline-offset: 3px;
    }

    /* Make ride category tab buttons more compact on small screens */
    #ride-category-tabs .btn {
        font-size: 0.77rem;
        /* smaller text */
        padding: 0.24rem 0.5rem;
        /* tighter padding */
        line-height: 1;
        border-radius: 6px;
        white-space: nowrap;
        /* keep label compact */
    }

    #lyft-filters-toggle .btn {
        font-size: 0.83rem;
        /* smaller text */
        padding: 0.24rem 0.5rem;
        /* tighter padding */
        line-height: 1;
        border-radius: 6px;
        white-space: nowrap;
        /* keep label compact */
    }

    /* Allow the group to wrap if needed while keeping each button compact */
    #ride-category-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    .hero-lyft .btn+.btn {
        display: block;
        /* margin: 0.5rem auto 0 auto; */
    }

    /* On small screens keep the full hero image visible without aggressive cropping.
           Use `contain` so the entire banner fits within the hero box and position it toward the top
           so important parts of the artwork are visible. Increase vertical padding so text does not
           overlap the image. */
    .hero-lyft {
        background-size: contain;
        background-position: center top;
        background-repeat: no-repeat;
        /* allow the hero box to grow to fit the image rather than forcing a short cropped box */
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

}

/* On very small screens, stack the two hero CTAs and make them full-width
           so they are easier to tap and don't crowd the layout. Keep spacing compact. */
@media (max-width: 575.98px) {
    .hero-lyft .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 0.4rem !important;
        align-items: stretch;
    }

    .hero-lyft .d-flex.gap-2 .btn {
        width: 77vw;
        /* ~77% of the viewport width */
        max-width: 520px;
        /* reasonable cap on very large small screens */
        min-width: 220px;
        /* avoid becoming too small on tiny viewports */
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        font-size: 1.02rem;
        line-height: 1.2;
        height: auto;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .hero-lyft .d-flex.gap-2 .btn+.btn {
        margin-left: 0 !important;
    }

    #NewRequest_Time {
        padding-left: 22px !important;
    }

    #NewRequest_Date {
        padding-left: 29px !important;
    }
}


/* Subtle pulse to draw the eye on larger screens, but respect prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .hero-lyft .btn-primary.attention-pulse {
        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.02);
            }

            100% {
                transform: scale(1);
            }
        }

        animation: pulse 3.8s ease-in-out infinite;
    }
}

/* Larger hero height so background image is more visible */
@media (min-width: 768px) {
    .hero-lyft {
        min-height: 420px;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

@media (min-width: 1200px) {
    .hero-lyft {
        min-height: 540px;
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}

/* Why Choose Us — modern feature cards */
.why-choose .feature-card {
    border-radius: 12px;
    padding: 20px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 10px 30px rgba(11, 59, 102, 0.08);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}

.why-choose .feature-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.why-choose .feature-title {
    margin: 0 0 .35rem 0;
    font-weight: 700;
    color: #0b3b66;
}

.why-choose .feature-list {
    margin: 0;
    padding-left: 1rem;
    color: #475569;
}

.why-choose .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(11, 59, 102, 0.12);
}

/* Benefit cards: short, concrete points for Lyft page */
/* Scoped small benefit cards for Lyft page */
.lyft-benefits .card {
    border: 1px solid rgba(11, 59, 102, 0.06);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.lyft-benefits .benefit-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6f7ff, #f0fbff);
    color: #0b3b66;
}

.lyft-benefits .benefit-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0b3b66;
}

.lyft-benefits .benefit-sub {
    font-size: 0.85rem;
    color: #475569;
}

/* Lyft banner styles */
.lyft-banner {
    background: linear-gradient(180deg, #eef9ff 0%, #f7fdff 100%);
    border: 1px solid #cfeffd;
    color: #083252;
    border-radius: 8px;
}

.lyft-banner .banner-title {
    font-weight: 700;
    min-width: 260px;
    color: #07385b;
}

.lyft-banner .marquee {
    overflow: hidden;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.lyft-banner .marquee-track {
    display: inline-block;
    padding-left: 2rem;
    animation: lyft-marquee 26s linear infinite;
    will-change: transform;
    color: #0b3b66;
}

.lyft-banner .marquee-track:hover {
    animation-play-state: paused;
}

@keyframes lyft-marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    .lyft-banner {
        padding: 10px;
    }

    .lyft-banner .banner-title {
        font-size: 0.95rem;
    }

    .lyft-banner .marquee-track {
        animation-duration: 36s;
    }

    ÷ #NewRequest_Time {
        padding-left: 22px !important;
    }
}

#NewRequest_Time {
    padding-left: 22px !important;
}

#NewRequest_Date {
    padding-left: 29px !important;
}

/* Fix: iPhone 13 mini and other very narrow screens sometimes show the date/time picker
   icon overlapping the input. Increase left padding for very narrow viewports. */
@media (max-width: 360px) {
    #NewRequest_Time {
        padding-left: 30px !important;
    }

    #NewRequest_Date {
        padding-left: 36px !important;
    }
    /* Slightly reduce right padding for smaller inputs to keep layout compact */
    #NewRequest_Time, #NewRequest_Date {
        padding-right: 8px !important;
    }
}

.featured-drivers-section .featured-driver-card {
    border: 1px solid rgba(13, 110, 253, 0.06);
    border-radius: 10px;
}

.featured-drivers-section h5 {
    color: #0b3b66;
}

.featured-drivers-section .card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.featured-drivers-section .badge.bg-primary {
    background-color: rgba(13, 110, 253, 0.06);
    color: #0d6efd;
    border-radius: 6px;
    padding: 6px 8px;
}

.featured-drivers-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .featured-drivers-grid {
        flex-direction: column;
    }

    .featured-drivers-section .card {
        width: 100% !important;
    }
}