/*
 * Favourites feature — self-contained on purpose (see favourites/enqueue.php
 * doc comment). Loads on EVERY front-end page, unlike showroom.css/
 * finance-calculator.css, so this deliberately does NOT declare its own
 * :root brand-colour block like those two do — redeclaring :root site-wide
 * risks colliding with Oxygen's own global CSS variables on pages that
 * aren't the showroom. Every colour below uses var(--token, fallback) so it
 * still looks right (falls back to the real brand values) on pages where
 * showroom.css's :root never loads.
 */

/* ── Favourite star button on vehicle cards ──────────────────────────── */
.vmg-fav-star {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  background: rgba(0, 0, 0, .45); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; padding: 0; transition: background .2s, color .2s;
}
.vmg-fav-star:hover { background: rgba(0, 0, 0, .78); }
.vmg-fav-star.is-fav { color: var(--accent, #8bd409); }

/* Larger variant for the single vehicle page's main gallery image — same
   corner treatment as the card version, sized to match that page's own
   .vmg-gal-arrow/.vmg-gal-zoom buttons (showroom.css) instead of the
   smaller card icons. */
.vmg-fav-star--lg {
  top: 12px; right: 12px; width: 40px; height: 40px;
  border-radius: 50%; font-size: 16px;
}

/* ── Floating "you have favourites" icon — fixed, site-wide ──────────── */
/* Brand green background, dark icon — same pairing as .apply-filter-btn
   elsewhere in this plugin (dark text/icon on the accent green reads
   better than white-on-green). Count badge is the inverse (dark bg,
   light text) on purpose, so it stands out against the green circle
   instead of blending into it. */
.vmg-fav-float {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent, #8bd409); color: var(--primary, #2d2d2c);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  font-size: 18px; line-height: 1; transition: transform .15s;
}
.vmg-fav-float:hover { transform: scale(1.08); color: var(--primary, #2d2d2c); }
.vmg-fav-float__count {
  position: absolute; top: -6px; right: -6px;
  background: var(--primary, #2d2d2c); color: #fff;
  font-size: 11px; font-weight: 800; min-width: 18px; height: 18px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1; border: 2px solid var(--surface, #fff);
}

/* ── Favourites page ([vmg_favourites]) ───────────────────────────────── */
/* #id selector, not .vmg-fav-page — the div also carries showroom.css's
   .container class (margin: 0 auto), which loads after this stylesheet on
   this page and would otherwise win the top/bottom margin at equal class
   specificity regardless of source order. The #id beats it outright. */
#vmg-favourites-page { margin-top: 50px; margin-bottom: 50px; }
.vmg-fav-empty-text {
  text-align: center; font-size: 16px; line-height: 1.6;
  color: var(--muted, #666); padding: 40px 24px;
}
.vmg-fav-remove-btn {
  /* Sits above showroom.css's .card-title-link::after stretch-link overlay
     (position:absolute; inset:0; z-index:0), which otherwise swallows the
     click and navigates to the vehicle page instead — same fix
     .card-actions already needed for the same reason. */
  position: relative; z-index: 1;
  width: 100%; margin-top: 10px; padding: 10px 14px;
  border: 1px solid var(--border, #e2e2e1); border-radius: 6px;
  background: var(--surface, #fff); color: #c0392b; font-weight: 600;
  font-family: inherit; font-size: 14px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.vmg-fav-remove-btn:hover { background: #fdecea; border-color: #c0392b; }

@media (max-width: 480px) {
  .vmg-fav-float { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 16px; }
}