/* ============================================================
   Handova — Cookie notice
   ------------------------------------------------------------
   Pairs with cookies.js. Standalone so the marketing site can
   link it without pulling in the whole component sheet.

   Buttons: the marketing site and the portals each define .btn
   already, so only the bar itself is styled here.
   ============================================================ */

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 130;

  padding: clamp(0.75rem, 2vw, 1rem);
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px -12px rgba(12, 20, 36, 0.18);

  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease);
}
.cookie-bar.is-visible { transform: none; }

.cookie-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  max-width: var(--container);
  margin-inline: auto;
  padding-right: 2rem;
}

.cookie-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface-sunk);
  color: var(--text);
}

.cookie-text { min-width: 0; flex: 1; }

.cookie-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.cookie-body {
  margin-top: 0.125rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 82ch;
}
.cookie-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-body a:hover { color: var(--accent-hover); }

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.cookie-close {
  position: absolute;
  top: -0.25rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cookie-close:hover { background-color: var(--surface-sunk); color: var(--text); }

/* The floating WhatsApp button shares this corner. */
.cookie-bar.is-visible ~ .wa-float,
body:has(.cookie-bar.is-visible) .wa-float { bottom: 7.5rem; }


@media (max-width: 900px) {
  .cookie-inner {
    flex-wrap: wrap;
    padding-right: 2rem;
  }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 620px) {
  .cookie-icon { display: none; }
  .cookie-body { font-size: 0.75rem; }
  body:has(.cookie-bar.is-visible) .wa-float { bottom: 10.5rem; }
}