/*
 * Soft Product UI — consent banner + preferences modal (structure).
 *
 * Import AFTER tokens.css, or rely on the inline fallbacks below — this file
 * stands alone in a project that has no design tokens at all.
 *
 * DO NOT edit this file to re-skin the component. Every colour resolves from
 * a custom property; override those in `consent-banner.tokens.css` instead so
 * this file stays byte-identical and re-syncable against the library.
 * See THEMING.md.
 */

.sp-consent,
.sp-consent *,
.sp-consent-prefs,
.sp-consent-prefs * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ banner */

.sp-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  color: var(--sp-consent-bar-ink, var(--ink, #292929));
  background: var(--sp-consent-bar-surface, var(--surface, #fff));
  border: 1px solid var(--sp-consent-bar-border, var(--border, #e5e5e5));
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-float, 0 12px 40px rgba(0, 0, 0, 0.08));
  font-family: var(--font-ui, "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif);
  letter-spacing: var(--tracking-ui, -0.15px);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-enter, 340ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--dur-enter, 340ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  pointer-events: none;
}

.sp-consent[hidden] {
  display: none;
}

.sp-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sp-consent__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 20px;
}

.sp-consent__copy {
  flex: 1 1 380px;
  margin: 0;
  font-size: var(--text-md, 14px);
  font-weight: 400;
  line-height: 1.5;
}

.sp-consent__copy strong {
  font-weight: 500;
}

.sp-consent__copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--sp-consent-link-underline, currentColor);
}

.sp-consent__copy a:hover {
  text-decoration-color: currentColor;
}

/* Accept is last in the DOM, so it always lands on the right — the position
   the thumb reaches for on mobile and the eye lands on last when scanning. */
.sp-consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: flex-end;
}

.sp-consent__actions button {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 9999px);
  font-family: inherit;
  font-size: var(--text-md, 14px);
  font-weight: 500;
  letter-spacing: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-instant, 150ms) var(--ease-out, ease-out),
    border-color var(--dur-instant, 150ms) var(--ease-out, ease-out),
    color var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

.sp-consent__accept {
  background: var(--sp-consent-accent, var(--ink, #292929));
  color: var(--sp-consent-accent-ink, #fff);
}

.sp-consent__accept:hover {
  background: var(--sp-consent-accent-hover, var(--sp-consent-accent, var(--ink, #292929)));
  filter: brightness(1.08);
}

.sp-consent__secondary {
  background: transparent;
  color: var(--sp-consent-bar-ink-muted, var(--ink-muted, #5d5d5d));
  border-color: var(--sp-consent-bar-border, var(--border, #e5e5e5));
}

.sp-consent__secondary:hover {
  background: var(--sp-consent-bar-hover, var(--surface-hover, #f3f3f3));
  color: var(--sp-consent-bar-ink, var(--ink, #292929));
}

/* Optional quiet third affordance — pairs with banner.secondaryAction:"reject"
   so refusing stays one click while per-category control is still reachable. */
.sp-consent__manage {
  flex: 1 1 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-consent-bar-ink-muted, var(--ink-muted, #5d5d5d));
  font-family: inherit;
  font-size: var(--text-sm, 13px);
  letter-spacing: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sp-consent__manage:hover {
  color: var(--sp-consent-bar-ink, var(--ink, #292929));
}

.sp-consent :focus-visible,
.sp-consent-prefs :focus-visible {
  outline: 2px solid var(--sp-consent-focus, var(--accent, #3b82f6));
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .sp-consent__inner {
    flex-direction: column;
    align-items: stretch;
  }
  /* The 380px basis above is a minimum WIDTH while this is a row. Going column
     flips the main axis, so it would become a minimum HEIGHT and pad the
     banner out with ~380px of dead space before the buttons. */
  .sp-consent__copy {
    flex: 0 0 auto;
  }
  /* Stay a row on mobile so Accept keeps the right-hand thumb position. */
  .sp-consent__actions {
    width: 100%;
  }
  .sp-consent__actions button {
    flex: 1 1 0;
  }
}

/* -------------------------------------------------------- preferences modal */

.sp-consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-ui, "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif);
  letter-spacing: var(--tracking-ui, -0.15px);
}

.sp-consent-prefs[hidden] {
  display: none;
}

.sp-consent-prefs__backdrop {
  position: absolute;
  inset: 0;
  background: var(--sp-consent-scrim, rgba(20, 20, 22, 0.45));
  opacity: 0;
  transition: opacity var(--dur-exit, 260ms) var(--ease-in, cubic-bezier(0.4, 0, 1, 1));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sp-consent-prefs.is-open .sp-consent-prefs__backdrop {
  opacity: 1;
  transition: opacity var(--dur-enter, 340ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.sp-consent-prefs__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--ink, #292929);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-panel, 24px);
  box-shadow: var(--shadow-float, 0 12px 40px rgba(0, 0, 0, 0.08));
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity var(--dur-exit, 260ms) var(--ease-in, cubic-bezier(0.4, 0, 1, 1)),
    transform var(--dur-exit, 260ms) var(--ease-in, cubic-bezier(0.4, 0, 1, 1));
}

.sp-consent-prefs.is-open .sp-consent-prefs__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--dur-enter, 340ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--dur-enter, 340ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The dialog takes focus on open so the title is announced. That focus must
   not draw a ring — it is a container, not a control. */
.sp-consent-prefs__dialog:focus {
  outline: none;
}

.sp-consent-prefs__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-nav, 8px);
  background: transparent;
  color: var(--ink-faint, #9e9e9e);
  cursor: pointer;
  transition: background-color var(--dur-instant, 150ms) var(--ease-out, ease-out),
    color var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

.sp-consent-prefs__close:hover {
  background: var(--surface-hover, #f3f3f3);
  color: var(--ink, #292929);
}

.sp-consent-prefs__title {
  margin: 0 0 8px;
  padding-right: 32px;
  font-size: var(--text-lg, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: inherit;
}

.sp-consent-prefs__intro {
  margin: 0 0 18px;
  color: var(--ink-muted, #5d5d5d);
  font-size: var(--text-sm, 13px);
  line-height: 1.55;
}

.sp-consent-prefs__intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-consent-prefs__list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.sp-consent-prefs__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border, #e5e5e5);
}

.sp-consent-prefs__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.sp-consent-prefs__text {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-consent-prefs__label {
  display: block;
  color: var(--ink, #292929);
  font-size: var(--text-md, 14px);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.sp-consent-prefs__row.is-locked .sp-consent-prefs__label {
  cursor: default;
}

.sp-consent-prefs__pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--surface-subtle, #f7f7f7);
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.sp-consent-prefs__desc {
  margin: 4px 0 0;
  color: var(--ink-muted, #5d5d5d);
  font-size: var(--text-sm, 13px);
  line-height: 1.5;
}

/* ------------------------------------------------------------------ switch */

.sp-consent-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  cursor: pointer;
}

.sp-consent-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sp-consent-switch__track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--sp-consent-track, #d8d8d8);
  transition: background-color var(--dur-quick, 200ms) var(--ease-out, ease-out);
}

.sp-consent-switch__thumb {
  display: block;
  width: 20px;
  height: 20px;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform var(--dur-quick, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.sp-consent-switch input:checked ~ .sp-consent-switch__track {
  background: var(--sp-consent-accent, var(--accent, #3b82f6));
}

.sp-consent-switch input:checked ~ .sp-consent-switch__track .sp-consent-switch__thumb {
  transform: translateX(18px);
}

.sp-consent-switch input:focus-visible ~ .sp-consent-switch__track {
  outline: 2px solid var(--sp-consent-focus, var(--accent, #3b82f6));
  outline-offset: 2px;
}

.sp-consent-switch.is-locked {
  cursor: default;
  opacity: 0.55;
}

.sp-consent-switch.is-locked .sp-consent-switch__track {
  background: var(--sp-consent-accent, var(--accent, #3b82f6));
}

.sp-consent-switch.is-locked .sp-consent-switch__thumb {
  transform: translateX(18px);
}

.sp-consent-switch__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------- modal actions */

/* "Accept all" is last so it sits on the right, matching the banner. */
.sp-consent-prefs__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.sp-consent-prefs__actions button {
  flex: 1 1 0;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 9999px);
  font-family: inherit;
  font-size: var(--text-md, 14px);
  font-weight: 500;
  letter-spacing: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-instant, 150ms) var(--ease-out, ease-out),
    border-color var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

.sp-consent-prefs__save {
  background: var(--surface, #fff);
  color: var(--ink, #292929);
  border-color: var(--border, #e5e5e5);
}

.sp-consent-prefs__save:hover {
  background: var(--surface-hover, #f3f3f3);
}

.sp-consent-prefs__accept {
  background: var(--sp-consent-accent, var(--ink, #292929));
  color: var(--sp-consent-accent-ink, #fff);
}

.sp-consent-prefs__accept:hover {
  filter: brightness(1.08);
}

.sp-consent-prefs__reject {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--ink-muted, #5d5d5d);
  font-family: inherit;
  font-size: var(--text-sm, 13px);
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sp-consent-prefs__reject:hover {
  color: var(--ink, #292929);
}

html.sp-consent-prefs-open,
html.sp-consent-prefs-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .sp-consent,
  .sp-consent-prefs__backdrop,
  .sp-consent-prefs__dialog,
  .sp-consent-switch__track,
  .sp-consent-switch__thumb {
    transition: none;
  }
}