/* ═══════════════════════════════════════════════════════════════════════════
   Swipeable Cards — Task #1327339
   Scoped to /settlements browse page.
   Extends mobile-swipe-1320165.css (ms-swipe-* design tokens already loaded).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Direction Hint Labels ───────────────────────────────────────────────── */
.sc-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 8px;
  border: 2.5px solid;
  opacity: 0;
  transition: opacity 0.08s linear;
  pointer-events: none;
  white-space: nowrap;
}

/* RIGHT = gold heart "WANT THIS" */
.sc-hint--right {
  left: 14px;
  color: #d4af37;
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.08);
  text-shadow: 0 1px 4px rgba(212, 175, 55, 0.25);
}

.sc-hint--right svg {
  fill: #d4af37;
  stroke: #d4af37;
}

/* LEFT = gray X "SKIP" */
.sc-hint--left {
  right: 14px;
  color: #6b7280;
  border-color: #6b7280;
  background: rgba(107, 114, 128, 0.08);
}

.sc-hint--left svg {
  stroke: #6b7280;
}

/* ── Progress Counter "X of Y" ───────────────────────────────────────────── */
.sc-counter {
  display: none; /* mobile only */
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ms-text-muted, #6b7280);
  letter-spacing: 0.02em;
  padding: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .sc-counter {
    display: block;
  }
}

/* ── Card: use <a> tag so tap navigates natively ─────────────────────────── */
.sc-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* "Details" button inside card — always navigates */
.sc-details-btn,
.sc-file-btn {
  pointer-events: auto !important;
}

/* Prevent sub-card cards from being clickable */
.ms-swipe-card[data-depth="1"],
.ms-swipe-card[data-depth="2"],
.ms-swipe-card[data-depth="3"] {
  pointer-events: none !important;
  cursor: default !important;
}

/* ── Action button overrides for new semantics ───────────────────────────── */
/* "I Want This" button — gold filled heart */
.sc-file-btn {
  background: linear-gradient(135deg, var(--ms-gold, #d4af37) 0%, var(--ms-gold-dark, #a88a20) 100%);
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
  gap: 6px;
}

.sc-file-btn svg {
  fill: #fff !important;
  stroke: none !important;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* "Details" button — neutral gray */
.sc-details-btn {
  background: #f3f4f6;
  color: #374151 !important;
}

/* ── Swipe instructions: update right label color to gold ────────────────── */
.ms-swipe-instructions .sc-hint-label--right {
  color: var(--ms-gold-dark, #a88a20);
  font-weight: 700;
}

/* ── Graceful no-JS fallback: show static grid (hidden by default) ────────── */
.sc-no-js-fallback {
  display: none;
}
.no-js .sc-no-js-fallback {
  display: block;
}
.no-js #ms-swipe-section {
  display: none !important;
}

/* ── Prefers reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sc-hint {
    transition: none !important;
  }
}