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

/* Loading and Error States */
.seopress-settings-loading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: 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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px 12px;
}

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

.seopress-settings-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: sticky;
    top: 106px;
    -ms-flex-item-align: start;
        align-self: flex-start;
}

.seopress-sidebar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* Sidebar tabs - Match PHP .nav-tab exactly */
.seopress-sidebar-tab {
    border: 0;
    background: 0 0;
    padding: 6px 30px 6px 10px;
    -webkit-transition: opacity 0.3s linear;
    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;
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* Save Bar */
.seopress-save-bar {
    position: fixed;
    bottom: 32px;
    z-index: 100;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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. */
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4px;
    -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
            transform: translateY(80px);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
    pointer-events: none;
}

.seopress-save-bar.is-visible {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            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;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
}

/* Section header — heading + feature toggle, side-by-side */
.seopress-section-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
    -ms-flex-wrap: wrap;
        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: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 15px 0;
    gap: 20px;
}

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

.seopress-field-control {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            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%;
    -webkit-box-sizing: border-box;
            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;
    -webkit-box-sizing: border-box;
            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);
    -webkit-box-shadow: inset 0 0 0 1px 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: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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: -webkit-grab;
    cursor: grab;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap;
    -webkit-transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    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: -webkit-grabbing;
    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%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-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;
    -webkit-transition: opacity 0.15s ease;
    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: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: 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;
    -webkit-transition: opacity 0.15s ease, background 0.15s ease;
    transition: opacity 0.15s ease, background 0.15s ease;
    -ms-flex-negative: 0;
        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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: 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;
    -webkit-transition: color 0.15s ease, background 0.15s ease;
    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;
    -webkit-box-shadow: 0 0 0 1px #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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 4px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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;
    -webkit-box-align: start;
        -ms-flex-align: start;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px 16px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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;
    -webkit-box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);
            box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);
}

.seopress-variables-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #f0f0f0;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
    position: relative;
}

.seopress-variables-list li::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 14px;
    color: #646970;
    opacity: 0;
    -webkit-transition: opacity 0.15s ease;
    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;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
}

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

/* Toggle all panels button */
.seopress-panels-toggle-all {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            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 {
    -ms-flex-negative: 0;
        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: -webkit-inline-box;
    display: -ms-inline-flexbox;
    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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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 {
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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 {
    -webkit-box-sizing: border-box;
            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 {
    -webkit-box-sizing: border-box;
            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 {
    -webkit-transition: -webkit-box-shadow 0.15s ease;
    transition: -webkit-box-shadow 0.15s ease;
    transition: box-shadow 0.15s ease;
    transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}

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

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

.seopress-card-picker__body {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: 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;
    -o-object-fit: contain;
       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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px 16px;
    margin-top: 8px;
}

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

.seopress-tools-import-form .components-radio-control {
    -ms-flex-preferred-size: 100%;
        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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            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;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            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 {
    -ms-flex-item-align: start;
        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 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            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 {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: wrap;
            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;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        opacity: 1;
        pointer-events: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                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 {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

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

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

    .seopress-field-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                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;
	-webkit-animation: seopress-field-pulse 1s ease-in-out 3;
	        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;
	-webkit-animation: seopress-field-ring 1s ease-in-out 3;
	        animation: seopress-field-ring 1s ease-in-out 3;
}

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

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

@-webkit-keyframes seopress-field-ring {
	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 {
	-webkit-box-shadow: inset 0 0 0 1px #c3c4c7;
	        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) {
	-webkit-box-shadow: inset 0 0 0 1px #8c8f94;
	        box-shadow: inset 0 0 0 1px #8c8f94;
	color: #1d2327;
	background: #f6f7f7;
}

.seopress-btn-outline-neutral.components-button.is-secondary:active:not(:disabled) {
	-webkit-box-shadow: inset 0 0 0 1px #8c8f94;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        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 {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        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 {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
}

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

.seopress-sitemap-test__error {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 6px;
	-ms-flex-wrap: wrap;
	    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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        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 {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        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 {
	-ms-flex-item-align: start;
	    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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 8px;
}

.robots-btn-wrap {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        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;
}

/* SEOPress wizard React UI.
   Theme color is taken from --wp-admin-theme-color (set by core on body)
   with the legacy SEOPress purple as a fallback. */

/* WP admin adds padding-left: 20px to #wpcontent. Cancel it on the wizard page
   so the React wizard sets its own padding from the outer container. */
body.seo_page_seopress-setup #wpcontent {
    padding-left: 0;
}

.seopress-wizard {
    --sp-wizard-theme: var(--wp-admin-theme-color, #4E21E7);
    /* Tinted from the active admin theme color so it adapts to any admin
       color scheme (Modern, Coffee, Ectoplasm, etc.). Falls back to a
       neutral light gray for browsers without color-mix support. */
    --sp-wizard-promo-bg: #f6f7f7;
    --sp-wizard-promo-bg: color-mix(in srgb, var(--sp-wizard-theme) 8%, #ffffff);
    --sp-wizard-border: #e0e0e0;
    --sp-wizard-text: #1e1e1e;
    /* 4.66:1 on #ffffff — WCAG AA compliant for normal text (was #757575 = 4.48:1). */
    --sp-wizard-text-muted: #717171;
    --sp-wizard-bg: #ffffff;
    --sp-wizard-sidebar-width: 9.8125rem;
    --sp-wizard-content-width: 840px;
    --sp-wizard-gap: 40px;
    --sp-wizard-block-gap: 32px;
    --sp-wizard-card-radius: 8px;

    color: var(--sp-wizard-text);
    background: #f0f0f1;
    min-height: calc(100vh - 32px);
    padding: 40px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 15px;
    line-height: 1.5;
}

/* Hide WP admin notices and the legacy wizard chrome when React is active. */
.seopress-wizard *,
.seopress-wizard *::before,
.seopress-wizard *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.seopress-wizard__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--sp-wizard-gap);
    max-width: calc(var(--sp-wizard-sidebar-width) + var(--sp-wizard-content-width) + var(--sp-wizard-gap));
}

.seopress-wizard--with-side .seopress-wizard__container {
    max-width: calc(var(--sp-wizard-sidebar-width) + var(--sp-wizard-content-width) + 300px + var(--sp-wizard-gap) + 16px);
}

.seopress-wizard--with-side .seopress-wizard__main {
    width: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
}

.seopress-wizard__side {
    width: 300px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background: var(--sp-wizard-bg);
    border-radius: var(--sp-wizard-card-radius);
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
    margin-left: calc(16px - var(--sp-wizard-gap));
}

/* ---------- Sidebar ---------- */
.seopress-wizard__sidebar {
    width: var(--sp-wizard-sidebar-width);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
}

.seopress-wizard__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
    color: var(--sp-wizard-text);
}

.seopress-wizard__dismiss {
    color: var(--sp-wizard-theme);
    text-decoration: underline;
    font-size: 13px;
}

.seopress-wizard__dismiss:hover,
.seopress-wizard__dismiss:focus {
    color: var(--sp-wizard-theme);
    opacity: 0.85;
}

/* ---------- Stepper ---------- */
.seopress-wizard-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 14px;
}

.seopress-wizard-stepper__item {
    margin: 0;
    opacity: 0.45;
    -webkit-transition: opacity 120ms ease;
    transition: opacity 120ms ease;
}

.seopress-wizard-stepper__substeps li {
    margin: 0;
}

.seopress-wizard-stepper__item.is-active,
.seopress-wizard-stepper__item.is-completed {
    opacity: 1;
}

.seopress-wizard-stepper__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}

.seopress-wizard-stepper__number {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sp-wizard-theme);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    line-height: 1;
}

.seopress-wizard-stepper__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-wizard-text);
    line-height: 1.3;
    word-break: break-word;
}

.seopress-wizard-stepper__item.is-active .seopress-wizard-stepper__label {
    font-weight: 600;
}

.seopress-wizard-stepper__substeps {
    list-style: none;
    margin: 10px 0 0 28px;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
    border-left: 1px solid var(--sp-wizard-border);
}

.seopress-wizard-stepper__substep {
    position: relative;
    padding: 2px 0 2px 12px;
}

.seopress-wizard-stepper__substep.is-active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sp-wizard-theme);
}

.seopress-wizard-stepper__substep-link {
    color: var(--sp-wizard-text-muted);
    text-decoration: none;
    font-size: 14px;
}

.seopress-wizard-stepper__substep.is-active .seopress-wizard-stepper__substep-link {
    color: var(--sp-wizard-text);
    font-weight: 600;
}

.seopress-wizard-stepper__substep-link:hover,
.seopress-wizard-stepper__substep-link:focus {
    color: var(--sp-wizard-text);
}

/* ---------- Main column ---------- */
.seopress-wizard__main {
    width: var(--sp-wizard-content-width);
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background: var(--sp-wizard-bg);
    padding: 40px;
    border-radius: var(--sp-wizard-card-radius);
}

.seopress-wizard-welcome {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--sp-wizard-block-gap);
}

.seopress-wizard-welcome__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.seopress-wizard-welcome__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-welcome__subheading {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

/* ---------- Cards ---------- */
.seopress-wizard-card {
    background: #fff;
    border: 1px solid var(--sp-wizard-border);
    border-radius: var(--sp-wizard-card-radius);
}

.seopress-wizard-welcome__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-wizard-block-gap);
}

/* Quote card */
.seopress-wizard-quote {
    padding: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.seopress-wizard-quote__mark {
    color: var(--sp-wizard-theme);
}

.seopress-wizard-quote__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--sp-wizard-text);
}

.seopress-wizard-quote__author {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--sp-wizard-text);
}

.seopress-wizard-quote__role {
    margin: 0;
    font-size: 13px;
    color: var(--sp-wizard-text-muted);
}

/* Stats card */
.seopress-wizard-stats {
    padding: 28px 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.seopress-wizard-stats__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
}

.seopress-wizard-stats__value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

.seopress-wizard-stats__icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--sp-wizard-theme);
    background: color-mix(in srgb, var(--sp-wizard-theme) 12%, transparent);
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.seopress-wizard-stats__icon svg {
    width: 18px;
    height: 18px;
}

.seopress-wizard-stats__number {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
    color: var(--sp-wizard-text);
}

.seopress-wizard-stats__label {
    margin: 0;
    font-size: 13px;
    color: var(--sp-wizard-text-muted);
}

/* Promo card */
.seopress-wizard-promo {
    background: var(--sp-wizard-promo-bg);
    border: 1px solid transparent;
    padding: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 24px;
}

.seopress-wizard-promo__text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

.seopress-wizard-promo__heading {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-wizard-theme);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}

.seopress-wizard-promo__icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--sp-wizard-theme);
}

.seopress-wizard-promo__body {
    margin: 0;
    font-size: 14px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-promo__cta.components-button.is-secondary {
    color: var(--sp-wizard-theme);
    -webkit-box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
            box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
    background: transparent;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.seopress-wizard-promo__cta.components-button.is-secondary:hover:not(:disabled),
.seopress-wizard-promo__cta.components-button.is-secondary:focus:not(:disabled) {
    color: var(--sp-wizard-theme);
    -webkit-box-shadow: inset 0 0 0 1.5px var(--sp-wizard-theme);
            box-shadow: inset 0 0 0 1.5px var(--sp-wizard-theme);
    background: transparent;
}

/* Footer / Start button */
.seopress-wizard-welcome__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 16px;
}

.seopress-wizard-welcome__footer-left {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
}

.seopress-wizard-welcome__footer-right {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 12px;
}

.seopress-wizard-welcome__skip.components-button.is-secondary {
    color: var(--sp-wizard-theme);
    -webkit-box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
            box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
    background: transparent;
    padding: 10px 18px;
    height: auto;
    font-weight: 500;
}

.seopress-wizard-welcome__skip.components-button.is-secondary:hover:not(:disabled),
.seopress-wizard-welcome__skip.components-button.is-secondary:focus:not(:disabled) {
    color: var(--sp-wizard-theme);
    background: color-mix(in srgb, var(--sp-wizard-theme) 8%, transparent);
    -webkit-box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
            box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
}

.seopress-wizard-welcome__start.components-button.is-primary {
    background: var(--sp-wizard-theme);
    color: #fff;
    padding: 10px 18px;
    height: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    font-weight: 500;
}

.seopress-wizard-welcome__start.components-button.is-primary:hover:not(:disabled),
.seopress-wizard-welcome__start.components-button.is-primary:focus:not(:disabled) {
    background: var(--sp-wizard-theme);
    opacity: 0.92;
    color: #fff;
}

.seopress-wizard-welcome__start.components-button.is-primary:disabled,
.seopress-wizard-welcome__start.components-button.is-primary[aria-disabled="true"] {
    background: var(--sp-wizard-theme);
    color: #fff;
    opacity: 0.4;
    cursor: not-allowed;
}

.seopress-wizard-welcome__start-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.seopress-wizard-arrow {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
}

/* ---------- Theme-tinted info notice (left accent bar) ---------- */
.seopress-wizard-notice {
    background: var(--sp-wizard-promo-bg);
    border-left: 4px solid var(--sp-wizard-theme);
    border-radius: 0;
    padding: 20px 24px;
    margin: 0;
}

.seopress-wizard-notice__line {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

.seopress-wizard-notice__line + .seopress-wizard-notice__line {
    margin-top: 6px;
}

/* ---------- Checkbox list ---------- */
.seopress-wizard-checkbox-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
}

.seopress-wizard-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
}

.seopress-wizard-checkbox__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

.seopress-wizard-checkbox__input {
    width: 18px;
    height: 18px;
    margin: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    cursor: pointer;
}

.seopress-wizard-checkbox__label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--sp-wizard-text);
    font-weight: 400;
    cursor: pointer;
    margin: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
}

.seopress-wizard-checkbox__info {
    color: var(--sp-wizard-text-muted);
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.seopress-wizard-checkbox__hint {
    margin: 0 0 0 28px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sp-wizard-text-muted);
}

/* Re-skin native CheckboxControl so it inherits the wizard look. */
.seopress-wizard-checkbox .components-checkbox-control {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.seopress-wizard-checkbox .components-checkbox-control__label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--sp-wizard-text);
    padding-top: 2px;
    /* Flow the label as normal text so "Exclude [type] from search engine"
       wraps at word boundaries. Was inline-flex/nowrap, which squeezed the
       items and broke the token chip mid-word on narrow screens. min-width:0
       lets the label shrink within its flex row instead of overflowing. */
    min-width: 0;
}

.seopress-wizard-checkbox .components-base-control__help {
    margin: 6px 0 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-checkbox .components-checkbox-control__input[type="checkbox"] {
    margin-top: 2px;
}

.seopress-wizard-checkbox .components-checkbox-control__input[type="checkbox"]:checked {
    background: var(--sp-wizard-theme);
    border-color: var(--sp-wizard-theme);
}

.seopress-wizard-checkbox .components-checkbox-control__input[type="checkbox"]:focus {
    -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sp-wizard-theme);
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sp-wizard-theme);
}

.seopress-wizard-checkbox__code {
    background: #f0f0f1;
    border-radius: 3px;
    padding: 1px 6px;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    /* Keep the post-type token on a single line so it wraps as a whole unit
       to the next line instead of breaking mid-token (e.g. "[test-\nscf]"). */
    white-space: nowrap;
}

/* ---------- Metabox preview (SEO Metabox step) ---------- */
.seopress-wizard-metabox-preview {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--sp-wizard-border);
    background: #000;
    line-height: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    -webkit-transition: -webkit-transform 120ms ease, -webkit-box-shadow 120ms ease;
    transition: -webkit-transform 120ms ease, -webkit-box-shadow 120ms ease;
    transition: transform 120ms ease, box-shadow 120ms ease;
    transition: transform 120ms ease, box-shadow 120ms ease, -webkit-transform 120ms ease, -webkit-box-shadow 120ms ease;
}

a.seopress-wizard-metabox-preview:hover,
a.seopress-wizard-metabox-preview:focus-visible {
    outline: none;
    -webkit-box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-wizard-theme) 35%, transparent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-wizard-theme) 35%, transparent);
}

.seopress-wizard-metabox-preview img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.seopress-wizard-metabox-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.seopress-wizard-metabox-preview__play {
    position: absolute;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    pointer-events: none;
}

.seopress-wizard-metabox-preview__play::before {
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    -webkit-transition: background 120ms ease, -webkit-transform 120ms ease;
    transition: background 120ms ease, -webkit-transform 120ms ease;
    transition: background 120ms ease, transform 120ms ease;
    transition: background 120ms ease, transform 120ms ease, -webkit-transform 120ms ease;
}

.seopress-wizard-metabox-preview:hover .seopress-wizard-metabox-preview__play::before,
.seopress-wizard-metabox-preview:focus-visible .seopress-wizard-metabox-preview__play::before {
    background: var(--sp-wizard-theme);
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}

.seopress-wizard-metabox-preview__play-icon {
    position: absolute;
    color: #fff;
    margin-left: 4px; /* visual centering for the play triangle */
}

/* ---------- AI Assistant step ---------- */
.seopress-wizard-ai__intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: var(--sp-wizard-promo-bg);
    border-radius: var(--sp-wizard-card-radius);
}

.seopress-wizard-ai__logo {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-top: 2px;
}

.seopress-wizard-ai__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.seopress-wizard-ai__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sp-wizard-text);
}

.seopress-wizard-ai__check {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-top: 2px;
    color: var(--sp-wizard-theme);
}

.seopress-wizard-ai__ready {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sp-wizard-text-muted);
}

/* The promo card is a row by default; this one stacks so the key form can
   unfold underneath the call to action instead of fighting it for width. */
.seopress-wizard-ai__connect {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 16px;
}

.seopress-wizard-ai__connect-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.seopress-wizard-ai__own-key {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--sp-wizard-theme);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.seopress-wizard-ai__own-key:hover,
.seopress-wizard-ai__own-key:focus {
    color: var(--sp-wizard-theme);
    opacity: 0.85;
}

.seopress-wizard-ai__key-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sp-wizard-border);
    max-width: 420px;
}

.seopress-wizard-ai__constant {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-form__caption {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

.seopress-wizard-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    color: var(--sp-wizard-theme);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.seopress-wizard-link:hover,
.seopress-wizard-link:focus {
    color: var(--sp-wizard-theme);
    opacity: 0.85;
}

.seopress-wizard-link__icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* ---------- Generic wizard form (shared with site/social steps) ---------- */
.seopress-wizard-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--sp-wizard-block-gap);
}

.seopress-wizard-form__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
}

.seopress-wizard-form__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-form__subheading {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

.seopress-wizard-form__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.seopress-wizard-form__back {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    color: var(--sp-wizard-theme);
    text-decoration: none;
    font-size: 13px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

.seopress-wizard-form__back-icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.seopress-wizard-form__back-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.seopress-wizard-form__back:hover .seopress-wizard-form__back-text,
.seopress-wizard-form__back:focus .seopress-wizard-form__back-text {
    text-decoration: none;
}

.seopress-wizard-form__back:hover,
.seopress-wizard-form__back:focus {
    color: var(--sp-wizard-theme);
    opacity: 0.85;
}

.seopress-wizard-form__footer:has(.seopress-wizard-form__submit:only-child) {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.seopress-wizard-form__submit.components-button.is-primary {
    background: var(--sp-wizard-theme);
    color: #fff;
    padding: 10px 18px;
    height: auto;
    font-weight: 500;
}

.seopress-wizard-form__submit.components-button.is-primary:hover:not(:disabled),
.seopress-wizard-form__submit.components-button.is-primary:focus:not(:disabled) {
    background: var(--sp-wizard-theme);
    opacity: 0.92;
    color: #fff;
}

/* ---------- Generic wizard form (used by site/social/etc steps) ---------- */
.seopress-wizard-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--sp-wizard-block-gap);
}

.seopress-wizard-form__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.seopress-wizard-form__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-form__subheading {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

.seopress-wizard-form__fields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
}

/* Ensure shared field components (DynamicTagField, etc.) span the full
   wizard column so every input lines up at the same width. */
.seopress-wizard-form__fields .seopress-field,
.seopress-wizard-form__fields .seopress-dynamic-tag-field,
.seopress-wizard-form__fields .seopress-token-editor-wrapper {
    width: 100%;
}

.seopress-wizard-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
}

.seopress-wizard-field__label,
.seopress-wizard-field--native .components-base-control__label {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--sp-wizard-text);
    margin-bottom: 6px;
    display: block;
}

/* Re-skin native WordPress input controls to match the wizard look. */
.seopress-wizard-field--native .components-text-control__input,
.seopress-wizard-field--native .components-select-control__input,
.seopress-wizard-field--native .components-textarea-control__input {
    border-radius: 2px;
    background: #fff;
    color: var(--sp-wizard-text);
    font-size: 15px;
    line-height: 1.4;
    min-height: 40px;
    width: 100%;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.seopress-wizard-field--native .components-text-control__input:hover,
.seopress-wizard-field--native .components-select-control__input:hover,
.seopress-wizard-field--native .components-textarea-control__input:hover {
    border-color: var(--sp-wizard-theme);
}

.seopress-wizard-field--native .components-text-control__input:focus,
.seopress-wizard-field--native .components-select-control__input:focus,
.seopress-wizard-field--native .components-textarea-control__input:focus {
    outline: none;
    border-color: var(--sp-wizard-theme);
    -webkit-box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
            box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
}

.seopress-wizard-field--native .components-base-control__help {
    font-size: 13px;
    line-height: 1.4;
    color: var(--sp-wizard-text-muted);
    margin-top: 6px;
}

.seopress-wizard-field--native .components-base-control__help a {
    color: var(--sp-wizard-theme);
    text-decoration: underline;
}

.seopress-wizard .seopress-wizard-field__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sp-wizard-border);
    border-radius: 2px;
    background: #fff;
    color: var(--sp-wizard-text);
    font-size: 15px;
    line-height: 1.4;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: border-color 100ms ease, -webkit-box-shadow 100ms ease;
    transition: border-color 100ms ease, -webkit-box-shadow 100ms ease;
    transition: border-color 100ms ease, box-shadow 100ms ease;
    transition: border-color 100ms ease, box-shadow 100ms ease, -webkit-box-shadow 100ms ease;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    min-height: 40px;
}

.seopress-wizard .seopress-wizard-field__input:hover {
    border-color: var(--sp-wizard-theme);
}

.seopress-wizard .seopress-wizard-field__input:focus {
    outline: none;
    border-color: var(--sp-wizard-theme);
    -webkit-box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
            box-shadow: inset 0 0 0 1px var(--sp-wizard-theme);
}

.seopress-wizard .seopress-wizard-field__input::-webkit-input-placeholder {
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard .seopress-wizard-field__input::-moz-placeholder {
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard .seopress-wizard-field__input:-ms-input-placeholder {
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard .seopress-wizard-field__input::-ms-input-placeholder {
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard .seopress-wizard-field__input::placeholder {
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard .seopress-wizard-field__textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
}

.seopress-wizard .seopress-wizard-field__select-wrap {
    position: relative;
    width: 100%;
}

.seopress-wizard .seopress-wizard-field__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231e1e1e%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><polyline points=%276 9 12 15 18 9%27/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

.seopress-wizard .seopress-wizard-field__icon-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    width: 100%;
}

.seopress-wizard .seopress-wizard-field__icon {
    color: var(--sp-wizard-theme);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 24px;
    height: 40px;
}

.seopress-wizard .seopress-wizard-field__icon svg {
    width: 20px;
    height: 20px;
}

.seopress-wizard-field--with-icon .seopress-wizard-field__input--icon {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0;
}

.seopress-wizard-field__help {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-field__help a {
    color: var(--sp-wizard-theme);
    text-decoration: underline;
}

.seopress-wizard-field__help code {
    background: #f6f7f7;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 12px;
}

.seopress-wizard-form__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;
}

.seopress-wizard-form__submit.components-button.is-primary {
    background: var(--sp-wizard-theme);
    color: #fff;
    padding: 10px 18px;
    height: auto;
    font-weight: 500;
}

.seopress-wizard-form__submit.components-button.is-primary:hover:not(:disabled),
.seopress-wizard-form__submit.components-button.is-primary:focus:not(:disabled) {
    background: var(--sp-wizard-theme);
    opacity: 0.92;
    color: #fff;
}

/* ============================================================
   Import metadata step
   ============================================================ */

.seopress-wizard-import {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--sp-wizard-block-gap);
}

.seopress-wizard-import__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.seopress-wizard-import__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-import__subheading {
    margin: 0;
    font-size: 15px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-import__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
}

@media (max-width: 1080px) {
    .seopress-wizard-import__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 720px) {
    .seopress-wizard-import__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ---------- Plugin card ---------- */
.seopress-import-card {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    background: var(--sp-wizard-promo-bg);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 14px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    cursor: pointer;
    -webkit-transition: border-color 120ms ease, -webkit-transform 120ms ease, -webkit-box-shadow 120ms ease;
    transition: border-color 120ms ease, -webkit-transform 120ms ease, -webkit-box-shadow 120ms ease;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease, -webkit-transform 120ms ease, -webkit-box-shadow 120ms ease;
    text-align: left;
    font: inherit;
    color: var(--sp-wizard-text);
    width: 100%;
    height: 100%;
    min-height: 88px;
}

.seopress-import-card:hover:not(:disabled) {
    border-color: var(--sp-wizard-theme);
}

/* Visible 2px focus ring (was `outline:none` + 1px border-color, too weak). */
.seopress-import-card:focus-visible {
    border-color: var(--sp-wizard-theme);
    outline: 2px solid var(--wp-admin-theme-color);
    outline-offset: 2px;
}

.seopress-import-card.is-selected {
    border-color: var(--sp-wizard-theme);
    -webkit-box-shadow: 0 0 0 1px var(--sp-wizard-theme) inset;
            box-shadow: 0 0 0 1px var(--sp-wizard-theme) inset;
}

.seopress-import-card.is-disabled,
.seopress-import-card:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.seopress-import-card__logo {
    width: 36px;
    height: 36px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 6px;
}

.seopress-import-card__name {
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Details panel ---------- */
.seopress-wizard-import__details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}

.seopress-wizard-import__details-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.seopress-wizard-import__details-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-wizard-text);
}

/* Programmatic focus target (tabIndex=-1) shouldn't show an outline since the
   user did not Tab to it — just makes screen readers re-announce the heading. */
.seopress-wizard-import__details-title:focus {
    outline: none;
}

.seopress-wizard-import__details-meta {
    margin: 0;
    font-size: 13px;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-import__caution {
    color: var(--sp-wizard-text);
    font-weight: 500;
}

.seopress-wizard-import__preview {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
}

.seopress-wizard-import__preview-intro {
    margin: 0;
    font-size: 14px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-import__preview-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sp-wizard-text);
}

.seopress-wizard-import__preview-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
    padding-left: 4px;
}

.seopress-wizard-import__preview-list li::before {
    content: "";
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    background: var(--sp-wizard-text-muted);
    border-radius: 1px;
}

/* ---------- Notices ---------- */
.seopress-wizard-notice {
    border-radius: 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.45;
    border-left: 4px solid var(--sp-wizard-theme);
    background: var(--sp-wizard-promo-bg);
    color: var(--sp-wizard-text);
}

.seopress-wizard-notice p {
    margin: 0 0 6px;
}
.seopress-wizard-notice p:last-child {
    margin-bottom: 0;
}

.seopress-wizard-notice ul {
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 13px;
}

.seopress-wizard-notice--warning {
    background: #fcf9e8;
    border-left-color: #dba617; /* WP admin amber */
}

.seopress-wizard-notice--success {
    background: #edfaef;
    border-left-color: #00a32a; /* WP admin green */
    color: #064a18;
}

.seopress-wizard-notice--error {
    background: #fcf0f1;
    border-left-color: #d63638; /* WP admin red */
    color: #491b1c;
}

/* ---------- Progress ---------- */
.seopress-wizard-progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
}

.seopress-wizard-progress__bar {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 999px;
    overflow: hidden;
}

.seopress-wizard-progress__fill {
    display: block;
    height: 100%;
    background: var(--sp-wizard-theme);
    border-radius: 999px;
    -webkit-transition: width 280ms ease;
    transition: width 280ms ease;
}

.seopress-wizard-progress__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-size: 13px;
}

.seopress-wizard-progress__label {
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-progress__counter {
    color: var(--sp-wizard-theme);
    font-weight: 600;
}

/* ---------- Task list ---------- */
.seopress-wizard-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.seopress-task {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--sp-wizard-text);
    -webkit-transition: background-color 160ms ease;
    transition: background-color 160ms ease;
}

.seopress-task__icon {
    width: 20px;
    height: 20px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    color: var(--sp-wizard-text-muted);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.seopress-task__label {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}

.seopress-task__status {
    font-size: 13px;
    color: var(--sp-wizard-text-muted);
    font-weight: 500;
}

.seopress-task.is-done {
    background: #f6f7f7;
}
.seopress-task.is-done .seopress-task__icon {
    color: #00a32a;
}
.seopress-task.is-done .seopress-task__status {
    color: var(--sp-wizard-text);
}

.seopress-task.is-in-progress {
    background: color-mix(in srgb, var(--sp-wizard-theme) 6%, #ffffff);
}
.seopress-task.is-in-progress .seopress-task__icon {
    color: var(--sp-wizard-theme);
}
.seopress-task.is-in-progress .seopress-task__label {
    font-weight: 600;
}
.seopress-task.is-in-progress .seopress-task__status {
    color: var(--sp-wizard-theme);
    font-weight: 600;
}

.seopress-task-spinner {
    -webkit-animation: seopress-wizard-spin 850ms linear infinite;
            animation: seopress-wizard-spin 850ms linear infinite;
}

@-webkit-keyframes seopress-wizard-spin {
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes seopress-wizard-spin {
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

/* Hide WP footer that sometimes prints below admin pages. */
#wpfooter {
    display: none;
}

/* Responsive */
@media (max-width: 1280px) {
    .seopress-wizard__main {
        width: auto;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }
}

/* Tablet / WP admin with the menu expanded: the 3-column "ready" layout
   (stepper + main + guide aside) needs more room than the viewport implies,
   because #adminmenu eats ~160px. Stack it into one column below 1200px so
   the main content keeps a readable width, and cap the guide aside so its
   square cover doesn't blow up in the wider stacked column. */
@media (max-width: 1200px) {
    .seopress-wizard--with-side .seopress-wizard__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .seopress-wizard--with-side .seopress-wizard__sidebar,
    .seopress-wizard--with-side .seopress-wizard__main {
        width: 100%;
    }
    .seopress-wizard--with-side .seopress-wizard__side {
        width: 100%;
        max-width: 360px;
        margin-left: 0;
    }
}

@media (max-width: 960px) {
    .seopress-wizard {
        padding: 24px;
    }
    .seopress-wizard__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .seopress-wizard__sidebar,
    .seopress-wizard__main {
        width: 100%;
    }
    .seopress-wizard-welcome__cards {
        grid-template-columns: 1fr;
    }
    .seopress-wizard-promo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .seopress-wizard--with-side .seopress-wizard__container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .seopress-wizard__side {
        width: 100%;
        /* Reset the desktop negative pull (margin-left: 16px - gap = -24px),
           which otherwise shifts the stacked aside left of the main card. */
        margin-left: 0;
    }
}

/* ---------- Mobile footers ----------
   On narrow screens the action row (Back + Skip + primary CTA) can't fit on a
   single line and the primary button (e.g. "Migrate now") was clipped past the
   panel edge. Stack the actions and let buttons span the full width instead. */
@media (max-width: 600px) {
    .seopress-wizard__main {
        padding: 24px;
    }

    .seopress-wizard-welcome__footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .seopress-wizard-welcome__footer-left,
    .seopress-wizard-welcome__footer-right {
        width: 100%;
    }

    .seopress-wizard-welcome__footer-right {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .seopress-wizard-form__footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    /* Stack the "Pro" and "Next step" cards so their CTA sits below the text
       instead of squeezing it to a single word per line on narrow screens. */
    .seopress-wizard-ready__promo,
    .seopress-wizard-ready__next {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        gap: 16px;
    }

    .seopress-wizard-welcome__skip.components-button.is-secondary,
    .seopress-wizard-welcome__start.components-button.is-primary,
    .seopress-wizard-form__submit.components-button.is-primary,
    .seopress-wizard-ready__promo-cta.components-button.is-secondary {
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

/* ---------- Ready step (final) ---------- */
.seopress-wizard-ready {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--sp-wizard-block-gap);
}

.seopress-wizard-ready__header {
    position: relative;
}

.seopress-wizard-ready__heading-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    padding-right: 120px;
}

.seopress-wizard-ready__badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 96px;
    height: 96px;
    display: block;
    z-index: 1;
    pointer-events: none;
}

.seopress-wizard-ready__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sp-wizard-border);
    border-radius: 8px;
    overflow: hidden;
}

.seopress-wizard-ready__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--sp-wizard-text);
    border-bottom: 1px solid var(--sp-wizard-border);
}

.seopress-wizard-ready__item:last-child {
    border-bottom: 0;
}

.seopress-wizard-ready__check {
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.seopress-wizard-ready__promo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--sp-wizard-promo-bg);
}

.seopress-wizard-ready__promo-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.seopress-wizard-ready__promo-heading {
    margin: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    color: var(--sp-wizard-theme);
    font-size: 15px;
    font-weight: 600;
}

.seopress-wizard-ready__promo-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

.seopress-wizard-ready__promo-cta.components-button.is-secondary {
    color: var(--sp-wizard-theme);
    border: 1px solid var(--sp-wizard-theme);
    background: transparent;
    padding: 8px 14px;
    height: auto;
    -webkit-box-shadow: none;
            box-shadow: none;
    text-decoration: none;
}

.seopress-wizard-ready__promo-cta.components-button.is-secondary:hover,
.seopress-wizard-ready__promo-cta.components-button.is-secondary:focus {
    color: var(--sp-wizard-theme);
    border-color: var(--sp-wizard-theme);
    background: color-mix(in srgb, var(--sp-wizard-theme) 6%, white);
    -webkit-box-shadow: none;
            box-shadow: none;
}

.seopress-wizard-ready__next {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid var(--sp-wizard-border);
    border-radius: 8px;
}

.seopress-wizard-ready__next-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.seopress-wizard-ready__next-eyebrow {
    margin: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    color: var(--sp-wizard-theme);
    font-size: 13px;
    font-weight: 600;
}

.seopress-wizard-ready__next-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-wizard-text);
    line-height: 1.3;
}

.seopress-wizard-ready__next-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sp-wizard-text);
}

/* ---------- Free guide aside (right column on ready step) ---------- */
.seopress-wizard-guide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
}

.seopress-wizard-guide__cover {
    background: #f0f0f0;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 1 / 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-decoration: none;
    -webkit-transition: opacity 120ms ease;
    transition: opacity 120ms ease;
}

.seopress-wizard-guide__cover:hover {
    opacity: 0.9;
}

/* Focus indicator: dedicated visible ring (was `opacity: 0.9` — indistinguishable
   from `:hover`, failing WCAG 1.4.11 / 2.4.7). */
.seopress-wizard-guide__cover:focus-visible {
    outline: 2px solid var(--wp-admin-theme-color);
    outline-offset: 2px;
}

.seopress-wizard-guide__cover img {
    width: 60%;
    height: auto;
}

.seopress-wizard-guide__eyebrow {
    margin: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    color: var(--sp-wizard-theme);
    font-size: 13px;
    font-weight: 600;
}

.seopress-wizard-guide__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sp-wizard-text);
}

.seopress-wizard-guide__title a {
    color: inherit;
    text-decoration: none;
}

.seopress-wizard-guide__title a:hover,
.seopress-wizard-guide__title a:focus-visible {
    color: var(--sp-wizard-theme);
    text-decoration: underline;
}

.seopress-wizard-guide__weeks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 6px;
}

.seopress-wizard-guide__week {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sp-wizard-text);
}

.seopress-wizard-guide__week-label {
    color: var(--sp-wizard-theme);
    font-weight: 600;
}

.seopress-wizard-guide__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.seopress-wizard-guide__input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--sp-wizard-border);
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    color: var(--sp-wizard-text);
}

.seopress-wizard-guide__input:focus {
    outline: none;
    border-color: var(--sp-wizard-theme);
    -webkit-box-shadow: 0 0 0 1px var(--sp-wizard-theme);
            box-shadow: 0 0 0 1px var(--sp-wizard-theme);
}

.seopress-wizard-guide__submit.components-button {
    width: 100%;
    height: 40px;
    color: var(--sp-wizard-theme);
    border: 1px solid var(--sp-wizard-theme);
    background: transparent;
    font-weight: 500;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.seopress-wizard-guide__submit.components-button:hover,
.seopress-wizard-guide__submit.components-button:focus {
    color: var(--sp-wizard-theme);
    border-color: var(--sp-wizard-theme);
    background: color-mix(in srgb, var(--sp-wizard-theme) 6%, white);
    -webkit-box-shadow: none;
            box-shadow: none;
}

.seopress-wizard-guide__privacy {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-guide__privacy a {
    color: var(--sp-wizard-theme);
    text-decoration: underline;
}

.seopress-wizard-guide__thanks {
    margin: 4px 0 0;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--colorSuccess, #1d8a4a) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--colorSuccess, #1d8a4a) 25%, transparent);
    border-radius: 6px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
}

.seopress-wizard-guide__thanks-icon {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-top: 1px;
}

.seopress-wizard-guide__thanks-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
}

.seopress-wizard-guide__thanks-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-wizard-text);
}

.seopress-wizard-guide__thanks-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sp-wizard-text);
    opacity: 0.8;
}

/* Skip link — visually hidden until focused (RGAA 12.7 / WCAG 2.4.1). */
.seopress-wizard__skip-link:focus,
.seopress-wizard__skip-link:focus-visible {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    margin: 0;
    clip: auto;
    -webkit-clip-path: none;
            clip-path: none;
    background: var(--wp-admin-theme-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    outline: 2px solid var(--wp-admin-theme-color);
    outline-offset: 2px;
}

.seopress-wizard__main:focus-visible {
    outline: none;
}

/* ---------- Touch targets (WCAG 2.5.5 / RGAA 13.x) ---------- */
@media (max-width: 782px) {
    .seopress-wizard-stepper__substep-link {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        min-height: 44px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .seopress-wizard *,
    .seopress-wizard *::before,
    .seopress-wizard *::after {
        -webkit-transition-duration: 0.001ms !important;
                transition-duration: 0.001ms !important;
        -webkit-animation-duration: 0.001ms !important;
                animation-duration: 0.001ms !important;
        -webkit-animation-iteration-count: 1 !important;
                animation-iteration-count: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   Import configuration step (JSON settings file)
   -------------------------------------------------------------------------- */

.seopress-wizard-import-config {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: var(--sp-wizard-block-gap);
}

.seopress-wizard-import-config__dropzone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    padding: 32px 24px;
    text-align: center;
    border-style: dashed;
    border-width: 2px;
    background: var(--sp-wizard-promo-bg);
    -webkit-transition: border-color 0.15s ease, background-color 0.15s ease;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Dragging a file over the zone. */
.seopress-wizard-import-config__dropzone.is-dragging {
    border-color: var(--sp-wizard-theme);
    background: color-mix(in srgb, var(--sp-wizard-theme) 14%, #ffffff);
}

.seopress-wizard-import-config__browse {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-import-config__dropzone-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    color: var(--sp-wizard-theme);
}

.seopress-wizard-import-config__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-wizard-text);
}

.seopress-wizard-import-config__hint {
    margin: 0;
    font-size: 13px;
    color: var(--sp-wizard-text-muted);
}

.seopress-wizard-import-config__input {
    margin-top: 8px;
    max-width: 100%;
}

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

.seopress-wizard-import-config__file {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    background: var(--sp-wizard-bg);
    border: 1px solid var(--sp-wizard-border);
    border-radius: var(--sp-wizard-card-radius);
}

.seopress-wizard-import-config__file-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    color: var(--sp-wizard-theme);
}

.seopress-wizard-import-config__file-name {
    font-weight: 600;
    word-break: break-all;
}

.seopress-wizard-import-config__file-size {
    color: var(--sp-wizard-text-muted);
}