/* ============================================================
   consent.css — GDPR cookie consent banner styles.
   Tokens applied per CLAUDE.md design-tokens doctrine - this is
   the FIRST surface every first-time visitor sees, so it benefits
   directly from --ui-scale + --ui-density.
   ============================================================ */

.fretly-consent {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9999);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  padding: var(--space-lg);
}
.fretly-consent[hidden] { display: none; }

.fretly-consent-box {
  background: var(--surface);
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  max-width: 40rem;
  width: 100%;
  max-height: calc(100vh - var(--space-2xl));
  overflow-y: auto;
  animation: fretlyConsentIn .25s ease-out both;
}

@keyframes fretlyConsentIn {
  from { transform: translateY(var(--space-lg)); opacity: 0; }
  to   { transform: translateY(0);              opacity: 1; }
}

.fretly-consent-box h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
}

.fretly-consent-box p {
  margin: 0 0 var(--space-lg);
  color: var(--text-2);
  font-size: var(--font-base);
  line-height: var(--leading-normal);
}

.fretly-consent-cats {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  border-top: var(--border-w) solid var(--border);
}
.fretly-consent-cats li {
  border-bottom: var(--border-w) solid var(--border);
}
.fretly-consent-cats label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xs);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--text-2);
}
.fretly-consent-cats label input[type=checkbox] {
  margin-top: var(--space-2xs);
  flex-shrink: 0;
}
.fretly-consent-cats label strong { color: var(--text); }

.fretly-consent-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.fretly-consent-actions .btn {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.fretly-consent-actions .btn:hover {
  background: var(--surface-2);
}
.fretly-consent-actions .btn.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fretly-consent-actions .btn.btn-accent:hover {
  background: var(--accent-hover);
}

.fretly-consent-links {
  margin: 0;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--text-3);
}
.fretly-consent-links a {
  color: var(--accent);
  text-decoration: none;
}
.fretly-consent-links a:hover { text-decoration: underline; }

/* "Manage cookie choices" link that can be placed anywhere */
.fretly-consent-reopen {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 480px) {
  .fretly-consent { padding: 0; align-items: stretch; }
  .fretly-consent-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh;
    align-self: flex-end;
  }
  .fretly-consent-actions .btn { flex: 1 1 100%; }
}