/* ============================================================ AUTOMART V43.8 PREMIUM DESKTOP FLOATING VEHICLE CONTACT BAR Fixed to viewport bottom. Visible from page start to page end. Desktop only. ============================================================ */ /* Default: never expose on mobile. */ .am-v438-floating-contact { display:none; } @media screen and (min-width:1024px) { /* ======================================================== RETIRE OLD V43.7 SIDEBAR STICKY CONTACT Finance box remains. ======================================================== */ .vehicle-detail-page .am-v437-sticky-contact { display:none !important; } /* ======================================================== PAGE CLEARANCE Floating bar must never cover footer/content. ======================================================== */ body:has(.vehicle-detail-page) { padding-bottom: 118px !important; } /* ======================================================== FLOATING SHELL ======================================================== */ .am-v438-floating-contact { position:fixed !important; left:50% !important; bottom:18px !important; transform: translateX(-50%) !important; display:block !important; width: min( 1280px, calc(100vw - 64px) ) !important; max-width:1280px !important; margin:0 !important; z-index:2200 !important; pointer-events:none !important; } .am-v438-floating-contact__inner { display:grid !important; grid-template-columns: minmax(300px,1.55fr) minmax(170px,.72fr) minmax(180px,.78fr) minmax(380px,1.55fr) !important; align-items:center !important; gap:18px !important; width:100% !important; min-height:92px !important; padding: 12px 14px !important; border: 1px solid rgba(213,226,219,.94) !important; border-radius:22px !important; background: linear-gradient( 135deg, rgba(255,255,255,.985) 0%, rgba(250,253,251,.975) 100% ) !important; box-shadow: 0 24px 65px rgba(9,33,22,.20), 0 5px 18px rgba(9,33,22,.08) !important; backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); box-sizing:border-box !important; pointer-events:auto !important; overflow:hidden !important; } /* Premium green accent line */ .am-v438-floating-contact__inner::before { content:""; position:absolute; left:32px; right:32px; top:0; height:2px; border-radius: 0 0 999px 999px; background: linear-gradient( 90deg, transparent, #0aa55f 18%, #0aa55f 82%, transparent ); opacity:.72; } /* ======================================================== VEHICLE IDENTITY ======================================================== */ .am-v438-floating-contact__vehicle { min-width:0 !important; display:flex !important; align-items:center !important; gap:13px !important; padding-right:16px !important; border-right: 1px solid #e7eeea !important; } .am-v438-floating-contact__thumb { flex: 0 0 112px !important; width:112px !important; height:68px !important; border-radius:14px !important; overflow:hidden !important; background:#eef3f0 !important; border: 1px solid #dfe8e3 !important; box-shadow: 0 7px 18px rgba(12,34,24,.10) !important; } .am-v438-floating-contact__thumb img { display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; } .am-v438-floating-contact__identity { min-width:0 !important; flex: 1 1 auto !important; } .am-v438-floating-contact__topline { display:flex !important; align-items:center !important; gap:6px !important; margin-bottom:5px !important; } /* Available indicator */ .am-v438-floating-contact__live { display:inline-flex !important; align-items:center !important; gap:5px !important; color:#16734e !important; font-size:10px !important; line-height:1 !important; font-weight:750 !important; } .am-v438-floating-contact__live i { width:7px !important; height:7px !important; display:block !important; border-radius:50% !important; background:#12b76a !important; box-shadow: 0 0 0 4px rgba(18,183,106,.11) !important; } .am-v438-floating-contact__condition { display:inline-flex !important; align-items:center !important; min-height:21px !important; padding: 0 7px !important; border-radius:999px !important; background:#edf8f2 !important; color:#14764d !important; font-size:9px !important; line-height:1 !important; font-weight:750 !important; white-space:nowrap !important; } .am-v438-floating-contact__title { display:block !important; max-width:100% !important; margin-bottom:5px !important; color:#101b2b !important; font-size:16px !important; line-height:1.2 !important; font-weight:850 !important; letter-spacing: -.015em !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .am-v438-floating-contact__location { display:flex !important; align-items:center !important; gap:5px !important; color:#6e7c8f !important; font-size:11px !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .am-v438-floating-contact__pin { color:#078d52 !important; flex: 0 0 auto !important; } /* ======================================================== PRICE ======================================================== */ .am-v438-floating-contact__price { min-width:0 !important; display:flex !important; flex-direction:column !important; justify-content:center !important; padding-right:18px !important; border-right: 1px solid #e7eeea !important; } .am-v438-floating-contact__price small { margin-bottom:4px !important; color:#7b8796 !important; font-size:10px !important; line-height:1 !important; font-weight:650 !important; } .am-v438-floating-contact__price strong { margin-bottom:6px !important; color:#078e51 !important; font-size:23px !important; line-height:1 !important; font-weight:900 !important; letter-spacing: -.025em !important; white-space:nowrap !important; } .am-v438-floating-contact__price span { width:max-content !important; min-height:21px !important; display:inline-flex !important; align-items:center !important; padding: 0 7px !important; border-radius:999px !important; background:#eaf7f1 !important; color:#16724f !important; font-size:9px !important; font-weight:750 !important; } /* ======================================================== SELLER ======================================================== */ .am-v438-floating-contact__seller { min-width:0 !important; display:flex !important; align-items:center !important; gap:10px !important; padding-right:18px !important; border-right: 1px solid #e7eeea !important; } .am-v438-floating-contact__avatar { flex: 0 0 40px !important; width:40px !important; height:40px !important; display:grid !important; place-items:center !important; border-radius:50% !important; background: linear-gradient( 145deg, #0f7b51, #075c3e ) !important; color:#fff !important; font-size:13px !important; font-weight:850 !important; box-shadow: 0 7px 16px rgba(8,96,60,.17) !important; } .am-v438-floating-contact__seller > span:last-child { min-width:0 !important; display:flex !important; flex-direction:column !important; } .am-v438-floating-contact__seller small { margin-bottom:2px !important; color:#829087 !important; font-size:9px !important; font-weight:650 !important; } .am-v438-floating-contact__seller strong { max-width:100% !important; margin-bottom:3px !important; color:#142319 !important; font-size:12px !important; line-height:1.15 !important; font-weight:800 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } .am-v438-floating-contact__seller em { color:#138052 !important; font-size:9px !important; line-height:1.1 !important; font-style:normal !important; font-weight:700 !important; } /* ======================================================== ACTIONS ======================================================== */ .am-v438-floating-contact__actions { display:grid !important; grid-template-columns: 1fr 1.18fr .92fr !important; gap:8px !important; min-width:0 !important; } .am-v438-floating-contact__actions a { min-width:0 !important; height:54px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding: 0 11px !important; border-radius:13px !important; text-decoration:none !important; box-sizing:border-box !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease !important; } .am-v438-floating-contact__actions a:hover { transform: translateY(-2px) !important; } .am-v438-action-icon { flex: 0 0 auto !important; font-size:17px !important; line-height:1 !important; } .am-v438-floating-contact__actions a > span:last-child { min-width:0 !important; display:flex !important; flex-direction:column !important; } .am-v438-floating-contact__actions small { margin-bottom:2px !important; font-size:8px !important; line-height:1 !important; font-weight:650 !important; opacity:.70 !important; white-space:nowrap !important; } .am-v438-floating-contact__actions b { font-size:11px !important; line-height:1 !important; font-weight:850 !important; white-space:nowrap !important; } /* CALL */ .am-v438-floating-contact__call { border: 1px solid #079354 !important; background:#fff !important; color:#087949 !important; } .am-v438-floating-contact__call:hover { border-color:#078b4f !important; box-shadow: 0 9px 22px rgba(6,123,69,.12) !important; } /* WHATSAPP — PRIMARY */ .am-v438-floating-contact__whatsapp { border: 1px solid #079d58 !important; background: linear-gradient( 180deg, #15b968 0%, #079653 100% ) !important; color:#fff !important; box-shadow: 0 9px 22px rgba(8,150,83,.18) !important; } .am-v438-floating-contact__whatsapp:hover { box-shadow: 0 13px 28px rgba(8,150,83,.24) !important; } /* CHAT */ .am-v438-floating-contact__chat { border: 1px solid #dbe6df !important; background:#f8fbf9 !important; color:#15271d !important; } .am-v438-floating-contact__chat:hover { border-color:#c9dbd0 !important; background:#fff !important; box-shadow: 0 9px 22px rgba(15,35,24,.08) !important; } } /* ============================================================ SLIGHTLY SMALLER DESKTOP ============================================================ */ @media screen and (min-width:1024px) and (max-width:1180px) { .am-v438-floating-contact { width: calc(100vw - 40px) !important; } .am-v438-floating-contact__inner { grid-template-columns: minmax(260px,1.35fr) 155px 150px minmax(330px,1.45fr) !important; gap:12px !important; } .am-v438-floating-contact__thumb { flex-basis:88px !important; width:88px !important; } .am-v438-floating-contact__seller { padding-right:12px !important; } } /* ============================================================ MOBILE + TABLET EXISTING CONTACT UI REMAINS AUTHORITY ============================================================ */ @media screen and (max-width:1023px) { .am-v438-floating-contact { display:none !important; } }