/* HCM PEOPLE PWA UI */
:root {
  --hcm-pwa-blue: #3063A0;
  --hcm-pwa-blue-dark: #254f82;
  --hcm-pwa-text: #1f2a37;
  --hcm-pwa-muted: #5b6b7c;
  --hcm-pwa-surface: #ffffff;
  --hcm-pwa-shadow: 0 10px 30px rgba(31, 42, 55, 0.18);
}

#hcm-pwa-loading {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 99990;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(48, 99, 160, 0.18);
  box-shadow: 0 4px 14px rgba(48, 99, 160, 0.12);
  color: var(--hcm-pwa-muted);
  font: 12px/1.2 "Segoe UI", Tahoma, sans-serif;
  pointer-events: none;
}

#hcm-pwa-loading.is-visible {
  display: inline-flex;
}

#hcm-pwa-loading .hcm-pwa-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(48, 99, 160, 0.25);
  border-top-color: var(--hcm-pwa-blue);
  border-radius: 50%;
  animation: hcm-pwa-spin 0.7s linear infinite;
}

@keyframes hcm-pwa-spin {
  to { transform: rotate(360deg); }
}

#hcm-pwa-install-btn {
  position: fixed;
  right: 12px;
  bottom: 10px;
  z-index: 99980;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--hcm-pwa-blue);
  color: #fff;
  font: 600 14px/1.2 "Segoe UI", Tahoma, sans-serif;
  box-shadow: var(--hcm-pwa-shadow);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#hcm-pwa-install-btn:hover {
  background: var(--hcm-pwa-blue-dark);
  transform: translateY(-1px);
}

#hcm-pwa-install-btn.is-visible {
  display: inline-flex;
}

#hcm-pwa-install-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

#hcm-pwa-ios-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

#hcm-pwa-ios-overlay.is-visible {
  display: flex;
}

#hcm-pwa-ios-modal {
  width: 100%;
  max-width: 420px;
  background: var(--hcm-pwa-surface);
  border-radius: 16px 16px 12px 12px;
  box-shadow: var(--hcm-pwa-shadow);
  padding: 22px 20px 18px;
  color: var(--hcm-pwa-text);
  font: 14px/1.45 "Segoe UI", Tahoma, sans-serif;
}

#hcm-pwa-ios-modal h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--hcm-pwa-blue);
}

#hcm-pwa-ios-modal p {
  margin: 0 0 14px;
  color: var(--hcm-pwa-muted);
}

#hcm-pwa-ios-modal ol {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--hcm-pwa-text);
}

#hcm-pwa-ios-modal li {
  margin-bottom: 8px;
}

#hcm-pwa-ios-modal .hcm-pwa-ios-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#hcm-pwa-ios-modal button {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 13px/1 "Segoe UI", Tahoma, sans-serif;
  cursor: pointer;
}

#hcm-pwa-ios-modal .hcm-pwa-ios-close {
  background: #e8eef7;
  color: var(--hcm-pwa-blue-dark);
}

@media (max-width: 480px) {
  #hcm-pwa-install-btn {
    right: 12px;
    bottom: 10px;
    padding: 11px 14px;
    font-size: 13px;
  }
}