:root {
   --bg: #F8F8F8;
   --primary: #203970;
   --accent: #5780EA;
   --accent-soft: rgba(87, 128, 234, 0.7);
}

.cookie-consent {
   position: fixed;
   inset: auto 0 0 0;
   display: none;
   z-index: 9999;
   padding: 16px;
   background: transparent;
}

.cookie-consent.show {
   display: block;
}

.cookie-content {
   max-width: 920px;
   margin: 0 auto;
   background: var(--bg);
   color: var(--primary);
   border: 1px solid var(--accent-soft);
   box-shadow: 0 8px 24px rgba(32, 57, 112, 0.25);
   border-radius: 12px;
   padding: 18px 20px 20px 20px;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 16px;
   align-items: center;
}

.cookie-text {
   font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cookie-text a {
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.cookie-button {
   justify-self: end;
   padding: 10px 18px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: 10px;
   cursor: pointer;
   font-weight: 600;
   transition: background .2s ease, transform .05s ease;
}

.cookie-button:hover {
   background: var(--primary);
}

.cookie-button:active {
   transform: translateY(1px);
}

.cookie-close {
   position: absolute;
   top: 8px;
   right: 12px;
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 8px;
   background: transparent;
   color: var(--primary);
   font-size: 22px;
   line-height: 32px;
   cursor: pointer;
}

.cookie-close:hover {
   background: var(--accent-soft);
   color: #fff;
}

@media (max-width:680px) {
   .cookie-content {
      grid-template-columns: 1fr;
      padding: 18px;
   }

   .cookie-button {
      justify-self: stretch;
   }

   .cookie-close {
      top: 18px;
      right: 18px;
   }
}

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