/* Global brand color override for MyAutoPartZone */
:root {
    --brand-color: #c62828;         /* red */
    --brand-color-light: #e53935;   /* red light */
    --brand-dark: #1f2329;          /* dark gray */
    --brand-white: #ffffff;         /* white */
    --brand-offwhite: #ffffff;      /* odd section */
    --brand-gray: #dfdfdf;          /* even section (flat gray) */
    --brand-card-gray: #dfdfdf;     /* card surface on white sections */
    --brand-text-strong: #10284a;
    --brand-text-soft: rgba(8, 50, 74, 0.72);
    --brand-border-soft: rgba(31, 35, 41, 0.08);
    --brand-shadow-soft: 0 10px 26px rgba(18, 40, 74, 0.10);
    --brand-shadow-hover: 0 18px 38px rgba(18, 40, 74, 0.14);
    --brand-icon-grad: var(--brand-color);
    --brand-icon-shadow: 0 8px 16px rgba(198, 40, 40, 0.24);
    --brand-card-white: #ffffff;
    --brand-part-section-bg: #c62828;
    --brand-part-title: #ffffff;
    --brand-part-subtext: rgba(255, 255, 255, 0.9);

    --color-primary: var(--brand-color);
    --color-secondary: var(--brand-color-light);
    --color-heading: var(--brand-dark);
    --color-body: #2f3640;
    --color-white: var(--brand-white);

    --primary-opacity: rgba(198, 40, 40, 0.14);
    --secondary-opacity: rgba(229, 57, 53, 0.14);

    --xap-accent: var(--brand-color);
    --usp-brand: var(--brand-color);
    --usp-brand-rgb: 198, 40, 40;
    --xap-footer-accent: var(--brand-color);
    --xap-shadow-soft: 0 10px 24px rgba(31, 35, 41, 0.10);
    --xap-shadow-mid: 0 18px 40px rgba(31, 35, 41, 0.14);
    --xap-surface-card: #ffffff;
}

.theme-gradient {
    background: linear-gradient(90deg, var(--brand-color), var(--brand-color-light)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--brand-color) !important;
}

.xap-gradient-text {
    background: linear-gradient(90deg, var(--brand-color), var(--brand-color-light)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--brand-color) !important;
}

.xap-bg-primary-soft {
    background: var(--brand-gray) !important;
}

/* Keep top intro blocks visible on brand part pages */
.xap-intro {
    opacity: 1 !important;
    transform: none !important;
}

.xap-accent,
.xap-brand-text,
.comm-usp .comm-usp-h,
.xap-intro .xap-feature .feature-title {
    color: var(--brand-color) !important;
}

.comm-usp .comm-usp-ic,
.xap-intro .xap-feature .icon {
    background: var(--brand-icon-grad) !important;
}

/* Global section alternation: odd off-white, even gray */
body > .xap-section-gap:nth-of-type(odd),
body > .xap-service-area:nth-of-type(odd),
body > .xap-about-area:nth-of-type(odd),
body > .xap-xap-blog-area:nth-of-type(odd) {
    background-color: var(--brand-offwhite) !important;
}

body > .xap-section-gap:nth-of-type(even),
body > .xap-service-area:nth-of-type(even),
body > .xap-about-area:nth-of-type(even),
body > .xap-xap-blog-area:nth-of-type(even) {
    background-color: var(--brand-gray) !important;
}

/* Default card surface */
.xap-feature.feature-style-1,
.xap-trans-usp-card,
.xap-step__card,
.comm-usp .comm-usp-card,
.xap-card.variation-02 {
    background: var(--brand-card-white) !important;
}

/* Unified text + section look */
body {
    color: var(--color-body) !important;
    background: var(--brand-offwhite) !important;
}

html,
body {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.title,
[class*="title"] {
    color: var(--brand-dark) !important;
}

/* Keep hero text readable on dark banner backgrounds */
.xap-banner-11 .section-title .subtitle,
.xap-banner-11 .banner-title,
.xap-banner-11 .description,
.xap-banner-11 .description.has-medium-font-size {
    color: #f3f7ff !important;
}

.xap-banner-11 .banner-title .xap-gradient-text {
    background: linear-gradient(90deg, var(--brand-color-light) 0%, var(--brand-color) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--brand-color) !important;
}

/* Home hero (index.php): keep first heading line visible on dark image */
.rbt-banner-5 .inner .title {
    color: #ffffff !important;
}

/* Home hero pointer icons: relevant FA icons in brand red */
.rbt-banner-5 .plan-offer-list li i {
    color: var(--brand-color-light) !important;
    background: rgba(229, 57, 53, 0.16) !important;
}

/* Footer must keep light text on dark background */
.xap-footer h1,
.xap-footer h2,
.xap-footer h3,
.xap-footer h4,
.xap-footer h5,
.xap-footer h6,
.xap-footer .title,
.xap-footer [class*="title"] {
    color: #eaf0fb !important;
}

.xap-footer p,
.xap-footer span,
.xap-footer a,
.xap-footer li,
.xap-footer .xap-footer-body,
.xap-footer .xap-footer-brand-text,
.xap-footer .xap-footer-note,
.xap-footer .xap-footer-copy {
    color: #cfd8ea !important;
}

.xap-footer .xap-footer-chip,
.xap-footer .xap-footer-contact-label,
.xap-footer .xap-footer-link-icon {
    color: var(--brand-color-light) !important;
}

/* Unified CTA/button palette */
.xap-btn,
.xap-free-trial-btn,
.comm-contact-form__btn {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}

.xap-btn:hover,
.xap-free-trial-btn:hover,
.comm-contact-form__btn:hover {
    background: #b71c1c !important;
    border-color: #b71c1c !important;
}

/* Hero + feature cards: consistent surface and depth */
.xap-hero-split .xap-feature.feature-style-1,
.xap-trans-usp-card,
.xap-step__card,
.comm-usp .comm-usp-card,
.xap-card.variation-02,
.xap-intro .xap-feature {
    background: var(--xap-surface-card) !important;
    box-shadow: var(--xap-shadow-soft) !important;
    border: 1px solid rgba(31, 35, 41, 0.08) !important;
}

.xap-hero-split .xap-feature.feature-style-1:hover,
.xap-trans-usp-card:hover,
.xap-step__card:hover,
.comm-usp .comm-usp-card:hover,
.xap-intro .xap-feature:hover {
    box-shadow: var(--xap-shadow-mid) !important;
}

/* Icon badges: same shape, same red gradient */
.xap-step__icon,
.xap-trans-usp-card__icon,
.xap-hero-split .xap-feature .icon,
.comm-usp .comm-usp-ic,
.xap-intro .xap-feature .icon {
    background: var(--brand-icon-grad) !important;
    box-shadow: 0 8px 16px rgba(198, 40, 40, 0.24) !important;
}

/* Icon size consistency: match "How It Works" across USP/Intro/About */
.xap-step__icon,
.xap-trans-usp-card__icon,
.xap-hero-split .xap-feature .icon,
.comm-usp .comm-usp-ic,
.xap-intro .xap-feature .icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.xap-step__icon i,
.xap-trans-usp-card__icon i,
.xap-hero-split .xap-feature .icon i,
.comm-usp .comm-usp-ic i,
.xap-intro .xap-feature .icon i {
    font-size: 18px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

/* Accent headings inside cards */
.xap-hero-split .xap-feature .feature-title,
.xap-trans-usp-card h6,
.xap-step__title,
.comm-usp .comm-usp-h,
.xap-intro .xap-feature .feature-title {
    color: var(--brand-color) !important;
}

/* Reusable split-section typography */
.xap-split-heading,
.xap-trans-hero__heading h4,
.xap-step .section-title .title,
.xap-step .section-title .description {
    color: var(--brand-dark) !important;
}

/* Section alternation tuning */
.xap-about-area,
.xap-xap-blog-area,
.xap-service-area,
.xap-section-gap {
    background-color: var(--brand-offwhite);
}

.xap-about-area:nth-of-type(even),
.xap-xap-blog-area:nth-of-type(even),
.xap-service-area:nth-of-type(even),
.xap-section-gap:nth-of-type(even) {
    background-color: var(--brand-gray) !important;
}

/* Card inversion for consistent odd/even visual rhythm
   odd section (white bg) -> gray cards
   even section (gray bg) -> white cards */
.xap-about-area .xap-step__card,
.xap-about-area .xap-trans-usp-card,
.xap-about-area .comm-usp .comm-usp-card,
.xap-about-area .xap-card.variation-02,
.xap-about-area .xap-feature.feature-style-1,
.xap-service-area .xap-step__card,
.xap-service-area .xap-trans-usp-card,
.xap-service-area .comm-usp .comm-usp-card,
.xap-service-area .xap-card.variation-02,
.xap-service-area .xap-feature.feature-style-1,
.xap-section-gap .xap-step__card,
.xap-section-gap .xap-trans-usp-card,
.xap-section-gap .comm-usp .comm-usp-card,
.xap-section-gap .xap-card.variation-02,
.xap-section-gap .xap-feature.feature-style-1 {
    background: var(--brand-card-white) !important;
}

.xap-about-area:nth-of-type(odd) .xap-step__card,
.xap-about-area:nth-of-type(odd) .xap-trans-usp-card,
.xap-about-area:nth-of-type(odd) .comm-usp .comm-usp-card,
.xap-about-area:nth-of-type(odd) .xap-card.variation-02,
.xap-about-area:nth-of-type(odd) .xap-feature.feature-style-1,
.xap-service-area:nth-of-type(odd) .xap-step__card,
.xap-service-area:nth-of-type(odd) .xap-trans-usp-card,
.xap-service-area:nth-of-type(odd) .comm-usp .comm-usp-card,
.xap-service-area:nth-of-type(odd) .xap-card.variation-02,
.xap-service-area:nth-of-type(odd) .xap-feature.feature-style-1,
.xap-section-gap:nth-of-type(odd) .xap-step__card,
.xap-section-gap:nth-of-type(odd) .xap-trans-usp-card,
.xap-section-gap:nth-of-type(odd) .comm-usp .comm-usp-card,
.xap-section-gap:nth-of-type(odd) .xap-card.variation-02,
.xap-section-gap:nth-of-type(odd) .xap-feature.feature-style-1 {
    background: var(--brand-card-gray) !important;
}

/* Review section card inversion follows same odd/even pattern */
.xap-review .xap-testimonial-box .inner {
    background: var(--brand-card-white) !important;
}

.xap-section-gap:nth-of-type(odd) .xap-review .xap-testimonial-box .inner,
.xap-about-area:nth-of-type(odd) .xap-review .xap-testimonial-box .inner,
.xap-service-area:nth-of-type(odd) .xap-review .xap-testimonial-box .inner {
    background: var(--brand-card-gray) !important;
}

/* Force dark blocks to stay dark (prevents alternation override) */
.bg-color-darker {
    background-color: #132847 !important;
}

/* Ensure readability in brand logo section on gray/off-white backgrounds */
.xap-brand-section .xap-brand-title,
.xap-brand-section .section-title .title {
    color: #f3f7ff !important;
}

.xap-brand-section .xap-brand-sub,
.xap-brand-section .section-title p {
    color: #d6e0f2 !important;
}

/* Split right feature box: restore light-coral card look */
.xap-split-form.xap-bg-primary-soft {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Car-part split panel: keep only form, no extra wrapper spacing */
.xap-split-form .comm-contact-section {
    padding: 0 !important;
}

.xap-split-form .comm-contact-section__wrap {
    justify-content: stretch !important;
}

.xap-split-form .comm-contact-section__card {
    max-width: 100% !important;
}

/* Ensure top parts heading/subtext stay readable */
.top-parts-header-row .section-title .title {
    color: var(--brand-part-title) !important;
}

.top-parts-header-row .section-title .description {
    color: var(--brand-part-subtext) !important;
}

/* Top parts section uses flat gray background and matching text */
.xap-top-parts-section {
    background: var(--brand-part-section-bg) !important;
}

body > .xap-top-parts-section.xap-section-gap,
body > .xap-top-parts-section.xap-xap-blog-area,
body > .xap-xap-blog-area.xap-top-parts-section {
    background-color: var(--brand-part-section-bg) !important;
}

.xap-top-parts-section .top-parts-header-row .section-title .title {
    color: var(--brand-part-title) !important;
}

.xap-top-parts-section .top-parts-header-row .section-title .description {
    color: var(--brand-part-subtext) !important;
}

.xap-top-parts-section .top-parts-header-row .section-title .title .xap-gradient-text,
.xap-top-parts-section .top-parts-header-row .section-title .title .rbt-gradient-text {
    -webkit-text-fill-color: #111111 !important;
    color: #111111 !important;
    background: none !important;
}

/* How It Works now follows global section/card inversion */
.xap-step .xap-step__card {
    border: 1px solid rgba(31, 35, 41, 0.08) !important;
}

/* Transmission hero: sitewide reusable xap section */
.xap-trans-hero {
    padding: clamp(36px, 4vw, 56px) 0;
}

.xap-trans-hero .xap-trans-hero__row {
    align-items: stretch;
    --bs-gutter-x: clamp(22px, 2.4vw, 36px);
    --bs-gutter-y: 16px;
}

.xap-trans-hero__media-col,
.xap-trans-hero__content-col {
    display: flex;
}

.xap-trans-hero__media-wrap,
.xap-trans-hero__content-wrap {
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) {
    .xap-trans-hero__media-col {
        width: 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }

    .xap-trans-hero__content-col {
        width: 60%;
        flex: 0 0 60%;
        max-width: 60%;
    }
}

.xap-trans-hero__media-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: 0 18px 44px rgba(18, 40, 74, 0.16);
    min-height: 560px;
}

.xap-trans-hero__media-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xap-trans-hero__media-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 37, 71, 0.42) 0%, rgba(15, 37, 71, 0.08) 42%, rgba(15, 37, 71, 0.26) 100%);
    pointer-events: none;
}

.xap-trans-hero__content-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xap-trans-hero__heading .title {
    margin-bottom: 6px;
    line-height: 1.14;
}

.xap-trans-hero__heading h4 {
    margin-top: 8px;
    margin-bottom: 0;
    font-weight: 700;
    color: #10284a;
}

.xap-trans-hero__desc {
    margin-top: 14px;
    margin-bottom: 0;
}

.xap-trans-usp-list {
    margin-top: 20px;
    display: grid;
    gap: 12px;
}

.xap-trans-usp-card {
    background: #ffffff;
    border: 0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 10px 24px rgba(18, 40, 74, 0.1);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.xap-trans-usp-card__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    background: var(--brand-color);
    box-shadow: 0 8px 16px rgba(198, 40, 40, 0.26);
}

.xap-trans-usp-card h6 {
    margin: 0 0 4px;
    color: var(--brand-color);
    font-weight: 400;
    font-size: 24px;
}

.xap-trans-usp-card p {
    margin: 0;
    line-height: 1.48;
}

.xap-trans-hero__cta {
    margin-top: 18px;
}

@media (max-width: 991.98px) {
    .xap-trans-hero__media-wrap {
        min-height: 380px;
    }
}

@media (max-width: 575.98px) {
    .xap-trans-hero__media-wrap {
        min-height: 280px;
    }

    .xap-trans-usp-card {
        padding: 12px 12px;
    }

    .xap-trans-usp-card h6 {
        font-size: 17px;
    }

    .xap-trans-usp-card p {
        font-size: 14px;
    }
}