@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap');

:root{
  --blue:#006591;
  --white:#ffffff;
  --black:#000000;
  --line:rgba(255,255,255,.18);
  --muted:rgba(255,255,255,.75);
  --focus:0 0 0 3px rgba(0,101,145,.28);
}

.bf-wrap{width:100%;font-family:'Outfit',sans-serif;color:var(--white)}
.bf-form{width:100%;}
.bf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bf-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.bf-field label{font-size:14px;color:var(--muted)}

/* Inputs */
.bf-field input{
  background:var(--black);
  border:1px solid var(--line);
  color:var(--white);
  border-radius:12px;
  padding:12px 14px;
  font-size:16px;
  outline:none;
  width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.bf-field input::placeholder{color:rgba(255,255,255,.45)}
.bf-field input:focus{border-color:var(--blue);box-shadow:var(--focus)}

/* Per-field error text */
.bf-error{display:none;font-size:12px;color:var(--white);opacity:.85;margin-top:4px}
.bf-invalid{border-color:var(--blue)!important;box-shadow:var(--focus)!important}
.bf-field.error .bf-error{display:block}

/* ===== Custom Select (always dark) ===== */
.bf-native-select{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  padding:0 !important; border:0 !important; margin:0 !important;
}

.bf-select{position:relative}
.bf-select-toggle{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--black); color:var(--white);
  border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; width:100%; font-size:16px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.bf-select-toggle:focus{border-color:var(--blue);box-shadow:var(--focus);outline:none}
.bf-caret{
  width:14px;height:14px;flex:0 0 14px;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/14px 14px;
}
.bf-select.open .bf-select-toggle{border-color:var(--blue);box-shadow:var(--focus)}

.bf-select-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:var(--black); color:var(--white);
  border:1px solid var(--line); border-radius:12px;
  padding:6px; margin:0; list-style:none; z-index:50; display:none;
}
.bf-select.open .bf-select-list{display:block}
.bf-select-list li{
  padding:10px 12px; border-radius:8px; cursor:pointer; user-select:none;
}
.bf-select-list li:hover,
.bf-select-list li[aria-selected="true"]{background:rgba(0,101,145,.18)}
/* ====================================== */

/* Button (full width, blue only) */
.bf-btn{margin-top: 24px;
  display:block;width:100% !important;border:0 !important;outline:none !important;
  cursor:pointer;background:#006591 !important;color:#ffffff !important;
  font-weight:700;padding:14px 18px;border-radius:12px;font-size:16px;
  transition:transform .05s ease,filter .2s ease;
}
.bf-btn:hover{filter:brightness(1.05)}
.bf-btn:active,.bf-btn:focus{transform:translateY(1px);box-shadow:var(--focus)!important}
.bf-btn.outline{
  background:transparent !important;border:1px solid #006591 !important;color:#ffffff !important;
  width:auto;padding:10px 16px;border-radius:12px;
}

/* Result card */
.bf-result{display:flex;justify-content:center;width:100%}
.bf-result-card{
  margin-top:14px;border:1px solid var(--line);
  border-radius:16px;padding:28px 22px;text-align:center;width:100%;max-width:760px;
  background:var(--black);
}
.bf-result-title{font-size:14px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.bf-value{font-size:64px;font-weight:800;line-height:1;color:var(--white);margin-bottom:10px}
.bf-note{font-size:14px;color:var(--muted);margin-bottom:16px}

@media (max-width:860px){ .bf-grid{grid-template-columns:1fr} }