@charset "UTF-8";
/* Drivetrain Cookie Consent – drawer-style modal (left slide), banner unchanged */
:root {
  --font-cc: system-ui;
  --cc-muted-fg: color-mix(in srgb, currentColor 95%, transparent);
  --cc-muted-border: color-mix(in srgb, currentColor 45%, transparent);
}

/* =========================================================
   Base container (banner placement helpers)
   ========================================================= */
.cookie-consent {
  --cc-muted-fg: color-mix(in srgb, currentColor 65%, transparent);
  --cc-muted-border: color-mix(in srgb, currentColor 45%, transparent);
  position: fixed;
  inset: auto auto 16px 16px;
  /* default bottom-left; overridden by modifiers */
  z-index: 9999;
  overflow: hidden;
}
.cookie-consent * {
  font-family: var(--font-cc);
}
.cookie-consent--hidden {
  display: none !important;
}
.cookie-consent--bottom-right {
  inset: auto 16px 16px auto;
}
@media (max-width: 768px) {
  .cookie-consent--bottom-right {
    inset: auto 16px 16px 16px;
  }
}
.cookie-consent--bottom-left {
  inset: auto auto 16px 16px;
}
@media (max-width: 768px) {
  .cookie-consent--bottom-left {
    inset: auto 16px 16px 16px;
  }
}

/* =========================================================
   Banner (kept as-is with fade/rise)
   ========================================================= */
.cookie-consent--banner {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--g-spacing);
  opacity: 0;
  transform: translateY(8px);
  animation: dtcc-fade-in 0.18s ease-out forwards, dtcc-rise 0.18s ease-out forwards;
  display: flex;
  flex-direction: column;
  gap: var(--g-spacing);
  max-width: 400px;
}
@media (max-width: 768px) {
  .cookie-consent--banner {
    max-width: initial;
  }
}
.cookie-consent--banner.cookie-consent--dark {
  background: #15181b;
  color: #e8eaed;
  border-color: #2a2f35;
}
.cookie-consent--banner h2, .cookie-consent--banner h3 {
  margin-top: 0;
  font-size: 19px;
  padding-bottom: 11px;
}
.cookie-consent--banner .cookie-consent__message {
  font-size: 13px;
  line-height: 1.6;
}
.cookie-consent--banner .cookie-consent__actions {
  --gap: 1rem;
  display: grid;
  gap: var(--gap);
}
.cookie-consent--banner .cookie-consent__actions > .cookie-consent__btn {
  width: 100%;
}
.cookie-consent--banner .cookie-consent__actions button {
  font-size: 13px;
  background: transparent;
  color: var(--cc-muted-fg);
  border: 1px solid var(--cc-muted-border);
  border-radius: 500px;
  padding: 6px;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.cookie-consent--banner .cookie-consent__actions button:hover,
.cookie-consent--banner .cookie-consent__actions button:focus-visible {
  color: currentColor;
  border-color: currentColor;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.cookie-consent--banner .cookie-consent__actions {
  /* first button spans both columns if grid columns are added later */
}
.cookie-consent--banner .cookie-consent__actions > .cookie-consent__btn:first-of-type {
  grid-column: 1/-1;
}
.cookie-consent--banner .cookie-consent__privacy {
  padding-top: 11px;
}
.cookie-consent--banner .cookie-consent__privacy a {
  color: currentColor;
  font-size: 13px;
}
.cookie-consent--banner .cookie-consent__close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0 !important;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  color: currentColor;
  transition: color 120ms ease, background-color 120ms ease;
  /* or 50% if you want it round */
  /* focus ring layer (inside the button) */
}
.cookie-consent--banner .cookie-consent__close::after {
  content: "";
  position: absolute;
  inset: 4px;
  /* pulls ring inward so it can't be clipped */
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 2px currentColor;
  /* optional: add a second inner contrast ring */
  /* box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent); */
}
.cookie-consent--banner .cookie-consent__close:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.cookie-consent--banner .cookie-consent__close:focus-visible {
  outline: none;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.cookie-consent--banner .cookie-consent__close:focus-visible::after {
  opacity: 1;
}

/* =========================================================
   Modal overlay → full-screen; panel slides in/out from left
   ========================================================= */
/* Banner-only animations (panel slide uses global dt-slide-*) */
@keyframes dtcc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dtcc-rise {
  from {
    transform: translateY(8px);
  }
  to {
    transform: translateY(0);
  }
}
.cookie-consent--modal {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  /* full-screen grid; card docks left */
  place-items: stretch;
  /* full bleed */
  z-index: 999999999999;
  /* ===== RUNTIME STATES (JS toggles these) ===== */
}
.cookie-consent--modal.cookie-consent--opening .cookie-consent__modal {
  transform: translateX(-100%);
  animation: dt-slide-in-left 250ms ease both;
}
.cookie-consent--modal.cookie-consent--closing .cookie-consent__modal {
  animation: dt-slide-out-left 250ms ease both;
}

/* =========================================================
   Reduced motion support
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cookie-consent--modal.cookie-consent--opening .cookie-consent__modal,
  .cookie-consent--modal.cookie-consent--closing .cookie-consent__modal,
  .cookie-consent--banner {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.content-privacy h2 {
  font-size: var(--fs-p);
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: var(--font-body);
}


.cookie-consent[hidden] {
  display: none !important;
}