:root{
  --bk-primary:#0070FF;
  --bk-accent:#FFF880;
  --bk-cta:#E60026;

  --bk-bg:#0b1220;
  --bk-card:#0f1a2f;
  --bk-text:#eaf1ff;
  --bk-muted:#b7c5e2;
  --bk-border: rgba(255,255,255,.10);

  --bk-radius: 18px;
  --bk-shadow: 0 14px 40px rgba(0,0,0,.28);
}

[data-theme="light"]{
  --bk-bg:#f7f9ff;
  --bk-card:#ffffff;
  --bk-text:#0b1220;
  --bk-muted:#46536f;
  --bk-border: rgba(11,18,32,.12);
  --bk-shadow: 0 12px 28px rgba(2,12,27,.10);
}

body{
  background: radial-gradient(1200px 700px at 10% 10%, rgba(0,112,255,.22), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(230,0,38,.18), transparent 55%),
              radial-gradient(800px 500px at 70% 90%, rgba(255,248,128,.12), transparent 60%),
              var(--bk-bg);
  color: var(--bk-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.bk-link{ color: var(--bk-text); text-decoration: none; }
.bk-link:hover{ color: var(--bk-accent); }

.bk-navbar{
  background: rgba(10,16,30,.82);
  backdrop-filter: blur(10px);
  border-color: var(--bk-border) !important;
}
[data-theme="light"] .bk-navbar{ background: rgba(255,255,255,.75); }
.navbar .nav-link{
  color: var(--bk-text) !important;
  opacity: .86;
  border-radius: 999px;
  padding: .45rem .9rem;
}
.navbar .nav-link:hover{ opacity: 1; background: rgba(255,255,255,.06); }
[data-theme="light"] .navbar .nav-link:hover{ background: rgba(11,18,32,.06); }
.navbar .nav-link.active{
  opacity: 1;
  background: rgba(0,112,255,.18);
  border: 1px solid rgba(0,112,255,.35);
}

.bk-btn-cta{
  background: var(--bk-cta);
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(230,0,38,.25);
}
.bk-btn-cta:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.bk-btn-ghost{
  background: transparent;
  color: var(--bk-text) !important;
  border: 1px solid var(--bk-border);
  border-radius: 999px;
}
.bk-btn-ghost:hover{
  border-color: rgba(0,112,255,.45);
  background: rgba(0,112,255,.10);
}

.bk-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--bk-border);
  background: rgba(255,255,255,.04);
  color: var(--bk-muted);
  font-size: .9rem;
}

.bk-hero{ padding: 4.5rem 0 2.5rem; }
.bk-hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--bk-border);
  border-radius: calc(var(--bk-radius) + 10px);
  box-shadow: var(--bk-shadow);
  overflow: hidden;
}
[data-theme="light"] .bk-hero-card{
  background: linear-gradient(180deg, rgba(11,18,32,.04), rgba(11,18,32,.01));
}
.bk-hero-visual{
  min-height: 280px;
  background:
    radial-gradient(420px 240px at 20% 30%, rgba(0,112,255,.45), transparent 60%),
    radial-gradient(380px 240px at 70% 50%, rgba(230,0,38,.25), transparent 62%),
    radial-gradient(420px 320px at 70% 90%, rgba(255,248,128,.22), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  border-left: 1px solid var(--bk-border);
}

.bk-section-title{ font-weight: 700; letter-spacing: -0.02em; }
.bk-card{
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
}
.bk-card .card-body{ padding: 1.25rem; }
.bk-card img{
  border-top-left-radius: var(--bk-radius);
  border-top-right-radius: var(--bk-radius);
}

.bk-badge{
  background: rgba(255,248,128,.16);
  color: var(--bk-accent);
  border: 1px solid rgba(255,248,128,.28);
  border-radius: 999px;
  font-size: .8rem;
  padding: .25rem .6rem;
}

.form-control, .form-select{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bk-border);
  color: var(--bk-text);
  border-radius: 14px;
}
[data-theme="light"] .form-control, [data-theme="light"] .form-select{
  background: rgba(11,18,32,.03);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(0,112,255,.55);
  box-shadow: 0 0 0 .25rem rgba(0,112,255,.20);
}
.form-label{ color: var(--bk-muted); }

.alert{ border-radius: 14px; border: 1px solid var(--bk-border); }

.bk-footer{
  border-top: 1px solid var(--bk-border);
  background: rgba(0,0,0,.08);
}
[data-theme="light"] .bk-footer{ background: rgba(11,18,32,.03); }
.bk-hr{ border-color: var(--bk-border); }

/* Brands we service (Hero + Footer) */
.bk-hero-right{
  display:flex;
  flex-direction:column;
  gap: 12px;
  height: 100%;
}
.bk-hero-right .bk-brands-wrap{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 280px;
}

.bk-brands-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15, 26, 47, .45);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 18px 18px 16px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.bk-brands-card-hero{
  min-height: 360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bk-brands-title{
  font-weight: 700;
  font-size: .95rem;
  color: rgba(234,241,255,.92);
  margin-bottom: 18px;
  letter-spacing: .2px;
}

.bk-brands-grid{
  display:grid;
  gap: 20px 26px;
  align-items:center;
}

/* Match the older "big logos" look */
.bk-brands-grid-hero{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bk-brands-grid-hero img{
  width: 100%;
  height: 54px;
  object-fit: contain;
  opacity: .95;
  filter: none;
}

@media (max-width: 991.98px){
  .bk-brands-card-hero{ min-height: 320px; }
  .bk-hero-right .bk-brands-wrap{ min-height: 240px; }
  .bk-brands-grid-hero img{ height: 48px; }
}
@media (max-width: 575.98px){
  .bk-brands-card{ padding: 16px 14px 14px; }
  .bk-brands-grid-hero{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bk-brands-grid-hero img{ height: 44px; }
}

/* Footer marquee */
.bk-footer-brands{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 0 10px;
  background: rgba(10, 18, 32, .55);
}
.bk-footer-brands-label{
  color: rgba(234,241,255,.78);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 10px;
}
.bk-marquee{
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(15, 26, 47, .30);
}
.bk-marquee-track{
  display:flex;
  align-items:center;
  gap: 26px;
  padding: 12px 18px;
  width: max-content;
  animation: bk-marquee 26s linear infinite;
  will-change: transform;
}
.bk-marquee-track img{
  height: 26px;
  width: auto;
  object-fit: contain;
  opacity: .95;
  flex: 0 0 auto;
}
@keyframes bk-marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .bk-marquee-track{ animation: none; }
}

/* Footer brand strip order/spacing fix */
.bk-footer-brands{
  margin-top: 18px;
  margin-bottom: 18px;
}

/* Footer bottom bar */
.bk-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
}


/* Footer (2 rows) */
.bk-footer-brands{
  border-top: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.bk-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
}


/* Remove extra gap between footer content and brands row */
.bk-footer-brands.mt-4{ margin-top: 12px !important; }

/* =========================================================
   TEXT VISIBILITY FIX (Dark public theme)
   Ensures readable text + dropdown options on all browsers
   ========================================================= */
:root{
  --bk-text: rgba(234,241,255,.92);
  --bk-text-soft: rgba(234,241,255,.72);
  --bk-text-muted: rgba(234,241,255,.60);
}

body, .bk-wrap, .bk-hero, main{
  color: var(--bk-text);
}

h1,h2,h3,h4,h5,h6,
.bk-section-title,
.card-title{
  color: var(--bk-text) !important;
}

p, li, .lead{
  color: var(--bk-text-soft);
}

.text-secondary, .text-muted{
  color: var(--bk-text-soft) !important;
}

/* Cards and list groups in dark public UI */
.card, .bk-card{
  color: var(--bk-text);
}

/* Form controls: keep input text readable on dark background */
.form-control, .form-select, textarea{
  color: var(--bk-text) !important;
}

/* Placeholder readable */
.form-control::placeholder, textarea::placeholder{
  color: var(--bk-text-muted) !important;
  opacity: 1;
}

/* IMPORTANT: dropdown option list must be readable (white background with dark text) */
select option{
  background: #ffffff !important;
  color: #111111 !important;
}

/* Some browsers use optgroup; keep it readable too */
select optgroup{
  background: #ffffff !important;
  color: #111111 !important;
}

/* Ensure disabled/placeholder option still visible */
select option:disabled{
  color: #666666 !important;
}

/* Bootstrap list-group when used */
.list-group-item{
  color: inherit;
}

/* =========================================================
   INPUT TYPING VISIBILITY FIX
   Ensures typed text and selection are readable while typing
   ========================================================= */
.form-control, .form-select, textarea{
  color: rgba(234,241,255,.92) !important;
  -webkit-text-fill-color: rgba(234,241,255,.92) !important; /* fixes Safari/Chrome autofill/typing */
  caret-color: rgba(255,248,128,.95) !important;
}

/* Text selection highlight */
.form-control::selection, textarea::selection{
  background: rgba(0,112,255,.35);
  color: rgba(234,241,255,.95);
}

/* When focused keep same readable color */
.form-control:focus, .form-select:focus, textarea:focus{
  color: rgba(234,241,255,.92) !important;
  -webkit-text-fill-color: rgba(234,241,255,.92) !important;
}

/* Chrome autofill can force black text - normalize */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: rgba(234,241,255,.92) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Dropdown list items remain readable */
select option{
  background: #ffffff !important;
  color: #111111 !important;
}
select option:disabled{ color:#666 !important; }

/* =========================================================
   INPUT FOCUS BACKGROUND FIX
   Some browsers make the input background WHITE on focus.
   Keep background dark so white text stays visible.
   ========================================================= */
body .form-control,
body .form-select,
body textarea{
  background-color: rgba(12, 22, 40, .70) !important;
  border-color: rgba(255,255,255,.14) !important;
}

body .form-control:focus,
body .form-select:focus,
body textarea:focus,
body .form-control:focus-visible,
body .form-select:focus-visible,
body textarea:focus-visible{
  background-color: rgba(12, 22, 40, .82) !important;
  border-color: rgba(0,112,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(0,112,255,.20) !important;
  color: rgba(234,241,255,.92) !important;
  -webkit-text-fill-color: rgba(234,241,255,.92) !important;
}

/* iOS/Safari inner shadow */
body .form-control,
body textarea{
  -webkit-appearance: none;
}


/* =========================================================
   PUBLIC CARD THEME FIX
   Prevent white Bootstrap cards from making text invisible
   ========================================================= */
.card:not(.card--light):not(.vx-card):not(.bk-card){
  background: var(--bk-card);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  box-shadow: var(--bk-shadow);
  color: rgba(234,241,255,.92);
}
.card:not(.card--light):not(.vx-card):not(.bk-card) .text-secondary,
.card:not(.card--light):not(.vx-card):not(.bk-card) .text-muted{
  color: rgba(234,241,255,.72) !important;
}

/* =========================================================
   FORM HELPER TEXT VISIBILITY FIX
   Make .form-text and small helper labels readable on dark UI
   ========================================================= */
.form-text,
small.form-text,
.form-text.text-muted{
  color: rgba(234,241,255,.72) !important;
}

label.form-label,
.form-label{
  color: rgba(234,241,255,.88) !important;
}

/* Build Your PC */
.buildpc-hero{
  background: linear-gradient(135deg, rgba(0,112,255,.12), rgba(255,248,128,.08));
}
.buildpc-pill{
  display:inline-flex;
  align-items:center;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(234,241,255,.92);
  font-size:.9rem;
  font-weight:700;
}
.buildpc-summary-box{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:1rem;
  background:rgba(9,18,34,.55);
}
.buildpc-card-section{
  border:1px solid rgba(255,255,255,.08);
}
.buildpc-sticky{
  position:sticky;
  top:96px;
}
.buildpc-summary-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:.8rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.buildpc-summary-item:last-child{
  border-bottom:0;
  padding-bottom:0;
}
@media (max-width: 1199.98px){
  .buildpc-sticky{ position:static; }
}