/* CANONICAL: picked/resources/consent/consent.css — see README.md before editing.
 *
 * Sizes are in px on purpose, NOT rem. This stylesheet is dropped into sites with different
 * root font sizes: the PAT splash sets html to 10px, the others use the 16px default. In rem
 * the same card rendered 352px wide on six brands and 220px on PAT, with padding to match.
 * px keeps one stylesheet producing one identical banner everywhere, which is the whole point
 * of having one stylesheet. Do not "tidy" these back to rem.
 */

#picked-consent {
  --pk-surface: #fff;
  --pk-text: #1a1a2e;
  --pk-muted: #5b6270;
  --pk-border: #dfe3ea;
  --pk-accent: #1a1a2e;
  --pk-accent-text: #fff;

  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 2147483000;
  max-width: 352px;
  width: calc(100% - 32px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pk-text);
}

#picked-consent[hidden] { display: none; }

.pk-consent__card {
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(16, 24, 40, 0.14);
  padding: 16px 18px 18px;
}

.pk-consent__heading { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.pk-consent__body { margin: 0 0 14px; color: var(--pk-muted); }

.pk-consent__actions { display: flex; gap: 8px; }

.pk-consent__btn {
  flex: 1 1 0;
  padding: 8px 12px;
  font: inherit;
  font-weight: 500;
  color: var(--pk-text);
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: 6px;
  cursor: pointer;
}

.pk-consent__btn:hover { border-color: var(--pk-accent); }
.pk-consent__btn:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }

.pk-consent__btn--primary {
  color: var(--pk-accent-text);
  background: var(--pk-accent);
  border-color: var(--pk-accent);
}

.pk-consent__save { display: block; width: 100%; margin-top: 4px; }
.pk-consent__save[hidden] { display: none; }

.pk-consent__link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--pk-muted);
  text-align: center;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.pk-consent__link[hidden] { display: none; }

.pk-consent__panel { margin: 0 0 14px; }
.pk-consent__panel[hidden] { display: none; }

.pk-consent__row { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pk-border); }
.pk-consent__check { margin-top: 3px; flex: none; }
.pk-consent__row-label { font-weight: 500; }
.pk-consent__row-help { margin: 2px 0 0; font-size: 13px; color: var(--pk-muted); }

.pk-consent__privacy { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--pk-accent); }

@media (max-width: 480px) {
  #picked-consent { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; }
}