/* BlackFridayDeal.uk skin on top of Landkit's theme.min.css */
:root {
  --bf-ink: #0E0E12;
  --bf-ink-2: #1A1A21;
  --bf-ink-3: #2A2A33;
  --bf-on-ink: #FFFFFF;
  --bf-on-ink-muted: #A6ADBD;
  --bf-accent: #FFC21A;
  --bf-accent-hover: #FFD24D;
  --bf-text: #161C2D;
  --bf-muted: #6B7A93;
  --bf-line: #E6EAF0;
  --bf-surface: #FFFFFF;
  /* status (verdicts): always paired with an icon and a label */
  --st-good: #0CA30C;
  --st-warning: #FAB219;
  --st-critical: #D03B3B;
  --st-neutral: #A3ADBD;
  /* magnitude (price bars): one ink hue, strong step for the cheapest */
  --bar-strong: #0E0E12;
  --bar-soft: #C9CFDA;
  --chart-grid: #EDF0F5;
}

body { background: #FFFFFF; color: var(--bf-text); }
a { color: #1D4ED8; }
.text-primary { color: var(--bf-text) !important; }

/* Top bar + navbar */
.bf-topbar { background: var(--bf-accent); color: var(--bf-ink); font-size: .8125rem; font-weight: 600; padding: .4rem 0; }
.bf-topbar .container { gap: 1rem; }
.bf-countdown { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .02em; }
.bf-topbar-note { opacity: .75; font-weight: 500; }
.bf-navbar { background: var(--bf-ink); }
.bf-navbar .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 600; }
.bf-navbar .nav-link:hover, .bf-navbar .nav-link.active { color: var(--bf-accent) !important; }
.navbar-brand-img { max-height: 1.75rem; }
.bf-navbar .navbar-brand { filter: none !important; } /* Landkit inverts logos on dark navbars */
@media (max-width: 991.98px) {
  .bf-navbar .navbar-collapse { background: #fff; }
  .bf-navbar .navbar-collapse .nav-link { color: var(--bf-text) !important; }
}
@media (min-width: 992px) { .dropdown-menu-deals { min-width: 720px; } }
.dropdown-menu-deals .dropdown-item { padding-top: .35rem; padding-bottom: .35rem; }

/* Buttons */
.btn-bf { background: var(--bf-accent); color: var(--bf-ink); font-weight: 700; border: 0; }
.btn-bf:hover, .btn-bf:focus { background: var(--bf-accent-hover); color: var(--bf-ink); }
.btn-bf-ghost { color: #fff; border: 1px solid rgba(255,255,255,.3); font-weight: 600; }
.btn-bf-ghost:hover { color: var(--bf-ink); background: #fff; }

/* Hero */
.bf-hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(255,194,26,.18), transparent 60%), var(--bf-ink); color: #fff; padding: 4.5rem 0 5rem; }
.bf-kicker { display: inline-block; background: rgba(255,194,26,.14); color: var(--bf-accent); border: 1px solid rgba(255,194,26,.35); border-radius: 999px; padding: .3rem .9rem; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.25rem; }
.bf-hero-title { color: #fff; font-weight: 800; font-size: 2.5rem; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem; }
@media (min-width: 768px) { .bf-hero-title { font-size: 3.5rem; } }
.bf-mark { color: var(--bf-ink); background: var(--bf-accent); padding: 0 .25em; border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bf-hero-lead { color: var(--bf-on-ink-muted); font-size: 1.1875rem; max-width: 34rem; margin-bottom: 2rem; }
.bf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.bf-stat { background: var(--bf-ink-2); border: 1px solid var(--bf-ink-3); border-radius: .75rem; padding: 1.25rem 1rem; }
.bf-stat-num { display: block; font-size: 2.25rem; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.bf-stat-label { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--bf-on-ink-muted); }

.bf-section-title { font-weight: 800; letter-spacing: -.01em; margin-bottom: 1.5rem; }
.bf-step-icon { width: 3rem; height: 3rem; border-radius: .75rem; background: var(--bf-ink); color: var(--bf-accent); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 1rem; }

/* Category cards */
.cat-card { border: 1px solid var(--bf-line); border-radius: .75rem; transition: border-color .15s, transform .15s, box-shadow .15s; }
.cat-card:hover { border-color: var(--bf-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,14,18,.08); }
.cat-card .card-body { padding: 1.5rem; display: flex; flex-direction: column; }
.cat-card .vbar { margin-bottom: 1rem; }
.cat-card-link { margin-top: auto; font-size: .875rem; font-weight: 700; color: var(--bf-text); }
.cat-card:hover .cat-card-link { text-decoration: underline; text-decoration-color: var(--bf-accent); text-decoration-thickness: 3px; }

/* Charts: shared */
.chart-card { border: 1px solid var(--bf-line); border-radius: .75rem; box-shadow: none; }
.chart-tip { position: fixed; z-index: 2000; display: none; pointer-events: none; background: var(--bf-ink); color: #fff; font-size: .8125rem; font-weight: 600; padding: .4rem .6rem; border-radius: .375rem; box-shadow: 0 6px 16px rgba(0,0,0,.2); white-space: nowrap; }

/* Verdict stacked bar (2px surface gap between segments, rounded ends) */
.vbar { display: flex; gap: 2px; height: 10px; border-radius: 4px; overflow: hidden; background: var(--bf-surface); }
.vbar-seg { display: block; min-width: 4px; cursor: default; }
.vbar-seg:first-child { border-radius: 4px 0 0 4px; }
.vbar-seg:last-child { border-radius: 0 4px 4px 0; }
.vbar-seg:only-child { border-radius: 4px; }
.vbar-seg:focus { outline: 2px solid var(--bf-ink); outline-offset: 1px; }
.vbar-legend { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8125rem; color: var(--bf-muted); }
.vbar-legend li { display: inline-flex; align-items: center; }
.vbar-legend strong { color: var(--bf-text); margin-left: .3rem; }
.vbar-legend-page { justify-content: center; margin-top: 0; }
.vbar-key { width: 1.125rem; height: 1.125rem; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; margin-right: .4rem; color: #fff; font-size: .7rem; flex: none; }

.vbadge { display: inline-flex; align-items: center; font-size: .8125rem; font-weight: 700; color: var(--bf-text); background: #F4F6F9; border-radius: 999px; padding: .25rem .7rem .25rem .3rem; white-space: nowrap; align-self: flex-start; }
.vbadge .vbar-key { border-radius: 999px; width: 1.25rem; height: 1.25rem; }

/* Price history line chart */
.hchart { display: block; width: 100%; height: 200px; overflow: visible; }
.hchart-mini { height: 36px; }
.hchart .grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hchart .axis { font-size: 11px; fill: var(--bf-muted); }
.hchart .axis-strong { fill: var(--bf-text); font-weight: 700; }
.hchart .bf-line { stroke: var(--bf-accent); stroke-width: 2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.hchart .base-line { stroke: var(--bf-muted); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.hchart .line { fill: none; stroke: var(--bar-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hchart .dot { stroke: var(--bar-strong); stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hchart .dot-mini { stroke-width: 8; }
.hchart .hit { fill: transparent; cursor: default; }

/* Shop price bars (bars start at zero; dashed tick = early-Nov price) */
.rbars { list-style: none; padding: 0; margin: 0; }
.rbars li { display: grid; grid-template-columns: 8.5rem 1fr 4.75rem; align-items: center; gap: .75rem; padding: .3rem 0; }
.rbar-name { font-size: .875rem; color: var(--bf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rbar-name:hover { text-decoration: underline; }
.rbar-track { position: relative; height: 12px; display: block; }
.rbar-fill { display: block; height: 100%; background: var(--bar-soft); border-radius: 0 4px 4px 0; }
.is-best .rbar-fill { background: var(--bar-strong); }
.is-best .rbar-name, .is-best .rbar-val { font-weight: 700; }
.rbar-base { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--bf-muted); }
.rbar-val { font-size: .875rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--bf-text); }
.rbar-note { font-size: .75rem; color: var(--bf-muted); margin: .5rem 0 0; display: flex; align-items: center; }
.rbar-base-key { display: inline-block; height: 12px; border-left: 2px dashed var(--bf-muted); margin-right: .5rem; }
.rbars-count li { grid-template-columns: 9rem 1fr 2.5rem; padding: .4rem 0; }
.rbars-count .rbar-track { height: 16px; }

/* Top picks */
.pick-card { border: 1px solid var(--bf-line); border-radius: .75rem; box-shadow: none; transition: border-color .15s; }
.pick-card:hover { border-color: var(--bf-ink); }
.pick-card .price-now { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.pick-chart { margin-top: 1rem; }

/* Deal list */
.deal-list { border: 1px solid var(--bf-line); border-radius: .75rem; overflow: hidden; background: #fff; }
.deal-row + .deal-row { border-top: 1px solid var(--bf-line); }
.deal-main { display: grid; grid-template-columns: minmax(0, 2.2fr) 1.1fr 120px 1.5fr auto; align-items: center; gap: 1.25rem; padding: 1rem 1.25rem; }
.deal-product .product-name { font-weight: 700; color: var(--bf-text); }
.deal-price .price-now { display: block; font-weight: 800; font-size: 1.125rem; white-space: nowrap; }
.deal-price .price-old { display: block; color: var(--bf-muted); font-size: .8125rem; white-space: nowrap; }
.was-flag { font-size: .75rem; color: var(--st-critical); display: block; }
.deal-cta { text-align: right; }
.deal-toggle { display: block; margin-left: auto; padding: .25rem 0 0; font-size: .75rem; font-weight: 600; color: var(--bf-muted); }
.deal-toggle .fe { transition: transform .15s; display: inline-block; }
.deal-toggle:not(.collapsed) .fe { transform: rotate(180deg); }
.deal-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; padding: 1.25rem 1.25rem 1.5rem; background: #FAFBFC; border-top: 1px dashed var(--bf-line); }
.deal-detail-title { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bf-muted); margin-bottom: .75rem; }
@media (max-width: 991.98px) {
  .deal-main { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .deal-product { grid-column: 1 / -1; }
  .deal-spark { display: none; }
  .deal-cta { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 1rem; }
  .deal-cta .btn-bf { flex: 1; }
  .deal-toggle { margin: 0; padding: 0; }
  .deal-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .rbars li { grid-template-columns: 6.5rem 1fr 4.25rem; }
}

/* Content */
.prose h2 { margin-top: 2.5rem; }
.stat-number { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.disclosure { font-size: .875rem; }

/* Footer */
.bf-footer { background: var(--bf-ink); color: var(--bf-on-ink-muted); }
.bf-footer h6 { color: #fff; }
.bf-footer a, .bf-footer .text-muted { color: var(--bf-on-ink-muted) !important; }
.bf-footer a:hover { color: var(--bf-accent) !important; }
.bf-footer p { color: var(--bf-on-ink-muted); }

@media (forced-colors: active) {
  .vbar-seg, .rbar-fill { forced-color-adjust: none; border: 1px solid CanvasText; }
}