/*
 * cookie-consent.css
 *
 * Standalone banner styling for pages that do NOT load css/styles.css — the
 * externally generated product help under /docs/ and /help/, which ship with
 * their own self-contained inline styles. Without this, js/cookie-consent.js
 * would render an unstyled banner to any visitor whose first mapsoft.com page
 * is a deep help page (the consent cookie is set on .mapsoft.com, so returning
 * visitors who already chose never see it).
 *
 * These rules mirror the banner rules in css/styles.css, with the custom
 * properties resolved to literals because that file's :root block is not
 * loaded here. If the banner is ever restyled, update BOTH files.
 *   --dark #1E293B  --brand-blue #046BD2  --brand-blue-dark #0355A8
 *   --brand-blue-light #E8F1FC  --max-width 1200px  --radius-sm 6px
 *   --transition 0.2s ease
 */

#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1E293B;
  color: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .3);
  padding: 20px 24px;
  animation: cc-slide-up .3s ease;
}

#cookie-consent-banner.cc-closing { animation: cc-slide-down .3s ease forwards; }

@keyframes cc-slide-up   { 0% { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cc-slide-down { 0% { transform: translateY(0); }    to { transform: translateY(100%); } }

.cc-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.cc-text   { flex: 1 1 400px; font-size: 14px; line-height: 1.6; }
.cc-text p { margin: 0 0 4px; }
.cc-text a { color: #E8F1FC; text-decoration: underline; }
.cc-text a:hover { color: #fff; }

.cc-buttons { display: flex; gap: 12px; flex-shrink: 0; }

.cc-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  white-space: nowrap;
}

.cc-btn:hover { transform: translateY(-1px); }
.cc-btn--accept { background: #046BD2; color: #fff; }
.cc-btn--accept:hover { background: #0355A8; }
.cc-btn--reject { background: 0 0; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.cc-btn--reject:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

@media (max-width: 600px) {
  .cc-inner   { flex-direction: column; text-align: center; }
  .cc-buttons { width: 100%; flex-direction: column; }
  .cc-btn     { width: 100%; }
}