/* ══════════════════════════════════════════════════
   ORB — swiperthumb.png animated
══════════════════════════════════════════════════ */

#ds-swiper-orb {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe0f0 0%, #ffc2dc 60%, #ffaed0 100%);
  border: 3px solid #fff;
  cursor: pointer;
  z-index:120;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  user-select: none;
  animation: orb-ring-pulse 2.6s ease-in-out infinite;
  will-change: box-shadow;
  z-index: 118;
}

@keyframes orb-ring-pulse {
  0%,100% { box-shadow: 0 4px 14px rgba(221,63,135,.22); }
  40%     { box-shadow: 0 4px 18px rgba(221,63,135,.40), 0 0 32px rgba(221,63,135,.14); }
  70%     { box-shadow: 0 4px 10px rgba(221,63,135,.16); }
}



#ds-swiper-orb-clip {
  width: 60px; height: 60px; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ffe8f4, #ffd0e8);
}

#ds-swiper-orb-img {
  width: 50px; height: 50px;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 55% 60%;
  animation:
    orb-float  2.6s ease-in-out infinite,
    orb-rattle 8.0s ease-in-out 4.0s infinite;
  will-change: transform;
}

@keyframes orb-float {
  0%   { transform: rotate(-14deg) translateY(0px)   scale(1); }
  25%  { transform: rotate(-11deg) translateY(-3px)  scale(1.04); }
  50%  { transform: rotate(-16deg) translateY(-1px)  scale(1.01); }
  75%  { transform: rotate(-10deg) translateY(-4px)  scale(1.05); }
  100% { transform: rotate(-14deg) translateY(0px)   scale(1); }
}

@keyframes orb-rattle {
  0%,100% { transform: rotate(-14deg) translateY(0)   scale(1); }
  2%      { transform: rotate(-28deg) translateY(-4px) scale(1.1); }
  4%      { transform: rotate(0deg)   translateY(-4px) scale(1.1); }
  6%      { transform: rotate(-26deg) translateY(-5px) scale(1.12); }
  8%      { transform: rotate(2deg)   translateY(-5px) scale(1.12); }
  10%     { transform: rotate(-22deg) translateY(-3px) scale(1.06); }
  12%     { transform: rotate(-4deg)  translateY(-2px) scale(1.04); }
  16%     { transform: rotate(-14deg) translateY(0)   scale(1); }
}

#ds-swiper-orb:hover {
  animation: none;
  box-shadow: 0 4px 28px rgba(221,63,135,.52), 0 0 48px rgba(221,63,135,.20);
  transition: box-shadow .22s ease;
}
#ds-swiper-orb:hover #ds-swiper-orb-img {
  animation: orb-hover .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes orb-hover {
  0%   { transform: rotate(-14deg) scale(1); }
  35%  { transform: rotate(10deg)  scale(1.22); }
  65%  { transform: rotate(-8deg)  scale(1.26); }
  100% { transform: rotate(-5deg)  scale(1.18); }
}

.sw-orb-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--sw-green); color: #fff;
  font-family: var(--sw-font); font-size: 9px; font-weight: 700;
  border-radius: 999px; padding: 2px 6px; border: 2px solid #fff;
  z-index: 2;
  animation: badge-throb 4s ease-in-out infinite;
  transition: background .25s ease, color .25s ease;
  will-change: transform;
}
@keyframes badge-throb {
  0%,88%,100% { transform: scale(1); }
  92%         { transform: scale(1.35); }
  96%         { transform: scale(.92); }
}

/* Heart-hit flash on the orb badge */
@keyframes orb-badge-pop {
  0%   { transform: scale(1);    filter: brightness(1); }
  18%  { transform: scale(1.6);  filter: brightness(2.0) saturate(1.8); }
  32%  { transform: scale(0.85); filter: brightness(1.3); }
  48%  { transform: scale(1.25); filter: brightness(1.5); }
  65%  { transform: scale(1.08); filter: brightness(1.1); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* Sparkle particle from the badge */
@keyframes badge-spark-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
  70%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--bsx), var(--bsy)) scale(0) rotate(var(--bsr,90deg)); }
}
.orb-badge-spark {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: var(--bsz, 8px);
  color: var(--bsc, #fff);
  text-shadow: 0 0 5px var(--bsc, #fff);
  line-height: 1;
  animation: badge-spark-fly var(--bsdur, 480ms) ease-out forwards;
}

/* Mobile: badge text slightly bigger */
@media (max-width: 540px) {
  .sw-orb-badge { font-size: 11px !important; padding: 3px 8px !important; }
}

/* ── Backdrop ─────────────────────────────────────────────── */
#ds-swiper-backdrop {
  position: fixed; inset: 0;
  background: rgb(255 255 255 / 8%);
  backdrop-filter: blur(10px);
  z-index: 9995;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
#ds-swiper-backdrop.open { opacity: 1; pointer-events: all; }

#ds-swiper-floor {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--real-vh, 1vh) * 100);
  background: #ffffffbf; z-index: 9994;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
#ds-swiper-floor.open { opacity: 1; }

/* ── Panel ────────────────────────────────────────────────── */
#ds-swiper-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.94);
  width: min(96vw, var(--sw-panel-w));
  /* Ensure panel never taller than visible viewport */
  max-height: calc(var(--real-vh, 1vh) * 96);
  background: var(--sw-bg);
  border-radius: var(--sw-radius);
  border: 1px solid rgb(255 255 255) !important;
  box-shadow: var(--sw-shadow);
  z-index: 9996;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s cubic-bezier(.22,.61,.36,1),
              transform .32s cubic-bezier(.22,.61,.36,1);
  font-family: var(--sw-font);
  color: var(--sw-text);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
#ds-swiper-panel.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
  border: 0px;
}

/* Hide site nav bars when swiper is open on mobile */
body.swiper-open #mmenu,
body.swiper-open .mobile-navi {
  display: none !important;
}

/* ── Header ───────────────────────────────────────────────── */
.sw-header {
  padding: 13px 16px 11px;
  display: flex; align-items: center; gap: 10px;
  background: var(--sw-surface);
  border-bottom: 1px solid var(--sw-border);
  flex-shrink: 0;
  height: 72px;
  box-sizing: border-box;
  overflow: hidden;
}
.sw-header-logo {
  font-family: var(--sw-font);
  font-size: 18px;
  font-weight: 900;
  color: var(--sw-pink);
  flex: 1;
  letter-spacing: -.02em;
  min-width: 0;
  width: 60%;
}
.sw-header-sub {
    font-size: 15px;
    color: var(--sw-sub);
    margin-top: 10px;
    margin-left: 0px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
    

/* ═══════════════════════════════════════════════════════════
   DISCLAIMER OVERLAY — light theme, maintenance-style bubbles
═══════════════════════════════════════════════════════════ */
#sw-disclaimer-overlay {
  position: fixed; inset: 0; z-index: 10010;
  /* Use JS-measured height so iOS Safari chrome doesn't clip content */
  height: calc(var(--real-vh, 1vh) * 100);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Light theme — soft warm white background like maintenance.php */
  background: linear-gradient(160deg, #fff5f9 0%, #fff9fc 40%, #f9f4ff 100%);
  font-family: var(--sw-font, 'Outfit', sans-serif);
  transition: transform 0.72s cubic-bezier(0.55, 0, 0.1, 1),
              opacity   0.45s ease 0.3s;
  will-change: transform, opacity;
  overflow: hidden;
}
#sw-disclaimer-overlay.sw-disc-gone {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
#sw-disclaimer-overlay.sw-disc-hidden {
  display: none !important;
}

/* ── Bubble layer (maintenance.php style, max 16px) ── */
.sw-disc-orbs {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.sw-disc-orb {
  position: absolute; border-radius: 50%;
  background: rgba(221,63,135,0.22);
  will-change: transform, opacity;
  transform: translate3d(0, 110vh, 0) scale(0.85);
  opacity: 0;
  animation-name: sw-disc-bubble-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Accent dots — slightly different tint */
.sw-disc-orb.sw-disc-orb-accent {
  background: rgba(180,80,200,0.14);
}
.sw-disc-orb.sw-disc-orb-soft {
  background: rgba(221,63,135,0.10);
}
@keyframes sw-disc-bubble-up {
  0%   { transform: translate3d(0,  110vh, 0) scale(0.85); opacity: 0; }
  10%  { opacity: 0.85; }
  88%  { opacity: 0.55; }
  100% { transform: translate3d(0, -18vh, 0) scale(1.1);  opacity: 0; }
}

/* ── Particle stream between icons ── */
#sw-disc-stream { position: absolute; inset: 0; pointer-events: none; }
.sw-disc-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(221,63,135,0.65);
  pointer-events: none;
  will-change: transform, opacity;
  animation: sw-disc-particle-fly linear both;
}
@keyframes sw-disc-particle-fly {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

/* ── Card ── */
.sw-disc-card {
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.92);
  border-radius: 28px;
  padding: 32px 28px 24px;
  width: min(440px, calc(100vw - 32px));
  /* Never taller than visible viewport on iPhone */
  max-height: calc(var(--real-vh, 1vh) * 90);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  box-shadow: 0 5px 17px rgba(221,63,135,.14),
              0 4px 18px rgba(0,0,0,.08),
              0 0 0 1px rgba(221,63,135,.08);
  text-align: center;
  animation: sw-disc-card-in 0.6s cubic-bezier(.22,.61,.36,1) both;
  backdrop-filter: blur(6px);
}
@keyframes sw-disc-card-in {
  from { transform: translateY(32px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Logo row ── */
.sw-disc-logo-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 26px;
  position: relative; height: 80px;
}
.sw-disc-logo-box {
  width: 68px; height: 68px; border-radius: 20px;
  background: #fff; flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(221,63,135,.16), 0 0 0 1.5px rgba(221,63,135,.10);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  animation: sw-disc-logo-bob 3s ease-in-out infinite;
}
.sw-disc-logo-box-2 { animation-delay: .45s; }
@keyframes sw-disc-logo-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}
/* The stream canvas/container sits between the two boxes */
.sw-disc-stream-gap {
  width: 64px; height: 68px; position: relative; flex-shrink: 0; z-index: 1;
}
#sw-disc-stream-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}

/* Static fallback dots (visible if JS particles not running yet) */
.sw-disc-dots-static {
  display: flex; gap: 4px; align-items: center;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.sw-disc-dots-static span {
  display: block; border-radius: 50%; background: rgba(221,63,135,.3);
  animation: sw-disc-dot-pulse 1.8s ease-in-out infinite;
}
.sw-disc-dots-static span:nth-child(1) { width:4px;height:4px; animation-delay:0s; }
.sw-disc-dots-static span:nth-child(2) { width:6px;height:6px; animation-delay:.18s; }
.sw-disc-dots-static span:nth-child(3) { width:8px;height:8px; background:rgba(221,63,135,.5); animation-delay:.36s; }
.sw-disc-dots-static span:nth-child(4) { width:6px;height:6px; animation-delay:.54s; }
.sw-disc-dots-static span:nth-child(5) { width:4px;height:4px; animation-delay:.72s; }
@keyframes sw-disc-dot-pulse {
  0%,100% { opacity:.3; transform:scale(1); }
  50%     { opacity:1;  transform:scale(1.35); }
}

/* ── Text ── */
.sw-disc-title {
  font-size: 22px; font-weight: 800; color: #1a1a2e;
  margin: 0 0 10px; letter-spacing: -.02em; line-height: 1.2;
}
.sw-disc-body {
  font-size: 13.5px; color: #666; line-height: 1.65;
  margin: 0 0 24px; font-weight: 400;
}

/* ── FX toggle row ── */
.sw-disc-fx-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #fdf0f6; border-radius: 14px;
  padding: 13px 17px; margin-bottom: 20px;
  border: 1.5px solid rgba(221,63,135,.10);
}
.sw-disc-fx-info { text-align: left; }
.sw-disc-fx-title { display: block; font-size: 14px; font-weight: 700; color: #1a1a2e; }
.sw-disc-fx-sub   { display: block; font-size: 11px; color: #aaa; margin-top: 2px; }
.sw-disc-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0;
}
.sw-disc-track {
  width: 46px; height: 26px; border-radius: 999px;
  background: #ddd; border: 1.5px solid #ccc;
  position: relative; transition: background .22s, border-color .22s;
}
.sw-disc-toggle.disc-fx-on .sw-disc-track { background: #dd3f87; border-color: #c2306f; }
.sw-disc-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sw-disc-toggle.disc-fx-on .sw-disc-thumb { transform: translateX(20px); }
.sw-disc-toggle-label {
  font-size: 11px; font-weight: 800; color: #bbb;
  letter-spacing: .08em; min-width: 18px; transition: color .2s;
}
.sw-disc-toggle.disc-fx-on .sw-disc-toggle-label { color: #dd3f87; }

/* ── CTA Button ── */
.sw-disc-btn {
  width: 100%; padding: 15px 0;
  background: linear-gradient(135deg, #dd3f87 0%, #c2306f 100%);
  color: #fff; font-size: 16px; font-weight: 700;
  border: none; border-radius: 999px; cursor: pointer;
  letter-spacing: .02em;
  /* box-shadow: 0 8px 24px rgba(221,63,135,.32); */
  transition: transform .15s, box-shadow .15s;
  font-family: var(--sw-font, 'Outfit', sans-serif);
}
.sw-disc-btn:hover  { transform: translateY(-2px); }
.sw-disc-btn:active { transform: translateY(0); }
.sw-disc-small { font-size: 11px; color: #ccc; margin: 13px 0 0; line-height: 1.5; }

.sw-fx-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
  min-width: 60px;
}
.sw-fx-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--sw-sub); font-family: var(--sw-font); transition: color .2s;
}
.sw-fx-toggle.fx-on .sw-fx-label { color: var(--sw-pink); }
.sw-fx-track {
  width: 36px; height: 20px; border-radius: 999px;
  background: #ccc; border: 1.5px solid #bbb;
  position: relative; transition: background .22s, border-color .22s; flex-shrink:0;
}
.sw-fx-toggle.fx-on .sw-fx-track { background: var(--sw-pink); border-color: var(--sw-pink-deep); }
.sw-fx-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.sw-fx-toggle.fx-on .sw-fx-thumb { transform: translateX(16px); }

.sw-close-btn {
  width: 32px;
  height: 32px;
  padding: 20px;
  border-radius: 6px;
  background: var(--sw-bg);
  border: 1.5px solid var(--sw-border);
  cursor: pointer;
  color: var(--sw-sub);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
  line-height: 1;
  font-family: var(--sw-font);
}
.sw-close-btn:hover { background: rgb(255 0 84 / 85%); color: var(--sw-red); border-color: var(--sw-red); }

/* ── Filter button ──────────────────────────────────────── */
.sw-filter-btn {
  width:32px; height:32px; padding:0; border-radius:6px;
  background:var(--sw-bg); border:1.5px solid var(--sw-border);
  cursor:pointer; color:var(--sw-sub); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
  flex-shrink:0; position:relative; line-height:1; font-family:var(--sw-font);
}
.sw-filter-btn:hover,.sw-filter-btn.swfb-on{background:var(--sw-pink-soft);color:var(--sw-pink);border-color:var(--sw-pink);}
.sw-filter-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--sw-pink);border:2px solid var(--sw-surface);display:none;pointer-events:none;}
.sw-filter-btn.swfb-dirty .sw-filter-dot{display:block;}

/* ── Filter overlay — position:fixed above everything, never affects layout ── */
#sw-fp{
  position:fixed;z-index:9999;
  background:var(--sw-surface);border-radius:0 0 18px 18px;
  border:1px solid var(--sw-border);border-top:none;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  font-family:var(--sw-font);color:var(--sw-text);
  max-height:0;opacity:0;pointer-events:none;
  transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .22s ease,padding .34s ease;
  padding:0 16px;box-sizing:border-box;overflow-y:auto;
}
#sw-fp.swfp-open{max-height: min(632px, calc(var(--real-vh, 1vh) * 88));min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:1;pointer-events:all;padding:14px 16px 18px;}
.swfp-row{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;margin-top: 10px;}
.swfp-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--sw-sub);text-transform:uppercase;padding-left: 10px;}
.swfp-inp{width:100%;box-sizing:border-box;padding:8px 11px;border-radius:10px;border:1.5px solid var(--sw-border);background:var(--sw-bg);font-size:13px;font-family:var(--sw-font);color:var(--sw-text);outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none;}
.swfp-inp:focus{border-color:var(--sw-pink);}
.swfp-inp::placeholder{color:var(--sw-sub);opacity:.65;}
.swfp-2col{display:flex;gap:8px;}
.swfp-2col .swfp-inp{flex:1;}
/* Location input wrapper */
.swfp-loc-wrap{position:relative;}
.swfp-loc-inp-row{display:flex;align-items:center;gap:0;position:relative;}
.swfp-loc-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--sw-pink);font-size:14px;pointer-events:none;z-index:1;}
.swfp-loc-inp-row .swfp-inp{padding-left:30px;padding-right:28px;}
.swfp-loc-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--sw-sub);cursor:pointer;opacity:.6;background:none;border:none;padding:0;line-height:1;display:none;}
.swfp-loc-clear:hover{opacity:1;color:var(--sw-red);}
/* Show X when dropdown is open — pure CSS, no JS required */
.swfp-loc-wrap:has(#swfp-loc-list.open) .swfp-loc-clear{display:block;}
/* Autocomplete dropdown */
#swfp-loc-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;background:var(--sw-surface);border:1.5px solid var(--sw-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:200px;overflow-y:scroll;display:none;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:all;}
#swfp-loc-list.open{display:block;}
.swfp-loc-opt{padding:8px 12px;cursor:pointer;font-size:12px;font-family:var(--sw-font);color:var(--sw-text);display:flex;align-items:center;justify-content:space-between;transition:background .1s;border-bottom:1px solid var(--sw-border);width:100%;box-sizing:border-box;}
.swfp-loc-opt:last-child{border-bottom:none;}
.swfp-loc-opt:hover{background:var(--sw-pink-soft);color:var(--sw-pink);}
.swfp-loc-opt small{color:var(--sw-sub);font-size:10px;}
.swfp-loc-opt-left{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.swfp-loc-opt-count{flex-shrink:0;margin-left:8px;background:var(--sw-bg);border:1.5px solid var(--sw-border);color:var(--sw-sub);font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;font-family:var(--sw-font);white-space:nowrap;transition:background .1s,color .1s,border-color .1s;}
.swfp-loc-opt:hover .swfp-loc-opt-count{background:var(--sw-pink-soft);border-color:var(--sw-pink);color:var(--sw-pink);}
.swfp-loc-opt-count.has-listings{border-color:var(--sw-pink);color:var(--sw-pink);background:var(--sw-pink-soft);}
.swfp-loc-opt-count.no-listings{opacity:.45;}
.swfp-loc-nores{pointer-events:none;opacity:.75;padding:10px 14px;line-height:1.5;cursor:default;}
.swfp-loc-nores small{display:block;color:var(--sw-sub);font-size:10px;margin-top:2px;}
/* Checkboxes */
.swfp-checks{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:-20px;}
.swfp-chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sw-sub);cursor:pointer;user-select:none;}
.swfp-chk input{accent-color:var(--sw-pink);width:14px;height:14px;cursor:pointer;}
.swfp-actions{display:flex;gap:8px;margin-top:2px;}
.swfp-apply{flex:1;padding:10px 0;border:none;border-radius:999px;background:linear-gradient(135deg,var(--sw-pink) 0%,var(--sw-pink-deep) 100%);color:#fff;font-size:13px;font-weight:700;font-family:var(--sw-font);cursor:pointer;transition:opacity .15s;}
.swfp-apply:hover{opacity:.88;}
.swfp-reset{padding:10px 14px;border-radius:999px;background:var(--sw-bg);color:var(--sw-sub);border:1.5px solid var(--sw-border);font-size:12px;font-weight:600;font-family:var(--sw-font);cursor:pointer;transition:background .15s;}
.swfp-reset:hover{background:var(--sw-red-bg);color:var(--sw-red);border-color:var(--sw-red);}
.swfp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--sw-border);}
.swfp-header-title{font-size:13px;font-weight:700;color:var(--sw-text);}
/* ── Radius slider ── */
.swfp-radius-row{display:flex;align-items:center;gap:8px;}
.swfp-radius-val{font-size:11px;font-weight:700;color:var(--sw-pink);white-space:nowrap;min-width:52px;text-align:right;}
.swfp-range{-webkit-appearance:none;appearance:none;width: 100%;margin: auto;height:4px;border-radius: 22px;background: #e8e8ec75;outline:none;cursor:pointer;}
.swfp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--sw-pink);cursor:pointer;box-shadow:0 1px 4px rgba(221,63,135,.35);}
.swfp-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--sw-pink);cursor:pointer;border:none;box-shadow:0 1px 4px rgba(221,63,135,.35);}

/* ── Progress ─────────────────────────────────────────────── */
.sw-progress {height: 2px;background: var(--sw-border);flex-shrink: 0;}
.sw-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--sw-pink), #a02065);
  transition: width .4s ease;
}

/* ═══ VIEWPORT ═══════════════════════════════════════════════ */
.sw-viewport {
  position: relative;
  height: var(--sw-img-h);
  min-height: var(--sw-img-h);
  max-height: var(--sw-img-h);
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden; background: #111;
  touch-action: none;
}
.sw-stack-wrap { position: absolute; inset: 0; transition: opacity .25s ease; }
.sw-stack-wrap.hidden { opacity: 0; pointer-events: none; }

.sw-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #111; z-index: 30;
}
.sw-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--sw-border); border-top-color: var(--sw-pink);
  animation: sw-spin .65s linear infinite;
}
@keyframes sw-spin { to { transform: rotate(360deg); } }
.sw-stack-empty {
position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    color: var(--sw-sub);
    font-size: 13px;
    gap: 8px;
    text-align: center;
    padding: 20px;
    background: var(--sw-surface);
}
.sw-stack-empty.show { display: flex; }

/* ── No-results variant ── */
.sw-empty-no-results { display:none; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:20px; }
.sw-stack-empty.show.sw-empty-is-noresults .sw-empty-default { display:none; }
.sw-stack-empty.show.sw-empty-is-noresults .sw-empty-no-results { display:flex; }
.sw-empty-nores-icon { font-size:48px; margin-bottom:4px; }
.sw-empty-nores-title { font-size:17px; font-weight:700; color:var(--sw-text); }
.sw-empty-nores-sub { font-size:13px; color:var(--sw-sub); line-height:1.5; }
.sw-empty-nores-filters { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.sw-empty-nores-tag { background:var(--sw-pink-soft); color:var(--sw-pink); font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; }

/* ── Filter panel result count badge ── */
.swfp-count-bar {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--sw-bg); border:1.5px solid var(--sw-border);
  border-radius:10px; padding:8px 12px; margin-bottom:10px;
  font-size:12px; font-family:var(--sw-font); color:var(--sw-sub);
  min-height:36px; box-sizing:border-box;
  transition:background .2s, border-color .2s;
  gap:8px;
  opacity:0;
}
.swfp-count-bar.has-count { border-color:var(--sw-pink); background:var(--sw-pink-soft); }
.swfp-count-num { font-weight:800; font-size:15px; color:var(--sw-pink); }
.swfp-count-label { font-size:11px; }
.swfp-count-spinner { width:14px; height:14px; border-radius:50%; border:2px solid var(--sw-border); border-top-color:var(--sw-pink); animation:sw-spin .6s linear infinite; flex-shrink:0; }
.sw-empty-gif {
 width: 120px;
    height: 200px;
    object-fit: none;
    display: block;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.sw-stack-empty strong { color: var(--sw-text); font-size: 16px; font-weight: 700; }
.sw-reload-btn {
  margin-top: 14px; padding: 10px 24px;
  background: var(--sw-pink); border: none; border-radius: 999px;
  color: #fff; font-family: var(--sw-font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.sw-reload-btn:hover { background: var(--sw-pink-deep); }

/* ── Card ─────────────────────────────────────────────────── */
.sw-card {
  position: absolute; inset: 0; overflow: hidden; cursor: grab;
  transform-origin: center bottom; will-change: transform;
  background: #111; user-select: none; touch-action: none;
}
.sw-card:active { cursor: grabbing; }
.sw-card.active   { z-index: 10; }
.sw-card.behind-1 { z-index: 1; }
.sw-card.behind-2 { z-index: 0; }

.sw-card.behind-1::before,
.sw-card.behind-2::before {
  content: ''; position: absolute; inset: 0; z-index: 6;
  pointer-events: none; transition: opacity .55s cubic-bezier(.22,.61,.36,1);
}
.sw-card.behind-1::before { background: rgba(0,0,0,.30); }
.sw-card.behind-2::before { background: rgba(0,0,0,.52); }

@keyframes fly-right { to { transform: translateX(160%) rotate(28deg); opacity: 0; } }
@keyframes fly-left  { to { transform: translateX(-160%) rotate(-28deg); opacity: 0; } }
.sw-card.is-flying-right { animation: fly-right .38s cubic-bezier(.55,0,1,.45) forwards; }
.sw-card.is-flying-left  { animation: fly-left  .38s cubic-bezier(.55,0,1,.45) forwards; }

.sw-card.behind-1 .sw-card-img { filter: blur(22px) saturate(.7) brightness(.72); }
.sw-card.active   .sw-card-img { filter: none; }
.sw-card.behind-1 .sw-card-body { filter: blur(12px); opacity: .6; transition: filter .7s ease-in, opacity .7s ease-in; }
.sw-card.active   .sw-card-body { filter: none; opacity: 1; }

.sw-card-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  transition: transform .4s ease, filter .7s ease-in;
}
.sw-card:hover .sw-card-img { transform: scale(1.02); }
.sw-card-img.no-photo { background: linear-gradient(135deg, #1a1a2e 0%, #2d1b3e 100%); }
.sw-card-img.no-photo::after {
  content: '📷'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; opacity: .15;
}

#sw-blur-veil {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #0d0a14;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease-in;
  border: 0px;
}
#sw-blur-veil.veil-on { transition: opacity 0s; opacity: 1; }

/* ══════════════════════════════════════════════════
   CARD BG PARALLAX — greyscale image bleeds behind stack
══════════════════════════════════════════════════ */
#sw-card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  filter: grayscale(100%);
  opacity: 0;
  transition: background-image .35s ease, opacity .45s ease;
  pointer-events: none;
}
#sw-card-bg.has-image { opacity: 0.30; }

/* ══════════════════════════════════════════════════
   CARD OVERLAY BUTTONS — Favourite (top-right) + Contact (bottom-right)
══════════════════════════════════════════════════ */
.sw-card-fav-btn {
  position: absolute;
  z-index: 8;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 2px solid white !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  backdrop-filter: blur(10px);
  transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), background .18s;
  opacity: 0.50;
}
.sw-card-fav-btn:hover { opacity: 1; transform: scale(1.12); color:red; }
.sw-card-fav-btn:active { transform: scale(.92); }

.sw-card-fav-btn {
  top: 10px;
  right: 10px;
  background: rgb(0 0 0 / 10%);
  color: #fff;
}
.sw-card-fav-btn.is-faved {
  background: rgb(255 24 25 / 76%);
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════
   CARD CONTACT BUTTON — static bottom-right overlay
══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   CARD DETAILS BUTTON — bottom-right premium pill
══════════════════════════════════════════════════ */
.sw-card-contact-btn {
  position: absolute;
  z-index: 10;
  bottom: 14px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px 0 11px;
  height: 34px;
  /* Rich glassy gradient matching the card's design language */
  background: linear-gradient(145deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.14) 40%,
    rgba(30,30,60,0.55)   100%);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.38);
  border-bottom-color: rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
  /* top sheen like .sw-btn::before but as box-shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),  /* top sheen */
    inset 0 -1px 0 rgba(0,0,0,0.12),       /* bottom depth */
    0 4px 16px rgba(0,0,0,0.32),            /* card drop shadow */
    0 1px 4px  rgba(0,0,0,0.18);
  transition:
    transform    .20s cubic-bezier(.34,1.56,.64,1),
    box-shadow   .18s ease,
    background   .18s ease,
    border-color .18s ease;
  user-select: none;
  white-space: nowrap;
}

/* Animated top-sheen sweep on hover */
.sw-card-contact-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0) 70%);
  background-size: 200% 100%;
  background-position: -100% 0;
  pointer-events: none;
  transition: background-position .45s ease;
}
.sw-card-contact-btn:hover::before {
  background-position: 200% 0;
}

.sw-card-contact-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(145deg,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.20) 40%,
    rgba(30,30,60,0.68)   100%);
  border-color: rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -1px 0 rgba(0,0,0,0.14),
    0 8px 24px rgba(0,0,0,0.42),
    0 2px 8px  rgba(0,0,0,0.24);
  color: #fff;
  text-decoration: none;
}
.sw-card-contact-btn:active {
  transform: scale(0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 2px 6px rgba(0,0,0,0.25);
}

.sw-card-contact-btn .sw-ccb-icon {
  font-size: 11px;
  opacity: 0.85;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.sw-card-contact-btn .sw-ccb-label {
  letter-spacing: 0.06em;
  line-height: 1;
}
/* Chevron arrow */
.sw-card-contact-btn .sw-ccb-arrow {
  margin-left: 2px;
  font-size: 9px;
  opacity: 0.70;
  transition: transform .20s cubic-bezier(.34,1.56,.64,1), opacity .18s;
  flex-shrink: 0;
}
.sw-card-contact-btn:hover .sw-ccb-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.sw-fav-panel-inner { padding: 16px 18px 20px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.sw-fav-list-wrap {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--sw-border) transparent;
  display: flex; flex-direction: column; gap: 8px; margin: 10px 0;
}
.sw-fav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--sw-bg); border: 1px solid var(--sw-border);
  cursor: pointer; text-decoration: none; color: var(--sw-text);
  transition: background .15s, box-shadow .15s;
  position: relative;
}
.sw-fav-item:hover { background: var(--sw-pink-soft); box-shadow: 0 2px 12px rgba(221,63,135,.15); }
.sw-fav-thumb {
  width: 46px; height: 46px; border-radius: 8px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: #2d1b3e;
}
.sw-fav-info { flex: 1; min-width: 0; }
.sw-fav-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-fav-meta  { font-size: 11px; color: var(--sw-sub); margin-top: 2px; }
.sw-fav-del {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--sw-border);
  color: var(--sw-sub); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.sw-fav-del:hover { background: var(--sw-red-bg); color: var(--sw-red); border-color: var(--sw-red); }
/* Inline confirm strip */
.sw-fav-confirm {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--sw-red-bg); border-top: 1px solid rgba(229,62,106,.15);
  font-size: 12px; color: var(--sw-red); font-weight: 600;
  animation: sw-fav-confirm-in .18s ease;
}
@keyframes sw-fav-confirm-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.sw-fav-confirm-yes {
  padding: 3px 12px; border-radius: 20px; border: none;
  background: var(--sw-red); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sw-fav-confirm-no {
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--sw-border);
  background: #fff; color: var(--sw-sub); font-size: 12px; cursor: pointer;
}
/* Disabled action buttons when no cards */
.sw-btn.sw-btn-dead {
  opacity: .28; pointer-events: none; cursor: default;
}
/* Heart idle animations — play randomly while cards exist */
@keyframes sw-heart-wobble  { 0%{transform:rotate(0)} 20%{transform:rotate(-8deg) scale(1.12)} 40%{transform:rotate(7deg) scale(1.08)} 60%{transform:rotate(-5deg) scale(1.05)} 80%{transform:rotate(3deg)} 100%{transform:rotate(0) scale(1)} }
@keyframes sw-heart-shimmer { 0%{filter:brightness(1)} 40%{filter:brightness(1.5) drop-shadow(0 0 8px #ff77cc)} 100%{filter:brightness(1)} }
@keyframes sw-heart-bounce  { 0%{transform:scale(1)} 25%{transform:scale(1.30)} 55%{transform:scale(.90)} 75%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes sw-heart-spark   { 0%{transform:scale(1) rotate(0)} 15%{transform:scale(1.32) rotate(-6deg)} 35%{transform:scale(.88) rotate(4deg)} 55%{transform:scale(1.15) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} }
.sw-heart-idle-wobble  { animation: sw-heart-wobble  550ms cubic-bezier(.34,1.56,.64,1); }
.sw-heart-idle-shimmer { animation: sw-heart-shimmer 700ms ease; }
.sw-heart-idle-bounce  { animation: sw-heart-bounce  500ms cubic-bezier(.34,1.56,.64,1); }
.sw-heart-idle-spark   { animation: sw-heart-spark   600ms cubic-bezier(.34,1.56,.64,1); }
.sw-fav-empty { text-align: center; padding: 40px 20px; color: var(--sw-sub); font-size: 13px; }
.sw-fav-empty .sw-fav-empty-icon { font-size: 40px; display: block; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════
   ANALYTICS PANEL
══════════════════════════════════════════════════ */
.sw-analytics-inner { padding: 16px 18px 16px; display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)); }

.sw-activity-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px;}
.sw-activity-tab{appearance:none;border:1px solid #dfe5ef;background:linear-gradient(180deg,#fff 0%,#f5f7fb 100%);color:#536074;border-radius:14px;padding:10px 14px;font:700 12px/1 var(--sw-font);box-shadow:0 6px 16px rgba(20,30,60,.06),inset 0 1px 0 rgba(255,255,255,.9);cursor:pointer;transition:all .18s ease;}
.sw-activity-tab:hover{border-color:#c8d2e2;color:#1f2a44;transform:translateY(-1px);}
.sw-activity-tab.active{background:linear-gradient(135deg,#f7fbff 0%,#eef6ff 55%,#f5f0ff 100%);border-color:#9fbdf3;color:#26446e;box-shadow:0 10px 24px rgba(61,126,245,.14), inset 0 1px 0 rgba(255,255,255,.95);}
.sw-activity-pages{position:relative;width:100%;box-sizing:border-box;}
.sw-activity-page{display:none;animation:swActivitySlide .24s ease;width:100%;box-sizing:border-box;min-width:0;}
.sw-activity-page.active{display:block;}
@keyframes swActivitySlide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.sw-activity-notice{margin:18px 0 18px;padding:12px 14px;border-radius:14px;border:1px solid #e4e9f2;background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);color:#687589;font-size:11px;line-height:1.55;box-shadow:0 8px 18px rgba(20,30,60,.04);}
.sw-activity-notice strong{color:#2a3342;}
.sw-comment-guest-lock .sw-comment-input{color:#9099aa;cursor:pointer;}
.sw-comment-guest-lock .sw-comment-send{opacity:.55;cursor:pointer;}
.sw-comment-guest-note{margin:0 0 10px;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,#fff 0%,#f8fafd 100%);border:1px solid #e3e8f1;color:#7d8797;font-size:11px;line-height:1.55;box-shadow:0 8px 18px rgba(20,30,60,.04);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.sw-comment-guest-note-text{flex:1;min-width:0;}
.sw-comment-guest-note strong{color:#25314a;}
.sw-comment-guest-note a{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,#f7fbff 0%,#eef6ff 55%,#f5f0ff 100%);border:1px solid #cfe0fb;color:#2f5d98;font-weight:800;text-decoration:none;box-shadow:0 6px 14px rgba(61,126,245,.10);}
.sw-comment-guest-note a:hover{border-color:#9fbdf3;color:#26446e;}
.sw-analytics-section { margin-bottom: 18px; border: 3px solid #ffc0cb42; padding: 10px 10px 14px 10px;border-radius: 12px; width:100%; box-sizing:border-box; min-width:0; clear: both; overflow: hidden; display: block; }
    
.sw-analytics-heading {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sw-sub); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
.sw-analytics-heading span { font-size: 15px; flex-shrink: 0; }
/* ReConsider — swipe through a saved set again */
.sw-reconsider-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0px 10px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  background: linear-gradient(135deg, #dd3fd8, #8642ff);
  color: #fff;
  font-family: var(--sw-font);
  box-shadow: 0 2px 8px rgb(95 95 95 / 28%);
  transition: transform .15s, filter .15s;
}
.sw-reconsider-btn:hover {/* transform: scale(1.06); */filter: brightness(1.1);}
.sw-reconsider-btn:active { }
.sw-analytics-list { display: flex; flex-direction: column; gap: 6px; }
.sw-analytics-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  background: var(--sw-bg); border: 1px solid var(--sw-border);
  cursor: pointer; text-decoration: none; color: var(--sw-text);
  transition: background .15s;
  font-size: 12px; font-weight: 600; position: relative;
}
.sw-analytics-item { cursor: default; }
.sw-analytics-item.preview-open { background: var(--sw-pink-soft); }
.sw-analytics-item-thumb {
  width: 38px; height: 38px; border-radius: 7px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: #2d1b3e;
}
.sw-analytics-item-title {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--sw-text); cursor: pointer; max-width:320px; font-size: 12px; font-weight: 600;
}
.sw-analytics-item:hover .sw-analytics-item-title { color: var(--sw-text); opacity: .75; }
.sw-analytics-item { cursor: pointer; } /* whole row is clickable */
a.sw-analytics-item-thumb:hover { opacity: 0.85; }
.sw-analytics-badge {
  font-size: 12px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
  user-select: none;
  min-width: 28px;
  text-align: center;
}
.sw-analytics-badge:hover {
  background: var(--sw-red-bg) !important; color: var(--sw-red) !important;
  transform: scale(1.15);
}
.sw-ab-like  { background: var(--sw-green-bg);  color: var(--sw-green); }
.sw-ab-dis   { background: var(--sw-red-bg);    color: var(--sw-red); }
.sw-ab-heart { background: var(--sw-pink-soft); color: var(--sw-pink); }
.sw-ab-remove {
  background: rgba(229,62,106,.12); color: rgba(229,62,106,.55);
  border: 1px solid rgba(229,62,106,.18); font-size: 11px; font-weight: 900;
  transition: background .15s, color .15s, transform .15s;
}
.sw-ab-remove:hover {
  background: var(--sw-red-bg) !important; color: var(--sw-red) !important;
  border-color: rgba(229,62,106,.4) !important; transform: scale(1.2);
}
/* Confirm strip for analytics delete */
.sw-analytics-confirm {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--sw-red-bg); border: 1px solid rgba(229,62,106,.2);
  border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--sw-red);
  animation: sw-fav-confirm-in .18s ease; flex-shrink: 0;
}
.sw-analytics-confirm > span { flex: 1; font-size: 11px; }
.sw-analytics-confirm-no  { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--sw-border); background: var(--sw-surface); color: var(--sw-sub); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sw-font); }
.sw-analytics-confirm-yes { padding: 3px 10px; border-radius: 999px; border: none; background: var(--sw-red); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sw-font); }
/* Confirm strip for analytics delete */
.sw-analytics-confirm {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--sw-red-bg); border: 1px solid rgba(229,62,106,.2);
  border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--sw-red);
  animation: sw-fav-confirm-in .18s ease;
}
.sw-analytics-confirm span { flex: 1; }
.sw-analytics-confirm-no  { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--sw-border); background: var(--sw-surface); color: var(--sw-sub); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sw-font); }
.sw-analytics-confirm-yes { padding: 3px 10px; border-radius: 999px; border: none; background: var(--sw-red); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sw-font); }
.sw-ab-review { background: var(--sw-amber-bg); color: var(--sw-amber); border-color: var(--sw-amber); }
.sw-analytics-empty { color: var(--sw-sub); font-size: 12px; padding: 8px 0; }
.sw-analytics-load-more {
  display: block; width: 100%; margin: 8px 0 0; padding: 8px 14px;
  background: var(--sw-surface); border: 1.5px dashed var(--sw-border);
  border-radius: 10px; color: var(--sw-sub); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  letter-spacing: .03em; box-sizing: border-box;
  clear: both; position: relative; z-index: 1;
}
.sw-analytics-load-more:hover {
  border-color: var(--sw-pink); color: var(--sw-pink); background: var(--sw-pink-soft);
}
.sw-analytics-clear-btn {
  margin-top: 14px; padding: 8px 16px; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--sw-font); font-size: 11px; font-weight: 700;
  background: var(--sw-red-bg); color: var(--sw-red);
  display: inline-block; box-sizing: border-box;
}
.sw-analytics-clear-btn:hover { background: var(--sw-red); color: #fff; }

/* ═══════════════════════════════════════════════════════
   MESSAGES SECTION in My Activity
═══════════════════════════════════════════════════════ */
.sw-msg-tab-strip {
  display: flex; gap: 0; margin-bottom: 12px;
  border: 1.5px solid var(--sw-border); border-radius: 12px; overflow: hidden;
}
.sw-msg-tab {
  flex: 1; padding: 8px 10px; background: var(--sw-bg);
  border: none; cursor: pointer; font-family: var(--sw-font);
  font-size: 12px; font-weight: 700; color: var(--sw-sub);
  transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sw-msg-tab:first-child { border-right: 1.5px solid var(--sw-border); }
.sw-msg-tab.active {
  background: var(--sw-pink-soft); color: var(--sw-pink);
}
.sw-msg-tab .sw-msg-tab-badge {
  background: var(--sw-pink); color: #fff;
  font-size: 9px; font-weight: 800; border-radius: 999px;
  padding: 1px 5px; min-width: 14px; text-align: center;
}
/* Message thread rows */
.sw-msg-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 8px; border-radius: 10px; cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid var(--sw-border);
}
.sw-msg-row:last-child { border-bottom: none; }
.sw-msg-row:hover { background: var(--sw-bg); }
.sw-msg-row.unread { background: var(--sw-pink-soft); }
.sw-msg-thumb {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: #ddd center/cover no-repeat;
}
.sw-msg-body { flex: 1; min-width: 0; }
.sw-msg-title {
  font-size: 12px; font-weight: 700; color: var(--sw-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-msg-preview {
  font-size: 11px; color: var(--sw-sub); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-msg-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px; flex-shrink: 0;
}
.sw-msg-time { font-size: 10px; color: var(--sw-sub); font-weight: 600; position: relative; cursor: default; }
.sw-msg-time[title]:hover::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: #1a1a2e; color: #fff; font-size: 10px; font-weight: 500;
  white-space: nowrap; padding: 4px 8px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 9999;
}
.sw-msg-time[title]:hover::before {
  content: ''; position: absolute; bottom: calc(100% + 1px); right: 10px;
  border: 5px solid transparent; border-top-color: #1a1a2e; pointer-events: none; z-index: 9999;
}
/* Time badge on activity / fav rows */
.sw-act-time {
  font-size: 9px; color: var(--sw-sub); font-weight: 600; white-space: nowrap;
  margin-left: auto; padding: 2px 6px; border-radius: 20px;
  background: rgba(107,107,128,.08); flex-shrink: 0;
  position: relative; cursor: default;
}
.sw-act-time[title]:hover::after {
  content: attr(title);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: #1a1a2e; color: #fff; font-size: 10px; font-weight: 500;
  white-space: nowrap; padding: 4px 8px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 9999;
}
.sw-act-time[title]:hover::before {
  content: ''; position: absolute; bottom: calc(100% + 1px); right: 10px;
  border: 5px solid transparent; border-top-color: #1a1a2e; pointer-events: none; z-index: 9999;
}
.sw-msg-unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sw-pink); flex-shrink: 0;
}
.sw-msg-sender {
  font-size: 11px; font-weight: 700; color: var(--sw-pink);
  margin-bottom: 2px;
}
.sw-msg-load-more {
  width: 100%; margin: 8px 0 0; padding: 8px 14px;
  background: var(--sw-surface); border: 1.5px dashed var(--sw-border);
  border-radius: 10px; color: var(--sw-sub); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--sw-font);
  transition: border-color .15s, color .15s;
}
.sw-msg-load-more:hover { border-color: var(--sw-pink); color: var(--sw-pink); }
.sw-msg-empty {
  font-size: 12px; color: var(--sw-sub); text-align: center;
  padding: 16px 0; line-height: 1.6;
}

/* ══════════════════════════════════════════════════
   INFO PANEL QUICK ACCESS BUTTONS — Favs + Analytics
══════════════════════════════════════════════════ */
.sw-dp-quick-btns {
  display: flex; gap: 6px; margin-top: 14px;
  border-top: 1px solid var(--sw-border); padding-top: 12px;
}
.sw-dp-quick-btn {
  flex: 1; padding: 9px 6px; border-radius: 12px; border: 1.5px solid var(--sw-border);
  background: var(--sw-bg); cursor: pointer; font-family: var(--sw-font);
  font-size: 11px; font-weight: 700; color: var(--sw-text);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap; min-width: 0;
}
.sw-dp-quick-btn:hover { border-color: var(--sw-pink); color: var(--sw-pink); background: var(--sw-pink-soft); }
.sw-dp-quick-btn i { font-size: 15px; flex-shrink: 0; }


/* Favs count badge on info button */
#sw-btn-info .sw-btn-count { background: var(--sw-amber); }

/* ══════════════════════════════════════════════════
   HOVER PREVIEW MODAL
══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   ACTIVITY PREVIEW MODAL — centred lightbox
══════════════════════════════════════════════════ */
#sw-preview-modal {
  position: absolute; inset: 0; z-index: 10050;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10,8,20,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--sw-radius);
}
#sw-preview-modal.show {
  display: flex;
}
.sw-preview-box {
  position: relative;
  background: var(--sw-surface);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.25);
  overflow: hidden;
  font-family: var(--sw-font);
  width: min(92vw, 90%);
  transform: scale(.94);
  opacity: 0;
  transition: transform .24s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
#sw-preview-modal.show .sw-preview-box {
  transform: scale(1); opacity: 1;
}
/* Close button — top right */
.sw-preview-close {
  position: absolute; top: 10px; right: 10px;
   position: absolute;
  
  width: 18px;
  height: 18px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background .15s;
}
.sw-preview-close:hover { background: rgb(255 0 84 / 85%); }
.sw-preview-img {
  width: 100%;
  height: 300px;
  background-size: cover;
  background-position: center top;
  background-color: #1a1a2e;
  pointer-events: all;
  cursor: pointer; /* iOS Safari requires cursor:pointer for click to fire on divs */
  -webkit-tap-highlight-color: rgba(255,255,255,.08);
}
.sw-preview-body { padding: 13px 14px 14px; }
.sw-preview-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--sw-text);
  line-height: 1.35;
  padding-right: 4px; /* breathing room */
}
.sw-preview-row {
  font-size: 14px;
  color: var(--sw-sub);
  margin-bottom: 8px;
  display: flex;
  gap: 5px;
}
.sw-preview-row strong { color: var(--sw-text); min-width: 14px; }
.sw-preview-pills {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px;
}
.sw-preview-pill {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.sw-ppill-incall  { background: var(--sw-pink-soft);  color: var(--sw-pink); }
.sw-ppill-outcall { background: var(--sw-teal-bg);    color: var(--sw-teal); }
.sw-ppill-price   { background: var(--sw-green-bg);   color: var(--sw-green); }
.sw-ppill-loc     { background: var(--sw-blue-bg);    color: var(--sw-blue); }
.sw-ppill-age     { background: var(--sw-pink-soft);  color: var(--sw-pink); font-weight: 700; }
.sw-ppill-nat     { background: rgba(130,80,220,.12); color: #8250dc; }
/* Visit button — small, right-aligned, below pills */
.sw-preview-footer {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--sw-border);
  flex-wrap: nowrap;
}
/* Icon pill buttons in preview footer — all same height via align-items:stretch */
.sw-preview-footer-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--sw-border);
  background: var(--sw-bg); cursor: pointer; font-family: var(--sw-font);
  font-size: 10px; font-weight: 700; color: var(--sw-sub);
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
  box-sizing: border-box; min-height: 60px; line-height: 1;
}
.sw-preview-footer-btn i { font-size: 20px; line-height: 1; display: block; }
.sw-preview-footer-btn:hover { border-color: var(--sw-pink); color: var(--sw-pink); background: var(--sw-pink-soft); }
.sw-preview-footer-btn.btn-contact { color: var(--sw-teal); border-color: rgba(11,191,160,.3); }
.sw-preview-footer-btn.btn-contact:hover { background: var(--sw-teal-bg); border-color: var(--sw-teal); }
.sw-preview-footer-btn.btn-visit { color: var(--sw-pink); border-color: rgba(221,63,135,.3); }
.sw-preview-footer-btn.btn-visit:hover { background: var(--sw-pink-soft); border-color: var(--sw-pink); }
.sw-preview-footer-btn.btn-share { color: var(--sw-amber); border-color: rgba(245,156,0,.3); }
.sw-preview-footer-btn.btn-share:hover { background: var(--sw-amber-bg); border-color: var(--sw-amber); }
.sw-preview-footer-btn.btn-msg { color: var(--sw-sub); }
.sw-preview-footer-btn.btn-msg:hover { background: var(--sw-pink-soft); border-color: var(--sw-pink); color: var(--sw-pink); }
.sw-preview-footer-btn.btn-msg.has-comments { color: var(--sw-teal); border-color: rgba(43,226,255,.4); position: relative; }
.sw-preview-footer-btn.btn-msg.has-comments::after {
  content: ''; position: absolute; inset: -3px; border-radius: 14px;
  border: 2px solid var(--sw-teal, #2be2ff);
  animation: sw-msg-pulse 1.8s ease-in-out infinite; pointer-events: none;
}

/* ── Image Viewer — lives inside #ds-swiper-panel ────────── */
#sw-img-viewer {
  position: absolute; inset: 0; z-index: 10060;
  background: #000;
  flex-direction: column;
  border-radius: var(--sw-radius);
  overflow: hidden;
  display: none; /* toggled to flex by JS, not CSS transition */
}
#sw-img-viewer.open { display: flex; }
/* Toolbar — Close button only, pinned top-right */
.sw-iv-toolbar {
  position: absolute; top: 10px; right: 10px;
  z-index: 10; display: flex; align-items: center;
  pointer-events: none;
}
.sw-iv-toolbar-group { display: flex; align-items: center; gap: 4px; pointer-events: all; }

.sw-iv-btn {
  width: 36px; height: 36px;
  background: #111; border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 6px; color: #fff; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s, border-color .12s;
}
.sw-iv-btn:hover  { background: #444; border-color: #fff; }
.sw-iv-btn:active { background: #555; }
.sw-iv-close {
  width: auto; padding: 0 14px; height: 36px;
  background: rgb(136 170 227 / 85%); border-color: rgba(255,100,130,.8);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  pointer-events: all;
}
.sw-iv-close:hover  { background: rgb(255 0 84 / 85%); border-color: #fff; }

/* Zoom label hidden by default (was between groups) */
.sw-iv-zoom-label {
  font-size: 10px; color: rgba(255,255,255,.65);
  min-width: 30px; text-align: center; font-family: var(--sw-font);
  flex-shrink: 0;
}

/* Bottom controls bar — absolute overlay over the image */
.sw-iv-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-evenly;
  padding: 10px 12px 12px;
  background: rgba(0,0,0,.75);
  pointer-events: all;
}
.sw-iv-controls .sw-iv-btn {
  width: 44px; height: 40px; font-size: 17px;
}
.sw-iv-stage {
  flex: 1; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
}
.sw-iv-stage.active { touch-action: none; cursor: grab; }
.sw-iv-stage.active:active { cursor: grabbing; }
.sw-iv-img {
  max-width: none; max-height: none;
  user-select: none; -webkit-user-select: none;
  pointer-events: none; display: block;
  transform-origin: center center;
  transition: transform .18s ease;
}
.sw-preview-img { cursor: zoom-in; }

/* ── Age-gate: blur + overlay on adult cards ──────────── */
.sw-card-img.sw-age-blurred {
  filter: blur(20px) brightness(.65) saturate(.4) !important;
  transform: scale(1.08);
  transition: none !important;
}
.sw-age-gate-overlay {
  position: absolute;
  inset: 0;
  z-index: 50; /* above contact btn (z-8), card-body (z-5), status pills (z-6) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  border-radius: inherit;
  margin-top: 33.333%;
  pointer-events: all; /* ensure clicks always land on desktop */
  -webkit-tap-highlight-color: transparent;
}
.sw-age-gate-badge {
  background: linear-gradient(135deg, #5d22b2, #875b95);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  padding: 20px 24px;
  border-radius: 14px;
  letter-spacing: .03em;
  box-shadow: 0 4px 20px rgba(0,0,0,.55);
  text-align: center;
  user-select: none;
}
.sw-age-gate-badge small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  opacity: .88;
  margin-top: 4px;
  text-transform: uppercase;
}
.sw-age-gate-btn {
  background: rgba(255,255,255,.92);
  color: #7a4ddc;
  border: none;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 18px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  letter-spacing: .03em;
  pointer-events: all;
  position: relative;
  z-index: 51;
}
/* When age-gated: disable fav overlay button */
.sw-card:has(.sw-age-gate-overlay) .sw-card-fav-btn {
  pointer-events: none;
  opacity: 0.25 !important;
  filter: grayscale(1);
}
.sw-card-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 40%,
    rgba(0,0,0,.65) 72%, rgba(0,0,0,.88) 100%
  );
}
.sw-card-contacted-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,168,107,.85); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  margin: -10px -10px 8px -10px; border-radius: 4px 4px 0 0;
  letter-spacing: .3px;
}
.sw-card-contacted-bar i { font-size: 13px; }
.sw-card-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 16px 16px; color: #fff; z-index: 5;
}
.sw-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sw-card-tag {
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; letter-spacing: .2px; backdrop-filter: blur(8px);
}
.sw-tag-cat  { background: rgba(61,126,245,.8); color: #fff; }
.sw-tag-loc  { background: rgba(0,0,0,.5); color: rgba(255,255,255,.92); }
.sw-tag-vid  { background: rgba(221,63,135,.9); color: #fff; cursor: pointer; }
.sw-tag-vid:hover { background: rgba(192,40,107,1); }
.sw-tag-new  { background: rgba(0,168,107,.9); color: #fff; }
.sw-tag-age  { background: rgba(255,77,166,.82); color: #fff; font-weight: 700; }
.sw-tag-nat  { background: rgba(130,80,220,.82); color: #fff; }

/* ══════════════════════════════════════════════════
   PREMIUM / HIGHLIGHTED pills
   — top-left overlay on the card photo
   — above title in detail panel
══════════════════════════════════════════════════ */
.sw-card-status-pills {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 6; pointer-events: none;
}
.sw-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sw-font); font-size: 10px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  white-space: nowrap;
}
.sw-pill-premium     { background: linear-gradient(45deg, #fb4889, #070dcd); }
.sw-pill-highlighted { background: linear-gradient(45deg, #fdc325, #ff4e0e); }
.sw-pill-sold        { background: linear-gradient(135deg,#444,#111); color:#fff !important; letter-spacing:.04em; }
.sw-pill-reserved    { background: linear-gradient(135deg,#b36000,#6b3800); color:#fff !important; letter-spacing:.04em; }
.sw-pill-pending     { background: linear-gradient(135deg,#1a6bcc,#0d3f80); color:#fff !important; letter-spacing:.04em; }
/* Greyscale card image when sold/reserved/pending */
.sw-card-img.sw-img-unavailable { filter: grayscale(100%); opacity: .72; }

/* Detail panel pills — above the title */
.sw-dp-status-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px;
}
.sw-card-price {
  font-size: 22px; font-weight: 800; color: #7fff7f; margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.sw-price-inline-tags { display: flex; gap: 5px; flex-wrap: wrap; }

.sw-card-rate-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
}

.sw-price-tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; letter-spacing: .2px; line-height: 1.4;
  backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 3px;
}
.sw-ptag-incall  { background: rgba(221,63,135,.88); color: #fff; }
.sw-ptag-outcall { background: rgba(11,191,160,.88);  color: #fff; }
.sw-ptag-trans   { background: rgba(61,126,245,.8);   color: #fff; font-size: 10px; }
.sw-ptag-cond    { background: rgba(0,0,0,.45);        color: rgba(255,255,255,.9); font-size: 10px; }

.sw-detail-price {
  font-size: 24px; font-weight: 800; color: var(--sw-green); margin-bottom: 12px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

.sw-dp-rate-tag {
  font-size: 14px; font-weight: 700; padding: 5px 14px;
  border-radius: 12px; display: inline-flex; align-items: center; gap: 5px;
}
.sw-dp-incall  { background: var(--sw-pink-soft);  color: var(--sw-pink); border: 1.5px solid #f3b0d1; }
.sw-dp-outcall { background: var(--sw-teal-bg);    color: var(--sw-teal); border: 1.5px solid #90e0d0; }

.sw-dp-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
}
.sw-dp-trans     { background: var(--sw-blue-bg);   color: var(--sw-blue); }
.sw-dp-cond      { background: var(--sw-amber-bg);  color: var(--sw-amber); }
.sw-dp-incall-sm { background: var(--sw-pink-soft); color: var(--sw-pink); }
.sw-dp-outcall-sm{ background: var(--sw-teal-bg);   color: var(--sw-teal); }
.sw-dp-age       { background: var(--sw-pink-soft);  color: var(--sw-pink); font-weight: 700; }
.sw-dp-nat       { background: rgba(130,80,220,.12); color: #8250dc; font-weight: 600; }
.sw-card-title {
  font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 4px;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  /* Not interactive on card — use info panel to navigate */
  cursor: default; pointer-events: none;
}
.sw-card-meta { font-size: 20px; color: rgba(255,255,255,.7); display: flex; gap: 12px; flex-wrap: wrap; margin-top:10px !important; }
.sw-card-meta span { display: flex; align-items: center; gap: 3px; pointer-events: none; }

/* ── Tags: display-only on front card, no click navigation ── */
.sw-card-tag  { pointer-events: none; cursor: default; }
.sw-tag-vid   { pointer-events: auto !important; cursor: pointer; } /* video tag still opens video */

/* ── Swipe shield: transparent overlay covering the body area so nothing
   inside sw-card-body can accidentally capture a swipe gesture on mobile.
   Sits above the body content but below the fav/contact buttons (z-index 9). ── */
.sw-card-swipe-shield {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none; /* passthrough on desktop — drag is handled by the card itself */
  touch-action: none;   /* mobile: prevents text-selection and tap delays within body */
}

.sw-ind {
  position: absolute; top: 24px;
  padding: 7px 16px; border-radius: 10px;
  font-family: var(--sw-font); font-size: 22px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  opacity: 0; transition: opacity .08s;
  z-index: 20; pointer-events: none; border: 3px solid;
}
.sw-ind-like { left: 16px; color: #fff; background: rgba(0,168,107,.88); border-color: rgba(0,168,107,.95); transform: rotate(-12deg); }
.sw-ind-nope { right: 16px; color: #fff; background: rgba(229,62,106,.88); border-color: rgba(229,62,106,.95); transform: rotate(12deg); }

.sw-photo-dots {
  position: absolute; top: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px; z-index: 6;
}
.sw-photo-dot {
  height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.35); flex: 1; max-width: 40px; transition: background .2s;
}
.sw-photo-dot.active { background: rgba(255,255,255,.95); }

/* ═══ SLIDE PANELS ═══════════════════════════════════════════ */
.sw-slide-panel {
  position: absolute;
  inset: 0;
  background: var(--sw-surface);
  z-index: 40;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  pointer-events: auto;
  box-shadow: 1px 1px 1px 3px white;
}
.sw-slide-panel.open { transform: translateX(0); }

/* ── Activity panel: scroll inside inner, not the panel itself ── */
#sw-analytics-panel {
  overflow: hidden;         /* kill the panel-level scroll */
  display: flex;
  flex-direction: column;
}

/* ── Detail panel: fixed action bar at bottom ── */
#sw-detail-panel {
  overflow: hidden;         /* kill the panel-level scroll */
  display: flex;
  flex-direction: column;
}
#sw-detail-panel .sw-detail-panel {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 0;    /* remove bottom pad — footer provides it */
  position: relative;
  /* Hide the links div inside the scrollable body; we move it outside */
}
#sw-detail-panel .sw-detail-links {
  display: none !important; /* links bar moved to fixed footer below */
}
/* Fixed action footer */
#sw-dp-action-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 20px 16px;
  background: var(--sw-surface);
  border-top: 1px solid var(--sw-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
  position: relative;
  z-index: 2;
}
#sw-dp-action-footer .sw-detail-link {
  flex: 1;
}
.sw-detail-link.sw-dl-review{
  flex: 0 0 auto !important;
  min-width: 112px;
  margin-left: auto;
}

.sw-detail-panel { padding: 18px 20px 20px; position: relative; }

/* ── Detail panel backdrop image ─────────────────────────── */
#sw-dp-backdrop {
 position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--sw-radius) var(--sw-radius) 0 0;
  margin-left: 62%;
  border-radius: 0;
}
#sw-dp-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--sw-dp-bg, none);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 50% top;
  filter: grayscale(100%);
  opacity: 0.3;
}
/* Fade bottom edge into panel background */
#sw-dp-backdrop::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to bottom, transparent 0%, var(--sw-surface) 100%);
}
/* All panel content sits above the backdrop */
.sw-detail-panel > * { position: relative; z-index: 1; }
.sw-detail-panel > #sw-dp-backdrop { position: absolute; z-index: 0; }
.sw-panel-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 6px; }
.sw-panel-title {font-size: 15px;font-weight: 700;color: var(--sw-text);flex: 1;min-width: 0;padding-right: 10px;line-height: 1.3;MAX-WIDTH: 80%;}
/* Pills + title stacking wrapper — sits inside the header before the close button */
.sw-dp-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; padding-right: 10px; }
.sw-dp-status-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.sw-panel-close {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--sw-bg);
  border: 1.5px solid var(--sw-border);
  cursor: pointer;
  color: var(--sw-sub);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  padding: 16px;
}
.sw-panel-close:hover { background: rgb(255 0 84 / 85%); color: var(--sw-red); border-color: var(--sw-red); }
.sw-detail-price { font-size: 24px; font-weight: 800; color: var(--sw-green); margin-bottom: 12px; }
.sw-detail-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: flex-start; }
.sw-detail-label { font-size: 10px; color: var(--sw-sub); min-width: 68px; padding-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.sw-detail-val { font-size: 13px; color: var(--sw-text); flex: 1; line-height: 1.5; }
.sw-detail-desc { font-size: 12px; color: var(--sw-sub); line-height: 1.65; margin: 10px 0; border-top: 1px solid var(--sw-border); padding-top: 10px; }
.sw-detail-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--sw-border); padding-top: 12px; }
.sw-detail-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 18px; border-radius: 12px; max-width:max-content;
  font-family: var(--sw-font); font-size: 12px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .15s, transform .15s; color: #fff;
}
.sw-detail-link:hover { transform: translateY(-1px); }
.sw-dl-view  { background: var(--sw-pink); }    .sw-dl-view:hover  { background: var(--sw-pink-deep); }
.sw-dl-wa    { background: #1aad4a; }           .sw-dl-wa:hover    { background: #107d35; color:white !important;}
.sw-dl-call  { background: var(--sw-teal); }    .sw-dl-call:hover  { background: #089480; color:white !important;}
.sw-dl-msg   { background: var(--sw-blue); }    .sw-dl-msg:hover   { background: #2b5fc9; color:white !important;}
.sw-dl-sms   { background: var(--sw-blue); }    .sw-dl-sms:hover   { background: #2b5fc9; color:white !important;}
.sw-dl-video { background: linear-gradient(135deg,#cc2244,#ff4466); } .sw-dl-video:hover { background: #991133; color:white !important;}
.sw-dl-contact { background: var(--sw-teal); }  .sw-dl-contact:hover { background: #089480; color:white !important;}

/* ── Front panel Activity / Share strip ── */
.sw-front-strip {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  padding: 8px 16px 10px;
  background: linear-gradient(180deg, #f0f0f6 0%, #ffffff 100%);
  border-top: 1px solid var(--sw-border);
  flex-shrink: 0;
}
.sw-strip-btn {
  flex: 1; max-width: 160px;
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--sw-border);
  background: var(--sw-bg); cursor: pointer;
  font-family: var(--sw-font); font-size: 12px; font-weight: 700; color: var(--sw-sub);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.sw-strip-btn:hover { border-color: var(--sw-pink); color: var(--sw-pink); background: var(--sw-pink-soft); }
.sw-strip-btn i { font-size: 14px; flex-shrink: 0; }
@media (max-width: 540px) {
  .sw-front-strip {
    padding: 5px 10px 6px; gap: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
    flex-shrink: 0;
  }
  .sw-strip-btn { font-size: 11px; padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════
   CONTACT PANEL — redesigned with gradient hero
══════════════════════════════════════════════════ */
.sw-contact-panel { padding: 0 0 env(safe-area-inset-bottom, 0px); display: flex; flex-direction: column; min-height: 100%; background: var(--sw-bg); box-sizing: border-box; }

/* ── Hero ── */
.sw-contact-hero {
  position: relative;
  padding: 18px 18px 0;
  background: var(--sw-surface);
  border-bottom: 1px solid var(--sw-border);
  overflow: visible;
  flex-shrink: 0;
}
.sw-contact-hero::before { display: none; }
.sw-contact-hero::after  { display: none; }

.sw-contact-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 0; position: relative; z-index: 1;
}
.sw-contact-hero-meta {
  flex: 1; min-width: 0; padding-right: 10px;
}
.sw-contact-hero-eyebrow {
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sw-pink);
  margin-bottom: 5px; opacity: 0.9;
}
.sw-contact-hero-title {
  font-size: 15px; font-weight: 800; color: var(--sw-text); line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sw-contact-hero-details {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 8px; position: relative; z-index: 1;
}
.sw-contact-hero-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--sw-bg); border: 1px solid var(--sw-border);
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; color: var(--sw-sub);
  letter-spacing: .01em;
}
.sw-contact-hero-pill i { font-size: 11px; color: var(--sw-pink); opacity: 1; }
.sw-contact-hero-price-pill {
  background: linear-gradient(135deg, rgba(221,63,135,.12), rgba(194,32,112,.08));
  border-color: rgba(221,63,135,.3);
  color: var(--sw-pink-deep);
  font-weight: 800;
}

.sw-contact-hero-close {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--sw-bg); border: 1px solid var(--sw-border);
  color: var(--sw-sub); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
  position: relative; z-index: 2; margin-top: 2px;
}
.sw-contact-hero-close:hover { background: var(--sw-pink-soft); border-color: rgba(221,63,135,.3); color: var(--sw-pink); }

/* Phone strip — dark contrast band */
.sw-contact-phone-strip {
  position: relative; z-index: 1;
  margin: 8px -18px 0;
  padding: 12px 18px;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f1322 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sw-contact-phone-badge {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: .01em;
  transition: color .15s;
}
.sw-contact-phone-badge i { font-size: 18px; color: var(--sw-pink); flex-shrink: 0; }
.sw-contact-phone-badge:hover { color: #ffd0e8; }
.sw-contact-phone-tap-hint {
  font-size: 11px; color: rgba(255,255,255,.4); font-weight: 500; white-space: nowrap;
}
.sw-contact-no-phone {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.45); font-size: 12px; font-weight: 600;
}

/* ── Action list ── */
.sw-contact-body-inner {
  flex: 1; overflow-y: auto; background: var(--sw-bg);
  padding: 12px 14px 16px;
}
.sw-contact-body-inner::before { display: none; }

/* ══ MESSAGE HEADER EDITOR ══════════════════════════════════ */
.sw-msg-header-editor {
  background: #fff;
  border: 1.5px solid var(--sw-border);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.sw-msg-header-editor-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--sw-sub);
  user-select: none;
}
.sw-msg-header-editor-toggle i { font-size: 16px; transition: transform .2s; }
.sw-msg-header-editor.open .sw-msg-header-editor-toggle i { transform: rotate(180deg); }
.sw-msg-header-editor-body { display: none; padding: 0 14px 14px; }
.sw-msg-header-editor.open .sw-msg-header-editor-body { display: block; }
.sw-msg-header-field { margin-bottom: 8px; }
.sw-msg-header-field label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--sw-sub); margin-bottom: 4px; letter-spacing: .04em;
}
.sw-msg-header-field textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--sw-border); border-radius: 9px;
  padding: 8px 10px; font-size: 13px; font-family: var(--sw-font);
  color: var(--sw-text); resize: vertical; min-height: 52px;
  outline: none; transition: border-color .18s;
}
.sw-msg-header-field textarea:focus { border-color: var(--sw-pink); }
.sw-msg-header-reset {
  background: none; border: 1.5px solid var(--sw-border); border-radius: 8px;
  padding: 5px 12px; font-size: 12px; color: var(--sw-sub); cursor: pointer;
  font-family: var(--sw-font); transition: all .18s; margin-top: 4px; margin-bottom:14px;
}
.sw-msg-header-reset:hover { border-color: var(--sw-pink); color: var(--sw-pink); }
/* ══════════════════════════════════════════════════════════ */


.sw-contact-section-label {
  font-size: 9px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sw-sub);
  margin-bottom: 7px; padding-left: 2px; opacity: .6;
}

.sw-contact-actions { display: flex; flex-direction: column; gap: 6px; }

.sw-contact-action-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px;
  background: var(--sw-surface);
  border: 2px solid #fff;
  border-radius: 12px;
  cursor: pointer; text-decoration: none;
  transition: border-color .14s, box-shadow .14s;
  position: relative; overflow: hidden;
}
.sw-contact-action-row::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.8) 0%, transparent 60%);
  pointer-events: none;
}
.sw-contact-action-row:hover {
  border-color: var(--sw-pink);
  box-shadow: 0 2px 10px rgba(221,63,135,.15);
}
.sw-contact-action-row:active { opacity: .88; }

.sw-car-icon-wrap {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.sw-car-text { flex: 1; min-width: 0; }
.sw-car-label {
  font-size: 13px; font-weight: 800; color: var(--sw-text); line-height: 1.2;
}
.sw-car-sub {
  font-size: 11px; color: #6b6b80; font-weight: 500; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-car-chevron {
  font-size: 17px; color: #c0c0cc; flex-shrink: 0;
  transition: color .14s;
}
.sw-contact-action-row:hover .sw-car-chevron { color: var(--sw-pink); }

/* Action icon themes */
.sw-car-wa   .sw-car-icon-wrap { background: #d4f7e4; color: #128c3e; }
.sw-car-wa   .sw-car-label     { color: #0e6b30; }
.sw-car-sms  .sw-car-icon-wrap { background: #ddeaff; color: #1a4db8; }
.sw-car-sms  .sw-car-label     { color: #163d9a; }
.sw-car-call .sw-car-icon-wrap { background: #ccf5ee; color: #067060; }
.sw-car-call .sw-car-label     { color: #055a4d; }
.sw-car-msg  .sw-car-icon-wrap { background: #fce0ee; color: var(--sw-pink-deep); }
.sw-car-msg  .sw-car-label     { color: var(--sw-pink-deep); }
.sw-car-email .sw-car-icon-wrap{ background: #ffefc0; color: #956200; }
.sw-car-email .sw-car-label    { color: #7a5000; }

.sw-contact-divider {
  height: 1px; background: var(--sw-border);
  margin: 14px 0;
}
.sw-no-phone-msg {
  text-align: center; padding: 24px 16px 16px; color: var(--sw-sub);
}
.sw-cc-chat {
  background: linear-gradient(155deg,#e0d8ff,#c8b8ff);
  border-color: #8a6af8; color: #3a1a9a;
  box-shadow: 0 6px 18px rgba(138,106,248,.2);
}

.sw-no-phone-msg { text-align: center; padding: 26px 20px 10px; color: var(--sw-sub); font-size: 13px; }
.sw-no-phone-msg .sw-npi { font-size: 40px; display: block; margin-bottom: 10px; }

.sw-message-panel { padding: 10px 20px max(20px, env(safe-area-inset-bottom, 20px)); display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.sw-comment-list-wrap {
  flex: 1; overflow-y: auto; margin: 12px 0; display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--sw-border) transparent;
}
.sw-rating-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:1px solid var(--sw-line);gap:10px;flex-wrap:wrap;}
.sw-stars-input{display:flex;gap:5px;align-items:center;}
.sw-star{font-size:28px;cursor:pointer;transition:transform .1s,color .1s;color:#ccc;user-select:none;line-height:1;}
.sw-star.lit{color:#f5c518;}
.sw-star.hover{color:#f5c518;transform:scale(1.15);}
.sw-star.locked{cursor:default;}
.sw-rating-right{text-align:right;min-width:90px;}
.sw-rating-right strong{display:block;font-size:18px;font-weight:800;color:var(--sw-text);}
.sw-rating-right small{font-size:11px;color:#8b93a5;}
.sw-verdict{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;margin-top:2px;}
.sw-verdict.v5,.sw-verdict.v4{background:rgba(0,200,100,.15);color:#00c864;}
.sw-verdict.v3{background:rgba(80,180,255,.15);color:#4ea6e8;}
.sw-verdict.v2{background:rgba(245,166,35,.15);color:#e09a10;}
.sw-verdict.v1{background:rgba(255,80,80,.15);color:#e05050;}
.sw-already-rated{font-size:11px;color:var(--sw-teal);padding:4px 14px 0;display:flex;align-items:center;gap:5px;}
.sw-comment-limit{font-size:11px;color:#8b93a5;padding:4px 14px;text-align:center;}
/* per-comment star display */
.sw-cmt-stars{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle;}
.sw-cmt-star{font-size:12px;color:#ccc;}
.sw-cmt-star.lit{color:#f5c518;}
/* card rating badge */
/* Rate badge + reviewed label sit together top-left as a flex row */
.sw-card-rbadge-wrap {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: flex; align-items: center; gap: 5px;
}
.sw-card-rbadge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  border-radius: 8px; padding: 3px 7px;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sw-card-rbadge i { color: #f5c518; font-size: 13px; }
.sw-card-reviewed-label {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.50);
  border-radius: 999px; padding: 3px 8px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  flex-shrink: 0;
}
/* detail panel rating */
.sw-dp-rating{display:flex;align-items:center;gap:6px;padding:0;flex-wrap:wrap;line-height:1;}
.sw-dp-rating .sw-dp-star{font-size:18px;color:#ccc;}
.sw-dp-rating .sw-dp-star.lit{color:#f5c518;}
.sw-dp-rating .sw-dp-num{font-size:16px;font-weight:800;color:var(--sw-text);}
.sw-dp-rating .sw-dp-cnt{font-size:11px;color:#8b93a5;}
/* Username editor */
.sw-cmt-name-wrap{display:inline-flex;align-items:center;gap:5px;}
.sw-cmt-name{cursor:pointer;color:var(--sw-pink);font-weight:700;border-bottom:1px dashed rgba(221,63,135,.3);transition:border-color .15s;}
.sw-cmt-name:hover{border-bottom-color:var(--sw-pink);}
.sw-rename-btn{font-size:10px;color:var(--sw-sub);background:none;border:none;cursor:pointer;padding:1px 5px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;transition:background .15s,color .15s;}
/* Comment item — needs relative positioning for the action bar */
.sw-comment-item {
  background: var(--sw-bg); border-radius: 10px;
  padding: 8px 12px 36px;
  font-size: 12px; color: var(--sw-text); line-height: 1.5;
  border: 1px solid var(--sw-border);
  position: relative;
}
/* Delete — square with ✕, top-right */
.sw-comment-del {
  position: absolute; top: 7px; right: 8px;
  width: 22px; height: 22px; border-radius: 5px;
  border: 1.5px solid var(--sw-border); background: var(--sw-surface);
  color: var(--sw-sub); font-size: 12px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s, color .15s, border-color .15s;
  line-height: 1; padding: 0; flex-shrink: 0;
}
.sw-comment-item:hover .sw-comment-del { opacity: 1; }
.sw-comment-del:hover { background: var(--sw-red-bg); color: var(--sw-red); border-color: var(--sw-red); }
/* Edit + Ban — absolute bottom-right row */
.sw-cmt-action-bar {
  position: absolute;
  bottom: 8px; right: 8px;
  display: flex; align-items: center; gap: 5px;
}
.sw-comment-edit-btn{font-size:10px;color:var(--sw-teal);background:rgba(43,226,255,.08);border:1px solid rgba(43,226,255,.25);cursor:pointer;padding:2px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;transition:background .15s, color .15s;}
.sw-comment-edit-btn:hover{background:rgba(43,226,255,.22);}
.sw-rename-btn:hover{background:var(--sw-pink-soft);color:var(--sw-pink);}
.sw-name-edit-row{display:flex;gap:6px;align-items:center;margin:4px 0;}
.sw-name-edit-input{flex:1;border:1px solid var(--sw-line);border-radius:6px;padding:4px 8px;font-size:13px;background:var(--sw-card-bg);color:var(--sw-text);outline:none;}
.sw-name-edit-input:focus{border-color:var(--sw-pink);}
.sw-name-save-btn{background:var(--sw-pink);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-weight:700;}
.sw-name-cancel-btn{background:var(--sw-line);color:var(--sw-text);border:none;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;}
.sw-comment-item strong { color: var(--sw-pink); font-weight: 600; }
.sw-comment-time { font-size: 10px; color: var(--sw-sub); margin-top: 2px; }
/* Confirm strip for comment delete */
.sw-comment-del-confirm {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--sw-red-bg); border: 1px solid rgba(229,62,106,.2);
  border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--sw-red);
  animation: sw-fav-confirm-in .18s ease;
}
.sw-comment-del-confirm > span { flex: 1; }
.sw-comment-del-no  { padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--sw-border); background: var(--sw-surface); color: var(--sw-sub); font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sw-font); }
.sw-comment-del-yes { padding: 3px 10px; border-radius: 999px; border: none; background: var(--sw-red); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; font-family: var(--sw-font); }
.sw-comment-item.sw-cmt-deleting { opacity: 0; transform: translateX(20px); transition: opacity .2s, transform .2s; }
.sw-inline-edit{margin-top:8px;padding:10px 11px;border-radius:14px;background:linear-gradient(180deg,#fff 0%,#fafbfd 100%);border:1px solid #e3e8f1;}
.sw-comment-item:has(.sw-inline-edit){min-height:265px;padding-bottom:12px;}
.sw-inline-edit-stars{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.sw-inline-edit-stars .sw-inline-label{font-size:11px;color:#8b93a5;margin-right:4px;font-weight:700;}
.sw-inline-edit-star{font-size:22px;cursor:pointer;color:#ccc;line-height:1;}
.sw-inline-edit-text{width:100%;min-height:52px;resize:none;font-size:13px;line-height:1.45;padding:10px 12px;border-radius:12px;border:1px solid #dfe5ef;background:#fff;color:var(--sw-text);font-family:var(--sw-font);box-sizing:border-box;}
.sw-inline-edit-text:focus{outline:none;border-color:#cfa3d6;box-shadow:0 0 0 3px rgba(221,63,135,.08);}
.sw-inline-edit-actions{display:flex;gap:8px;justify-content:flex-start;align-items:center;margin-top:8px;}
.sw-comment-input-row {
  display: flex; gap: 8px; align-items: center;
  background: var(--sw-bg); border-radius: 14px; border: 1.5px solid var(--sw-border);
  padding: 4px 4px 4px 12px; flex-shrink: 0; transition: border-color .15s;
}
.sw-comment-input-row:focus-within { border-color: var(--sw-pink); }
.sw-comment-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--sw-text); font-family: var(--sw-font); font-size: 13px; padding: 6px 0;
}
.sw-comment-input::placeholder { color: var(--sw-sub); }
.sw-comment-send {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--sw-pink); border: none; cursor: pointer; color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0;
}
.sw-comment-send:hover { background: var(--sw-pink-deep); }
.sw-comment-send:disabled { opacity: .4; }

/* ── Comment char counter ────────────────────────────────── */
.sw-comment-charcount {
  font-size: 10px; font-weight: 700; color: #bbb;
  text-align: right; padding: 0 6px 4px;
  transition: color .15s, opacity .15s ease, visibility .15s ease; font-family: var(--sw-font);
}
.sw-comment-charcount.is-hidden { opacity: 0; visibility: hidden; }
.sw-comment-charcount.warn  { color: var(--sw-amber); }
.sw-comment-charcount.limit { color: var(--sw-red); }

/* ═══════════════════════════════════════════════════════
   WARNING / BAN MODAL
═══════════════════════════════════════════════════════ */
#sw-warn-modal {
  position: fixed; inset: 0; z-index: 10030;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sw-font);
}
.sw-warn-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
}
.sw-warn-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 22px;
  padding: 32px 26px 24px;
  width: min(380px, calc(100vw - 32px));
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  animation: sw-sm-in .32s cubic-bezier(.22,.61,.36,1) both;
}
.sw-warn-card.is-ban { border: 3px solid var(--sw-red); }
.sw-warn-icon  { font-size: 44px; margin-bottom: 10px; line-height: 1; }
.sw-warn-title {
  font-size: 19px; font-weight: 800; color: var(--sw-text);
  margin: 0 0 8px; letter-spacing: -.02em;
}
.sw-warn-body  {
  font-size: 13px; color: var(--sw-sub); line-height: 1.55;
  margin: 0 0 18px;
}
.sw-warn-timer {
  background: var(--sw-red-bg); border: 1.5px solid rgba(229,62,106,.25);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
}
.sw-warn-timer-label {
  display: block; font-size: 11px; font-weight: 700; color: var(--sw-red);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em;
}
.sw-warn-countdown {
  font-size: 28px; font-weight: 900; color: var(--sw-red);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sw-warn-btn {
  width: 100%; padding: 13px;
  background: #f4a7c3; border: none; border-radius: 14px;
  color: #fff; font-family: var(--sw-font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .18s, color .18s;
}
.sw-warn-btn:hover { background: #111; color: #fff; }
.sw-warn-card.is-ban .sw-warn-btn { background: var(--sw-red); }
.sw-warn-card.is-ban .sw-warn-btn:hover { background: #111; color: #fff; }
/* Banned state on the comment input row */
.sw-comment-input-row.sw-banned {
  opacity: .5; pointer-events: none;
  background: var(--sw-red-bg); border-color: rgba(229,62,106,.3);
}
.sw-banned-msg {
  font-size: 11px; font-weight: 700; color: var(--sw-red);
  text-align: center; padding: 6px 8px 2px;
}

/* Reviews I Received — login prompt */
.sw-rrec-login {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px; text-align: center; gap: 10px;
}
.sw-rrec-login-icon { font-size: 32px; line-height: 1; }
.sw-rrec-login-text { font-size: 13px; color: var(--sw-sub); margin: 0; line-height: 1.5; }
.sw-rrec-login-btn {
  display: inline-block; padding: 10px 22px;
  background: var(--sw-pink); color: #fff;
  border-radius: 999px; font-size: 13px; font-weight: 700;
  font-family: var(--sw-font); text-decoration: none;
  transition: background .15s;
}
.sw-rrec-login-btn:hover { background: var(--sw-pink-deep); color: #fff; }
/* "💬 Reviews" button on each received-review row */
.sw-rrec-view-btn {
  margin-top: 5px; padding: 4px 10px;
  background: var(--sw-pink-soft); color: var(--sw-pink);
  border: 1.5px solid var(--sw-pink); border-radius: 999px;
  font-size: 10px; font-weight: 700; font-family: var(--sw-font);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.sw-rrec-view-btn:hover { background: var(--sw-pink); color: #fff; }
/* The bar sits just below the input area, hidden by default.
   When user types it slides up to sit above the input.
   After 5s idle it slides back down. Gone after send. */
.sw-emoji-bar {
  display: flex; gap: 2px; align-items: center;
  padding: 5px 6px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--sw-border);
  -webkit-overflow-scrolling: touch;
  /* Hidden: collapsed below input, zero height, invisible */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: max-height .28s cubic-bezier(.22,.61,.36,1),
              opacity     .22s ease,
              transform   .28s cubic-bezier(.22,.61,.36,1);
}
.sw-emoji-bar.sw-ej-visible {
  max-height: 48px;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  overflow-x: auto;
  overflow-y: hidden;
}
.sw-emoji-bar::-webkit-scrollbar { display: none; }
.sw-ej {
  font-size: 22px; line-height: 1;
  cursor: pointer; user-select: none;
  flex-shrink: 0;
  padding: 4px 5px;
  border-radius: 8px;
  transition: transform .12s, background .12s;
  display: inline-block;
}
.sw-ej:hover  { background: var(--sw-pink-soft); transform: scale(1.25); }
.sw-ej:active { transform: scale(.9); }

/* ── Owner BAN button on comments ────────────────────────── */
.sw-cmt-ban-btn {
  font-size: 10px; font-weight: 700; color: var(--sw-red);
  background: none; border: 1px solid rgba(229,62,106,.3);
  border-radius: 999px; padding: 2px 8px; cursor: pointer;
  font-family: var(--sw-font);
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
.sw-cmt-ban-btn:hover { background: var(--sw-red); color: #fff; border-color: var(--sw-red); }

/* ── Owner ban modal ─────────────────────────────────────── */
#sw-oban-modal {
  position: fixed; inset: 0; z-index: 10025;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sw-font);
}
.sw-oban-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.58); backdrop-filter: blur(8px);
}
.sw-oban-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: 22px;
  padding: 28px 24px 22px;
  width: min(400px, calc(100vw - 32px));
  box-shadow: 0 24px 80px rgba(0,0,0,.30);
  animation: sw-sm-in .32s cubic-bezier(.22,.61,.36,1) both;
  border: 2px solid rgba(229,62,106,.18);
}
.sw-oban-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 18px; color: #bbb;
  cursor: pointer; padding: 4px; line-height: 1;
}
.sw-oban-close:hover { color: var(--sw-text); }
.sw-oban-icon  { font-size: 36px; text-align: center; margin-bottom: 8px; }
.sw-oban-title {
  font-size: 17px; font-weight: 800; color: var(--sw-text);
  margin: 0 0 4px; text-align: center; letter-spacing: -.02em;
}
.sw-oban-sub {
  font-size: 12px; color: var(--sw-sub); text-align: center;
  margin: 0 0 18px; line-height: 1.5;
}
.sw-oban-reviewer {
  font-size: 12px; font-weight: 700; color: var(--sw-pink);
  text-align: center; margin-bottom: 16px;
  background: var(--sw-pink-soft); border-radius: 8px; padding: 6px 12px;
}
/* Duration options */
.sw-oban-opts {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 14px;
}
.sw-oban-opt {
  padding: 10px 6px; border-radius: 12px;
  border: 2px solid var(--sw-border);
  background: var(--sw-bg); text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
  font-family: var(--sw-font);
}
.sw-oban-opt:hover { border-color: var(--sw-red); background: var(--sw-red-bg); }
.sw-oban-opt.selected { border-color: var(--sw-red); background: var(--sw-red-bg); }
.sw-oban-opt-label { font-size: 14px; font-weight: 800; color: var(--sw-text); display: block; }
.sw-oban-opt-sub   { font-size: 10px; color: var(--sw-sub); margin-top: 2px; display: block; }
/* Permanent option — full width, different style */
.sw-oban-perm {
  width: 100%; padding: 11px;
  background: var(--sw-bg); border: 2px solid var(--sw-border);
  border-radius: 12px; text-align: center; cursor: pointer;
  font-family: var(--sw-font); font-size: 13px; font-weight: 700;
  color: var(--sw-sub); margin-bottom: 14px;
  transition: border-color .15s, background .15s, color .15s;
}
.sw-oban-perm:hover, .sw-oban-perm.selected {
  border-color: #111; background: #111; color: #fff;
}
/* Confirm button */
.sw-oban-confirm {
  width: 100%; padding: 13px;
  background: var(--sw-red); border: none; border-radius: 14px;
  color: #fff; font-family: var(--sw-font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .18s;
}
.sw-oban-confirm:hover { background: #c0182b; }
.sw-oban-confirm:disabled { background: #ddd; color: #aaa; cursor: not-allowed; }

/* "You Reviewed X ago" label next to rate badge */
#sw-contacted-strip {
  display: none; align-items: center; justify-content: space-between;
  background: #fff; color: #00a86b;
  font-size: 12px; font-weight: 700; padding: 6px 14px;
  border-top: 2px solid rgba(0,168,107,.25);
  border-bottom: 1px solid rgba(0,168,107,.12);
  flex-shrink: 0; gap: 8px; letter-spacing: .2px;
}
#sw-contacted-strip.show { display: flex; }
#sw-contacted-strip .sw-cs-label { display:flex; align-items:center; gap:5px; }
#sw-contacted-strip .sw-cs-icons { display:flex; gap:4px; align-items:center; }
.sw-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; padding: 14px 16px;
  background: linear-gradient(180deg, #f0f0f6 0%, #ffffff 100%);
  border-top: 1px solid var(--sw-border);
  flex-shrink: 0; overflow: visible; /* allow badge counters to overflow */
}

.sw-btn {
  width: 50px; height: 50px; border-radius: 16px;
  border: 1.5px solid;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-family: var(--sw-font); font-weight: 700;
  position: relative; flex-shrink: 0; transform-origin: center center;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              filter .15s, border-color .15s, color .15s;
  overflow: visible; /* counters must escape button bounds */
}
.sw-btn::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 44%;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 1;
}
.sw-btn:hover  { transform: translateY(-2px) scale(1.06); filter: brightness(1.06); }
.sw-btn:active { transform: scale(.92);                   filter: brightness(.95); }
.sw-btn.active-panel { outline: 2px solid currentColor; outline-offset: 2px; }

.sw-btn-nope {
  background: linear-gradient(145deg, #ffe8ed 0%, #ffd0da 60%, #ffc0cc 100%);
  border-color: rgba(229,62,106,.28);
  color: var(--sw-red);
}
.sw-btn-nope:hover {
  background: linear-gradient(145deg, #ff7096 0%, #e53e6a 60%, #c82d56 100%);
  border-color: rgba(229,62,106,.6);
  color: #fff;
}

.sw-btn-like {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  font-size: 26px;
  background: linear-gradient(145deg, #ff9ecf 0%, #f03d8f 45%, #c42070 100%);
  border-color: rgba(221,63,135,.45);
  color: #fff;
  filter: saturate(1.1);
}
.sw-btn-like::before {
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
}
.sw-btn-like:hover {
  background: linear-gradient(145deg, #ffb8dc 0%, #f54d9a 45%, #d42878 100%);
  border-color: rgba(221,63,135,.7);
  filter: saturate(1.2) brightness(1.08);
}
.sw-btn-like:active { filter: saturate(1.1) brightness(.92); }

.sw-btn-info {
  background: linear-gradient(145deg, #e4edff 0%, #cfdffe 60%, #bcd3ff 100%);
  border-color: rgba(61,126,245,.25);
  color: var(--sw-blue);
}
.sw-btn-info:hover {
  background: linear-gradient(145deg, #6fa8ff 0%, #3d7ef5 60%, #2b5fc9 100%);
  border-color: rgba(61,126,245,.6);
  color: #fff;
}

.sw-btn-comment {
  background: linear-gradient(145deg, #ffe4f2 0%, #ffd0e8 60%, #ffbede 100%);
  border-color: rgba(221,63,135,.22);
  color: var(--sw-pink);
}
.sw-btn-comment:hover {
  background: linear-gradient(145deg, #ff82bc 0%, #dd3f87 60%, #c2306f 100%);
  border-color: rgba(221,63,135,.55);
  color: #fff;
}

.sw-btn-contact {
  background: linear-gradient(145deg, #dcfaf4 0%, #c4f4ec 60%, #aaeee4 100%);
  border-color: rgba(11,191,160,.22);
  color: var(--sw-teal);
}
.sw-btn-contact:hover {
  background: linear-gradient(145deg, #3dd8b8 0%, #0bbfa0 60%, #089480 100%);
  border-color: rgba(11,191,160,.55);
  color: #fff;
}

.sw-btn-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--sw-pink); color: #fff; font-size: 9px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--sw-surface);
  z-index: 10; pointer-events: none; /* above btn ::before sheen */
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ── Video Modal ──────────────────────────────────────────── */
#sw-video-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(14px);
  z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px;
}
#sw-video-modal.open { display: flex; }
#sw-video-modal video { max-width: 100%; max-height: 88vh; border-radius: 14px; outline: none; }
.sw-vid-close {
  position: absolute; top: 60px; right: 18px;
  background: rgb(0 0 0 / 10%); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12%; width: 40px; height: 40px; cursor: pointer;
  color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.sw-vid-close:hover { background: rgb(255 0 84 / 85%); }

/* ── burstFX particles ─────────────────────────────────────── */
.sw-fx-orb {
  position: fixed; pointer-events: none; z-index: 10004; border-radius: 50%;
  width: var(--sz); height: var(--sz);
  background: radial-gradient(circle at 35% 35%, #fff 0%, var(--col) 55%, transparent 100%);
  box-shadow: 0 0 var(--glow) var(--col);
  animation: sw-fx-fly var(--dur) cubic-bezier(.22,.61,.36,1) var(--delay) forwards;
  opacity: 0;
}
.sw-fx-star {
  position: fixed; pointer-events: none; z-index: 10004;
  font-size: var(--sz); color: var(--col); text-shadow: 0 0 8px var(--col), 0 0 20px var(--col);
  animation: sw-fx-fly var(--dur) cubic-bezier(.22,.61,.36,1) var(--delay) forwards;
  opacity: 0;
}
.sw-fx-shard {
  position: fixed; pointer-events: none; z-index: 10004;
  width: var(--w); height: var(--h);
  background: var(--col); border-radius: 1px;
  box-shadow: 0 0 4px var(--col);
  animation: sw-fx-fly var(--dur) cubic-bezier(.22,.61,.36,1) var(--delay) forwards;
  opacity: 0;
}
.sw-fx-ring {
  position: fixed; pointer-events: none; z-index: 10004;
  width: var(--sz); height: var(--sz); border-radius: 50%; border: 2.5px solid var(--col);
  box-shadow: 0 0 10px var(--col), inset 0 0 10px var(--col);
  animation: sw-fx-ring var(--dur) ease-out var(--delay) forwards;
  opacity: 0;
}
.sw-fx-flash {
  position: fixed; pointer-events: none; z-index: 10003;
  border-radius: 50%;
  width: var(--sz); height: var(--sz);
  background: radial-gradient(circle, var(--col) 0%, transparent 70%);
  animation: sw-fx-flash var(--dur) ease-out var(--delay) forwards;
  opacity: 0;
}
.sw-fx-comet {
  position: fixed; pointer-events: none; z-index: 10004;
  width: var(--len); height: 2px;
  background: linear-gradient(90deg, transparent, var(--col) 60%, #fff);
  border-radius: 999px;
  box-shadow: 0 0 6px var(--col);
  transform-origin: right center;
  animation: sw-fx-comet var(--dur) ease-out var(--delay) forwards;
  opacity: 0;
}
@keyframes sw-fx-fly {
  0%   { opacity:0; transform:translate(0,0) scale(0) rotate(0deg); }
  12%  { opacity:1; transform:translate(calc(var(--tx)*.15),calc(var(--ty)*.15)) scale(1.2) rotate(30deg); }
  75%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)) scale(.2) rotate(var(--rot)); }
}
@keyframes sw-fx-ring {
  0%   { opacity:0; transform:translate(var(--ox),var(--oy)) scale(0); }
  15%  { opacity:.9; }
  100% { opacity:0; transform:translate(var(--ox),var(--oy)) scale(var(--sc)); }
}
@keyframes sw-fx-flash {
  0%   { opacity:0; transform:translate(var(--ox),var(--oy)) scale(0); }
  20%  { opacity:.75; }
  100% { opacity:0; transform:translate(var(--ox),var(--oy)) scale(var(--sc)); }
}
@keyframes sw-fx-comet {
  0%   { opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--ang)) scaleX(0); }
  20%  { opacity:1; transform:translate(var(--tx),var(--ty)) rotate(var(--ang)) scaleX(1); }
  80%  { opacity:.6; }
  100% { opacity:0; transform:translate(calc(var(--tx)*1.6),calc(var(--ty)*1.6)) rotate(var(--ang)) scaleX(.4); }
}

/* ── Completion Badge ─────────────────────────────────────── */
/* Mobile-first: starts compact, animations scale it up */
.sw-complete-badge {
  position: fixed; top: 45%; left: 50%;
  transform: translate(-50%, -50%) scale(.6);
  display: inline-block; white-space: nowrap; text-align: center;
  font-family: var(--sw-font); font-weight: 900;
  /* RESPONSIVE SIZING — starts smaller on mobile, grows with viewport */
  font-size: clamp(22px, 7vw, 52px);
  letter-spacing: clamp(1px, 0.5vw, 4px);
  padding: clamp(12px, 3vw, 24px) clamp(18px, 5vw, 64px);
  border-radius: 16px; border: clamp(2px, 0.5vw, 4px) solid;
  z-index: 10005; pointer-events: none; opacity: 0;
  backdrop-filter: blur(10px); line-height: 1;
  /* Ensure it never overflows screen edges */
  max-width: 92vw; box-sizing: border-box;
}
.sw-complete-like { color: #00ff9d; border-color: #00ff9d; box-shadow: 0 0 60px rgba(0,255,157,.6); }
.sw-complete-pass { color: #ff3e6c; border-color: #ff3e6c; box-shadow: 0 0 60px rgba(255,62,108,.6); }
@keyframes sw-complete-zoom {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* ── Extra badge effects (randomly chosen in JS) ────────── */

/* SMASH */
@keyframes sw-smash-like {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0)    rotate(-6deg); }
  12%  { opacity:1; transform:translate(-50%,-50%) scale(1.45) rotate(3deg);  box-shadow:0 0 80px rgba(0,255,157,.9),0 0 140px rgba(0,255,157,.4); }
  20%  { opacity:1; transform:translate(-50%,-50%) scale(.88)  rotate(-1deg); }
  30%  { opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(0deg);  }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1)    rotate(0deg);  }
  85%  { opacity:1; transform:translate(-50%,-50%) scale(1.1)  rotate(2deg);  }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.4)  rotate(-4deg); }
}
@keyframes sw-smash-pass {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0)    rotate(6deg);  }
  12%  { opacity:1; transform:translate(-50%,-50%) scale(1.45) rotate(-3deg); box-shadow:0 0 80px rgba(255,62,108,.9),0 0 140px rgba(255,62,108,.4); }
  20%  { opacity:1; transform:translate(-50%,-50%) scale(.88)  rotate(1deg);  }
  30%  { opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(0deg);  }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1)    rotate(0deg);  }
  85%  { opacity:1; transform:translate(-50%,-50%) scale(1.1)  rotate(-2deg); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.4)  rotate(4deg);  }
}

/* FLIP */
@keyframes sw-flip-like {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.4)  rotateY(90deg);  }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(1.15) rotateY(-12deg); box-shadow:0 0 70px rgba(0,255,157,.9); }
  45%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotateY(4deg);   }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotateY(0deg);   }
  85%  { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotateY(-6deg);  }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.1) rotateY(25deg);  }
}
@keyframes sw-flip-pass {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.4)  rotateY(-90deg); }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(1.15) rotateY(12deg);  box-shadow:0 0 70px rgba(255,62,108,.9); }
  45%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotateY(-4deg);  }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotateY(0deg);   }
  85%  { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotateY(6deg);   }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.1) rotateY(-25deg); }
}

/* GLITCH */
@keyframes sw-glitch-like {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0); filter:none; }
  8%   { opacity:1; transform:translate(calc(-50% + 8px),-50%) scale(1.35) skewX(-8deg); filter:hue-rotate(90deg) brightness(2); }
  13%  { opacity:1; transform:translate(calc(-50% - 6px),-50%) scale(.9)  skewX(5deg);  filter:hue-rotate(180deg); }
  18%  { opacity:1; transform:translate(-50%,-50%) scale(1.1); filter:none; box-shadow:0 0 60px rgba(0,255,157,.9); }
  32%  { opacity:1; transform:translate(-50%,-50%) scale(1);    filter:none; }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1);    filter:none; }
  72%  { opacity:.6; transform:translate(calc(-50% + 5px),-50%) scale(1.05); filter:hue-rotate(45deg); }
  78%  { opacity:1;  transform:translate(calc(-50% - 4px),-50%) scale(1.05); filter:hue-rotate(-45deg); }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(2.2); filter:none; }
}
@keyframes sw-glitch-pass {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0); filter:none; }
  8%   { opacity:1; transform:translate(calc(-50% - 8px),-50%) scale(1.35) skewX(8deg);  filter:hue-rotate(-90deg) brightness(2); }
  13%  { opacity:1; transform:translate(calc(-50% + 6px),-50%) scale(.9)  skewX(-5deg); filter:hue-rotate(-180deg); }
  18%  { opacity:1; transform:translate(-50%,-50%) scale(1.1); filter:none; box-shadow:0 0 60px rgba(255,62,108,.9); }
  32%  { opacity:1; transform:translate(-50%,-50%) scale(1);    filter:none; }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1);    filter:none; }
  72%  { opacity:.6; transform:translate(calc(-50% - 5px),-50%) scale(1.05); filter:hue-rotate(-45deg); }
  78%  { opacity:1;  transform:translate(calc(-50% + 4px),-50%) scale(1.05); filter:hue-rotate(45deg); }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(2.2); filter:none; }
}

/* BOUNCE */
@keyframes sw-bounce-like {
  0%   { opacity:0; transform:translate(-50%, calc(-50% - 220px)) scale(.6); }
  30%  { opacity:1; transform:translate(-50%, calc(-50% + 18px))  scale(1.08); box-shadow:0 0 70px rgba(0,255,157,.8); }
  45%  { opacity:1; transform:translate(-50%, calc(-50% - 10px))  scale(.95); }
  58%  { opacity:1; transform:translate(-50%, calc(-50% + 5px))   scale(1.02); }
  70%  { opacity:1; transform:translate(-50%, -50%) scale(1); }
  85%  { opacity:1; transform:translate(-50%, -50%) scale(1); }
  100% { opacity:0; transform:translate(-50%, calc(-50% - 240px)) scale(.5); }
}
@keyframes sw-bounce-pass {
  0%   { opacity:0; transform:translate(-50%, calc(-50% - 220px)) scale(.6); }
  30%  { opacity:1; transform:translate(-50%, calc(-50% + 18px))  scale(1.08); box-shadow:0 0 70px rgba(255,62,108,.8); }
  45%  { opacity:1; transform:translate(-50%, calc(-50% - 10px))  scale(.95); }
  58%  { opacity:1; transform:translate(-50%, calc(-50% + 5px))   scale(1.02); }
  70%  { opacity:1; transform:translate(-50%, -50%) scale(1); }
  85%  { opacity:1; transform:translate(-50%, -50%) scale(1); }
  100% { opacity:0; transform:translate(-50%, calc(-50% - 240px)) scale(.5); }
}

/* RUBBER */
@keyframes sw-rubber-like {
  0%   { opacity:0; transform:translate(-50%,-50%) scaleX(2.1)  scaleY(.3);   }
  15%  { opacity:1; transform:translate(-50%,-50%) scaleX(.72)  scaleY(1.45);  box-shadow:0 0 65px rgba(0,255,157,.9); }
  28%  { opacity:1; transform:translate(-50%,-50%) scaleX(1.25) scaleY(.88);  }
  40%  { opacity:1; transform:translate(-50%,-50%) scaleX(.94)  scaleY(1.08);  }
  55%  { opacity:1; transform:translate(-50%,-50%) scaleX(1)    scaleY(1);    }
  80%  { opacity:1; transform:translate(-50%,-50%) scaleX(1)    scaleY(1);    }
  100% { opacity:0; transform:translate(-50%,-50%) scaleX(2.8)  scaleY(.1);   }
}
@keyframes sw-rubber-pass {
  0%   { opacity:0; transform:translate(-50%,-50%) scaleX(2.1)  scaleY(.3);   }
  15%  { opacity:1; transform:translate(-50%,-50%) scaleX(.72)  scaleY(1.45);  box-shadow:0 0 65px rgba(255,62,108,.9); }
  28%  { opacity:1; transform:translate(-50%,-50%) scaleX(1.25) scaleY(.88);  }
  40%  { opacity:1; transform:translate(-50%,-50%) scaleX(.94)  scaleY(1.08);  }
  55%  { opacity:1; transform:translate(-50%,-50%) scaleX(1)    scaleY(1);    }
  80%  { opacity:1; transform:translate(-50%,-50%) scaleX(1)    scaleY(1);    }
  100% { opacity:0; transform:translate(-50%,-50%) scaleX(2.8)  scaleY(.1);   }
}

/* Shockwave ring */
.sw-shockwave {
  position: fixed; top: 45%; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  pointer-events: none; z-index: 10004;
  animation: sw-shockwave 600ms ease-out forwards;
}
.sw-shockwave-like { border: 3px solid rgba(0,255,157,.9); }
.sw-shockwave-pass { border: 3px solid rgba(255,62,108,.9); }
@keyframes sw-shockwave {
  0%   { transform: translate(-50%,-50%) scale(1);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(28); opacity: 0; }
}

/* ── MOBILE: all badge/effect elements shift 5% upward (45%→40%) ── */
@media (max-width: 490px) {
  .sw-complete-badge    { top: 40% !important; }
  .sw-shockwave         { top: 40% !important; }
  .sw-hfx-nova-badge    { top: 40% !important; }
  .sw-hfx-quake-badge   { top: 40% !important; }
  .sw-hfx-dream-badge   { top: 40% !important; }
  .sw-hfx-inferno-badge { top: 40% !important; }
  .sw-hfx-diamond-badge { top: 40% !important; }
}

/* Screen shake */
@keyframes sw-panel-shake {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  15%  { transform: translate(calc(-50% + 6px), calc(-50% - 4px)) scale(1); }
  30%  { transform: translate(calc(-50% - 5px), calc(-50% + 5px)) scale(1); }
  45%  { transform: translate(calc(-50% + 4px), calc(-50% - 3px)) scale(1); }
  60%  { transform: translate(calc(-50% - 3px), calc(-50% + 2px)) scale(1); }
  75%  { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1); }
}

/* Safe viewport shake — no -50% offsets, won't displace mobile panel */
@keyframes sw-vp-shake {
  0%,100% { transform: none; }
  15%  { transform: translate(5px, -3px); }
  30%  { transform: translate(-4px, 4px); }
  45%  { transform: translate(3px, -2px); }
  60%  { transform: translate(-2px, 2px); }
  75%  { transform: translate(2px, -1px); }
}

/* Sparkle dot particles */
.sw-sparkle {
  position: fixed; pointer-events: none; z-index: 10006;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  background: var(--col); box-shadow: 0 0 6px 2px var(--col);
  animation: sw-sparkle-fly var(--dur) ease-out forwards;
}
.sw-sparkle-star {
  position: fixed; pointer-events: none; z-index: 10006;
  font-size: var(--sz); line-height: 1;
  color: var(--col); text-shadow: 0 0 8px var(--col);
  animation: sw-sparkle-fly var(--dur) ease-out forwards;
}
@keyframes sw-sparkle-fly {
  0%   { opacity:1; transform:translate(0,0) scale(1); }
  60%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--tx),var(--ty)) scale(0); }
}

/* ── Toast ────────────────────────────────────────────────── */
#sw-toast {
  position: fixed; bottom: 110px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--sw-text); color: #fff;
  font-family: var(--sw-font); font-size: 12px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px;
  z-index: 10002; pointer-events: none; opacity: 0;
  transition: opacity .2s, transform .2s; white-space: nowrap;
}
#sw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 540px) {
  :root { --sw-panel-w: 100vw; --sw-img-h: 72vh; }

  #ds-swiper-panel {
    top: 0; bottom: 0; left: 0; right: 0;
    transform: translateY(40px); border-radius: 0;
    border-bottom: none; width: 100%; max-width: 100%;
    /* Use JS-measured real viewport height for iPhone Safari */
    height: calc(var(--real-vh, 1vh) * 100);
    max-height: calc(var(--real-vh, 1vh) * 100);
    min-height: 0;
    display: flex; flex-direction: column;
  }
  #ds-swiper-panel.open { transform: translateY(0); }

  /* Make viewport flex to fill remaining space — buttons always visible */
  .sw-viewport {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #sw-iv-reset { display: none !important; }

  .sw-actions {
    gap: 6px;
    padding: 8px 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    overflow: hidden;
    justify-content: space-evenly;
    flex-shrink: 0;
  }
  .sw-btn {
    width: clamp(34px, 12vw, 46px); height: clamp(34px, 12vw, 46px);
    font-size: clamp(15px, 4.5vw, 19px); border-radius: 11px;
    transform: none !important;
    padding: 0 !important;  /* remove any inherited padding */
  }
  .sw-btn:hover  { transform: none !important; }
  .sw-btn:active { transform: none !important; filter: brightness(.85); }
  .sw-btn-like {
    width:  clamp(40px, 14vw, 52px) !important;
    height: clamp(40px, 14vw, 52px) !important;
    font-size: clamp(18px, 5.5vw, 22px) !important;
  }
  .sw-contact-grid {grid-template-columns: 1fr 1fr;}
  #ds-swiper-orb { bottom: 58px; left: 20px; width: 58px; height: 58px; }
  #ds-swiper-orb-clip { width: 52px; height: 52px; }
  #ds-swiper-orb-img  { width: 44px; height: 44px; }
  /* Hide reset + zoom label by ID on mobile only */
}
@media (max-width: 360px) {
  :root { --sw-img-h: 65vh; --sw-img-h: 65dvh; }
  .sw-actions { gap: 6px; padding: 8px 6px; }
  .sw-btn {
    width:  clamp(32px, 12vw, 40px) !important; height: clamp(32px, 12vw, 40px) !important;
    font-size: clamp(13px, 4vw, 16px) !important; border-radius: 9px;
  }
  .sw-btn-like {
    width:  clamp(38px, 14vw, 46px) !important; height: clamp(38px, 14vw, 46px) !important;
    font-size: clamp(16px, 5vw, 20px) !important;
  }
}

.sw-btn i { font-size: 22px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   HEART BUTTON — 5 HARDCORE EXCLUSIVE EFFECTS
   Particles are elegant stars/gems — no big emoji splash
═══════════════════════════════════════════════════════════════ */

/* ── SHARED: elegant particles ──────────────────────────────── */
.sw-heart-particle {
  position: fixed; pointer-events: none; z-index: 10010;
  font-size: var(--sz); line-height: 1;
  animation: sw-heart-fly var(--dur) cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}
@keyframes sw-heart-fly {
  0%   { opacity:0;   transform: translate(0,0)                           scale(.3) rotate(var(--rot0)); }
  12%  { opacity:1;   transform: translate(calc(var(--tx)*.15), calc(var(--ty)*.15)) scale(1.3) rotate(var(--rot1)); }
  70%  { opacity:1;   transform: translate(calc(var(--tx)*.85), calc(var(--ty)*.85)) scale(.9) rotate(var(--rot2)); }
  100% { opacity:0;   transform: translate(var(--tx), var(--ty))          scale(.2) rotate(var(--rot3)); }
}

/* ── SHARED: glow ring pulse ─────────────────────────────────── */
.sw-heart-ring {
  position: fixed; pointer-events: none; z-index: 10008;
  border-radius: 50%; border: 4px solid;
  animation: sw-heart-ring-expand var(--dur) ease-out forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}
@keyframes sw-heart-ring-expand {
  0%   { opacity:.9; transform: translate(-50%,-50%) scale(.05); }
  40%  { opacity:.7; }
  100% { opacity:0;  transform: translate(-50%,-50%) scale(1); }
}

/* ── SHARED: flash overlay ───────────────────────────────────── */
.sw-heart-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 10007;
  animation: sw-heart-flash var(--dur) ease-out forwards;
}
@keyframes sw-heart-flash {
  0%   { opacity: var(--peak, .45); }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   REVEAL BURST — 10 random designs fired at fade-in midpoint
═══════════════════════════════════════════════════════════════ */

/* Shared ring — used by multiple reveal effects */
.sw-reveal-wave {
  position: fixed; pointer-events: none; z-index: 10006;
  border-radius: 50%; border: 5px solid;
  animation: sw-reveal-wave-expand var(--dur, 900ms) ease-out forwards;
}
@keyframes sw-reveal-wave-expand {
  0%   { opacity: .9;  transform: translate(-50%,-50%) scale(.04); }
  30%  { opacity: .65; }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
}

/* Shared screen flash */
.sw-reveal-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 10005;
  animation: sw-reveal-flash-fade var(--dur, 700ms) ease-out forwards;
}
@keyframes sw-reveal-flash-fade {
  0%   { opacity: var(--peak, .38); }
  100% { opacity: 0; }
}

/* Shockwave — single thick ring blasts outward */
.sw-rb-shockwave {
  position: fixed; pointer-events: none; z-index: 10006;
  border-radius: 50%; border: 12px solid;
  animation: sw-rb-shock var(--dur, 700ms) cubic-bezier(.2,0,.6,1) forwards;
}
@keyframes sw-rb-shock {
  0%   { opacity:1;   transform:translate(-50%,-50%) scale(.02); }
  50%  { opacity:.5; }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(1.2); }
}

/* Laser beams — thin lines radiating from centre */
.sw-rb-beam {
  position: fixed; pointer-events: none; z-index: 10006;
  width: var(--w, 2px); height: 0;
  background: linear-gradient(to bottom, var(--col), transparent);
  transform-origin: top center;
  animation: sw-rb-beam-shoot var(--dur, 600ms) ease-out forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}
@keyframes sw-rb-beam-shoot {
  0%   { opacity:0; height:0; }
  8%   { opacity:1; height:var(--len); }
  70%  { opacity:.4; }
  100% { opacity:0; height:var(--len); }
}

/* Strobe — rapid full-screen white flash pulses */
.sw-rb-strobe {
  position: fixed; inset:0; pointer-events:none; z-index:10007;
  background: var(--col, white);
  animation: sw-rb-strobe-pulse var(--dur, 600ms) ease-out forwards;
}
@keyframes sw-rb-strobe-pulse {
  0%   { opacity: var(--peak,.5); }
  15%  { opacity: 0; }
  30%  { opacity: calc(var(--peak) * .6); }
  45%  { opacity: 0; }
  60%  { opacity: calc(var(--peak) * .3); }
  100% { opacity: 0; }
}

/* Ripple tiles — 5 rings with elastic ease */
.sw-rb-ripple {
  position: fixed; pointer-events:none; z-index:10006;
  border-radius:50%; border:3px solid;
  animation: sw-rb-ripple-out var(--dur,800ms) cubic-bezier(.15,.5,.3,1) forwards;
  animation-delay: var(--delay,0ms);
  opacity:0;
}
@keyframes sw-rb-ripple-out {
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(.01); }
  40%  { opacity:.6; }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(1); }
}

/* Confetti dot */
.sw-rb-confetti {
  position: fixed; pointer-events:none; z-index:10008;
  width: var(--sz,6px); height: var(--sz,6px);
  border-radius: var(--br, 50%);
  background: var(--col);
  animation: sw-rb-confetti-fall var(--dur,900ms) ease-in forwards;
  animation-delay: var(--delay,0ms);
  opacity:0;
}
@keyframes sw-rb-confetti-fall {
  0%   { opacity:1;  transform: translate(0,0) rotate(0deg) scale(1); }
  80%  { opacity:.8; }
  100% { opacity:0;  transform: translate(var(--tx),var(--ty)) rotate(var(--rot,360deg)) scale(.4); }
}

/* Halo pulse — soft glow ring that breathes */
.sw-rb-halo {
  position: fixed; pointer-events:none; z-index:10005;
  border-radius:50%;
  background: radial-gradient(ellipse at 50% 50%, var(--col) 0%, transparent 70%);
  animation: sw-rb-halo-pulse var(--dur,1000ms) ease-out forwards;
}
@keyframes sw-rb-halo-pulse {
  0%   { opacity:0;   transform:translate(-50%,-50%) scale(.1); }
  20%  { opacity: var(--peak,.55); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(1.4); }
}

/* Split ring — ring that splits into arcs */
.sw-rb-arc {
  position: fixed; pointer-events:none; z-index:10006;
  border-radius:50%; border:4px solid transparent;
  border-top-color: var(--col); border-right-color: var(--col);
  animation: sw-rb-arc-spin var(--dur,700ms) ease-out forwards;
  animation-delay: var(--delay,0ms);
  opacity:0;
}
@keyframes sw-rb-arc-spin {
  0%   { opacity:.9; transform:translate(-50%,-50%) scale(.05) rotate(0deg); }
  40%  { opacity:.6; }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(1) rotate(var(--spin,180deg)); }
}

/* ── Firework shell — dot that shoots up then explodes ── */
.sw-rb-firework {
  position: fixed; pointer-events:none; z-index:10009;
  width: var(--sz,8px); height: var(--sz,8px);
  border-radius: 50%;
  background: var(--col, #fff);
  box-shadow: 0 0 6px 2px var(--col, #fff);
  animation: sw-rb-firework-burst var(--dur,900ms) ease-out forwards;
  animation-delay: var(--delay,0ms);
  opacity: 0;
}
@keyframes sw-rb-firework-burst {
  0%   { opacity:1;   transform:translate(0,0) scale(1); }
  60%  { opacity:.9;  transform:translate(var(--tx),var(--ty)) scale(1.2); }
  80%  { opacity:.5;  }
  100% { opacity:0;   transform:translate(var(--tx),var(--ty)) scale(0); }
}

/* ── Spark jet — tight cluster of dots fired in one direction ── */
.sw-rb-spark {
  position: fixed; pointer-events:none; z-index:10009;
  width: var(--sz,5px); height: var(--sz,5px);
  border-radius: 50%;
  background: var(--col, #fff);
  box-shadow: 0 0 4px 1px var(--col, #fff);
  animation: sw-rb-spark-fly var(--dur,700ms) ease-in forwards;
  animation-delay: var(--delay,0ms);
  opacity:0;
}
@keyframes sw-rb-spark-fly {
  0%   { opacity:1;  transform:translate(0,0) scale(1); }
  70%  { opacity:.8; transform:translate(var(--tx),var(--ty)) scale(.8); }
  100% { opacity:0;  transform:translate(var(--tx),var(--ty)) scale(0); }
}

/* ── Glitter tile — small square that flips and fades ── */
.sw-rb-glitter {
  position: fixed; pointer-events:none; z-index:10008;
  width: var(--sz,6px); height: var(--sz,6px);
  border-radius: 1px;
  background: var(--col);
  box-shadow: 0 0 3px 1px var(--col);
  animation: sw-rb-glitter-pop var(--dur,800ms) ease-out forwards;
  animation-delay: var(--delay,0ms);
  opacity:0;
}
@keyframes sw-rb-glitter-pop {
  0%   { opacity:1;  transform:translate(0,0) rotate(0deg) scale(1.4); }
  50%  { opacity:.9; transform:translate(calc(var(--tx)*.6),calc(var(--ty)*.6)) rotate(var(--rot)) scale(1); }
  100% { opacity:0;  transform:translate(var(--tx),var(--ty)) rotate(calc(var(--rot)*2)) scale(.2); }
}

.sw-hfx-nova-badge {
  position: fixed; top: 45%; left: 50%;
  font-family: var(--sw-font); font-weight: 900;
  font-size: clamp(22px, 6.5vw, 68px);
  letter-spacing: clamp(1px, 0.4vw, 3px);
  color: #fff; pointer-events: none; z-index: 10012;
  text-shadow: 0 0 40px #ff3d9a, 0 0 80px #ff3d9a, 0 0 120px #ff6bba;
  white-space: nowrap; max-width: 94vw; text-align: center;
  animation: sw-nova-badge 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sw-nova-badge {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0)   rotate(-8deg); filter:brightness(4); }
  8%   { opacity:1; transform:translate(-50%,-50%) scale(1.8) rotate(3deg);  filter:brightness(3); }
  18%  { opacity:1; transform:translate(-50%,-50%) scale(.88) rotate(-1deg); filter:brightness(1.5); }
  28%  { opacity:1; transform:translate(-50%,-50%) scale(1.02) rotate(0deg); filter:brightness(1.2); }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1)   rotate(0deg);  filter:brightness(1); }
  85%  { opacity:1; transform:translate(-50%,-50%) scale(1.06); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.6) rotate(5deg);  filter:brightness(2); }
}

/* ── EFFECT 2: HEARTQUAKE ────────────────────────────────────  */
.sw-hfx-quake-badge {
  position: fixed; top: 45%; left: 50%;
  font-family: var(--sw-font); font-weight: 900;
  font-size: clamp(20px, 6vw, 64px);
  letter-spacing: clamp(1px, 0.3vw, 2px);
  pointer-events: none; z-index: 10012;
  white-space: nowrap; max-width: 94vw; text-align: center;
  animation: sw-quake-badge 2.5s ease forwards;
}
@keyframes sw-quake-badge {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0) skewX(0deg);    color:#ff2060; text-shadow: 0 0 0 transparent; }
  6%   { opacity:1; transform:translate(calc(-50% + 12px),-50%) scale(1.55) skewX(-12deg); color:#ff2060; text-shadow:-6px 0 0 #00ffff, 6px 0 0 #ff00ff, 0 0 60px #ff2060; }
  10%  { opacity:1; transform:translate(calc(-50% - 10px),-50%) scale(1.55) skewX(10deg);  color:#ff2060; text-shadow:6px 0 0 #00ffff,-6px 0 0 #ff00ff; }
  15%  { opacity:1; transform:translate(-50%,-50%) scale(1.05) skewX(0deg);  color:#ff4488; text-shadow: 0 0 50px #ff2060, 0 0 100px rgba(255,32,96,.4); }
  30%  { opacity:1; transform:translate(-50%,-50%) scale(1.0); color:#ff4488; }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1.0); }
  80%  { opacity:1; transform:translate(calc(-50% + 4px),calc(-50% - 3px)) scale(1.04); text-shadow:3px 0 0 #00ffff,-3px 0 0 #ff00ff; }
  88%  { opacity:1; transform:translate(calc(-50% - 3px),calc(-50% + 2px)) scale(1.02); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.8) skewX(-4deg); filter:blur(4px); }
}

/* Screen crack overlay for quake */
.sw-quake-crack {
  position: fixed; inset: 0; pointer-events: none; z-index: 10009;
  background: transparent;
  animation: sw-quake-screen 2.5s ease forwards;
}
@keyframes sw-quake-screen {
  0%,5%  { background: transparent; }
  6%     { background: rgba(255,32,96,.18); transform: translate(4px,-3px); }
  8%     { background: rgba(0,255,255,.08); transform: translate(-3px,4px); }
  10%    { background: transparent; transform: translate(0,0); }
  11%    { transform: translate(3px,2px); }
  13%    { transform: translate(0,0); }
  100%   { background: transparent; transform: translate(0,0); }
}

/* ── EFFECT 3: DREAMBURST ────────────────────────────────────  */
.sw-hfx-dream-badge {
  position: fixed; top: 45%; left: 50%;
  font-family: var(--sw-font); font-weight: 900;
  font-size: clamp(20px, 6vw, 60px);
  letter-spacing: clamp(1px, 0.4vw, 3px);
  pointer-events: none; z-index: 10012;
  white-space: nowrap; max-width: 94vw; text-align: center;
  color: #ff6bba;
  text-shadow: 0 0 30px #ff3d9a, 0 0 60px rgba(255,61,154,.5), 0 0 100px rgba(255,61,154,.25);
  animation: sw-dream-badge 2.8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sw-dream-badge {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0deg);   filter:blur(8px); }
  15%  { opacity:1; transform:translate(-50%,-50%) scale(1.25) rotate(-4deg); filter:blur(0); }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(.95) rotate(2deg);  }
  40%  { opacity:1; transform:translate(-50%,-50%) scale(1.02) rotate(0deg); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg);    }
  85%  { opacity:.9; transform:translate(-50%,-50%) scale(1.02) rotate(1deg); filter:blur(0); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-8deg);  filter:blur(6px); }
}

/* Orbit ring */
.sw-dream-orbit {
  position: fixed; pointer-events: none; z-index: 10011;
  font-size: var(--sz); line-height: 1;
  animation: sw-dream-orbit var(--dur) linear forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
  transform-origin: var(--ox) var(--oy);
}
@keyframes sw-dream-orbit {
  0%   { opacity:0;   transform: rotate(var(--r0))   translateX(var(--radius)) scale(.3); }
  10%  { opacity:1;   transform: rotate(var(--r10))  translateX(var(--radius)) scale(1.1); }
  80%  { opacity:1;   transform: rotate(var(--r80))  translateX(var(--radius)) scale(.9); }
  100% { opacity:0;   transform: rotate(var(--r100)) translateX(var(--radius)) scale(.2); }
}

/* ── EFFECT 4: INFERNO ───────────────────────────────────────  */
.sw-hfx-inferno-badge {
  position: fixed; top: 45%; left: 50%;
  font-family: var(--sw-font); font-weight: 900;
  font-size: clamp(22px, 6.5vw, 66px);
  letter-spacing: clamp(1px, 0.3vw, 2px);
  pointer-events: none; z-index: 10012;
  white-space: nowrap; max-width: 94vw; text-align: center;
  animation: sw-inferno-badge 2.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sw-inferno-badge {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0deg);
         color:#ff2020; text-shadow: 0 0 0 transparent; }
  5%   { opacity:1; transform:translate(-50%,-50%) scale(1.7) rotate(-3deg);
         color:#ff4400; text-shadow: 0 0 40px #ff2200, 0 0 80px #ff4400, 0 0 120px #ffaa00; filter:brightness(2.5); }
  14%  { opacity:1; transform:translate(-50%,-50%) scale(.92) rotate(1deg);
         color:#ff3300; text-shadow: 0 0 30px #ff2200, 0 0 60px rgba(255,68,0,.6); filter:brightness(1.5); }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(1.02) rotate(0deg);
         color:#ff4422; text-shadow: 0 0 25px #ff2200; filter:brightness(1.2); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1);
         color:#ff3311; }
  82%  { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg); filter:brightness(1.4); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.8) rotate(-5deg);
         filter:blur(3px) brightness(2); }
}

/* Rising ember particle */
.sw-inferno-ember {
  position: fixed; pointer-events: none; z-index: 10010;
  font-size: var(--sz); line-height: 1;
  animation: sw-ember-rise var(--dur) ease-out forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}
@keyframes sw-ember-rise {
  0%   { opacity:0; transform: translate(0,0) scale(.5) rotate(0deg); }
  8%   { opacity:1; transform: translate(var(--sx), calc(var(--sy) * .2)) scale(1.2) rotate(var(--r1)); }
  60%  { opacity:.9; transform: translate(calc(var(--sx)*1.3), calc(var(--sy)*.7)) scale(.8) rotate(var(--r2)); }
  100% { opacity:0; transform: translate(calc(var(--sx)*1.6), var(--sy)) scale(.2) rotate(var(--r3)); }
}

/* Heat shimmer */
@keyframes sw-heat-shimmer {
  0%,100% { filter: blur(0px); }
  25%  { filter: blur(.8px) brightness(1.08); }
  50%  { filter: blur(0px); }
  75%  { filter: blur(.5px) brightness(1.05); }
}

/* ── EFFECT 5: DIAMOND RAIN ──────────────────────────────────  */
.sw-hfx-diamond-badge {
  position: fixed; top: 45%; left: 50%;
  font-family: var(--sw-font); font-weight: 900;
  font-size: clamp(20px, 6vw, 62px);
  letter-spacing: clamp(1px, 0.4vw, 3px);
  pointer-events: none; z-index: 10012;
  white-space: nowrap; max-width: 94vw; text-align: center;
  color: #e0f0ff;
  text-shadow: 0 0 20px #80d0ff, 0 0 40px #40aaff, 0 0 80px rgba(64,170,255,.5),
               2px 2px 0 rgba(255,255,255,.3);
  animation: sw-diamond-badge 2.7s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sw-diamond-badge {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0) rotate(10deg);
         filter:brightness(5) saturate(0); }
  8%   { opacity:1; transform:translate(-50%,-50%) scale(1.65) rotate(-3deg);
         filter:brightness(3) saturate(1.5); }
  16%  { opacity:1; transform:translate(-50%,-50%) scale(.9) rotate(1deg);
         filter:brightness(1.5) saturate(1.2); }
  26%  { opacity:1; transform:translate(-50%,-50%) scale(1.04) rotate(0deg);
         filter:brightness(1.1); }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1); filter:brightness(1); }
  72%  { opacity:1; transform:translate(-50%,-50%) scale(1.04); filter:brightness(1.3) saturate(1.4); }
  80%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(2.3) rotate(6deg);
         filter:brightness(3) saturate(0) blur(4px); }
}

/* Light beam */
.sw-diamond-beam {
  position: fixed; pointer-events: none; z-index: 10008;
  width: 2px; height: 0;
  background: linear-gradient(to bottom, rgba(200,240,255,.9), rgba(200,240,255,0));
  transform-origin: top center;
  animation: sw-beam-shoot var(--dur) ease-out forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}
@keyframes sw-beam-shoot {
  0%   { opacity:0; height: 0; }
  5%   { opacity:.8; height: var(--len); }
  60%  { opacity:.4; }
  100% { opacity:0; height: var(--len); }
}

/* Crystal shard */
.sw-diamond-shard {
  position: fixed; pointer-events: none; z-index: 10010;
  font-size: var(--sz); line-height: 1; color: var(--col);
  text-shadow: 0 0 8px var(--col), 0 0 16px var(--col);
  animation: sw-shard-fly var(--dur) ease-out forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}
@keyframes sw-shard-fly {
  0%   { opacity:0;   transform: translate(0,0) scale(.2) rotate(0deg); }
  8%   { opacity:1;   transform: translate(calc(var(--tx)*.1), calc(var(--ty)*.1)) scale(1.4) rotate(var(--r1)); }
  65%  { opacity:.8;  transform: translate(calc(var(--tx)*.9), calc(var(--ty)*.9)) scale(.7) rotate(var(--r2)); }
  100% { opacity:0;   transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--r3)); }
}


/* ═══════════════════════════════════════════════════════════════
   HEART FX BADGE SPARKLES — 5 distinct styles
   Applied to the text badge overlay when heart button fires.
   All particles are children of the badge, positioned relative to it.
═══════════════════════════════════════════════════════════════ */

/* Shared: badge needs relative positioning for child particles */
.sw-hfx-nova-badge, .sw-hfx-quake-badge, .sw-hfx-dream-badge,
.sw-hfx-inferno-badge, .sw-hfx-diamond-badge {
  overflow: visible !important;
}

/* ── SPARKLE STYLE 1: Orbit ring — stars circle the text ── */
@keyframes bsp-orbit {
  0%   { transform: rotate(var(--bsp-start)) translateX(var(--bsp-r)) scale(0) rotate(calc(var(--bsp-start) * -1)); opacity: 0; }
  15%  { opacity: 1; transform: rotate(calc(var(--bsp-start) + 40deg)) translateX(var(--bsp-r)) scale(1.3) rotate(calc((var(--bsp-start) + 40deg) * -1)); }
  80%  { opacity: .8; }
  100% { opacity: 0; transform: rotate(calc(var(--bsp-start) + 360deg)) translateX(var(--bsp-r)) scale(.6) rotate(calc((var(--bsp-start) + 360deg) * -1)); }
}
.bsp-orbit-star {
  position: absolute; top: 50%; left: 50%;
  font-size: var(--bsp-sz); line-height: 1;
  color: var(--bsp-col); text-shadow: 0 0 8px var(--bsp-col);
  pointer-events: none; z-index: 10020;
  animation: bsp-orbit var(--bsp-dur) ease-in-out var(--bsp-delay) forwards;
  transform-origin: 0 0;
}

/* ── SPARKLE STYLE 2: Fountain — arcs up then rains down ── */
@keyframes bsp-fountain {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  10%  { opacity: 1; transform: translate(var(--bsp-x1), var(--bsp-y1)) scale(1.2); }
  55%  { opacity: 1; transform: translate(var(--bsp-x2), var(--bsp-y2)) scale(1); }
  100% { opacity: 0; transform: translate(var(--bsp-x3), var(--bsp-y3)) scale(0.2); }
}
.bsp-fountain-star {
  position: absolute; top: 50%; left: 50%;
  font-size: var(--bsp-sz); line-height: 1;
  color: var(--bsp-col); text-shadow: 0 0 10px var(--bsp-col);
  pointer-events: none; z-index: 10020;
  animation: bsp-fountain var(--bsp-dur) cubic-bezier(.22,.61,.36,1) var(--bsp-delay) forwards;
  opacity: 0;
}

/* ── SPARKLE STYLE 3: Glitter pulse — shimmer dots fade in/out around text ── */
@keyframes bsp-glitter {
  0%,100% { opacity: 0; transform: translate(var(--bsp-tx), var(--bsp-ty)) scale(0); }
  20%     { opacity: 1; transform: translate(var(--bsp-tx), var(--bsp-ty)) scale(1.4); }
  50%     { opacity: .7; transform: translate(var(--bsp-tx), var(--bsp-ty)) scale(1); }
  80%     { opacity: .3; transform: translate(var(--bsp-tx), var(--bsp-ty)) scale(.8); }
}
.bsp-glitter-dot {
  position: absolute; top: 50%; left: 50%;
  width: var(--bsp-sz); height: var(--bsp-sz);
  border-radius: 50%;
  background: var(--bsp-col);
  box-shadow: 0 0 6px 2px var(--bsp-col);
  pointer-events: none; z-index: 10020;
  animation: bsp-glitter var(--bsp-dur) ease-in-out var(--bsp-delay) forwards;
  opacity: 0;
}

/* ── SPARKLE STYLE 4: Shatter — sharp burst in all directions ── */
@keyframes bsp-shatter {
  0%   { opacity: 1; transform: translate(0,0) scale(1.2) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--bsp-tx), var(--bsp-ty)) scale(0) rotate(var(--bsp-rot)); }
}
.bsp-shatter-star {
  position: absolute; top: 50%; left: 50%;
  font-size: var(--bsp-sz); line-height: 1;
  color: var(--bsp-col); text-shadow: 0 0 12px var(--bsp-col);
  pointer-events: none; z-index: 10020;
  animation: bsp-shatter var(--bsp-dur) cubic-bezier(.55,0,1,.45) var(--bsp-delay) forwards;
}

/* ── SPARKLE STYLE 5: Comet trails — streaks sweep across the text ── */
@keyframes bsp-comet {
  0%   { opacity: 0; transform: translate(var(--bsp-x0), var(--bsp-y0)) scaleX(0.2); }
  15%  { opacity: 1; }
  60%  { opacity: .8; transform: translate(var(--bsp-x1), var(--bsp-y1)) scaleX(1); }
  100% { opacity: 0; transform: translate(var(--bsp-x2), var(--bsp-y2)) scaleX(0.3); }
}
.bsp-comet {
  position: absolute; top: 50%; left: 50%;
  width: var(--bsp-len); height: 2px;
  background: linear-gradient(90deg, transparent, var(--bsp-col) 40%, rgba(255,255,255,.9) 80%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 4px 1px var(--bsp-col);
  pointer-events: none; z-index: 10020;
  transform-origin: left center;
  animation: bsp-comet var(--bsp-dur) ease-out var(--bsp-delay) forwards;
  opacity: 0;
}

/* ── Navigable elements — detail panel only ──────────────── */
.sw-dp-loc-nav   { cursor: pointer; }
.sw-dp-loc-nav:hover   .sw-detail-val { color: var(--sw-blue); }
.sw-dp-phone-nav {cursor: pointer;margin-top: 20px;}
.sw-dp-phone-nav:hover .sw-detail-val { color: var(--sw-teal); }

/* ── Share Sheet ─────────────────────────────────────────── */
#sw-share-sheet {
  position: fixed; inset: 0; z-index: 100060;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
#sw-share-sheet.show { display: flex; }
.sw-share-box {
  width: min(480px, 100vw); background: var(--sw-surface);
  border-radius: 22px 22px 0 0; padding: 20px 18px 28px;
  border: 1px solid var(--sw-border); border-bottom: none;
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
  animation: sw-share-up .22s cubic-bezier(.22,1,.36,1);
}
@keyframes sw-share-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sw-share-handle {
  width: 38px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.18); margin: 0 auto 14px;
}
.sw-share-title {
  font-size: 13px; font-weight: 700; color: var(--sw-sub);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px; text-align: center;
}
.sw-share-listing-name {
  font-size: 14px; font-weight: 700; color: var(--sw-text);
  text-align: center; margin-bottom: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px;
}
.sw-share-icons {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 16px;
}
.sw-share-icon {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--sw-text); font-size: 10px; font-weight: 600;
  width: 58px; text-decoration: none;
}
.sw-share-icon-circle {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: transform .12s, opacity .12s;
}
.sw-share-icon:hover .sw-share-icon-circle { transform: scale(1.1); opacity: .85; }
.sw-share-copy-row {
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--sw-border);
  border-radius: 12px; padding: 8px 12px; margin-bottom: 14px;
}
.sw-share-url {
  flex: 1; font-size: 12px; color: var(--sw-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-share-copy-btn {
  padding: 6px 14px; border-radius: 8px; border: none;
  background: var(--sw-pink); color: #fff; font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  font-family: var(--sw-font);
}
.sw-share-close {
  width: 100%; padding: 12px; border: 1px solid var(--sw-border);
  border-radius: 12px; background: rgba(255,255,255,.06);
  color: var(--sw-sub); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: var(--sw-font);
}
.sw-share-close:hover { background: rgb(255 0 84 / 85%); }
/* ── Message icon on analytics/fav items ─────────────────── */
.sw-item-msg-btn {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.07); border: 1px solid var(--sw-border);
  border-radius: 8px; padding: 3px 7px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--sw-sub);
  text-decoration: none; transition: background .15s, color .15s;
  position: relative; vertical-align: middle;
}
.sw-item-msg-btn:hover { background: var(--sw-teal,#2be2ff); color: #071018; border-color: var(--sw-teal,#2be2ff); }
.sw-item-msg-btn i { font-size: 12px; }
.sw-item-msg-btn.has-comments {
  color: var(--sw-teal, #2be2ff); border-color: rgba(43,226,255,.4);
}
.sw-item-msg-btn.has-comments::after {
  content: ''; position: absolute; inset: -3px; border-radius: 10px;
  border: 2px solid var(--sw-teal, #2be2ff);
  animation: sw-msg-pulse 1.8s ease-in-out infinite; pointer-events: none;
}
@keyframes sw-msg-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.22); }
}
/* Share button in detail panel quick btns */
.sw-dp-quick-btn.sw-share-trigger { color: var(--sw-amber); }
.sw-dp-quick-btn.sw-share-trigger:hover { border-color: var(--sw-amber); background: rgba(255,209,102,.1); }
/* Share + msg buttons in preview modal footer */
.sw-preview-share-btn {
  padding: 10px 16px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid var(--sw-border);
  color: var(--sw-text); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--sw-font);
  display: flex; align-items: center; gap: 6px; transition: background .15s;
}
.sw-preview-share-btn:hover { background: rgba(255,209,102,.15); color: var(--sw-amber); }
.sw-preview-msg-btn {
  padding: 10px 16px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid var(--sw-border);
  color: var(--sw-sub); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--sw-font); text-decoration: none;
  display: flex; align-items: center; gap: 6px; transition: background .15s;
  position: relative;
}
.sw-preview-msg-btn.has-comments { color: var(--sw-teal,#2be2ff); border-color: rgba(43,226,255,.4); }
.sw-preview-msg-btn.has-comments::after {
  content:''; position:absolute; inset:-3px; border-radius:14px;
  border: 2px solid var(--sw-teal,#2be2ff);
  animation: sw-msg-pulse 1.8s ease-in-out infinite; pointer-events:none;
}
.sw-preview-msg-btn:hover { background: rgba(43,226,255,.15); color: var(--sw-teal,#2be2ff); }

/* ═══════════════════════════════════════════════════════
   STAR-PICK MODAL
═══════════════════════════════════════════════════════ */
#sw-star-modal {
  position: fixed; inset: 0; z-index: 10020;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--sw-font);
}
@media (min-height: 500px) {
  #sw-star-modal { align-items: center; }
}
.sw-sm-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(6px);
}
.sw-sm-card {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 32px;
  width: min(460px, 100vw);
  border: 4px solid #f4a7c3;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22), 0 4px 20px rgba(221,63,135,.15);
  text-align: center;
  animation: sw-sm-up .34s cubic-bezier(.22,.61,.36,1) both;
}
@media (min-height: 500px) {
  .sw-sm-card {
    border-radius: 24px;
    width: min(420px, calc(100vw - 32px));
    animation: sw-sm-in .34s cubic-bezier(.22,.61,.36,1) both;
  }
}
@keyframes sw-sm-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes sw-sm-in {
  from { transform: scale(.90) translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.sw-sm-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 18px;
  color: #bbb; cursor: pointer; padding: 4px; line-height: 1;
}
.sw-sm-close:hover { color: var(--sw-text); }
.sw-sm-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; }
.sw-sm-title {
  font-size: 19px; font-weight: 800; color: var(--sw-text);
  margin: 0 0 6px; letter-spacing: -.02em;
}
.sw-sm-sub {
  font-size: 13px; color: var(--sw-sub); margin: 0 0 20px; line-height: 1.5;
}
/* Stars row */
.sw-sm-stars {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 8px;
}
.sw-sm-star {
  font-size: 44px; cursor: pointer;
  color: #ddd; line-height: 1; user-select: none;
  transition: color .1s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.sw-sm-star.hover { color: #f5c518; transform: scale(1.18); }
.sw-sm-star.lit   { color: #f5c518; }
.sw-sm-star.lit:hover { transform: scale(1.12); }
/* Label row under stars */
.sw-sm-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #bbb; padding: 0 4px;
  margin-bottom: 10px; font-weight: 600; letter-spacing: .02em;
}
/* Verdict */
.sw-sm-verdict {
  font-size: 15px; font-weight: 800; min-height: 22px;
  margin-bottom: 16px; color: var(--sw-pink);
  transition: opacity .18s;
}
/* CTA button */
.sw-sm-btn {
  width: 100%; padding: 14px;
  background: #f4a7c3;
  border: none; border-radius: 14px;
  color: #fff; font-family: var(--sw-font); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .18s, color .18s; margin-bottom: 10px;
}
.sw-sm-btn:disabled {
  background: #ddd; color: #aaa; cursor: not-allowed;
}
.sw-sm-btn:not(:disabled):hover { background: #111; color: #fff; }
/* Skip link */
.sw-sm-skip {
  background: none; border: none; color: var(--sw-sub);
  font-family: var(--sw-font); font-size: 12px; cursor: pointer;
  text-decoration: underline; padding: 4px;
}
.sw-sm-skip:hover { color: var(--sw-text); }
/* Name input row (shown in full/first-time modal) */
.sw-sm-name-row {
  text-align: left; margin-bottom: 16px;
}
.sw-sm-name-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--sw-sub); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px;
}
.sw-sm-name-inp {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border-radius: 12px;
  border: 2px solid var(--sw-border);
  font-family: var(--sw-font); font-size: 14px; font-weight: 600;
  color: var(--sw-text); background: var(--sw-bg);
  outline: none; transition: border-color .18s;
}
.sw-sm-name-inp:focus { border-color: var(--sw-pink); background: #fff; }
.sw-sm-name-hint {
  font-size: 11px; color: var(--sw-sub); margin-top: 4px;
  min-height: 16px;
}



/* ═══════════════════════════════════════════════════════
   REMOVED / NO-IMAGE LISTING NOTICE
   Shown on cards where item.thumb is empty and it's
   not age-gated. Sits above the card body, full width.
═══════════════════════════════════════════════════════ */
.sw-removed-notice {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(160deg, #1a1a2e 0%, #2d1b3d 60%, #1a1a2e 100%);
  padding: 24px 20px;
  text-align: center;
  z-index: 4;
  border-radius: var(--sw-radius, 20px);
  pointer-events: auto;
}
.sw-removed-icon {
  font-size: 36px;
  margin-bottom: 4px;
  filter: grayscale(0.3);
}
.sw-removed-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.sw-removed-sub {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  line-height: 1.45;
  max-width: 220px;
}
.sw-removed-visit {
  margin-top: 8px;
  display: inline-block;
  padding: 7px 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.sw-removed-visit:hover {
  background: rgba(221,63,135,.32);
  border-color: var(--sw-pink, #dd3f87);
}


/*PREVIOUS AFTER  SWIPER IPHONE 7 VH FIX @ 19:40 */