/* Cookie notice, shared by every page. Behaviour is in assets/js/cookie-notice.js.
   Sizes are in px and classes are prefixed pm- because the older template pages
   change the root font size and restyle bare elements. */

.pm-cookie {
  --pm-ink: #171A2B;
  --pm-porcelain: #F1F3F2;
  --pm-teal: #00DDBC;
  --pm-fawn: #E7B47C;
  --pm-fawn-deep: #8F5A22;
  --pm-line: rgba(241, 243, 242, .14);
  --pm-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pm-glide: cubic-bezier(.22, 1, .36, 1);

  position: fixed; z-index: 998; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; padding: 18px;
  border-radius: 22px; color: var(--pm-porcelain);
  background: rgba(23, 26, 43, .96);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--pm-line), 0 2px 6px rgba(5, 6, 14, .3), 0 24px 48px -16px rgba(5, 6, 14, .55), 0 60px 120px -40px rgba(0, 122, 105, .45);
  font: 400 15px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(32px) scale(.97);
  transition: opacity .25s ease, transform .3s var(--pm-glide), visibility 0s linear .3s;
}
.pm-cookie.is-in {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s ease, transform .7s var(--pm-spring), visibility 0s;
}
.pm-cookie * { box-sizing: border-box; }

.pm-cookie__top { display: flex; align-items: flex-start; gap: 14px; }
.pm-cookie__art { flex: none; display: block; width: 68px; height: 68px; overflow: visible; }
.pm-cookie__text { min-width: 0; padding-right: 22px; }
.pm-cookie .pm-cookie__title {
  margin: 0 0 4px; padding: 0; color: #fff; font: 800 18px/1.25 'Inter', system-ui, sans-serif; letter-spacing: -.02em;
}
.pm-cookie .pm-cookie__body { margin: 0; padding: 0; color: rgba(241, 243, 242, .84); font: 400 14.5px/1.5 'Inter', system-ui, sans-serif; }

.pm-cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pm-cookie .pm-cookie__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin: 0; padding: 12px 14px;
  border: 0; border-radius: 999px; cursor: pointer; text-transform: none; letter-spacing: 0;
  font: 700 14.5px/1.1 'Inter', system-ui, sans-serif;
  transition: transform .45s var(--pm-spring), opacity .2s ease;
}
.pm-cookie .pm-cookie__btn:hover { transform: translateY(-2px) scale(1.02); }
.pm-cookie .pm-cookie__btn:active { transform: translateY(1px) scale(.98); opacity: .85; }
.pm-cookie .pm-cookie__btn--yes { background: var(--pm-teal); color: var(--pm-ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.pm-cookie .pm-cookie__btn--no { background: var(--pm-porcelain); color: var(--pm-ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }

.pm-cookie .pm-cookie__more {
  display: inline-block; margin-top: 12px; color: rgba(241, 243, 242, .84) !important; font: 500 13.5px/1.4 'Inter', system-ui, sans-serif;
  text-decoration: underline !important; text-underline-offset: 3px; transition: opacity .2s ease;
}
.pm-cookie .pm-cookie__more:hover { opacity: .75; }
.pm-cookie .pm-cookie__more:active { opacity: .55; }

.pm-cookie .pm-cookie__close {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer; background: rgba(241, 243, 242, .08); color: var(--pm-porcelain);
  transition: transform .3s var(--pm-spring), opacity .2s ease;
}
.pm-cookie .pm-cookie__close:hover { transform: scale(1.08); }
.pm-cookie .pm-cookie__close:active { transform: scale(.92); opacity: .7; }
.pm-cookie .pm-cookie__close svg { display: block; width: 14px; height: 14px; }
.pm-cookie .pm-cookie__close[hidden] { display: none; }

.pm-cookie a:focus-visible, .pm-cookie button:focus-visible { outline: 3px solid var(--pm-teal); outline-offset: 3px; }
.pm-cookie .pm-cookie__btn--yes:focus-visible { outline-color: #fff; }

/* The dunk: runs once as the card arrives */
.pm-cookie__biscuit, .pm-cookie__mug { transform-box: fill-box; transform-origin: 50% 50%; }
.pm-cookie.is-in .pm-cookie__mug { animation: pm-mug-pop .7s var(--pm-spring) .12s backwards; }
.pm-cookie.is-in .pm-cookie__biscuit { animation: pm-dunk 2s var(--pm-glide) .3s backwards; }

/* Answering shows what changed */
.pm-cookie.is-allow .pm-cookie__biscuit { animation: pm-dive .6s var(--pm-glide) forwards; }
.pm-cookie.is-allow .pm-cookie__mug { animation: pm-gulp .6s var(--pm-spring) .22s; }
.pm-cookie.is-decline .pm-cookie__biscuit { animation: pm-lift .42s var(--pm-glide) forwards; }

@keyframes pm-mug-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pm-dunk {
  0% { opacity: 0; transform: translateY(-16px) rotate(-14deg); }
  22% { opacity: 1; transform: translateY(0) rotate(0); }
  42% { transform: translateY(14px) rotate(-7deg); }
  58% { transform: translateY(1px) rotate(4deg); }
  76% { transform: translateY(11px) rotate(-4deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes pm-dive { 0% { transform: translateY(-5px); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(27px) rotate(12deg); opacity: 0; } }
@keyframes pm-gulp { 0%, 100% { transform: none; } 40% { transform: scale(1.09, .93); } 70% { transform: scale(.97, 1.04); } }
@keyframes pm-lift { to { transform: translate(14px, -22px) rotate(22deg); opacity: 0; } }

@media (min-width: 640px) {
  .pm-cookie { left: 24px; right: auto; bottom: 24px; width: 440px; padding: 22px; }
  .pm-cookie__art { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-cookie, .pm-cookie.is-in { transform: none; transition: opacity .2s linear, visibility 0s; }
  .pm-cookie *, .pm-cookie.is-in * { animation: none !important; transition: none !important; }
}

/* Footer link, added next to Privacy Policy by the script */
.pm-cookie-link { cursor: pointer; }
.pm-cookie-link:hover { text-decoration: underline; }
.pm-cookie-link:active { opacity: .6; }
.pm-cookie-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.pm-cookie-sep { opacity: .5; }