/*
 * Wishlist hearts, share sheet and toast — every frontend page
 * (docs/WISHLIST_SHARE_DESIGN.md). Hand-maintained, loaded from
 * Layout::parts.footer next to public/js/saved-items.js.
 * Colours derive from --systemColor (brand), so white-label sites get their
 * own hue; borders use the light brand line, never blue.
 */
:root {
    --sf-brand: var(--systemColor, #FF2F00);
    --sf-brand-soft: #FFF1EC;
    --sf-brand-line: #FFD3C4;
    --sf-brand-ink: #D92D00;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --sf-brand-soft: color-mix(in srgb, var(--sf-brand) 8%, #fff);
        --sf-brand-line: color-mix(in srgb, var(--sf-brand) 28%, #fff);
        --sf-brand-ink: color-mix(in srgb, var(--sf-brand) 85%, #000);
    }
}

/* ── Heart (data-saved-ref) ─────────────────────────────────────────── */
.sf-save { cursor: pointer; font-family: inherit; }
.sf-save .sf-save__on { display: none; }
.sf-save[aria-pressed="true"] .sf-save__on { display: inline-block; }
.sf-save[aria-pressed="true"] .sf-save__off { display: none; }
.sf-save[aria-pressed="true"] { color: var(--sf-brand); }
.sf-save.is-busy { pointer-events: none; opacity: .7; }
.sf-save:focus { outline: none; }
.sf-save:focus-visible { outline: 2px solid var(--sf-brand-line); outline-offset: 2px; }
@keyframes sf-save-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.sf-save.is-pop .sf-save__on { animation: sf-save-pop .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .sf-save.is-pop .sf-save__on { animation: none; } }

/* Round heart over a card photo (homepage showcase, wishlist page). */
.sf-save--float {
    position: absolute; z-index: 3; top: 10px; right: 10px;
    width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: #4B5563; font-size: 16px; line-height: 1;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .18);
    transition: transform .15s, color .15s;
}
.sf-save--float:hover { transform: scale(1.06); color: var(--sf-brand); }

/* Outline action button (detail pages): Save / Share. */
.sf-action {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
    border: 1px solid var(--sf-brand-line); border-radius: 999px; background: #fff;
    color: var(--sf-brand-ink); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .15s;
}
.sf-action:hover { background: var(--sf-brand-soft); }
.sf-action:focus { outline: none; }
.sf-action:focus-visible { outline: 2px solid var(--sf-brand-line); outline-offset: 2px; }
.sf-action i { font-size: 15px; }
.sf-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ── Share sheet ────────────────────────────────────────────────────── */
.sf-share { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px; }
.sf-share.is-open { display: flex; }
.sf-share__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.sf-share__panel {
    position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 16px;
    padding: 20px; box-shadow: 0 12px 40px rgba(16, 24, 40, .2); color: #1F2937;
}
.sf-share__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sf-share__title { font-size: 17px; font-weight: 700; margin: 0; }
.sf-share__close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #F3F4F6; color: #4B5563; font-size: 18px; line-height: 1; cursor: pointer; }
.sf-share__close:focus,
.sf-share__copy:focus,
.sf-share__app:focus { outline: none; }
.sf-share__close:focus-visible,
.sf-share__copy:focus-visible,
.sf-share__app:focus-visible { outline: 2px solid var(--sf-brand-line); outline-offset: 2px; }
.sf-share__item { color: #6B7280; font-size: 13px; margin: 0 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-share__link { display: flex; gap: 8px; margin-bottom: 14px; }
.sf-share__input {
    flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #E4E6EB; border-radius: 10px;
    font-size: 14px; color: #1F2937; background: #F9FAFB;
}
.sf-share__input:focus { outline: none; border-color: var(--sf-brand-line); }
.sf-share__copy {
    height: 42px; padding: 0 16px; border: 1px solid var(--sf-brand-line); border-radius: 10px; background: #fff;
    color: var(--sf-brand-ink); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.sf-share__copy:hover { background: var(--sf-brand-soft); }
.sf-share__apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-share__app {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
    border: 1px solid #E4E6EB; border-radius: 12px; background: #fff; color: #4B5563;
    font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.sf-share__app:hover { border-color: var(--sf-brand-line); background: var(--sf-brand-soft); color: #1F2937; text-decoration: none; }
.sf-share__app-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 700; }
.sf-share__app-icon--line { background: #06C755; font-size: 11px; }
.sf-share__app-icon--fb { background: #1877F2; }
.sf-share__app-icon--more { background: #F3F4F6; color: #4B5563; }
.sf-share__state { font-size: 13px; color: #6B7280; margin: 0 0 14px; }
.sf-share__state.is-error { color: #B91C1C; }
.sf-share.is-loading .sf-share__link,
.sf-share.is-loading .sf-share__apps,
.sf-share.is-error .sf-share__link,
.sf-share.is-error .sf-share__apps { display: none; }
@media (max-width: 575px) {
    .sf-share { align-items: flex-end; padding: 0; }
    .sf-share__panel { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Toast ──────────────────────────────────────────────────────────── */
.sf-toast {
    position: fixed; z-index: 2100; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
    display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
    padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid #E4E6EB; color: #1F2937; font-size: 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.sf-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sf-toast.is-error { border-color: #FECACA; background: #FEF2F2; color: #B91C1C; }
.sf-toast__icon { color: var(--sf-brand); }
.sf-toast__action { border: 0; background: none; padding: 0; color: var(--sf-brand-ink); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.sf-toast__action:hover { color: var(--sf-brand-ink); text-decoration: underline; }