/**
 * SFP code boxes — theme/Elementor-resistant.
 * Wrapper .sfp-code-block is injected at render time (header + Copy).
 */

.sfp-code-block {
  position: relative !important;
  display: block !important;
  margin: 1.35rem 0 1.6rem !important;
  border-radius: 10px !important;
  border: 1px solid #1e293b !important;
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

.sfp-code-block__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.55rem 0.85rem !important;
  background: #111827 !important;
  border-bottom: 1px solid #1f2937 !important;
}

.sfp-code-block__lang {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  line-height: 1 !important;
}

.sfp-code-block__copy {
  appearance: none !important;
  cursor: pointer !important;
  border: 1px solid #334155 !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 0.28rem 0.65rem !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.sfp-code-block__copy:hover,
.sfp-code-block__copy:focus-visible {
  background: #334155 !important;
  border-color: #64748b !important;
  outline: none !important;
}

.sfp-code-block__copy.is-copied {
  background: #14532d !important;
  border-color: #166534 !important;
  color: #bbf7d0 !important;
}

.sfp-code-block__pre,
.sfp-code-block pre,
pre.sfp-code,
pre.sfp-code-block__pre {
  display: block !important;
  margin: 0 !important;
  padding: 1rem 1.1rem 1.15rem !important;
  overflow-x: auto !important;
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.sfp-code-block__pre code,
.sfp-code-block pre code,
pre.sfp-code > code,
pre.sfp-code-block__pre > code {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #e2e8f0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  white-space: pre !important;
  tab-size: 2 !important;
  box-shadow: none !important;
}

/* Bare pre.sfp-code before JS/PHP wrap (fallback) */
pre.sfp-code:not(.sfp-code-block__pre) {
  margin: 1.35rem 0 1.6rem !important;
  padding: 1rem 1.1rem !important;
  border-radius: 10px !important;
  border: 1px solid #1e293b !important;
  background: #0b1220 !important;
  color: #e2e8f0 !important;
}

/* Inline tokens (body + Elementor FAQ text-editor slots) */
code.sfp-inline-code,
.elementor-widget-theme-post-content p > code,
.elementor-widget-theme-post-content li > code,
.elementor-widget-text-editor code,
.elementor-widget-text-editor p > code,
.entry-content p > code,
.entry-content li > code {
  display: inline !important;
  padding: 0.12em 0.4em !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 0.9em !important;
  white-space: break-spaces !important;
}

.sfp-code-block code.sfp-inline-code,
.sfp-code-block__pre code.sfp-inline-code {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
}

@media (max-width: 640px) {
  .sfp-code-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
  }
}