/* Reusable code block with copy button.
   Injected wherever a .code-block-wrapper appears (blog posts, SEO text, etc.).
   Overrides the generic .copy-btn pill styling from base_elements.css so the
   copy button sits in the top-right corner as an icon-only control. */

.code-block-wrapper {
  position: relative !important;
  display: block;
  width: 100%;
  margin: 15px 0;
}

.code-block-wrapper pre {
  margin: 0;
  padding: 15px;
  position: relative;
  overflow: auto;
}

.code-block-wrapper .copy-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: var(--code-bg, var(--card-bg)) !important;
  border: 1px solid var(--code-border, var(--border-color)) !important;
  border-radius: 6px;
  color: var(--muted-text) !important;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
  font-family: inherit !important;
  font-size: 14px !important;
}

.code-block-wrapper .copy-btn:hover {
  border-color: var(--primary-blue) !important;
  color: var(--primary-blue) !important;
  background: var(--info-item-bg) !important;
}

.code-block-wrapper .copy-btn.copied {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
}

.code-block-wrapper .copy-btn i {
  font-size: 0.95em;
  margin: 0;
  line-height: 1;
}

.code-block-wrapper .copy-btn span {
  display: none;
}