/* Styles for the pricing cards, which the Laravel view carried as inline styles. */
.pricing-box {
    background: rgba(var(--white), 1);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    text-align: center;
}

.pricing-box.is-coming-soon { opacity: .7; }
.pricing-box.is-coming-soon img { filter: grayscale(80%); }
.pricing-box img { height: 80px; width: auto; object-fit: contain; }
.pricing-box h4 { margin-bottom: 16px; }

.pricing-lines { text-align: left; font-size: 14px; line-height: 1.8; }
.pricing-lines small { display: block; color: #6c757d; }
.pricing-note { font-size: 13px; }

/* Newsletter feedback swapped in by htmx. */
.newsletter-message { font-weight: 500; }
.newsletter-message.is-error { color: #d33; }
.newsletter-message.is-ok { color: rgb(var(--primary-color)); }

/* reveal.js: only an element the script has confirmed is below the fold waits hidden. */
.reveal-pending { visibility: hidden; }

/* Statistics counters drawn with a Remix icon instead of an image. */
.experience-img i { font-size: 30px; line-height: 1; color: rgb(var(--primary-color)); }
.experience-box.user-box .experience-img i { color: rgb(var(--warning-color)); }
.experience-box.driver-box .experience-img i { color: rgb(var(--danger-color)); }
.experience-box.rating-box .experience-img i { color: rgb(var(--info-color)); }

/* Newsletter feedback sits under the form, which stays usable for another try. */
.newsletter-message { margin: 8px 0 0; font-size: 14px; }

/*
 * The theme redefines `@keyframes fadeIn` for a centred popup (translate(-50%)),
 * which overrides animate.css's and slid every `.wow.fadeIn` block half its width
 * to the left — the statistics row ended up cut off. Content blocks fade in place.
 */
@keyframes riderFadeIn { from { opacity: 0; } to { opacity: 1; } }
.animated.fadeIn { animation-name: riderFadeIn; }

/*
 * At 768px and below the theme makes the header sticky, so it takes its own space
 * above the hero instead of floating over it — but leaves it transparent. On the
 * white page behind, the white logo and menu button were invisible until the
 * visitor scrolled. Give it the same dark bar it gets once scrolled.
 */
@media (max-width: 768px) {
    header { background-color: #1f1f1f; }
}

/*
 * FAQs: one grid for every question. On a wide screen it has two columns, and a
 * question sits in the same row as its neighbour, so opening a long answer
 * pushes both sides down together instead of leaving the columns out of step.
 */
@media (min-width: 992px) {
    .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/*
 * How it works: the theme dims every step but the current one to 20%, which on
 * the dark background left the other steps unreadable. Dim, but legible.
 */
.ride-screen-section2 .screen-content-list .screen-content-slider .swiper-slide {
    opacity: .45;
}

/* Hero: the headline and its paragraph ran into each other on a phone. */
.home-section .home-contain h1 {
    margin-bottom: 12px;
}

/* Pricing on a phone: two cards a row, so five classes are not five screens tall. */
@media (max-width: 575.98px) {
    .pricing-box { padding: 16px 12px; }
    .pricing-box img { height: 56px; }
    .pricing-box h4 { font-size: 18px; margin-bottom: 10px; }
    .pricing-lines { font-size: 13px; line-height: 1.7; }
}

/*
 * The theme's tracking-page stylesheet hides `.footer-section` at 768px and
 * below, and that rule applies to every page — so on phones and tablets the
 * footer (contact details, legal pages, company) never showed. Bring it back.
 */
@media (max-width: 768px) {
    .footer-section { display: block; }
}

/*
 * Why Rider cards: the title sits over the empty top of the picture, and the
 * card took its height from the picture alone. Until a lazy picture arrived the
 * card was zero high and every title and description piled on top of the next.
 * The picture's space is now kept from the start, and on a phone the words sit
 * above a picture cropped to its screen, so larger text can never cover it.
 */
.best-choice-section .best-choice-box {
    width: 100%;
    max-width: 486px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 12px;
    background-color: rgba(var(--light-gray), 1);
}
.best-choice-section .best-choice-box > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 486 / 496;
}
@media (max-width: 575.98px) {
    .best-choice-section .best-choice-box {
        display: flex;
        flex-direction: column-reverse;
    }
    .best-choice-section .best-choice-box .best-choice-content {
        position: static;
        padding: 16px 16px 4px;
    }
    .best-choice-section .best-choice-box > img {
        aspect-ratio: 486 / 346;
        object-fit: cover;
        object-position: bottom;
    }
}

/* Pricing pictures keep their place while they load. */
.pricing-box img { aspect-ratio: 2 / 1; max-width: 100%; }

/*
 * How it works: the step text slider shows its neighbours' edges ("er", "Your
 * Rid…") beside the current step on phones and tablets. Only the current step shows.
 */
@media (max-width: 991.98px) {
    .ride-screen-section2 .screen-content-list,
    .ride-screen-section2 .screen-content-list .screen-content-slider { overflow: hidden !important; }
    .ride-screen-section2 .screen-content-slider .swiper-slide:not(.swiper-slide-active) { visibility: hidden; }
}

/* Footer bottom line on a phone: copyright and social icons centred, one above the other. */
@media (max-width: 767.98px) {
    .footer-section .sub-footer h6,
    .footer-section .sub-footer .social-list { text-align: center; justify-content: center; }
}

/* The app store badges ran into the Legal and Contact headings below them. */
@media (max-width: 991.98px) {
    .footer-section .store-list { margin-bottom: 24px; }
}

/* A menu link lands with the section's heading below the sticky header, not under it. */
section[id] { scroll-margin-top: 72px; }

/* Dark mode: the theme gives the Why Rider card titles a fixed near-black, invisible on the dark card. */
body.dark .best-choice-section .best-choice-box .best-choice-content h4 { color: rgba(var(--title-color), 1); }