/* ============================================================
   PhotoStudio — Templates Pages (Bootstrap dark overrides)
   Loaded alongside Bootstrap 5 CDN on template pages
   ============================================================ */

/* ── Bootstrap variable overrides ─────────────────────────── */
:root {
  --bs-primary:        #c9a84c;
  --bs-primary-rgb:    201,168,76;
  --bs-secondary:      #8a9bb0;
  --bs-body-bg:        #0d1b2a;
  --bs-body-color:     #f0ece4;
  --bs-border-color:   rgba(201,168,76,0.15);
  --bs-light-bg-subtle:#162336;
  --bs-dark-bg-subtle: #0a1220;
  --bs-card-bg:        rgba(22,35,54,0.85);
  --bs-card-border-color: rgba(201,168,76,0.12);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: #0d1b2a !important;
  color: #f0ece4 !important;
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #c9a84c; }
a:hover { color: #e0c068; }
h1,h2,h3,h4,h5,h6 { color: #f0ece4; font-family: 'Playfair Display', 'Cormorant Garamond', serif; }

/* ── Section backgrounds ───────────────────────────────────── */
.bg-light  { background: #0f1a2e !important; }
.bg-white  { background: #162336 !important; }
.bg-dark   { background: #060d16 !important; }
.bg-primary { background: linear-gradient(135deg,#8a6f34,#c9a84c) !important; }
.border-bottom { border-color: rgba(201,168,76,0.15) !important; }

/* ── Text ──────────────────────────────────────────────────── */
.text-muted  { color: #8a9bb0 !important; }
.text-dark   { color: #f0ece4 !important; }
.text-white  { color: #f0ece4 !important; }
.text-white-50 { color: rgba(240,236,228,.55) !important; }
.lead { color: #a0aec0; }

/* ── Navbar breadcrumb ─────────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before { color: rgba(240,236,228,.3); }
.breadcrumb-item.active { color: #f0ece4; }
ol.breadcrumb { background: none; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: rgba(22,35,54,0.8) !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 14px !important;
  color: #f0ece4;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover { border-color: rgba(201,168,76,0.3) !important; }
.card-body { color: #f0ece4; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.card-title { color: #f0ece4 !important; }
.card-text  { color: #8a9bb0 !important; }
.hover-lift { transition: transform .2s, box-shadow .2s; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.45) !important; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg,#c9a84c,#e0c068) !important;
  border-color: #c9a84c !important;
  color: #0d1b2a !important;
  font-weight: 700;
  border-radius: 8px !important;
  transition: all .2s !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg,#d9b85c,#f0d078) !important;
  border-color: #d9b85c !important;
  color: #0d1b2a !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,168,76,.35) !important;
}
.btn-outline-primary {
  border-color: rgba(201,168,76,.5) !important;
  color: #c9a84c !important;
  border-radius: 8px !important;
  font-weight: 500;
}
.btn-outline-primary:hover {
  background: rgba(201,168,76,.12) !important;
  border-color: #c9a84c !important;
  color: #e0c068 !important;
}
.btn-outline-secondary {
  border-color: rgba(255,255,255,.12) !important;
  color: #8a9bb0 !important;
  border-radius: 8px !important;
}
.btn-outline-secondary:hover {
  background: rgba(255,255,255,.06) !important;
  color: #f0ece4 !important;
  border-color: rgba(255,255,255,.2) !important;
}
.btn-outline-light {
  border-color: rgba(255,255,255,.3) !important;
  color: #f0ece4 !important;
  border-radius: 8px !important;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.btn-light {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #f0ece4 !important;
  border-radius: 8px !important;
}
.btn-light:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.btn-sm { font-size: .82rem !important; padding: .35rem .85rem !important; }
.btn-lg { padding: .75rem 2rem !important; font-size: .95rem !important; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge.bg-primary { background: rgba(201,168,76,.18) !important; color: #c9a84c !important; font-weight: 600; }
.badge.bg-light   { background: rgba(255,255,255,.07) !important; color: #8a9bb0 !important; border: 1px solid rgba(255,255,255,.08) !important; }
.badge.bg-warning { background: rgba(224,154,60,.18) !important; color: #e09a3c !important; }
.badge.bg-secondary { background: rgba(138,155,176,.15) !important; color: #8a9bb0 !important; }
.small.text-dark { color: #8a9bb0 !important; }

/* ── Shadow ─────────────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 4px 24px rgba(0,0,0,.4) !important; }
.shadow-lg { box-shadow: 0 12px 40px rgba(0,0,0,.6) !important; }

/* ── Hero sections ──────────────────────────────────────────── */
.display-4,.display-5 { font-weight: 700; letter-spacing: -.01em; color: #fff; }
.fw-bold { font-weight: 700 !important; }
.opacity-75 { opacity: .78 !important; }

/* ── Filter buttons ─────────────────────────────────────────── */
#categoryFilters .btn,
#logoGrid + * .btn,
.filter-btn {
  border-radius: 50px !important;
  padding: .3rem .85rem !important;
  font-size: .8rem !important;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ── Logo preview card background ──────────────────────────── */
.logo-preview-bg {
  background: #0f1a2e !important;
  border-bottom: 1px solid rgba(201,168,76,.1);
}

/* ── How it works steps ─────────────────────────────────────── */
.bg-primary.bg-opacity-10 {
  background: rgba(201,168,76,.1) !important;
}
.text-primary { color: #c9a84c !important; }
.fs-4.text-primary { color: #c9a84c !important; }

/* ── Stats bar on Index ─────────────────────────────────────── */
.fs-2.fw-bold.text-primary { color: #c9a84c !important; font-family: 'Playfair Display',serif; font-size: 2.2rem !important; }

/* ── Template hover overlay ─────────────────────────────────── */
.template-overlay, .logo-overlay { pointer-events: all; }

/* ── Border utilities ───────────────────────────────────────── */
.border-top { border-color: rgba(201,168,76,.12) !important; }
.border      { border-color: rgba(201,168,76,.12) !important; }

/* ── Rounded circle colour dots ────────────────────────────── */
.rounded-circle.border { border-color: rgba(255,255,255,.15) !important; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* ── CTA section on index ───────────────────────────────────── */
section.bg-primary {
  background: linear-gradient(135deg,#1a120a 0%,#2a1f0d 50%,#1a120a 100%) !important;
  border-top: 1px solid rgba(201,168,76,.2);
  border-bottom: 1px solid rgba(201,168,76,.2);
}
section.bg-primary .btn-light { background: linear-gradient(135deg,#c9a84c,#e0c068) !important; color: #0d1b2a !important; border: none !important; font-weight: 700 !important; }
section.bg-primary .btn-outline-light { border-color: rgba(201,168,76,.4) !important; color: #c9a84c !important; }
section.bg-primary .btn-outline-light:hover { background: rgba(201,168,76,.12) !important; }
section.bg-primary h2 { font-family: 'Playfair Display',serif; font-size: 2.2rem; color: #f0ece4; }
section.bg-primary p.lead { color: rgba(240,236,228,.7); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d1b2a; }
::-webkit-scrollbar-thumb { background: #1e3048; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c9a84c55; }

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 768px) {
  .display-4 { font-size: 2rem !important; }
  .display-5 { font-size: 1.6rem !important; }
}