/* =========================================================================
   consent.css — cookie banner + consent-gated embeds.
   Loaded only when a tag container is configured (see inc/consent.php).
   ========================================================================= */

.cc {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; justify-content: center;
}
.cc[hidden] { display: none; }

.cc__box {
  width: 100%; max-width: 940px;
  display: flex; align-items: center; gap: 22px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  padding: 18px 22px;
}
.cc__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: 0 0 4px; }
.cc__text { font-size: 0.875rem; color: var(--muted); margin: 0; line-height: 1.55; }
.cc__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cc__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cc__btn { white-space: nowrap; }

@media (max-width: 780px) {
  .cc { left: 10px; right: 10px; bottom: 10px; }
  .cc__box { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; }
  /* Accept last on mobile: it is the one under the thumb. */
  .cc__actions { flex-direction: column-reverse; }
  .cc__btn { width: 100%; text-align: center; }
}

/* ---- Embeds held back until consent ---- */
.embed-lock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 28px 22px;
  min-height: 340px; height: 100%;
  background: var(--surface); color: var(--muted);
  font-size: 0.875rem; line-height: 1.55;
  border: 1px solid var(--border); border-radius: 14px;
}
.embed-lock p { margin: 0; max-width: 46ch; }
/* Once the iframe is injected the container is no longer a centred notice. */
.embed-lock[data-loaded="1"] { display: block; padding: 0; min-height: 0; }
.embed-lock iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; border-radius: 14px; }