/* FindMyDrive24 Portal — custom styles (matches prototype design) */

/* ===== VARIABLES ===== */
:root {
    --fmd-primary: #FFD700;
    --fmd-primary-text: #1a1a1a;
    --fmd-dark: #1a1a1a;
    --fmd-yellow: #FFD700;
    --fmd-light: #f8f8f8;
    --fmd-text-light: #666;
    --fmd-border: #e0e0e0;
    /* Header height (compact bar) — logo overflows beyond this */
    --header-h: 88px;
    --header-h-mobile: 88px;
}

/* ===== GLOBAL ===== */
::selection     { background: var(--fmd-primary); color: #1a1a1a; }
::-moz-selection { background: var(--fmd-primary); color: #1a1a1a; }

/* Bootstrap btn-primary → gold (overrides any theme that sets it to red/blue) */
.btn-primary,
.btn-primary:focus {
    background-color: var(--fmd-primary) !important;
    border-color: var(--fmd-primary) !important;
    color: #1a1a1a !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--fmd-primary) !important;
    border-color: var(--fmd-primary) !important;
    color: #1a1a1a !important;
}
.btn-primary:disabled {
    background-color: var(--fmd-primary) !important;
    border-color: var(--fmd-primary) !important;
    color: #1a1a1a !important;
    opacity: .65;
}

body {
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
    color: #333;
}
a { text-decoration: none; }

/* ===== GLOBAL FONT: Arial Rounded MT Bold (everywhere except footer) ===== */
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body span, body div, body section, body article, body main,
body button, body input, body select, body textarea, body label,
body nav, body ul, body ol, body li,
body td, body th, body caption, body figcaption,
body strong, body em, body small, body sub, body sup,
body blockquote, body cite, body code, body pre,
body .form-control, body .form-select, body .btn {
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif !important;
}

/* Footer keeps its own font — restore Noto Sans */
.fmd-footer,
.fmd-footer h1, .fmd-footer h2, .fmd-footer h3,
.fmd-footer h4, .fmd-footer h5, .fmd-footer h6,
.fmd-footer p, .fmd-footer a, .fmd-footer span, .fmd-footer div,
.fmd-footer button, .fmd-footer input, .fmd-footer select,
.fmd-footer textarea, .fmd-footer label,
.fmd-footer ul, .fmd-footer ol, .fmd-footer li,
.fmd-footer td, .fmd-footer th, .fmd-footer strong, .fmd-footer small {
    font-family: 'Noto Sans', sans-serif !important;
}

/* "FindMyDrive24" brand name inside footer → Arial Rounded MT Bold */
.fmd-footer-logo-text,
.fmd-footer .fmd-brand-name {
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif !important;
}

/* ===== HEADER ===== */
#fmd-header {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 2px 18px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease;
}
#fmd-header.scrolled {
    box-shadow: 0 6px 36px rgba(0,0,0,0.14);
}
.fmd-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 28px;
}

/* ── Logo ─────────────────────────────────────────────────────── */
.fmd-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* let the logo visually bleed beyond the compact header bar */
    overflow: visible;
    position: relative;
    z-index: 10;
}
.fmd-logo a { display: flex; align-items: center; overflow: visible; }
.fmd-logo-img {
    /* Fixed large size — overflows the compact 88px header intentionally */
    height: 200px;
    width: auto;
    max-height: none;
    object-fit: contain;
    transition: opacity 0.2s;
}
.fmd-logo a:hover .fmd-logo-img { opacity: 0.85; }

/* ── Nav ──────────────────────────────────────────────────────── */
.fmd-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 2px;
}
.fmd-nav ul li a {
    display: block;
    color: #444;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    padding: 9px 17px;
    position: relative;
    text-decoration: none;
    transition: color 0.2s;
}
/* animated gold underline */
.fmd-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 17px;
    right: 17px;
    height: 2px;
    background: var(--fmd-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.24s cubic-bezier(.4,0,.2,1);
}
.fmd-nav ul li a:hover { color: #1a1a1a; }
.fmd-nav ul li a:hover::after,
.fmd-nav ul li a.active-nav::after { transform: scaleX(1); }
.fmd-nav ul li a.active-nav { color: #1a1a1a; }

/* ── Inspect — gold CTA pill ─────────────────────────────────── */
.fmd-nav ul li.fmd-nav-cta a {
    background: var(--fmd-primary);
    color: #1a1a1a !important;
    border-radius: 8px;
    padding: 10px 22px;
    margin: 0 8px;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    font-weight: 800;
    box-shadow: 0 3px 12px rgba(255,215,0,0.30);
    transition: background 0.2s, transform 0.18s ease, box-shadow 0.2s;
}
.fmd-nav ul li.fmd-nav-cta a:hover {
    background: #f0c800;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,215,0,0.45);
}
.fmd-nav ul li.fmd-nav-cta a::after { display: none; }
.fmd-nav ul li.fmd-nav-cta a.active-nav {
    background: #e6be00;
    color: #1a1a1a !important;
    box-shadow: 0 4px 16px rgba(255,215,0,0.35);
}

/* ── Header right ─────────────────────────────────────────────── */
.fmd-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Language links (desktop only) */
.fmd-lang-links {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.fmd-lang-links a { color: #999; padding: 2px 5px; transition: color 0.2s; }
.fmd-lang-links a:hover,
.fmd-lang-links a.active { color: #1a1a1a; }
.fmd-lang-links span { color: #ddd; }

/* Sign In / Account button */
.fmd-login-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 22px;
    border: 1.5px solid #1a1a1a;
    border-radius: 8px;
    color: #1a1a1a !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.fmd-login-btn:hover {
    background: #1a1a1a;
    color: var(--fmd-primary) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.fmd-login-btn i { font-size: 13px; }

/* Avatar circle (logged-in state) */
.fmd-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fmd-primary);
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Mobile hamburger ─────────────────────────────────────────── */
.fmd-mobile-btn {
    display: none;
    background: none;
    border: 1.5px solid #d0d0d0;
    border-radius: 7px;
    color: #1a1a1a;
    font-size: 17px;
    cursor: pointer;
    padding: 7px 11px;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.fmd-mobile-btn:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: var(--fmd-primary);
}
.fmd-mobile-btn:focus { outline: none; }

/* ── Mobile responsive ────────────────────────────────────────── */
@media (max-width: 991px) {
    .fmd-mobile-btn { display: block; }
    .fmd-header-inner { height: var(--header-h-mobile); gap: 12px; }
    .fmd-nav {
        display: none;
        position: absolute;
        top: var(--header-h-mobile);
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #f0f0f0;
        border-bottom: 3px solid var(--fmd-primary);
        box-shadow: 0 12px 32px rgba(0,0,0,0.13);
        padding: 12px 0 18px;
        z-index: 999;
    }
    .fmd-nav.open { display: block; }
    .fmd-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
    .fmd-nav ul li a {
        padding: 13px 24px;
        font-size: 12px;
        letter-spacing: 0.6px;
    }
    .fmd-nav ul li a::after { display: none; }
    .fmd-nav ul li.fmd-nav-cta { padding: 10px 16px 6px; }
    .fmd-nav ul li.fmd-nav-cta a {
        margin: 0;
        text-align: center;
        border-radius: 8px;
        padding: 13px 24px;
    }
    /* Logo stays large on mobile too — bleeds beyond compact bar */
    .fmd-logo-img { height: 160px !important; max-height: none !important; }
    .fmd-lang-links { display: none; }
    .fmd-login-btn span:not(.fmd-user-avatar) { display: none; }
    .fmd-login-btn { padding: 9px 13px; }
    .fmd-login-btn i { font-size: 15px; }
    .fmd-mobile-btn { padding: 8px 12px; font-size: 18px; }
    .fmd-user-avatar { width: 32px; height: 32px; font-size: 13px; }
    /* Logged-in avatar button: clean circle on mobile */
    .fmd-login-btn--auth {
        border-color: transparent;
        background: transparent;
        padding: 3px;
        box-shadow: none;
    }
    .fmd-login-btn--auth:hover {
        background: transparent;
        box-shadow: none;
    }
    .fmd-login-btn--auth .fmd-user-avatar {
        width: 38px;
        height: 38px;
        font-size: 15px;
        box-shadow: 0 0 0 2.5px var(--fmd-primary), 0 2px 10px rgba(0,0,0,.14);
    }
}

/* ===== HOMEPAGE — SLOGAN SECTION ===== */
.fmd-slogan-section {
    padding: 80px 0 40px;
    background: #fff;
    text-align: center;
}
.fmd-slogan-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.1;
}
.fmd-slogan-section h2 .highlight {
    color: var(--fmd-primary);
}
.fmd-slogan-section p {
    font-size: 18px;
    color: var(--fmd-text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== HOMEPAGE — SERVICES ILLUSTRATION SECTION ===== */
.fmd-services-section {
    padding: 80px 0 140px;
    background: #fff;
    position: relative;
}
.fmd-illustration-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}
.fmd-illustration-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.fmd-illustration-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.fmd-illustration-container:hover img {
    transform: scale(1.01);
}
.fmd-buttons-container {
    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    flex-wrap: wrap;
}
.fmd-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 42px;
    font-size: 17px;
    font-weight: 700;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255,215,0,0.35);
}
.fmd-cta-btn:hover {
    background: var(--fmd-primary);
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(255,215,0,0.45);
    color: var(--fmd-primary-text);
}
.fmd-cta-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}
.fmd-cta-btn:hover i {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .fmd-slogan-section h2 { font-size: 36px; }
    .fmd-services-section { padding: 60px 0 200px; }
    .fmd-buttons-container { bottom: -130px; flex-direction: column; gap: 12px; }
    .fmd-cta-btn { width: 100%; justify-content: center; max-width: 280px; }
}

/* ===== HOMEPAGE — TESTIMONIALS ===== */
.fmd-testimonials {
    padding: 100px 0;
    background: var(--fmd-light);
}
.fmd-section-title {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #1a1a1a;
}
.fmd-section-title span { color: var(--fmd-primary); }

.fmd-testimonials-wrapper {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 5px 20px;
}
.fmd-testimonial-card {
    flex: 0 0 calc(33.333% - 20px);
    min-width: 280px;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.fmd-testimonial-quote {
    font-style: italic;
    color: var(--fmd-text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}
.fmd-testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}
.fmd-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.fmd-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fmd-author-info h4 {
    font-weight: 700;
    margin-bottom: 3px;
    font-size: 15px;
}
.fmd-author-info p {
    color: var(--fmd-text-light);
    font-size: 13px;
    margin-bottom: 4px;
}
.fmd-stars { color: var(--fmd-primary); font-size: 13px; }

/* ===== HOMEPAGE — FAQ ===== */
.fmd-faq {
    padding: 100px 0;
    background: #fff;
}
.fmd-faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.fmd-faq-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.fmd-faq-question {
    background: var(--fmd-light);
    padding: 18px 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    user-select: none;
}
.fmd-faq-question:hover {
    background: #f0f0f0;
}
.fmd-faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--fmd-text-light);
    line-height: 1.7;
}
.fmd-faq-item.active .fmd-faq-question {
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
}
.fmd-faq-item.active .fmd-faq-question i {
    transform: rotate(180deg);
}
.fmd-faq-item.active .fmd-faq-answer {
    padding: 20px;
    max-height: 300px;
}

/* ===== FOOTER ===== */
.fmd-footer {
    background: #1a1a1a;
    color: #fff;
    padding: 80px 0 30px;
    position: relative;
}
.fmd-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--fmd-primary);
}
.fmd-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
    gap: 40px;
    margin-bottom: 50px;
}
.fmd-footer-logo-text {
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #fff;
}
.fmd-footer-logo-text .highlight { color: var(--fmd-primary); }

.fmd-footer-desc {
    color: #bbb;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.fmd-footer-col h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    color: #fff;
}
.fmd-footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--fmd-primary);
}
.fmd-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fmd-footer-links li { margin-bottom: 10px; }
.fmd-footer-links li a {
    color: #bbb;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.fmd-footer-links li a:hover {
    color: var(--fmd-primary);
    transform: translateX(5px);
}
.fmd-footer-links li a i { font-size: 11px; }

/* Footer language selector */
.fmd-footer-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 14px;
    background: #2a2a2a;
    border-radius: 6px;
    width: fit-content;
    font-size: 13px;
}
.fmd-footer-lang i { color: var(--fmd-primary); }
.fmd-footer-lang a {
    color: #bbb;
    font-weight: 600;
    transition: color 0.2s ease;
}
.fmd-footer-lang a:hover,
.fmd-footer-lang a.active { color: var(--fmd-primary); }
.fmd-footer-lang span { color: #555; }

/* Social links */
.fmd-social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.fmd-social-links a {
    width: 38px;
    height: 38px;
    background: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: all 0.3s ease;
}
.fmd-social-links a:hover {
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    transform: translateY(-3px);
}

/* Newsletter form */
.fmd-newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.fmd-newsletter-form input {
    padding: 10px 14px;
    border: none;
    border-radius: 5px;
    flex: 1;
    font-size: 13px;
    min-width: 0;
}
.fmd-newsletter-form button {
    padding: 10px 16px;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: background 0.3s ease;
    white-space: nowrap;
}
.fmd-newsletter-form button:hover { background: var(--fmd-primary); }

/* Footer bottom */
.fmd-footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.fmd-footer-copyright { color: #888; font-size: 14px; }
.fmd-footer-bottom-links {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}
.fmd-footer-bottom-links a {
    color: #888;
    font-size: 13px;
    transition: color 0.3s ease;
}
.fmd-footer-bottom-links a:hover { color: var(--fmd-primary); }

/* Footer responsive */
@media (max-width: 1100px) {
    .fmd-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
    .fmd-footer-grid { grid-template-columns: 1fr 1fr; }
    .fmd-footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .fmd-footer-grid { grid-template-columns: 1fr; }
    .fmd-footer-bottom-links { justify-content: center; }
}

/* ===== PAGE HERO (inner pages) ===== */
.fmd-page-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background-color: #111;
}
.fmd-page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
}
.fmd-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.58));
    z-index: 1;
}
.fmd-page-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 20px;
}
.fmd-page-hero-content h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9);
}
.fmd-page-hero-content h1 .highlight {
    color: var(--fmd-primary);
    text-shadow: 0 0 24px rgba(255,215,0,0.45), 0 2px 12px rgba(0,0,0,0.85);
    display: inline-block;
}
.fmd-page-hero-content p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
@media (max-width: 768px) {
    .fmd-page-hero-content h1 { font-size: 32px; }
    .fmd-page-hero { min-height: 220px; }
}

/* ===== PROCESS STEPS (Sell + Inspect How it Works) ===== */
.fmd-process-section {
    padding: 80px 0;
    background: #fff;
}
.fmd-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}
.fmd-process-step {
    text-align: center;
    padding: 40px 20px 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fmd-process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.fmd-step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(255,215,0,0.45);
}
.fmd-step-icon {
    width: 72px;
    height: 72px;
    background: rgba(255,215,0,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.fmd-step-icon i { font-size: 28px; color: var(--fmd-primary); }
.fmd-step-title {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
}

@media (max-width: 900px) {
    .fmd-process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
}
@media (max-width: 480px) {
    .fmd-process-steps { grid-template-columns: 1fr; }
}

/* ===== STEP CARDS (4-col how it works) ===== */
.fmd-steps-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}
.fmd-step-card {
    text-align: center;
    padding: 35px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s ease;
}
.fmd-step-card:hover { transform: translateY(-4px); }
.fmd-step-card .fmd-step-icon { margin-bottom: 16px; }
.fmd-step-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a1a;
}
.fmd-step-card p { color: var(--fmd-text-light); font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
    .fmd-steps-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .fmd-steps-container { grid-template-columns: 1fr; }
}

/* ===== INSPECTION PACKAGE CARDS — glassmorphism ===== */
.fmd-packages-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #141414 0%, #1c1c1c 55%, #111 100%);
    position: relative;
    overflow: hidden;
}
/* ambient glow spots */
.fmd-packages-section::before,
.fmd-packages-section::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
}
.fmd-packages-section::before {
    top: -180px;
    left: 5%;
    background: radial-gradient(circle, rgba(255,215,0,0.07) 0%, transparent 65%);
}
.fmd-packages-section::after {
    bottom: -180px;
    right: 5%;
    background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 65%);
}
/* titles on dark bg */
.fmd-packages-section .fmd-section-title { color: #fff; }
.fmd-packages-section .fmd-section-title span { color: var(--fmd-primary); }
.fmd-packages-section > .container > .text-muted { color: rgba(255,255,255,0.45) !important; }

.fmd-packages-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}
.fmd-package-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 44px 32px 36px;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.fmd-package-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.fmd-package-card.popular {
    background: rgba(255,215,0,0.07);
    border: 1px solid rgba(255,215,0,0.45);
    transform: scale(1.04);
    box-shadow: 0 8px 40px rgba(255,215,0,0.15), 0 8px 32px rgba(0,0,0,0.4);
}
.fmd-package-card.popular:hover {
    transform: scale(1.04) translateY(-8px);
    border-color: rgba(255,215,0,0.75);
    box-shadow: 0 20px 60px rgba(255,215,0,0.2), 0 20px 50px rgba(0,0,0,0.5);
}
.fmd-package-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    padding: 4px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(255,215,0,0.45);
}
.fmd-package-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,215,0,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border: 1px solid rgba(255,215,0,0.2);
}
.fmd-package-icon i { font-size: 26px; color: var(--fmd-primary); }
.fmd-package-title {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.fmd-package-price {
    font-size: 40px;
    font-weight: 700;
    color: var(--fmd-primary);
    margin-bottom: 20px;
    line-height: 1;
}
.fmd-package-price span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.38);
}
.fmd-package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    text-align: left;
    flex: 1;
}
.fmd-package-features li {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 14px;
    color: rgba(255,255,255,0.72);
    display: flex;
    align-items: center;
    gap: 8px;
}
.fmd-package-features li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--fmd-primary);
    font-size: 11px;
    flex-shrink: 0;
}
.fmd-package-features li.disabled {
    color: rgba(255,255,255,0.22);
    text-decoration: line-through;
}
.fmd-package-features li.disabled::before { color: rgba(255,255,255,0.18); }
.fmd-package-card .text-muted { color: rgba(255,255,255,0.42) !important; }
.fmd-package-btn {
    display: block;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    font-size: 15px;
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(255,215,0,0.5);
}
.fmd-package-btn-solid {
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border-color: var(--fmd-primary);
    box-shadow: 0 4px 20px rgba(255,215,0,0.3);
}
.fmd-package-btn-solid:hover {
    background: #fff;
    color: #1a1a1a;
    border-color: #fff;
    box-shadow: 0 6px 28px rgba(255,255,255,0.2);
}
.fmd-package-btn-outline {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
}
.fmd-package-btn-outline:hover {
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border-color: var(--fmd-primary);
    box-shadow: 0 4px 20px rgba(255,215,0,0.3);
}

@media (max-width: 900px) {
    .fmd-packages-container { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
    .fmd-package-card.popular { transform: none; }
    .fmd-package-card.popular:hover { transform: translateY(-8px); }
}

/* ===== PRICE CALCULATOR ===== */
.fmd-calc-section {
    padding: 60px 0;
    background: #fff;
}
.fmd-calc-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 700px;
    margin: 0 auto;
}
.fmd-calc-header {
    background: #1a1a1a;
    color: #fff;
    padding: 18px 24px;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
}
.fmd-calc-header i { color: var(--fmd-primary); }
.fmd-calc-body { padding: 28px 24px; }

/* ===== SELL — BENEFITS PANEL ===== */
.fmd-benefits-section {
    padding: 80px 0;
    background: var(--fmd-light);
}
.fmd-benefits-panel {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    border-radius: 16px;
    padding: 50px;
    text-align: center;
}
.fmd-free-price {
    font-size: 64px;
    font-weight: 700;
    color: var(--fmd-primary);
    line-height: 1;
}

/* ===== CONTACT PAGE ===== */
.fmd-contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.fmd-contact-card {
    background: var(--fmd-light);
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    border-top: 5px solid var(--fmd-primary);
    transition: all 0.3s ease;
}
.fmd-contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.fmd-contact-icon {
    width: 70px;
    height: 70px;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 20px;
}
.fmd-contact-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1a1a;
}
.fmd-contact-card p { color: var(--fmd-text-light); margin-bottom: 15px; font-size: 15px; }
.fmd-contact-card a {
    color: var(--fmd-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.fmd-contact-card a:hover { color: #1a1a1a; transform: translateX(4px); }

/* Contact form section */
.fmd-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}
.fmd-form-side {
    background: #fff;
    border-radius: 10px;
    padding: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.fmd-info-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fmd-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}
.fmd-form-control {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s ease;
    background: #fff;
    color: #333;
}
.fmd-form-control:focus {
    outline: none;
    border-color: var(--fmd-primary);
    box-shadow: 0 0 0 3px rgba(255,215,0,0.2);
}
textarea.fmd-form-control { min-height: 140px; resize: vertical; }
select.fmd-form-control { cursor: pointer; }
.fmd-submit-btn {
    width: 100%;
    padding: 16px;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.fmd-submit-btn:hover { background: var(--fmd-primary); transform: translateY(-2px); }

.fmd-info-list { list-style: none; padding: 0; }
.fmd-info-list li {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.fmd-info-list i { color: var(--fmd-primary); font-size: 20px; margin-top: 3px; }
.fmd-hours-box {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}
.fmd-hours-box h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1a1a1a;
}
.fmd-hours-box h4 i { color: var(--fmd-primary); }
.fmd-hours-list { list-style: none; padding: 0; }
.fmd-hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.fmd-hours-list li:last-child { border-bottom: none; }
.fmd-hours-list .day { font-weight: 600; color: #333; }
.fmd-hours-list .time { color: var(--fmd-text-light); }

@media (max-width: 900px) {
    .fmd-form-wrapper { grid-template-columns: 1fr; }
    .fmd-info-side { order: -1; }
    .fmd-form-side { padding: 30px; }
}

/* ===== CAREERS PAGE ===== */
.fmd-position-item {
    background: var(--fmd-light);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 25px;
    border-left: 5px solid var(--fmd-primary);
    transition: all 0.3s ease;
}
.fmd-position-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.fmd-position-badge {
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
}
.fmd-upload-area {
    border: 2px dashed var(--fmd-primary);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    background: rgba(255,215,0,0.04);
    transition: all 0.3s ease;
    cursor: pointer;
}
.fmd-upload-area:hover {
    background: rgba(255,215,0,0.1);
    border-color: var(--fmd-primary);
}
.fmd-upload-area i { font-size: 44px; color: var(--fmd-primary); margin-bottom: 12px; }

/* ===== CAR CARDS (marketplace) ===== */
.car-list-box {
    transition: box-shadow .2s ease;
}
.car-list-box:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* ===== MARKETPLACE SEARCH SIDEBAR ===== */
.fmd-search-sidebar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-h) + 20px);
}
.fmd-search-sidebar-header {
    background: #1a1a1a;
    color: #fff;
    padding: 16px 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.fmd-search-sidebar-header i { color: var(--fmd-primary); }
.fmd-search-sidebar-body { padding: 20px; }
.fmd-filter-group { margin-bottom: 16px; }
.fmd-filter-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    margin-bottom: 6px;
}
.fmd-filter-input, .fmd-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background: #fff;
    color: #333;
}
.fmd-filter-input:focus, .fmd-filter-select:focus {
    outline: none;
    border-color: var(--fmd-primary);
}

/* Car card (marketplace listing) */
.fmd-car-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fmd-car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.fmd-car-card-img {
    position: relative;
    overflow: hidden;
    height: 180px;
    background: #f0f0f0;
}
.fmd-car-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.fmd-car-card:hover .fmd-car-card-img img { transform: scale(1.05); }
.fmd-car-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.fmd-car-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.fmd-car-title {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.fmd-car-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--fmd-text-light);
}
.fmd-car-meta span { display: flex; align-items: center; gap: 4px; }
.fmd-car-meta i { color: var(--fmd-primary); font-size: 11px; }
.fmd-car-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--fmd-primary);
    font-family: 'Oswald', sans-serif;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

/* ===================================================================
   MODERN FORM CONTROLS — applies to all selects & inputs in portal
   (overrides Bootstrap form-select and custom fmd-filter-* classes)
   =================================================================== */

/* --- Global select reset (portal-wide) --- */
select,
.fmd-sel,
.fmd-filter-select,
.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding: 10px 38px 10px 13px !important;
    height: 44px;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #333 !important;
    width: 100%;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    line-height: 1.4;
    font-family: inherit;
    box-shadow: none !important;
}

select:focus,
.fmd-sel:focus,
.fmd-filter-select:focus,
.form-select:focus {
    border-color: var(--fmd-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,215,0,.18) !important;
    outline: none !important;
}

select:hover,
.fmd-sel:hover,
.fmd-filter-select:hover,
.form-select:hover {
    border-color: #adb5bd !important;
}

select:disabled,
.fmd-sel:disabled,
.fmd-filter-select:disabled {
    background-color: #f8f9fa !important;
    color: #aaa !important;
    cursor: not-allowed;
    opacity: .7;
}

/* --- Text / number inputs (portal-wide) --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
.fmd-inp,
.fmd-filter-input,
.form-control {
    height: 44px;
    padding: 10px 13px !important;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #333 !important;
    width: 100%;
    background: #fff !important;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: none !important;
    -webkit-appearance: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
.fmd-inp:focus,
.fmd-filter-input:focus,
.form-control:focus {
    border-color: var(--fmd-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,215,0,.18) !important;
    outline: none !important;
}

input::placeholder,
.fmd-inp::placeholder,
.fmd-filter-input::placeholder,
.form-control::placeholder {
    color: #adb5bd;
    font-size: 13px;
}

/* Textarea */
textarea,
.form-control[rows] {
    height: auto !important;
    padding: 12px 14px !important;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    resize: vertical;
}
textarea:focus,
.form-control[rows]:focus {
    border-color: var(--fmd-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,215,0,.18) !important;
    outline: none !important;
}

/* ===================================================================
   BOOTSTRAP-SELECT OVERRIDE
   custom.js calls $('select').selectpicker() on every <select>.
   These rules make Bootstrap Select look identical to our native
   <select> style so the UX is consistent everywhere.
   =================================================================== */

.bootstrap-select { width: 100% !important; }

.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.btn-light,
.bootstrap-select > .dropdown-toggle.btn-default {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    border: 1.5px solid #dde1e7 !important;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 10px 38px 10px 13px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    color: #333 !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Placeholder (nothing selected) */
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
    color: #adb5bd !important;
}

/* Focus/active state */
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:active,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--fmd-primary) !important;
    box-shadow: 0 0 0 3px rgba(255,215,0,.18) !important;
    outline: none !important;
}

/* Hide bootstrap's own caret icon */
.bootstrap-select > .dropdown-toggle::after { display: none !important; }
.bootstrap-select .caret { display: none !important; }

/* The text label inside */
.bootstrap-select .filter-option { display: flex; align-items: center; height: 100%; }
.bootstrap-select .filter-option-inner-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dropdown menu */
.bootstrap-select .dropdown-menu {
    border: 1.5px solid #dde1e7;
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    padding: 6px !important;
    margin-top: 3px !important;
    min-width: 100%;
}

/* Each option row */
.bootstrap-select .dropdown-item {
    border-radius: 6px !important;
    font-size: 14px !important;
    padding: 8px 13px !important;
    color: #333 !important;
    transition: background .15s;
}
.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background: rgba(255,215,0,.18) !important;
    color: #1a1a1a !important;
}
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active,
.bootstrap-select .dropdown-item.selected {
    background: var(--fmd-primary) !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
}

/* Validation red border passthrough */
.is-invalid + .bootstrap-select > .dropdown-toggle,
select.is-invalid ~ .bootstrap-select > .dropdown-toggle {
    border-color: #dc3545 !important;
}

/* ===== UTILITY ===== */
.scroltop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 42px;
    height: 42px;
    background: var(--fmd-primary);
    color: var(--fmd-primary-text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.scroltop:hover { transform: translateY(-3px); }

/* ===================================================================
   GLOBAL MOBILE — fixes overflow, iOS zoom, and tap targets
   =================================================================== */

/* Prevent horizontal scroll on any page */
html, body { overflow-x: hidden; max-width: 100%; }

/* iOS: font-size < 16px triggers auto-zoom on focus — prevent it */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea,
    .fmd-inp,
    .fmd-filter-input,
    .fmd-filter-select,
    .form-control,
    .form-select { font-size: 16px !important; }
}

/* Minimum 44px tap targets for all interactive elements */
@media (max-width: 768px) {
    .btn,
    .fmd-cta-btn,
    .btn-submit,
    .fmd-submit-btn,
    .fmd-login-btn { min-height: 44px; }
}

/* ===================================================================
   HOMEPAGE MOBILE
   =================================================================== */
@media (max-width: 480px) {
    .fmd-slogan-section { padding: 50px 0 24px; }
    .fmd-slogan-section h2 { font-size: 28px; }
    .fmd-slogan-section p { font-size: 15px; }
    .fmd-services-section { padding: 40px 0 240px; }
    .fmd-buttons-container { bottom: -160px; gap: 10px; }
    .fmd-cta-btn { font-size: 15px; padding: 14px 28px; width: 90%; max-width: 300px; }
}

@media (max-width: 768px) {
    .fmd-section-title { font-size: 26px; margin-bottom: 30px; }
    .fmd-testimonials { padding: 60px 0; }
    .fmd-testimonial-card { min-width: 280px; }
    .fmd-faq { padding: 60px 0; }
}

/* ===================================================================
   MARKETPLACE MOBILE
   =================================================================== */
@media (max-width: 991px) {
    /* Sidebar becomes a top filter bar — unstick and display inline */
    .fmd-search-sidebar {
        position: static;
        margin-bottom: 24px;
    }
    .fmd-search-sidebar-body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .fmd-search-sidebar-body .fmd-filter-group { margin-bottom: 0; }
}

@media (max-width: 576px) {
    .fmd-search-sidebar-body { grid-template-columns: 1fr; }
}

/* Car cards: 2 per row on tablet, 1 on phone */
@media (max-width: 576px) {
    .fmd-car-card-img { height: 160px; }
}

/* ===================================================================
   PAGE HERO MOBILE
   =================================================================== */
@media (max-width: 480px) {
    .fmd-page-hero-content h1 { font-size: 26px; }
    .fmd-page-hero-content p { font-size: 15px; }
    .fmd-page-hero { min-height: 180px; }
    .fmd-page-hero-content { padding: 40px 16px; }
    /* Disable parallax on mobile — costly and buggy */
    .fmd-page-hero-bg { background-attachment: scroll; }
}

/* ===================================================================
   PROCESS STEPS MOBILE
   =================================================================== */
@media (max-width: 576px) {
    .fmd-process-section { padding: 50px 0; }
    .fmd-process-steps { grid-template-columns: 1fr; gap: 40px; }
}

/* ===================================================================
   INSPECTION PACKAGES MOBILE
   =================================================================== */
@media (max-width: 576px) {
    .fmd-inspection-packages { padding: 50px 0; }
}

/* ===================================================================
   CONTACT FORM MOBILE
   =================================================================== */
@media (max-width: 576px) {
    .fmd-form-side { padding: 20px 16px !important; }
    .fmd-contact-card { padding: 28px 20px; }
}

/* ===================================================================
   CAREERS MOBILE
   =================================================================== */
@media (max-width: 576px) {
    .fmd-position-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===================================================================
   FOOTER MOBILE
   =================================================================== */
@media (max-width: 480px) {
    .fmd-footer-logo-img { height: 60px; }
}

/* ===================================================================
   UTILITY MOBILE
   =================================================================== */
@media (max-width: 768px) {
    .scroltop { bottom: 16px; right: 16px; width: 38px; height: 38px; }
    /* Ensure containers don't overflow */
    .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ===================================================================
   PRIMARY BUTTON — approved pill style
   Use on all primary CTAs across the portal (Inspect, Search, Pay, etc.)
   =================================================================== */
.btn-fmd-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    background: var(--fmd-primary);
    color: #000;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    letter-spacing: .6px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4);
    transition: background .25s, color .25s, transform .2s, box-shadow .25s;
    white-space: nowrap;
}
.btn-fmd-primary:hover,
.btn-fmd-primary:focus {
    background: #000;
    color: var(--fmd-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    text-decoration: none;
}
.btn-fmd-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}

/* ===================================================================
   FLOATING BACK NAVIGATION
   Works on mobile web, desktop web, and PWA standalone mode
   =================================================================== */

/* Hidden in regular browser — shown only when installed as PWA (standalone mode) */
.fmd-float-nav {
    display: none;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .fmd-float-nav {
        position: fixed;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        display: flex;
    align-items: stretch;
    background: rgba(20, 20, 20, 0.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 215, 0, 0.20);
    border-radius: 50px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 9985;
    overflow: hidden;
        animation: fmd-nav-enter .45s cubic-bezier(.16, 1, .3, 1) both;
        transition: bottom .3s ease;
    }
}

@keyframes fmd-nav-enter {
    from { opacity: 0; transform: translateX(-50%) translateY(18px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* Base pill button */
.fmd-nav-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    color: #e8e8e8;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .12s ease;
    white-space: nowrap;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}
.fmd-nav-pill i { font-size: 14px; }

.fmd-nav-pill:hover {
    background: rgba(255, 215, 0, 0.10);
    color: #FFD700;
    text-decoration: none;
}
.fmd-nav-pill:active {
    transform: scale(.94);
    background: rgba(255, 215, 0, 0.18);
}

/* Back button */
.fmd-nav-back .fmd-nav-label { font-size: 12px; letter-spacing: .3px; }

/* Disabled state (nothing to go back to) */
.fmd-nav-disabled {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

/* Home button — gold, separated by subtle dividers */
.fmd-nav-home {
    color: #FFD700 !important;
    font-size: 16px;
    padding: 12px 22px;
    border-left:  1px solid rgba(255, 255, 255, 0.10);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.fmd-nav-home:hover { color: #FFD700 !important; }

/* Forward button — hidden until user navigates back */
.fmd-nav-fwd { display: none; }
.fmd-nav-fwd-visible { display: flex !important; }

/* Flash animation on swipe trigger */
@keyframes fmd-nav-flash {
    0%, 100% { background: transparent; color: #e8e8e8; }
    40%       { background: rgba(255, 215, 0, 0.28); color: #FFD700; }
}
.fmd-nav-flash { animation: fmd-nav-flash .28s ease forwards; }

/* Swipe-back edge indicator (left side of screen) */
.fmd-swipe-edge { display: none; }

@media (display-mode: standalone), (display-mode: fullscreen) {
    .fmd-swipe-edge {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(90deg, rgba(255, 215, 0, 0.85) 0%, transparent 100%);
        border-radius: 0 5px 5px 0;
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transition: opacity .12s ease;
    }
}

/* ── Desktop PWA: icon-only, smaller pill, anchored right ── */
@media (display-mode: standalone) and (min-width: 992px),
       (display-mode: fullscreen) and (min-width: 992px) {
    .fmd-float-nav {
        left: auto;
        right: 28px;
        bottom: 80px;
        transform: none;
        animation: fmd-nav-enter-desk .45s cubic-bezier(.16, 1, .3, 1) both;
    }
    @keyframes fmd-nav-enter-desk {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0);    }
    }
    .fmd-nav-back .fmd-nav-label { display: none; }
    .fmd-nav-pill  { padding: 10px 15px; }
    .fmd-nav-home  { padding: 10px 17px; font-size: 15px; }
    .fmd-nav-pill:hover { transform: none; }
}

/* ── Very small phones (PWA only) ── */
@media (display-mode: standalone) and (max-width: 380px),
       (display-mode: fullscreen) and (max-width: 380px) {
    .fmd-nav-pill  { padding: 11px 15px; }
    .fmd-nav-home  { padding: 11px 18px; }
    .fmd-nav-back .fmd-nav-label { font-size: 11px; }
}