/* ==========================================================================
   DMW-Performance — Cookie / Consent Banner + gated embeds
   ==========================================================================
   Non-blocking banner pinned to the bottom of the viewport, styled in the
   navy/gold brand. Also styles the consent placeholder that replaces gated
   third-party embeds (e.g. Google Maps) until the visitor agrees.
   ========================================================================== */

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-toast);
  padding: var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  border-top: 2px solid var(--color-primary);
  box-shadow: var(--shadow-lg);
  animation: cookie-consent-in var(--transition-slow) ease both;
}

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

@keyframes cookie-consent-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
}

.cookie-consent__body {
  flex: 1 1 380px;
}

.cookie-consent__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.cookie-consent__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-inverse);
}

.cookie-consent__text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cookie-consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .cookie-consent__actions {
    width: 100%;
  }
  .cookie-consent__actions .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    animation: none;
  }
}

/* ==========================================================================
   Gated embed (Google Maps)
   ========================================================================== */
.map-embed {
  position: relative;
}

.map-embed iframe {
  display: block;
  width: 100%;
}

.map-embed__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 420px;
  padding: var(--space-8);
  text-align: center;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.map-embed__consent[hidden] {
  display: none;
}

.map-embed__consent-icon {
  font-size: var(--text-3xl);
  color: var(--color-primary);
}

.map-embed__consent p {
  max-width: 42ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.map-embed__consent-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ==========================================================================
   Consent gate — generic placeholder for any third-party embed
   Used by the vehicle database (tuningserver.works) and the EVC licence seal.
   The real URL sits in data-consent-src until the visitor agrees, so nothing
   is requested from the third party before then.
   ========================================================================== */

.consent-gate {
  position: relative;
}

/* While the gate is closed the embed itself must not take up space. */
.consent-gate iframe[data-consent-src],
.consent-gate img[data-consent-src] {
  display: none;
}

/* Ein umschliessender Link darf keine leere Klickflaeche hinterlassen. */
.consent-gate a:has(> img[data-consent-src]) {
  display: none;
}

.consent-gate__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

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

.consent-gate__icon {
  font-size: 1.75rem;
  color: var(--color-primary);
}

.consent-gate__placeholder p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.consent-gate__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* The EVC seal sits on a dark section — give the gate matching contrast. */
.evc-certificate__frame.consent-gate .consent-gate__placeholder {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.evc-certificate__frame.consent-gate .consent-gate__placeholder p,
.evc-certificate__frame.consent-gate .consent-gate__hint {
  color: rgba(255, 255, 255, 0.72);
}

/* The database embed sits inside a dark window chrome. */
.leistungsdaten-embed.consent-gate .consent-gate__placeholder {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 0;
}

.leistungsdaten-embed.consent-gate .consent-gate__placeholder p,
.leistungsdaten-embed.consent-gate .consent-gate__hint {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Banner buttons on the dark surface
   .btn-outline assumes a light background: on the navy banner its navy text
   rendered navy-on-navy, which made "Ablehnen" effectively invisible while
   "Akzeptieren" stayed readable. An unreadable reject option is a dark
   pattern regardless of intent, so both buttons are restyled here for this
   surface — same size, same weight, both fully legible.
   ========================================================================== */

.cookie-consent__actions .btn {
  min-width: 9.5rem;
  justify-content: center;
  font-weight: var(--weight-semibold);
}

.cookie-consent__actions .btn[data-consent-action="decline"] {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.cookie-consent__actions .btn[data-consent-action="decline"]:hover,
.cookie-consent__actions .btn[data-consent-action="decline"]:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.cookie-consent__actions .btn[data-consent-action="accept"] {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-primary-text);
}

.cookie-consent__actions .btn[data-consent-action="accept"]:hover,
.cookie-consent__actions .btn[data-consent-action="accept"]:focus-visible {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-text);
}

.cookie-consent__actions .btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Was previously an inline style on the iframe — inline styles beat the
   consent gate's `display: none`, so the embed stayed visible while locked. */
.leistungsdaten-frame {
  display: block;
  border: none;
  transition: height 0.4s ease;
}