/* ============================================================
   R34 — final cleanup overrides (kill sticky + neutralize body color)
   Highest specificity — loaded LAST in cascade
   ============================================================ */

/* === KILL ALL STICKY (except mobile-cta-bar fixed bottom + lightbox + chatra) === */
html body .car-side,
html body aside.car-side,
html body .car-pricing,
html body .car-pricing.dag-card,
html body .inventory-sidebar,
html body aside.inventory-sidebar,
html body .archive-sidebar,
html body .terms-sidebar,
html body .privacy-sidebar,
html body .refund-sidebar,
html body .terms-toc,
html body .privacy-toc,
html body .refund-toc,
html body nav.terms-toc,
html body nav.privacy-toc,
html body nav.refund-toc,
html body .site-header,
html body header.site-header,
html body .single-car .car-side,
html body .dag-car-single .car-side {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* === Body / global text color — soften the !important from site-ui.css === */
html body {
    color: var(--color-ink);
}

/* Override aggressive --ui-ink !important from site-ui.css base block
   Keep visual close enough to existing dark text */
html body,
html body p,
html body li,
html body span,
html body div,
html body section,
html body article,
html body main,
html body aside {
    color: inherit;
}

/* === Page-specific hero CTA actions — fix dark-on-dark === */

/* refund / privacy / terms — second button in actions group should be ghost */
.refund-hero__actions .dag-btn,
.privacy-hero__actions .dag-btn,
.terms-hero__actions .dag-btn,
.refund-cta__actions .dag-btn,
.privacy-cta__actions .dag-btn,
.terms-cta__actions .dag-btn,
.contact-hero__actions .dag-btn {
    text-decoration: none;
}

.refund-hero__actions .dag-btn--primary,
.privacy-hero__actions .dag-btn--primary,
.terms-hero__actions .dag-btn--primary,
.refund-cta__actions .dag-btn--primary,
.privacy-cta__actions .dag-btn--primary,
.terms-cta__actions .dag-btn--primary,
.contact-hero__actions .dag-btn--primary {
    background: var(--color-primary);
    color: var(--color-paper);
    border: 1px solid var(--color-primary);
}

.refund-hero__actions .dag-btn--ghost,
.privacy-hero__actions .dag-btn--ghost,
.terms-hero__actions .dag-btn--ghost,
.refund-cta__actions .dag-btn--ghost,
.privacy-cta__actions .dag-btn--ghost,
.terms-cta__actions .dag-btn--ghost,
.contact-hero__actions .dag-btn--ghost {
    background: var(--color-paper);
    color: var(--color-ink);
    border: 1px solid var(--color-border-2);
}

.refund-hero__actions .dag-btn--ghost:hover,
.privacy-hero__actions .dag-btn--ghost:hover,
.terms-hero__actions .dag-btn--ghost:hover,
.refund-cta__actions .dag-btn--ghost:hover,
.privacy-cta__actions .dag-btn--ghost:hover,
.terms-cta__actions .dag-btn--ghost:hover {
    background: var(--color-ink);
    color: var(--color-paper);
    border-color: var(--color-ink);
}

/* CTA section "Need help fast?" / "Open Contact" callouts */
.refund-cta,
.privacy-cta,
.terms-cta {
    background: var(--color-surface);
    color: var(--color-text);
    padding: var(--space-6);
    border-left: 4px solid var(--color-primary);
    margin-top: var(--space-6);
}
.refund-cta__title,
.privacy-cta__title,
.terms-cta__title,
.refund-cta h2,
.refund-cta h3,
.privacy-cta h2,
.privacy-cta h3,
.terms-cta h2,
.terms-cta h3 {
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}
.refund-cta p,
.privacy-cta p,
.terms-cta p {
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
    line-height: var(--lh-relaxed);
}
.refund-cta__actions,
.privacy-cta__actions,
.terms-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
}

/* === border-radius: 0 — establish square aesthetic everywhere === */
html body * {
    /* don't reset everything here — only for specific elements */
}
html body .dag-card,
html body .inv-card,
html body .car-card,
html body .home-deals__card,
html body .nt-similar__card,
html body .team-card,
html body .dag-btn,
html body .btn,
html body .site-burger,
html body .site-offcanvas__close,
html body .car-lightbox__tool,
html body .car-lightbox__close,
html body .car-lightbox__nav,
html body .car-lightbox__thumb-btn,
html body .car-lightbox__dialog,
html body .footer-legal a,
html body .home-deals__nav,
html body .home-deals__dots button,
html body .nt-similar__link,
html body img,
html body input,
html body textarea,
html body select,
html body button {
    border-radius: 0;
}

/* ============================================================
   R35 — escalate sticky kill with !important to beat 
   site-ui L4762/L464 sticky !important rules
   ============================================================ */

html body .car-side,
html body aside.car-side,
html body .car-pricing,
html body .car-pricing.dag-card,
html body .inventory-sidebar,
html body aside.inventory-sidebar,
html body .archive-sidebar,
html body .terms-sidebar,
html body .privacy-sidebar,
html body .refund-sidebar,
html body .terms-toc,
html body .privacy-toc,
html body .refund-toc,
html body nav.terms-toc,
html body nav.privacy-toc,
html body nav.refund-toc,
html body .single-car .car-side,
html body .dag-car-single .car-side {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Site-header — keep static (no sticky) */
html body header.site-header,
html body .site-header {
    position: static !important;
    top: auto !important;
}

/* ============================================================
   R37 — batch fix: numbered circles + vertical text + duplicate content kill + map fallback
   ============================================================ */

/* === FIX 2: numbered circles overlap with heading text === */
/* refund/privacy/terms section headings have ::before number that overlaps text */
html body .refund-section,
html body .privacy-section,
html body .terms-section,
html body section.refund-section,
html body section.privacy-section,
html body section.terms-section {
    position: relative;
    padding-left: 56px;
}

html body .refund-section h2,
html body .privacy-section h2,
html body .terms-section h2,
html body .refund-section h3,
html body .privacy-section h3,
html body .terms-section h3 {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

html body .refund-section::before,
html body .privacy-section::before,
html body .terms-section::before {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-primary) !important;
    color: var(--color-paper) !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

@media (max-width: 600px) {
    html body .refund-section,
    html body .privacy-section,
    html body .terms-section {
        padding-left: 44px;
    }
    html body .refund-section::before,
    html body .privacy-section::before,
    html body .terms-section::before {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

/* === FIX 3: vertical text on refund-cta / similar callouts === */
/* The "Want the fastest resolution?" buttons rendered as 1ch wide column */
html body .refund-cta,
html body .privacy-cta,
html body .terms-cta {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}
html body .refund-cta__actions,
html body .privacy-cta__actions,
html body .terms-cta__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
html body .refund-cta__actions .dag-btn,
html body .privacy-cta__actions .dag-btn,
html body .terms-cta__actions .dag-btn {
    width: auto !important;
    min-width: 140px !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Same protection for ANY .dag-btn inside actions wrappers */
html body .hero__actions .dag-btn,
html body .contact-hero__actions .dag-btn,
html body .refund-hero__actions .dag-btn,
html body .privacy-hero__actions .dag-btn,
html body .terms-hero__actions .dag-btn {
    width: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
}

/* === FIX 4: Hide duplicate "Additional details" / the_content() block === */
/* On legal pages, the_content() renders a duplicate. Page templates have markup. */
html body .page-template-page-privacy-policy .entry-content > .additional-details,
html body .page-template-page-terms-conditions .entry-content > .additional-details,
html body .privacy-additional-details,
html body .terms-additional-details,
html body .legal-additional-details {
    display: none !important;
}

/* === FIX 5: Map placeholder on contact — show fallback message === */
html body .find-us:not(:has(iframe)),
html body .contact-map:not(:has(iframe)),
html body .map-embed:not(:has(iframe)) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    min-height: 200px !important;
    max-height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}

html body .find-us:not(:has(iframe))::after,
html body .contact-map:not(:has(iframe))::after,
html body .map-embed:not(:has(iframe))::after {
    content: 'Open in Google Maps for directions';
    color: var(--color-muted);
    font-size: var(--fs-sm);
    text-align: center;
    padding: 20px;
}

/* ============================================================
   R40 — fx-reveal animation safety
   Force opacity:1 on all .fx-reveal elements regardless of animation state.
   This fixes ghost-text top-deals cards and any other invisible content
   caused by animation never completing or prefers-reduced-motion blocking.
   ============================================================ */

html body .fx-reveal,
html body a.fx-reveal,
html body .home-deals__card.fx-reveal,
html body .home-brands__item.fx-reveal,
html body .hero__inner.fx-reveal,
html body .hero__inner--left.fx-reveal,
html body .inv-card.fx-reveal,
html body .car-card.fx-reveal,
html body .nt-similar__card.fx-reveal,
html body .top-deals__card.fx-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    animation-fill-mode: both !important;
}

/* If fxFade animation defined as fade-in, make sure it ends visible */
@keyframes fxFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* prefers-reduced-motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
    html body .fx-reveal,
    html body *.fx-reveal {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Top deals overlay must be readable — ensure background tint */
html body .home-deals__overlay {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 15, 16, 0.85) 100%);
    color: var(--color-paper);
    padding: var(--space-3);
    z-index: 2;
}

html body .home-deals__title {
    color: var(--color-paper) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

html body .home-deals__price {
    color: var(--color-paper) !important;
    font-weight: 700;
    font-size: var(--fs-lg);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

html body .home-deals__meta,
html body .home-deals__details {
    color: rgba(255,255,255,0.85) !important;
}

html body .home-deals__media {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

html body .home-deals__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important;
}
