/* Namespace: every class below is prefixed "cxsbc-" (Cartrix Shop By Car) so it can't collide with OpenCart core or Journal theme styles. All resets/variables are scoped under .cxsbc-root, not html/body/*, so this stylesheet never touches the rest of the theme. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap'); .cxsbc-root { font-family: Archivo !important; color: rgba(28, 28, 28, 1); display: inline-block; } .cxsbc-root *, .cxsbc-root *::before, .cxsbc-root *::after { box-sizing: border-box; } .cxsbc-launch-btn { width:1px; display:none !important; } /* --- Overlay --- */ /* Rendered as a direct child of at runtime (see vehicle-finder.js) so it is never affected by a transform/filter/overflow rule on whatever ancestor the launch button happens to live in -- it always covers the full viewport and centers on screen, regardless of where the module is placed in the page. */ .cxsbc-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; background: rgba(15, 23, 42, 0.5) !important; display: none; align-items: flex-end; justify-content: center; z-index: 2147483647 !important; backdrop-filter: blur(2px); } .cxsbc-overlay.cxsbc-open { display: flex !important; } body.cxsbc-scroll-lock { overflow: hidden; } @media (min-width: 640px) { .cxsbc-overlay { align-items: center; } } /* --- Modal shell --- */ .cxsbc-modal { position: relative; z-index: 1; background: #ffffff; width: 100%; max-width: 480px; height: min(720px, 92vh); border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2); animation: cxsbc-slideUp .28s ease-out; font-family: Archivo !important; } @media (min-width: 640px) { .cxsbc-modal { border-radius: 20px; height: min(680px, 88vh); } } @keyframes cxsbc-slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* --- Header --- */ .cxsbc-modal-header { padding: 16px 16px 12px; border-bottom: 1px solid #e4e9f2; flex-shrink: 0; } .cxsbc-header-row { display: flex; align-items: center; gap: 8px; } .cxsbc-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e4e9f2; background: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: rgba(28, 28, 28, 1); transition: background .15s; padding: 0; } .cxsbc-icon-btn:hover { background: #f4f7fc; } .cxsbc-icon-btn.cxsbc-hidden-btn { visibility: hidden; } .cxsbc-header-titles { flex: 1; min-width: 0; } .cxsbc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1874c3; margin: 0 0 2px; } .cxsbc-title { font-size: 17px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* breadcrumb pills */ .cxsbc-crumbs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .cxsbc-crumb { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #ccdfff; color: rgba(21, 94, 156, 1); display: flex; align-items: center; gap: 5px; } .cxsbc-crumb-sep { color: #1874c3; opacity: .5; } /* search */ .cxsbc-search-wrap { margin-top: 12px; position: relative; } .cxsbc-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(107, 105, 105, 1); pointer-events: none; } .cxsbc-search-input { width: 100%; padding: 12px 14px 12px 38px; border-radius: 10px; border: 1px solid #e4e9f2; background: #f4f7fc; font-family: inherit; font-size: 14px; color: rgba(28, 28, 28, 1); outline: none; } .cxsbc-search-input:focus { border-color: #1874c3; background: #ffffff; } .cxsbc-search-input::placeholder { color: rgba(107, 105, 105, 1); } /* --- Selected car preview (generation step) --- */ .cxsbc-car-preview { display: none; align-items: center; gap: 12px; padding: 12px; margin-bottom: 14px; background: #ccdfff; border-radius: 10px; } .cxsbc-car-preview.cxsbc-show { display: flex; } .cxsbc-car-preview-media { width: 76px; height: 52px; flex-shrink: 0; background: #ffffff; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .cxsbc-car-preview-media svg { width: 70%; height: 70%; } .cxsbc-car-preview-text { min-width: 0; } .cxsbc-car-preview-name { font-size: 14.5px; font-weight: 800; color: rgba(21, 94, 156, 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cxsbc-car-preview-sub { font-size: 12px; font-weight: 600; color: #1874c3; margin-top: 1px; } /* --- Body / grid --- */ .cxsbc-modal-body { flex: 1; overflow-y: auto; padding: 16px; } .cxsbc-section-label { font-size: 12px; font-weight: 700; color: rgba(107, 105, 105, 1); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 10px; } .cxsbc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cxsbc-tile { border: 1px solid #e4e9f2; border-radius: 10px; background: #ffffff; padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; text-align: center; } .cxsbc-tile:hover { border-color: #1874c3; box-shadow: 0 4px 14px rgba(24, 116, 195, 0.14); transform: translateY(-1px); } .cxsbc-tile:active { transform: translateY(0); } .cxsbc-tile.cxsbc-tile-selected { border-color: #1874c3; } .cxsbc-tile-media { width: 100%; aspect-ratio: 1.3/1; border-radius: 8px; background: #f4f7fc; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cxsbc-tile-media.cxsbc-tile-media-brand { aspect-ratio: 1.6/1; } .cxsbc-tile-media svg, .cxsbc-tile-media img { width: 90%; height: 90%; object-fit: contain; border-radius: 12px; } .cxsbc-tile-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: rgba(28, 28, 28, 1); } .cxsbc-tile-sub { font-size: 10.5px; color: rgba(107, 105, 105, 1); font-weight: 500; margin-top: -4px; } .cxsbc-empty-state { text-align: center; padding: 48px 16px; color: rgba(107, 105, 105, 1); grid-column: 1 / -1; } .cxsbc-empty-state svg { margin-bottom: 10px; opacity: .5; } .cxsbc-empty-state p { margin: 0; font-size: 13.5px; font-weight: 600; } .cxsbc-empty-state span { font-size: 12px; } /* footer / summary (shown on generation step after pick) */ .cxsbc-modal-footer { padding: 14px 16px; border-top: 1px solid #e4e9f2; flex-shrink: 0; display: none; font-family: Archivo !important; } .cxsbc-modal-footer.cxsbc-show { display: flex; gap: 10px; align-items: center; } .cxsbc-footer-selected { flex: 1; font-size: 12.5px; color: rgba(107, 105, 105, 1); font-weight: 600; } .cxsbc-footer-selected b { color: rgba(28, 28, 28, 1); } .cxsbc-cta-btn { background: #1874c3; color: #fff; border: none; padding: 12px 20px; border-radius: 10px; font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; } .cxsbc-cta-btn:hover{ background: #1874c3 !important; color: #ffffff !important; } .cxsbc-cta-btn:active{ background: #1874c3 !important; color: #ffffff !important; } .cxsbc-cta-btn:focus-visible{ background: #1874c3 !important; color: #ffffff !important; } .cxsbc-modal ::-webkit-scrollbar { width: 6px; font-family: Archivo !important; } .cxsbc-modal ::-webkit-scrollbar-thumb { background: #e4e9f2; border-radius: 99px; font-family: Archivo !important; }