/* Consent Gate - base styles
 *
 * Colors fall back to theme CSS variables when no per-shortcode color
 * is set (button_bg / button_color / overlay_bg / text_color /
 * font_family). Adjust the theme variable names below
 * (--ast-global-color-*) to match the site.
 */

.consent-gate {
  position: relative;
  overflow: hidden;
  font-family: var(--cg-font-family, inherit);
}

.consent-gate.is-loaded {
  overflow: visible;
}

/* --------------------------------------------------------------------
 * content / preview image (display="inline")
 * ------------------------------------------------------------------ */

.consent-gate__content {
  position: absolute;
  inset: 0;
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease;
}

.consent-gate.is-loaded .consent-gate__content {
  position: static;
  filter: none;
  pointer-events: auto;
  user-select: auto;
}

.consent-gate__preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
}

.consent-gate.is-loaded .consent-gate__preview {
  display: none;
}

/* --------------------------------------------------------------------
 * overlay (disclaimer text + button)
 * ------------------------------------------------------------------ */

.consent-gate__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem;
  background: var(--cg-overlay-bg, rgba(255, 255, 255, 0.75));
  color: var(--cg-text-color, inherit);
  z-index: 2;
}

.consent-gate.is-loaded .consent-gate__overlay {
  display: none;
}

.consent-gate__text {
  margin: 0;
  max-width: 32rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.consent-gate__text a {
  text-decoration: underline;
}

.consent-gate__button {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--cg-button-bg, var(--ast-global-color-0, currentColor));
  border-radius: 4px;
  background: var(--cg-button-bg, var(--ast-global-color-0, #fff));
  color: var(--cg-button-color, var(--ast-global-color-5, #333));
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}

.consent-gate__button:focus-within,
.consent-gate__button:hover {
  filter: brightness(0.62);
}

/* --------------------------------------------------------------------
 * display="modal"
 *
 * The preview image stays visible permanently as a full background,
 * with a dark overlay on top. The "button" becomes a circular play
 * icon with a bold title below it; the disclaimer text is shown only
 * before the first click (smaller, below the title).
 * ------------------------------------------------------------------ */

.consent-gate[data-display="modal"] .consent-gate__content {
  display: block;
  filter: none;
}

.consent-gate[data-display="modal"].is-loaded .consent-gate__content {
  position: absolute;
  inset: 0;
}

.consent-gate[data-display="modal"].is-loaded .consent-gate__preview {
  display: block;
}

.consent-gate[data-display="modal"] .consent-gate__overlay {
  background: var(--cg-overlay-bg, rgba(0, 0, 0, 0.35));
  color: var(--cg-text-color, #fff);
}

.consent-gate[data-display="modal"].is-loaded .consent-gate__overlay {
  display: flex;
}

.consent-gate[data-display="modal"] .consent-gate__text {
  order: 2;
  font-size: 0.9rem;
  font-weight: 400;
}

.consent-gate[data-display="modal"].is-loaded .consent-gate__text {
  display: none;
}

/* "button" = play icon (circle + triangle) + bold title below it */
.consent-gate[data-display="modal"] .consent-gate__button {
  order: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 76px 1rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: inherit;
}

.consent-gate__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cg-button-bg, #fff);
  position: relative;
}

.consent-gate[data-display="modal"] .consent-gate__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--cg-button-color, #333);
}

/* --------------------------------------------------------------------
 * Modal popup
 * ------------------------------------------------------------------ */

span.consent-gate__label {
  font-weight: 700;
}

.consent-gate__hint {
  font-size: 0.8rem;
  max-width: 38ch;
  opacity: 0.9;
  line-height: 1.4;
}

.consent-gate-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999999;
}

.consent-gate-modal__frame {
  width: 90%;
  height: 100%;
  border: 0;
  max-height: 80vh;
}

.consent-gate-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--cg-button-bg, rgba(255, 255, 255, 0.9));
  color: var(--cg-button-color, #333);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.consent-gate-modal__close:focus-within,
.consent-gate-modal__close:hover {
  filter: brightness(0.62);
}