/* ────────────────────────────────────────────────────────────────────────────
   Monochrome Share Icons Redesign — Task #826970

   Replaces multicolor brand styling with clean, professional monochrome look.
   - Light gray/muted outline buttons (consistent look)
   - Subtle highlight on hover (slight darkening)
   - Clean, professional appearance
   - Maintains full functionality

   Override for: share-btns.ejs
   ──────────────────────────────────────────────────────────────────────────── */

/* Base share button styling — monochrome palette */
.sr-share-btn {
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
}

.sr-share-btn:hover {
  background: #d1d5db;
  color: #1f2937;
  border-color: #9ca3af;
}

.sr-share-btn:active {
  background: #9ca3af;
  color: #fff;
  border-color: #6b7280;
}

/* All social platforms — unified monochrome styling */
.sr-share-facebook,
.sr-share-twitter,
.sr-share-whatsapp,
.sr-share-reddit,
.sr-share-linkedin,
.sr-share-sms {
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
}

.sr-share-facebook:hover,
.sr-share-twitter:hover,
.sr-share-whatsapp:hover,
.sr-share-reddit:hover,
.sr-share-linkedin:hover,
.sr-share-sms:hover {
  background: #d1d5db;
  color: #1f2937;
  border-color: #9ca3af;
}

.sr-share-facebook:active,
.sr-share-twitter:active,
.sr-share-whatsapp:active,
.sr-share-reddit:active,
.sr-share-linkedin:active,
.sr-share-sms:active {
  background: #9ca3af;
  color: #fff;
  border-color: #6b7280;
}

/* Email button — consistent monochrome */
.sr-share-email {
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
}

.sr-share-email:hover {
  background: #d1d5db;
  color: #1f2937;
  border-color: #9ca3af;
}

.sr-share-email:active {
  background: #9ca3af;
  color: #fff;
  border-color: #6b7280;
}

/* Copy button — subtle gray with success state preserved */
.sr-share-copy {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.sr-share-copy:hover {
  background: #e5e7eb;
  color: #1f2937;
  border-color: #9ca3af;
}

.sr-share-copy:active {
  background: #d1d5db;
  border-color: #9ca3af;
}

/* Copy confirmed state — accent green preserved for success feedback */
.sr-share-copy.sr-share-copied {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

/* Native share button — muted tone */
.sr-share-native {
  background: #d1d5db;
  color: #4b5563;
  border: 1px solid #b3b8c1;
}

.sr-share-native:hover {
  background: #c4cad3;
  color: #374151;
  border-color: #9ca3af;
}

/* Spacing — maintain consistent gap between icons */
.sr-share-wrap {
  gap: 8px;
}

.sr-share-btns {
  gap: 6px;
}

/* Smooth transitions for all state changes */
.sr-share-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: Light accent on focus (for accessibility) */
.sr-share-btn:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}

/* Responsive adjustments for pill variant */
@media (max-width: 640px) {
  .sr-share-wrap--pill .sr-share-btn {
    background: #e5e7eb;
    color: #374151;
    border: 1px solid #d1d5db;
  }

  .sr-share-wrap--pill .sr-share-btn:hover {
    background: #d1d5db;
    color: #1f2937;
    border-color: #9ca3af;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */