/* ==========================================================================
   SEEYOUSOON — SHARED SMART AD SLOTS (Wave 15 G2)
   Supports all 5 placement zones in Dark & Light modes with mandatory
   Swedish «Annons» identification pill (Marknadsföringslagen 9 §).
   ========================================================================== */

.sys-ad-slot {
  --ad-surface: rgba(17, 21, 34, 0.84);
  --ad-surface-elevated: rgba(24, 29, 46, 0.92);
  --ad-border: rgba(255, 255, 255, 0.10);
  --ad-border-accent: rgba(168, 85, 247, 0.34);
  --ad-ink: #f8fafc;
  --ad-ink-2: rgba(226, 232, 240, 0.76);
  --ad-ink-3: rgba(148, 163, 184, 0.88);
  --ad-accent: #a855f7;
  --ad-accent-soft: rgba(168, 85, 247, 0.16);
  --ad-accent-ink: #d8b4fe;
  --ad-discount-bg: rgba(16, 185, 129, 0.16);
  --ad-discount-border: rgba(16, 185, 129, 0.36);
  --ad-discount-ink: #6ee7b7;
  --ad-pill-bg: rgba(255, 255, 255, 0.08);
  --ad-pill-border: rgba(255, 255, 255, 0.16);
  --ad-pill-ink: rgba(226, 232, 240, 0.82);
  --ad-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ad-ink);
}

html[data-theme="light"] .sys-ad-slot,
html[data-apple-theme="light"] .sys-ad-slot,
html[data-theme="light"] .sys-ad-popup-backdrop,
html[data-apple-theme="light"] .sys-ad-popup-backdrop {
  --ad-surface: rgba(255, 255, 255, 0.92);
  --ad-surface-elevated: #ffffff;
  --ad-border: rgba(15, 23, 42, 0.09);
  --ad-border-accent: rgba(124, 58, 237, 0.26);
  --ad-ink: #0f172a;
  --ad-ink-2: #334155;
  --ad-ink-3: #64748b;
  --ad-accent: #7c3aed;
  --ad-accent-soft: rgba(124, 58, 237, 0.10);
  --ad-accent-ink: #6d28d9;
  --ad-discount-bg: rgba(5, 150, 105, 0.10);
  --ad-discount-border: rgba(5, 150, 105, 0.28);
  --ad-discount-ink: #047857;
  --ad-pill-bg: rgba(15, 23, 42, 0.05);
  --ad-pill-border: rgba(15, 23, 42, 0.12);
  --ad-pill-ink: #475569;
  --ad-shadow: 0 8px 22px -8px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.sys-ad-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 9999px;
  background: var(--ad-pill-bg);
  border: 1px solid var(--ad-pill-border);
  color: var(--ad-pill-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.sys-ad-info-btn {
  appearance: none;
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  padding: 0 5px;
  border-radius: 9999px;
  border: 1px solid var(--ad-pill-border, rgba(255, 255, 255, 0.18));
  background: var(--ad-pill-bg, rgba(255, 255, 255, 0.08));
  color: var(--ad-pill-ink, rgba(226, 232, 240, 0.86));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
}
html[data-theme="light"] .sys-ad-info-btn,
html[data-apple-theme="light"] .sys-ad-info-btn {
  border-color: var(--ad-pill-border, rgba(15, 23, 42, 0.14));
  background: var(--ad-pill-bg, rgba(15, 23, 42, 0.06));
  color: var(--ad-pill-ink, #475569);
}

/* «Rapportera» beside the pill (round 47, owner-notes 100, js/core/content-report.js): the pill's quiet ink, a word to tap,
   never louder than the ad it is about */
.sys-ad-report {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ad-pill-ink, currentColor);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
}

/* inline-block, not inline-flex: a flex box never draws the ellipsis, and a long offer was cut mid-letter */
.sys-ad-discount-pill {
  display: inline-block;
  box-sizing: border-box;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 9999px;
  background: var(--ad-discount-bg);
  border: 1px solid var(--ad-discount-border);
  color: var(--ad-discount-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 1. home_top_trio */
.sys-ad-slot--trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sys-ad-trio-item {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sys-ad-trio-info {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
}
.sys-ad-trio-biz {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ad-ink-2);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sys-ad-trio-card {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 9px;
  border-radius: 14px;
  background: var(--ad-surface);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--ad-border);
  box-shadow: var(--ad-shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  text-align: start;
  color: var(--ad-ink);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}
.sys-ad-trio-card:active { transform: scale(0.97); }
.sys-ad-trio-top {
  width: 100%;
  box-sizing: border-box;
  display: block;
  font-size: 0;
  line-height: 0;
}
/* The ⓘ stands in the card's top corner (.sys-ad-trio-info). The pills flow around its place, and a pill that does not fit
   beside it («Annonse», «Hirdetés» on a 104 px card at 360 px) goes under it, never below it */
.sys-ad-trio-top::before {
  content: '';
  float: right;
  width: 26px;
  height: 22px;
}
[dir="rtl"] .sys-ad-trio-top::before { float: left; }
.sys-ad-trio-top > * {
  vertical-align: middle;
  margin-inline-end: 4px;
  margin-block: 1px;
}
.sys-ad-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ad-accent-soft);
  color: var(--ad-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.sys-ad-trio-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--ad-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  width: 100%;
}

/* 2. home_below_map */
.sys-ad-editorial-card {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 16px;
  border-radius: 18px;
  background: var(--ad-surface);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--ad-border-accent);
  box-shadow: var(--ad-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sys-ad-editorial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.sys-ad-editorial-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ad-ink-2);
}
.sys-ad-editorial-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ad-ink);
  overflow-wrap: anywhere;
}
.sys-ad-editorial-subline {
  margin: 0;
  font-size: 13px;
  line-height: 1.42;
  color: var(--ad-ink-2);
  overflow-wrap: anywhere;
}
.sys-ad-editorial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}
.sys-ad-editorial-cta {
  appearance: none;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: start;
  padding: 7px 14px;
  border-radius: 9999px;
  border: 1px solid var(--ad-border-accent);
  background: var(--ad-accent-soft);
  color: var(--ad-accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 140ms ease;
}
.sys-ad-editorial-cta:active { transform: scale(0.97); }

/* 3. sector_top */
.sys-ad-sector-banner {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--ad-surface);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--ad-border);
  box-shadow: var(--ad-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sys-ad-sector-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.sys-ad-sector-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sys-ad-sector-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
/* the business's name gives way (an ellipsis) before the title does; and the title goes to a line of its own when less than
   8em is left beside the pill, the ⓘ and the name (a long word, «Rapportera» in Romanian) */
.sys-ad-sector-biz,
.sys-ad-pre-cta-biz {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ad-ink-2);
  white-space: nowrap;
  min-width: 0;
  max-width: 45%;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sys-ad-sector-title-row .sys-ad-sector-title { flex: 1 1 8em; min-width: 0; }
.sys-ad-sector-title {
  margin: 0; font-size: 13px; font-weight: 700; line-height: 1.28; color: var(--ad-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-ad-sector-sub {
  margin: 0; font-size: 11.5px; line-height: 1.3; color: var(--ad-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-ad-sector-cta {
  appearance: none; flex-shrink: 0; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 11px; border-radius: 9999px;
  border: 1px solid var(--ad-border-accent); background: var(--ad-accent-soft);
  color: var(--ad-accent-ink); font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer;
}

/* 4. sector_pre_cta */
.sys-ad-pre-cta-row {
  box-sizing: border-box; width: 100%; padding: 9px 12px; border-radius: 12px;
  background: var(--ad-surface); border: 1px solid var(--ad-border-accent);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* the offer goes to a line of its own when less than 10em is left beside the pill, the ⓘ, the name and «Rapportera»: it was
   squeezed to nothing at 360 px */
.sys-ad-pre-cta-left { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; min-width: 0; flex: 1 1 auto; }
.sys-ad-pre-cta-copy {
  flex: 1 1 10em;
  min-width: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.32; color: var(--ad-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-ad-pre-cta-btn {
  appearance: none; flex-shrink: 0; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 11px; border-radius: 9999px;
  border: 1px solid var(--ad-discount-border); background: var(--ad-discount-bg);
  color: var(--ad-discount-ink); font-size: 12px; font-weight: 700; line-height: 1.25; cursor: pointer;
}

/* 5. home_popup_promax */
@keyframes sysAdPopupIn {
  from { transform: translate3d(0, 10px, 0) scale(0.97); }
  to { transform: translate3d(0, 0, 0) scale(1); }
}
.sys-ad-popup-backdrop {
  --ad-surface-elevated: rgba(16, 20, 32, 0.94);
  --ad-border-accent: rgba(168, 85, 247, 0.42);
  --ad-ink: #f8fafc;
  --ad-ink-2: rgba(226, 232, 240, 0.80);
  --ad-pill-bg: rgba(255, 255, 255, 0.08);
  --ad-pill-border: rgba(255, 255, 255, 0.18);
  --ad-pill-ink: rgba(226, 232, 240, 0.86);
  --ad-discount-bg: rgba(16, 185, 129, 0.16);
  --ad-discount-border: rgba(16, 185, 129, 0.36);
  --ad-discount-ink: #6ee7b7;
  position: fixed; inset: 0; z-index: 90; padding: 20px;
  background: rgba(5, 7, 14, 0.66);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
html[data-theme="light"] .sys-ad-popup-backdrop,
html[data-apple-theme="light"] .sys-ad-popup-backdrop { background: rgba(15, 23, 42, 0.36); }
.sys-ad-popup-dialog {
  box-sizing: border-box; width: 100%; max-width: 360px; padding: 20px; border-radius: 22px;
  background: var(--ad-surface-elevated);
  backdrop-filter: blur(26px) saturate(185%); -webkit-backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid var(--ad-border-accent);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--ad-ink); display: flex; flex-direction: column; gap: 12px;
  animation: sysAdPopupIn 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-dialog { border-color: rgba(245, 158, 11, 0.55); }
.sys-ad-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sys-ad-popup-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.sys-ad-popup-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 9999px;
  background: rgba(168, 85, 247, 0.18); border: 1px solid rgba(168, 85, 247, 0.38);
  color: #e9d5ff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
html[data-theme="light"] .sys-ad-popup-tag,
html[data-apple-theme="light"] .sys-ad-popup-tag {
  background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.28); color: #6d28d9;
}
.sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-tag {
  background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.45); color: #fde68a;
}
html[data-theme="light"] .sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-tag,
html[data-apple-theme="light"] .sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-tag {
  background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.35); color: #b45309;
}
.sys-ad-popup-close {
  appearance: none; width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid var(--ad-pill-border); background: var(--ad-pill-bg); color: var(--ad-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.sys-ad-popup-biz {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ad-ink-2); overflow-wrap: anywhere;
}
.sys-ad-popup-title {
  margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 19px; font-weight: 700; line-height: 1.26; letter-spacing: -0.015em; color: var(--ad-ink); overflow-wrap: anywhere;
}
.sys-ad-popup-subline { margin: 0; font-size: 13.5px; line-height: 1.46; color: var(--ad-ink-2); overflow-wrap: anywhere; }
.sys-ad-popup-cta {
  appearance: none; width: 100%; overflow-wrap: anywhere; padding: 12px 16px; border-radius: 9999px; border: none;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: #ffffff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1.25; cursor: pointer; box-shadow: 0 10px 24px -6px rgba(124, 58, 237, 0.52);
}
.sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-cta {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 10px 24px -6px rgba(217, 119, 6, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .sys-ad-popup-dialog { animation: none !important; }
  .sys-ad-trio-card, .sys-ad-editorial-cta { transition: none !important; }
}

/* ==========================================================================
   On every screen: the module's own type and box, restated where the screen's reset wins. css/stitch/_base.css sets
   [data-screen] button { font-size: 100%; font-weight: inherit; line-height: inherit; padding: 0; background-color:
   transparent } and [data-screen] * { border: 0 solid }, which outrank (a button) or follow (a sheet loaded later) a single
   class: a sector's «Se erbjudande» was drawn at 16 px with no pill and ran over the ad's own words (2026-11-09). The same
   values as above, one class more.
   ========================================================================== */
.sys-ad-slot .sys-ad-sector-cta { font-size: 12px; font-weight: 700; line-height: 1.2; padding: 6px 11px; border: 1px solid var(--ad-border-accent); background: var(--ad-accent-soft); }
.sys-ad-slot .sys-ad-pre-cta-btn { font-size: 12px; font-weight: 700; line-height: 1.25; padding: 5px 11px; border: 1px solid var(--ad-discount-border); background: var(--ad-discount-bg); }
.sys-ad-slot .sys-ad-editorial-cta { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
:is(.sys-ad-slot, .sys-ad-popup-backdrop) .sys-ad-report { font-size: 11px; font-weight: 600; line-height: inherit; padding: 0 6px; }
:is(.sys-ad-slot, .sys-ad-popup-backdrop) .sys-ad-info-btn { font-size: 12px; font-weight: 700; line-height: 1; padding: 0 5px; border: 1px solid var(--ad-pill-border); background: var(--ad-pill-bg); }
.sys-ad-popup-backdrop .sys-ad-popup-cta { font-size: 14px; font-weight: 700; line-height: 1.25; }
:is(.sys-ad-slot, .sys-ad-popup-backdrop) .sys-ad-pill { border: 1px solid var(--ad-pill-border); }
:is(.sys-ad-slot, .sys-ad-popup-backdrop) .sys-ad-discount-pill { border: 1px solid var(--ad-discount-border); }
.sys-ad-slot :is(.sys-ad-sector-banner, .sys-ad-trio-card) { border: 1px solid var(--ad-border); }
.sys-ad-slot .sys-ad-pre-cta-row { border: 1px solid var(--ad-border-accent); }

/* ==========================================================================
   On Home (B1): the zones' box, restated where the screen's reset wins.
   Every screen's own reset (css/stitch/_base.css, scoped to [data-screen]) sets button { padding: 0; background:
   transparent } and * { border: 0 solid #e5e7eb }, and both outrank the single classes above. On Home the trio's cards
   lost their padding, surface and edge and ran into one another, the pills their edge, and the editorial and «Pro Max»
   buttons their pill (the owner, 2026-10-30: «elements in the ads section overlap badly»). The same elements, texts and
   colours as above: only their box comes back, B1's only.
   ========================================================================== */
#screen-outlet [data-screen="B1"] .sys-ad-pill { border: 1px solid var(--ad-pill-border); }
#screen-outlet [data-screen="B1"] .sys-ad-discount-pill { border: 1px solid var(--ad-discount-border); }
/* an ad the server sent without an icon is drawn without one (the module's own rule), not as an empty square */
#screen-outlet [data-screen="B1"] .sys-ad-icon:empty,
.sys-ad-slot .sys-ad-icon:empty { display: none; }

/* 1. home_top_trio: three equal cards, each its own padded surface; the pill on top, the title, the offer at the card's foot
   (the Stitch round of 2026-10-30, design-ui/B-HEM-UI/B1-hem-karta/annonszoner/: 10 px inside, 8 px between, 16 px corners) */
#screen-outlet [data-screen="B1"] .sys-ad-slot--trio { gap: 8px; align-items: stretch; }
#screen-outlet [data-screen="B1"] .sys-ad-trio-card {
  min-height: 108px;
  padding: 10px 10px 12px;
  border: 1px solid var(--ad-border);
  border-radius: 16px;
  background: var(--ad-surface);
  justify-content: flex-start;
  gap: 8px;
  overflow: hidden;
}
#screen-outlet [data-screen="B1"] .sys-ad-trio-top { justify-content: flex-start; min-width: 0; }
#screen-outlet [data-screen="B1"] .sys-ad-trio-card .sys-ad-discount-pill { margin-top: auto; }
#screen-outlet [data-screen="B1"] .sys-ad-trio-card:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* 2. home_below_map: the card's accent edge, and its button a padded pill */
#screen-outlet [data-screen="B1"] .sys-ad-editorial-card { border: 1px solid var(--ad-border-accent); }
#screen-outlet [data-screen="B1"] .sys-ad-editorial-kicker > span:last-child:not(.sys-ad-pill) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-outlet [data-screen="B1"] .sys-ad-editorial-cta {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--ad-border-accent);
  border-radius: 9999px;
  background: var(--ad-accent-soft);
}

/* 5. home_popup_promax (the module's card, drawn inside B1): its edge, its round ✕ and its filled button */
#screen-outlet [data-screen="B1"] .sys-ad-popup-dialog { border: 1px solid var(--ad-border-accent); }
#screen-outlet [data-screen="B1"] .sys-ad-popup-badges { min-width: 0; }
#screen-outlet [data-screen="B1"] .sys-ad-popup-tag { border: 1px solid rgba(168, 85, 247, 0.38); }
html[data-theme="light"] #screen-outlet [data-screen="B1"] .sys-ad-popup-tag,
html[data-apple-theme="light"] #screen-outlet [data-screen="B1"] .sys-ad-popup-tag { border-color: rgba(124, 58, 237, 0.28); }
#screen-outlet [data-screen="B1"] .sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-tag { border-color: rgba(245, 158, 11, 0.45); }
html[data-theme="light"] #screen-outlet [data-screen="B1"] .sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-tag,
html[data-apple-theme="light"] #screen-outlet [data-screen="B1"] .sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-tag { border-color: rgba(217, 119, 6, 0.35); }
#screen-outlet [data-screen="B1"] .sys-ad-popup-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ad-pill-border);
  background: var(--ad-pill-bg);
}
#screen-outlet [data-screen="B1"] .sys-promax-close {
  width: 44px;
  height: 44px;
}
#screen-outlet [data-screen="B1"] .sys-ad-info-btn,
#screen-outlet [data-screen="B3"] .sys-ad-info-btn {
  min-width: 24px;
  min-height: 24px;
  padding: 0 5px;
  border: 1px solid var(--ad-pill-border, rgba(255, 255, 255, 0.18));
  border-radius: 9999px;
  background: var(--ad-pill-bg, rgba(255, 255, 255, 0.08));
}
html[data-theme="light"] #screen-outlet [data-screen="B1"] .sys-ad-info-btn,
html[data-apple-theme="light"] #screen-outlet [data-screen="B1"] .sys-ad-info-btn,
html[data-theme="light"] #screen-outlet [data-screen="B3"] .sys-ad-info-btn,
html[data-apple-theme="light"] #screen-outlet [data-screen="B3"] .sys-ad-info-btn {
  border-color: var(--ad-pill-border, rgba(15, 23, 42, 0.14));
  background: var(--ad-pill-bg, rgba(15, 23, 42, 0.06));
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-item,
#screen-outlet [data-screen="B1"] .sys-hz-card-wrap {
  position: relative;
  flex: none;
  display: inline-flex;
  scroll-snap-align: start;
}
#screen-outlet [data-screen="B1"] .sys-hz-card-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-info {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
}
#screen-outlet [data-screen="B1"] .sys-peek-ad-item .sys-peek-ad-top {
  padding-inline-end: 28px;
}
#screen-outlet [data-screen="B3"] .sys-b3-offer-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  cursor: pointer;
}
#screen-outlet [data-screen="B1"] .sys-ad-popup-cta {
  padding: 12px 16px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}
#screen-outlet [data-screen="B1"] .sys-ad-popup-backdrop[data-variant="alert"] .sys-ad-popup-cta {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Shared «Om annonsen» sheet (ADS-01+, js/core/ads-slots.js openAdInfoSheet) */
.support-chat.ad-info-sheet {
  z-index: 100;
}
.ad-info-list {
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ad-info-row {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--sys-film, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--sys-hairline, rgba(255, 255, 255, 0.10));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
html[data-theme="light"] .ad-info-row,
html[data-apple-theme="light"] .ad-info-row {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.10);
}
.ad-info-term {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sys-label-2, rgba(226, 232, 240, 0.72));
}
.ad-info-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--sys-label, #f8fafc);
}