/*
 * [agave_rate_card]: see inc/rate-card.php. Enqueued site-wide (it's small) so the card never
 * flashes unstyled; js/rate-card.js only loads where the shortcode is used.
 */

.agave-rate-card {
  width: 100%;
  border: 1px solid #dfe3e8;
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  box-sizing: border-box;
}

/* ---------- Row 1: the rate ---------- */
.agave-rate-left {
  position: relative; /* tooltip anchors to this column */
}

.agave-rate-eyebrow {
  font-size: 13px;
  letter-spacing: 1.6px;
  color: #9aa1a9;
  font-weight: 500;
  margin-bottom: 6px;
}

.agave-rate-figures {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  line-height: 1.1;
}

.agave-rate-number {
  font-size: 42px;
  font-weight: 500;
  color: #4a7d9e;
}

.agave-rate-apr {
  font-size: 42px;
  font-weight: 500;
  color: #14181d;
}

.agave-rate-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px; /* icon height, so the row doesn't grow when the icon appears */
  margin-top: 12px;
  font-size: 15px;
  color: #3a4048;
}

/* ---------- Loading placeholders (sized to the final text) ---------- */
.agave-rate-skeleton {
  display: inline-block;
  height: 0.8em;
  border-radius: 6px;
  background: #eef1f4;
  vertical-align: middle;
  animation: agave-rate-pulse 1.2s ease-in-out infinite;
}

.agave-rate-skeleton--eyebrow { width: 15em; }
.agave-rate-skeleton--number  { width: 3.4em; }
.agave-rate-skeleton--apr     { width: 5.6em; }
.agave-rate-skeleton--updated { width: 9.5em; }

@keyframes agave-rate-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ---------- Info icon + tooltip ---------- */
.agave-rate-info-wrap {
  position: relative;
  display: inline-flex; /* hugs the icon, so the hover zone is icon-sized */
}

/*
 * Scoped under .agave-rate-card on purpose: the Elementor kit styles every <button>
 * (.elementor-kit-14 button: accent background, 16px 30px padding, white text, and a
 * :hover/:focus fill). These selectors out-rank it.
 */
.agave-rate-card .agave-rate-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #9aa1a9;
  font: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: color .15s ease;
}

.agave-rate-card .agave-rate-info[hidden] {
  display: none;
}

.agave-rate-card .agave-rate-info:hover,
.agave-rate-card .agave-rate-info:focus {
  background: none;
}

.agave-rate-card .agave-rate-info:hover,
.agave-rate-card .agave-rate-info[aria-expanded="true"] {
  color: #4a7d9e;
}

.agave-rate-card .agave-rate-info:focus-visible {
  outline: 2px solid #4a7d9e;
  outline-offset: 2px;
}

.agave-rate-card .agave-rate-info svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Caret sits on the icon so it always points at the icon,
   while the panel below spans the column and can't overflow. */
.agave-rate-info-wrap::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: #14181d;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  z-index: 21;
  pointer-events: none;
}

.agave-rate-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-width: 460px;
  background: #14181d;
  color: #e8ebee;
  font-size: 12px;
  line-height: 1.55;
  padding: 14px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 24, 29, .18);
  box-sizing: border-box;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
}

/* Theme/kit paragraph styles would otherwise recolour or resize the tooltip text. */
.agave-rate-card .agave-rate-tooltip p {
  margin: 0 0 10px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.agave-rate-card .agave-rate-tooltip p:last-child {
  margin-bottom: 0;
}

/* The API disclaimer can contain line breaks (the VA scenario's does). */
.agave-rate-card .agave-rate-disclaimer {
  white-space: pre-line;
}

/* Only the JS-applied class opens it. No broad :hover / :focus-within rules. */
.agave-rate-tooltip.is-open,
.agave-rate-info-wrap.is-open::after {
  opacity: 1;
  visibility: visible;
}

/* ---------- Divider between rows ---------- */
.agave-rate-divider {
  width: 100%;
  height: 1px;
  background: #e2e5e9;
}

/* ---------- Row 2: the message ---------- */
.agave-rate-right {
  display: block;
}

.agave-rate-headline {
  font-size: 22px;
  font-weight: 600;
  color: #14181d;
  margin-bottom: 6px;
}

.agave-rate-sub {
  font-size: 16px;
  line-height: 1.45;
  color: #4a7d9e;
  max-width: 46ch;
}

/* ---------- No rates: keep only the message row ---------- */
.agave-rate-card.is-unavailable .agave-rate-left,
.agave-rate-card.is-unavailable .agave-rate-divider {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .agave-rate-tooltip,
  .agave-rate-info-wrap::after,
  .agave-rate-card .agave-rate-info {
    transition: none;
  }

  .agave-rate-skeleton {
    animation: none;
  }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 600px) {
  .agave-rate-card {
    gap: 16px;
    padding: 18px;
  }

  .agave-rate-figures {
    gap: 2px 10px;
  }

  .agave-rate-number,
  .agave-rate-apr {
    font-size: 32px;
  }

  .agave-rate-headline {
    font-size: 19px;
  }

  .agave-rate-sub {
    font-size: 15px;
  }
}