/* consent-banner.php — the pre-consent notice.

   Both buttons are deliberately the same size and weight. A decline styled
   as a faint link beside a prominent accept is not a free choice, and is the
   specific pattern that has drawn enforcement. */

/* A floating card rather than a full-width bar: it covers a corner instead of
   the whole bottom edge (footer, dock, last row of content), and
   consent-banner.js pads the page by its height so nothing stays
   unreachable underneath it. */
.px-consent {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 20px;
  z-index: 9999;
  width: min(420px, calc(100vw - 40px));
  background: var(--paper-2, #fff);
  border: 1px solid var(--rule, #e5e0d8);
  border-radius: 14px;
  box-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.45);
  color: var(--ink, #1b1b1b);
  font-size: 13px;
  line-height: 1.55;
}

/* On a desktop page with the floating menu the card starts above the menu's
   band from its first paint: the menu is printed with the footer, after the
   card, and consent-banner.js (deferred) only measures once the page has
   been read, by when the two would have overlapped for a while. The script
   still lifts it further where a bar needs it. */
@media (min-width: 1024px) {
  html:not(:has([data-px-floating-nav="off"])) body:has(#ob-floating-nav, [data-px-fold="pill"]) .px-consent { bottom: var(--ob-floating-nav-clearance, 7rem); }
}

/* On a game screen consent-banner.js may move the card to the other bottom
   corner, where it covers none of the game's controls. */
@media (min-width: 1024px) {
  .px-consent.px-consent--end { inset-inline-start: auto; inset-inline-end: 20px; }
}

/* The phone drawer (#sideMenu, z 55 over its overlay at 54), the language
   sheet (z 51-52) and the language picker (z 70) open over the page; the card
   drops beneath them while one is open, so it doesn't cover their rows. */
body:has(#menuOverlay:not(.hidden)) .px-consent,
body:has(#langSheetBackdrop:not(.hidden)) .px-consent,
body:has(#pxLangPicker:not([hidden])) .px-consent {
  z-index: 50;
}

/* Any other window — a plugin's pop-up, a cart drawer, a bottom sheet — is
   found by consent-banner.js, which looks at what lies under the card and
   adds this class while a window is open there, so the card never covers its
   buttons. It is hidden rather than lowered because each window picks its
   own z-index; it comes back, still unanswered, as soon as the window closes. */
.px-consent.px-consent--yield {
  visibility: hidden;
}

/* Without the script, an open <dialog> still gets the same courtesy as the
   drawer (a modal one already sits in the top layer above everything). */
body:has(dialog[open]:not(#px-consent)) .px-consent {
  z-index: 50;
}

.px-consent__inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.px-consent__text { min-width: 0; }

.px-consent__title {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 13.5px;
}

.px-consent__body {
  margin: 0;
  color: var(--ink-soft, #6b6560);
}

.px-consent__body a,
.px-consent__summary a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The short text and its "Details" disclosure are for small screens only;
   wide screens show the full text. Pure CSS on purpose: the choice is made
   before the first paint, so a slow page never shows one and then the other. */
.px-consent__short {
  display: none;
}

.px-consent__actions {
  display: flex;
  gap: 10px;
  margin: 0;
}

.px-consent__btn {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--rule, #d8d2c8);
  flex: 1 1 0;
  min-width: 0;
}

.px-consent__btn--reject {
  background: var(--paper, #f6f2ea);
  color: var(--ink, #1b1b1b);
}

.px-consent__btn--accept {
  background: var(--theme-600, #b8862f);
  border-color: var(--theme-600, #b8862f);
  color: #fff;
}

.px-consent__btn:hover { filter: brightness(0.95); }

.px-consent__btn:focus-visible {
  outline: 2px solid var(--theme-600, #b8862f);
  outline-offset: 2px;
}

/* Below desktop the storefront has a fixed bottom nav: the card spans the
   width just above it, or it would be unreachable on the smallest screens. */
@media (max-width: 1023px) {
  .px-consent {
    inset-inline: 12px;
    width: auto;
    bottom: calc(var(--px-bottom-nav-height, 64px) + 12px);
  }
  /* A page without the bottom nav (a game, a listing's detail) has nothing
     to sit above. */
  body:not(:has(#ob-mobile-nav)) .px-consent { bottom: 12px; }
}

@media (max-width: 640px) {
  .px-consent__inner { padding: 14px 16px; }
  .px-consent__btn { padding: 11px 10px; white-space: normal; }
}

/* Small screens: the full text in a long language (German, Russian) took
   close to half of a 360x640 phone, leaving a strip under the sticky header
   to play in. Here the card is capped: the buttons never shrink or scroll,
   the text above them scrolls inside the card if it has to, and the text is
   the short version until "Details" (a native <details>) opens the full one.
   Decline stays next to Accept, the same size, in every state. */
@media (max-width: 480px), (max-height: 700px) {
  .px-consent {
    display: flex;
    flex-direction: column;
    max-height: 40vh;
    max-height: 40dvh;
  }
  /* Open details get more room. Two rules, not one list: a browser without
     :has() would drop the whole list, and consent-banner.js sets
     px-consent--open there instead. */
  .px-consent:has(.px-consent__details[open]) {
    max-height: 70vh;
    max-height: 70dvh;
  }
  .px-consent.px-consent--open {
    max-height: 70vh;
    max-height: 70dvh;
  }
  .px-consent__inner {
    flex: 0 1 auto;
    min-height: 0;
    gap: 10px;
  }
  .px-consent__text {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .px-consent__actions { flex: none; }
  /* A label that wraps (German, Russian) gets a tighter line, not a taller
     button; 44px stays the smallest tap target. */
  .px-consent__btn { padding-block: 8px; min-height: 44px; line-height: 1.3; }

  .px-consent__text > .px-consent__body { display: none; }
  .px-consent__short { display: block; }
  .px-consent__summary { display: inline; margin: 0; color: var(--ink-soft, #6b6560); }
  /* Closed, the toggle sits at the end of the short text's last line. */
  .px-consent__details { display: inline; }
  .px-consent__details[open] { display: block; }
  /* Open, the full text replaces the short one (same two-rule reason as above). */
  .px-consent__short:has(.px-consent__details[open]) .px-consent__summary { display: none; }
  .px-consent--open .px-consent__summary { display: none; }
}

/* A short, wide screen (a phone on its side) has no height to spare for a
   stacked card: the buttons sit beside the text instead of under it. */
@media (max-height: 480px) and (min-width: 560px) {
  .px-consent__inner {
    flex-direction: row;
    align-items: center;
  }
  .px-consent__text { flex: 1 1 auto; align-self: stretch; }
  .px-consent__actions { flex: none; width: min(42%, 340px); }
}

/* The toggle reads as a link, but is a disclosure button (the <summary> of
   the <details>): it changes the card, it does not go anywhere. 24px tall at
   least, so it is easy to hit. */
.px-consent__more {
  display: inline-block;
  list-style: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 4px;
  margin: 0;
  margin-inline-start: 6px;
  padding: 2px 4px;
  min-height: 24px;
  line-height: 20px;
  vertical-align: baseline;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Open, it heads the full text on a line of its own: line its text up with
   the paragraph below instead of indenting it. */
.px-consent__details[open] > .px-consent__more {
  margin-inline-start: -4px;
}

.px-consent__more::-webkit-details-marker { display: none; }
.px-consent__more::marker { content: ""; }

/* "Details" while closed, "Hide details" while open: only the shown label is
   in the accessibility tree, and the expanded state comes from <details>. */
.px-consent__less-label,
.px-consent__details[open] > .px-consent__more .px-consent__more-label {
  display: none;
}
.px-consent__details[open] > .px-consent__more .px-consent__less-label {
  display: inline;
}

.px-consent__body--more {
  margin-top: 4px;
}

.px-consent__more::after {
  content: "\25BE";
  content: "\25BE" / "";
  display: inline-block;
  margin-inline-start: 3px;
  text-decoration: none;
}

.px-consent__details[open] > .px-consent__more::after { content: "\25B4"; content: "\25B4" / ""; }

.px-consent__more:focus-visible {
  outline: 2px solid var(--theme-600, #b8862f);
  outline-offset: 1px;
}

/* Phones: a compact bar along the foot of the screen, resting on the bottom
   nav where the page has one, so it takes as little of the page as it can.
   The themes' corner art and roomy padding are for the desktop card. */
@media (max-width: 640px) {
  html body .px-consent {
    inset-inline: 0;
    border-inline-width: 0;
    border-bottom-width: 0;
    border-radius: 14px 14px 0 0;
  }
  html body:not(:has(#ob-mobile-nav)) .px-consent { bottom: 0; }
  html body:has(#ob-mobile-nav) .px-consent { bottom: var(--px-bottom-nav-height, 64px); }
  html body .px-consent::before,
  html body .px-consent::after { content: none; }
  html body .px-consent .px-consent__inner {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  html body:has(#ob-mobile-nav) .px-consent .px-consent__inner { padding-bottom: 10px; }
  /* The title still names the dialog for screen readers (aria-labelledby);
     on screen the short text says what is asked. */
  html body .px-consent .px-consent__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* The back-to-top button is fixed, so scrolling never uncovers it: while
   the card would cover it, consent-banner.js lifts it clear. translate, not
   transform, so the button's own entrance and hover moves still apply. */
#backToTopBtn { translate: 0 calc(-1 * var(--px-consent-lift, 0px)); }

/* A full-window game (a screen marked data-px-floating-nav="off") keeps its
   controls along the foot of the screen, so below 1024px the notice is a
   one-line strip there: the title, Decline and Accept, and the "Details"
   toggle, which opens the full notice in place. On a wider screen
   consent-banner.js places the card clear of the game's controls instead.
   Keyed on the mark, so a page without it keeps the card or bar above.
   Everything stays reachable without a script: the toggle is the native
   <details>. */
@media (max-width: 1023px) {
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) {
    inset-inline: 0;
    bottom: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
    border-inline-width: 0;
    border-bottom-width: 0;
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open)::before,
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open)::after { content: none; }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__text {
    display: contents;
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__title {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; clip: auto; white-space: normal; border: 0;
    font-size: 12.5px; line-height: 1.3; order: 1; flex: 1 1 auto; min-width: 0;
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) :is(.px-consent__text > .px-consent__body, .px-consent__summary) {
    display: none;
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__short {
    display: block; order: 3; flex: none;
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__details { display: inline; }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__more { margin-inline-start: 0; }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__actions {
    order: 2; flex: none; gap: 6px;
    /* Decline and Accept the same width, as everywhere else. */
    display: grid; grid-template-columns: 1fr 1fr;
  }
  body:has([data-px-floating-nav="off"]) #px-consent:not(:has(.px-consent__details[open])):not(.px-consent--open) .px-consent__btn {
    padding-block: 6px; padding-inline: 10px; min-height: 44px; white-space: nowrap;
  }
  /* Opened there, the full text shows inside the disclosure, so "Hide
     details" stays to go back to the strip. Two rules each: a
     browser without :has() keeps the script's px-consent--open one. */
  body:has([data-px-floating-nav="off"]) #px-consent:has(.px-consent__details[open]) .px-consent__text > .px-consent__body,
  body:has([data-px-floating-nav="off"]) #px-consent:has(.px-consent__details[open]) .px-consent__summary { display: none; }
  body:has([data-px-floating-nav="off"]) #px-consent.px-consent--open .px-consent__text > .px-consent__body,
  body:has([data-px-floating-nav="off"]) #px-consent.px-consent--open .px-consent__summary { display: none; }
  body:has([data-px-floating-nav="off"]) #px-consent:has(.px-consent__details[open]) :is(.px-consent__short, .px-consent__details) { display: block; }
  body:has([data-px-floating-nav="off"]) #px-consent.px-consent--open :is(.px-consent__short, .px-consent__details) { display: block; }
}