/* 1.2.2 — style pass per checklist */
:root{
  --bf-bg:#F5F7FB; --bf-card:#FFFFFF; --bf-stroke:#E7EDF5;
  --bf-title:#0B1221; --bf-muted:#8FA0B3; --bf-green:#16A34A; --bf-orange:#F59E0B; --bf-red:#EF4444; --bf-blue:#2B6BE7;
  --bf-r-lg:18px; --bf-r-md:14px;
}
.bf{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--bf-title)}
.bf *{box-sizing:border-box}

/* Updated line (no bg/border/bold) */
.bf__updated--top{display:block;margin:0 0 8px;color:#7C8DA1;font-weight:500}

/* H2 heading */
/* h2 generic remains for first section */
.bf__h2{margin:0 0 12px;font-family:Inter;font-weight:800;line-height:1.05;font-size:44px}
@media(max-width:1200px){/* h2 generic remains for first section */
.bf__h2{font-size:36px}}

/* ===== Cards section */
.bf__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 16px}
@media(max-width:980px){.bf__cards{grid-template-columns:1fr}}
/* wrapper without gray panel */
.bf__cards{background:transparent;border:0;padding:0}
/* each card: white, no border */
.bf__card{background:var(--bf-bg);border:1px solid var(--bf-stroke);border-radius:20px;padding:20px}
/* Title style (Inter SemiBold 22 / 100%) and NO arrow icon */
.bf__card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bf__card-title{font-family:Inter;font-style:normal;font-weight:600;font-size:22px;line-height:100%;letter-spacing:0}
.bf__card-ic{display:none}

/* The white pill with left column (price+subtitle) and right column (eta) */
.bf__pill{display:grid;grid-template-columns:1fr auto;grid-template-areas:"usd eta" "sub eta";
  background:#FFFFFF;border:1px solid var(--bf-stroke);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.bf__usd{grid-area:usd;color:var(--bf-green);font-weight:800}
.bf__pill-sub{grid-area:sub;display:block;color:#6B7D93;font-weight:600;margin-top:2px}
.bf__eta{grid-area:eta;color:#6B7D93;font-weight:700;align-self:center}

/* rows: remove chip borders, add gray separators like in mockup */
.bf__rows{list-style:none;margin:0;padding:0}
.bf__rows li{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:10px;padding:16px 0;border-top:1px solid var(--bf-stroke)}
.bf__rows li:first-child{border-top:1px solid var(--bf-stroke)} /* top separator visible */
.bf__rows li span{background:transparent;border:0;padding:0;font-weight:800}
/* Copy icon — double-square outline */
.bf__copy{position:relative;width:36px;height:36px;border-radius:10px;background:transparent;border:0;cursor:pointer}
.bf__copy::before,.bf__copy::after{content:"";position:absolute;border:2px solid #A6B4C6;border-radius:8px}
.bf__copy::before{width:18px;height:18px;right:8px;top:8px;opacity:.55}
.bf__copy::after{width:18px;height:18px;right:12px;top:12px;background:#fff}

/* ===== Calc block — без изменений визуально значимых для задачи */
.bf__calc{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--bf-bg);border:1px solid var(--bf-stroke);border-radius:14px;padding:18px}
@media(max-width:1100px){.bf__calc{grid-template-columns:1fr}}
.bf__slider-card{background:transparent;border:0;border-radius:18px;padding:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.bf__slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bf__slider-caption{color:#8FA0B3;font-weight:700}
.bf__slider-value{font-weight:900}
#bf-slider{width:100%;appearance:none;height:6px;border-radius:999px;background:#E7EEF7;outline:none}
#bf-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--bf-blue);border:2px solid #F3F6FF;cursor:pointer}
.bf__ticks{display:flex;justify-content:space-between;color:#8FA0B3;font-weight:700;margin-top:6px}
.bf__calc-card{background:#FFFFFF;border:1px solid var(--bf-stroke);border-radius:18px;padding:16px}
.bf__calc-row{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:10px;padding:10px 0}
.bf__calc-row span{background:transparent;border:0;padding:12px 0;font-weight:800}
.bf__calc-row{border-top:1px solid var(--bf-stroke)}
.bf__calc-row:first-child{border-top:0}

/* ===== Stats (как раньше: серый фон, серые разделители) */
.bf__stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;background:var(--bf-bg);border:1px solid var(--bf-stroke);border-radius:14px;padding:18px}
@media(max-width:1100px){.bf__stats{grid-template-columns:1fr}}
.bf__stat-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--bf-stroke);padding:12px 2px;margin:0 8px;color:#334155}
.bf__stat-row:first-child{border-top:0}
.bf__q{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--bf-stroke);color:#7E91A8;font-weight:800;margin-left:8px}

/* Skeletons & errors */
.skel{position:relative;color:transparent}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#EEF2F7 25%,#F6F8FB 37%,#EEF2F7 63%);animation:bf-sk 1.2s infinite;border-radius:8px}
@keyframes bf-sk{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.bf__error{margin-top:10px;color:#d11a2a}
.bf__toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#0B1221;color:#fff;padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s}
.bf__toast.show{opacity:1}

.bf__rows li:first-child{border-top:0}

/* Calc section H2 override per mock */
.bf__calc .bf__h2{font-family:Inter;font-weight:600;font-size:22px;line-height:100%;letter-spacing:0;margin:0 0 12px}

/* hide duplicated '≈' readout near slider head if present twice */
.bf__slider-caption + .bf__slider-value .approx-symbol{display:none}

/* center contents vertically and match mock colors */
.bf__calc-left{display:flex;flex-direction:column;justify-content:center}
#bf-slider{height:10px;background:#E4ECFA}
#bf-slider::-webkit-slider-thumb{width:20px;height:20px}
.bf__slider-head{margin-bottom:8px}

.bf__rows li .bf__copy, .bf__calc-row .bf__copy{margin-left:auto}

/* ---- Requested value row typography (Roboto 700 / 16 / 100%) ---- */
.bf .bf__rows>li>span:first-child,
.bf .bf__calc-card .bf__calc-row>span:first-child{
  font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
}

/* ---- Make value column (copy area) as narrow as in stats block ---- */
.bf .bf__rows>li{display:grid;grid-template-columns:1fr 120px}
.bf .bf__rows>li>*:last-child{justify-self:end}
.bf .bf__calc-card .bf__calc-row{display:grid;grid-template-columns:1fr 120px}
.bf .bf__calc-card .bf__calc-row>*:last-child{justify-self:end}
/* Ensure copy icon doesn't expand */
.bf .bf__copy{width:36px;height:36px}

/* Force narrow value column for the three recommendation cards */
.bf .bf__cards .bf__rows>li{
  display:grid !important;
  grid-template-columns: 1fr 120px !important;
}
.bf .bf__cards .bf__rows>li>*:last-child{justify-self:end}

/* Typography for value fields (left text in rows) */
.bf .bf__cards .bf__rows>li>span:first-child{
  font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
}

/* --- Compact rows like stats block --- */
.bf .bf__rows>li{padding:12px 0 !important;gap:8px !important}
.bf .bf__calc-card .bf__calc-row{padding:12px 0 !important;gap:8px !important}

/* Slightly smaller copy icon to fit compact height */
.bf .bf__copy{width:32px;height:32px}

/* Ensure text baseline is consistent */
.bf .bf__rows>li>span:first-child,
.bf .bf__calc-card .bf__calc-row>span:first-child{
  line-height: 1.0 !important;
}

/* v1.2.7f: force left align for last calc row value */
.bf .bf__calc-card li:last-child,
.bf .bf__calc-card .bf__calc-row:last-child{
  text-align:left !important;
}
.bf .bf__calc-card li:last-child > *,
.bf .bf__calc-card .bf__calc-row:last-child > *{
  text-align:left !important;
}

/* Info icon look */
.bf .bf__info{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:#EEF2F6;color:#8A94A6;
  font-weight:600;font-size:12px;line-height:18px;
  margin-left:8px;
}
.bf .bf__info::before{content:"i"}

/* Tooltip */
.bf [data-bf-tip]{position:relative;cursor:help}
.bf [data-bf-tip]:hover::after{
  content:attr(data-bf-tip);position:absolute;left:0;top:100%;transform:translateY(6px);
  background:#111;color:#fff;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.2;
  white-space:normal;width:max(220px,32ch);z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.bf [data-bf-tip]:hover::before{
  content:"";position:absolute;left:8px;top:100%;transform:translateY(2px);
  border:6px solid transparent;border-bottom-color:#111;
}

/* Delta colors */
.bf .bf__delta{font-weight:600}
.bf .bf__delta--up{color:#11A656}
.bf .bf__delta--down{color:#D14343}
.bf .bf__delta--flat{color:#838B9A}