#offers, .offer-detail-dialog {
  --offer-blue:#075cc9;
  --offer-cyan:#0199fa;
  --offer-ink:#102f59;
  --offer-tint:#eaf5ff;
  --offer-line:#d1e5f8;
  --offer-typeface:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
/* The public list is shared by the home section and the mobile offers route. */
#offers #offerList { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)) !important; gap:16px; }
#offers #offerList:has(> .dx-promo-card:only-child) { grid-template-columns:minmax(0,1fr) !important; }
#offers .offers-heading { justify-content:flex-start; gap:14px; }
#offers .dx-promo-count { color:#436487; font-size:13px; font-weight:500; }
#offers .dx-promo-card {
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:20px;
  padding:16px; min-width:0; border:1px solid #d7e3ee; border-radius:16px; background:#fff;
  color:#182e48; box-shadow:0 3px 12px rgba(28,57,92,.04); text-align:left;
}
.dx-promo-cover { border-radius:9px; overflow:hidden; position:relative; aspect-ratio:4/5; background:#eff5fa; }
.dx-promo-cover img { width:100%; height:100%; object-fit:contain; display:block; }
.dx-promo-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.dx-promo-meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:12px; color:#53697c; }
.dx-promo-status { display:inline-flex; align-items:center; gap:6px; color:var(--offer-blue); background:var(--offer-tint); font-size:12px; line-height:1.6; padding:2px 8px; border-radius:6px; font-weight:650; }
.dx-promo-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
#offers .dx-promo-copy h3 { display:block; margin:0; color:#152e4b; font-size:20px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
#offers .dx-promo-copy .dx-promo-summary { display:block; margin:0; color:#4f657a; font-size:14px; line-height:1.6; }
.dx-promo-more { display:inline-flex; align-items:center; gap:6px; color:#1458a4; font-size:14px; font-weight:650; }
.dx-promo-more::after { content:""; width:6px; height:6px; border:solid currentColor; border-width:1.5px 1.5px 0 0; transform:rotate(45deg); }
#offers .dx-promo-open { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:inherit; background:transparent; cursor:pointer; }
#offers .dx-promo-open:focus-visible { outline:2px solid #2471c6; outline-offset:2px; }
@media(hover:hover) { #offers .dx-promo-card:has(.dx-promo-open:hover) { border-color:#8eb4df; } }
@media(max-width:600px) {
  #offers .dx-promo-card { grid-template-columns:76px minmax(0,1fr); padding:12px; gap:13px; }
  #offers .dx-promo-copy h3 { font-size:17px; }
  #offers .dx-promo-copy .dx-promo-summary { font-size:13px; }
}

/* A photographic cover for the verified sports offer; other campaigns retain their artwork. */
#offers .dx-promo-feature {
  isolation:isolate; overflow:hidden; display:flex; align-items:center; container-type:inline-size;
  grid-column:1 / -1; min-height:238px; padding:0; border:1px solid var(--offer-line); border-radius:18px;
  background:linear-gradient(103deg,#fff 10%,#f8fcff 48%,#e7f4ff); box-shadow:0 6px 18px #1b559c0b;
}
.dx-promo-feature .dx-promo-cover {
  position:absolute; z-index:-1; inset:0 0 0 auto; width:min(66%,740px); border-radius:0; aspect-ratio:auto;
  background:transparent; mask-image:linear-gradient(90deg,transparent,#000 21%);
}
.dx-promo-feature .dx-promo-cover img { object-fit:cover; object-position:70% 43%; }
.dx-promo-feature .dx-promo-copy { width:min(62%,690px); padding:30px clamp(26px,4.3cqw,58px); gap:0; }
.dx-promo-feature .dx-promo-meta { color:#486787; font-size:13px; gap:10px; }
.dx-promo-feature .dx-promo-status::before { background:var(--offer-cyan); }
#offers .dx-promo-feature h3 {
  margin:12px 0 9px; color:var(--offer-ink); font-family:var(--offer-typeface);
  font-size:clamp(28px,3.1cqw,41px); font-weight:750; letter-spacing:.005em; line-height:1.24; text-wrap:balance;
}
.dx-promo-title-accent { color:var(--offer-blue); }
.dx-promo-title-sep { color:#7296bc; font-weight:400; }
#offers .dx-promo-feature .dx-promo-summary { color:#385573; font-size:14px; line-height:1.65; }
.dx-promo-summary span { display:inline-block; }
.dx-promo-feature .dx-promo-more {
  min-height:39px; margin-top:18px; padding:7px 17px; gap:10px; color:#fff; background:var(--offer-blue); border-radius:8px;
  font-size:13px; font-weight:650;
}
#offers .dx-promo-feature .dx-promo-open:focus-visible { outline:3px solid var(--offer-blue); outline-offset:-4px; }
@media(hover:hover) { .dx-promo-feature:has(.dx-promo-open:hover) .dx-promo-more { background:#054aa8; } }
@container (max-width:580px) {
  .dx-promo-feature .dx-promo-cover {
    inset:0 0 auto auto; width:76%; height:151px;
    mask-image:linear-gradient(90deg,transparent,#000 38%),linear-gradient(#000 75%,transparent);
    mask-composite:intersect;
  }
  .dx-promo-feature .dx-promo-cover img { object-position:75% 46%; }
  .dx-promo-feature .dx-promo-copy { width:100%; padding:18px; }
  .dx-promo-feature .dx-promo-meta { font-size:12px; }
  #offers .dx-promo-feature h3 { max-width:56%; margin:10px 0 13px; font-size:clamp(23px,6.5cqw,29px); line-height:1.16; }
  .dx-promo-title-accent { display:block; }
  .dx-promo-title-sep { display:none; }
  #offers .dx-promo-feature .dx-promo-summary { font-size:13px; }
  .dx-promo-feature .dx-promo-more { min-height:38px; margin-top:12px; }
}

html.offer-detail-active { overflow:hidden; }
dialog.offer-detail-dialog {
  position:fixed; inset:0; display:none; flex-direction:column; box-sizing:border-box;
  width:min(780px,calc(100vw - 48px)); height:calc(100dvh - 64px); max-width:none; max-height:none;
  margin:auto; padding:0; overflow:hidden; border:1px solid #dce8f4; border-radius:20px;
  background:#f4f8fd; color:var(--offer-ink); font-family:var(--offer-typeface);
  box-shadow:0 24px 90px #071b3e30;
}
dialog.offer-detail-dialog[open] { display:flex; }
.offer-detail-dialog *, .offer-detail-dialog *::before, .offer-detail-dialog *::after { box-sizing:border-box; }
.offer-detail-dialog [hidden] { display:none !important; }
.offer-detail-dialog::backdrop { background:#102c4c80; backdrop-filter:blur(5px); }
.offer-detail-header {
  display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 24px 8px; background:#fff;
}
.offer-detail-header h2 { margin:0; color:#133963; font-size:18px; line-height:1.5; font-weight:700; overflow-wrap:anywhere; }
.offer-detail-close {
  display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0;
  border:1px solid #e0eaf6; border-radius:50%; background:#f4f8fd; color:#3b638d; cursor:pointer;
}
.offer-detail-views { flex:none; display:flex; align-items:center; gap:12px; padding:6px 24px 14px; background:#fff; border-bottom:1px solid #e1ebf6; }
.offer-detail-views>[data-view] {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  flex:none; min-height:44px; padding:8px 2px; border:0; border-radius:6px; background:transparent;
  color:var(--offer-blue); font:500 13px/1.5 var(--offer-typeface); cursor:pointer;
}
.offer-detail-views>[data-view]:hover { background:#eff6ff; }
.offer-rule-navigation { flex:1; min-width:0; }
.offer-tier-switch { display:flex; gap:4px; padding:4px; background:#e5eef9; border:1px solid #dae7f7; border-radius:12px; }
.offer-tier-switch button {
  flex:1; min-width:0; min-height:42px; padding:8px 12px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:#55718f; font:600 14px/1.5 var(--offer-typeface); cursor:pointer;
}
.offer-tier-switch button[aria-pressed="true"] { color:var(--offer-blue); background:#fff; border-color:#d5e5f6; box-shadow:0 2px 5px #155ca70b; }
.offer-rules-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 24px 24px; scrollbar-gutter:stable; }
.offer-rules-intro { display:flex; gap:9px; align-items:flex-start; padding:12px 1px 14px; color:#53708b; font-size:13px; line-height:1.65; }
.offer-rules-intro::before { content:""; flex:0 0 5px; height:5px; margin-top:8px; border-radius:50%; background:var(--offer-cyan); }
.offer-rules-intro p { margin:0; text-wrap:pretty; }
.offer-rules-intro strong { color:#32597f; font-weight:600; }
.offer-facts {
  margin:0 0 20px; padding:15px 18px; border:1px solid #e0eaf5; border-radius:12px; background:#fff;
  display:grid; grid-template-columns:1fr 1.5fr; gap:18px; font-size:14px; line-height:1.7;
}
.offer-facts div { min-width:0; }
.offer-facts dt { margin-bottom:4px; color:#66809b; font-size:12px; font-weight:500; }
.offer-facts dd { margin:0; color:#254767; text-wrap:pretty; overflow-wrap:break-word; }
.offer-tier-table {
  width:100%; margin:0; border-collapse:separate; border-spacing:0; table-layout:fixed;
  color:#324e6e; font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums;
}
.offer-tier-table caption { padding:0 0 12px; text-align:left; color:#173e66; font-size:16px; font-weight:700; }
.offer-table-heading { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; justify-content:space-between; }
.offer-table-heading small { color:#6b8299; font-size:12px; font-weight:400; }
.offer-tier-table th { padding:11px 14px; color:#335f8b; font-size:12px; font-weight:600; background:#e6f1fe; }
.offer-tier-table th span,.offer-tier-table th small { display:block; }
.offer-tier-table th small { color:#547593; font-size:11px; font-weight:400; }
.offer-tier-table td { height:44px; padding:10px 14px; border-bottom:1px solid #e8eff7; background:#fff; }
.offer-tier-table th,.offer-tier-table td { text-align:center; }

.offer-tier-table th:first-child { border-radius:10px 0 0 0; }
.offer-tier-table th:last-child { border-radius:0 10px 0 0; }
.offer-tier-table tbody tr:last-child td:first-child { border-radius:0 0 0 10px; }
.offer-tier-table tbody tr:last-child td:last-child { border-radius:0 0 10px 0; }
.offer-tier-table td:not(:first-child) { color:#1260b5; font-weight:500; }
.offer-table-note { margin:10px 2px 0; color:#667f98; font-size:12px; line-height:1.6; }
.offer-conditions { margin-top:20px; border-top:1px solid #dce7f3; color:#526b86; font-size:13px; line-height:1.8; }
.offer-conditions summary { padding:14px 0; color:#315e8b; font-weight:600; cursor:pointer; }
.offer-conditions ul { margin:0; padding-left:18px; }
.offer-conditions li+li { margin-top:8px; }
.offer-detail-toolbar { display:flex; flex:none; align-items:center; justify-content:space-between; gap:8px; padding:10px 20px; border-bottom:1px solid #dfe9f4; background:#f7faff; }
.offer-detail-toolbar>span { color:#607a96; font-size:12px; }
.offer-detail-toolbar>div { display:flex; align-items:center; gap:6px; }
.offer-detail-toolbar button,.offer-detail-error button {
  min-width:38px; min-height:38px; padding:6px 10px; margin:0; border:1px solid #d5e5f5; border-radius:8px;
  color:#2c5c8c; background:#fff; font:500 13px/1.5 var(--offer-typeface); cursor:pointer;
}
.offer-detail-toolbar button:disabled { opacity:.4; cursor:default; }
.offer-detail-scroll { flex:1; min-height:0; overflow:auto; padding:16px; background:#edf3fa; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; }
.offer-detail-canvas { display:flex; min-width:100%; align-items:flex-start; justify-content:center; margin:0; }
.offer-detail-poster { display:block; flex:none; max-width:none; margin:0; padding:0; border:0; border-radius:0; background:#fff; overflow:visible; line-height:0; cursor:zoom-in; }
.offer-detail-poster img { display:block; width:100%; height:auto; max-width:none; max-height:none; margin:0; object-fit:contain; }
.offer-detail-dialog[data-zoomed="true"] .offer-detail-poster { cursor:zoom-out; }
.offer-detail-message { margin:0; color:#55718f; font-size:13px; line-height:1.8; text-align:center; }
.offer-detail-message:empty { display:none; }
.offer-detail-error { padding:48px 12px; color:#536e8b; text-align:center; font-size:14px; }
.offer-detail-dialog :is(button,summary,[tabindex]):focus-visible { outline:2px solid var(--offer-blue); outline-offset:2px; }
@media(max-width:768px) {
  dialog.offer-detail-dialog { width:100%; height:100vh; height:100dvh; margin:0; border:0; border-radius:0; }
  .offer-detail-header { padding:calc(8px + env(safe-area-inset-top)) 16px 4px; }
  .offer-detail-header h2 { font-size:16px; }
  .offer-detail-views { padding:5px 16px 12px; }
  .offer-tier-switch button { min-height:42px; }
  .offer-rules-scroll { padding:0 16px calc(20px + env(safe-area-inset-bottom)); scrollbar-gutter:auto; }
  .offer-facts { grid-template-columns:1fr; gap:12px; padding:14px; margin-bottom:18px; }
  .offer-facts div+div { border-top:1px solid #edf2f8; padding-top:10px; }
  .offer-facts dt { margin-bottom:2px; }
  .offer-tier-table th,.offer-tier-table td { padding:10px 12px; }
  .offer-detail-toolbar { padding:8px 12px; }
  .offer-detail-toolbar button { min-height:44px; }
  .offer-detail-scroll { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
}
@media(max-width:350px) {
  .offer-detail-header { padding-left:14px; padding-right:10px; gap:6px; }
  .offer-detail-header h2 { font-size:15px; }
  .offer-detail-views { gap:10px; padding-left:12px; padding-right:12px; }
  .offer-detail-views>[data-view] { font-size:12px; }
  .offer-tier-switch button { padding-left:4px; padding-right:4px; }
  .offer-rules-scroll { padding-left:12px; padding-right:12px; }
  .offer-facts { padding:12px; }
  .offer-tier-table th,.offer-tier-table td { padding:9px 8px; }
  .offer-detail-toolbar { gap:4px; padding-left:10px; padding-right:10px; }
}