/* DealsSpy deal page · Deal history (app/Views/Public/Deal/Component/DealHistory.php).
   Loaded after ds.css and ds-deal.css, only on deal pages with a history. The pop-up
   reuses the .ds-drawer sheet from ds.css. Pastel chips keep dark text in both themes
   (the pastel tokens are the same in dark mode). */

/* "Best price we've posted", under the price */
.dh-best{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:10px 14px;border-radius:18px;background:var(--mint);color:#11152E;text-decoration:none;transition:transform .2s var(--spring)}
.dh-best:hover{transform:translateY(-1px)}
.dh-best:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dh-best>.ic{flex:none;color:#1F7A45}
.dh-best span{display:grid;gap:2px;min-width:0}
.dh-best b{font:700 14px/1.25 var(--font)}
.dh-best small{font:500 12px/1.3 var(--font);color:#3C4466}

/* The section */
.dh{margin-top:4px;scroll-margin-top:90px}
.dh-intro{margin:6px 0 0;font:500 13px/1.5 var(--font);color:var(--muted)}
.dh-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.dh-stat{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--text);font:600 13px/1.25 var(--font)}
.dh-stat b{font-weight:800}
.dh-stat .ic{flex:none;color:var(--muted)}
.dh-stat.is-best{background:var(--mint);color:#11152E}
.dh-stat.is-best .ic{color:#1F7A45}

.dh-list{margin:12px 0 0;padding:0;list-style:none;border-radius:22px;background:var(--surface-2);overflow:hidden}
.dh-list>li+li{border-top:1px solid var(--line)}
.dh-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;margin:0;padding:12px 12px 12px 16px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.dh-row:hover{background:var(--line)}
.dh-row:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.dh-row>.ic{flex:none;color:var(--muted)}
.dh-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.dh-row.is-now .dh-dot{background:var(--good);box-shadow:0 0 0 4px rgba(31,122,69,.18)}
.dh-main{flex:1;min-width:0;display:grid;gap:4px}
.dh-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font:800 16px/1.2 var(--font);letter-spacing:-.01em}
.dh-price s{font:500 13px/1.2 var(--font);color:var(--muted)}
.dh-price em{font:700 12px/1.2 var(--font);font-style:normal;color:var(--cta-text)}
.dh-meta{font:500 12.5px/1.4 var(--font);color:var(--muted);overflow-wrap:anywhere}
.dh-chips{display:flex;flex-wrap:wrap;gap:6px}
.dh-chip{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:7px;background:var(--sky);color:#11152E;font:700 11px/1.2 var(--font)}
.dh-chip.is-now{background:var(--mint)}
.dh-chip.is-bank{background:var(--butter)}
.dh-chip.is-coupon{background:var(--peach)}
.dh-chip.is-other{background:var(--lilac)}
.dh-chip.is-ended{background:var(--rose);color:#8A1C2E}

.dh-more{margin-top:10px}
.dh-more>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--surface-2);color:var(--text);font:700 13px/1 var(--font);cursor:pointer;list-style:none}
.dh-more>summary::-webkit-details-marker{display:none}
.dh-more>summary:hover{background:var(--line-strong)}
.dh-more>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dh-more[open]>summary{margin-bottom:2px}

/* The pop-up (inside .ds-drawer) */
.dh-sheet .ds-drawer-head h2{overflow-wrap:anywhere}
.dh-body{flex:1 1 auto;min-height:0;display:grid;align-content:start;gap:12px;padding:0 20px 8px;overflow-y:auto;overscroll-behavior:contain}
.dh-sheet .dh-sub{font:500 13px/1.5 var(--font);color:var(--muted)}
.dh-sheet .dh-sub a{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dh-sheet .dh-deal{padding:10px 12px;border-radius:14px;background:var(--surface-2);font:600 13px/1.4 var(--font);color:var(--text)}
.dh-break{display:grid;gap:8px;padding:14px 16px;border-radius:20px;background:var(--surface-2)}
.dh-break>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:500 14px/1.3 var(--font);color:var(--muted)}
.dh-break>div b{color:var(--text);font-weight:700;text-align:right}
.dh-break>.is-mrp b{font-weight:500;text-decoration:line-through}
.dh-break>.is-total{color:var(--text)}
.dh-break>.is-total b{font:800 20px/1.1 var(--font);letter-spacing:-.02em}
.dh-break>.is-save b{color:var(--good)}
.dh-sheet .ds-offerband,.dh-sheet .ds-coupon{margin:0}
.dh-sheet .dh-h3{margin:4px 0 0;font:700 14px/1.3 var(--font);color:var(--text)}
.dh-sheet .dh-text{white-space:pre-line;font:400 14px/1.6 var(--font);color:var(--text);overflow-wrap:anywhere}
/* Formatted offer details (the description as posted then, or this page's own) */
.dh-sheet .dh-rich{font-size:14px;line-height:1.6}
.dh-sheet .dh-rich>:last-child{margin-bottom:0}
.dh-sheet .dh-rich .ds-inline-cta{white-space:normal;text-align:left}
.dh-sheet .dh-rich img{max-height:320px;width:auto;object-fit:contain}
.dh-sheet .dh-text a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.dh-sheet .dh-lasted{display:flex;align-items:center;gap:8px;font:600 13px/1.4 var(--font);color:var(--muted)}
.dh-sheet .dh-lasted.is-live{color:var(--good)}
.dh-sheet .dh-lasted .ic{flex:none}
.dh-alts{display:grid;gap:6px}
.dh-alt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 12px 8px 14px;border-radius:16px;background:var(--surface-2);text-align:left;transition:background-color .2s}
.dh-alt:hover{background:var(--line-strong)}
.dh-alt-t{flex:1;min-width:0;display:grid;gap:3px}
.dh-alt-t b{font:700 13px/1.2 var(--font);color:var(--text)}
.dh-alt-t small{font:500 12px/1.3 var(--font);color:var(--muted);overflow-wrap:anywhere}
.dh-alt>.ic{flex:none;color:var(--muted)}
.dh-sheet .dh-go{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-top:4px;padding:0 20px;border-radius:999px;background:var(--navy);color:var(--on-navy);font:700 15px/1 var(--font);text-decoration:none;transition:transform .2s var(--spring),filter .2s}
.dh-sheet .dh-go:hover{filter:brightness(1.08);color:var(--on-navy)}
.dh-sheet .dh-go:active{transform:scale(.98)}
.dh-sheet .dh-note{font:500 12px/1.5 var(--font);color:var(--muted)}
/* Opened from a shared link (?r=), and the button that shares one */
.dh-sheet .dh-linked{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:14px;background:var(--sky);color:#11152E;font:600 13px/1.45 var(--font)}
.dh-sheet .dh-linked .ic{flex:none;margin-top:1px}
.dh-sheet .dh-share{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;background:var(--surface-2);color:var(--text);font:700 14px/1 var(--font);transition:background-color .2s}
.dh-sheet .dh-share:hover{background:var(--line-strong)}

@media (min-width:992px){
  .dh-best{max-width:540px}
}
@media (prefers-reduced-motion:reduce){
  .dh-best,.dh-row,.dh-alt,.dh-sheet .dh-go{transition:none}
}