:root {
  --rc-red: #e21b23;
  --rc-red-dark: #b71218;
  --rc-ink: #101214;
  --rc-charcoal: #1a1d21;
  --rc-steel: #3d434a;
  --rc-silver: #d9dde2;
  --rc-paper: #f4f5f7;
  --rc-white: #ffffff;
  --rc-amber: #ffbf24;
  --bs-primary: var(--rc-red);
  --bs-primary-rgb: 226, 27, 35;
  --bs-link-color: #bd151c;
  --bs-link-hover-color: #8f0f14;
}

html { scroll-behavior: smooth; }
body {
  background:
    linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)),
    repeating-linear-gradient(135deg, #eceff2 0 12px, #f7f8f9 12px 24px);
  color: #20242a;
  min-height: 100vh;
}

a { transition: color .18s ease, opacity .18s ease; }

/* Brand header — light metallic header so the black/red logo remains fully visible. */
.rc-navbar {
  background:
    linear-gradient(90deg, rgba(226,27,35,.055), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #edf0f3 100%);
  border-top: 3px solid var(--rc-red);
  border-bottom: 1px solid #cfd4da;
  box-shadow: 0 8px 24px rgba(16,18,20,.12);
}

.rc-navbar .container { min-height: 78px; }
.rc-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: .2rem 0;
  margin-right: 1.25rem;
}
.rc-brand-logo {
  height: 58px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.rc-navbar .nav-link {
  color: #34393f;
  font-weight: 700;
  font-size: .92rem;
}
.rc-navbar .nav-link:hover,
.rc-navbar .nav-link:focus { color: var(--rc-red-dark); }
.rc-navbar .navbar-toggler {
  border-color: #aeb4ba;
}
.rc-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(226,27,35,.14);
}

.rc-nav-search .form-control {
  background: rgba(255,255,255,.98);
  border: 1px solid #c8cdd2;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.025);
}
.rc-nav-search .form-control:focus {
  border-color: var(--rc-red);
  box-shadow: 0 0 0 .2rem rgba(226,27,35,.14);
}

/* Racing hero */
.rc-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #272b30;
  border-radius: 18px;
  padding: clamp(1.45rem, 4vw, 3.25rem);
  color: #fff;
  background:
    linear-gradient(100deg, rgba(12,14,16,.98) 0%, rgba(20,23,27,.95) 58%, rgba(61,9,11,.92) 100%);
  box-shadow: 0 18px 42px rgba(12,14,16,.18);
}
.rc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(125deg, transparent 0 65%, var(--rc-red) 65% 69%, transparent 69% 73%, rgba(255,255,255,.8) 73% 75%, transparent 75%),
    repeating-conic-gradient(from 45deg at 85% 25%, rgba(255,255,255,.32) 0 25%, transparent 0 50%) 0 0/24px 24px;
  mask-image: linear-gradient(to left, #000, transparent 58%);
}
.rc-hero > * { position: relative; z-index: 1; }
.rc-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff7378;
  font-size: .76rem;
  margin-bottom: .65rem;
}
.rc-kicker::before {
  content: "";
  width: 32px;
  height: 3px;
  background: var(--rc-red);
  transform: skewX(-24deg);
}
.rc-hero h1 {
  font-weight: 900;
  letter-spacing: -.035em;
  max-width: 760px;
  text-transform: uppercase;
}
.rc-hero p { color: rgba(255,255,255,.75); max-width: 730px; }
.rc-hero .form-control-lg {
  border: 0;
  min-height: 54px;
  box-shadow: 0 5px 18px rgba(0,0,0,.17);
}

/* Buttons */
.btn-race,
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rc-red);
  --bs-btn-border-color: var(--rc-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rc-red-dark);
  --bs-btn-hover-border-color: var(--rc-red-dark);
  --bs-btn-active-bg: #a40e14;
  --bs-btn-active-border-color: #a40e14;
  font-weight: 700;
}
.btn-race {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 7px 17px rgba(226,27,35,.22);
}
.btn-race::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: -18px;
  width: 34px;
  background: rgba(255,255,255,.12);
  transform: skewX(-20deg);
}
.btn-outline-primary {
  --bs-btn-color: var(--rc-red);
  --bs-btn-border-color: var(--rc-red);
  --bs-btn-hover-bg: var(--rc-red);
  --bs-btn-hover-border-color: var(--rc-red);
}

/* Section headings */
.rc-section-title {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.rc-section-title::before {
  content: "";
  width: 6px;
  height: 1.3em;
  border-radius: 1px;
  background: var(--rc-red);
  transform: skewX(-12deg);
}

/* Category tiles */
.rc-category-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 13px rgba(16,18,20,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rc-category-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 38px;
  height: 100%;
  background: linear-gradient(135deg, transparent 45%, rgba(226,27,35,.12) 45%);
  pointer-events: none;
}
.rc-category-card:hover {
  transform: translateY(-3px);
  border-color: rgba(226,27,35,.55);
  box-shadow: 0 10px 24px rgba(16,18,20,.11);
}

/* Product cards */
.product-card {
  overflow: hidden;
  border: 1px solid #dfe2e6;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16,18,20,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226,27,35,.36);
  box-shadow: 0 14px 30px rgba(16,18,20,.13);
}
.product-card > a { overflow: hidden; background: #e9ecef; }
.product-card img {
  object-fit: cover;
  aspect-ratio: 4/3;
  width: 100%;
  background: #e9ecef;
  transition: transform .28s ease;
}
.product-card:hover img { transform: scale(1.035); }
.product-card .card-title { font-size: 1rem; font-weight: 750; }
.product-card .fw-bold { color: #bd151c; }
.product-card .card-footer { background: #fff !important; }
.product-card .btn-outline-secondary:hover {
  background: var(--rc-ink);
  border-color: var(--rc-ink);
}

/* Generic cards/forms */
.card { border-radius: 12px; }
.form-control, .form-select { border-color: #d4d9df; }
.form-control:focus, .form-select:focus {
  border-color: rgba(226,27,35,.7);
  box-shadow: 0 0 0 .2rem rgba(226,27,35,.12);
}
.offcanvas .card, aside .card { border-top: 3px solid var(--rc-red); }
mark { padding: 0 .1em; background: #fff2ad; }

/* Gallery */
#gallery .carousel-inner {
  background: #111;
  border: 1px solid #d9dde2;
  box-shadow: 0 12px 28px rgba(16,18,20,.12);
}
#gallery img { max-height: 620px; object-fit: contain; background: #15181b; }

/* Pagination */
.pagination {
  --bs-pagination-color: #34383d;
  --bs-pagination-active-bg: var(--rc-red);
  --bs-pagination-active-border-color: var(--rc-red);
  --bs-pagination-hover-color: var(--rc-red);
}

/* Footer */
.rc-footer {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 7px, transparent 7px 14px),
    #101214;
  color: rgba(255,255,255,.72);
  border-top: 3px solid var(--rc-red);
}
.rc-footer a { color: rgba(255,255,255,.9); }
.rc-footer a:hover { color: #ff7378; }

/* Minimal/auth layout */
.rc-auth-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 5%, rgba(226,27,35,.14), transparent 32%),
    #f4f5f7;
}
.rc-auth-shell main > .card,
.rc-auth-card {
  border-top: 4px solid var(--rc-red);
  box-shadow: 0 12px 32px rgba(16,18,20,.1);
}

/* Mobile */
@media (max-width: 991.98px) {
  .rc-navbar .container { min-height: auto; padding-top: .55rem; padding-bottom: .55rem; }
  .rc-brand-logo { height: 50px; width: auto; max-width: 160px; }
  .rc-navbar .navbar-collapse { padding-top: .6rem; }
}
@media (max-width: 575.98px) {
  .form-control, .form-select { font-size: 16px; }
  .table { font-size: .875rem; }
  .btn { min-height: 38px; }
  h1.h4 { font-size: 1.15rem; }
  .rc-hero { border-radius: 14px; }
  .rc-hero h1 { font-size: 1.65rem; }
  .rc-brand-logo { height: 44px; width: auto; max-width: 145px; }
}

.table-actions { display:flex; flex-wrap:wrap; gap:.25rem; justify-content:flex-end; }
.nav-scroller { overflow-x:auto; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; }
.nav-scroller::-webkit-scrollbar { display:none; }

/* ================================================================
   SELLER GARAGE
   Dedicated seller-area treatment. Public pages remain unchanged.
   ================================================================ */
.rc-seller-area {
  background:
    radial-gradient(circle at 92% 3%, rgba(226,27,35,.07), transparent 25%),
    linear-gradient(rgba(247,248,249,.96), rgba(247,248,249,.96)),
    repeating-linear-gradient(135deg, #e9ecef 0 10px, #f7f8f9 10px 20px);
}

.rc-seller-toolbar {
  position: relative;
  z-index: 10;
  background:
    linear-gradient(90deg, rgba(226,27,35,.11), transparent 36%),
    #1a1d21;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.rc-seller-toolbar::after {
  content: "";
  display: block;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--rc-red) 0 32px, #fff 32px 64px, #222 64px 96px);
  opacity: .82;
}
.rc-seller-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 54px;
}
.rc-seller-mode {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: #fff;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 1rem;
  border-right: 1px solid rgba(255,255,255,.14);
}
.rc-seller-mode-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rc-red);
  box-shadow: 0 0 0 4px rgba(226,27,35,.16), 0 0 14px rgba(226,27,35,.75);
}
.rc-seller-links {
  display: flex;
  align-items: stretch;
  gap: .15rem;
  min-width: 0;
  overflow-x: auto;
}
.rc-seller-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: .65rem .78rem;
  color: rgba(255,255,255,.70);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.rc-seller-link:hover,
.rc-seller-link:focus {
  color: #fff;
  background: rgba(255,255,255,.04);
}
.rc-seller-link.active {
  color: #fff;
  background: rgba(226,27,35,.10);
}
.rc-seller-link.active::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: 0;
  height: 3px;
  background: var(--rc-red);
  transform: skewX(-18deg);
}

/* Page titles resemble an RC pit-board label. */
.rc-seller-area main h1.h4,
.rc-seller-area main h1.h5 {
  position: relative;
  font-weight: 850;
  letter-spacing: -.015em;
  color: #171a1e;
}
.rc-seller-area main h1.h4::before,
.rc-seller-area main h1.h5::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1.05em;
  margin-right: .55rem;
  vertical-align: -.08em;
  background: var(--rc-red);
  transform: skewX(-13deg);
}

/* Cards / control panels */
.rc-seller-area main > .card,
.rc-seller-area main .row > [class*="col-"] > .card,
.rc-seller-area main form.card {
  border: 1px solid #d9dde2;
  box-shadow: 0 6px 18px rgba(16,18,20,.065);
}
.rc-seller-area .card-header {
  border-bottom: 1px solid #e1e4e8;
  background:
    linear-gradient(90deg, rgba(226,27,35,.055), transparent 34%),
    #fff !important;
  font-weight: 750;
}
.rc-seller-area .card-header strong {
  position: relative;
  padding-left: .75rem;
}
.rc-seller-area .card-header strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 3px;
  height: 80%;
  background: var(--rc-red);
}

/* Dashboard KPI cards */
.rc-seller-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  justify-content: center;
  background:
    linear-gradient(145deg, #fff 0 72%, #f2f3f5 72% 100%);
}
.rc-seller-stat-card::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -25px;
  width: 44px;
  height: 130px;
  background: rgba(226,27,35,.065);
  transform: rotate(22deg);
}
.rc-seller-stat-card .rc-stat-value {
  color: #14171a;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}
.rc-seller-stat-card .rc-stat-label {
  margin-top: .35rem;
  color: #6b727a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

/* Dashboard welcome / quick actions */
.rc-seller-welcome {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid #25292e;
  border-radius: 13px;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(16,18,20,.99), rgba(28,31,35,.98) 65%, rgba(78,10,13,.96));
  box-shadow: 0 12px 26px rgba(16,18,20,.15);
}
.rc-seller-welcome::after {
  content: "";
  position: absolute;
  inset: 0 0 0 62%;
  opacity: .14;
  background: repeating-conic-gradient(from 45deg, #fff 0 25%, transparent 0 50%) 0 0/22px 22px;
}
.rc-seller-welcome > * { position: relative; z-index: 1; }
.rc-seller-welcome h1 { color: #fff !important; }
.rc-seller-welcome h1::before { display: none !important; }
.rc-seller-welcome .text-muted { color: rgba(255,255,255,.62) !important; }
.rc-seller-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1rem;
}
.rc-seller-actions .btn {
  font-weight: 700;
}

/* Tables: clean workshop/inventory look */
.rc-seller-area .table-responsive {
  border-radius: 0 0 12px 12px;
}
.rc-seller-area table.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(226,27,35,.035);
}
.rc-seller-area .table > thead.table-light > tr > th,
.rc-seller-area .table > thead > tr > th {
  color: #4f565e;
  background: #f0f2f4 !important;
  border-bottom-color: #d3d8de;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rc-seller-area .table > tbody > tr:last-child > td {
  border-bottom: 0;
}
.rc-seller-area .table img {
  border: 1px solid #d6dbe0;
  border-radius: 8px;
  background: #eceff2;
}

/* Seller filters and action buttons */
.rc-seller-area .btn-outline-secondary {
  --bs-btn-color: #353a40;
  --bs-btn-border-color: #bfc5cb;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #202428;
  --bs-btn-hover-border-color: #202428;
  font-weight: 650;
}
.rc-seller-area .btn-dark,
.rc-seller-area .btn-outline-dark:hover {
  background: #202428;
  border-color: #202428;
}
.rc-seller-area .form-control,
.rc-seller-area .form-select {
  background-color: rgba(255,255,255,.94);
}
.rc-seller-area form.row.g-2.mb-3 {
  padding: .8rem;
  border: 1px solid #dce0e4;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 13px rgba(16,18,20,.04);
}

/* Make stock/request statuses easier to scan. */
.rc-seller-area .badge {
  font-weight: 750;
  letter-spacing: .01em;
}

@media (max-width: 991.98px) {
  .rc-seller-toolbar-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding-top: .45rem;
  }
  .rc-seller-mode {
    min-height: 32px;
    border-right: 0;
    padding-right: 0;
  }
  .rc-seller-link { min-height: 44px; }
}

@media (max-width: 575.98px) {
  .rc-seller-mode { font-size: .7rem; }
  .rc-seller-link { padding-left: .62rem; padding-right: .62rem; font-size: .8rem; }
  .rc-seller-stat-card { min-height: 82px; }
  .rc-seller-stat-card .rc-stat-value { font-size: 1.25rem; }
}

.rc-seller-welcome .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.42);
  --bs-btn-hover-color: #111;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}
.rc-seller-area main h2.h6 {
  font-weight: 800;
  color: #292e33;
  letter-spacing: .015em;
}