#sliding-popup {
  /* title description */
  .eu-cookie-compliance-message {
    p {
      color: #333;
    }
  }

  /* categories checkboxes */
  .eu-cookie-compliance-category-description {
    color: #333;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Consent banner as a true modal gate.
   --------------------------------------------------------------------------
   cookie_banner_focustrap.js marks the rest of the page `inert` while
   body.eu-cookie-compliance-popup-open is set (a forced-choice consent gate:
   #sliding-popup has role="alertdialog"). These rules give that state a
   matching modal appearance — a dimmed full-viewport backdrop and a centered
   dialog box — so a gated page reads as a modal dialog (APG dialog pattern)
   instead of a bottom bar behind which everything is mysteriously unclickable.
   Without this, the inert page looks broken (the bug this fixes).
   ========================================================================== */

/* Lock background scroll while the gate is open. */
body.eu-cookie-compliance-popup-open {
  overflow: hidden;
}

/* Dimmed backdrop across the whole viewport. Purely visual — the page behind
   is already inert, so the backdrop does not need to capture clicks. */
body.eu-cookie-compliance-popup-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
}

/* Center the popup as a modal dialog box, overriding the module's
   fixed-to-edge positioning and its inline slide-in styles (hence !important
   on the positional properties, which the module sets inline). */
body.eu-cookie-compliance-popup-open #sliding-popup {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* !important overrides the module's inline width:100% / bottom:0 on the popup. */
  width: min(92vw, 1000px) !important;
  max-width: 1000px;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 100001;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}