/* === Consent banner === */
.tl-consent[hidden] { display: none; }
.tl-consent {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: 9500;
  background: var(--tl-color-surface, #FAF7F2);
  border: 1px solid var(--tl-color-border, #D7C9B5);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(20, 18, 16, 0.12);
  animation: tl-consent-slide 240ms cubic-bezier(.2,.8,.2,1);
}
.tl-consent-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.tl-consent-text { flex: 1 1 320px; min-width: 0; }
.tl-consent-text h3 {
  font: 600 16px/1.3 "Space Grotesk", sans-serif;
  margin: 0 0 6px;
  color: var(--tl-color-ink, #1A1816);
}
.tl-consent-text p {
  font: 400 14px/1.5 "Inter", sans-serif;
  margin: 0;
  color: var(--tl-color-ink-soft, #2E2A26);
}
.tl-consent-link {
  color: var(--tl-color-brand, #B6503A);
  white-space: nowrap;
}
.tl-consent-link:hover { color: #C75F48; }
.tl-consent-actions {
  display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center;
}

/* === Consent banner buttons (self-contained so consent.css works on all pages) === */
.tl-consent-actions .tl-cbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font: 500 13px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tl-consent-actions .tl-cbtn--ghost {
  background: transparent;
  color: var(--tl-color-ink-soft, #2E2A26);
  border-color: var(--tl-color-border, #D7C9B5);
}
.tl-consent-actions .tl-cbtn--ghost:hover { background: var(--tl-color-surface-hover, #F0EAE0); }
.tl-consent-actions .tl-cbtn--secondary {
  background: var(--tl-color-surface, #FAF7F2);
  color: var(--tl-color-ink, #1A1816);
  border-color: var(--tl-color-border, #D7C9B5);
}
.tl-consent-actions .tl-cbtn--secondary:hover { background: var(--tl-color-surface-hover, #F0EAE0); }
.tl-consent-actions .tl-cbtn--primary {
  background: var(--tl-color-brand, #B6503A);
  color: #fff;
  border-color: var(--tl-color-brand, #B6503A);
}
.tl-consent-actions .tl-cbtn--primary:hover { background: #C75F48; border-color: #C75F48; }

/* === Consent modal (self-contained) === */
dialog#tl-consent-modal {
  padding: 0;
  border: 1px solid var(--tl-color-border, #D7C9B5);
  border-radius: 12px;
  background: var(--tl-color-surface, #FAF7F2);
  box-shadow: 0 16px 48px rgba(20, 18, 16, 0.16);
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
dialog#tl-consent-modal::backdrop {
  background: rgba(20, 18, 16, 0.5);
  backdrop-filter: blur(2px);
}
.tl-consent-modal-form {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tl-consent-modal-form h3 {
  font: 700 18px/1.3 "Space Grotesk", sans-serif;
  margin: 0 0 20px;
  color: var(--tl-color-ink, #1A1816);
}
.tl-consent-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--tl-color-border, #D7C9B5);
}
.tl-consent-row:last-of-type { border-bottom: 0; }
.tl-consent-row label {
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer;
}
.tl-consent-row input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; }
.tl-consent-row span {
  font: 400 14px/1.5 "Inter", sans-serif;
  color: var(--tl-color-ink-soft, #2E2A26);
}
.tl-consent-row strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--tl-color-ink, #1A1816);
}
.tl-consent-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 20px;
}
.tl-consent-modal-actions .tl-cbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px;
  border-radius: 8px;
  font: 500 14px/1 "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.tl-consent-modal-actions .tl-cbtn--ghost {
  background: transparent;
  color: var(--tl-color-ink-soft, #2E2A26);
  border-color: var(--tl-color-border, #D7C9B5);
}
.tl-consent-modal-actions .tl-cbtn--ghost:hover { background: var(--tl-color-surface-hover, #F0EAE0); }
.tl-consent-modal-actions .tl-cbtn--primary {
  background: var(--tl-color-brand, #B6503A);
  color: #fff;
  border-color: var(--tl-color-brand, #B6503A);
}
.tl-consent-modal-actions .tl-cbtn--primary:hover { background: #C75F48; border-color: #C75F48; }

/* === Footer cookie preferences trigger === */
button.tl-consent-trigger {
  appearance: none; -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted, #6B6056);
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}
button.tl-consent-trigger:hover,
button.tl-consent-trigger:focus-visible {
  color: var(--text, #1A1816);
  outline: none;
}
@media (max-width: 640px) {
  button.tl-consent-trigger {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* === Animation === */
@keyframes tl-consent-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-consent { animation: none; }
}
@media (max-width: 640px) {
  .tl-consent { bottom: 8px; left: 8px; right: 8px; }
  .tl-consent-inner { padding: 14px 16px; }
  .tl-consent-actions { width: 100%; }
  .tl-consent-actions .tl-cbtn { flex: 1; }
}