/* ═══════════════════════════════════════════
   VA Precision Parts LLC — Custom Styles
═══════════════════════════════════════════ */

:root {
  --navy:  #1F4E79;
  --gold:  #C8A400;
  --gold-light: #FFD700;
  --light: #f0f4f8;
}

body {
  background: var(--light);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Colors ── */
.text-navy  { color: var(--navy) !important; }
.text-gold  { color: var(--gold) !important; }
.bg-navy    { background-color: var(--navy) !important; }
.bg-gold    { background-color: var(--gold) !important; }
.btn-navy   { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: #163a5e; color: #fff; border-color: #163a5e; }
.btn-gold   { background: var(--gold); color: #1a1a1a; border-color: var(--gold); font-weight:700; }
.btn-gold:hover { background: #b39300; color: #1a1a1a; }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* ── Top bar ── */
.topbar {
  background: #163a5e;
  color: #aac4e0;
  font-size: 0.8rem;
}

/* ── Navbar ── */
.navbar.bg-navy { background-color: var(--navy) !important; }
.search-mode-select { max-width: 110px; font-size:0.85rem; border-radius:4px 0 0 4px !important; }

/* ── Hero ── */
.hero-section {
  background: linear-gradient(135deg, #1F4E79 0%, #0d2d4d 60%, #163a5e 100%);
  min-height: 420px;
  display: flex;
  align-items: center;
}
.hero-search-form .input-group { border-radius: 8px; overflow: hidden; }
.hero-icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hero-appliance-icon {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #fff;
}
.hero-appliance-icon i { font-size: 2.5rem; display: block; margin-bottom: 6px; color: var(--gold-light); }
.hero-appliance-icon span { font-size: 0.85rem; font-weight: 600; }

/* ── Section titles ── */
.section-title {
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 10px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Category cards ── */
.category-card-inner {
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.category-card-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(31,78,121,0.15) !important;
}
.category-icon { font-size: 2.2rem; color: var(--gold); }

/* ── Product cards ── */
.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.product-img-wrap {
  height: 150px;
  border-bottom: 1px solid #eee;
}

/* ── Trust badges ── */
.badge-trust {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
  margin-right: 6px;
  margin-bottom: 6px;
}

/* ── Model compatibility badges ── */
.model-list { display: flex; flex-wrap: wrap; gap: 8px; }
.model-badge {
  background: #e8f0f7;
  color: var(--navy);
  border: 1px solid #c5d8ec;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-family: monospace;
}

/* ── Brand logos grid ── */
.brand-logos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.brand-badge {
  background: #fff;
  border: 2px solid #dce3ec;
  border-radius: 8px;
  padding: 14px 8px;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.85rem;
  transition: border-color 0.2s, transform 0.2s;
}
.brand-badge:hover { border-color: var(--gold); transform: scale(1.04); }

/* ── Footer ── */
.footer {
  background: #112d4a;
  color: #aac4e0;
}
.footer-link { color: #7aabcc; text-decoration: none; }
.footer-link:hover { color: var(--gold-light); }

/* ── Payment option boxes ── */
.payment-option {
  border: 1px solid #dce3ec;
  border-radius: 8px;
  padding: 16px;
  background: #fafcff;
}

/* ── Breadcrumb ── */
.breadcrumb-item a { color: var(--navy); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--gold); }