/* Congo Co. — Brand Theme on Bootstrap 5.3 */

/* ── Brand tokens ───────────────────────────────────────────────────── */
:root {
  --cc-orange:    #F26A0A;
  --cc-rust:      #C24E05;
  --cc-black:     #0D0D0D;
  --cc-charcoal:  #1A1A1A;
  --cc-olive:     #6B6F3A;
  --cc-steel:     #B0B0B0;
  --cc-offwhite:  #EDEDED;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  --font-display: 'Anton', Impact, sans-serif;
}

/* ── Bootstrap dark theme overrides ────────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-body-bg:        var(--cc-black);
  --bs-body-color:     var(--cc-offwhite);
  --bs-secondary-bg:   var(--cc-charcoal);
  --bs-tertiary-bg:    #222222;
  --bs-border-color:   #2e2e2e;
  --bs-link-color:     var(--cc-orange);
  --bs-link-hover-color: var(--cc-rust);
}

/* ── Base ───────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background-color: var(--cc-black);
  color: var(--cc-offwhite);
}

/* ── Headings ───────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Typography helpers ─────────────────────────────────────────────── */
.font-mono         { font-family: var(--font-mono); }
.text-orange       { color: var(--cc-orange) !important; }
.text-rust         { color: var(--cc-rust) !important; }
.text-offwhite     { color: var(--cc-offwhite) !important; }
.text-olive        { color: var(--cc-olive) !important; }
.letter-spacing    { letter-spacing: 0.08em; }
.bg-charcoal       { background-color: var(--cc-charcoal) !important; }
.bg-olive          { background-color: var(--cc-olive) !important; }

/* ── Links ──────────────────────────────────────────────────────────── */
a             { color: var(--cc-orange); text-decoration: none; }
a:hover       { color: var(--cc-rust); }
.footer-link  { color: var(--cc-steel); text-decoration: none; }
.footer-link:hover { color: var(--cc-offwhite); }
.social-link  { color: var(--cc-steel); }
.social-link:hover { color: var(--cc-orange); }

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar        { background-color: rgba(13,13,13,0.97) !important; backdrop-filter: blur(8px); }
.navbar-banner {
  height: 44px;
  width: auto;
}
.footer-banner {
  width: 100%;
  height: auto;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--cc-orange);
}
.nav-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: var(--cc-steel) !important;
}
.nav-link:hover,
.nav-link:focus { color: var(--cc-offwhite) !important; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-orange {
  background-color: var(--cc-orange);
  border-color: var(--cc-orange);
  color: #fff;
  font-weight: 600;
}
.btn-orange:hover {
  background-color: var(--cc-rust);
  border-color: var(--cc-rust);
  color: #fff;
}
.btn-outline-orange {
  border-color: var(--cc-orange);
  color: var(--cc-orange);
  background: transparent;
}
.btn-outline-orange:hover {
  background-color: var(--cc-orange);
  border-color: var(--cc-orange);
  color: #fff;
}

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-control {
  background-color: var(--cc-charcoal);
  border-color: #3a3a3a;
  color: var(--cc-offwhite);
}
.form-control:focus {
  background-color: var(--cc-charcoal);
  border-color: var(--cc-orange);
  color: var(--cc-offwhite);
  box-shadow: 0 0 0 0.2rem rgba(242,106,10,0.2);
}
.form-control::placeholder { color: var(--cc-steel); }
.form-select {
  background-color: var(--cc-charcoal);
  border-color: #3a3a3a;
  color: var(--cc-offwhite);
}

/* ── Hero section ───────────────────────────────────────────────────── */
.hero-section {
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 5rem 0 3rem;
  background: linear-gradient(135deg, var(--cc-black) 0%, #1a1200 60%, #100a00 100%);
  border-bottom: 1px solid #2a2a2a;
}
.min-vh-75 { min-height: 75vh; }
.hero-logo {
  width: 340px;
  height: auto;
}
.about-logo {
  width: 180px;
  height: auto;
}

/* ── Sale banner ────────────────────────────────────────────────────── */
.sale-banner {
  background-color: var(--cc-orange);
  border-bottom: 1px solid var(--cc-rust);
}

/* ── Sale badge ─────────────────────────────────────────────────────── */
.sale-badge {
  background-color: var(--cc-orange);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background-color: var(--cc-charcoal);
  border-color: #2e2e2e;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* ── Product cards ──────────────────────────────────────────────────── */
.product-card-img-wrap {
  aspect-ratio: 4/3;
  background-color: #111;
}
.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card-img { transform: scale(1.03); }
.product-card-img-placeholder {
  aspect-ratio: 4/3;
  background-color: #111;
}
.product-card-badges { z-index: 1; }

/* ── Product detail ─────────────────────────────────────────────────── */
.product-detail-img {
  max-height: 480px;
  object-fit: contain;
  background-color: #111;
}
.product-detail-img-placeholder {
  height: 400px;
  background-color: #111;
}
.product-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.product-thumb:hover { opacity: 1; border-color: var(--cc-orange) !important; }

/* ── Brand cards ────────────────────────────────────────────────────── */
.brand-card {
  background-color: var(--cc-charcoal);
  border: 1px solid #2e2e2e;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.brand-card:hover {
  border-color: var(--cc-orange);
  background-color: #242010;
}
.brand-logo {
  max-height: 56px;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0.9);
}
.brand-logo-placeholder {
  width: 80px;
  height: 56px;
  background-color: #111;
  border: 1px solid #333;
}

/* ── Bundle cards ───────────────────────────────────────────────────── */
.bundle-card-img {
  height: 200px;
  object-fit: cover;
}

/* ── Stat cards ─────────────────────────────────────────────────────── */
.stat-card {
  background-color: var(--cc-charcoal);
  border: 1px solid #2e2e2e;
}

/* ── Filter sidebar ─────────────────────────────────────────────────── */
.filter-sidebar { top: 80px; }
.filter-link {
  color: var(--cc-steel);
  font-size: 0.875rem;
  display: block;
  padding: 2px 0;
  transition: color 0.15s;
}
.filter-link:hover { color: var(--cc-offwhite); }
.filter-link.active { color: var(--cc-orange); font-weight: 600; }

/* ── WhatsApp float button ──────────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: background 0.2s, transform 0.2s;
}
.whatsapp-float:hover {
  background-color: #1ebe5a;
  color: #fff;
  transform: scale(1.08);
}

/* ── WhatsApp CTA section ───────────────────────────────────────────── */
.whatsapp-cta-section {
  background: linear-gradient(135deg, var(--cc-black) 0%, #1a1200 60%, #100a00 100%);
  border-top: 1px solid #2a1a00;
  border-bottom: 1px solid #2a1a00;
}

/* ── Price block ────────────────────────────────────────────────────── */
.price-block { border-left: 3px solid var(--cc-orange); padding-left: 1rem; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before { color: var(--cc-steel); }

/* ── Pagination ─────────────────────────────────────────────────────── */
.bg-orange { background-color: var(--cc-orange) !important; }
.border-orange { border-color: var(--cc-orange) !important; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { background-color: var(--cc-charcoal); }

/* ── Nav tabs ───────────────────────────────────────────────────────── */
.nav-tabs { border-color: #2e2e2e; }
.nav-tabs .nav-link { color: var(--cc-steel); border: none; }
.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--cc-orange);
  border-bottom: 2px solid var(--cc-orange);
}
.nav-tabs .nav-link:hover { color: var(--cc-offwhite); }

/* ── Discount code banner ───────────────────────────────────────────── */
.discount-code-banner { background-color: var(--cc-charcoal); }

/* ── Alert with orange border ──────────────────────────────────────── */
.border-orange { border-color: var(--cc-orange) !important; }