/*
 * BINABY | pages/factcheck_drawer.css
 * Quick fact-check drawer; loaded globally by base.html.
 * Main selectors: .cmp-drawer, .cmp-target, .cmp-body, .cmp-block
 * Keep cascade order and media conditions. Edit existing rules instead of appending patches.
 * Shared tokens: site.css. File map and rationale: CSS_MAINTENANCE.md.
 */

.cmp-drawer {
  pointer-events: none;
}

.cmp-drawer.is-open {
  pointer-events: auto;
}

.cmp-drawer__backdrop {
  opacity: 0;
  transition: opacity .18s ease;
}

.cmp-drawer.is-open .cmp-drawer__backdrop {
  opacity: 1;
}

.cmp-drawer__panel {
  transform: translateX(100%);
}

.cmp-drawer.is-open .cmp-drawer__panel {
  transform: translateX(0);
}

.cmp-drawer__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cmp-drawer__close {
  font-size: 20px;
  line-height: 1;
}

/* Loading / empty */

.cmp-drawer-section {
  display: flex;
  flex-direction: column;
}

/* Buttons row */

/* Muted utility */

.cmp-fact__label {
  white-space: normal;
}

.cmp-pricebar__edge {
  white-space: nowrap;
}

/* Rail wrapper provides positioning context for the chip */

/* Rail */

/* Highlight ONLY normal range */

.cmp-pricebar__normal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--q1);
  width: calc(var(--q3) - var(--q1));
}

/* Median tick */

.cmp-pricebar__median {
  position: absolute;
  left: var(--m);
}

/* Target marker */

.cmp-pricebar__marker {
  position: absolute;
  left: var(--p);
  transform: translateX(-50%);
}

.cmp-pricebar__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
}

/* Typical chip under the bar, anchored to median position */

.cmp-pricebar__median-chip {
  position: absolute;
  left: clamp(26px, var(--m), calc(100% - 26px));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sentence */

.cmp-drawer__title {
  letter-spacing: -0.01em;
}

.cmp-drawer__close:hover {
  background: var(--surface-3) !important;
}

.cmp-loading,
.cmp-empty {
  padding: 16px !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: 16px !important;
  background: #f9fbfd !important;
  color: var(--muted) !important;
}

.cmp-kicker {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cmp-target {
  border-radius: 18px !important;
}

.cmp-source {
  text-transform: capitalize;
}

.cmp-fact {
  border-top: 0 !important;
}

.cmp-fact:first-child {
  border-top: 1px solid var(--border) !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.cmp-fact:last-child {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

.cmp-fact--price .cmp-fact__label {
  margin-bottom: 10px !important;
}

.cmp-priceblock__sentence {
  font-size: 0.93rem !important;
  line-height: 1.5 !important;
  color: var(--text-soft) !important;
}

.cmp-drawer-footer {
  padding-top: 4px !important;
}

/* Reset previous ad hoc top/height tweaks */

.cmp-drawer,
.cmp-drawer__backdrop,
.cmp-drawer__panel {
  top: auto !important;
  height: auto !important;
}

/* Drawer always covers viewport and remains stable on scroll */

/* Backdrop covers the whole viewport */

/* Panel starts below the app header consistently */

/* Internal scroll belongs to body only */

/* Buttons stay in one row and read better */

.cmp-actions {
  flex-wrap: wrap;
}

/* Stronger typical price band */

/* Mobile */

/* body background like the rest of app */

/* each major block becomes a white section with spacing, not lines */

/* target area: no border box inside border box */

/* remove row dividers from facts */

/* price block same style */

/* softer section rhythm */

.cmp-drawer__body {
  display: flex !important;
  flex-direction: column !important;
}

/* each main block is its own white card */

/* target product block */

/* section headings */

.cmp-kicker {
  margin-bottom: 6px !important;
  color: var(--muted) !important;
}

/* fact rows should be separated chunks, not one wall of text */

/* price position block is its own soft card */

/* keep target buttons tidy */

.cmp-actions {
  align-items: stretch !important;
}

.cmp-actions .btn-ss,
.cmp-actions .btn-ss--small,
.cmp-actions .ss-btn,
.cmp-actions a.btn-ss,
.cmp-actions a.btn-ss--small {
  min-width: 0 !important;
  padding: 0.55rem 0.75rem !important;
  white-space: nowrap !important;
  width: 100% !important;
  min-height: 38px !important;
  font-size: 0.82rem !important;
  justify-content: center !important;
}

/* footer note should not feel attached to the last fact row */

/* true floating drawer; do not anchor below header */

.cmp-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

.cmp-drawer__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(18, 26, 38, 0.34) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.cmp-drawer__panel {
  transition: transform .22s ease;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  background: #f4f7fb !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -24px 0 54px rgba(16, 24, 40, 0.18) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.cmp-drawer__hdr {
  padding: 18px 18px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

.cmp-drawer__title {
  font-size: 1.18rem !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

.cmp-drawer__sub {
  font-size: 1rem !important;
  line-height: 1.35 !important;
  color: var(--text-soft) !important;
  margin-top: 4px !important;
}

.cmp-drawer__close {
  cursor: pointer;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.cmp-drawer__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  background: #f4f7fb !important;
}

.cmp-drawer-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* main white cards */

.cmp-drawer-section {
  background: #ffffff !important;
  border: 1px solid #e1e8f0 !important;
  box-shadow: none !important;
  gap: 12px !important;
}

/* target product area */

.cmp-target {
  display: grid !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  align-items: start !important;
}

.cmp-target__img {
  width: 112px !important;
  height: 112px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  background: #f8fafc !important;
  border: 1px solid var(--border) !important;
}

.cmp-target__meta {
  display: flex !important;
  flex-direction: column !important;
}

/* source becomes the original-link control */

.cmp-sourceLink {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  border: 1px solid #cfd7e3 !important;
  background: #fff !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.cmp-sourceLink:hover {
  background: #f8fbff !important;
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(111, 143, 184, 0.12) !important;
}

.cmp-sourceLink--static {
  cursor: default !important;
}

.cmp-sourceLink__logo {
  object-fit: contain !important;
}

.cmp-sourceLink__dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  border-radius: 999px !important;
  background: #9fb3ca !important;
}

.cmp-sourceLink__name {
  line-height: 1 !important;
  color: var(--text) !important;
}

.cmp-sourceLink__ext {
  color: var(--muted) !important;
}

.cmp-source {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.cmp-title {
  color: var(--text) !important;
}

.cmp-price {
  color: var(--text) !important;
}

/* single stronger CTA */

.cmp-actions {
  grid-template-columns: 1fr 1fr !important;
  display: grid !important;
  gap: 10px !important;
}

.cmp-actions--single {
  grid-template-columns: 1fr !important;
}

.cmp-primaryCta,
.cmp-actions .btn-ss,
.cmp-actions a.btn-ss {
  width: 100% !important;
  line-height: 1.1 !important;
  justify-content: center !important;
  text-align: center !important;
}

/* fact cards */

.cmp-drawer-section:nth-of-type(2) {
  gap: 12px !important;
}

.cmp-fact {
  background: #f8fafc !important;
  border: 1px solid #e1e8f0 !important;
  border-radius: 16px !important;
  margin: 0 !important;
}

.cmp-fact + .cmp-fact {
  margin-top: 0 !important;
}

.cmp-fact:first-child,
.cmp-fact:last-child {
  border-radius: 16px !important;
}

.cmp-fact__label {
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 0 10px 0 !important;
}

.cmp-fact__value {
  color: var(--text-soft) !important;
}

/* insight list */

.cmp-insightList {
  display: flex !important;
  flex-direction: column !important;
}

.cmp-insightItem {
  display: flex !important;
  align-items: flex-start !important;
}

.cmp-insightItem > i {
  font-size: 1rem !important;
  margin-top: 0.2rem !important;
  color: var(--text-soft) !important;
}

.cmp-insightItem__title {
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin-bottom: 3px !important;
}

/* price block */

.cmp-fact--price {
  background: #f8fafc !important;
}

.cmp-priceblock {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.cmp-pricebar__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  align-items: center !important;
}

.cmp-pricebar__edge {
  line-height: 1 !important;
  color: var(--text-soft) !important;
}

.cmp-pricebar__railwrap {
  position: relative !important;
  min-width: 0 !important;
  grid-column: 1 / -1;
  grid-row: 1;
}

.cmp-pricebar__edge:last-child { text-align: right; }
.cmp-pricebar__summary { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .76rem; color: var(--text-soft); }

.cmp-pricebar__marker {
  opacity: 1 !important;
}

.cmp-pricebar__median-chip {
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: none !important;
}

.cmp-drawer-footer {
  color: var(--text-soft) !important;
  padding: 0 4px 6px !important;
}

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

/* mobile */

@media (max-width: 640px) {
  .cmp-drawer__hdr,
  .cmp-drawer__body {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* 1) drawer a bit narrower */

.cmp-drawer__panel {
  width: min(380px, 92vw) !important;
}

/* 2) keep image size, reduce everything else in hero */

.cmp-drawer-section--hero {
  padding: 14px !important;
}

.cmp-target {
  grid-template-columns: 112px 1fr !important;
  gap: 14px !important;
}

.cmp-target__meta {
  gap: 8px !important;
}

.cmp-sourceLink {
  min-height: 38px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  border-radius: 999px !important;
}

.cmp-sourceLink__logo {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.cmp-sourceLink__name {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

.cmp-sourceLink__ext {
  font-size: 0.82rem !important;
}

.cmp-title {
  font-size: 0.92rem !important;
  line-height: 1.34 !important;
  font-weight: 700 !important;
}

.cmp-price {
  font-size: 1.2rem !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.cmp-actions {
  margin-top: 2px !important;
}

.cmp-primaryCta,
.cmp-actions .btn-ss,
.cmp-actions a.btn-ss {
  min-height: 42px !important;
  padding: 0.68rem 0.9rem !important;
  border-radius: 13px !important;
  font-weight: 600 !important;
}

/* make internal cards slightly tighter too */

.cmp-drawer__body {
  padding: 14px !important;
  gap: 14px !important;
}

.cmp-drawer-section {
  padding: 14px !important;
  border-radius: 18px !important;
}

.cmp-fact {
  padding: 12px !important;
}

.cmp-fact__label {
  font-size: 0.94rem !important;
  margin-bottom: 8px !important;
}

.cmp-fact__value {
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
}

.cmp-insightList {
  gap: 12px !important;
}

.cmp-insightItem {
  gap: 10px !important;
}

.cmp-insightItem__title {
  font-size: 0.92rem !important;
}

.cmp-insightItem__text {
  font-size: 0.9rem !important;
  line-height: 1.42 !important;
}

.cmp-drawer-footer {
  font-size: 0.88rem !important;
  line-height: 1.42 !important;
}

/* 3) make normal price range clearly visible inside total bar */

.cmp-pricebar__edge {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
}

/* mobile */

@media (max-width: 640px) {
  .cmp-drawer__panel {
    width: 100vw !important;
  }

  .cmp-target {
    grid-template-columns: 84px 1fr !important;
  }

  .cmp-target__img {
    width: 84px !important;
    height: 84px !important;
  }
}

/* CTA — keep it on one horizontal line */

.cmp-primaryCta,
.cmp-actions .btn-ss,
.cmp-actions a.btn-ss {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
}

/* price bar: clearer separation between full range / normal range / selected product */

.cmp-pricebar__railwrap {
  padding-top: 12px !important;
  padding-bottom: 6px !important;
}

.cmp-pricebar__rail {
  position: relative !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--brand-100, #eef3fb) !important;
  border: 0 !important;
  overflow: visible !important;
}

.cmp-pricebar__normal {
  background: var(--brand-500, #6f8fb8) !important;
  opacity: 1 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

.cmp-pricebar__median {
  top: -5px !important;
  width: 2px !important;
  height: 20px !important;
  transform: translateX(-50%);
  background: var(--brand-700, #435f80) !important;
  border-radius: 2px !important;
  opacity: 0.9 !important;
}

.cmp-pricebar__marker {
  top: -5px !important;
  width: 3px !important;
  height: 20px !important;
  background: #2f537f !important;
  border-radius: 2px !important;
}

.cmp-pricebar__marker::after {
  width: 11px !important;
  height: 11px !important;
  background: #2f537f !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18) !important;
}

.cmp-pricebar__median-chip {
  top: 26px !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  background: #ffffff !important;
  border: 1px solid #cad4e0 !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Quick insight section header */

.cmp-fact__label--qi {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.cmp-qi-icon {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}