/* CANONICAL: picked/resources/consent/consent.css — see README.md before editing. */

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

  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 2147483000;
  max-width: 22rem;
  width: calc(100% - 2rem);
  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: 1rem 1.125rem 1.125rem;
}

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

.pk-consent__actions { display: flex; gap: 0.5rem; }

.pk-consent__btn {
  flex: 1 1 0;
  padding: 0.5rem 0.75rem;
  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: 0.25rem; }
.pk-consent__save[hidden] { display: none; }

.pk-consent__link {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  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 0.875rem; }
.pk-consent__panel[hidden] { display: none; }

.pk-consent__row { display: flex; gap: 0.625rem; padding: 0.5rem 0; border-top: 1px solid var(--pk-border); }
.pk-consent__check { margin-top: 0.2rem; flex: none; }
.pk-consent__row-label { font-weight: 500; }
.pk-consent__row-help { margin: 0.125rem 0 0; font-size: 13px; color: var(--pk-muted); }

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

@media (max-width: 30rem) {
  #picked-consent { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-width: none; }
}