/* PATCH_COLOR_MODERN_V1
   Scope: Visual only (colors + hover/focus). No layout/JS.
   Goal: less monotone, more modern, still clinical trust.
*/

:root{
  /* Keep brand anchors */
  --bn-blue: #0B2B34;
  --bn-green: #0B6B3A;
  --bn-cta: #F28C28;

  /* Modern accents */
  --bn-teal: #00C2B3;      /* interaction/active */
  --bn-sky:  #7DD3FC;      /* subtle glow */
  --bn-lime: #A3E635;      /* success accent */

  /* Surfaces */
  --bn-bg: #071C22;
  --bn-surface: rgba(12, 26, 34, .92);
  --bn-surface2: rgba(16, 34, 44, .88);
  --bn-border: rgba(125, 211, 252, .18);  /* sky border */
  --bn-border-strong: rgba(0, 194, 179, .35); /* teal border */
  --bn-text: rgba(255,255,255,.92);
  --bn-dim: rgba(255,255,255,.72);

  /* Controlled glow (NO bands) */
  --bn-glow: 0 18px 40px rgba(0,0,0,.45);
  --bn-glow-hover: 0 24px 60px rgba(0,0,0,.55);
}

/* Base background stays premium */
html, body{
  background: var(--bn-bg) !important;
  color: var(--bn-text) !important;
}

/* Cards / panels: more life but subtle */
.card, .panel, .cardPad, .videoShell, .resultBox, .box, .tile{
  background: var(--bn-surface) !important;
  border: 1px solid var(--bn-border) !important;
  box-shadow: var(--bn-glow) !important;
}

/* Hover state (feel interactive) */
.card:hover, .panel:hover, .tile:hover, .box:hover{
  border-color: var(--bn-border-strong) !important;
  box-shadow: var(--bn-glow-hover) !important;
}

/* Pills / chips / badges: teal accent, not gray */
.chip, .pill, .badge{
  background: rgba(0, 194, 179, .08) !important;
  border: 1px solid rgba(0, 194, 179, .25) !important;
  color: var(--bn-text) !important;
}

/* Buttons */
button, .btn{
  border-color: rgba(125,211,252,.22) !important;
}
button:hover, .btn:hover{
  border-color: rgba(0,194,179,.40) !important;
}

/* Keep CTA orange (only CTA) */
.btn-cta, .cta, .buyBtn, .btnPrimary, .btn-primary, .ctaBtn{
  background: var(--bn-cta) !important;
  color: #0B2B34 !important;
  border: none !important;
  box-shadow: 0 12px 26px rgba(242,140,40,.22) !important;
}
.btn-cta:hover, .cta:hover, .buyBtn:hover, .btnPrimary:hover, .btn-primary:hover, .ctaBtn:hover{
  filter: brightness(1.05) saturate(1.05) !important;
}

/* WhatsApp / success buttons stay green but modern */
.btn-success, .whatsapp, .btnWhats, .btnGreen{
  background: #14C46A !important;
  color: #072016 !important;
  border: none !important;
}

/* Inputs: clearer focus */
input, select, textarea{
  background: var(--bn-surface2) !important;
  border: 1px solid rgba(125,211,252,.16) !important;
  color: var(--bn-text) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(0,194,179,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,194,179,.14) !important;
}

/* Links: subtle teal */
a{ color: rgba(125,211,252,.92) !important; }
a:hover{ color: rgba(0,194,179,.95) !important; }