/* ========================================================================== MOTOLECTRON STOREFRONT — LIGHT THEME LAYER Loaded by every storefront page after homepage.css and the page's own stylesheet (profile.css, home-*.css). The dark theme is the base (DESIGN.md); this file only describes what changes when . Rules are scoped to `html[data-theme="light"] body:not(.admin-body)` so they win against the page stylesheets by specificity, and `!important` is used only where the rule being overridden already uses it. Token values live in motolectron.css. Deliberately unchanged in light mode (they are photo/brand "stages"): - the hero banner, the promo banner, the news cards (photo-backed, white text) - the footer + "Back to top" strip (carbon black brand anchor) - the login / sign-up modal, the "Verification Required" dialog and the other storefront dialogs (return / feedback on profile.html, write a review on product.html) ========================================================================== */ /* -------------------------------------------------------------------------- Canvas -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) { background: var(--moto-black); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) ::selection { background: var(--moto-red-glow); color: var(--moto-text); } /* -------------------------------------------------------------------------- Header: logo bar + category menu bar -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) > header, html[data-theme="light"] body:not(.admin-body) header { background: #ffffff !important; } html[data-theme="light"] body:not(.admin-body) .navbar { background: #ffffff !important; border-bottom: 1px solid var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .category-navbar { background: var(--moto-panel-soft) !important; border-bottom: 1px solid var(--moto-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; } /* Floating (scrolled) header: white glass instead of black glass */ html[data-theme="light"] body:not(.admin-body) header.nav-floating { background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.18) !important; } html[data-theme="light"] body:not(.admin-body) header.nav-floating .navbar, html[data-theme="light"] body:not(.admin-body) header.nav-floating .category-navbar { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; } /* Logo swap (both share the .main-logo-img sizing rules) */ body:not(.admin-body) .main-logo-img.logo-light { display: none !important; } html[data-theme="light"] body:not(.admin-body) .main-logo-img.logo-dark { display: none !important; } html[data-theme="light"] body:not(.admin-body) .main-logo-img.logo-light { display: block !important; } /* Icon links (cart, bell) */ html[data-theme="light"] body:not(.admin-body) .nav-links .icon-link, html[data-theme="light"] body:not(.admin-body) .nav-links a { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .nav-links .icon-link:hover, html[data-theme="light"] body:not(.admin-body) .nav-links a:hover { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) #dropdown-scrollable, html[data-theme="light"] body:not(.admin-body) .dropdown-toggle[aria-label="Notification Button"] { color: var(--moto-text-secondary) !important; } html[data-theme="light"] body:not(.admin-body) #dropdown-scrollable:hover, html[data-theme="light"] body:not(.admin-body) .dropdown-toggle[aria-label="Notification Button"]:hover { color: var(--moto-red) !important; background-color: rgba(0, 0, 0, 0.05) !important; } html[data-theme="light"] body:not(.admin-body) .cart-badge { border-color: #ffffff; } /* Hamburger (mobile) */ html[data-theme="light"] body:not(.admin-body) .hamburger-btn span { background: var(--moto-text) !important; } /* Search pill */ html[data-theme="light"] body:not(.admin-body) .search-container .form { background: var(--moto-panel-inset) !important; border-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .search-container .form:focus-within { border-color: var(--moto-red) !important; box-shadow: 0 0 0 2px var(--moto-red-glow) !important; } html[data-theme="light"] body:not(.admin-body) .search-container .input { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .search-container .input::placeholder { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .search-container .form button { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .live-search-dropdown { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.22); } html[data-theme="light"] body:not(.admin-body) .live-search-dropdown::-webkit-scrollbar-thumb { background: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .search-result-item { border-bottom-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .search-result-item:hover { background: var(--moto-panel-inset); } html[data-theme="light"] body:not(.admin-body) .search-result-img { background: var(--moto-panel-inset); } html[data-theme="light"] body:not(.admin-body) .search-result-name { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .search-result-price { color: var(--moto-red); } /* "Log In" button (guest) */ html[data-theme="light"] body:not(.admin-body) .user-profile { background: linear-gradient(to bottom right, var(--moto-red) 0%, rgba(230, 0, 18, 0) 30%); background-color: var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .user-profile:hover, html[data-theme="light"] body:not(.admin-body) .user-profile:focus { background-color: rgba(230, 0, 18, 0.55); box-shadow: 0 0 10px var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .user-profile-inner { background-color: #ffffff; color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .user-profile-inner svg { fill: var(--moto-text); } /* Profile dropdown (motolectron.css already turns the panel white) */ html[data-theme="light"] body:not(.admin-body) .profile-dropdown .u-style-6db1cafe9c { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .profile-dropdown .u-style-f7e17a2559 { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .profile-dropdown-link:hover { background-color: var(--moto-panel-inset); color: var(--moto-text); border-left-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .profile-dropdown-link:hover .dropdown-link-left svg { stroke: var(--moto-red); } /* Profile dropdown details styled with #profileDropdown … !important in homepage.css */ html[data-theme="light"] body:not(.admin-body) #profileDropdown #profileName { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) #profileDropdown #profileRole { color: var(--moto-muted) !important; } html[data-theme="light"] body:not(.admin-body) #profileDropdown > hr { border-top-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) #profileDropdown .profile-dropdown-link:hover { background: var(--moto-panel-inset) !important; } html[data-theme="light"] body:not(.admin-body) #profileDropdown .profile-avatar { background: #ffffff !important; } /* Notification dropdown internals (notifications.css is !important dark zinc) */ html[data-theme="light"] body:not(.admin-body) .notif-dropdown, html[data-theme="light"] body:not(.admin-body) .dropdown-menu[role="menu"] { background-color: #ffffff !important; border: 1px solid var(--moto-border) !important; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.2), 0 8px 16px -4px rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] body:not(.admin-body) .notif-dropdown-header, html[data-theme="light"] body:not(.admin-body) .dropdown-header { border-bottom-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .notif-header-title, html[data-theme="light"] body:not(.admin-body) .dropdown-header h6, html[data-theme="light"] body:not(.admin-body) .notif-title, html[data-theme="light"] body:not(.admin-body) .dropdown-item h6, html[data-theme="light"] body:not(.admin-body) .notif-empty-title { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .notif-unread-pill { background: var(--moto-panel-inset) !important; color: var(--moto-text-secondary) !important; border-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .notif-mark-all-btn, html[data-theme="light"] body:not(.admin-body) .notif-message, html[data-theme="light"] body:not(.admin-body) .dropdown-item small, html[data-theme="light"] body:not(.admin-body) .notif-empty-state, html[data-theme="light"] body:not(.admin-body) .notif-empty-icon, html[data-theme="light"] body:not(.admin-body) .notif-dropdown-footer, html[data-theme="light"] body:not(.admin-body) .dropdown-footer { color: var(--moto-muted) !important; } html[data-theme="light"] body:not(.admin-body) .notif-mark-all-btn:hover, html[data-theme="light"] body:not(.admin-body) .notif-dropdown-footer:hover, html[data-theme="light"] body:not(.admin-body) .dropdown-footer:hover { color: var(--moto-text) !important; background-color: rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] body:not(.admin-body) .dropdown-item { color: var(--moto-text-secondary) !important; border-bottom-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .notif-item:hover, html[data-theme="light"] body:not(.admin-body) .dropdown-item:hover, html[data-theme="light"] body:not(.admin-body) .notif-item.unread:hover, html[data-theme="light"] body:not(.admin-body) .dropdown-item.unread:hover { background-color: rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] body:not(.admin-body) .notif-item.unread, html[data-theme="light"] body:not(.admin-body) .dropdown-item.unread { background-color: var(--moto-red-glow) !important; } html[data-theme="light"] body:not(.admin-body) .notif-icon-box, html[data-theme="light"] body:not(.admin-body) .avatar > div, html[data-theme="light"] body:not(.admin-body) .avatar .w-10 { background-color: var(--moto-panel-inset) !important; border-color: var(--moto-border) !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .notif-icon-box svg { stroke: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .notif-time, html[data-theme="light"] body:not(.admin-body) .notif-empty-desc { color: var(--moto-text-dim) !important; } html[data-theme="light"] body:not(.admin-body) .notif-empty-icon { background: var(--moto-panel-inset) !important; border-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .notif-dropdown-footer, html[data-theme="light"] body:not(.admin-body) .dropdown-footer { border-top-color: var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .dropdown-menu .overflow-y-auto::-webkit-scrollbar-thumb, html[data-theme="light"] body:not(.admin-body) .notif-list::-webkit-scrollbar-thumb { background: var(--moto-border-subtle) !important; } /* -------------------------------------------------------------------------- Category menu bar + mega menus + mobile drawer -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .category-links { background: transparent !important; } html[data-theme="light"] body:not(.admin-body) .category-links > a, html[data-theme="light"] body:not(.admin-body) .category-links > .nav-item-dropdown, html[data-theme="light"] body:not(.admin-body) .category-filter { color: var(--moto-text-secondary) !important; } html[data-theme="light"] body:not(.admin-body) .category-links > a:hover, html[data-theme="light"] body:not(.admin-body) .category-links > .nav-item-dropdown:hover, html[data-theme="light"] body:not(.admin-body) .category-links > a.active, html[data-theme="light"] body:not(.admin-body) .category-filter:hover, html[data-theme="light"] body:not(.admin-body) .category-filter.active, html[data-theme="light"] body:not(.admin-body) .nav-item-dropdown:hover > .category-filter { color: var(--moto-red) !important; } html[data-theme="light"] body:not(.admin-body) .category-links .nav-rect { stroke: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .mega-menu, html[data-theme="light"] body:not(.admin-body) .category-links > .nav-item-dropdown:hover .mega-menu, html[data-theme="light"] body:not(.admin-body) .category-links > .nav-item-dropdown.open-sub .mega-menu { background-color: #ffffff !important; border-bottom: 1px solid var(--moto-border) !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.2) !important; } html[data-theme="light"] body:not(.admin-body) .mega-column h4 { color: var(--moto-text); border-bottom-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .mega-column a { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .mega-column a:hover, html[data-theme="light"] body:not(.admin-body) .mega-column .view-all-link { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .mega-menu::-webkit-scrollbar-thumb { background: var(--moto-border-subtle); } @media (max-width: 768px) { html[data-theme="light"] body:not(.admin-body) .category-navbar { background: #ffffff !important; border-right: 2px solid var(--moto-red) !important; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.18) !important; } html[data-theme="light"] body:not(.admin-body) .category-links > a, html[data-theme="light"] body:not(.admin-body) .category-links > .nav-item-dropdown { background: var(--moto-panel-inset) !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .category-navbar .mega-menu { background: var(--moto-panel-soft) !important; border: 1px solid var(--moto-border) !important; } html[data-theme="light"] body:not(.admin-body) .mobile-nav-overlay { background: rgba(17, 17, 17, 0.45) !important; } } /* -------------------------------------------------------------------------- Section headings, "View All", status text -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .section-title { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .btn-view-all { border-color: var(--moto-border-subtle); color: var(--moto-text); background: #ffffff; } html[data-theme="light"] body:not(.admin-body) .btn-view-all:hover, html[data-theme="light"] body:not(.admin-body) .btn-view-all:focus-visible { border-color: var(--moto-red); color: var(--moto-red); background: var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .grid-status-text { color: var(--moto-muted); } /* -------------------------------------------------------------------------- Product cards (the base block uses !important throughout) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .product-card { background: #ffffff !important; border-color: var(--moto-border) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] body:not(.admin-body) .product-card:hover { border-color: var(--moto-red) !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--moto-red-glow) !important; } html[data-theme="light"] body:not(.admin-body) .product-card .content { background: #ffffff !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .product-img-container { background: var(--moto-panel-inset) !important; } html[data-theme="light"] body:not(.admin-body) .product-wishlist-btn { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: var(--moto-muted) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; } html[data-theme="light"] body:not(.admin-body) .product-wishlist-btn:hover { background: #ffffff !important; color: var(--moto-red) !important; border-color: var(--moto-red) !important; } html[data-theme="light"] body:not(.admin-body) .product-wishlist-btn.active { background: var(--moto-red-glow) !important; border-color: var(--moto-red) !important; color: var(--moto-red) !important; } html[data-theme="light"] body:not(.admin-body) .product-card-badge.badge-soldout { background: rgba(60, 60, 60, 0.92) !important; color: #ffffff !important; border-color: rgba(0, 0, 0, 0.2) !important; } html[data-theme="light"] body:not(.admin-body) .product-card.is-sold-out .product-img-container::after { background: rgba(255, 255, 255, 0.55) !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .product-card-stars .star-item.empty { color: #d0d0d0 !important; } html[data-theme="light"] body:not(.admin-body) .color-swatch-btn { border-color: rgba(0, 0, 0, 0.18) !important; } html[data-theme="light"] body:not(.admin-body) .color-swatch-btn:hover { border-color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .color-swatch-btn.active, html[data-theme="light"] body:not(.admin-body) .color-swatch-btn:focus-visible { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .product-quick-action-btn, html[data-theme="light"] body:not(.admin-body) .product-card:hover .product-quick-action-btn:not(:hover):not(:disabled) { background: var(--moto-panel-inset) !important; border-color: var(--moto-border-subtle) !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .product-quick-action-btn:hover:not(:disabled) { background: var(--moto-red) !important; border-color: var(--moto-red) !important; color: #ffffff !important; } html[data-theme="light"] body:not(.admin-body) .product-quick-action-btn:disabled, html[data-theme="light"] body:not(.admin-body) .product-card:hover .product-quick-action-btn:disabled { background: var(--moto-panel-inset) !important; border-color: var(--moto-border) !important; color: var(--moto-text-dim) !important; } /* -------------------------------------------------------------------------- Featured category tiles -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .category-tile { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } html[data-theme="light"] body:not(.admin-body) .category-tile:hover, html[data-theme="light"] body:not(.admin-body) .category-tile:focus-visible { border-color: var(--moto-red); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--moto-red-glow); } /* -------------------------------------------------------------------------- Partners: brand, financing and payment logo cards -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .brand-logo-card, html[data-theme="light"] body:not(.admin-body) .partner-logo-card, html[data-theme="light"] body:not(.admin-body) .financing-logo, html[data-theme="light"] body:not(.admin-body) .payment-logo { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } html[data-theme="light"] body:not(.admin-body) .brand-logo-card:hover, html[data-theme="light"] body:not(.admin-body) .partner-logo-card:hover { border-color: var(--moto-red); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1); } html[data-theme="light"] body:not(.admin-body) .financing-logo img, html[data-theme="light"] body:not(.admin-body) .payment-logo img { filter: none; } html[data-theme="light"] body:not(.admin-body) .brand-wordmark { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .gille-wordmark { color: #0e9488; } html[data-theme="light"] body:not(.admin-body) .k3-wordmark, html[data-theme="light"] body:not(.admin-body) .sec-wordmark { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .k3-wordmark small, html[data-theme="light"] body:not(.admin-body) .power-wordmark { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .brand-marquee, html[data-theme="light"] body:not(.admin-body) .partner-marquee { border-color: var(--moto-border); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } /* -------------------------------------------------------------------------- News carousel controls (cards stay photo-backed) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .news-carousel-btn { background: rgba(17, 17, 17, 0.72); border-color: rgba(0, 0, 0, 0.1); color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .news-carousel-btn:hover { background: rgba(17, 17, 17, 0.9); } /* -------------------------------------------------------------------------- Testimonials + map -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .testimonial-card { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } html[data-theme="light"] body:not(.admin-body) .testimonial-avatar { background: var(--moto-panel-inset); border-color: var(--moto-border); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .custom-map-wrapper { background-color: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } html[data-theme="light"] body:not(.admin-body) .dark-map-iframe { filter: none; } /* -------------------------------------------------------------------------- Cart drawer (token-based already) + generic scrollbars -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .cart-drawer { color-scheme: light; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04); } html[data-theme="light"] body:not(.admin-body) ::-webkit-scrollbar-thumb { background: var(--moto-border-subtle); } /* ========================================================================== PAGE SECTIONS (added when the light layer was wired onto every storefront page). Same rules as above: scoped to html[data-theme="light"], the page stylesheet's own selector is repeated so specificity always wins, and !important appears only where the rule being overridden already has it. State variants (:hover, .active, :has(:checked)) are restated because the scoped base rule would otherwise out-rank them. Still dark on purpose (dialogs share the login modal's treatment): the return / feedback / return-details dialogs on profile.html (.rf-modal) and the write-a-review dialog on product.html (.review-modal-overlay). ========================================================================== */ /* -------------------------------------------------------------------------- Shop: filter sidebar, "All Products" bar, pagination (homepage.css) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .shop-sidebar, html[data-theme="light"] body:not(.admin-body) .shop-content-header { background-color: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } html[data-theme="light"] body:not(.admin-body) .sidebar-header { border-bottom-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .sidebar-header h3, html[data-theme="light"] body:not(.admin-body) .shop-content-header h2, html[data-theme="light"] body:not(.admin-body) .shop-content-header label { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .clear-btn, html[data-theme="light"] body:not(.admin-body) .brand-cb:checked + .brand-text { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .filter-group h4 { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .filter-group label { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .filter-group label:hover { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .size-btn { border-color: var(--moto-border-subtle); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .size-btn:hover, html[data-theme="light"] body:not(.admin-body) .size-btn.active { background: var(--moto-red); border-color: var(--moto-red); color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .price-field { background: var(--moto-panel-inset); border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .price-field span, html[data-theme="light"] body:not(.admin-body) .price-separator { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .price-field input { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .sort-dropdown { background: var(--moto-panel-inset); color: var(--moto-text); border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .sort-dropdown:focus { border-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .custom-pagination .page-btn { background: #ffffff; color: var(--moto-text); border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .custom-pagination .page-btn:not(.active):not(:disabled):not(.dots):hover { background: var(--moto-panel-inset); border-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .custom-pagination .page-btn.active { background-color: var(--moto-red); border-color: var(--moto-red); color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .custom-pagination .page-btn.dots { color: var(--moto-muted) !important; } /* -------------------------------------------------------------------------- Account hub shell — profile.html, orders.html, collections.html (profile.css + home-collections.css) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .hub-sidebar, html[data-theme="light"] body:not(.admin-body) .hub-content-area { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } html[data-theme="light"] body:not(.admin-body) .hub-user-info { border-bottom-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .hub-user-info h3, html[data-theme="light"] body:not(.admin-body) .hub-title { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .hub-avatar { background-color: var(--moto-panel-inset); color: var(--moto-red); border-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .hub-nav-btn { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .hub-nav-btn:hover { background-color: var(--moto-panel-soft); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .hub-nav-btn.active { background-color: var(--moto-panel-inset); color: var(--moto-text); border-left-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .hub-subtitle { color: var(--moto-muted); border-bottom-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .hub-form-group label { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .hub-input { background: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .hub-input::placeholder { color: var(--moto-text-dim); } html[data-theme="light"] body:not(.admin-body) .hub-input:focus { border-color: var(--moto-red); box-shadow: 0 0 0 4px var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .hub-input[readonly], html[data-theme="light"] body:not(.admin-body) .hub-input.u-style-9b82158df5 { background-color: var(--moto-panel-inset); color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) select.hub-input option { background: #ffffff; color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .hub-btn { background-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .hub-btn:hover { background-color: var(--moto-red-dark); } /* Profile: preset avatars, phone verification, returns & feedback list */ html[data-theme="light"] body:not(.admin-body) .avatar-preset-panel { background: var(--moto-panel-soft); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .avatar-preset-panel h3 { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .avatar-preset-panel p { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .avatar-preset-option { background: #ffffff; border-color: var(--moto-border); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .avatar-preset-option:hover { border-color: var(--moto-border-hover); } html[data-theme="light"] body:not(.admin-body) .avatar-preset-option.is-selected { border-color: var(--moto-red); background: var(--moto-red-glow); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .avatar-save-status { color: #15803d !important; } html[data-theme="light"] body:not(.admin-body) .avatar-save-status.is-error { color: #b91c1c !important; } html[data-theme="light"] body:not(.admin-body) .phone-status-badge.unverified { color: #b45309 !important; } html[data-theme="light"] body:not(.admin-body) .phone-status-badge.verified { color: #15803d !important; } /* Inline-styled in profile.html */ html[data-theme="light"] body:not(.admin-body) #phoneVerificationPanel { background: var(--moto-panel-soft) !important; border-color: var(--moto-red) !important; } html[data-theme="light"] body:not(.admin-body) #phoneVerificationPanel p { color: var(--moto-text-secondary) !important; } html[data-theme="light"] body:not(.admin-body) .order-tracking-card, html[data-theme="light"] body:not(.admin-body) .return-card { background: var(--moto-panel-soft); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .return-info h4, html[data-theme="light"] body:not(.admin-body) .return-credit-amount, html[data-theme="light"] body:not(.admin-body) .returns-empty-state h3, html[data-theme="light"] body:not(.admin-body) .timeline-step.active p, html[data-theme="light"] body:not(.admin-body) .timeline-step.completed p { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .return-info p, html[data-theme="light"] body:not(.admin-body) .return-credit-sub, html[data-theme="light"] body:not(.admin-body) .return-credit-note, html[data-theme="light"] body:not(.admin-body) .returns-empty-state, html[data-theme="light"] body:not(.admin-body) .timeline-step p { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .return-replaced, html[data-theme="light"] body:not(.admin-body) .feedback-preview { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .btn-outline { border-color: var(--moto-border-hover); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .btn-outline:hover { border-color: var(--moto-red); color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .return-badge-review { color: #8a5a00; } html[data-theme="light"] body:not(.admin-body) .return-badge-approved { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .return-badge-declined { color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .return-badge-completed { background: var(--moto-panel-inset); border-color: var(--moto-border-subtle); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .return-credit { border-color: rgba(21, 128, 61, 0.35); background: rgba(21, 128, 61, 0.08); } html[data-theme="light"] body:not(.admin-body) .return-credit-label { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .return-credit-code { background: #ffffff; border-color: var(--moto-border-hover); color: #8a5a00; } html[data-theme="light"] body:not(.admin-body) .return-credit.is-used { border-color: var(--moto-border-subtle); background: var(--moto-panel-inset); } html[data-theme="light"] body:not(.admin-body) .return-credit.is-used .return-credit-label, html[data-theme="light"] body:not(.admin-body) .return-credit.is-used .return-credit-code { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .return-photo-link { background: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .return-photo-link:hover { border-color: var(--moto-border-hover); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .return-video-icon { background: var(--moto-red-glow); color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .feedback-preview { background: #ffffff; border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .feedback-media img { border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .feedback-preview .admin-reply { border-top-color: var(--moto-border-subtle); color: var(--moto-red-dark); } html[data-theme="light"] body:not(.admin-body) .returns-empty-state { border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .returns-empty-icon { background: var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .timeline::before, html[data-theme="light"] body:not(.admin-body) .timeline-icon { background: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .timeline-icon { color: var(--moto-text); border-color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .timeline-step.active .timeline-icon, html[data-theme="light"] body:not(.admin-body) .timeline-step.completed .timeline-icon { background: var(--moto-red); color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .payment-upload-area { background: var(--moto-panel-soft); border-color: var(--moto-border-hover); } /* Favorites grid buttons (profile.css, !important throughout) */ html[data-theme="light"] body:not(.admin-body) .favorites-card-actions .btn-fav-view { background: var(--moto-panel-inset) !important; color: var(--moto-text) !important; border-color: var(--moto-border-subtle) !important; } html[data-theme="light"] body:not(.admin-body) .favorites-card-actions .btn-fav-view:hover { background: var(--moto-panel-hover) !important; color: var(--moto-text) !important; border-color: var(--moto-border-hover) !important; } html[data-theme="light"] body:not(.admin-body) .favorite-remove-btn { background: rgba(255, 255, 255, 0.92) !important; } /* -------------------------------------------------------------------------- Orders — home-orders.css (.ord-*) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .ord-muted, html[data-theme="light"] body:not(.admin-body) .ord-inline-status, html[data-theme="light"] body:not(.admin-body) .ord-money span, html[data-theme="light"] body:not(.admin-body) .ord-bill dt, html[data-theme="light"] body:not(.admin-body) .ord-empty, html[data-theme="light"] body:not(.admin-body) .ord-empty-filter { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .ord-code, html[data-theme="light"] body:not(.admin-body) .ord-pickup-line strong, html[data-theme="light"] body:not(.admin-body) .ord-item-name, html[data-theme="light"] body:not(.admin-body) .ord-item-total, html[data-theme="light"] body:not(.admin-body) .ord-money strong, html[data-theme="light"] body:not(.admin-body) .ord-details h4, html[data-theme="light"] body:not(.admin-body) .ord-bill dd, html[data-theme="light"] body:not(.admin-body) .ord-bill .ord-bill-total dt, html[data-theme="light"] body:not(.admin-body) .ord-bill .ord-bill-total dd, html[data-theme="light"] body:not(.admin-body) .ord-payments li strong, html[data-theme="light"] body:not(.admin-body) .ord-empty h3, html[data-theme="light"] body:not(.admin-body) .ord-step.is-active .ord-step-label { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .ord-tab { background: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .ord-tab:hover { color: var(--moto-text); border-color: var(--moto-border-hover); } html[data-theme="light"] body:not(.admin-body) .ord-tab.is-active { color: var(--moto-text); background: var(--moto-red-glow); border-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .ord-tab-count { background: var(--moto-panel-inset); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .ord-tab-count.is-alert { background: var(--moto-red); color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .ord-card { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } html[data-theme="light"] body:not(.admin-body) .ord-card:hover { border-color: var(--moto-border-hover); } html[data-theme="light"] body:not(.admin-body) .ord-headline { background: var(--moto-panel-soft); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .ord-headline.is-grey { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .ord-note, html[data-theme="light"] body:not(.admin-body) .ord-inline-status.is-error, html[data-theme="light"] body:not(.admin-body) .ord-payments .is-rejected { color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .ord-pickup, html[data-theme="light"] body:not(.admin-body) .ord-money > div { background: var(--moto-panel-soft); border-color: var(--moto-border); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .ord-pickup-line.is-note, html[data-theme="light"] body:not(.admin-body) .ord-step-label small, html[data-theme="light"] body:not(.admin-body) .ord-money small, html[data-theme="light"] body:not(.admin-body) .ord-payments .is-pending { color: #8a5a00; } html[data-theme="light"] body:not(.admin-body) .ord-link { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .ord-link:hover { color: var(--moto-red-dark); } html[data-theme="light"] body:not(.admin-body) .ord-inline-form { border-top-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .ord-inline-form input[type="date"], html[data-theme="light"] body:not(.admin-body) .ord-inline-form textarea { background: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-text); color-scheme: light; } html[data-theme="light"] body:not(.admin-body) .ord-step::before, html[data-theme="light"] body:not(.admin-body) .ord-step-dot { background: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .ord-step-dot { border-color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .ord-step.is-done::before, html[data-theme="light"] body:not(.admin-body) .ord-step.is-active::before, html[data-theme="light"] body:not(.admin-body) .ord-step.is-done .ord-step-dot, html[data-theme="light"] body:not(.admin-body) .ord-step.is-active .ord-step-dot { background: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .ord-step-label { color: var(--moto-text-dim); } html[data-theme="light"] body:not(.admin-body) .ord-step.is-done .ord-step-label { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .ord-items, html[data-theme="light"] body:not(.admin-body) .ord-item + .ord-item, html[data-theme="light"] body:not(.admin-body) .ord-details { border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .ord-item-img { background: var(--moto-panel-inset); } html[data-theme="light"] body:not(.admin-body) .ord-money strong.is-due { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .ord-money .is-paid, html[data-theme="light"] body:not(.admin-body) .ord-payments .is-approved { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .ord-btn--outline { border-color: var(--moto-border-subtle); color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .ord-btn--outline:hover { border-color: var(--moto-red); color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .ord-details { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .ord-bill .ord-bill-total { border-top-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .ord-empty { border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .ord-pill.is-amber { color: #8a5a00; } html[data-theme="light"] body:not(.admin-body) .ord-pill.is-red { color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .ord-pill.is-blue { color: #1d4ed8; } html[data-theme="light"] body:not(.admin-body) .ord-pill.is-green { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .ord-pill.is-grey { color: var(--moto-muted); } @media (max-width: 600px) { html[data-theme="light"] body:not(.admin-body) .ord-step::before, html[data-theme="light"] body:not(.admin-body) .ord-step.is-active::before { background: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .ord-step.is-done::before { background: var(--moto-red); } } /* -------------------------------------------------------------------------- Collections — home-collections.css (vouchers, favorites) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .voucher-card, html[data-theme="light"] body:not(.admin-body) .collection-card { background: #ffffff; border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .voucher-card { border-top-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .voucher-card.is-store-credit { border-top-color: #15803d; } html[data-theme="light"] body:not(.admin-body) .voucher-discount { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .voucher-card.is-store-credit .voucher-discount { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .voucher-card h3, html[data-theme="light"] body:not(.admin-body) .collection-info h4, html[data-theme="light"] body:not(.admin-body) .collection-empty-box h3 { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .voucher-card p, html[data-theme="light"] body:not(.admin-body) .voucher-card small, html[data-theme="light"] body:not(.admin-body) .collection-info p, html[data-theme="light"] body:not(.admin-body) .collection-empty, html[data-theme="light"] body:not(.admin-body) .collection-empty-box p { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .voucher-copy-btn { border-color: var(--moto-red); color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .voucher-copy-btn:hover, html[data-theme="light"] body:not(.admin-body) .voucher-copy-btn:focus-visible { background: var(--moto-red); color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .collection-card:hover { border-color: var(--moto-red); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } html[data-theme="light"] body:not(.admin-body) .collection-img { background: var(--moto-panel-inset); } html[data-theme="light"] body:not(.admin-body) .collection-info .view-link { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .collection-empty, html[data-theme="light"] body:not(.admin-body) .collection-empty-box { border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .collection-empty-box { background: var(--moto-panel-soft); } html[data-theme="light"] body:not(.admin-body) .collection-empty-icon { background: var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .create-collection-btn { border-color: var(--moto-border-subtle); color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .create-collection-btn:hover { border-color: var(--moto-red); color: var(--moto-red); background: var(--moto-red-glow); } /* Favorites empty state and its buttons are inline-styled by home-collections.js */ html[data-theme="light"] body:not(.admin-body) .collection-empty-box h3 { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .collection-empty-box p { color: var(--moto-muted) !important; } html[data-theme="light"] body:not(.admin-body) .btn-create-collection { background: var(--moto-panel-inset) !important; border-color: var(--moto-border-subtle) !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .btn-create-collection:hover { background: var(--moto-panel-hover) !important; border-color: var(--moto-border-hover) !important; } /* -------------------------------------------------------------------------- Product page — home-product.css (+ the related-title rule in homepage.css) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .product-image-side { background: var(--moto-panel-inset); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .product-stock-watermark { background: rgba(255, 255, 255, 0.78); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .view-reviews { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .view-reviews:hover { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .product-price, html[data-theme="light"] body:not(.admin-body) .related-section, html[data-theme="light"] body:not(.admin-body) .reviews-section { border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .product-desc, html[data-theme="light"] body:not(.admin-body) .bar-row, html[data-theme="light"] body:not(.admin-body) .review-body, html[data-theme="light"] body:not(.admin-body) .review-reply { color: var(--moto-text-secondary); } html[data-theme="light"] body:not(.admin-body) .color-label-header .option-label, html[data-theme="light"] body:not(.admin-body) .option-group label, html[data-theme="light"] body:not(.admin-body) .review-composer label, html[data-theme="light"] body:not(.admin-body) .review-form-message, html[data-theme="light"] body:not(.admin-body) .review-empty, html[data-theme="light"] body:not(.admin-body) .reviews-empty-state { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .selected-color-text, html[data-theme="light"] body:not(.admin-body) .rating-score, html[data-theme="light"] body:not(.admin-body) .review-composer-heading, html[data-theme="light"] body:not(.admin-body) .review-name, html[data-theme="light"] body:not(.admin-body) .review-reply strong, html[data-theme="light"] body:not(.admin-body) .reviews-empty-state h4 { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .option-group select, html[data-theme="light"] body:not(.admin-body) .option-group input, html[data-theme="light"] body:not(.admin-body) .review-composer select, html[data-theme="light"] body:not(.admin-body) .review-composer textarea { background: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .option-group select:focus, html[data-theme="light"] body:not(.admin-body) .option-group input:focus, html[data-theme="light"] body:not(.admin-body) .review-composer select:focus, html[data-theme="light"] body:not(.admin-body) .review-composer textarea:focus { border-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .qty-selector, html[data-theme="light"] body:not(.admin-body) .qty-selector.compact-qty { background: #ffffff !important; border-color: var(--moto-border-subtle) !important; } html[data-theme="light"] body:not(.admin-body) .qty-selector button, html[data-theme="light"] body:not(.admin-body) .qty-selector.compact-qty button, html[data-theme="light"] body:not(.admin-body) .qty-selector input, html[data-theme="light"] body:not(.admin-body) .qty-selector.compact-qty input, html[data-theme="light"] body:not(.admin-body) .option-group .qty-selector input { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .qty-selector button:hover, html[data-theme="light"] body:not(.admin-body) .qty-selector.compact-qty button:hover { background: var(--moto-red) !important; color: #ffffff !important; } html[data-theme="light"] body:not(.admin-body) .rating-summary { background: #ffffff; border-color: var(--moto-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } html[data-theme="light"] body:not(.admin-body) .progress-track { background: var(--moto-panel-hover); } html[data-theme="light"] body:not(.admin-body) .btn-write-review:disabled, html[data-theme="light"] body:not(.admin-body) .btn-write-review:disabled:hover { background: var(--moto-panel-hover); color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .btn-submit-review:disabled { background: var(--moto-border-hover); } html[data-theme="light"] body:not(.admin-body) .review-composer { background: var(--moto-panel-soft); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .review-composer-close { border-color: var(--moto-border-subtle); color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .review-composer-close:hover { border-color: var(--moto-red); color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .review-form-message.error { color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .review-form-message.success { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .review-card { background: #ffffff; border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .verified-badge, html[data-theme="light"] body:not(.admin-body) .product-stock-tag.in-stock { color: #15803d !important; } html[data-theme="light"] body:not(.admin-body) .review-media img, html[data-theme="light"] body:not(.admin-body) .review-photos img, html[data-theme="light"] body:not(.admin-body) .review-video { border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .review-media a:hover img, html[data-theme="light"] body:not(.admin-body) .review-video:hover { border-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .review-video:hover { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .review-empty { border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .review-reply { background: var(--moto-panel-soft); border-left-color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .variant-header-row .variant-label, html[data-theme="light"] body:not(.admin-body) .variant-radio-text, html[data-theme="light"] body:not(.admin-body) .product-stock-urgency, html[data-theme="light"] body:not(.admin-body) .product-stock-urgency.low-stock, html[data-theme="light"] body:not(.admin-body) .product-stock-urgency.in-stock, html[data-theme="light"] body:not(.admin-body) .product-stock-urgency.sold-out, html[data-theme="light"] body:not(.admin-body) .product-card-rating .rating-count { color: var(--moto-muted) !important; } html[data-theme="light"] body:not(.admin-body) .product-card-rating { color: var(--moto-text-secondary) !important; } html[data-theme="light"] body:not(.admin-body) .variant-radio-label { background: #ffffff !important; border-color: var(--moto-border-subtle) !important; } html[data-theme="light"] body:not(.admin-body) .variant-radio-label:hover { background: var(--moto-panel-inset) !important; } html[data-theme="light"] body:not(.admin-body) .variant-radio-label.active { border-color: var(--moto-red) !important; background: var(--moto-red-glow) !important; box-shadow: 0 0 12px var(--moto-red-glow) !important; } html[data-theme="light"] body:not(.admin-body) .variant-radio-label:hover .variant-radio-text, html[data-theme="light"] body:not(.admin-body) .variant-radio-label.active .variant-radio-text { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .related-section .related-title { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .related-nav-btn { background: #ffffff !important; border-color: var(--moto-border-subtle) !important; color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .related-nav-btn:hover:not(:disabled) { background: var(--moto-red) !important; border-color: var(--moto-red) !important; color: #ffffff !important; } html[data-theme="light"] body:not(.admin-body) .related-nav-btn:disabled { background: var(--moto-panel-inset) !important; border-color: var(--moto-border) !important; } /* -------------------------------------------------------------------------- Checkout — home-checkout.css (own header; everything inside .checkout-layout plus the order-success overlay) -------------------------------------------------------------------------- */ html[data-theme="light"] body:not(.admin-body) .checkout-main > header.checkout-header { background: #ffffff !important; border-bottom: 1px solid var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .checkout-main > header .navbar { border-bottom-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .back-link, html[data-theme="light"] body:not(.admin-body) .checkout-main > header.checkout-header .back-link { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .back-link:hover, html[data-theme="light"] body:not(.admin-body) .checkout-main > header.checkout-header .back-link:hover { color: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .checkout-heading h1, html[data-theme="light"] body:not(.admin-body) .checkout-layout .section-title-sm, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-title, html[data-theme="light"] body:not(.admin-body) .success-box h2 { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .checkout-heading p { color: var(--moto-muted); } /* Cards: the dark gradients become flat white panels */ html[data-theme="light"] body:not(.admin-body) .checkout-layout .checkout-card, html[data-theme="light"] body:not(.admin-body) .checkout-layout .checkout-summary-inner { background: #ffffff !important; border: 1px solid var(--moto-border) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .checkout-sidebar, html[data-theme="light"] body:not(.admin-body) .checkout-layout > .checkout-sidebar { background: transparent; border-color: var(--moto-border); scrollbar-color: var(--moto-border-subtle) transparent; } /* Text groups */ html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-item, html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-row, html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-item-price, html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-row.total-row, html[data-theme="light"] body:not(.admin-body) .delivery-address-option-copy strong, html[data-theme="light"] body:not(.admin-body) .receive-subpanel-heading h4, html[data-theme="light"] body:not(.admin-body) .delivery-map-heading h4, html[data-theme="light"] body:not(.admin-body) .delivery-service-heading h4, html[data-theme="light"] body:not(.admin-body) .delivery-service-copy strong, html[data-theme="light"] body:not(.admin-body) .delivery-service-price, html[data-theme="light"] body:not(.admin-body) .delivery-route-summary strong, html[data-theme="light"] body:not(.admin-body) .delivery-map-suggestions li, html[data-theme="light"] body:not(.admin-body) .payment-plan-heading strong, html[data-theme="light"] body:not(.admin-body) .payment-method-heading strong, html[data-theme="light"] body:not(.admin-body) .payment-plan-card strong, html[data-theme="light"] body:not(.admin-body) .downpayment-summary strong, html[data-theme="light"] body:not(.admin-body) .payment-proof-heading, html[data-theme="light"] body:not(.admin-body) .payment-form-heading strong, html[data-theme="light"] body:not(.admin-body) .checkout-terms-summary h4, html[data-theme="light"] body:not(.admin-body) .qr-image-slot, html[data-theme="light"] body:not(.admin-body) .qr-payment-copy strong, html[data-theme="light"] body:not(.admin-body) .qr-payment-copy .qr-account-name, html[data-theme="light"] body:not(.admin-body) .qr-account-number strong, html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-title, html[data-theme="light"] body:not(.admin-body) .delivery-quote-acceptance { color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .form-group label, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group > label, html[data-theme="light"] body:not(.admin-body) .checkout-layout .text-moto-muted, html[data-theme="light"] body:not(.admin-body) .checkout-layout .field-hint, html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-desc, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-desc, html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-item-variant, html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-item-pricing, html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-item-price small, html[data-theme="light"] body:not(.admin-body) .summary-meta, html[data-theme="light"] body:not(.admin-body) .delivery-address-option-copy small, html[data-theme="light"] body:not(.admin-body) .delivery-address-mode-status, html[data-theme="light"] body:not(.admin-body) .pickup-schedule-hint, html[data-theme="light"] body:not(.admin-body) .pickup-date-field label, html[data-theme="light"] body:not(.admin-body) .delivery-map-heading p, html[data-theme="light"] body:not(.admin-body) .delivery-service-heading p, html[data-theme="light"] body:not(.admin-body) .delivery-service-copy small, html[data-theme="light"] body:not(.admin-body) .delivery-service-status, html[data-theme="light"] body:not(.admin-body) .delivery-service-empty, html[data-theme="light"] body:not(.admin-body) .delivery-map-status, html[data-theme="light"] body:not(.admin-body) .delivery-route-summary, html[data-theme="light"] body:not(.admin-body) .delivery-map-suggestions li small, html[data-theme="light"] body:not(.admin-body) .delivery-map-suggestions li.is-empty, html[data-theme="light"] body:not(.admin-body) .delivery-package-row .form-group > label, html[data-theme="light"] body:not(.admin-body) .payment-intro p, html[data-theme="light"] body:not(.admin-body) .payment-plan-heading span, html[data-theme="light"] body:not(.admin-body) .payment-method-heading span, html[data-theme="light"] body:not(.admin-body) .payment-plan-card small, html[data-theme="light"] body:not(.admin-body) .payment-method-tag, html[data-theme="light"] body:not(.admin-body) .downpayment-summary > div, html[data-theme="light"] body:not(.admin-body) .downpayment-summary p, html[data-theme="light"] body:not(.admin-body) .checkout-terms, html[data-theme="light"] body:not(.admin-body) .checkout-terms-summary li, html[data-theme="light"] body:not(.admin-body) .payment-proof-help, html[data-theme="light"] body:not(.admin-body) .payment-proof-details .form-group > label, html[data-theme="light"] body:not(.admin-body) .payment-proof-details .field-hint, html[data-theme="light"] body:not(.admin-body) .receipt-ocr-status, html[data-theme="light"] body:not(.admin-body) .payment-reference-status, html[data-theme="light"] body:not(.admin-body) .payment-destination-mask, html[data-theme="light"] body:not(.admin-body) .payment-form-heading span, html[data-theme="light"] body:not(.admin-body) .qr-image-slot small, html[data-theme="light"] body:not(.admin-body) .qr-payment-copy, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .qr-payment-copy, html[data-theme="light"] body:not(.admin-body) .qr-payment-copy small, html[data-theme="light"] body:not(.admin-body) .qr-scan-caption, html[data-theme="light"] body:not(.admin-body) .qr-account-number small, html[data-theme="light"] body:not(.admin-body) .qr-payment-steps li, html[data-theme="light"] body:not(.admin-body) .success-details, html[data-theme="light"] body:not(.admin-body) .success-details strong, html[data-theme="light"] body:not(.admin-body) .checkout-address-grid select:disabled { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .regular-discount-row, html[data-theme="light"] body:not(.admin-body) .regular-customer-summary, html[data-theme="light"] body:not(.admin-body) .checkout-voucher small, html[data-theme="light"] body:not(.admin-body) .receipt-ocr-status.is-success, html[data-theme="light"] body:not(.admin-body) .payment-reference-status.is-success, html[data-theme="light"] body:not(.admin-body) .delivery-map-status.is-success, html[data-theme="light"] body:not(.admin-body) .delivery-service-status.is-success, html[data-theme="light"] body:not(.admin-body) .qr-security-note { color: #15803d; } html[data-theme="light"] body:not(.admin-body) .receipt-ocr-status.is-processing, html[data-theme="light"] body:not(.admin-body) .payment-reference-status.is-processing { color: #8a5a00; } html[data-theme="light"] body:not(.admin-body) .delivery-address-mode-status.is-error, html[data-theme="light"] body:not(.admin-body) .delivery-map-status.is-error, html[data-theme="light"] body:not(.admin-body) .delivery-service-status.is-error, html[data-theme="light"] body:not(.admin-body) .downpayment-summary .downpayment-required, html[data-theme="light"] body:not(.admin-body) .checkout-terms-summary li strong { color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .checkout-terms-summary a { color: #1d4ed8; } html[data-theme="light"] body:not(.admin-body) .downpayment-summary .downpayment-required strong { color: var(--moto-red); } /* Order summary column */ html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-item-image { background: var(--moto-panel-inset); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-divider { background: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .summary-row.total-row, html[data-theme="light"] body:not(.admin-body) .checkout-summary-inner .total-row { border-top-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .checkout-voucher { border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .checkout-voucher label, html[data-theme="light"] body:not(.admin-body) .checkout-voucher > label, html[data-theme="light"] body:not(.admin-body) .checkout-voucher:focus-within > label, html[data-theme="light"] body:not(.admin-body) .checkout-voucher:has(input:not(:placeholder-shown)) > label { color: var(--moto-muted); } html[data-theme="light"] body:not(.admin-body) .delivery-fee-pending-notice { background: #fff7e6; border-color: #f1d49a; color: #7a4b00; } html[data-theme="light"] body:not(.admin-body) .delivery-fee-pending-notice strong { color: #8a5a00; } /* Inputs: plain, floating-label and map/voucher variants */ html[data-theme="light"] body:not(.admin-body) .checkout-layout .form-group input, html[data-theme="light"] body:not(.admin-body) .checkout-layout .form-group select, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group > input, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group > select, html[data-theme="light"] body:not(.admin-body) .checkout-voucher-input input, html[data-theme="light"] body:not(.admin-body) .delivery-map-search input, html[data-theme="light"] body:not(.admin-body) .delivery-package-row select, html[data-theme="light"] body:not(.admin-body) .pickup-date-field input, html[data-theme="light"] body:not(.admin-body) .payment-proof-details input[type="file"] { background-color: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-text); color-scheme: light; } html[data-theme="light"] body:not(.admin-body) .checkout-layout .form-group input::placeholder, html[data-theme="light"] body:not(.admin-body) .checkout-layout .form-group select::placeholder { color: var(--moto-text-dim); } html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group > input:focus, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group > select:focus, html[data-theme="light"] body:not(.admin-body) .checkout-voucher-input input:focus, html[data-theme="light"] body:not(.admin-body) .delivery-map-search input:focus { border-color: var(--moto-red); box-shadow: 0 0 0 3px var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) #deliveryAddressFields.is-default input:read-only, html[data-theme="light"] body:not(.admin-body) #deliveryAddressFields.is-default select:disabled { color: var(--moto-muted); background-color: var(--moto-panel-inset); } html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group > select:required:invalid option, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:focus-within > select:required:invalid { color: var(--moto-text); } html[data-theme="light"] body.is-final-payment-checkout:not(.admin-body) .checkout-main .form-group > select:disabled { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .pickup-date-field label { background: #ffffff; } /* Floating labels (checkout keeps its own copy of the shared pattern) */ html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), > select, > textarea ) > label { color: var(--moto-muted) !important; } html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), > select, > textarea ):focus-within > label, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input[placeholder]:not(:placeholder-shown), > input[readonly], > select:not(:disabled):valid, > select:not(:disabled) > option:checked:not([value=""]), > textarea[placeholder]:not(:placeholder-shown) ) > label, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input[type="date"]:valid, > input:not([type="file"]):required:valid ) > label, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group.has-value > label, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has(> select:not(:disabled) > option:checked:not([value=""])) > label { color: var(--moto-text) !important; } html[data-theme="light"] body:not(.admin-body) .checkout-main #deliveryAddressFields.is-default .form-group:has(> select:disabled) > label, html[data-theme="light"] body.is-final-payment-checkout:not(.admin-body) .checkout-address-grid .form-group:has(> select:disabled) > label { color: var(--moto-muted) !important; } html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), > select, > textarea ):focus-within > label::before, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input[placeholder]:not(:placeholder-shown), > input[readonly], > select:not(:disabled):valid, > select:not(:disabled) > option:checked:not([value=""]), > textarea[placeholder]:not(:placeholder-shown) ) > label::before, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group:has( > input[type="date"]:valid, > input:not([type="file"]):required:valid ) > label::before, html[data-theme="light"] body:not(.admin-body) .checkout-main .form-group.has-value > label::before, html[data-theme="light"] body:not(.admin-body) .checkout-main #deliveryAddressFields.is-default .form-group:has(> select:disabled) > label::before { background: #ffffff; } /* Buttons that sit next to inputs */ html[data-theme="light"] body:not(.admin-body) .checkout-voucher-input button, html[data-theme="light"] body:not(.admin-body) .delivery-map-location-btn, html[data-theme="light"] body:not(.admin-body) .delivery-map-search button, html[data-theme="light"] body:not(.admin-body) .payment-proof-details input[type="file"]::file-selector-button { background: var(--moto-panel-inset); border-color: var(--moto-border-subtle); color: var(--moto-text); } html[data-theme="light"] body:not(.admin-body) .checkout-voucher-input button:hover, html[data-theme="light"] body:not(.admin-body) .delivery-map-location-btn:hover, html[data-theme="light"] body:not(.admin-body) .delivery-map-search button:hover, html[data-theme="light"] body:not(.admin-body) .payment-proof-details input[type="file"]::file-selector-button:hover { background: var(--moto-panel-hover); } /* Sub-panels inside the cards */ html[data-theme="light"] body:not(.admin-body) .receive-subpanel, html[data-theme="light"] body:not(.admin-body) .payment-intro, html[data-theme="light"] body:not(.admin-body) .payment-plan-selection, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-method-fields, html[data-theme="light"] body:not(.admin-body) .downpayment-summary, html[data-theme="light"] body:not(.admin-body) .delivery-map-panel, html[data-theme="light"] body:not(.admin-body) .delivery-service-panel, html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-details, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-details.is-open, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-card:has(input[type="radio"]:checked) .payment-details, html[data-theme="light"] body:not(.admin-body) .payment-proof-details, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-proof-details, html[data-theme="light"] body:not(.admin-body) .qr-payment-panel, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .qr-payment-panel, html[data-theme="light"] body:not(.admin-body) .qr-account-number, html[data-theme="light"] body:not(.admin-body) .delivery-quote-acceptance, html[data-theme="light"] body:not(.admin-body) .success-details { background: var(--moto-panel-soft); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .downpayment-summary > div, html[data-theme="light"] body:not(.admin-body) .delivery-route-summary, html[data-theme="light"] body:not(.admin-body) .payment-method-tag, html[data-theme="light"] body:not(.admin-body) #deliveryMap, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .qr-image-slot { border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .downpayment-summary p { background: transparent; } html[data-theme="light"] body:not(.admin-body) .qr-image-slot, html[data-theme="light"] body:not(.admin-body) .receipt-preview, html[data-theme="light"] body:not(.admin-body) .delivery-map-suggestions { background: #ffffff; border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .delivery-map-suggestions { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); } html[data-theme="light"] body:not(.admin-body) .qr-payment-steps li::before { border-color: var(--moto-border-subtle); color: var(--moto-muted); } /* Selectable cards: delivery mode, payment plan, payment method, courier */ html[data-theme="light"] body:not(.admin-body) .delivery-address-option, html[data-theme="light"] body:not(.admin-body) .payment-plan-card, html[data-theme="light"] body:not(.admin-body) .delivery-service-card, html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-card, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-card-qr { background: #ffffff; border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .delivery-address-option:hover, html[data-theme="light"] body:not(.admin-body) .payment-plan-card:hover, html[data-theme="light"] body:not(.admin-body) .delivery-service-card:hover:not(.is-disabled), html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-card:hover, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-card-qr:hover { border-color: var(--moto-border-hover); } html[data-theme="light"] body:not(.admin-body) .delivery-address-option:has(input:checked), html[data-theme="light"] body:not(.admin-body) .payment-plan-card:has(input:checked), html[data-theme="light"] body:not(.admin-body) .delivery-service-card.is-selected, html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-card:has(input[type="radio"]:checked), html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-card-qr:has(input[type="radio"]:checked) { border-color: var(--moto-red); background: var(--moto-red-glow); } html[data-theme="light"] body:not(.admin-body) .fulfillment-toggle { background: var(--moto-panel-soft); border-color: var(--moto-border); } html[data-theme="light"] body:not(.admin-body) .fulfillment-toggle .delivery-address-option { background: transparent; } html[data-theme="light"] body:not(.admin-body) .fulfillment-toggle .delivery-address-option:hover { background: #ffffff; } html[data-theme="light"] body:not(.admin-body) .fulfillment-toggle .delivery-address-option:has(input:checked) { background: var(--moto-red); } html[data-theme="light"] body:not(.admin-body) .fulfillment-toggle .delivery-address-option:has(input:checked) strong, html[data-theme="light"] body:not(.admin-body) .fulfillment-toggle .delivery-address-option:has(input:checked) small { color: #ffffff; } html[data-theme="light"] body:not(.admin-body) .receive-subpanel .delivery-address-option:has(input:checked) { border-color: var(--moto-text-secondary); background: #ffffff; } html[data-theme="light"] body:not(.admin-body) .checkout-layout .custom-radio, html[data-theme="light"] body:not(.admin-body) .checkout-payment-card .payment-card-qr .custom-radio, html[data-theme="light"] body:not(.admin-body) .delivery-address-radio { background: #ffffff; border-color: var(--moto-border-hover); } html[data-theme="light"] body:not(.admin-body) .checkout-layout .payment-card input[type="radio"]:checked + .custom-radio { border-color: var(--moto-red); } /* Notices */ html[data-theme="light"] body:not(.admin-body) .delivery-payment-window { background: #fff7e6; border-color: #f1d49a; color: #7a4b00; } html[data-theme="light"] body:not(.admin-body) .delivery-payment-window.is-error { border-color: #f3c1c4; color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .delivery-payment-window.is-rejection { color: #b91c1c; } html[data-theme="light"] body:not(.admin-body) .delivery-service-empty { border-color: var(--moto-border-subtle); } html[data-theme="light"] body:not(.admin-body) .checkout-terms-summary { background: #fff5f5; border-color: #f3c1c4; } /* Resizer between the form and the summary */ html[data-theme="light"] body:not(.admin-body) .checkout-resizer-line { background: linear-gradient(transparent, var(--moto-border-subtle) 10%, var(--moto-border-subtle) 90%, transparent); } html[data-theme="light"] body:not(.admin-body) .checkout-resizer-handle, html[data-theme="light"] body:not(.admin-body) .checkout-resizer-tip { background: #ffffff; border-color: var(--moto-border-subtle); color: var(--moto-muted); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); } html[data-theme="light"] body:not(.admin-body) .checkout-resizer:hover .checkout-resizer-handle, html[data-theme="light"] body:not(.admin-body) .checkout-resizer:focus-visible .checkout-resizer-handle { color: var(--moto-red); background: var(--moto-red-glow); border-color: var(--moto-red); } /* Order placed overlay */ html[data-theme="light"] body:not(.admin-body) .success-overlay { background: var(--moto-backdrop); } html[data-theme="light"] body:not(.admin-body) .success-box { background: #ffffff; border-color: var(--moto-border); }