/* ══════════════════════════════════════════════════════
   MODALS & OVERLAYS — wishlist, dislike, onboarding, visual search, filter drawer
══════════════════════════════════════════════════════ */

/* ── WISHLIST PANEL ── */
.wishlist-panel{position:fixed;top:0;right:-400px;width:380px;height:100vh;background:var(--bg-card);border-left:1px solid var(--border);z-index:150;transition:right .3s;display:flex;flex-direction:column}
.wishlist-panel.open{right:0}
.wl-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.wl-ttl{font-family:var(--serif);font-size:22px;font-weight:300}
.wl-close{width:28px;height:28px;background:var(--g1);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.wl-tabs{display:flex;border-bottom:1px solid var(--border)}
.wl-tab{flex:1;padding:12px;text-align:center;font-size:13px;color:var(--g5);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.wl-tab.active{color:var(--w);border-bottom-color:var(--purple)}
.wl-content{flex:1;overflow-y:auto;padding:16px}
.wl-empty{text-align:center;color:var(--g4);font-size:14px;padding:40px 20px}
.wl-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.wl-item-img{width:52px;height:62px;border-radius:var(--r);flex-shrink:0}
.wl-item-info{flex:1}.wl-item-brand{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g4)}
.wl-item-name{font-size:13px;color:var(--g6);margin-bottom:2px}.wl-item-price{font-size:13px;font-weight:500}
.wl-item-reason{font-size:11px;color:var(--g4);font-style:italic}

/* ── DISLIKE MODAL ── */
.dislike-modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;padding-bottom:0}
.dislike-modal.open{display:flex}
.dislike-sheet{background:var(--bg-card);border:1px solid var(--border-h);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:24px;width:100%;max-width:480px}
.ds-h{font-size:16px;font-weight:500;margin-bottom:5px}.ds-s{font-size:13px;color:var(--g5);margin-bottom:18px}
.ds-reasons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ds-reason{padding:7px 14px;border:1px solid var(--border-h);border-radius:20px;font-size:13px;color:var(--g6);cursor:pointer;transition:all .2s;font-family:var(--sans)}.ds-reason.sel{background:var(--g1);border-color:var(--g5);color:var(--w)}
.ds-actions{display:flex;gap:10px;justify-content:flex-end}

/* ── ONBOARDING TOAST ── */
.ob-toast{position:fixed;bottom:24px;right:24px;z-index:190;background:var(--bg-card);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:16px 18px;max-width:300px;box-shadow:0 8px 40px rgba(0,0,0,.5);transition:all .4s;transform:translateY(0)}
.ob-toast.hidden{transform:translateY(120%);opacity:0;pointer-events:none}
.obt-ttl{font-size:14px;font-weight:500;margin-bottom:5px}
.obt-desc{font-size:13px;color:var(--g5);margin-bottom:14px}
.obt-btns{display:flex;gap:8px}
.obt-dismiss{background:none;border:1px solid var(--border-h);border-radius:var(--r);font-family:var(--sans);font-size:12px;color:var(--g5);padding:6px 12px;cursor:pointer;transition:color .2s}.obt-dismiss:hover{color:var(--w)}

/* ── ONBOARDING MODAL ── */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg-card);border:1px solid var(--border-h);border-radius:var(--r-xl);padding:34px;max-width:490px;width:100%;max-height:85vh;overflow-y:auto}
.modal-h{font-family:var(--serif);font-size:28px;font-weight:300;margin-bottom:5px}.modal-s{font-size:14px;color:var(--g5);margin-bottom:24px}
.step-dots{display:flex;gap:5px;margin-bottom:24px}.dot{width:6px;height:6px;border-radius:3px;background:var(--g3);transition:all .3s}.dot.on{background:var(--purple);width:20px}.dot.done{background:var(--g5)}
.modal-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.btn-ghost{background:none;border:none;font-family:var(--sans);font-size:13px;color:var(--g4);cursor:pointer;padding:0}.btn-ghost:hover{color:var(--g6)}

/* Visual search popup */
.vsearch-modal{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.vsearch-modal.open{display:flex}
.vs-sheet{background:var(--bg-card);border:1px solid var(--border-h);border-radius:var(--r-xl);padding:28px;max-width:440px;width:100%}
.vs-h{font-family:var(--serif);font-size:24px;font-weight:300;margin-bottom:6px}.vs-s{font-size:14px;color:var(--g5);margin-bottom:20px}
.vs-drop{border:1.5px dashed var(--border-h);border-radius:var(--r-lg);padding:32px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:16px}.vs-drop:hover{border-color:var(--purple);background:var(--purple-d)}

/* Search filter drawer overlay (mobile) */
.filter-drawer{position:fixed;inset:0;z-index:160;background:rgba(0,0,0,.7);display:none}
.filter-drawer.open{display:block}
.filter-drawer-inner{position:absolute;top:0;left:0;bottom:0;width:280px;background:var(--bg-card);border-right:1px solid var(--border);padding:20px 18px;overflow-y:auto}
.filter-drawer-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.filter-drawer-ttl{font-size:16px;font-weight:500}
.filter-drawer-close{width:28px;height:28px;background:var(--g1);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px}