/* ============================================================================
 * bc-community-marks.css  — Vwhater.40
 * ----------------------------------------------------------------------------
 * Styles for:
 *  - Community mark pins (light blue, smaller, subordinate to Reedy's yellow)
 *  - "Locked" toggles: visible-but-greyed for free users, padlock icon, when
 *    clicked they fire the Coming Soon Pro modal instead of toggling.
 *  - PRO badge / pill used in the layers panel and Coming Soon modal.
 * ============================================================================ */

/* Pulse-on-load animation for community pins so users see them appear after
 * toggling. Subtle — 1 cycle then stop. */
.mk-community { animation: mk-comm-pop 0.35s ease-out 1; }
@keyframes mk-comm-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Locked toggle (Pro-gated, free user) ----------
   Wraps a normal .toggle row but the checkbox is non-interactive and the
   row shows a padlock. Clicking anywhere on the row fires BCPro.show(). */
.toggle.bc-locked {
  position: relative;
  opacity: 0.55;
  cursor: pointer;
  filter: grayscale(0.4);
}
.toggle.bc-locked input[type="checkbox"] {
  pointer-events: none;
}
.toggle.bc-locked::after {
  content: "🔒";
  margin-left: 6px;
  font-size: 12px;
  filter: grayscale(1);
  opacity: 0.85;
}
.toggle.bc-locked:hover {
  opacity: 0.78;
  filter: grayscale(0.15);
}
/* When the layers panel is in mobile bottom-sheet mode the locked toggle
 * still needs to be tappable — keep pointer events on the wrapper. */
.toggle.bc-locked * { pointer-events: none; }
.toggle.bc-locked { pointer-events: auto; }

/* ---------- PRO badge pill (replaces ELITE/NEW where appropriate) ---------- */
.pro-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #0c1828 0%, #1a2a40 100%);
  color: #f6c23b;
  border: 1px solid #f6c23b;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: 1px;
  text-transform: uppercase;
}

/* ---------- Coming Soon Pro modal ---------- */
.bc-pro-modal { max-width: 380px; }
.bc-pro-badge {
  display: inline-block;
  background: #0c1828;
  color: #f6c23b;
  border: 1.5px solid #f6c23b;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ---------- Locked feature buttons (Bite forecast etc) ---------- */
.bc-pro-locked-btn {
  position: relative;
  filter: grayscale(0.55);
  opacity: 0.78;
}
.bc-pro-locked-btn::after {
  content: "\1F512"; /* padlock */
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  background: #0c1828;
  color: #f6c23b;
  border-radius: 50%;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #f6c23b;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Mobile: keep fishing-mark pins tappable and visible ---------- */
@media (max-width: 700px) {
  .mk-community svg {
    /* Slightly larger tap target on small screens */
    width: 24px !important;
    height: 30px !important;
  }
}

/* ---------- Popup link hover (community marks render on dark popup) ---------- */
.bc-comm-popup a:hover { filter: brightness(1.15); }