/* ============================================
   TIMIZA FARM MACHINERY - UI ENHANCEMENTS (2.19.0)
   Loaded after style.css / home.css. Additive only: delete this file and
   its enqueue to return to the previous look.

   Patterns borrowed from leading farm-equipment and retail sites:
   - reading-progress bar + back-to-top (Kubota, Deere, large retailers)
   - sticky mobile buy bar with price + one clear action (Amazon, Shopify
     themes, Tractor Supply product pages)
   - Call / WhatsApp / Enquire in the mobile bottom bar (Mahindra)
   - product cards with a trust line, image zoom and a firm price (retail)
   - larger corner radii and softer layered shadows (current e-commerce UI)
   ============================================ */

.tfm-body {
    --tfm-radius-md: 8px;
    --tfm-radius-lg: 12px;
    --tfm-shadow-card: 0 1px 2px rgba(14, 30, 43, 0.06), 0 8px 24px -12px rgba(14, 30, 43, 0.22);
    --tfm-shadow-card-hover: 0 2px 4px rgba(14, 30, 43, 0.08), 0 18px 36px -14px rgba(14, 30, 43, 0.32);
}

/* ---------- Smooth in-page anchors that clear the sticky header ---------- */
html:has(.tfm-body) { scroll-behavior: smooth; scroll-padding-top: 140px; }
@media (max-width: 767px) { html:has(.tfm-body) { scroll-padding-top: 90px; } }
@media (prefers-reduced-motion: reduce) { html:has(.tfm-body) { scroll-behavior: auto; } }

/* ---------- Reading progress bar ---------- */
.tfm-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
    background: transparent; pointer-events: none;
}
.tfm-progress span {
    display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--tfm-orange), #FFB45E);
    transition: transform 0.1s linear;
}

/* ---------- Back to top ---------- */
.tfm-totop {
    position: fixed; right: 30px; bottom: 96px; z-index: 9997;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tfm-gray);
    background: #fff; color: var(--tfm-green-dark); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--tfm-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s, color 0.2s;
}
.tfm-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.tfm-totop:hover { background: var(--tfm-green); color: #fff; border-color: var(--tfm-green); }
@media (max-width: 767px) {
    .tfm-totop { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
    .tfm-has-buybar .tfm-totop { bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Buttons: depth + press feedback ---------- */
.tfm-body .tfm-btn-accent { box-shadow: 0 6px 16px -8px rgba(200, 111, 24, 0.7); }
.tfm-body .tfm-btn-primary { box-shadow: 0 6px 16px -8px rgba(15, 77, 41, 0.7); }
.tfm-body .tfm-btn:active { transform: translateY(0) scale(0.98); }
.tfm-body .tfm-btn-outline:hover,
.tfm-body .tfm-btn-outline-light:hover { box-shadow: none; }

/* ---------- Product cards ---------- */
.tfm-body .tfm-product-card {
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    box-shadow: var(--tfm-shadow-card);
}
.tfm-body .tfm-product-card:hover { box-shadow: var(--tfm-shadow-card-hover); border-color: rgba(23, 107, 58, 0.35); }
.tfm-body .tfm-product-card .tfm-img-wrap img { transition: opacity 0.35s ease, transform 0.5s ease; }
.tfm-body .tfm-product-card:hover .tfm-img-wrap img { transform: scale(1.05); }
.tfm-body .tfm-product-name { transition: color 0.2s ease; }
.tfm-body .tfm-product-card:hover .tfm-product-name { color: var(--tfm-green-dark); }
.tfm-body .tfm-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tfm-body .tfm-price-now { font-weight: 800; letter-spacing: -0.01em; }
.tfm-body .tfm-price-was { font-size: 0.8rem; font-weight: 500; color: var(--tfm-text-muted); text-decoration: line-through; }
.tfm-body .tfm-badge-discount { border-radius: var(--tfm-radius-full); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35); }

/* trust line under the price (machinery cards) */
.tfm-card-assure {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 4px;
    font-size: 0.72rem; font-weight: 600; color: var(--tfm-text-light);
}
.tfm-card-assure li { display: inline-flex; align-items: center; gap: 5px; }
.tfm-card-assure i { color: var(--tfm-green); font-size: 0.7rem; }

/* Lipa Mdogo deposit, directly under the cash price */
.tfm-body .tfm-card-deposit {
    display: flex; flex-direction: column; gap: 4px;
    margin: 2px 0 4px; padding: 9px 10px; border-radius: var(--tfm-radius-md);
    background: var(--tfm-green-light); border: 1px solid rgba(23, 107, 58, 0.2);
}
.tfm-card-plan-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; margin: 0; }
.tfm-card-plan-row dt { margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--tfm-text-light); display: inline-flex; align-items: center; gap: 5px; }
.tfm-card-plan-row dd { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--tfm-green-dark); }
.tfm-card-plan-row--deposit { padding-bottom: 5px; border-bottom: 1px dashed rgba(23, 107, 58, 0.3); }
.tfm-card-plan-row--deposit dt { font-weight: 700; color: var(--tfm-green-dark); }
.tfm-card-plan-row--deposit dt i { color: var(--tfm-green); }
.tfm-card-plan-row--deposit dd { font-size: 0.98rem; font-weight: 800; }

/* ---------- Mobile bottom bar: Call / WhatsApp / Enquire (Mahindra pattern) ---------- */
.tfm-bottom-nav { backdrop-filter: saturate(1.4) blur(10px); background: rgba(255, 255, 255, 0.94); }
.tfm-bottom-nav-item { position: relative; transition: color 0.2s ease; }
.tfm-bottom-nav-item.active::before {
    content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--tfm-green);
}
.tfm-bottom-nav-call { color: var(--tfm-green-dark); }

/* ---------- Sticky buy bar (product pages, mobile) ---------- */
.tfm-buybar { display: none; }
@media (max-width: 767px) {
    .tfm-buybar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; left: 8px; right: 8px; z-index: 996;
        bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        padding: 8px 8px 8px 8px; background: #fff; border: 1px solid var(--tfm-gray);
        border-radius: 14px; box-shadow: 0 12px 32px -10px rgba(14, 30, 43, 0.45);
        transform: translateY(160%); opacity: 0; pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .tfm-buybar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .tfm-buybar img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
    .tfm-buybar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .tfm-buybar-text strong { font-size: 0.82rem; color: var(--tfm-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tfm-buybar-text span { font-size: 0.95rem; font-weight: 800; color: var(--tfm-orange-dark); }
    .tfm-buybar .tfm-btn { padding: 11px 18px; font-size: 0.85rem; flex-shrink: 0; }
    .tfm-has-buybar { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Trust row (product pages) ---------- */
.tfm-trustrow {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px;
}
.tfm-trustrow li {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 12px 8px; background: var(--tfm-green-light); border-radius: var(--tfm-radius-lg);
    font-size: 0.74rem; font-weight: 700; line-height: 1.25; color: var(--tfm-green-dark);
}
.tfm-trustrow i { font-size: 1.15rem; color: var(--tfm-green); }
@media (max-width: 420px) { .tfm-trustrow li { font-size: 0.68rem; padding: 10px 4px; } }

/* ---------- Form fields: clearer focus, larger touch targets ---------- */
.tfm-body .tfm-form-group input,
.tfm-body .tfm-form-group select,
.tfm-body .tfm-form-group textarea { border-radius: var(--tfm-radius-md); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.tfm-body .tfm-form-group input:focus,
.tfm-body .tfm-form-group select:focus,
.tfm-body .tfm-form-group textarea:focus {
    border-color: var(--tfm-green); box-shadow: 0 0 0 4px rgba(23, 107, 58, 0.14); outline: none;
}
@media (max-width: 767px) {
    .tfm-body .tfm-form-group input,
    .tfm-body .tfm-form-group select { min-height: 48px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
}

/* ---------- Category rail: edge fade shows it scrolls (Amazon/Tractor Supply) ---------- */
.tfm-catrail { position: relative; }
.tfm-catrail::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
}
.tfm-catrail-inner { scrollbar-width: none; }
.tfm-catrail-inner::-webkit-scrollbar { display: none; }
.tfm-body .tfm-catrail-link { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.tfm-body .tfm-catrail-link:hover { transform: translateY(-1px); }

/* ---------- Header: soft elevation once scrolled ---------- */
.tfm-header { transition: box-shadow 0.25s ease; }
.tfm-header.tfm-scrolled { box-shadow: 0 8px 24px -14px rgba(14, 30, 43, 0.35); }

/* ---------- Tagline (footer) ---------- */
.tfm-body .tfm-footer-tagline { font-family: var(--tfm-font-heading); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.03em; color: var(--tfm-orange); margin: 4px 0 10px; }

/* ---------- Footer links: clearer hover ---------- */
.tfm-footer a { transition: color 0.2s ease, transform 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
    .tfm-buybar, .tfm-totop, .tfm-progress span { transition: none; }
    .tfm-body .tfm-product-card:hover .tfm-img-wrap img { transform: none; }
}
@media print { .tfm-progress, .tfm-totop, .tfm-buybar, .tfm-bottom-nav { display: none !important; } }


/* ---------- Loading speed ---------- */
/* Preloader: first page of a visit only, and it can never trap the page if JS is slow. */
.tfm-no-preloader #tfm-preloader { display: none !important; }
#tfm-preloader { animation: tfm-preloader-failsafe 0.4s ease 3s forwards; transition-duration: 0.25s; }
@keyframes tfm-preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Skip layout/paint work for cards below the fold: the shop lists every product on one page. */
.tfm-product-grid > .tfm-product-card { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* Wait-state hint while a tapped link is loading (works without JS: uses :active). */
.tfm-body a:active { opacity: 0.85; }