@charset "utf-8";
/* ===========================
   BLACKPLUG Base UI — bp_base.css
   Reusable components & utilities (prefixed .bp-)
   =========================== */

/* Theme tokens */
:root{
  --bp-black:#000;
  --bp-charcoal:#1a1a1a;
  --bp-ink:#222;
  --bp-steel:#333;
  --bp-smoke:#e9e9e9;
  --bp-white:#fff;
  --bp-gold:#ffcc00;
  --bp-gold-soft:#fff2b3;
  --bp-red:#b30000;
  --bp-red-dark:#800000;

  --bp-radius:6px;
  --bp-shadow:0 4px 12px rgba(0,0,0,.3);
  --bp-shadow-soft:0 2px 8px rgba(0,0,0,.2);
}

/* Containers */
.bp-container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.bp-section{
  padding:24px 0;
}

/* Cards */
.bp-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--bp-radius);
  box-shadow:var(--bp-shadow-soft);
  padding:18px;
  color:var(--bp-smoke);
}
.bp-card--dark{
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6));
  border-color:rgba(255,204,0,.25);
}
.bp-card__header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:8px;
}
.bp-card__title{
  font-weight:700; letter-spacing:.4px;
  color:#fff; text-shadow:0 0 8px rgba(255,204,0,.2);
}

/* Grid */
.bp-grid{
  display:grid;
  gap:16px;
}
@media (min-width:640px){ .bp-grid--2{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .bp-grid--3{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1100px){ .bp-grid--4{ grid-template-columns:repeat(4,1fr);} }

/* Hero / CTA */
.bp-hero{
  padding:28px 20px;
  border-radius:var(--bp-radius);
  background:linear-gradient(to right, var(--bp-charcoal), var(--bp-steel));
  border:2px solid var(--bp-black);
  box-shadow:var(--bp-shadow);
}
.bp-hero__title{
  color:#fff;
  font-size:1.6rem;
  margin:0 0 8px 0;
  text-shadow:0 0 10px rgba(255,204,0,.25);
}
.bp-hero__text{ color:var(--bp-smoke); opacity:.95; }
.bp-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:12px;
  padding:12px 20px; border-radius:8px;
  background:linear-gradient(to right, var(--bp-black), #222);
  color:var(--bp-gold); border:2px solid var(--bp-black);
  font-weight:700; letter-spacing:.5px; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:all .3s ease;
}
.bp-cta:hover{ color:#fff; border-color:var(--bp-gold); transform:translateY(-1px); }

/* Badges */
.bp-badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.85rem; font-weight:700; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff;
}
.bp-badge--gold{ background:rgba(255,204,0,.15); color:var(--bp-gold); border-color:rgba(255,204,0,.45); }
.bp-badge--red{ background:rgba(179,0,0,.15); color:#ffb3b3; border-color:rgba(179,0,0,.45); }

/* Alerts */
.bp-alert{
  padding:12px 14px; border-radius:var(--bp-radius);
  border-left:4px solid var(--bp-gold);
  background:rgba(255,204,0,.08);
  color:var(--bp-smoke);
}
.bp-alert--error{
  border-left-color:var(--bp-red);
  background:rgba(179,0,0,.1); color:#ffd9d9;
}
.bp-alert--success{
  border-left-color:#2ecc71;
  background:rgba(46,204,113,.12); color:#d9ffe9;
}

/* Media helpers */
.bp-img{ max-width:100%; height:auto; display:block; }
.bp-center{ text-align:center; }

/* Shadows & borders */
.bp-shadow{ box-shadow:var(--bp-shadow); }
.bp-soft{ box-shadow:var(--bp-shadow-soft); }
.bp-border-gold{ border:1px solid var(--bp-gold); }
.bp-glow-gold{ box-shadow:0 0 18px rgba(255,204,0,.45); }

/* Spacing utilities */
.bp-mt-0{ margin-top:0!important; } .bp-mt-8{ margin-top:8px!important; }
.bp-mt-12{ margin-top:12px!important; } .bp-mt-16{ margin-top:16px!important; }
.bp-mt-24{ margin-top:24px!important; } .bp-mt-32{ margin-top:32px!important; }
.bp-mb-8{ margin-bottom:8px!important; } .bp-mb-12{ margin-bottom:12px!important; }
.bp-mb-16{ margin-bottom:16px!important; } .bp-mb-24{ margin-bottom:24px!important; }
.bp-p-8{ padding:8px!important; } .bp-p-12{ padding:12px!important; }
.bp-p-16{ padding:16px!important; } .bp-p-24{ padding:24px!important; }

/* Text utilities */
.bp-muted{ color:#cfcfcf; opacity:.85; }
.bp-gold{ color:var(--bp-gold)!important; }
.bp-uppercase{ text-transform:uppercase; letter-spacing:.5px; }

/* Link style (accent) */
.bp-link{
  color:var(--bp-gold); text-decoration:none; font-weight:700;
  border-bottom:1px dashed rgba(255,204,0,.5);
}
.bp-link:hover{ color:#fff; border-bottom-color:transparent; }

/* Horizontal rule accent */
.bp-hr{
  height:2px; border:0; margin:18px 0;
  background:linear-gradient(90deg, transparent, var(--bp-gold), transparent);
}

/* List helpers */
.bp-list{ padding-left:18px; }
.bp-list li{ margin:6px 0; }

/* Buttons (neutral base, won’t override premium buttons) */
.bp-btn{
  display:inline-block; padding:10px 16px; border-radius:6px;
  font-weight:700; letter-spacing:.4px; text-decoration:none;
  border:1px solid rgba(255,255,255,.25);
  color:#fff; background:rgba(255,255,255,.08);
  transition:all .25s ease;
}
.bp-btn:hover{ border-color:var(--bp-gold); color:var(--bp-gold); }
.bp-btn--gold{ background:rgba(255,204,0,.15); color:var(--bp-gold); border-color:rgba(255,204,0,.45); }
.bp-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.35); }

/* Tables (generic base—specific styles are in bp_tables.css) */
.bp-table{
  width:100%; border-collapse:collapse; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); border-radius:6px; overflow:hidden;
}
.bp-table th, .bp-table td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.12); }
.bp-table thead{ background:linear-gradient(to right, var(--bp-black), var(--bp-steel)); color:var(--bp-gold); }

/* Forms (gentle base—specific form styles remain in bp_form.css) */
.bp-field{ width:100%; padding:12px; border-radius:6px;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.25); color:#fff; }
.bp-field:focus{ outline:2px solid var(--bp-gold); outline-offset:1px; }

/* Small responsive tweaks */
@media (max-width:600px){
  .bp-container{ padding:0 12px; }
  .bp-grid{ gap:12px; }
}