/* ─────────────────────────────────────────────
   Maison X — Cookie consent notice
   Self-contained: no external dependencies.
   Inherits brand fonts loaded by each page.
   ───────────────────────────────────────────── */

/* Blur the rest of the page while the notice is open */
body.mx-cookie-open > *:not(.mx-cookie-card):not(.mx-cookie-backdrop) {
  filter: blur(8px) brightness(0.92);
  transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body > *:not(.mx-cookie-card):not(.mx-cookie-backdrop) {
  transition: filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Backdrop */
.mx-cookie-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 20, 0.35);
  z-index: 10000;
  opacity: 0;
  animation: mxBackdropIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: auto;
}
.mx-cookie-backdrop.is-dismissing {
  animation: mxBackdropOut 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mxBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mxBackdropOut { from { opacity: 1; } to { opacity: 0; } }

/* Card */
.mx-cookie-card {
  position: fixed;
  bottom: 40px;
  left: 50%;
  max-width: 640px;
  width: calc(100% - 64px);
  padding: 36px 40px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 181, 196, 0.4);
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(11, 14, 20, 0.18);
  z-index: 10001;
  text-align: left;
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  animation: mxCardRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  overflow: visible;
  font-family: 'DM Sans', sans-serif;
}
@keyframes mxCardRise {
  from { transform: translateX(-50%) translateY(120%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
.mx-cookie-card.is-dismissing {
  animation: mxCardDismiss 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes mxCardDismiss {
  from { transform: translateX(-50%) translateY(0); opacity: 1; filter: blur(0); }
  to   { transform: translateX(-50%) translateY(-16px) scale(1.02); opacity: 0; filter: blur(8px); }
}

/* Content */
.mx-cookie-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #A8B5C4;
  margin: 0 0 12px;
}
.mx-cookie-body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(17, 17, 20, 0.85);
  margin: 0 0 16px;
}
.mx-cookie-body strong {
  font-weight: 400;
  color: #111114;
}
.mx-cookie-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: rgba(17, 17, 20, 0.55);
  margin: 0 0 28px;
}
.mx-cookie-buttons {
  display: flex;
  gap: 12px;
}
.mx-cookie-btn {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
  font: inherit;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.mx-cookie-btn--decline {
  background: transparent;
  border: 1px solid rgba(17, 17, 20, 0.3);
  color: #111114;
}
.mx-cookie-btn--decline:hover,
.mx-cookie-btn--decline:focus-visible {
  background: rgba(168, 181, 196, 0.12);
  border-color: rgba(17, 17, 20, 0.5);
  outline: none;
}
.mx-cookie-btn--accept {
  background: #111114;
  border: 1px solid #111114;
  color: #F3F4F6;
}
.mx-cookie-btn--accept:hover,
.mx-cookie-btn--accept:focus-visible {
  background: rgba(17, 17, 20, 0.85);
  outline: none;
}
.mx-cookie-link {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #A8B5C4;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 16px;
  transition: color 0.3s ease;
}
.mx-cookie-link:hover {
  color: #111114;
}

/* Smoke particles spawn at bottom-center of card */
.mx-cookie-smoke {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(168, 181, 196, 0.8);
  filter: blur(3px);
  pointer-events: none;
  will-change: transform, opacity;
  animation: mxSmokeRise var(--mx-smoke-dur, 1.8s) cubic-bezier(0.4, 0, 0.2, 1) var(--mx-smoke-delay, 0s) forwards;
  opacity: 0;
}
@keyframes mxSmokeRise {
  0%   { transform: translateY(0) scale(1); opacity: 0.4; }
  100% { transform: translateY(-80px) scale(2); opacity: 0; }
}

/* Mobile */
@media (max-width: 600px) {
  .mx-cookie-card {
    bottom: 16px;
    width: calc(100% - 32px);
    padding: 28px 24px;
  }
  .mx-cookie-buttons {
    flex-direction: column-reverse;
  }
  .mx-cookie-btn {
    width: 100%;
  }
}

/* Shared footer utility links (Terms / Privacy / Cookie preferences)
   15% smaller than the parent footer's base font-size on desktop.
   Mobile floor at 9px so utility links never drop below readable threshold
   (parent .foot is 8px at ≤600px, which would otherwise resolve to 6.8px). */
.footer-utility {
  font-size: 0.85em;
}
@media (max-width: 600px) {
  .footer-utility {
    font-size: 9px;
  }
}

/* Reduced motion: skip animations, keep functionality */
@media (prefers-reduced-motion: reduce) {
  .mx-cookie-backdrop,
  .mx-cookie-card,
  .mx-cookie-smoke,
  body.mx-cookie-open > *:not(.mx-cookie-card):not(.mx-cookie-backdrop) {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .mx-cookie-card { transform: translateX(-50%) translateY(0); opacity: 1; }
  .mx-cookie-backdrop { opacity: 1; }
}