/* Engagement CTAs (2026-10-18): compare pick cards, phone sticky Visit bar,
   alternatives card buttons. Markup: aeo-comparison-pages.php adf_engage_*.
   Enqueued only on /compare/<a>-vs-<b>/ and /alternatives/<tool>/. */

/* ---- Compare: two-up pick block ---------------------------------------- */
.adf-engage-pick {
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
}
.adf-engage-pick--after-table { margin-top: var(--space-6, 1.5rem); }
.adf-engage-pick__title {
  font-size: var(--text-lg, 1.125rem);
  margin: 0 0 var(--space-3, .75rem);
}
.adf-engage-pick__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, .75rem);
}
.adf-engage-pick__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
  padding: var(--space-4, 1rem);
  background: var(--adf-surface-raised, #141f2d);
  border: 1px solid var(--adf-border, rgba(162,189,216,.16));
  border-radius: var(--radius-lg, .75rem);
  min-width: 0;
}
.adf-engage-pick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, .5rem);
  flex-wrap: wrap;
}
.adf-engage-pick__name {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.adf-engage-pick__price {
  font-size: var(--text-xs, .75rem);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--adf-cyan, #56d9e5);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.adf-engage-pick__best {
  margin: 0;
  color: var(--adf-text, #e8eef5);
  font-size: var(--text-sm, .875rem);
  line-height: 1.5;
}
.adf-engage-pick__best-label {
  display: block;
  color: var(--adf-text-muted, #9caec2);
  font-size: var(--text-xs, .75rem);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.adf-engage-pick__actions {
  margin-top: auto;
  padding-top: var(--space-2, .5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, .5rem) var(--space-4, 1rem);
}
.adf-engage-pick__actions .adf-engage__visit { flex: 1 1 auto; justify-content: center; }
.adf-engage-pick__review {
  color: var(--adf-text-muted, #9caec2);
  font-size: var(--text-sm, .875rem);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.adf-engage-pick__review:hover,
.adf-engage-pick__review:focus-visible { color: var(--adf-cyan, #56d9e5); }

@media (max-width: 640px) {
  .adf-engage-pick__grid { grid-template-columns: 1fr; }
  .adf-engage-pick__actions .adf-engage__visit { flex-basis: 100%; }
  .adf-engage-pick__review { padding: 4px 0; }
}

/* ---- Compare: phone sticky Visit bar ----------------------------------- */
.adf-engage-sticky { display: none; }
@media (max-width: 720px) {
  .adf-engage-sticky:not([hidden]) {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* under the cookie notice (9999) and modals */
    background: var(--adf-surface-raised, #141f2d);
    border-top: 1px solid var(--adf-border, rgba(162,189,216,.16));
    box-shadow: 0 -6px 18px rgba(0,0,0,.35);
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .adf-engage-sticky__inner {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .adf-engage-sticky .adf-engage__visit {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .adf-engage-sticky__close {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--adf-border, rgba(162,189,216,.16));
    border-radius: 999px;
    background: transparent;
    color: var(--adf-text-muted, #9caec2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .adf-engage-sticky__close:focus-visible { outline: 2px solid var(--adf-cyan, #56d9e5); outline-offset: 2px; }
  /* Keep the page's last lines reachable while the bar is up. */
  html.adf-engage-sticky-on body { padding-bottom: var(--adf-engage-sticky-h, 64px); }
  html.adf-engage-sticky-on { scroll-padding-bottom: var(--adf-engage-sticky-h, 64px); }
}

/* ---- Alternatives: card Visit / Review --------------------------------- */
.adf-engage-alt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, .5rem);
  margin-top: var(--space-3, .75rem);
}
.adf-engage-alt__actions .adf-btn { justify-content: center; }
@media (max-width: 480px) {
  .adf-engage-alt__actions { flex-direction: column; }
  .adf-engage-alt__actions .adf-btn { width: 100%; }
}