/* =========================================================================
   dour — the analytics notice
   =========================================================================

   Its own file because `Consent.tsx` renders from `Chrome`, which is on every
   storefront route, while `account.css` is loaded only under `/account`. Every
   selector is `.ac-consent*`, which cannot collide with an Odoo class, and no
   rule here reaches anything the capture authored.

   Colours are literal rather than tokenised: this banner is painted before the
   account area's custom properties are in scope, and a notice that renders
   unstyled is a notice nobody reads.
   ========================================================================= */

.ac-consent {
  position: fixed;
  left: var(--ac-4, 16px);
  bottom: var(--ac-4, 16px);
  z-index: 1080;
  width: min(400px, calc(100vw - 32px));
  background: #00203f;
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.6);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.ac-consent p {
  margin: 0 0 12px;
  color: color-mix(in srgb, #fff 86%, transparent);
}

.ac-consent b {
  color: #fff;
}

.ac-consent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ac-consent button {
  flex: 1 1 auto;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.ac-consent .ac-consent-yes {
  background: #fff;
  color: #00203f;
}

.ac-consent .ac-consent-no {
  background: transparent;
  border-color: color-mix(in srgb, #fff 34%, transparent);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .ac-consent {
    animation: ac-rise 420ms cubic-bezier(0.2, 0, 0, 1) 600ms both;
  }

  @keyframes ac-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
}