/* ==========================================================
   SAVE BUTTON + SAVED PAGE  (loaded after home.css / image.css)
   ========================================================== */

/* ---------- button on grid cards ---------- */
.pn-card{position:relative}
.sv-btn{font-family:inherit;cursor:pointer}
.sv-btn:disabled{cursor:progress}
.sv-btn svg{flex:0 0 auto}
.sv-btn .sv-on{display:none}
.sv-btn.saved .sv-on{display:block}
.sv-btn.saved .sv-off{display:none}

.sv-card-btn{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s,background .15s}
.sv-card-btn .sv-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* icon only (text kept for screen readers) */
.sv-card-btn svg{width:20px;height:20px}
.sv-card-btn:hover{background:var(--red-d)}
.pn-card:hover .sv-card-btn,
.pn-card:focus-within .sv-card-btn{opacity:1;transform:none}

/* saved state: white circle, filled dark bookmark (still only shown on hover) */
.sv-card-btn.saved{background:#fff;color:var(--ink)}
.sv-card-btn.saved:hover{background:#f1f1f1}

/* ---------- button on the pin page ---------- */
.pd-row{flex-wrap:wrap}
.pd-row .pd-btn{min-width:110px}
.pd-btn.sv-btn.saved{background:var(--ink);color:#fff}
.pd-btn.sv-btn.saved:hover{background:#333}
.pd-btn.sv-btn .sv-on{animation:none}
.pd-btn.sv-btn.saved .sv-on{animation:pd-pop .35s ease}

/* ---------- Saved page ---------- */
.sv-sub{display:flex;align-items:center;gap:6px}
.sv-removed .pn-media{opacity:.4;filter:grayscale(.6)}
.sv-removed .pn-title{opacity:.5}
.sv-removed .sv-card-btn{opacity:1;transform:none}

.sv-empty{max-width:460px;margin:60px auto;padding:0 20px;text-align:center}
.sv-empty .ico{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:var(--soft);color:var(--ink)}
.sv-empty h2{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.4px}
.sv-empty p{margin:0 0 24px;color:var(--mute);font-size:16px}
.sv-empty a{display:inline-block;padding:14px 24px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;font-size:16px}
.sv-empty a:hover{background:var(--red-d)}

/* ---------- toast ---------- */
.sv-toast{position:fixed;left:50%;bottom:32px;z-index:120;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s,transform .2s;white-space:nowrap}
.sv-toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){
  .sv-toast{bottom:84px}
}

/* ---------- share button (bottom-right of image, on hover) ---------- */
.pn-mwrap{position:relative}
.pn-share{position:absolute;right:12px;bottom:12px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:30%;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s,background .15s}
.pn-share:hover{background:#f1f1f1}
.pn-share .sh-ok{display:none}
.pn-share.copied .sh-i{display:none}
.pn-share.copied .sh-ok{display:block}
.pn-mwrap:hover .pn-share,
.pn-card:focus-within .pn-share,
.pn-share.copied{opacity:1;transform:none}