/* ChaiBD wishlist page (public/js/chai-wish.js) */
.wl { padding-top: 6px; padding-bottom: 90px; }
.wl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the header card */
.wl-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 16px; padding: 22px 22px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #ff6b8a 0%, transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--red) 85%, #ff4d79), color-mix(in srgb, var(--red) 80%, #000)); box-shadow: 0 26px 44px -30px var(--red); }
.wl-hero::after { content: ""; position: absolute; right: -50px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.wl-heart { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 20px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.wl-heart svg { width: 32px; height: 32px; fill: #fff; stroke: none; animation: wl-beat 1.6s ease-in-out infinite; }
.wl-heart i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd1dc; opacity: 0; animation: wl-float 2.4s ease-out infinite; }
.wl-heart i:nth-of-type(2) { left: 14px; animation-delay: .8s; } .wl-heart i:nth-of-type(3) { right: 12px; animation-delay: 1.6s; }
@keyframes wl-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@keyframes wl-float { 0% { opacity: .9; transform: translateY(10px) scale(.6); } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
.wl-ht { position: relative; z-index: 1; flex: 1; min-width: 200px; }
.wl-ht h1 { margin: 0; font-size: clamp(22px, 3.6vw, 30px); color: #fff; }
.wl-sub { margin: 4px 0 0; font-size: 13.5px; opacity: .9; }
.wl-stats { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.wl-stats div { min-width: 82px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .16); text-align: center; backdrop-filter: blur(6px); }
.wl-stats b { display: block; font: 800 18px Poppins, 'Hind Siliguri', sans-serif; } .wl-stats small { font-size: 11.5px; opacity: .9; }
.wl-stats .g b { color: #bbf7d0; } .wl-stats .r b { color: #fde68a; }
/* chips and sort */
.wl-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wl-tools[hidden] { display: none; }
.wl-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.wl-chips::-webkit-scrollbar { display: none; }
.wl-chips button { flex: none; padding: 8px 14px; border-radius: 99px; border: 1.5px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.wl-chips em { font-style: normal; margin-left: 2px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.wl-chips button.on { color: #fff; border-color: var(--red); background: var(--red); box-shadow: 0 8px 16px -10px var(--red); } .wl-chips button.on em { background: rgba(255, 255, 255, .25); }
.wl-right { display: flex; gap: 8px; }
.wl-sort select { height: 38px; padding: 0 30px 0 12px; border-radius: 12px; border: 1.5px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; }
.wl-pickbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wl.picking .wl-pickbtn { color: #fff; border-color: var(--red); background: var(--red); }
/* the cards */
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.wl-card { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--card); border: 1.5px solid var(--card-b); box-shadow: 0 14px 28px -26px rgba(0, 0, 0, .5);
  animation: wl-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); transition: transform .25s, box-shadow .25s, border-color .2s, opacity .28s; }
@keyframes wl-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.wl-card:hover { transform: translateY(-4px); box-shadow: 0 22px 34px -26px rgba(0, 0, 0, .55); }
.wl-card.bye { opacity: 0; transform: scale(.85); }
.wl-card.sel { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.wl-img { position: relative; display: block; aspect-ratio: 1; background: linear-gradient(150deg, color-mix(in srgb, var(--red) 8%, var(--card)), color-mix(in srgb, #a855f7 8%, var(--card))); }
.wl-img .ph-clip { position: absolute; inset: 0; } .wl-img .ph { position: absolute; inset: 0; background: var(--ph) center / cover no-repeat; transition: transform .5s; }
.wl-card:hover .wl-img .ph { transform: scale(1.05); }
.wl-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 30%, transparent); } .wl-noimg svg { width: 40px; height: 40px; }
.wl-off { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; color: #fff; background: var(--red); font: 800 12px Poppins, sans-serif; }
.wl-drop { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px 4px 6px; border-radius: 99px; color: #fff; background: #16a34a; font-size: 11.5px; font-weight: 700; box-shadow: 0 6px 12px -6px #16a34a; animation: wl-pop 2.4s ease-in-out infinite; }
.wl-drop svg { width: 13px; height: 13px; stroke-width: 3; }
@keyframes wl-pop { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-3px); } }
.wl-outb { position: absolute; inset: auto 0 0; padding: 7px; text-align: center; color: #fff; background: rgba(15, 23, 42, .65); font-size: 12.5px; font-weight: 700; }
.wl-card.out .wl-img { filter: grayscale(.7); }
.wl-rm { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--red); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); transition: transform .2s; }
.wl-rm svg { fill: var(--red); stroke: var(--red); } .wl-rm:hover { transform: scale(1.12); } .wl-rm:active { transform: scale(.9); }
.wl-tick { position: absolute; left: 10px; top: 10px; z-index: 2; width: 28px; height: 28px; display: none; place-items: center; border-radius: 9px; border: 2px solid #fff; background: rgba(15, 23, 42, .35); color: #fff; }
.wl-tick svg { width: 15px; height: 15px; stroke-width: 3; opacity: 0; }
.wl.picking .wl-tick { display: grid; } .wl.picking .wl-off { display: none; }
.wl-card.sel .wl-tick { background: var(--red); border-color: var(--red); } .wl-card.sel .wl-tick svg { opacity: 1; }
.wl-b { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px; flex: 1; }
.wl-name { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.wl-price { display: flex; align-items: baseline; gap: 6px; } .wl-price b { color: var(--red); font: 800 18px Poppins, sans-serif; } .wl-price s { color: var(--ink-soft); font-size: 12.5px; }
.wl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-soft); min-height: 16px; } .wl-meta .warn { color: #ea580c; font-weight: 700; }
.wl-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.wl-add, .wl-notify { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; border-radius: 12px; color: #fff; background: var(--red); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 10px 18px -12px var(--red); transition: transform .15s; }
.wl-add:active { transform: scale(.97); } .wl-add.opt { color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--card)); box-shadow: none; }
.wl-add.ok { background: #16a34a; box-shadow: 0 10px 18px -12px #16a34a; }
.wl-notify { background: color-mix(in srgb, var(--ink) 10%, var(--card)); color: var(--ink-soft); box-shadow: none; cursor: default; }
.wl-share { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, var(--card)); color: var(--ink-soft); cursor: pointer; }
.wl-none { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--ink-soft); }
/* empty */
.wl-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 40px 16px 30px; text-align: center; border-radius: 24px; background: var(--card); border: 1.5px dashed var(--card-b); }
.wl-eh { position: relative; width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.wl-eh svg { width: 52px; height: 52px; fill: color-mix(in srgb, var(--red) 25%, transparent); stroke: var(--red); stroke-width: 1.6; animation: wl-beat 1.8s ease-in-out infinite; }
.wl-eh i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--red) 40%, #fff); opacity: 0; animation: wl-float 2.6s ease-out infinite; }
.wl-eh i:nth-child(2) { left: 18px; top: 40px; } .wl-eh i:nth-child(3) { right: 16px; top: 30px; animation-delay: .9s; } .wl-eh i:nth-child(4) { left: 46px; top: 14px; animation-delay: 1.7s; } .wl-eh i:nth-child(5) { right: 34px; bottom: 20px; animation-delay: 2.2s; }
.wl-empty h2 { margin: 8px 0 0; font-size: 20px; } .wl-empty p { margin: 0; max-width: 380px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.wl-go { margin-top: 8px; padding: 12px 22px; border-radius: 14px; color: #fff; background: var(--red); font-weight: 700; box-shadow: 0 12px 20px -14px var(--red); }
/* you may like */
.wl-like { margin-top: 28px; }
.wl-lh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .wl-lh h2 { margin: 0; font-size: 19px; } .wl-lh a { color: var(--red); font-weight: 700; font-size: 13.5px; }
/* pick several: the bar */
.wl-bar { position: fixed; left: 50%; bottom: 18px; z-index: 900; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: min(560px, calc(100vw - 24px)); padding: 10px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--card-b); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45); animation: wl-in .3s both; }
.wl-bar[hidden] { display: none; }
.wl-bar button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.wl-pall { background: color-mix(in srgb, var(--ink) 7%, var(--card)); color: var(--ink); }
.wl-pn { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.wl-prm { background: color-mix(in srgb, #e11d48 10%, var(--card)); color: #e11d48; }
.wl-pcart { background: var(--red); color: #fff; }
.wl-bar button:disabled { opacity: .45; cursor: default; }
.wl-toast { position: fixed; left: 50%; bottom: 96px; z-index: 9999; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; border-radius: 14px; color: #fff; background: #111827; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); font-size: 14px; animation: wl-in .25s both; transition: opacity .3s; }
.wl-toast.out { opacity: 0; } .wl-toast button { border: 0; border-radius: 10px; padding: 7px 12px; background: rgba(255, 255, 255, .14); color: #fde68a; font: inherit; font-weight: 700; cursor: pointer; }
/* phones: two cards a row, compact */
@media (max-width: 640px) {
  .wl-hero { padding: 18px 16px; gap: 12px; border-radius: 20px; } .wl-heart { width: 54px; height: 54px; } .wl-stats { width: 100%; } .wl-stats div { flex: 1; min-width: 0; padding: 8px 6px; } .wl-stats b { font-size: 15px; }
  .wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wl-card { border-radius: 16px; } .wl-b { padding: 10px; } .wl-name { font-size: 13px; } .wl-price b { font-size: 16px; }
  .wl-add { height: 36px; font-size: 12.5px; } .wl-add svg { display: none; } .wl-share { width: 36px; height: 36px; }
  .wl-rm { width: 32px; height: 32px; } .wl-right { width: 100%; } .wl-sort { flex: 1; } .wl-sort select { width: 100%; }
  .wl-bar { bottom: 84px; } .wl-bar button { padding: 0 10px; } .wl-toast { bottom: 150px; }
}