/* Compare screen: filters, offer cards, full comparison table. */
/* ---------- compare ---------- */
.pill-select { display: flex; align-items: center; gap: var(--s3); background: var(--lilac-50); border-radius: var(--r-pill); padding: 6px 6px 6px 16px; box-shadow: inset 0 0 0 1.5px var(--lilac); }
[dir="rtl"] .pill-select { padding: 6px 16px 6px 6px; }
.pill-select svg.mascot { width: 40px; height: 34px; flex: none; }
.pill-select .t { flex: 1; min-width: 0; } .pill-select .t b { display: block; font-size: 15.5px; } .pill-select .t span { font-size: 12.5px; color: var(--ink-2); }
.pill-select select { border: 0; background: var(--surface); border-radius: var(--r-pill); padding: 10px 12px; font-weight: 700; max-width: 52%; box-shadow: var(--shadow); }
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.filters label.sel { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border-radius: var(--r-pill); padding: 4px 4px 4px 12px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 13.5px; font-weight: 700; }
[dir="rtl"] .filters label.sel { padding: 4px 12px 4px 4px; }
.filters select { border: 0; background: var(--lilac-50); border-radius: var(--r-pill); padding: 6px 10px; font-weight: 700; max-width: 170px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; background: var(--surface); border-radius: var(--r-pill); padding: 6px 12px; box-shadow: inset 0 0 0 1.5px var(--line); border: 0; }
.toggle .sw { width: 34px; height: 20px; border-radius: 10px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.toggle .sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: inset-inline-start .2s; }
.toggle[aria-checked="true"] .sw { background: var(--purple); }
.toggle[aria-checked="true"] .sw::after { inset-inline-start: 16px; }

.offers { display: grid; gap: var(--s3); }
.offer { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s4); display: grid; gap: var(--s2); position: relative; animation: pop .4s ease-out both; }
.offer:nth-child(2) { animation-delay: .06s; } .offer:nth-child(3) { animation-delay: .12s; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.offer.best { background: linear-gradient(160deg, #E9FBF2, #D3F5E4); box-shadow: inset 0 0 0 2px var(--mint), var(--shadow); }
.offer .top { display: flex; align-items: center; gap: var(--s3); }
/* chain brand colours are mixed with black so white text on them (and them as text) passes WCAG AA */
.chain-badge { background: color-mix(in srgb, var(--chain) 72%, #000); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; font-family: var(--font-he); }
.offer .who { flex: 1; min-width: 0; }
.offer .who b { display: block; font-size: 17px; }
.offer .who span { display: block; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer .total { text-align: end; flex: none; }
.offer .total .v { display: block; font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.offer .total .was { display: block; font-size: 12.5px; color: var(--ink-3); text-decoration: line-through; }

/* the card header is one big button that opens the per-product breakdown */
.offer-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); width: 100%; min-width: 0;
  background: none; border: 0; padding: 0; margin: 0; text-align: start; cursor: pointer;
  border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent;
}
.offer-head:focus-visible { outline-offset: 6px; }
.offer:not(.open):hover { box-shadow: 0 10px 26px rgba(60, 30, 140, .14), 0 1px 3px rgba(60, 30, 140, .06); }
.offer.best:not(.open):hover { box-shadow: inset 0 0 0 2px var(--mint), 0 10px 26px rgba(18, 128, 79, .18); }
.offer .expand {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 2px; padding-top: var(--s2); border-top: 1px dashed var(--line);
  font-size: 13px; font-weight: 800; color: var(--purple);
}
.offer.best .expand { border-top-color: rgba(18, 128, 79, .25); color: var(--mint-700); }
.offer .expand svg { width: 18px; height: 18px; transition: transform .2s ease; }
.offer.open .expand svg { transform: rotate(180deg); }

/* per-product breakdown */
.offer-lines { animation: lines-in .22s ease-out; }
@keyframes lines-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.offer-lines ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ol { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.offer.best .ol { border-bottom-color: rgba(18, 128, 79, .15); }
.ol .e { width: 34px; height: 34px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; font-size: 19px; flex: none; }
.offer.best .ol .e { background: rgba(255, 255, 255, .7); }
.ol .d { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ol .nm { font-weight: 700; font-size: 14px; line-height: 1.25; }
.ol small { font-size: 12.5px; color: var(--ink-2); }
.ol .pbadge { justify-self: start; font-size: 11px; font-weight: 800; background: #FFF1BF; color: #7A5800; padding: 1px 8px; border-radius: 6px; }
.ol .p { flex: none; text-align: end; display: grid; justify-items: end; gap: 1px; }
.ol .p b { font-size: 15px; font-weight: 800; }
.ol .p s { font-size: 12px; color: var(--ink-3); }
.ol.has-promo .p b { color: var(--mint-700); }
.ol.missing-line .nm, .ol .p.na { color: var(--ink-3); }
.ol.missing-line small { color: #8A6400; font-weight: 700; }

.ol-sum { margin: var(--s2) 0 0; display: grid; gap: 4px; }
.ol-sum > div { display: flex; justify-content: space-between; gap: var(--s3); font-size: 13.5px; color: var(--ink-2); }
.ol-sum dt, .ol-sum dd { margin: 0; }
.ol-sum .save { color: var(--mint-700); font-weight: 700; }
.ol-sum .grand { font-size: 16px; font-weight: 800; color: var(--ink); padding-top: 4px; }
.offer .tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { font-size: 12px; font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px; background: var(--lilac-50); color: var(--ink-2); }
.tag.good { background: var(--mint); color: #0B4A2E; }
.tag.up { background: var(--danger-50); color: var(--danger); }
.tag.promo { background: #FFF1BF; color: #7A5800; }
.tag.warn { background: #FFF1BF; color: #7A5800; }
.best-flag { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--mint-700); }
.best-flag .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--mint-700); color: #fff; display: grid; place-items: center; font-size: 14px; }
.missing { font-size: 13px; color: var(--ink-2); background: #FFF8DE; border-radius: var(--r-sm); padding: 8px 12px; }
.missing b { color: #7A5800; }
.partial-head { font-size: 14px; font-weight: 800; color: var(--ink-2); margin-top: var(--s2); }
.verdict { display: flex; gap: var(--s3); align-items: center; background: var(--surface); border-radius: var(--r); padding: var(--s3) var(--s4); box-shadow: var(--shadow); }
.verdict svg.mascot { width: 62px; height: 52px; flex: none; }
.verdict b { display: block; font-size: 16px; }
.verdict span { font-size: 13px; color: var(--ink-2); }

.detail-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
table.detail { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
table.detail col.pc { width: 34%; }
table.detail th, table.detail td { padding: 9px 5px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.detail th { font-size: 12px; color: var(--ink-2); font-weight: 800; position: sticky; top: 0; background: var(--surface); }
table.detail td.c { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.detail th.c { text-align: end; }
table.detail td.low { background: var(--mint-50); font-weight: 800; }
table.detail .na { color: var(--ink-3); }
table.detail .strike { display: block; color: var(--ink-3); text-decoration: line-through; font-size: 11.5px; }
table.detail .pbadge { display: inline-block; font-size: 10px; font-weight: 800; background: #FFF1BF; color: #7A5800; padding: 1px 5px; border-radius: 6px; margin-top: 2px; white-space: normal; text-align: center; line-height: 1.3; }
table.detail td.c { white-space: normal; }
table.detail tfoot td { font-weight: 800; border-bottom: 0; }
.pn { font-weight: 700; } .pn small { display: block; color: var(--ink-3); font-weight: 500; }

.chain-text { color: color-mix(in srgb, var(--chain) 72%, #000); }