/**
 * Coolbrand — client area overrides (parent: twenty-one / Bootstrap 4).
 */

:root {
  --cb-bg-deep: #0b0f14;
  --cb-surface: #121922;
  --cb-surface-2: #1a2330;
  --cb-border: rgba(120, 200, 255, 0.12);
  --cb-text: #e8eef7;
  --cb-muted: #8b9bb0;
  --cb-accent: #2ee6d6;
  --cb-accent-dim: rgba(46, 230, 214, 0.15);
  --cb-glow: 0 0 40px rgba(46, 230, 214, 0.08);
  --cb-radius: 14px;
  --cb-font: "DM Sans", system-ui, sans-serif;
}

/* Optional: pair with includes/hooks/coolbrand_fonts.php */
body {
  font-family: var(--cb-font);
  color: var(--cb-text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(46, 230, 214, 0.07), transparent),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.06), transparent),
    var(--cb-bg-deep);
}

/* Common layout shells (twenty-one / Bootstrap) */
.main-content,
.maincontent,
#content {
  background-color: transparent !important;
}

.panel,
.card,
.well {
  background: linear-gradient(145deg, var(--cb-surface), var(--cb-surface-2)) !important;
  border: 1px solid var(--cb-border) !important;
  border-radius: var(--cb-radius) !important;
  box-shadow: var(--cb-glow) !important;
}

.panel-heading,
.card-header,
.panel-title {
  color: var(--cb-text) !important;
  border-bottom-color: var(--cb-border) !important;
  background: transparent !important;
}

a {
  color: var(--cb-accent);
}

a:hover,
a:focus {
  color: #5ff5e8;
}

.btn-primary,
.btn-success {
  background: linear-gradient(135deg, #1de4d1, #0fb8a8) !important;
  border: none !important;
  color: #04120f !important;
  font-weight: 600;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(46, 230, 214, 0.25);
}

.btn-primary:hover,
.btn-success:hover {
  filter: brightness(1.06);
  color: #04120f !important;
}

.form-control,
select.form-control,
input.form-control {
  background-color: var(--cb-surface) !important;
  border-color: var(--cb-border) !important;
  color: var(--cb-text) !important;
  border-radius: 10px !important;
}

.form-control:focus {
  border-color: var(--cb-accent) !important;
  box-shadow: 0 0 0 3px var(--cb-accent-dim) !important;
}

.text-muted,
.help-block,
small {
  color: var(--cb-muted) !important;
}

/* Store / product grid polish */
.list-group-item {
  background: var(--cb-surface) !important;
  border-color: var(--cb-border) !important;
}

.table > tbody > tr > td,
.table > thead > tr > th {
  border-color: var(--cb-border) !important;
}