/*
 * PMI Privacy & Accessibility Pill
 * Mirrors iubenda's 2025 floating widget (.floatable-wrapper.iub-floatable-wrapper-2025).
 * Per-site values arrive as custom properties on the element's style attribute.
 */

.pmi-iub-widget {
  --pmi-iub-x: 16px;
  --pmi-iub-y: 16px;
  --pmi-iub-z: 99999;
  --pmi-iub-brand: #1cc691;
  --pmi-iub-focus: #005fcc;
  --pmi-iub-size: 38px;
  --pmi-iub-radius: 5px;

  position: fixed;
  /* --pmi-iub-lift: how far the pill has risen to stay above the dock element. */
  bottom: calc(var(--pmi-iub-y) + var(--pmi-iub-lift, 0px));
  left: var(--pmi-iub-x);
  z-index: var(--pmi-iub-z);
  display: flex;
  box-sizing: border-box;
  height: var(--pmi-iub-size);
  margin: 0;
  padding: 0 0 0 var(--pmi-iub-size);
  border-radius: var(--pmi-iub-radius);
  background-color: var(--pmi-iub-brand);
  background-image: var(--pmi-iub-brand-icon, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2222%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4.783.714c2.486%200%204.5%202.034%204.5%204.544%200%201.118-.4%202.142-1.064%202.934l.956%2013.094H.63L1.556%208.42A4.54%204.54%200%200%201%20.283%205.258c0-2.51%202.014-4.544%204.5-4.544Zm-.626%2011.06v5.908h1.481v-7.435l-1.481%201.527Zm.626-7.69c-.597%200-1.082.495-1.082%201.105s.485%201.103%201.082%201.103c.598%200%201.083-.493%201.083-1.103s-.485-1.105-1.083-1.105Z%22%2F%3E%3C%2Fsvg%3E"));
  background-repeat: no-repeat;
  background-position: 14px center;
}

.pmi-iub-widget[hidden] {
  display: none;
}

.pmi-iub-widget[data-position="bottom-right"] {
  left: auto;
  right: var(--pmi-iub-x);
}

/* Separate phone offsets, on AccessiYes' own breakpoint (mobile below 768px). */
@media (max-width: 767.98px) {
  .pmi-iub-widget {
    bottom: calc(var(--pmi-iub-y-mobile, var(--pmi-iub-y)) + var(--pmi-iub-lift, 0px));
    left: var(--pmi-iub-x-mobile, var(--pmi-iub-x));
  }

  .pmi-iub-widget[data-position="bottom-right"] {
    left: auto;
    right: var(--pmi-iub-x-mobile, var(--pmi-iub-x));
  }
}

/* Hairline outline drawn above the children, as iubenda does. */
.pmi-iub-widget::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1.14px solid rgba(0, 0, 0, 0.24);
  border-radius: inherit;
  pointer-events: none;
}

.pmi-iub-widget--unbranded {
  padding: 0;
  background: none;
}

.pmi-iub-widget__btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--pmi-iub-size);
  height: var(--pmi-iub-size);
  border-radius: var(--pmi-iub-radius);
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* `all: unset` above also drops the UA rule that hides [hidden], so restore it. */
.pmi-iub-widget__btn[hidden] {
  display: none;
}

/* Two buttons side by side read as one pill: square the inner corners and draw a
   hairline divider matching the outline. Visibility-aware, since either button can
   stay hidden (iubenda or AccessiYes absent). */
.pmi-iub-widget__btn:not([hidden]):has(~ .pmi-iub-widget__btn:not([hidden])) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pmi-iub-widget__btn:not([hidden]) ~ .pmi-iub-widget__btn:not([hidden]) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 1.14px 0 0 rgba(0, 0, 0, 0.24);
}

.pmi-iub-widget__btn:hover {
  background-color: #f2f2f2;
}

/* Focus ring: a white halo filling the offset gap, then the colored ring, so it holds
   3:1 contrast on light and dark pages alike. Raised so the neighbouring button
   can't paint over it. */
.pmi-iub-widget__btn:focus-visible {
  z-index: 1;
  outline: 2px solid var(--pmi-iub-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

.pmi-iub-widget__btn:not([hidden]) ~ .pmi-iub-widget__btn:not([hidden]):focus-visible {
  box-shadow: inset 1.14px 0 0 rgba(0, 0, 0, 0.24), 0 0 0 2px #fff;
}

/* Windows High Contrast / forced colors drops backgrounds and shadows, which would
   leave the buttons without edges. Give them real borders in system colors. */
@media (forced-colors: active) {
  .pmi-iub-widget::after {
    display: none;
  }

  .pmi-iub-widget__btn {
    border: 1px solid ButtonText;
  }
}

.pmi-iub-widget__btn svg {
  display: block;
  width: 20px;
  height: 20px;
}