/* =========================================================
   Arrivva Estimated Rebate — Unified Styles (Clean, No Conflicts)
   ========================================================= */


/* =========================
   Phase 1: Single listing bar
   ========================= */

.arrivva-rebate-bar {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 8px;
}

.arrivva-rebate-bar-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* On-brand badge */
.arrivva-rebate-badge {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(255, 138, 0, 0.10);
  border: 1px solid rgba(255, 138, 0, 0.35);

  max-width: 380px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);
}

.arrivva-rebate-bar-title {
  font-weight: 800;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.arrivva-rebate-bar-value {
  font-weight: 900;
  font-size: 16px;
  color: #ff8a00;
  white-space: nowrap;
}

/* Disclaimer */
.arrivva-rebate-bar-disclaimer {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.62);
  text-align: right;
}

/* "How is this calculated?" link */
.arrivva-rebate-how {
  font-size: 12px;
  font-weight: 700;
  color: #ff8a00;
  cursor: pointer;
  text-decoration: underline;
}

.arrivva-rebate-how:hover {
  text-decoration: none;
  filter: brightness(0.95);
}


/* =========================
   Phase 2: Card badge styles
   ========================= */

.arrivva-card-rebate-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 7px 10px;
  border-radius: 12px;

  background: rgba(255, 138, 0, 0.10);
  border: 1px solid rgba(255, 138, 0, 0.35);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);

  white-space: nowrap;
  flex-wrap: nowrap;
}

.arrivva-card-rebate-title {
  font-weight: 800;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.82);
  white-space: nowrap;
}

.arrivva-card-rebate-value {
  font-weight: 900;
  font-size: 12px;
  color: #ff8a00;
  white-space: nowrap;
}


/* =========================
   Modal (used by tiles disclaimer)
   ========================= */

.arrivva-rebate-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.arrivva-rebate-modal[aria-hidden="false"] {
  display: block;
}

.arrivva-rebate-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.arrivva-rebate-modal__panel {
  position: relative;
  max-width: 520px;
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

.arrivva-rebate-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.arrivva-rebate-modal__title {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 10px;
}

.arrivva-rebate-modal__body {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.80);
}

.arrivva-rebate-modal__body code {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 138, 0, 0.10);
  border: 1px solid rgba(255, 138, 0, 0.25);
}


/* =========================
   Showcase IDX tile integration
   Goal:
   - Arrivva badge is always visible below tile
   - IDX hover icons appear ONLY on hover
   - On hover, icons overlay Arrivva badge (no slide, minimal motion)
   ========================= */

/* Reserve space under the tile so the badge can sit outside the border */
.sidx-search-result-grid-item.arrivva-has-rebate {
  position: relative;
  overflow: visible;
  margin-bottom: 36px;
  isolation: isolate; /* predictable stacking */
  z-index: 0;
}

/* Badge placement: centered below the entire tile */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -36px;

  display: inline-flex;
  justify-content: center;
  width: auto;

  pointer-events: none; /* never block IDX hover/click */
  z-index: 1;           /* below hover icons */
  opacity: 1;
}

/* Ensure IDX action bar / hover icons sit above the badge */
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions {
  position: relative;
  z-index: 9999;
  overflow: visible;

  /* IMPORTANT: kill any Showcase transform/slide on these layers */
  transform: none !important;
  transition: none !important;
}

/* Hide icons when not hovering (fade only, no movement) */
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Only fade opacity (no slide) */
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

/* On hover: show icons over the badge */
.sidx-search-result-grid-item.arrivva-has-rebate:hover .sidx-actions,
.sidx-search-result-grid-item.arrivva-has-rebate:hover .sidx-thumbnail-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 160ms ease, visibility 0s;
}

/* Lift hovered tile above neighbors so overlay wins in carousels/grids */
.sidx-search-result-grid-item.arrivva-has-rebate:hover {
  z-index: 99999;
}

/* =========================================================
   FIX STACKING: IDX ICONS MUST OVERLAY ARRIVVA BADGE
   ========================================================= */

/* Keep badge underneath */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate {
  z-index: 1 !important;
}

/* Lift hovered tile above neighbors */
.sidx-search-result-grid-item.arrivva-has-rebate:hover {
  z-index: 999999 !important;
}

/* Make the action layers topmost within the tile */
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions {
  position: relative !important;
  z-index: 999999 !important;
}

/* Force the actual icon nodes above the badge (Showcase often z-indexes children) */
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions i,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions .sidx-icon,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions .sidx-fa,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions i,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions .sidx-icon,
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions .sidx-fa {
  position: relative !important;
  z-index: 1000000 !important;
}

/* =========================================================
   FIX: IDX HOVER LAYER MUST OVERLAY BADGE (NO LAYOUT GAP)
   ========================================================= */

/* Tile must be a positioning context */
.sidx-search-result-grid-item.arrivva-has-rebate {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* Arrivva badge stays below */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate {
  z-index: 1 !important;
}

/* Make the IDX actions layer an OVERLAY (no layout space) */
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-actions {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;

  /* Place it where the rebate pill sits */
  bottom: -36px !important;

  margin: 0 !important;

  z-index: 9999 !important;
  overflow: visible !important;

  /* Hidden by default (no motion, no space) */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /* Keep it from “sliding” */
  transform: none !important;
  transition: opacity 120ms ease !important;
}

/* Some Showcase builds use thumbnail-actions for the hover UI */
.sidx-search-result-grid-item.arrivva-has-rebate .sidx-thumbnail-actions {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -36px !important;

  margin: 0 !important;

  z-index: 9999 !important;
  overflow: visible !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: none !important;
  transition: opacity 120ms ease !important;
}

/* On hover: show overlay above the rebate */
.sidx-search-result-grid-item.arrivva-has-rebate:hover .sidx-actions,
.sidx-search-result-grid-item.arrivva-has-rebate:hover .sidx-thumbnail-actions {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================
   Phase 3: Tooltip-first education (cards)
   ========================================= */

/* Allow the badge to be hoverable/clickable for tooltip.
   It's BELOW the card, so it won't block the main listing click. */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate {
  pointer-events: auto; /* was none */
}

/* Keep the inner pill interactive */
.arrivva-card-rebate-inner {
  position: relative;
}

/* Tooltip wrapper */
.arrivva-card-tip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

/* Small "i" trigger */
.arrivva-card-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 16px;
  height: 16px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;

  color: #ff8a00;
  border: 1px solid rgba(255, 138, 0, 0.55);
  background: rgba(255, 138, 0, 0.08);

  cursor: default;
  user-select: none;
}

/* Tooltip bubble (hidden by default) */
.arrivva-card-tip-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);

  width: 260px;
  max-width: 70vw;

  padding: 10px 10px;
  border-radius: 12px;

  background: #111;
  color: #fff;

  font-size: 12px;
  line-height: 1.35;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 999999; /* above the pill */
}

/* Show on hover or keyboard focus */
.arrivva-card-tip:hover .arrivva-card-tip-bubble,
.arrivva-card-tip-trigger:focus + .arrivva-card-tip-bubble {
  opacity: 1;
  visibility: visible;
}

/* Optional: little arrow */
.arrivva-card-tip-bubble::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #111;
  transform: rotate(45deg);
}

#arrivva-rebate-page-disclaimer.arrivva-rebate-bar-disclaimer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* =========================================================
   Phase 3 (safe): Prevent overlap WITHOUT changing placement
   Keeps your existing centered badge below each tile.
   ========================================================= */

/* Limit badge width to the tile width so it can't collide with neighbors */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate {
  max-width: calc(100% - 16px);
}

/* Allow wrapping inside the pill (instead of overflowing/overlapping) */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-inner {
  display: inline-flex;
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 4px;
  column-gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Allow the label/value to wrap, but keep font size unchanged */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-title,
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-value {
  white-space: normal;
}

/* =========================================
   Phase 3 layout: force 2-line pill + restore spacing
   ========================================= */

/* Make the pill sit exactly where it used to (tweak if needed) */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate {
  bottom: -36px; /* your old baseline */
}

/* Force title on first line, value on second line */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* restores the “pill” vertical feel */
  padding: 10px 14px;
  line-height: 1.2;
}

/* Title line */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-title {
  display: block;
  white-space: nowrap;
}

/* Value line */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-value {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}

/* Force pill lower (override any earlier positioning rules) */
.sidx-search-result-grid-item.arrivva-has-rebate > .arrivva-card-rebate {
  bottom: -65px !important; /* lower than before; adjust if needed */
}

.sidx-search-result-grid-item.arrivva-has-rebate {
  margin-bottom: 65px !important;
}

/* Center text in the pill */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-inner {
  width: 100%;
  text-align: center !important;
  align-items: center !important;
}

/* Ensure the two lines center */
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-title,
.sidx-search-result-grid-item.arrivva-has-rebate .arrivva-card-rebate-value {
  width: 100%;
  text-align: center !important;
}


.arrivva-mortgage-cta.sidx-button.sidx-primary {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  text-align: center;
}

.arrivva-mortgage-cta i {
  margin-right: 6px;
}

/* =========================================================
   2026-08-03: grid rhythm + touch behaviour
   Everything above this line is the ported WordPress CSS; keep
   new rules down here so document order settles the ties.
   ========================================================= */

/* The pill was bottom-anchored at -65px inside a 65px margin, which left
   5px between a card and its own pill and 1px between that pill and the
   NEXT card. Visually the pill belonged to the listing below it, and the
   1px seam made it easy to tap the wrong tile. Anchor the pill to the
   bottom edge of its own card instead and give the margin room for a real
   gap underneath: 7px above the pill, 27px below it. */
.sidx-search-result-grid-item.arrivva-has-rebate {
  margin-bottom: 92px !important;
}

.sidx-search-result-grid-item.arrivva-has-rebate > .arrivva-card-rebate {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 8px !important;
}

/* Touch devices resolve :hover on first tap, so a tile whose hover state
   changes what is painted eats that tap and the visitor has to tap again
   to actually follow the link. Neutralise the tile-level hover reveals
   where there is no real pointer. The .arrivva-card-tip tooltip keeps its
   hover rules on purpose: it is not in the tap path to the listing. */
@media (hover: none), (pointer: coarse) {
  .sidx-search-result-grid-item.arrivva-has-rebate:hover .sidx-actions,
  .sidx-search-result-grid-item.arrivva-has-rebate:hover
    .sidx-thumbnail-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }

  .sidx-search-result-grid-item.arrivva-has-rebate:hover {
    z-index: 0 !important;
  }
}