/* ==========================================================================
   Meer Group — Homepage Theme (dark + gold, glassy)
   Drop-in skin for generic HTML or Bootstrap 4/5 sites.
   - Edit the variables below to match the video palette exactly.
   - Zero controller changes required.
   ========================================================================== */

:root{
  /* === Brand Tokens — set these to match your video colors === */
  --brand-primary: #d9b45a;   /* gold accent */
  --brand-primary-2: #c6942e; /* deeper gold for gradients */
  --brand-on-primary: #0b0b0b;

  --brand-bg: #0a0a0a;        /* page background (charcoal) */
  --brand-surface: rgba(255,255,255,0.06);  /* glass surfaces */
  --brand-surface-2: rgba(255,255,255,0.10);
  --brand-border: rgba(255,255,255,0.18);
  --brand-text: #ffffff;
  --brand-text-muted: rgba(255,255,255,0.72);

  --brand-success: #38d39f;
  --brand-danger: #ff6b6b;
  --brand-warning: #ffd166;
  --brand-info: #6ec1ff;

  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-1: 0 12px 40px rgba(0,0,0,.45);

  /* Gradient used across CTAs / logo */
  --grad-gold: linear-gradient(90deg, rgba(253,230,138,.9), rgba(245,158,11,.9));
  --grad-radial-1: radial-gradient(60% 60% at -10% -10%, rgba(247,211,124,.25), transparent 60%);
  --grad-radial-2: radial-gradient(60% 60% at 110% 110%, rgba(198,148,46,.2), transparent 60%);

  /* If you use Bootstrap, these will recolor components */
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);
  --bs-primary: var(--brand-primary);
  --bs-success: var(--brand-success);
  --bs-danger: var(--brand-danger);
  --bs-warning: var(--brand-warning);
  --bs-info: var(--brand-info);
  --bs-border-color: var(--brand-border);
  --bs-link-color: var(--brand-primary);
}

/* === Global canvas === */
html, body{
  background: var(--brand-bg);
  color: var(--brand-text);
}
body::before, body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
}
body::before{ background: var(--grad-radial-1); }
body::after { background: var(--grad-radial-2); }

/* Containers */
.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
  position: relative; z-index: 1;
}

/* === Navbar / Header === */
.navbar{
  background: color-mix(in srgb, var(--brand-surface), transparent 40%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brand-border);
}
.navbar, .navbar *{ color: var(--brand-text); }
.navbar-brand{
  font-weight: 800; letter-spacing: .3px;
}
.navbar .nav-link{
  color: var(--brand-text-muted);
}
.navbar .nav-link:hover, .navbar .nav-link.active{
  color: var(--brand-text);
}

/* Mobile toggler (if no Bootstrap) */
.nav-toggle{
  display: none; width: 44px; height: 44px; border:1px solid var(--brand-border);
  border-radius: 12px; background: var(--brand-surface);
}
@media (max-width: 991.98px){
  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; }
  .navbar-collapse{
    background: var(--brand-surface);
    border:1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: 10px; margin-top: 10px;
  }
}

/* === Hero (optional wrapper) === */
.hero{
  padding: clamp(28px, 6vw, 72px) 0;
}
.hero .hero-card{
  background: var(--brand-surface);
  border:1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(16px, 3.2vw, 28px);
}
.hero h1{
  font-size: clamp(28px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 12px;
}
.hero p.lead{
  color: var(--brand-text-muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

/* === Buttons === */
.btn, button, input[type=button], input[type=submit]{
  border-radius: 12px;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover, button:hover{
  background: var(--brand-surface-2);
  transform: translateY(-1px);
}
.btn:active, button:active{ transform: translateY(0); }

.btn-primary{
  border-color: rgba(255,255,255,.25);
  background: var(--grad-gold);
  color: var(--brand-on-primary);
  font-weight: 700;
}
.btn-primary:hover{
  filter: brightness(1.05);
}
.btn-outline-light{
  border-color: var(--brand-border);
  color: var(--brand-text);
}
.btn-outline-light:hover{
  background: var(--brand-surface-2);
}

/* === Cards & Panels === */
.card, .panel, .widget, .glass{
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card-header{
  background: transparent;
  border-bottom: 1px solid var(--brand-border);
}
.card-title{ font-weight: 700; }

/* Feature grid (optional) */
.feature-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}
.feature-grid .feature{
  grid-column: span 12;
  padding: 16px; border-radius: var(--radius-md);
  background: var(--brand-surface); border:1px solid var(--brand-border);
}
@media (min-width: 768px){
  .feature-grid.cols-3 .feature{ grid-column: span 4; }
  .feature-grid.cols-2 .feature{ grid-column: span 6; }
}

/* === Forms === */
.form-control, input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], select, textarea{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--brand-border) !important;
  color: var(--brand-text) !important;
  border-radius: 12px !important;
}
.form-control::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55); }
.form-control:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,.12) !important;
}
select{ background-color: #1a1a1a !important; color: #fff !important; }
select option{ background: #111; color: #fff; }

/* Input groups & labels */
.input-group-text{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
}

/* Alerts / badges */
.alert{
  border-radius: var(--radius-md);
  border:1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-text);
}
.alert-success{ border-color: color-mix(in srgb, var(--brand-success), transparent 70%); }
.alert-danger{ border-color: color-mix(in srgb, var(--brand-danger),  transparent 70%); }
.badge{
  border:1px solid var(--brand-border);
  background: rgba(255,255,255,.10);
  color: var(--brand-text);
}

/* === Tables === */
.table{
  color: var(--brand-text);
  border-color: var(--brand-border);
}
.table thead th{
  border-bottom-color: var(--brand-border);
  color: var(--brand-text-muted);
}
.table tbody tr{
  background: transparent;
  transition: background .2s ease;
}
.table tbody tr:hover{
  background: rgba(255,255,255,.04);
}

/* === Footer === */
.site-footer{
  color: var(--brand-text-muted);
  border-top:1px solid var(--brand-border);
  background: color-mix(in srgb, var(--brand-surface), transparent 40%);
  backdrop-filter: blur(8px);
}

/* === Utilities === */
.text-muted{ color: var(--brand-text-muted) !important; }
.rounded-xl{ border-radius: var(--radius-lg) !important; }
.shadow-1{ box-shadow: var(--shadow-1) !important; }
.border-glass{ border:1px solid var(--brand-border) !important; }
.bg-glass{ background: var(--brand-surface) !important; }

/* CTA stripe (optional) */
.cta-stripe{
  padding: 18px;
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.25);
  background: var(--grad-gold);
  color: var(--brand-on-primary);
}

/* Links */
a{ color: var(--brand-primary); }
a:hover{ color: #ffd37a; }

/* Spacing helpers */
.section{ padding: clamp(18px, 3vw, 28px) 0; }