/* ============================================================
   YoloYachtSearch1373 — Wishlist (saved yachts)
   Enqueued with public/js/yolo-wishlist.js wherever cards render (search
   results, Our Yachts, the homepage fleet block) and on the yacht page.
   Palette and rules: docs/PUBLIC-DESIGN-BEST-PRACTICES.md (§1 navy #173b6d,
   §3 44px targets + 3px #123a71 focus rings, §4 reduced motion). Nothing
   here is forced with a bang and nothing uses the child combinator; the card sheet
   (yacht-card.css) is not touched — the heart is layered over it.
   ============================================================ */

/* --- card heart: top-right of the photo, above the stretched card link (z 1) and the Swiper controls (z 10) --- */
.yolo-ys-yacht-card .yolo-ys-wish {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #173b6d;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .15s ease;
}
.yolo-ys-yacht-card .yolo-ys-wish:hover { background: #ffffff; }
.yolo-ys-wish:focus-visible { outline: 3px solid #123a71; outline-offset: 2px; }
.yolo-ys-wish .ys-i { width: 22px; height: 22px; vertical-align: 0; }
/* both sprite hearts are in the button; the state picks one (never colour alone: outline → filled).
   [aria-pressed] is part of the selector on purpose: the results toolbar sits inside .sf-v3, whose
   inline `.sf-v3 .ys-i { display: inline-block }` prints after this sheet — (0,3,0) beats its (0,2,0). */
.yolo-ys-wish[aria-pressed] .ys-i-heart-filled { display: none; }
.yolo-ys-wish[aria-pressed="true"] .ys-i-heart { display: none; }
.yolo-ys-wish[aria-pressed="true"] .ys-i-heart-filled { display: inline-block; }
.yolo-ys-wish.is-popping { animation: yolo-ys-wish-pop .35s ease; }
@keyframes yolo-ys-wish-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}
/* the discount pill shares the top-right corner (owner decision 7): it moves left of the heart */
.yolo-ys-yacht-card.yolo-ys-card-v3 .yolo-ys-yacht-image .yolo-ys-discount-badge { right: 60px; }

/* --- the hidden wrappers of the "Saved" views (results columns, catalogue items) and the empty-state line --- */
.yolo-ys-wish-hidden { display: none; }
.yolo-ys-wish-empty {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}
.yolo-ys-wish-empty[hidden] { display: none; }

/* --- results toolbar pill "♡ Saved (n)" (search-results.php, next to the count) --- */
.yolo-ys-wish-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    align-self: flex-start;
    height: 46px;
    padding: 0 14px 0 12px;
    border: 1px solid #c9d2de;
    border-radius: 999px;
    background: #ffffff;
    color: #173b6d;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.yolo-ys-wish-filter[hidden] { display: none; }
.yolo-ys-wish-filter:hover { border-color: #173b6d; }
.yolo-ys-wish-filter:focus-visible { outline: 3px solid #123a71; outline-offset: 2px; }
.yolo-ys-wish-filter .ys-i { width: 18px; height: 18px; vertical-align: 0; }
.yolo-ys-wish-filter[aria-pressed] .ys-i-heart-filled { display: none; }
.yolo-ys-wish-filter[aria-pressed="true"] { background: #173b6d; border-color: #173b6d; color: #ffffff; }
.yolo-ys-wish-filter[aria-pressed="true"] .ys-i-heart { display: none; }
.yolo-ys-wish-filter[aria-pressed="true"] .ys-i-heart-filled { display: inline-block; }
.yolo-ys-wish-filter-count { font-weight: 500; }

/* --- Our Yachts toolbar: the fourth tab (hidden at 0) and the empty-state line inside the toolbar --- */
.yolo-catalogue-view button[hidden] { display: none; }
.yolo-catalogue-toolbar .yolo-catalogue-empty { flex: 1 1 100%; }
.yolo-ys-our-fleet[data-fleet-view="saved"] .yolo-ys-fleet-section.is-wish-empty { display: none; }

/* --- yacht page: "Save / Saved" pill at the right of the title (yacht-details-v3.php, .yh4-head) --- */
.yolo-yacht-details-v3 .yh4-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.yolo-yacht-details-v3 .yh4-title-row .yh4-title { flex: 1 1 auto; min-width: 0; }
.yolo-ys-wish--page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 44px;
    margin: 0;
    padding: 0 16px 0 12px;
    border: 1px solid #c9d2de;
    border-radius: 999px;
    background: #ffffff;
    color: #173b6d;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.yolo-ys-wish--page:hover { border-color: #173b6d; }
.yolo-ys-wish--page .ys-i { width: 20px; height: 20px; }
.yolo-ys-wish--page[aria-pressed="true"] { background: #e8eef7; border-color: #173b6d; }
@media (max-width: 575.98px) {
    .yolo-yacht-details-v3 .yh4-title-row { gap: 8px; }
    .yolo-ys-wish--page { height: 40px; padding: 0 12px 0 10px; font-size: 13px; }
}

/* --- reduced motion: no pop, no transitions (pacing logic unchanged) --- */
@media (prefers-reduced-motion: reduce) {
    .yolo-ys-yacht-card .yolo-ys-wish, .yolo-ys-wish-filter, .yolo-ys-wish--page { transition: none; }
    .yolo-ys-wish.is-popping { animation: none; }
}