/**
 * HTML Sitemap Settings Styles
 *
 * @package ProRank\SEO\Admin\Settings\TechnicalSEO
 * @since   0.1.0
 */

.prorank-html-sitemap-settings {
  max-width: 100%;
}

.prorank-html-sitemap-settings .prorank-shortcode-section {
  margin: 20px 0;
  padding: 15px;
  background-color: var(--wp-admin-theme-color-lighter);
  border-radius: 4px;
}

.prorank-html-sitemap-settings .prorank-shortcode-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.prorank-html-sitemap-settings .prorank-shortcode-display code {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
}

.prorank-html-sitemap-settings .prorank-custom-css {
  width: 100%;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.prorank-html-sitemap-settings pre {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}

.prorank-html-sitemap-settings code {
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.9em;
}

.prorank-html-sitemap-settings h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

.prorank-html-sitemap-settings .components-panel__body {
  margin-top: 16px;
}

/* Dark Mode Support */
body.admin-color-modern .prorank-html-sitemap-settings .prorank-shortcode-section,
body.admin-color-midnight .prorank-html-sitemap-settings .prorank-shortcode-section {
  background-color: rgb(255 255 255 / 5%);
}

body.admin-color-modern .prorank-html-sitemap-settings .prorank-shortcode-display code,
body.admin-color-midnight .prorank-html-sitemap-settings .prorank-shortcode-display code {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

body.admin-color-modern .prorank-html-sitemap-settings .prorank-custom-css,
body.admin-color-midnight .prorank-html-sitemap-settings .prorank-custom-css {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

body.admin-color-modern .prorank-html-sitemap-settings pre,
body.admin-color-midnight .prorank-html-sitemap-settings pre {
  background-color: #2a2a2a;
  color: #fff;
}

body.admin-color-modern .prorank-html-sitemap-settings code,
body.admin-color-midnight .prorank-html-sitemap-settings code {
  background-color: #333;
  color: #fff;
}