/* ═══════════════════════════════════════════════════════════
   Cookie consent banner + preferences modal rows
   ═══════════════════════════════════════════════════════════ */

.vxt-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  /* Was a solid var(--dark) block - now translucent with a blur so the
     page behind shows through instead of a big flat dark rectangle. */
  background: rgba(14, 24, 48, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.88);
  padding: 14px max(16px, env(safe-area-inset-left)) calc(14px + max(16px, env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-right));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  animation: vxtCookieSlideUp 0.35s ease;
}

@keyframes vxtCookieSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.vxt-cookie-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.vxt-cookie-banner__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  flex: 1 1 320px;
}

.vxt-cookie-banner__text a {
  color: #fff;
  text-decoration: underline;
}

.vxt-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Clear the fixed mobile bottom nav (same ~64px clearance approach used
   by .vxt-footer-simple / .vxt-ft elsewhere) so the banner doesn't sit
   underneath it on small screens.

   BUGFIX: .vxt-cookie-banner__inner's base rule sets
   justify-content:space-between for its *desktop* row layout (text on
   the left, buttons on the right). On mobile it switches to a column
   layout but never overrode justify-content, so space-between kept
   applying - along the vertical axis instead - shoving the text to the
   top and the buttons to the bottom with a large empty gap between them
   (the "too much empty space" behavior). flex-start keeps them stacked
   tightly, and the gap below is trimmed to match. */
@media (max-width: 767.98px) {
  .vxt-cookie-banner {
    padding-bottom: max(64px, calc(48px + var(--vxt-safe-bottom, 0px)));
  }
  .vxt-cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
  }
  .vxt-cookie-banner__actions {
    justify-content: stretch;
  }
  .vxt-cookie-banner__actions .btn {
    flex: 1 1 auto;
  }
}

/* ── Preferences modal rows ── */
.vxt-cookie-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.vxt-cookie-row:last-child { border-bottom: none; }

.vxt-cookie-row__label p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #6b7280);
}

.vxt-cookie-row .form-switch {
  flex-shrink: 0;
  padding-top: 2px;
}

.vxt-cookie-row .form-check-input {
  width: 2.4em;
  height: 1.3em;
  cursor: pointer;
}

.vxt-cookie-row .form-check-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}