/* CAR DECORATION BD — page-scoped color layer for Checkout/Product/Confirmation.
   STEP 05 maps the core page accent tokens to central theme variables while
   retaining page-specific line/shadow shades as production-safe fallbacks. */

:root {
  --car-red: var(--brand-primary, #d90416);
  --car-red-dark: var(--brand-primary-hover, #a60010);
  --car-red-soft: var(--brand-primary-soft, #fff3f4);
  --car-red-line: #f0c9cd;
  --car-black: var(--brand-secondary, #111111);
  --car-white: #ffffff;
}

/* Shared header accents on these two pages only. */
body.checkout-page .navbar,
body.product-page .navbar {
  border-bottom-color: var(--car-red-line) !important;
  box-shadow: 0 3px 14px rgba(17, 17, 17, .08) !important;
}

body.checkout-page [data-ks-language][aria-pressed="true"],
body.product-page [data-ks-language][aria-pressed="true"] {
  background: var(--car-red) !important;
  border-color: var(--car-red) !important;
  color: var(--car-white) !important;
}

body.checkout-page .drawer-head,
body.product-page .drawer-head {
  border-bottom-color: var(--car-red) !important;
}

/* Checkout: red actions and progress, black primary text, soft-red selection. */
body.checkout-page {
  --gold: var(--car-red) !important;
  --gold2: var(--car-red-dark) !important;
  --checkout-red: var(--car-red) !important;
  --checkout-red-dark: var(--car-red-dark) !important;
  --checkout-error: var(--car-red) !important;
  --checkout-line: #e7e7e7 !important;
  background: #fafafa !important;
}

body.checkout-page .page-header {
  border-bottom: 1px solid var(--car-red-line) !important;
}

body.checkout-page .checkout-step.active,
body.checkout-page .area-box.selected .area-title,
body.checkout-page .os-row.total span:last-child {
  color: var(--car-red-dark) !important;
}

body.checkout-page .checkout-step.active .checkout-step-circle {
  background: var(--car-red) !important;
  border-color: var(--car-red) !important;
  color: var(--car-white) !important;
  box-shadow: 0 5px 12px rgba(217, 4, 22, .24) !important;
}

body.checkout-page .checkout-step-line.done {
  border-color: var(--car-red) !important;
}

body.checkout-page .section-icon {
  color: var(--car-red) !important;
}

body.checkout-page .form-group input:focus,
body.checkout-page .form-group textarea:focus,
body.checkout-page .form-group select:focus,
body.checkout-page .checkout-coupon-row input:focus {
  border-color: var(--car-red) !important;
  box-shadow: 0 0 0 3px rgba(217, 4, 22, .11) !important;
}

body.checkout-page .area-box:hover,
body.checkout-page .area-box.selected {
  border-color: var(--car-red) !important;
}

body.checkout-page .area-box.selected {
  background: var(--car-red-soft) !important;
  box-shadow: 0 0 0 1px var(--car-red) inset !important;
}

body.checkout-page .coupon-row button,
body.checkout-page .checkout-coupon-row button,
body.checkout-page .place-order-btn {
  background: var(--car-red) !important;
  color: var(--car-white) !important;
  box-shadow: 0 6px 16px rgba(217, 4, 22, .24) !important;
}

body.checkout-page .coupon-row button:hover,
body.checkout-page .checkout-coupon-row button:hover,
body.checkout-page .place-order-btn:hover {
  background: var(--car-red-dark) !important;
  color: var(--car-white) !important;
}

body.checkout-page .os-remove:hover {
  background: var(--car-red-soft) !important;
  color: var(--car-red) !important;
}

/* Product: keep gallery/layout intact and recolor interactive accents only. */
body.product-page {
  --gold: var(--car-red) !important;
  --gold2: var(--car-red-dark) !important;
  --red: var(--car-red) !important;
  background: #fafafa !important;
}

body.product-page .product-gallery .img-badge.bd,
body.product-page .product-gallery .img-badge.bo {
  background: var(--car-red) !important;
  color: var(--car-white) !important;
  box-shadow: 0 5px 13px rgba(217, 4, 22, .22) !important;
}

body.product-page .product-gallery .thumb.active {
  border-color: var(--car-red) !important;
  box-shadow: 0 0 0 1px var(--car-red), 0 5px 13px rgba(217, 4, 22, .18) !important;
}

body.product-page .product-gallery .gallery-dot.active {
  background: var(--car-red) !important;
}

body.product-page .product-cat,
body.product-page .product-voucher-code,
body.product-page .product-voucher-code-main,
body.product-page .dtab.active,
body.product-page .bnav-item.active,
body.product-page .bnav-item:hover,
body.product-page .ks-bnav-item.active,
body.product-page .ks-bnav-item:hover {
  color: var(--car-red) !important;
}

body.product-page .dtab.active {
  border-bottom-color: var(--car-red) !important;
}

body.product-page .btn-buy,
body.product-page .sticky-btn-g,
body.product-page .wr-submit-btn,
body.product-page .review-login-btn,
body.product-page .checkout-btn,
body.product-page .checkout-cta,
body.product-page .cart-foot .checkout-btn {
  background: var(--car-red) !important;
  color: var(--car-white) !important;
  box-shadow: 0 6px 15px rgba(217, 4, 22, .22) !important;
}

body.product-page .btn-buy:hover,
body.product-page .sticky-btn-g:hover,
body.product-page .wr-submit-btn:hover,
body.product-page .review-login-btn:hover,
body.product-page .checkout-btn:hover,
body.product-page .checkout-cta:hover {
  background: var(--car-red-dark) !important;
  color: var(--car-white) !important;
}

body.product-page .rbar-fill,
body.product-page .rc-avatar {
  background: var(--car-red) !important;
}

body.product-page .rc-avatar {
  color: var(--car-white) !important;
}

body.product-page .product-voucher {
  border-color: rgba(217, 4, 22, .38) !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--car-red-soft) 100%) !important;
}

body.product-page .product-voucher::before {
  background: linear-gradient(180deg, var(--car-black), var(--car-red)) !important;
}

body.product-page .ks-bottom-nav,
body.product-page .bottom-nav {
  border-top-color: var(--car-red-line) !important;
}

/* Order confirmation: black success mark with red brand accents. */
body.order-confirmation-page {
  --gold: var(--car-red) !important;
  --gold2: var(--car-red-dark) !important;
  --red: var(--car-red) !important;
  background: #fafafa !important;
}

body.order-confirmation-page .navbar {
  border-bottom-color: var(--car-red-line) !important;
  box-shadow: 0 3px 14px rgba(17, 17, 17, .08) !important;
}

body.order-confirmation-page [data-ks-language][aria-pressed="true"] {
  background: var(--car-red) !important;
  border-color: var(--car-red) !important;
  color: var(--car-white) !important;
}

body.order-confirmation-page .drawer-head {
  border-bottom-color: var(--car-red) !important;
}

body.order-confirmation-page .oc-hero .tick {
  background: var(--car-black) !important;
  color: var(--car-white) !important;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--car-red), 0 10px 24px rgba(17, 17, 17, .20) !important;
}

body.order-confirmation-page .receipt {
  border-color: var(--car-red-line) !important;
  border-top: 3px solid var(--car-red) !important;
  box-shadow: 0 8px 24px rgba(17, 17, 17, .08) !important;
}

/* Compact order identity block: the global header already carries the logo. */
body.order-confirmation-page .receipt-head {
  display: block !important;
  padding: 1.15rem 1.3rem 1.05rem !important;
  background:
    radial-gradient(circle at 50% -35%, rgba(217, 4, 22, .12), transparent 58%),
    linear-gradient(180deg, var(--car-white), #fffafa) !important;
  border-bottom: 1px solid var(--car-red-line) !important;
}

body.order-confirmation-page .receipt-meta {
  width: 100% !important;
  align-items: stretch !important;
  text-align: center !important;
  color: var(--car-black) !important;
}

body.order-confirmation-page .receipt-order-main {
  position: relative;
  padding-bottom: .9rem;
  margin-bottom: .8rem;
}

body.order-confirmation-page .receipt-order-main::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: var(--car-red);
  transform: translateX(-50%);
}

body.order-confirmation-page .receipt-meta .order-no {
  margin-top: .12rem;
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
  letter-spacing: .045em !important;
}

body.order-confirmation-page .receipt-meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: .65rem;
}

body.order-confirmation-page .receipt-meta-item {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .55rem .6rem;
  background: var(--car-white);
  border: 1px solid var(--car-red-line);
  border-radius: 10px;
}

body.order-confirmation-page .receipt-meta-label {
  margin-bottom: .18rem;
  color: #696969 !important;
  font-size: .62rem !important;
  font-weight: 700;
  letter-spacing: .075em !important;
}

body.order-confirmation-page .receipt-meta-value {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
}

body.order-confirmation-page .receipt-meta-item .status-pill {
  margin-top: 0;
}

body.order-confirmation-page .receipt-meta .order-no,
body.order-confirmation-page .tot-row.grand span:last-child,
body.order-confirmation-page .a2hs-box:hover .a2hs-caption,
body.order-confirmation-page .bnav-item.active,
body.order-confirmation-page .bnav-item:hover,
body.order-confirmation-page .ks-bnav-item.active,
body.order-confirmation-page .ks-bnav-item:hover {
  color: var(--car-red) !important;
}

body.order-confirmation-page .status-pending {
  background: var(--car-red-soft) !important;
  color: var(--car-red-dark) !important;
  border: 1px solid var(--car-red-line) !important;
}

body.order-confirmation-page .a2hs-modal .close-btn,
body.order-confirmation-page .oc-btn.primary {
  background: var(--car-red) !important;
  color: var(--car-white) !important;
  box-shadow: 0 6px 16px rgba(217, 4, 22, .22) !important;
}

body.order-confirmation-page .a2hs-modal .close-btn:hover,
body.order-confirmation-page .oc-btn.primary:hover {
  background: var(--car-red-dark) !important;
  color: var(--car-white) !important;
}

body.order-confirmation-page .receipt-foot {
  background: var(--car-red-soft) !important;
  border-top-color: var(--car-red-line) !important;
}

body.order-confirmation-page .ks-bottom-nav,
body.order-confirmation-page .bottom-nav {
  border-top-color: var(--car-red-line) !important;
}

/* Order page: CAR DECORATION BD red, black and white theme. */
body.order-page {
  --gold: var(--car-red) !important;
  --gold2: var(--car-red-dark) !important;
  --cream: #fafafa !important;
  --border: var(--car-red-line) !important;
  --red: var(--car-red) !important;
  background: #fafafa !important;
}

body.order-page .navbar {
  border-bottom-color: var(--car-red-line) !important;
  box-shadow: 0 3px 14px rgba(17, 17, 17, .08) !important;
}

body.order-page [data-ks-language][aria-pressed="true"] {
  background: var(--car-red) !important;
  border-color: var(--car-red) !important;
  color: var(--car-white) !important;
}

body.order-page .drawer-head {
  border-bottom-color: var(--car-red) !important;
}

body.order-page #ks-order-tabs {
  background: var(--car-white) !important;
  border-bottom-color: var(--car-red-line) !important;
}

body.order-page #ks-order-tabs > .tab {
  border-color: var(--car-red-line) !important;
  background: var(--car-white) !important;
  color: #555 !important;
}

body.order-page #ks-order-tabs > .tab.active,
body.order-page #ks-order-tabs > .tab:hover {
  background: var(--car-red) !important;
  border-color: var(--car-red) !important;
  color: var(--car-white) !important;
  box-shadow: 0 5px 14px rgba(217, 4, 22, .18) !important;
}

body.order-page .order-card,
body.order-page .history-card,
body.order-page .track-box,
body.order-page .suggestion-card {
  border-color: var(--car-red-line) !important;
  box-shadow: 0 5px 16px rgba(17, 17, 17, .07) !important;
}

body.order-page .order-card-head {
  background: var(--car-black) !important;
  border-bottom-color: var(--car-black) !important;
}

body.order-page .order-card-head .order-id,
body.order-page .order-card-head .order-date {
  color: var(--car-white) !important;
}

body.order-page .status-pending {
  background: #2b2b2b !important;
  color: var(--car-white) !important;
  border: 1px solid #555 !important;
}

body.order-page .order-total,
body.order-page .history-total,
body.order-page .suggestion-price,
body.order-page .s-row.grand span:last-child {
  color: var(--car-red-dark) !important;
}

body.order-page .order-item-thumb,
body.order-page .history-thumb,
body.order-page .sp-ico {
  background: var(--car-red-soft) !important;
  border-color: var(--car-red-line) !important;
}

body.order-page .empty-btn,
body.order-page .track-btn,
body.order-page .suggestion-badge,
body.order-page .track-step.done .ts-dot,
body.order-page .s-step.done .s-dot {
  background: var(--car-red) !important;
  border-color: var(--car-red) !important;
  color: var(--car-white) !important;
}

body.order-page .track-input:focus,
body.order-page .complaint-dialog textarea:focus,
body.order-page .track-step.active .ts-dot,
body.order-page .s-step.active .s-dot {
  border-color: var(--car-red) !important;
}

body.order-page .track-step.active .ts-dot,
body.order-page .s-step.active .s-dot {
  box-shadow: 0 0 0 4px rgba(217, 4, 22, .15) !important;
}

body.order-page .track-step.done::after,
body.order-page .s-step.done::after {
  background: var(--car-red) !important;
}

body.order-page .track-status-message,
body.order-page .order-warranty-card,
body.order-page .complaint-upload-label {
  background: var(--car-red-soft) !important;
  border-color: var(--car-red-line) !important;
}

body.order-page .sheet-head {
  border-bottom-color: var(--car-red-line) !important;
}

body.order-page nav.ks-reference-bottom {
  border-top-color: var(--car-red) !important;
}

/* Match Shop: inactive icons stay dark and labels remain readable. */
body.order-page nav.ks-reference-bottom .ks-bnav-item:not(.active) {
  color: #5f6368 !important;
  opacity: 1 !important;
}

body.order-page nav.ks-reference-bottom .ks-bnav-item:not(.active) .ks-bnav-ico {
  color: #353638 !important;
  opacity: 1 !important;
}

body.order-page nav.ks-reference-bottom .ks-bnav-item:not(.active) .ks-bnav-label {
  color: #5f6368 !important;
  opacity: 1 !important;
}

body.order-page nav.ks-reference-bottom .ks-bnav-item.active,
body.order-page nav.ks-reference-bottom .ks-bnav-item:hover,
body.order-page nav.ks-reference-bottom .ks-bnav-item.active .ks-bnav-ico {
  color: var(--car-red) !important;
}

body.order-page nav.ks-reference-bottom .ks-bnav-badge {
  background: var(--car-red) !important;
}

body.order-page nav.ks-reference-bottom .ks-bnav-item:focus-visible {
  outline-color: var(--car-red) !important;
}

@media (max-width: 380px) {
  body.order-confirmation-page .receipt-head {
    padding-inline: 1rem !important;
  }

  body.order-confirmation-page .receipt-meta-grid {
    grid-template-columns: 1fr;
  }

  body.order-confirmation-page .receipt-meta-item {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.checkout-page *,
  body.product-page *,
  body.order-page *,
  body.order-confirmation-page * {
    transition-duration: .01ms !important;
  }
}