/**
 * SEOPress React Settings Styles
 * Matches existing PHP layout exactly
 */

/* Loading and Error States */
.seopress-settings-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    padding: 40px;
}

.seopress-settings-loading .spinner {
    float: none;
}

.seopress-settings-error {
    padding: 20px;
    background: #FEF7F1;
    border-left: 4px solid #D63638;
    margin: 20px 0;
}

/* Remove gap between title and content */
#seopress-admin-settings-root.seopress-option {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

/* Separate the PRO license reminder from the settings content below it.
 * The Dashboard already leaves a gap (its app sits right after the notice),
 * so only space it when it precedes the settings layout. */
.seopress-license-notice.components-notice:has(+ .seopress-settings-layout) {
    margin-bottom: 20px;
}

/* Main Layout - Match PHP #seopress-tabs */
.seopress-settings-layout {
    margin: 0;
}

/* "Rate this plugin" notice — sits above the settings content. */
.seopress-review-prompt.components-notice {
    margin: 0 0 16px;
}

.seopress-review-prompt__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.seopress-review-prompt__text {
    margin-right: 4px;
}

.seopress-settings-container {
    display: flex;
    flex-wrap: wrap;
}

/* Sidebar - Match PHP .nav-tab-wrapper */
.seopress-sidebar {
    margin: 0;
    padding: 0;
    line-height: inherit;
    min-width: 180px;
	max-width: 180px;
	width: 180px;
    z-index: 10;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 106px;
    align-self: flex-start;
}

.seopress-sidebar-nav {
    display: flex;
    flex-direction: column;
}

/* Sidebar tabs - Match PHP .nav-tab exactly */
.seopress-sidebar-tab {
    border: 0;
    background: 0 0;
    padding: 6px 30px 6px 10px;
    transition: opacity 0.3s linear;
    color: #0C082F !important; /* Override .seopress-option a color */
    opacity: 0.5;
    margin: 0;
    display: block;
    width: 100%;
    text-align: left;
    font-weight: normal;
    white-space: normal;
    line-height: 1.5;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.seopress-sidebar-tab:hover {
    opacity: 1;
}

.seopress-sidebar-tab.is-active {
    opacity: 1;
    font-weight: 600;
    border-left-color: var(--wp-admin-theme-color);
}

.seopress-sidebar-tab:focus {
    outline: 0;
    box-shadow: none;
}

/* Save Bar */
.seopress-save-bar {
    position: fixed;
    bottom: 32px;
    z-index: 100;
    display: inline-flex;
    flex-direction: column;
    /* flex-start, not stretch: in a column the children would otherwise all
       take the width of the widest one, so "Save changes" was stretched to
       the width of "Undo changes" sitting under it. That second button keeps
       its box even when hidden (visibility, not display, so the bar does not
       jump when it appears), and translations make it far longer than the
       English string, which is where the button turned into a banner. */
    align-items: flex-start;
    gap: 4px;
    transform: translateY(80px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.seopress-save-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Snackbar list - fixed to viewport bottom-right */
.components-snackbar-list.seopress-snackbar-list {
    position: fixed !important;
    bottom: 20px !important;
    right: 24px !important;
    left: auto !important;
    z-index: 100000 !important;
    width: auto !important;
}

/* Hide the old PHP-based snackbar on React settings pages */
#seopress-notice-save {
    display: none !important;
}

/* Content Area - Match PHP .seopress-tab */
.seopress-settings-content {
    padding: 2rem;
    display: inline-block;
    background: #fff;
    border-radius: 8px;
    flex: 1;
    min-width: 0;
}

/* Section header — heading + feature toggle, side-by-side */
.seopress-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 1.5rem 0;
}

.seopress-php-header > .seopress-section-header {
    margin: 0;
}

/* Section Title - Match PHP version */
.seopress-section-title {
    margin: 0;
    padding: 0;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.3;
    color: #1D2327;
}

.seopress-feature-toggle {
    margin: 0;
}

/* Feature toggle — state badge + control, side-by-side */
.seopress-feature-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.seopress-feature-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.seopress-feature-badge.is-enabled {
    background: rgba(74, 184, 102, 0.12);
    color: var(--colorSuccess, #4ab866);
    border-color: rgba(74, 184, 102, 0.35);
}

.seopress-feature-badge.is-disabled {
    background: #fff;
    color: #646970;
    border-color: #dcdcde;
}

/* Info Box - Purple left border */
.seopress-info-box {
    border-left: 4px solid var(--wp-admin-theme-color);
    padding: 15px 20px;
    margin: 0 0 20px 0;
    background: #fff;
    color: #1D2327;
    font-size: 14px;
    line-height: 1.6;
}

/* Tab Content */
.seopress-tab-content {
    max-width: 100%;
}

/* Subsection Titles */
.seopress-subsection-title {
    margin: 2rem 0 1rem 0;
}

.seopress-subsection-title:first-child {
    margin-top: 0;
}

/* Field Row - HORIZONTAL layout, NO BORDERS */
.seopress-field-row {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    gap: 20px;
}

/* Field Label - BOLD */
.seopress-field-label {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1D2327;
    line-height: 1.6;
    padding-top: 10px;
}

.seopress-field-control {
    flex: 1;
    min-width: 0;
    max-width: 600px;
}

/* PanelBody / Notice nested inside a field control needs breathing
 * room from the input above and from any sibling control below. */
.seopress-field-control > .components-panel__body,
.seopress-field-control > .components-notice {
    margin: 12px 0;
}

/* Buttons after inputs inside field controls */
.seopress-field-control .btn {
    margin-top: 8px;
}

/* Raw <textarea> children (e.g. PRO llms.txt, robots.txt, htaccess
 * editors) need to fill the field control like the native
 * TextareaControl does — without this they fall back to the browser
 * default cols=20 width, since WP admin `.large-text` doesn't target
 * textareas. */
.seopress-field-control > textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Field Components */
.seopress-field {
    margin-bottom: 0;
}

/* =============================================
   Token Editor — contentEditable input for dynamic variable templates.
   Visual is locked to native @wordpress/components TextControl
   (with __next40pxDefaultSize) so the editor sits visually iso with
   <TextControl> / <TextareaControl> on the same form.
   ============================================= */

.seopress-token-editor-wrapper {
    width: 100%;
    position: relative;
}

.seopress-token-editor {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 2px;
    color: #1e1e1e;
    font-family: inherit;
    font-size: 13px;
    line-height: 2.2;
    padding: 3px 30px 0 8px;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.seopress-token-editor--multiline {
    min-height: 80px;
    line-height: 1.8;
    padding: 8px 30px 8px 8px;
}

.seopress-token-editor:hover {
    border-color: var(--wp-admin-theme-color);
}

.seopress-token-editor:focus {
    border-color: var(--wp-admin-theme-color);
    box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
    outline: 2px solid transparent;
    outline-offset: 0;
}

/* Placeholder via data-attribute + :empty pseudo-class */
.seopress-token-editor:empty::before {
    content: attr(data-placeholder);
    color: #757575;
    pointer-events: none;
    display: block;
}

/* Token pill — inline variable tag, vertically centered in the
 * editor's line-height. */
.seopress-token {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
    color: var(--wp-admin-theme-color);
    border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.2);
    border-radius: 3px;
    padding: 0 6px;
    margin: 0 1px;
    height: 22px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.seopress-token:hover {
    background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
    border-color: rgba(var(--wp-admin-theme-color--rgb), 0.35);
}

/* Drag & drop states */
.seopress-token--dragging {
    opacity: 0.3;
    cursor: grabbing;
}

.seopress-token--drop-before::before,
.seopress-token--drop-after::after {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--wp-admin-theme-color);
    border-radius: 1px;
}

.seopress-token--drop-before::before {
    left: -5px;
}

.seopress-token--drop-after::after {
    right: -5px;
}

.seopress-token-label {
    pointer-events: none;
}

/* CSS tooltip showing the %%var%% key on hover */
.seopress-token::after {
    content: attr(data-var);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1e1e1e;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.seopress-token:hover::after {
    opacity: 1;
}

/* Hide tooltip while dragging */
.seopress-token--dragging::after {
    display: none;
}

/* Token remove button */
.seopress-token-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wp-admin-theme-color);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.seopress-token-remove:hover {
    opacity: 1;
    background: rgba(var(--wp-admin-theme-color--rgb), 0.15);
}

.seopress-token-remove:focus {
    outline: none;
    opacity: 1;
}

/* Clear all button — vertically centered inside a single-line editor,
 * pinned to the top-right corner inside the multiline variant. */
.seopress-token-clear-btn {
    position: absolute;
    top: 10px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0 0 1px 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #757575;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.seopress-token-clear-btn:hover {
    color: var(--colorAlert, #eb0f00);
    background: rgba(235, 15, 0, 0.08);
}

/* Preview line — sits below the editor, mirrors the WP help text style
 * so the dynamic preview reads like a native components-base-control
 * help paragraph. */
.seopress-token-preview {
    margin-top: 8px;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #757575;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seopress-token-preview-label {
    color: var(--color, #757575);
    font-weight: 600;
}

.seopress-token-preview-text {
    font-style: italic;
}

/* Dropdown — highlighted item (keyboard nav) */
.seopress-variable-item--highlighted {
    background: rgba(var(--wp-admin-theme-color--rgb), 0.08) !important;
}

/* Dropdown — "in use" badge */
.seopress-variable-used-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colorSuccess, #4ab866);
    background: rgba(74, 184, 102, 0.1);
    border-radius: 3px;
    vertical-align: middle;
}

/* Field Error State */
.seopress-field.has-error input[type="text"],
.seopress-field.has-error textarea {
    border-color: #d63638;
}

.seopress-field.has-error input[type="text"]:focus,
.seopress-field.has-error textarea:focus {
    border-color: #d63638;
    box-shadow: 0 0 0 1px #d63638;
}

/* Form fields in error state — colour the native WP help paragraph red
 * so the error message rendered via TextControl/TextareaControl's help
 * prop stands out without us shipping a custom error block. */
.seopress-field.has-error .components-base-control__help {
    color: #d63638;
}

/* Inline <code> snippets inside a field's help slot — render as a
 * block-level code box (single gray background, proper padding) so
 * long HTML / header examples don't break into per-line slabs. */
.components-base-control__help > code,
.components-base-control__help br + code {
    display: block;
    padding: 6px 10px;
    margin-top: 4px;
    line-height: 1.6;
    word-break: break-all;
}

/* Columns picker — preview row + grouped checkbox grid used in the
 * Advanced › Appearance tab. The preview shows pills for the active
 * SEO columns next to the WP defaults so the impact on the post-list
 * table is visible immediately; the grid below replaces a long stack
 * of toggles with categorised, scannable checkboxes. */
.seopress-columns-preview {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 10px 14px;
    margin: 12px 0 24px;
}

.seopress-columns-preview-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #646970;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.seopress-columns-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.seopress-col-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.seopress-col-pill.is-default {
    background: #fff;
    color: #646970;
    border-color: #dcdcde;
}

.seopress-col-pill.is-active {
    background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
    color: var(--wp-admin-theme-color);
    border-color: rgba(var(--wp-admin-theme-color--rgb), 0.3);
}

.seopress-col-pill-empty {
    font-size: 12px;
    color: #646970;
    font-style: italic;
}

.seopress-columns-group {
    margin-bottom: 18px;
}

.seopress-columns-group-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #646970;
    letter-spacing: 0.4px;
    margin: 0 0 10px;
}

.seopress-columns-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 20px;
    align-items: start;
}

.seopress-columns-grid .components-base-control {
    margin-bottom: 0;
}

/* Tools › Settings › Import-Export — native Card layout that
 * replaces the legacy `.postbox .inside` wrappers (which inherited
 * the WP admin metabox styling, including the square <li> bullets
 * leaking from the old options page). The field list is rendered
 * as the same neutral pills used for the column preview, and the
 * post-type / taxonomy checkboxes reuse the columns grid for
 * visual consistency across the settings UI. */
.seopress-tools-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    margin-top: 12px;
}

/* Result notice (success/error) shown right after an action row needs to
 * breathe — otherwise it sits flush against the button. */
.seopress-tools-actions + .components-notice {
    margin-top: 12px;
}

/* Give the reusable-config toggle (and its help text) room to breathe from
 * the surrounding intro paragraph and whatever follows it (the exclusion
 * list or the sensitive-credentials notice). */
.seopress-export-reusable-toggle {
    margin: 16px 0;
}

.seopress-export-reusable-toggle .components-base-control__help {
    margin-bottom: 0;
}

/* Reusable-config exclusion list: indented under its toggle so the
 * granular checkboxes read as children of the "reusable configuration"
 * option. */
.seopress-export-exclusions {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 3px solid var(--wp-admin-theme-color, #2271b1);
    background: rgba(var(--wp-admin-theme-color--rgb, 34, 113, 177), 0.04);
}

.seopress-export-exclusions__label {
    margin: 0 0 8px;
    font-weight: 600;
    color: #1d2327;
}

.seopress-export-exclusions .components-checkbox-control {
    margin-bottom: 6px;
}

.seopress-export-exclusions .components-checkbox-control:last-child {
    margin-bottom: 0;
}

.seopress-tools-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 12px;
    color: #646970;
}

/* Stretch the WP <ProgressBar> to fill the card and apply the WP admin
 * accent color to the fill — same pattern as the site-audit progress
 * bar. The wrapper neutralises the flex auto-sizing of <ProgressBar>;
 * `!important` beats Emotion's runtime styles that land after this
 * stylesheet (the audit bar does the same). */
.seopress-tools-progress-wrap {
    flex: 1;
    width: 100%;
}

/* The custom className is forwarded to the Emotion-styled Track div
 * (the WP <ProgressBar> root) — same approach as the audit overview. */
.seopress-tools-progress-bar {
    width: 100% !important;
    max-width: none;
    height: 6px;
    border-radius: 999px;
}

.seopress-tools-progress-bar > div {
    background-color: var(--wp-admin-theme-color);
}

.seopress-tools-progress > span {
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    text-align: right;
}

/* Universal metabox YouTube thumbnail link — keep the image
 * responsive within the container instead of relying on a fixed
 * width attribute that overflows on narrow tabs/screens. */
.wrap-yt-embed {
    display: inline-block;
    max-width: 500px;
    width: 100%;
}

.wrap-yt-embed img {
    display: block;
    width: 100%;
    height: auto;
}

/* Quick-var chips — row of native <Button variant="tertiary"
 * size="compact"> rendered under the editor + preview. Override the
 * tertiary defaults with a neutral light-gray fill so the chips read
 * as helpers (not primary actions); on hover they pick up the WP
 * theme color tint to confirm interactivity. */
.seopress-variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    align-items: center;
}

.seopress-variable-chips .components-button.is-tertiary {
    background: #f0f0f1;
    color: #1e1e1e;
}

.seopress-variable-chips .components-button.is-tertiary:hover:not(:disabled) {
    background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
    color: var(--wp-admin-theme-color);
}

.seopress-more-variables-wrapper {
    position: relative;
}

/* Variables Popover */
.seopress-variables-popover {
    z-index: 100001 !important;
}

.seopress-variables-popover .components-popover__content {
    padding: 0;
    /* Fixed 280px on desktop, but never wider than the viewport (minus a small
       gutter) so the dropdown can't overflow off-screen on mobile. Combined
       with the Popover `shift` prop, which slides it back into view. */
    width: 280px;
    max-width: calc(100vw - 24px);
    max-height: 300px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);
}

.seopress-variables-list {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Native SearchControl sits at the top of the variables list, with a
 * single divider underneath. */
.seopress-variables-list .seopress-variables-search {
    border-bottom: 1px solid #f0f0f1;
    padding: 4px 8px;
}

.seopress-variables-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    max-height: 250px;
}

.seopress-variables-list li {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
    position: relative;
}

.seopress-variables-list li::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #646970;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.seopress-variables-list li:hover::after {
    opacity: 1;
}

.seopress-variables-list li:hover,
.seopress-variables-list li:focus {
    background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
    outline: none;
}

.seopress-variables-list li code {
    font-size: 12px;
    color: var(--wp-admin-theme-color);
    background: transparent;
    padding: 0;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.seopress-variables-list li span {
    font-size: 12px;
    color: #646970;
}

.seopress-variables-list li.seopress-no-results {
    cursor: default;
    color: #646970;
    font-style: italic;
}

.seopress-variables-list li.seopress-no-results:hover {
    background: transparent;
}

.seopress-variables-list li.seopress-no-results::after {
    display: none;
}

/* Toggle rows - same padding on both columns so text lines up */
.seopress-field-row:has(.seopress-toggle-field) .seopress-field-label {
    padding-top: 0;
}

/* Toggle Control - reset WP component margins */
.seopress-toggle-field .components-toggle-control,
.seopress-toggle-field .components-base-control {
    margin: 0;
}

/* Spacing between stacked toggle fields */
.seopress-toggle-field + .seopress-toggle-field {
    margin-top: 16px;
}

.seopress-toggle-field .components-base-control__field,
.seopress-toggle-field .components-toggle-control,
.seopress-toggle-field .components-base-control__field > label,
.seopress-toggle-field .components-flex {
    margin-bottom: 0;
    align-items: flex-start !important;
}

.seopress-toggle-field .components-form-toggle {
    flex-shrink: 0;
}

/* Toggle all panels button */
.seopress-panels-toggle-all {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.seopress-panels-toggle-all .components-button.is-link {
    color: var(--wp-admin-theme-color);
    text-decoration: none;
    font-size: 13px;
}

.seopress-panels-toggle-all .components-button.is-link:hover {
    text-decoration: underline;
}

/* Panel Accordion Styling - for Post Types/Taxonomies */
.seopress-panel {
    margin-bottom: 10px;
    border: 1px solid #E6E6E8;
    border-radius: 4px;
    background: #fff;
}

.seopress-panel .components-panel__body {
    border: none;
}

.seopress-panel .components-panel__body-title {
    border: none;
}

.seopress-panel .components-panel__body-title button {
    font-weight: 500;
    padding: 15px;
    font-size: 14px;
}

.seopress-panel .components-panel__body-title button:hover {
    background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
}

.seopress-panel-content {
    padding: 0 0 15px;
}

.seopress-panel-content .seopress-field-row {
    padding: 15px 0;
}

.seopress-panel-content .seopress-field-row:first-child {
    padding-top: 0;
}

/* Panel Header — Post Type Icon */
.seopress-panel-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--color, #757575);
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

.seopress-panel-icon--img {
    opacity: 0.6;
}

/* Panel Header — Robots Badges */
.seopress-robots-badges {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
    padding-left: 12px;
    margin-right: 28px;
}

.seopress-robots-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 3px;
    white-space: nowrap;
}

.seopress-robots-badge--noindex {
    background: rgba(235, 15, 0, 0.08);
    color: var(--colorAlert, #eb0f00);
}

.seopress-robots-badge--nofollow {
    background: rgba(227, 159, 72, 0.12);
    color: var(--colorLowAlert, #e39f48);
}

/* Hide badges when panel is open (toggles already visible) */
.seopress-panel.is-opened .seopress-robots-badges {
    display: none;
}

/* Ensure panel header button aligns icon + title + badges */
.seopress-panel .components-panel__body-title button {
    display: flex;
    align-items: center;
}

/* Reset .seopress-notice inside React layout (PHP default has top:85px, left:25px for classic view) */
.seopress-settings-content .seopress-notice {
    top: inherit;
    left: inherit;
    margin: 10px 0 20px 0;
    width: auto;
    border-bottom: 1px solid var(--borderColorLight, #E6E6E8);
}

/* Snackbar override - ensure consistent styling */
.seopress-snackbar-list .components-snackbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Media Upload Field — only the preview image needs constraining */
.seopress-media-upload-preview {
    max-width: 300px;
}

.seopress-media-upload-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #E6E6E8;
}

/* Sitemap Post Type / Taxonomy Listing (non-accordion style) */
.seopress_wrap_single_cpt,
.seopress_wrap_single_tax {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.seopress_wrap_single_cpt:last-child,
.seopress_wrap_single_tax:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.seopress_wrap_single_cpt h3,
.seopress_wrap_single_tax h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #1D2327;
}

.seopress_wrap_single_cpt h3 code,
.seopress_wrap_single_tax h3 code {
    font-size: 12px;
    font-weight: 400;
    color: #646970;
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 3px;
}

/* URL Counter — wraps native <ProgressBar> with a count label below */
.seopress-url-counter {
    margin-top: 8px;
}

.seopress-url-counter-text {
    margin: 6px 0 0;
    font-size: 13px;
    color: #1D2327;
}

/* Indexing Log */
.seopress-indexing-log pre {
    background: #f6f7f7;
    padding: 10px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 12px;
    max-height: 300px;
}

.seopress-indexing-urls {
    margin: 5px 0 0 20px;
    list-style: disc;
}

.seopress-indexing-urls li {
    word-break: break-all;
}

/* Color Picker Field */
.seopress-color-picker-wrapper {
    margin-bottom: 10px;
}

.seopress-color-picker-wrapper .description {
    margin-bottom: 5px;
    font-style: italic;
    color: #646970;
}

/*
 * This row is built from bare HTML controls, so nothing keeps it in step with
 * the `@wordpress/components` fields it sits among. Both references moved to
 * 40px: WP 7.1 raises the wp-admin text input from a 30px to a 40px min-height
 * with no opt out, and our own `TextControl` fields already ask for the 40px
 * size on every version we support (see Fields/TextField.jsx). A swatch pinned
 * to 36px was off on both sides of that change, so the whole row is sized from
 * one token instead.
 */
.seopress-color-picker-control {
    --seopress-color-picker-size: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.seopress-color-picker-swatch-wrap {
    position: relative;
    width: var(--seopress-color-picker-size);
    height: var(--seopress-color-picker-size);
    min-width: var(--seopress-color-picker-size);
}

.seopress-color-picker-swatch {
    width: var(--seopress-color-picker-size);
    height: var(--seopress-color-picker-size);
    min-width: var(--seopress-color-picker-size);
    border: 1px solid #8c8f94;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.seopress-color-picker-native {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--seopress-color-picker-size);
    height: var(--seopress-color-picker-size);
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

/*
 * Scoped to the wrapper so the two-class selector outranks the
 * `input[type="text"]` sizing wp-admin applies to this field.
 */
.seopress-color-picker-control .seopress-color-picker-input {
    box-sizing: border-box;
    width: 120px;
    height: var(--seopress-color-picker-size);
    min-height: var(--seopress-color-picker-size);
    padding: 4px 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-family: monospace;
}

.seopress-color-picker-control .seopress-color-picker-clear {
    box-sizing: border-box;
    height: var(--seopress-color-picker-size);
    background: none;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    color: #646970;
    font-size: 12px;
}

.seopress-color-picker-clear:hover {
    color: #d63638;
    border-color: #d63638;
}

/* Role Checkboxes — grid layout for the list of <CheckboxControl> rows */
.seopress-role-checkboxes {
    display: grid;
    gap: 4px 16px;
    margin: 8px 0 12px;
}

.seopress-security-page-roles {
    margin-bottom: 16px;
}

.seopress-security-page-roles h4 {
    margin: 12px 0 4px;
}

/* Cookie Bar Styling Sections */
.seopress-cb-section {
    margin-top: 20px;
}

.seopress-cb-section h2 {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.seopress-cb-section > p {
    margin: 0 0 15px 0;
    color: #646970;
}

.seopress-cb-section hr {
    margin: 25px 0 15px 0;
    border: none;
    border-top: 1px solid #f0f0f0;
}

/*
 * CardPicker — shared selectable-card grid (AI provider, plugin migration…).
 * Built on @wordpress/components Card/CardBody. Selection state uses
 * `.is-selected` + `aria-checked`; visual chrome leans on WP tokens.
 */
.seopress-card-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.seopress-card-picker__option {
    transition: box-shadow 0.15s ease;
}

.seopress-card-picker__option:hover:not(:has(:disabled)) {
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
}

.seopress-card-picker__option.is-selected {
    box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
}

.seopress-card-picker__body {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 100px;
    padding: 16px 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
    color: inherit;
}

.seopress-card-picker__body:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.seopress-card-picker__body:focus-visible {
    outline: 2px solid var(--wp-admin-theme-color);
    outline-offset: -2px;
}

.seopress-card-picker__logo {
    max-width: 100px;
    max-height: 48px;
    object-fit: contain;
}

.seopress-card-picker__label {
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    line-height: 1.3;
}

/*
 * Info cards grid — static feature/capability cards (Breadcrumbs how-to,
 * GSC integration capabilities, etc.). Built on @wordpress/components Card.
 */
.seopress-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.seopress-info-cards__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.seopress-info-cards p {
    margin: 0 0 8px;
    color: #50575e;
}

.seopress-info-cards code {
    display: inline-block;
    word-break: break-all;
}


/* Tint the dashicon-yes used as a checkmark in front of each
 * migration field — uses the WP admin accent color so the list
 * reads like a "these will be imported" confirmation. */
.seopress-migration-list .dashicon {
    color: var(--wp-admin-theme-color);
}

/* Instant Indexing — gap between consecutive engine response notices
 * (Bing then Google). WP's default <Notice> margin collapses to almost
 * nothing when two are stacked back-to-back inside .seopress-indexing-log. */
.seopress-indexing-response-card {
    max-width: 600px;
    margin: 0 0 12px;
}

/* Tools › Redirections — 3-card layout: Import / Export / Maintenance.
 * Replaces the previous flat stack of legacy `postbox` blocks with
 * native Card containers spaced via VStack. */
.seopress-tools-source-select {
    max-width: 500px;
    margin-bottom: 16px;
}

.seopress-tools-import-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 8px;
}

.seopress-tools-import-form input[type="file"] {
    flex: 1;
    min-width: 220px;
}

.seopress-tools-import-form .components-radio-control {
    flex-basis: 100%;
}

.seopress-tools-import-body .components-panel__body {
    margin-top: 16px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

/* Export grid — 2 cols on wide, auto-fit collapse on narrow. */
.seopress-tools-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.seopress-tools-export-tile {
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 14px 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.seopress-tools-export-tile h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.seopress-tools-export-tile p {
    font-size: 12px;
    color: #646970;
    margin: 0 0 12px;
    flex: 1;
}

/* Keep the CTA inline (text-sized) instead of stretching to the tile width
 * — the parent .seopress-tools-export-tile is a flex column, which would
 * otherwise apply the default align-items: stretch to the button. */
.seopress-tools-export-tile .components-button {
    align-self: flex-start;
}

/* Maintenance row — title/description on the left, action button on the right. */
.seopress-tools-maintenance-list {
    margin-top: 16px;
}

.seopress-tools-maintenance-row {
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f1;
}

.seopress-tools-maintenance-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.seopress-tools-maintenance-text {
    flex: 1;
    min-width: 0;
}

.seopress-tools-maintenance-text h4 {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.seopress-tools-maintenance-text p {
    margin: 0;
    font-size: 12px;
    color: #646970;
}

/* Import-confirmation modal: clean up the inline-styled summary table. */
.seopress-import-summary {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.seopress-import-summary td {
    padding: 6px 0;
}

.seopress-import-summary td:last-child {
    font-weight: 600;
    text-align: right;
}

.seopress-import-summary tr.is-success td {
    color: #007017;
}

.seopress-import-summary tr.is-error td {
    color: #cc1818;
}

.seopress-modal-actions {
    margin-top: 16px;
}

/* Inline Spinner inside an action button — small gap so the icon
 * doesn't sit flush against the label and the button doesn't shift
 * width when toggling between idle/busy states. */
.seopress-tools-export-tile .components-button .components-spinner,
.seopress-tools-maintenance-row .components-button .components-spinner {
    margin: 0 6px 0 0;
}

.seopress-migration-action {
    margin: 16px 0;
}

.seopress-migration-progress {
    margin: 16px 0;
    max-width: 500px;
}

/* Native <ProgressBar> (emotion-styled) renders a Track div (default width
   160px, height ~1.5px) wrapping an Indicator div. Force the Track to span its
   container and follow the admin theme accent color, for every progress bar
   rendered inside a .seopress-url-counter (migration + instant indexing).
   `!important` is required because emotion injects its runtime styles after
   this stylesheet. */
.seopress-url-counter .seopress-url-counter-progress {
    width: 100% !important;
    max-width: none;
    height: 6px;
    border-radius: 999px;
}

.seopress-url-counter .seopress-url-counter-progress > div {
    background-color: var(--wp-admin-theme-color);
}

/* Confirm Modal */
.seopress-confirm-modal {
    max-width: 480px !important;
}

.seopress-confirm-modal .components-modal__content {
    padding: 24px;
}

.seopress-confirm-modal p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.seopress-confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Responsive Design */
@media only screen and (max-width: 782px) {
    .seopress-settings-container {
        display: block;
    }

    .seopress-sidebar {
        width: 100%;
        min-width: 100%;
        min-height: auto;
        margin-bottom: 20px;
        position: static;
    }

    .seopress-sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

    .seopress-sidebar-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 8px 12px;
        width: auto;
    }

    .seopress-sidebar-tab.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--wp-admin-theme-color);
    }

    /* On mobile, drop the fixed/floating button entirely: a fixed bottom bar
       fights the browser UI and covers content on small screens. Render the
       save button in normal flow at the bottom of the form instead. */
    .seopress-save-bar {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-top: 20px;
        padding: 0;
    }

    /* Full-width "Save changes" button; hide "Undo changes" on mobile. */
    .seopress-save-bar .components-button {
        justify-content: center;
    }

    .seopress-save-bar .components-button.is-tertiary {
        display: none;
    }

    .seopress-settings-content {
        width: 100%;
        padding: 20px;
    }

    .seopress-field-row {
        flex-direction: column;
        gap: 8px;
    }

    .seopress-field-label {
        width: 100%;
        min-width: 100%;
        padding-top: 0;
    }

    .seopress-field-control {
        max-width: 100%;
    }
}

/* ── Field highlight (triggered by the command palette) ── */

.seopress-field-row.is-seopress-highlight {
	position: relative;
}

/* Background fill — less vertical gap to avoid overlapping neighbours */
.seopress-field-row.is-seopress-highlight::before {
	content: "";
	position: absolute;
	inset: -8px -15px;
	border-radius: 8px;
	background: rgba(var(--wp-admin-theme-color--rgb), 0.12 );
	pointer-events: none;
	animation: seopress-field-pulse 1s ease-in-out 3;
}

/* Border ring on top */
.seopress-field-row.is-seopress-highlight::after {
	content: "";
	position: absolute;
	inset: -8px -15px;
	border-radius: 8px;
	border: 2px solid var(--wp-admin-theme-color);
	pointer-events: none;
	animation: seopress-field-ring 1s ease-in-out 3;
}

@keyframes seopress-field-pulse {
	0%, 100% { opacity: 0; }
	50%      { opacity: 1; }
}

@keyframes seopress-field-ring {
	0%, 100% { opacity: 0; }
	50%      { opacity: 1; }
}

/*
 * Outline-neutral button variant.
 * Used for snippet/placeholder insertion buttons (Robots, LLMs, .htaccess tabs)
 * where the accent-coloured `is-secondary` would compete with primary CTAs.
 */
.seopress-btn-outline-neutral.components-button.is-secondary {
	box-shadow: inset 0 0 0 1px #c3c4c7;
	color: #1d2327;
	background: #fff;
	gap: 4px;
}

.seopress-btn-outline-neutral.components-button.is-secondary .dashicons {
	margin: 0;
}

.seopress-btn-outline-neutral.components-button.is-secondary:hover:not(:disabled) {
	box-shadow: inset 0 0 0 1px #8c8f94;
	color: #1d2327;
	background: #f6f7f7;
}

.seopress-btn-outline-neutral.components-button.is-secondary:active:not(:disabled) {
	box-shadow: inset 0 0 0 1px #8c8f94;
	background: #f0f0f1;
}

/*
 * Default <pre> behaviour inside settings tabs — wrap long lines so the
 * content stays inside the container (used by AI Logs / PageSpeed Logs).
 */
.seopress-tab-content pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/*
 * Stack of checkboxes inside a FieldRow (Google News post types,
 * White Label menu pages…). __nextHasNoMarginBottom removes the
 * default WP spacing, so we restore breathing room here.
 */
.seopress-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * Opening hours editor (Local Business tab).
 * Each day rendered as a subtle bordered card with a native h4 title.
 */
.seopress-opening-hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.seopress-opening-hours-day {
	margin: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	list-style: none;
}

.seopress-opening-hours-day__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.seopress-opening-hours-day__half {
	margin-top: 12px;
}

.seopress-opening-hours-day__range {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
}

.seopress-opening-hours-day__range select {
	width: auto;
}

/* SelectControl wraps the <select> in BaseControl markup; shrink the
 * wrapper so each picker stays compact inside the flex row. */
.seopress-opening-hours-day__select {
	flex: 0 0 auto;
}

.seopress-opening-hours-day__select .components-input-control__container,
.seopress-opening-hours-day__select select {
	width: auto;
	min-width: 0;
}

.seopress-opening-hours-day__range .range-sep {
	margin: 0 8px;
	color: #646970;
}

/* ---------------------------------------------------------------------------
 * Sitemap health check (Sitemaps → General)
 * ------------------------------------------------------------------------- */
.seopress-sitemap-test {
	margin: 16px 0 24px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.seopress-sitemap-test__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
}

.seopress-sitemap-test__header strong {
	font-size: 14px;
}

.seopress-sitemap-test__intro {
	margin: 4px 0 0;
	color: #646970;
}

.seopress-sitemap-test__header .components-button {
	flex: 0 0 auto;
}

.seopress-sitemap-test__header .components-spinner {
	margin: 0 6px 0 0;
}

.seopress-sitemap-test__error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 16px 16px;
	padding: 10px 12px;
	border-radius: 4px;
	background: rgba(235, 15, 0, 0.08);
	color: var(--colorAlert, #eb0f00);
}

.seopress-sitemap-test__result {
	border-top: 1px solid #dcdcde;
}

.seopress-sitemap-test__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px;
	border-left: 4px solid #dcdcde;
}

.seopress-sitemap-test__result.is-pass .seopress-sitemap-test__summary {
	border-left-color: var(--colorSuccess, #4ab866);
}

.seopress-sitemap-test__result.is-warning .seopress-sitemap-test__summary {
	border-left-color: var(--colorWarning, #ffba00);
}

.seopress-sitemap-test__result.is-error .seopress-sitemap-test__summary {
	border-left-color: var(--colorAlert, #eb0f00);
}

.seopress-sitemap-test__headline {
	font-weight: 600;
}

.seopress-sitemap-test__pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.seopress-sitemap-test__pill {
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	background: #f0f0f1;
	color: #1d2327;
}

.seopress-sitemap-test__pill.is-pass {
	background: rgba(74, 184, 102, 0.12);
	color: #1a7a37;
}

.seopress-sitemap-test__pill.is-warning {
	background: rgba(255, 186, 0, 0.16);
	color: #8a6400;
}

.seopress-sitemap-test__pill.is-error {
	background: rgba(235, 15, 0, 0.1);
	color: var(--colorAlert, #eb0f00);
}

.seopress-sitemap-test__checks {
	margin: 0;
	padding: 4px 16px 8px;
	list-style: none;
}

.seopress-sitemap-test__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid #f0f0f1;
}

.seopress-sitemap-test__check:first-child {
	border-top: 0;
}

.seopress-sitemap-test__icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

.seopress-sitemap-test__check.is-pass .seopress-sitemap-test__icon {
	color: var(--colorSuccess, #4ab866);
}

.seopress-sitemap-test__check.is-warning .seopress-sitemap-test__icon {
	color: var(--colorWarning, #ffba00);
}

.seopress-sitemap-test__check.is-error .seopress-sitemap-test__icon {
	color: var(--colorAlert, #eb0f00);
}

.seopress-sitemap-test__check.is-info .seopress-sitemap-test__icon {
	color: var(--wp-admin-theme-color, #2271b1);
}

.seopress-sitemap-test__check-body {
	display: flex;
	flex-direction: column;
}

.seopress-sitemap-test__check-label {
	font-weight: 600;
	color: #1d2327;
}

.seopress-sitemap-test__check-message {
	color: #646970;
}

.seopress-sitemap-test__meta {
	margin: 0;
	padding: 0 16px 14px;
	color: #646970;
	font-size: 12px;
}

/* Sitemap health check — one-click fixes */
.seopress-sitemap-test__fix.components-button {
	align-self: flex-start;
	margin-top: 6px;
	height: auto;
	min-height: 0;
	padding: 2px 10px;
	font-size: 12px;
}

.seopress-sitemap-test__fix .components-spinner {
	margin: 0 6px 0 0;
}

.seopress-sitemap-test__fixnotice {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 16px 16px;
	padding: 10px 12px;
	border-radius: 4px;
	background: rgba(74, 184, 102, 0.12);
	color: #1a7a37;
}

.seopress-sitemap-test__fixnotice .dashicons {
	color: var(--colorSuccess, #4ab866);
}

/*
 * Robots.txt tab — quick-insert rule buttons, "Recommended" badges
 * and info popovers. (PRO RobotsTab.jsx)
 */
.wrap-tags > .description {
	margin-bottom: 12px;
}

.tag-section > .description {
	margin-top: 0;
	margin-bottom: 8px;
}

.tag-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.robots-btn-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.robots-recommended-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--colorSuccess, #4ab866);
	border-radius: 9px;
	vertical-align: middle;
}

.robots-tooltip {
	width: 280px;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.5;
}