/* ==========================================================================
   WAM Net Effective Rate Styles
   File: assets/css/net-effective.css
   
   Add to your enqueue in functions.php
   Or @import into listings.css if preferred.
   ========================================================================== */


/* ─── Listing Card: Badge ────────────────────────────────────────────────── */

.wam-listing-card__image {
  position: relative; /* needed for badge absolute positioning */
}

.wam-listing-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background-color: var(--color-accent, #1a3c5e); /* deep navy — adjust to brand */
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Badge when no image (renders inline above body) */
.wam-listing-card__badge--no-image {
  position: static;
  display: inline-flex;
  margin-bottom: 8px;
}


/* ─── Listing Card: Pricing block ───────────────────────────────────────── */

.wam-listing-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

/* Original price — struck through when incentive is active */
.wam-listing-card__price--original .wam-price-original {
  display: inline-block;
  color: var(--color-text-muted, #999);
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Net effective price — prominent */
.wam-listing-card__price--net {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wam-price-net {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
}

.wam-price-net-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-text-muted, #777);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Standard price (no incentive) */
.wam-listing-card__price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary, #1a1a1a);
}

.wam-price-unit {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted, #777);
  margin-left: 2px;
}


/* ─── Single Listing Page: Price Block ──────────────────────────────────── */

.wam-listing-price-block {
  margin: 16px 0 20px;
}

/* Wrapper when incentive is active */
.wam-listing-pricing--has-incentive {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
}

/* Original price: struck through, muted */
.wam-listing-price--original {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-muted, #999);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin: 0;
  line-height: 1.2;
}

/* Net effective price group */
.wam-listing-price-net-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* Net effective amount */
.wam-listing-price--net {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
  line-height: 1.2;
}

.wam-listing-price-net-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #777);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  align-self: center;
}

/* "1 Free Month" badge on single page */
.wam-listing-incentive-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background-color: var(--color-accent, #1a3c5e);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  align-self: center;
}

/* Standard price (no incentive) on single page */
.wam-listing-price {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0;
  line-height: 1.2;
}

.wam-listing-price .wam-price-unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted, #777);
  margin-left: 3px;
}


/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .wam-listing-pricing--has-incentive {
    flex-direction: column;
    gap: 6px;
  }

  .wam-listing-price--net {
    font-size: 1.5rem;
  }

  .wam-listing-price--original {
    font-size: 1.1rem;
  }
}