/**
 * PJP Universal Save & Share Button Styles
 * Consistent appearance across Home, Archive, and Single pages.
 */

/* ── Icon-only save button (used in card lists on home/archive) ── */
.pjp-save-btn.pjp-save-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px !important;
  border: 1.5px solid #cbd5e1;
  background-color: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.pjp-save-btn.pjp-save-icon-btn:hover {
  background-color: #dbeafe !important;
  color: #1677D2 !important;
  border-color: #93c5fd !important;
  transform: scale(1.08);
}

.pjp-save-btn.pjp-save-icon-btn[data-saved="1"] {
  background-color: #eff6ff !important;
  color: #1677D2 !important;
  border-color: #93c5fd !important;
}

.pjp-save-btn.pjp-save-icon-btn[data-saved="1"] svg {
  fill: currentColor !important;
}

.pjp-save-btn.pjp-save-icon-btn[data-saved="0"] svg,
.pjp-save-btn.pjp-save-icon-btn:not([data-saved]) svg {
  fill: none !important;
}

/* ── Full pill/label button (used on single job pages) ── */
.pjp-save-btn.pjp-save-full-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

.pjp-save-btn.pjp-save-full-btn[data-saved="0"],
.pjp-save-btn.pjp-save-full-btn:not([data-saved]) {
  background-color: #1677D2 !important;
  color: #ffffff !important;
  border: 1.5px solid #1677D2 !important;
  box-shadow: 0 4px 12px rgba(22, 119, 210, 0.3);
}

.pjp-save-btn.pjp-save-full-btn[data-saved="0"]:hover,
.pjp-save-btn.pjp-save-full-btn:not([data-saved]):hover {
  background-color: #0757A8 !important;
  border-color: #0757A8 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 119, 210, 0.4);
}

.pjp-save-btn.pjp-save-full-btn[data-saved="1"] {
  background-color: #eff6ff !important;
  color: #1677D2 !important;
  border: 1.5px solid #93c5fd !important;
  box-shadow: none;
}

.pjp-save-btn.pjp-save-full-btn[data-saved="1"]:hover {
  background-color: #dbeafe !important;
  border-color: #60a5fa !important;
}

.pjp-save-btn.pjp-save-full-btn[data-saved="1"] svg {
  fill: currentColor !important;
}

.pjp-save-btn.pjp-save-full-btn[data-saved="0"] svg,
.pjp-save-btn.pjp-save-full-btn:not([data-saved]) svg {
  fill: none !important;
}

/* ── Disabled state ── */
.pjp-save-btn:disabled,
.pjp-save-btn[disabled] {
  opacity: 0.6 !important;
  cursor: wait !important;
  transform: none !important;
}

/* ── Share button ── */
.pjp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.15s ease;
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #1677D2 !important;
  color: #ffffff !important;
  border: 1.5px solid #1677D2 !important;
  box-shadow: 0 4px 12px rgba(22, 119, 210, 0.3);
}

.pjp-share-btn:hover {
  background-color: #0757A8 !important;
  border-color: #0757A8 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 119, 210, 0.4);
}

/* Icon-only share button variant */
.pjp-share-btn.pjp-share-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
  box-shadow: none;
}

.pjp-share-btn.pjp-share-icon-btn:hover {
  background-color: #dbeafe !important;
  color: #1677D2 !important;
  border-color: #93c5fd !important;
  transform: scale(1.08);
}

/* ── Mobile top header icon buttons (40x40 touch target) ── */
.pjp-save-btn.pjp-mobile-top-btn,
.pjp-share-btn.pjp-mobile-top-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* ── Universal toast (fallback when page has no toast) ── */
#pjp-universal-toast {
  font-family: 'Inter', system-ui, sans-serif;
}