/* consent-banner.css — bottom-of-page banner shown until the visitor accepts
 * or declines anonymous activity tracking. Site-themed (navy + cyan accent,
 * beveled corners, monospace) so it matches the rest of Gorton Solutions. */

.gs-consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9600;
  background: rgba(11, 16, 32, 0.96);
  color: #eaf0ff;
  border: 1px solid rgba(78, 163, 255, 0.4);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font: 500 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px,
                     100% calc(100% - 10px), calc(100% - 10px) 100%,
                     10px 100%, 0 calc(100% - 10px), 0 10px);
}

.gs-consent[hidden] { display: none !important; }

.gs-consent__msg {
  flex: 1 1 320px;
  min-width: 240px;
  color: #cdd6f0;
}

.gs-consent__msg a {
  color: #4ea3ff;
  text-decoration: underline;
}

.gs-consent__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gs-consent__btn {
  padding: 8px 14px;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(78, 163, 255, 0.4);
  background: rgba(78, 163, 255, 0.12);
  color: #eaf0ff;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px,
                     100% calc(100% - 6px), calc(100% - 6px) 100%,
                     6px 100%, 0 calc(100% - 6px), 0 6px);
  transition: background 120ms ease, box-shadow 120ms ease;
}
.gs-consent__btn:hover {
  background: rgba(78, 163, 255, 0.22);
  box-shadow: 0 0 16px rgba(78, 163, 255, 0.35);
}
.gs-consent__btn--primary {
  background: linear-gradient(135deg, rgba(78, 163, 255, 0.28), rgba(124, 92, 255, 0.28));
  border-color: rgba(124, 92, 255, 0.5);
}
.gs-consent__btn--primary:hover {
  background: linear-gradient(135deg, rgba(78, 163, 255, 0.45), rgba(124, 92, 255, 0.45));
}

@media (max-width: 600px) {
  .gs-consent { font-size: 12px; padding: 12px 14px; }
}