/* ═══════════════════════════════════════════
   TRUCKMARKET — APPLE POLISH SYSTEM
   The details nobody asks for. Everyone notices.
   ═══════════════════════════════════════════ */

/* ─── Foundation ─── */
html { scroll-behavior: smooth; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Text selection — brand red tint */
::selection { background: rgba(212, 32, 48, 0.15); color: #1d1d1f; }

/* ─── Kill browser autofill blue tint globally ─── */
/* Nuclear specificity to override Motors parent theme */
/* ONLY targets form inputs — NOT links or buttons */
html body input:not([type="submit"]):not([type="button"]):not([type="reset"]),
html body textarea,
html body select,
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body input[type="url"],
html body input[type="password"],
html body .stm_theme_wrapper input:not([type="submit"]):not([type="button"]),
html body .stm_theme_wrapper textarea,
html body .stm_theme_wrapper select,
html body #wrapper input:not([type="submit"]):not([type="button"]),
html body #wrapper textarea,
html body #wrapper select,
.tm-pg input:not([type="submit"]):not([type="button"]),
.tm-pg textarea,
.tm-pg select,
.tm-inv input:not([type="submit"]):not([type="button"]),
.tm-inv textarea,
.tm-inv select,
.tmi-search {
    background-color: #fff !important;
    color: #1d1d1f !important;
    -webkit-text-fill-color: #1d1d1f !important;
    caret-color: #1d1d1f !important;
}
html body input::placeholder,
html body textarea::placeholder,
html body .stm_theme_wrapper input::placeholder,
html body #wrapper input::placeholder,
.tm-pg input::placeholder,
.tm-inv input::placeholder,
.tmi-search::placeholder {
    color: #86868b !important;
    -webkit-text-fill-color: #86868b !important;
    opacity: 1 !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #1d1d1f !important;
    background-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}
/* Protect button/link text from input overrides */
.tmi-btn-red, .tmi-btn-dark, .tmi-btn-outline,
a.tmi-btn-red, a.tmi-btn-dark, a.tmi-btn-outline {
    -webkit-text-fill-color: inherit !important;
}

/* ─── Focus ring — Apple blue for keyboard navigation ─── */
*:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* ════════════════════════════════
   SCROLL REVEAL SYSTEM
   ════════════════════════════════ */
.tm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children — cascade like falling cards */
.tm-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.00s; }
.tm-reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.07s; }
.tm-reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.14s; }
.tm-reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.21s; }
.tm-reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.28s; }
.tm-reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.35s; }
.tm-reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════
   HEADER
   ════════════════════════════════ */
.tm-header {
    transition: box-shadow 0.4s ease, background 0.4s ease;
}
.tm-header.scrolled {
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.4);
}
.tm-header-nav-left a,
.tm-header-nav-right a {
    transition: color 0.2s ease;
    position: relative;
}
/* Underline grows on hover — like apple.com nav */
.tm-header-nav-left a::after,
.tm-header-nav-right a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.5);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-header-nav-left a:hover::after,
.tm-header-nav-right a:hover::after {
    transform: scaleX(1);
}
.tm-header-center {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-header-center:hover {
    transform: scale(1.03);
}

/* ════════════════════════════════
   HOMEPAGE HERO
   ════════════════════════════════ */
.tm-hero-bg {
    animation: tm-ken-burns 25s ease-in-out infinite alternate;
}
@keyframes tm-ken-burns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.06) translate(-0.5%, -0.5%); }
}
.tm-hero-content h1 {
    animation: tm-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.tm-hero-content p {
    animation: tm-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.tm-hero-content .tm-hero-btn {
    animation: tm-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
@keyframes tm-hero-in {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero button — lift + glow */
.tm-hero-btn {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tm-hero-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(212, 32, 48, 0.45) !important;
}
.tm-hero-btn:active {
    transform: translateY(0) scale(0.97) !important;
    transition-duration: 0.1s !important;
}

/* ════════════════════════════════
   HOMEPAGE CARDS
   ════════════════════════════════ */
.tm-card {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tm-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}
.tm-card:active {
    transform: translateY(-2px) scale(0.985) !important;
    transition-duration: 0.12s !important;
}
.tm-card-photo img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-card:hover .tm-card-photo img {
    transform: scale(1.05);
}

/* "Details →" slides on card hover */
.tm-card .tm-details,
.tmi-card .tmi-details {
    transition: letter-spacing 0.3s ease, color 0.2s ease;
}
.tm-card:hover .tm-details,
.tmi-card:hover .tmi-details {
    letter-spacing: 0.5px;
    color: #0071e3;
}

/* Just Arrived */
.tm-recent-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease !important;
}
.tm-recent-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.14) !important;
}
.tm-recent-card img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-recent-card:hover img {
    transform: scale(1.06);
}

/* Scroll rows — momentum scrolling */
.tm-scroll-row {
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 24px;
}

/* ════════════════════════════════
   NAV BAR (sticky category pills + maker logos)
   ════════════════════════════════ */
.tm-cat-pill {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tm-cat-pill:hover {
    background: #f0f0f2 !important;
    border-color: #c7c7cc !important;
    transform: translateY(-1px);
}
.tm-cat-pill:active {
    transform: scale(0.95) !important;
    transition-duration: 0.08s !important;
}

/* ════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════ */
.tm-testi-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}
.tm-testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.07);
}
/* Stars spread on hover */
.tm-testi-card .tm-testi-stars {
    transition: letter-spacing 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-testi-card:hover .tm-testi-stars {
    letter-spacing: 4px;
}

/* ════════════════════════════════
   CTA SECTIONS + BUTTONS
   ════════════════════════════════ */
.tm-sell-cta .tm-btn-red,
.tm-sell-cta .tm-btn-ghost {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-sell-cta .tm-btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212, 32, 48, 0.4);
}
.tm-sell-cta .tm-btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}
.tm-shop-all-btn {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tm-shop-all-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18) !important;
}
.tm-shop-all-btn:active {
    transform: translateY(0) scale(0.97) !important;
    transition-duration: 0.1s !important;
}
a.tm-btn-red:hover,
a.tm-hero-btn:hover,
a.tm-shop-all-btn:hover,
.tm-sell-cta a:hover,
.tm-footer-cta a:hover { color: #fff; text-decoration: none; }

/* ════════════════════════════════
   SINGLE TRUCK PAGE
   ════════════════════════════════ */
body.single-trucks .tm-hero-img {
    transition: opacity 0.35s ease !important;
}
body.single-trucks .tm-thumb {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    border-radius: 8px;
}
body.single-trucks .tm-thumb:hover {
    opacity: 0.8 !important;
    transform: scale(1.06) !important;
}
body.single-trucks .tm-info-section {
    animation: tm-hero-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Spec rows: highlight strip on hover */
body.single-trucks .tm-spec-row {
    transition: background 0.2s ease, padding-left 0.15s ease;
    border-radius: 6px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}
body.single-trucks .tm-spec-row:hover {
    background: #f5f5f7;
}

/* Similar trucks — unified with polish.css */
body.single-trucks a.tm-scard {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease !important;
}
body.single-trucks a.tm-scard:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.1) !important;
}
body.single-trucks .tm-scard-img img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.single-trucks a.tm-scard:hover .tm-scard-img img {
    transform: scale(1.05);
}

/* Lightbox: frosted glass backdrop */
body.single-trucks .tm-lightbox {
    transition: opacity 0.3s ease !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Sticky CTA bar */
body.single-trucks .tm-sticky-cta {
    box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 0 -8px 32px rgba(0,0,0,0.08) !important;
}
body.single-trucks .tm-sticky-cta a:active {
    transform: scale(0.95) !important;
}
body.single-trucks .tm-mob-top {
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* ════════════════════════════════
   INVENTORY PAGE
   ════════════════════════════════ */
@keyframes tmi-card-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tmi-card.tmi-animate {
    animation: tmi-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tmi-card .tmi-photo-strip img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.tmi-card:hover .tmi-photo-strip img {
    transform: scale(1.04);
}
.tmi-filter-pill {
    transition: color 0.15s ease !important;
}
.tmi-filter-pill:active { opacity: 0.7; }
.tmi-search:focus {
    box-shadow: 0 0 0 4px rgba(0,113,227,0.1), 0 2px 8px rgba(0,113,227,0.05) !important;
}
.tmi-sort { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tmi-sort:focus { box-shadow: 0 0 0 3px rgba(0,113,227,0.1); }

/* ════════════════════════════════
   NEW PAGES (Contact, About, Sell, Glider)
   ════════════════════════════════ */

/* Hero text entrance */
.tm-pg-hero h1,
.tm-about-hero h1,
.tm-sell-hero h1,
.tm-gk-hero h1 {
    animation: tm-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.tm-pg-hero p,
.tm-about-hero p,
.tm-sell-hero p,
.tm-gk-hero p {
    animation: tm-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

/* Form focus glow */
.tm-form-field input:focus,
.tm-form-field textarea:focus,
.tm-sell-field input:focus,
.tm-sell-field textarea:focus {
    box-shadow: 0 0 0 4px rgba(0,113,227,0.08), 0 2px 8px rgba(0,113,227,0.04) !important;
}

/* Info/value cards */
.tm-c-card,
.tm-value-card,
.tm-gk-benefit,
.tm-gk-part,
.tm-sell-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}
.tm-c-card:hover,
.tm-value-card:hover,
.tm-gk-benefit:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.07);
}

/* About stat blocks */
.tm-stat-block { transition: background 0.3s ease; }
.tm-stat-block:hover { background: #f9f9fb; }

/* Sell hero phone — red glow halo */
.tm-sell-hero-phone {
    position: relative;
    overflow: visible;
}
.tm-sell-hero-phone::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: rgba(212,32,48,0.35);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(14px);
}
.tm-sell-hero-phone:hover::after {
    opacity: 1;
}

/* ════════════════════════════════
   FOOTER
   ════════════════════════════════ */

/* Links indent on hover */
.tm-footer-col a {
    transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.tm-footer-col a:hover {
    padding-left: 4px !important;
}

/* Footer logo glow */
.tm-footer-brand img {
    transition: filter 0.4s ease;
}
.tm-footer-brand img:hover {
    filter: brightness(1.2);
}

/* ════════════════════════════════
   PERFORMANCE
   ════════════════════════════════ */
.tm-header,
body.single-trucks .tm-mob-top,
body.single-trucks .tm-sticky-cta {
    backface-visibility: hidden;
}
.tm-scroll-row {
    contain: layout style;
}
.tmi-photo-strip img,
.tm-card-photo img {
    backface-visibility: hidden;
}

/* ════════════════════════════════
   MOBILE — Touch Feedback
   ════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Shrink on tap — feels physical */
    .tm-card:active,
    .tm-recent-card:active,
    .tmi-card:active,
    .tm-value-card:active,
    .tm-c-card:active {
        transform: scale(0.97) !important;
        transition-duration: 0.08s !important;
    }

    /* Kill desktop hover effects on mobile */
    .tm-card:hover,
    .tm-recent-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .tm-card:hover .tm-card-photo img,
    .tm-recent-card:hover img {
        transform: none;
    }
    .tm-testi-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ════════════════════════════════
   PRINT — for truck detail pages
   ════════════════════════════════ */
@media print {
    .tm-header, .tm-site-footer, .tm-sticky-cta,
    .tm-mob-top, .tm-nav-bar,
    .tm-footer-cta, .tm-sell-cta, .tmi-search-wrap,
    .tmi-toolbar, .tmi-drawer, .tmi-drawer-overlay { display: none !important; }
    body { background: #fff !important; }
    .tm-truck { padding: 0 !important; }
    .tm-hero-wrap { max-height: 400px; overflow: hidden; }
    * { box-shadow: none !important; text-shadow: none !important; }
}

/* ════════════════════════════════
   PAGE TRANSITIONS — App-like feel
   ════════════════════════════════ */
@keyframes tmPageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
body {
    animation: tmPageIn 0.2s ease-out;
}
/* Intercept link clicks for fade-out */
body.tm-page-exit {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

/* ════════════════════════════════
   LOADING INDICATOR — Thin top bar
   ════════════════════════════════ */
.tm-loading-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d42030, #0071e3, #d42030);
    background-size: 200% 100%;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.2s;
    animation: tmLoadSlide 1.2s ease-in-out infinite;
}
.tm-loading-bar.active { opacity: 1; }
@keyframes tmLoadSlide {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ════════════════════════════════
   MAKE LOGOS — Bounce on tap
   ════════════════════════════════ */
.tm-make-logo {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}
.tm-make-logo:active {
    transform: scale(0.88) !important;
    transition-duration: 0.1s !important;
}
/* Bounce back is handled by the 0.35s spring on release */
@media (hover: none) {
    .tm-make-logo:active {
        transform: scale(0.88) !important;
    }
}

/* ════════════════════════════════
   SINGLE TRUCK — Price entrance
   ════════════════════════════════ */
@keyframes tmPriceIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
body.single-trucks .tm-info-price {
    animation: tmPriceIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
body.single-trucks .tm-info-title {
    animation: tmPriceIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
body.single-trucks .tm-pill-blue,
body.single-trucks .tm-pill-red {
    animation: tmPriceIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
body.single-trucks .tm-start-me-up {
    animation: tmPriceIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* ════════════════════════════════
   SINGLE TRUCK — Thumbnail glow ring
   ════════════════════════════════ */
body.single-trucks .tm-thumb {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.single-trucks .tm-thumb.active {
    border-color: #d42030 !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 3px rgba(212, 32, 48, 0.25) !important;
}

/* ════════════════════════════════
   LANDING PAGE — H2 reveal + card stagger
   ════════════════════════════════ */
.tm-land-content h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-land-content h2.visible {
    opacity: 1;
    transform: translateY(0);
}
.tm-land-grid > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-land-grid.visible > *:nth-child(1) { transition-delay: 0.00s; }
.tm-land-grid.visible > *:nth-child(2) { transition-delay: 0.05s; }
.tm-land-grid.visible > *:nth-child(3) { transition-delay: 0.10s; }
.tm-land-grid.visible > *:nth-child(4) { transition-delay: 0.15s; }
.tm-land-grid.visible > *:nth-child(5) { transition-delay: 0.20s; }
.tm-land-grid.visible > *:nth-child(6) { transition-delay: 0.25s; }
.tm-land-grid.visible > *:nth-child(7) { transition-delay: 0.30s; }
.tm-land-grid.visible > *:nth-child(8) { transition-delay: 0.35s; }
.tm-land-grid.visible > *:nth-child(9) { transition-delay: 0.40s; }
.tm-land-grid.visible > *:nth-child(10) { transition-delay: 0.45s; }
.tm-land-grid.visible > *:nth-child(11) { transition-delay: 0.50s; }
.tm-land-grid.visible > *:nth-child(12) { transition-delay: 0.55s; }
.tm-land-grid.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .tm-reveal, .tm-reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    .tm-land-content h2,
    .tm-land-grid > * {
        opacity: 1 !important;
        transform: none !important;
    }
    body.single-trucks .tm-info-price,
    body.single-trucks .tm-info-title,
    body.single-trucks .tm-pill-blue,
    body.single-trucks .tm-pill-red {
        animation: none !important;
        opacity: 1 !important;
    }
    body { animation: none !important; }
    body.tm-page-exit { opacity: 1 !important; transition: none !important; }
    .tm-hero-bg { animation: none !important; }
    html { scroll-behavior: auto; }
}