/* ==========================================================================
   Extnify - Admin Theme (brand tokens + shared components)
   Canonical copy. Injected into every plugin at build (wpship). Edit here only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Extnify theme tokens - change these to re-skin every plugin in one place.
   -------------------------------------------------------------------------- */
:root {
    /* Accent - WooCommerce purple */
    --extnify-accent:        #7f54b3;
    --extnify-accent-dark:   #6d3f9e;
    --extnify-accent-darker: #5a3a8a;
    --extnify-accent-tint:   #f5f0fb;
    --extnify-accent-tint-2: #efe9fa;
    --extnify-accent-border: #c4aee3;

    /* Text (WordPress admin neutrals) */
    --extnify-text:          #1d2327;
    --extnify-text-soft:     #3c434a;
    --extnify-muted:         #50575e;
    --extnify-muted-soft:    #8c8f94;

    /* Surfaces & borders */
    --extnify-surface:       #fff;
    --extnify-bg:            #f6f7f7;
    --extnify-bg-soft:       #f0f0f1;
    --extnify-border:        #c3c4c7;
    --extnify-border-light:  #e2e2e4;

    /* Semantic */
    --extnify-link:          #2271b1;
    --extnify-danger:        #d63638;
    --extnify-success:       #4b8a5c;

    /* Typography */
    --extnify-mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Page wrapper & heading
   -------------------------------------------------------------------------- */
.ext-wrap {
    max-width: 100%;
}

.ext-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    margin: 0;
}

.ext-page-title .ext-logo-icon {
    font-size: 22px;
    color: var(--extnify-accent);
}

/* Persistent top toolbar (Save All + Clear Cache) */
.ext-topbar {
    position: sticky;
    top: 32px;                 /* below the WP admin bar */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--extnify-surface);
    border: 1px solid var(--extnify-border-light);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.ext-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media screen and (max-width: 782px) {
    .ext-topbar { top: 46px; }   /* taller mobile admin bar */
}

.ext-saved-notice {
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Two-column layout
   -------------------------------------------------------------------------- */
.ext-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
    /* JS (extFitLayout) sets the exact fill height; this is a no-scroll fallback. */
    min-height: 600px;
    background: var(--extnify-surface);
    border: 1px solid var(--extnify-border);
    border-radius: 4px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.ext-sidebar {
    width: 260px;
    flex-shrink: 0;
    /* background: #fafafa; */
    border-right: 1px solid #e0e0e2;
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.ext-sidebar-section {
    border-bottom: 1px solid #e0e0e2;
}

/* Global Settings trigger */
.ext-gs-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--extnify-surface);
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
    background: var(--extnify-accent);
}

.ext-gs-trigger .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
    color: rgba(255,255,255,.8);
}

.ext-gs-trigger:hover {
    background: var(--extnify-accent-dark);
    color: var(--extnify-surface);
}

.ext-gs-trigger.ext-nav-active {
    background: var(--extnify-accent-dark);
    border-left-color: rgba(255,255,255,.5);
    color: var(--extnify-surface);
}

/* Methods section heading */
.ext-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--extnify-muted-soft);
    font-weight: 700;
}

/* Method list scroll area */
.ext-method-list {
    flex: 1;
    overflow-y: auto;
    max-height: 700px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fafafa
}

/* Individual method item — card style */
.ext-method-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    cursor: pointer;
    font-size: 12.5px;
    color: #2c2c2c;
    background: var(--extnify-surface);
    border: 1px solid var(--extnify-border-light);
    border-radius: 6px;
    border-left: 3px solid #d0c8e0;
    transition: border-color .15s, box-shadow .15s, background .15s;
    position: relative;
}

.ext-method-item:hover {
    border-color: #b49fd4;
    border-left-color: var(--extnify-accent);
    box-shadow: 0 1px 4px rgba(127,84,179,.1);
    background: #faf8fd;
}

/* Drag-to-reorder */
.ext-method-item {
    cursor: grab;
}

.ext-method-item.ui-sortable-helper {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(127,84,179,.25);
}

.ext-sort-placeholder {
    border: 1px dashed #b49fd4 !important;
    background: var(--extnify-accent-tint) !important;
    visibility: visible !important;
}

.ext-method-item.ext-nav-active {
    background: var(--extnify-accent-tint);
    border-color: var(--extnify-accent);
    border-left-color: var(--extnify-accent);
    border-left-width: 4px;
    box-shadow: 0 2px 6px rgba(127,84,179,.15);
    color: var(--extnify-accent-darker);
    font-weight: 600;
}

.ext-method-item.ext-nav-active .ext-method-label {
    color: var(--extnify-accent-darker);
}

/* Label */
.ext-method-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Status badge */
.ext-method-status-dot {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ext-method-active .ext-method-status-dot {
    background: #eafbea;
    color: #2a7a2e;
    border: 1px solid #b3e6b5;
    content: 'On';
}

.ext-method-inactive .ext-method-status-dot {
    background: #fdf0f0;
    color: #a02020;
    border: 1px solid #f5c6c6;
}

/* Empty state */
.ext-sidebar-empty {
    padding: 20px 16px;
    font-size: 12px;
    color: var(--extnify-muted-soft);
    font-style: italic;
    text-align: center;
    background: var(--extnify-surface);
    border: 1px dashed #dcdcde;
    border-radius: 6px;
    margin: 8px 10px;
}

/* Add New Method button */
.ext-add-method-wrap {
    padding: 12px 14px;
    border-top: 1px solid #e0e0e2;
    margin-top: auto;
    background: #fafafa;
}

.ext-add-method-wrap .button {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--extnify-accent);
    border-color: var(--extnify-accent);
    color: var(--extnify-surface);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 0;
    height: auto;
    border-radius: 4px;
    box-shadow: none;
    transition: background .15s, border-color .15s;
}

.ext-add-method-wrap .button:hover,
.ext-add-method-wrap .button:focus {
    background: var(--extnify-accent-dark);
    border-color: var(--extnify-accent-dark);
    color: var(--extnify-surface);
    box-shadow: none;
}

.ext-add-method-wrap .button .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Main panel
   -------------------------------------------------------------------------- */
.ext-main {
    flex: 1;
    min-width: 0;
    padding: 20px 24px;
    background: var(--extnify-surface);
}

.ext-panel {
    display: none;
}

.ext-panel.active {
    display: block;
}

/* --------------------------------------------------------------------------
   Global settings header (tabs + save button row)
   -------------------------------------------------------------------------- */
.ext-global-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 2px solid var(--extnify-border-light);
    margin-bottom: 20px;
    gap: 12px;
}

.ext-global-save-wrap {
    flex-shrink: 0;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ext-global-save-wrap .button {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 16px;
    height: auto;
    line-height: 1.6;
    box-shadow: none;
    transition: background .15s, border-color .15s;
}

.ext-global-save-wrap .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ext-global-save-wrap .button-primary {
    background: var(--extnify-accent);
    border-color: var(--extnify-accent-dark);
}

.ext-global-save-wrap .button-primary:hover,
.ext-global-save-wrap .button-primary:focus {
    background: var(--extnify-accent-dark);
    border-color: #5c3185;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Global settings sub-tabs
   -------------------------------------------------------------------------- */
.ext-subtab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    flex: 1;
}

.ext-subtab-nav .nav-tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--extnify-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 8px 14px;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    outline: none;
    box-shadow: none;
}

.ext-subtab-nav .nav-tab:hover {
    color: var(--extnify-accent);
    background: transparent;
    border-bottom-color: var(--extnify-accent-border);
    box-shadow: none;
}

.ext-subtab-nav .nav-tab-active,
.ext-subtab-nav .nav-tab-active:hover {
    color: var(--extnify-accent);
    font-weight: 700;
    background: transparent;
    border-bottom: 3px solid var(--extnify-accent);
    box-shadow: none;
}

.ext-subtab-pane {
    display: none;
}

.ext-subtab-pane.active {
    display: block;
}


/* --------------------------------------------------------------------------
   Method panel
   -------------------------------------------------------------------------- */
.ext-method-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    color: #646970;
    font-size: 13px;
}

.ext-method-loading .spinner {
    float: none;
    margin: 0;
}

.ext-method-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;   /* buttons on the right */
}

/* Icon-only action buttons (label shown via the native title tooltip) */
.ext-icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    min-height: 30px;
    padding: 0 !important;
    font-size: 0;                /* collapse the helper's trailing   */
    border: none !important;
    border-radius: 4px;
    color: var(--extnify-surface) !important;
    transition: filter .12s ease, transform .06s ease;
}

.ext-icon-btn:hover  { filter: brightness(1.08); }
.ext-icon-btn:active { transform: translateY(1px); }

.ext-icon-btn .dashicons {
    font-size: 18px;
    width: 17px;
    height: 17px;
    line-height: 1;
    margin-bottom: 15px;
    color: var(--extnify-surface);
}

/* Solid colored actions (OpenCart-style) */
.ext-method-save    { background: #2ea043 !important; }   /* green  */
.ext-method-copy    { background: #f0ad4e !important; }   /* orange */
.ext-method-delete  { background: #e5484d !important; }   /* red    */
.ext-toolbar-save   { background: var(--extnify-accent) !important; }   /* purple */
.ext-clear-cache    { background: #2f6fed !important; }   /* blue   */

.ext-method-id-badge {
    display: inline-block;
    background: var(--extnify-bg-soft);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 13px;
}

/* Method sub-tabs */
.ext-mtab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: 2px solid var(--extnify-border-light);
}

.ext-mtab-nav .nav-tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--extnify-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 8px 14px;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    outline: none;
    box-shadow: none;
}

.ext-mtab-nav .nav-tab:hover {
    color: var(--extnify-accent);
    background: transparent;
    border-bottom-color: var(--extnify-accent-border);
    box-shadow: none;
}

.ext-mtab-nav .nav-tab-active,
.ext-mtab-nav .nav-tab-active:hover {
    color: var(--extnify-accent);
    font-weight: 700;
    background: transparent;
    border-bottom: 3px solid var(--extnify-accent);
    box-shadow: none;
}

.ext-mtab-pane {
    display: none;
}

.ext-mtab-pane.active {
    display: block;
}

/* --------------------------------------------------------------------------
   OCM form table — general
   -------------------------------------------------------------------------- */
.ext-wrap .form-table {
    font-size: 13px;
}

.ext-wrap .form-table > tbody > tr > th {
    width: 220px;
    padding: 14px 12px 14px 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--extnify-text);
    vertical-align: top;
    line-height: 1.5;
    text-align: right;   /* OpenCart-style: label + "?" hug the input column */
}

.ext-wrap .form-table td {
    padding: 10px 10px 10px 5px;
    vertical-align: top;
}

/* Inputs */
.ext-wrap .form-table td input[type="text"],
.ext-wrap .form-table td input[type="number"],
.ext-wrap .form-table td input[type="email"],
.ext-wrap .form-table td input[type="url"],
.ext-wrap .form-table td input[type="password"] {
    font-size: 13px;
    padding: 6px 10px;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--extnify-border);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    max-width: 420px;
    color: var(--extnify-text);
}

.ext-wrap .form-table td input[type="text"]:focus,
.ext-wrap .form-table td input[type="number"]:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

/* Selects */
.ext-wrap .form-table td select {
    font-size: 13px;
    padding: 0px 8px;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--extnify-border);
    min-width: 175px;
    color: var(--extnify-text);
    box-shadow: none;
}

.ext-wrap .form-table td select:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

/* Textarea */
.ext-wrap .form-table td textarea {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--extnify-border);
    width: 100%;
    max-width: 420px;
    box-shadow: none;
    color: var(--extnify-text);
    transition: border-color .15s, box-shadow .15s;
}

.ext-wrap .form-table td textarea:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

/* Checkboxes */
.ext-wrap .form-table td label {
    font-size: 13px;
    color: var(--extnify-text);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    margin-bottom: 6px;
    line-height: 1.5;
    padding: 0px 0px 0px 5px;
}

.ext-wrap .form-table td input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--extnify-accent);
    cursor: pointer;
}

/* Help / description text */
.ext-wrap .form-table td p.description,
.ext-wrap .form-table td .description {
    display: block;
    margin-top: 5px;
    color: var(--extnify-muted-soft);
    font-style: italic;
    font-size: 12px;
    line-height: 1.5;
    max-width: 420px;
}

/* Alternating row tint */
.ext-wrap .form-table tr:nth-child(even) {
    background: #fafafa;
}

/* Row separator */
.ext-wrap .form-table tr {
    border-bottom: 1px solid var(--extnify-bg-soft);
}

.ext-wrap .form-table tr:last-child {
    border-bottom: none;
}

/* Help row */
.ext-help-row td {
    padding: 4px 0 12px;
    color: #646970;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   OCM checkgroup
   Rendered HTML: .checkbox-inline (For Any label) + .checkbox.ocm-checkgroup[.ocm-visible]
   -------------------------------------------------------------------------- */

/* "For Any" label/checkbox */
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--extnify-text-soft);
    cursor: pointer;
    margin-bottom: 8px;
    user-select: none;
}

/* Hide the checkgroup list when .ocm-visible is absent (For Any is checked) */
.ocm-checkgroup:not(.ocm-visible) {
    display: none;
}

/* Search input */
.ocm-checkgroup-search {
    width: 100%;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.ocm-checkgroup-search .regular-text {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    border-color: var(--extnify-accent-border);
    border-radius: 4px;
}

.ocm-checkgroup-search .regular-text:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

/* Scrollable checkbox list */
.ocm-checkgroup-checkbox {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e0d8ef;
    border-radius: 4px;
    padding: 8px 10px;
    background: var(--extnify-surface);
    column-count: 2;
    column-gap: 12px;
    margin-bottom: 6px;
}

.ocm-checkgroup-checkbox label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    font-size: 13px;
    break-inside: avoid;
    cursor: pointer;
}

.ocm-checkgroup-checkbox label:hover {
    color: var(--extnify-accent);
}

/* Empty state when no regions exist for selected countries */
.ext-zone-empty {
    font-size: 12px;
    color: var(--extnify-muted-soft);
    font-style: italic;
    margin: 4px 0 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Custom Region add UI
   -------------------------------------------------------------------------- */
.ext-cz-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ext-cz-country {
    font-size: 13px;
    min-width: 180px;
    max-width: 220px;
    height: 36px;
    border-color: var(--extnify-accent-border);
    border-radius: 4px;
    flex-shrink: 0;
}

.ext-cz-country:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

/* Tag-based input container */
.ext-cz-tag-input {
    position: relative;
    flex: 1;
    min-width: 250px;
    border: 1px solid var(--extnify-accent-border);
    border-radius: 4px;
    background: var(--extnify-surface);
    padding: 5px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    cursor: text;
    min-height: 36px;
    box-sizing: border-box;
}

.ext-cz-tag-input:focus-within {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
}

.ext-cz-tags {
    display: contents;
}

/* Text input sits inline alongside tags */
.ext-cz-name {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 1px 4px !important;
    margin: 0 !important;
    font-size: 13px !important;
    height: auto !important;
    line-height: 1.5 !important;
    min-width: 120px;
    flex: 1;
    outline: none !important;
}

/* Suggestion dropdown */
.ext-cz-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: var(--extnify-surface);
    border: 1px solid var(--extnify-border);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    max-height: 180px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
}

.ext-cz-sugg-item {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--extnify-text-soft);
}

.ext-cz-sugg-item:hover {
    background: var(--extnify-accent-tint);
    color: var(--extnify-accent);
}

/* Custom region label in the zone box (hidden checkboxes) */
.ext-cz-label {
    display: flex !important;
    align-items: center;
    gap: 4px;
}

/* Footer action links */
.ocm-checkgroup-option {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Check All / Uncheck All / Show Selected — rendered as pill buttons.
   Default is neutral grey; hover/click gives each its own colour. */
.ocm-checkgroup-option a {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--extnify-text-soft);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 4px;
    background: #e0e0e0;
    transition: background-color .15s ease, color .15s ease;
}

/* Check All → blue */
.ocm-checkgroup-option a.ocm-check-uncheck[rel="checked"]:hover,
.ocm-checkgroup-option a.ocm-check-uncheck[rel="checked"]:focus,
.ocm-checkgroup-option a.ocm-check-uncheck[rel="checked"]:active {
    background: #03a9f4;
    color: var(--extnify-surface);
}

/* Uncheck All → soft red (clearing action) */
.ocm-checkgroup-option a.ocm-check-uncheck[rel="unchecked"]:hover,
.ocm-checkgroup-option a.ocm-check-uncheck[rel="unchecked"]:focus,
.ocm-checkgroup-option a.ocm-check-uncheck[rel="unchecked"]:active {
    background: #e57373;
    color: var(--extnify-surface);
}

/* Show Selected → soft amber (hover, press, and while the filter is active).
   Dark text — white is hard to read on a pale orange. */
.ocm-checkgroup-option a.ocm-check-selected:hover,
.ocm-checkgroup-option a.ocm-check-selected:focus,
.ocm-checkgroup-option a.ocm-check-selected:active,
.ocm-checkgroup-option a.ocm-check-selected.is-filtered {
    background: #ffb74d;
    color: #5a3d00;
}

/* --------------------------------------------------------------------------
   OCM autofill (tag picker)
   -------------------------------------------------------------------------- */
.ext-autofill-wrap {
    position: relative;
}

.ext-autofill-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.ext-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--extnify-accent);
    color: var(--extnify-surface);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.ext-tag-remove {
    background: none;
    border: none;
    color: var(--extnify-surface);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.ext-autofill-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: var(--extnify-surface);
    border: 1px solid var(--extnify-border);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    min-width: 240px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.ext-autofill-result {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}

.ext-autofill-result:hover {
    background: var(--extnify-bg-soft);
}

.ext-autofill-remove-all {
    display: block;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Range / price table
   -------------------------------------------------------------------------- */
/* Fix the method form-table layout so its cells stay viewport-bound (don't
   grow to fit wide content). This lets the cost table's scroll wrapper below
   actually constrain + scroll. WP inputs use max-width:100%, so other fields
   shrink gracefully under a fixed layout. */
.ext-method-form .form-table {
    table-layout: fixed;
    width: 100%;
}

.ext-method-form .form-table > tbody > tr > th {
    width: 200px;
}

/* Keep every field within its cell once the layout is fixed (wide WP defaults
   like 500px textareas would otherwise spill out of a narrow cell). */
.ext-method-form .form-table td input,
.ext-method-form .form-table td textarea,
.ext-method-form .form-table td select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Cap the simple top/general fields (Admin Name, Method Title, Description,
   Logo URL, Sort Order, Factor Value, Shopping Cart Modifier, etc.) so they
   don't stretch across the whole panel. The direct-child combinator keeps
   range/split inputs (nested in spans/divs) and the cost-table inputs (in a
   nested table) untouched. */
.ext-method-form .form-table td > input.regular-text,
.ext-method-form .form-table td > input[type="text"],
.ext-method-form .form-table td > input[type="number"],
.ext-method-form .form-table td > textarea {
    width: 100%;
    max-width: 520px;
}

/* Horizontal-scroll wrapper: keeps the (wide) cost table reachable on small
   screens instead of overflowing the page and clipping the Action column. */
.ext-range-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ext-range-container table {
    width: auto;               /* size to content so columns hug the inputs
                                  instead of stretching across the whole panel */
    table-layout: auto;
    border-collapse: collapse;
    font-size: 13px;
}

.ext-range-container th {
    background: var(--extnify-bg);
    padding: 6px 8px;
    border: 1px solid #dcdcde;
    text-align: left;
    font-weight: 600;
}

.ext-range-container td {
    padding: 4px 6px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
}

.ext-range-container td input.small-text {
    width: 92px;
}

.ext-range-container td select {
    width: 110px;
}

.ext-range-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.ext-range-add-col {
    text-align: right;
}

/* --------------------------------------------------------------------------
   Sub-options list
   -------------------------------------------------------------------------- */
.ext-sub-options-list {
    margin-bottom: 10px;
}

.ext-sub-opt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    background: #f9f9f9;
    padding: 4px 8px;
    border: 1px solid #dcdcde;
    border-radius: 3px;
}

.ext-sub-opt-row input {
    flex: none;
}

.ext-sub-opt-row input.regular-text {
    flex: 1;
}

.ext-sub-opt-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.ext-sub-opt-add {
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Section rows — headers & dividers inside form-table (Grouping tab)
   -------------------------------------------------------------------------- */
.ext-section-row td {
    padding: 20px 0 6px !important;
    border-bottom: none !important;
    background: transparent !important;
}

.ext-section-row:first-child td {
    padding-top: 4px !important;
}

.ext-section-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--extnify-accent);
    margin-bottom: 3px;
}

.ext-section-sub {
    font-size: 12px;
    color: var(--extnify-muted-soft);
    font-style: italic;
}

.ext-section-sep td {
    padding: 0 !important;
    height: 1px;
    background: #e8e8ea !important;
    border: none !important;
}

.ext-full-td {
    padding: 0 0 4px !important;
}

/* --------------------------------------------------------------------------
   Sub-groups configuration table
   -------------------------------------------------------------------------- */
.ext-group-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Reset form-table's inherited row styles for the nested table */
.ext-wrap .form-table .ext-group-table tr {
    border-bottom: none;
    background: none;
}

.ext-group-table th {
    background: var(--extnify-accent-tint);
    color: var(--extnify-accent-darker);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    border: 1px solid #e0d8ef;
    text-align: left;
    white-space: nowrap;
}

.ext-group-table th:first-child { width: 72px; }
.ext-group-table th:nth-child(3) { width: 80px; }

.ext-group-table td {
    padding: 6px 10px;
    border: 1px solid #ebebed;
    vertical-align: middle;
    background: var(--extnify-surface);
}

.ext-group-table tbody tr:nth-child(even) td {
    background: #faf8fd;
}

.ext-group-table tbody tr:hover td {
    background: var(--extnify-accent-tint);
}

.ext-group-id-cell {
    font-size: 12px;
    font-weight: 600;
    color: #646970;
    white-space: nowrap;
}

.ext-group-table select {
    font-size: 12px;
    padding: 4px 6px;
    height: auto;
    border-radius: 3px;
    border: 1px solid var(--extnify-border);
    box-shadow: none;
    color: var(--extnify-text);
}

.ext-group-table select:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

.ext-group-table .ext-sub-group-select { min-width: 130px; }
.ext-group-table .ext-sub-group-limit  { min-width: 58px; }

.ext-group-table input[type="text"] {
    font-size: 12px;
    padding: 4px 8px;
    height: auto;
    border-radius: 3px;
    border: 1px solid var(--extnify-border);
    width: 100%;
    max-width: 260px;
    box-shadow: none;
    color: var(--extnify-text);
}

.ext-group-table input[type="text"]:focus {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
    outline: none;
}

/* --------------------------------------------------------------------------
   Info callout (Logo/Desc tab and similar)
   -------------------------------------------------------------------------- */
.ext-info-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--extnify-accent-tint);
    border: 1px solid #d4c4ef;
    border-left: 4px solid var(--extnify-accent);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.ext-callout-icon {
    flex-shrink: 0;
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--extnify-accent);
    margin-top: 2px;
}

.ext-callout-body p {
    margin: 0 0 4px;
    line-height: 1.5;
    color: #3d2664;
}

.ext-callout-body p:last-child {
    margin-bottom: 0;
}

/* "Available in Pro Version" upsell link (wp.org build only) */
.ext-pro-link {
    color: var(--extnify-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--extnify-accent-border);
    transition: color .15s ease, border-color .15s ease;
}
.ext-pro-link::after {
    content: "\00a0\2192"; /* nbsp + → */
    display: inline-block;
    transition: transform .15s ease;
}
.ext-pro-link:hover,
.ext-pro-link:focus {
    color: var(--extnify-accent-darker);
    border-bottom-color: var(--extnify-accent-dark);
    text-decoration: none;
}
.ext-pro-link:hover::after,
.ext-pro-link:focus::after {
    transform: translateX(3px);
}

.ext-callout-body code {
    background: rgba(127,84,179,.12);
    color: var(--extnify-accent-darker);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-family: monospace;
}

/* --------------------------------------------------------------------------
   Help panel
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Help & Support tab — two-panel layout (info cards + live debug log)
   ========================================================================== */
.ext-hs {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(0, 480px);
    justify-content: space-between;
    gap: 22px;
    align-items: stretch;
    padding: 8px 2px 24px;
}
.ext-hs[data-log-open="0"] { grid-template-columns: minmax(320px, 430px); }
.ext-hs[data-log-open="0"] .ext-hs-log { display: none; }

.ext-hs-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #46b450;
    display: inline-block;
    flex: 0 0 auto;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.ext-hs-left { display: flex; flex-direction: column; gap: 12px; }

.ext-hs-head { display: flex; align-items: center; gap: 13px; margin-bottom: 2px; }
.ext-hs-head-icon {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px; background: var(--extnify-accent-tint-2); color: var(--extnify-accent);
}
.ext-hs-head-icon .dashicons { font-size: 25px; width: 25px; height: 25px; }
.ext-hs-head-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.ext-hs-head-text strong { font-size: 18px; color: var(--extnify-text); }
.ext-hs-head-text span { font-size: 13px; color: #82868b; }
.ext-hs-logtoggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--extnify-surface); border: 1px solid #e2e2e8; border-radius: 22px;
    padding: 7px 15px; font-size: 13px; color: var(--extnify-text-soft); cursor: pointer;
    white-space: nowrap;
}
.ext-hs-logtoggle:hover { border-color: #c9c9d2; }
.ext-hs[data-log-open="0"] .ext-hs-logtoggle .ext-hs-dot { background: var(--extnify-border); }

.ext-hs-status {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 17px; border-radius: 15px;
    background: #eaf8ee; border: 1px solid #c9ebd3;
}
.ext-hs-status-icon {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--extnify-surface); color: #38a355;
}
.ext-hs-status-icon .dashicons { font-size: 24px; width: 24px; height: 24px; }
.ext-hs-status-text { display: flex; flex-direction: column; line-height: 1.45; }
.ext-hs-status-text strong { font-size: 15px; color: #237a3a; }
.ext-hs-status-text span { font-size: 12.5px; color: var(--extnify-success); font-family: var(--extnify-mono); }

.ext-hs-card {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 16px; background: var(--extnify-surface);
    border: 1px solid #ececf1; border-radius: 14px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ext-hs-card:hover, .ext-hs-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .07);
    border-color: #e2e2ea;
}
.ext-hs .ext-hs-card-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px; font-size: 21px; line-height: 1;
}
.ext-hs-docs    .ext-hs-card-icon { background: var(--extnify-accent-tint-2); color: var(--extnify-accent); }
.ext-hs-support .ext-hs-card-icon { background: #e6f4fb; color: #0a91c4; }
.ext-hs-update  .ext-hs-card-icon { background: #e7f6ec; color: #38a355; }
.ext-hs-ext     .ext-hs-card-icon { background: #fdf1dc; color: #e0921a; }

.ext-hs-card-text { display: flex; flex-direction: column; flex: 1; line-height: 1.35; }
.ext-hs-card-text strong { font-size: 14.5px; color: var(--extnify-text); }
.ext-hs-card-text span { font-size: 12.5px; color: #8a8d93; }
.ext-hs .ext-hs-card-arrow {
    margin-left: auto; color: var(--extnify-border); font-size: 17px;
    width: 17px; height: 17px;
    transition: transform .15s ease, color .15s ease;
}
.ext-hs-card:hover .ext-hs-card-arrow { transform: translateX(3px); color: #6b6f76; }

/* ── Right column: live debug log ────────────────────────────────────────── */
.ext-hs-log {
    display: flex; flex-direction: column;
    background: var(--extnify-surface); border: 1px solid var(--extnify-accent-dark);
    border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    overflow: hidden;
    /* Fixed height so the panel is the same size on every filter (All/Info/Warn/
       Error/Debug) — the body just scrolls within it. Sized to the viewport so
       header + body + footer stay on-screen (no page scroll). */
    min-height: 0;
    height: calc(100vh - 280px);
    align-self: start;
}
.ext-hs-log-head {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 18px; border-bottom: 1px solid #f0f0f4;
    background: var(--extnify-accent-dark);
}
.ext-hs .ext-hs-log-headicon {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--extnify-accent-tint-2); color: var(--extnify-accent); font-size: 20px; line-height: 1;
}
.ext-hs-log-head strong { font-size: 16px; color: var(--extnify-surface); }
.ext-hs-live {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    background: #e7f6ec; color: #2f9e4d;
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    padding: 4px 10px; border-radius: 20px;
}
.ext-hs .ext-hs-log-close {
    background: none; border: 0; cursor: pointer; color: #9a9da3;
    width: 28px; height: 28px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 20px; line-height: 1;
}
.ext-hs .ext-hs-log-close:hover { background: #f2f2f5; color: var(--extnify-text-soft); }

.ext-hs-log-tools {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; border-bottom: 1px solid #f4f4f7;
}
.ext-hs-filters { display: flex; gap: 3px; flex: 1; flex-wrap: wrap; }
.ext-hs-filter {
    background: none; border: 0; cursor: pointer;
    font-size: 13px; color: #6b6f76; padding: 5px 12px; border-radius: 20px;
}
.ext-hs-filter:hover { background: #f4f4f7; }
.ext-hs-filter.active { background: var(--extnify-text); color: var(--extnify-surface); }
.ext-hs-tools-right { display: flex; align-items: center; gap: 12px; }
.ext-hs-auto { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #6b6f76; cursor: pointer; }
.ext-hs .ext-hs-auto-cb {
    appearance: none; -webkit-appearance: none;
    width: 34px; height: 18px; margin: 0; padding: 0;
    border: 0; border-radius: 20px; background: #cbced4;
    position: relative; cursor: pointer; box-shadow: none;
    transition: background .15s ease;
}
.ext-hs .ext-hs-auto-cb:checked { background: var(--extnify-link); }
.ext-hs .ext-hs-auto-cb::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--extnify-surface);
    transition: left .15s ease;
}
.ext-hs .ext-hs-auto-cb:checked::before { left: 18px; }
.ext-hs .ext-hs-log-clear {
    background: none; border: 0; cursor: pointer; color: #9a9da3;
    width: 26px; height: 26px; padding: 0; font-size: 17px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.ext-hs .ext-hs-log-clear:hover { color: var(--extnify-danger); }

/* Chat-style log: each entry is an avatar + a message bubble, newest at bottom. */
.ext-hs-log-body { flex: 1; overflow-y: auto; min-height: 0; padding: 10px 16px; background: #fafafb; }
.ext-hs-log-empty { padding: 40px 18px; text-align: center; color: #9a9da3; font-size: 13px; }

.ext-hs-entry {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 6px 2px;
}
.ext-hs-avatar {
    flex: 0 0 auto; width: 28px; height: 28px; margin-top: 2px;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 700; color: var(--extnify-surface); background: #9aa0aa;
}
.ext-hs-bubble {
    position: relative; min-width: 0;
    background: var(--extnify-surface); border: 1px solid #eceef1;
    border-radius: 13px; border-top-left-radius: 4px;
    padding: 8px 13px 9px; box-shadow: 0 1px 1px rgba(0,0,0,.03);
}
.ext-hs-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.ext-hs-badge {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 5px;
}
.ext-hs-time { font-family: var(--extnify-mono); font-size: 11px; color: #a0a4ac; }
.ext-hs-text {
    font-family: var(--extnify-mono); font-size: 12.5px; line-height: 1.55;
    color: var(--extnify-text-soft); word-break: break-word; white-space: pre-wrap;
}

.ext-hs-lvl-info  .ext-hs-avatar { background: var(--extnify-link); }
.ext-hs-lvl-debug .ext-hs-avatar { background: var(--extnify-accent); }
.ext-hs-lvl-warn  .ext-hs-avatar { background: #c08a1e; }
.ext-hs-lvl-error .ext-hs-avatar { background: var(--extnify-danger); }

.ext-hs-lvl-info  .ext-hs-badge { background: #e6f0fb; color: var(--extnify-link); }
.ext-hs-lvl-debug .ext-hs-badge { background: var(--extnify-accent-tint-2); color: var(--extnify-accent); }
.ext-hs-lvl-warn  .ext-hs-badge { background: #fdf3d8; color: #a97a04; }
.ext-hs-lvl-error .ext-hs-badge { background: #fbe4e4; color: var(--extnify-danger); }

.ext-hs-lvl-info  .ext-hs-bubble { background: #f3f8fd; border-color: #dcebf8; }
.ext-hs-lvl-debug .ext-hs-bubble { background: #f7f4fc; border-color: #e6dcf4; }
.ext-hs-lvl-warn  .ext-hs-bubble { background: #fdf8ec; border-color: #f2e4c3; }
.ext-hs-lvl-error .ext-hs-bubble { background: #fdf1f1; border-color: #f4d4d4; }
.ext-hs-lvl-error .ext-hs-text  { color: #b3312f; }

.ext-hs-log-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-top: 1px solid #f0f0f4;
}
.ext-hs-conn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #82868b; }
.ext-hs .ext-hs-history.button {
    background: var(--extnify-text); border-color: var(--extnify-text); color: var(--extnify-surface);
    border-radius: 8px; box-shadow: none;
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; height: auto;
}
.ext-hs .ext-hs-history.button:hover { background: #000; border-color: #000; }
.ext-hs .ext-hs-history .dashicons { font-size: 15px; width: 15px; height: 27px; }

@media (max-width: 1100px) {
    .ext-hs, .ext-hs[data-log-open="1"] { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   WC settings tab notice
   -------------------------------------------------------------------------- */
.ext-wc-tab-notice {
    padding: 20px;
    background: var(--extnify-surface);
    border: 1px solid var(--extnify-border);
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Top fields (above method tabs)
   -------------------------------------------------------------------------- */
.ext-top-fields {
    margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Dependency show/hide
   -------------------------------------------------------------------------- */
.ext-dep-hidden,
tr.ext-dep-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Error message
   -------------------------------------------------------------------------- */
.ext-error {
    color: var(--extnify-danger);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Import / Export tab
   -------------------------------------------------------------------------- */
.ext-io-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 740px;
}

.ext-io-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--extnify-surface);
    border: 1px solid #e0d8ef;
    border-radius: 6px;
    padding: 18px 20px;
}

.ext-io-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0ebfa;
}

.ext-io-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--extnify-accent);
    flex-shrink: 0;
}

.ext-io-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--extnify-text);
    border: none;
}

.ext-io-desc {
    margin: 0;
    font-size: 13px;
    color: var(--extnify-muted);
    line-height: 1.55;
}

.ext-io-warning {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff8e5;
    border: 1px solid #f0c040;
    border-left: 3px solid #dba617;
    border-radius: 3px;
    padding: 7px 10px;
    font-size: 12px;
    color: #7a5d00;
    line-height: 1.4;
}

.ext-io-warning .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: #c48a00;
    flex-shrink: 0;
}

/* Styled file picker */
.ext-io-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ext-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.ext-wrap .ext-file-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 10px;
    height: auto;
    line-height: 1;
}

.ext-file-label:focus-within {
    border-color: var(--extnify-accent);
    box-shadow: 0 0 0 1px var(--extnify-accent);
}

.ext-file-name {
    font-size: 12px;
    color: var(--extnify-muted-soft);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.ext-file-name.ext-file-chosen {
    color: var(--extnify-text);
    font-style: normal;
    font-weight: 500;
}

/* Card footer — push action button to bottom */
.ext-io-card-footer {
    margin-top: auto;
    padding-top: 4px;
}

/* Action buttons — prefix with .ext-wrap to beat WP's .wp-core-ui .button (0,2,0) */
.ext-wrap .ext-io-btn,
.ext-wrap a.ext-io-btn:link,
.ext-wrap a.ext-io-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--extnify-accent);
    border-color: var(--extnify-accent-dark);
    color: var(--extnify-surface);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 14px;
    height: auto;
    box-shadow: none;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.ext-wrap .ext-io-btn:hover,
.ext-wrap .ext-io-btn:focus {
    background: var(--extnify-accent-dark);
    border-color: #5c3185;
    color: var(--extnify-surface);
    box-shadow: none;
}

.ext-wrap .ext-io-btn .dashicons,
.ext-wrap .ext-file-label .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
}

.ext-wrap .ext-io-btn-export,
.ext-wrap a.ext-io-btn-export:link,
.ext-wrap a.ext-io-btn-export:visited {
    background: var(--extnify-link);
    border-color: #135e96;
    color: var(--extnify-surface);
}

.ext-wrap .ext-io-btn-export:hover,
.ext-wrap .ext-io-btn-export:focus {
    background: #135e96;
    border-color: #0a4b78;
    color: var(--extnify-surface);
}

@media ( max-width: 640px ) {
    .ext-io-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Responsive — collapse sidebar below 900px
   -------------------------------------------------------------------------- */
@media ( max-width: 900px ) {
    .ext-layout {
        flex-direction: column;
    }

    .ext-sidebar {
        width: 100%;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--extnify-border);
    }

    .ext-method-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 14px;
    }

    .ext-sidebar-item.ext-method-item {
        border-left: none;
        border: 1px solid var(--extnify-border);
        border-radius: 3px;
        padding: 6px 10px;
    }
}

/* --------------------------------------------------------------------------
   Import result toast
   -------------------------------------------------------------------------- */
/* Floating toast stack (top-right) */
.ext-toast-stack {
    position: fixed;
    top: 96px;                  /* just below the sticky topbar / Save All + Clear Cache */
    right: 24px;
    z-index: 100000;
    display: flex;
    flex-direction: column;     /* newest toast on top */
    gap: 8px;
    width: 300px;
    max-width: calc(100vw - 48px);
    pointer-events: none;       /* toasts never block clicks (they auto-dismiss) */
}

/* Toasts let clicks pass through to anything beneath; only the × is clickable. */
.ext-toast-stack .ext-toast       { pointer-events: none; }
.ext-toast-stack .ext-toast-close { pointer-events: auto; }

/* Method-scoped toasts: anchored just below the method action buttons. */
.ext-method-actions { position: relative; }
.ext-toast-stack-inline {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
}

.ext-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    animation: extToastIn .25s ease;
    transition: opacity .35s ease, transform .35s ease;
}

.ext-toast-stack .ext-toast { margin-bottom: 0; }

.ext-toast.ext-toast-hide {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.ext-toast-success {
    background: #edfbee;
    border: 1px solid #a8dca9;
    color: #1a5c1e;
}

.ext-toast-error {
    background: #fdf0f0;
    border: 1px solid #f5c6c6;
    color: #7a1f1f;
}

.ext-toast > .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

.ext-toast-success > .dashicons { color: #2a7a2e; }
.ext-toast-error   > .dashicons { color: #a02020; }

.ext-toast-msg {
    flex: 1;
    line-height: 1.45;
}

.ext-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;     /* push × to the far right */
    align-self: flex-start;
    opacity: 0.55;
    color: inherit;
    line-height: 1;
}

.ext-toast-close:hover { opacity: 1; }

.ext-toast-close .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    vertical-align: middle;
}

@keyframes extToastIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* --------------------------------------------------------------------------
   Import file validation message
   -------------------------------------------------------------------------- */
.ext-file-required {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #a02020;
    margin: 6px 0 0;
    animation: extToastIn .2s ease;
    transition: opacity .35s ease;
}

.ext-file-required.ext-file-required-hide {
    opacity: 0;
}

.ext-file-required .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Start — End range pairs (Order Total / Weight / Quantity / Time / Date) ──
   Keep both inputs side-by-side as equal columns instead of stacking on
   narrower screens (e.g. small laptops). */
.ocm-range {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    width: 100%;
}

.ocm-range > span {
    flex: 1 1 0;
    min-width: 0;            /* allow the input to shrink below its intrinsic width */
}

.ocm-range > span.ocm-range-sep {
    flex: 0 0 auto;
    color: #787878;
}

.ocm-range input,
.ocm-range select {
    width: 100%;
    min-width: 0;
    max-width: none;        /* override WP .regular-text fixed width */
    box-sizing: border-box;
}

/* Multi-field rows (Package Capacity, Price Adjustment, Additional Price) —
   wrap into responsive columns rather than stretching/stacking awkwardly. */
.ocm-split-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 720px;
}

.ocm-split-row .ocm-split-col {
    flex: 1 1 140px;
    min-width: 0;
}

.ocm-split-row .ocm-split-col input {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

/* Label + "?" laid out as a right-aligned flex row so the badge always sits
   beside the label (vertically centered) and never orphans onto its own line
   when the label nearly fills the column. */
.ocm-th-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* "Group in groups" is the group table's footer row — separate it from the 10
   group rows and align its label + dropdown with the columns above. */
.ext-group-table tfoot .ext-group-foot-row td {
    border-top: 2px solid #d9cded;
    background: var(--extnify-accent-tint);
}

/* ── Field help tooltip (OpenCart-style "?" badge) ──────────────────────────
   Driven by Ocm_Base::getRow(): any field with help text gets a "?" next to
   its label; hover/focus reveals the bubble. */
.ocm-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--extnify-link);
    color: var(--extnify-surface);
    font: 700 11px/1 sans-serif;
    vertical-align: middle;
    cursor: help;
    flex: 0 0 auto;
    user-select: none;
}

/* The "?" glyph — single source, so it can never double up with the badge. */
.ocm-tip::before { content: "?"; }

/* The bubble is a real element (not CSS content), so help HTML (<b>, <br>…)
   renders. */
.ocm-tip-bubble {
    position: absolute;
    left: -4px;
    bottom: calc(100% + 9px);
    width: max-content;
    max-width: 280px;
    padding: 8px 11px;
    border-radius: 6px;
    background: #1e1e1e;
    color: var(--extnify-surface);
    font: 400 12px/1.45 sans-serif;
    font-weight: 400;
    text-align: left;
    text-transform: none;      /* don't inherit heading uppercase */
    letter-spacing: normal;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    z-index: 100001;
    pointer-events: none;
}

/* Tooltips near the top of the panel (section headings, group-table column
   headers) would be clipped by the layout's overflow if they opened upward —
   drop them below instead. */
.ext-section-title .ocm-tip-bubble,
.ext-group-table th .ocm-tip-bubble,
.ext-io-title .ocm-tip-bubble {
    top: calc(100% + 9px);
    bottom: auto;
}

/* Right-most Shipping-Cost columns (Per Unit Block, Partial Block): extend the
   bubble leftward so the long text stays on-screen. Action is the last column
   and has no tooltip, so these are nth-last-child 2 and 3. */
.ext-range-container th:nth-last-child(2) .ocm-tip-bubble,
.ext-range-container th:nth-last-child(3) .ocm-tip-bubble {
    left: auto;
    right: 0;
}

/* On wide screens the compact cost table fits, so let its tooltips escape the
   horizontal-scroll wrapper; narrower screens keep the scroll. */
@media screen and (min-width: 1200px) {
    .ext-range-scroll { overflow: visible; }
}

/* Right-most column (Group Name) is near the panel edge — extend its bubble
   leftward so it isn't clipped off the right side. */
.ext-group-table th:last-child .ocm-tip-bubble {
    left: auto;
    right: 0;
}

/* Reveal on hovering anywhere in the label cell (label text OR icon), or on
   keyboard focus of the badge — not just the icon. */
.ocm-th-inner:hover .ocm-tip-bubble,
.ocm-tip:hover .ocm-tip-bubble,
.ocm-tip:focus .ocm-tip-bubble,
.ocm-tip:focus-visible .ocm-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Whole label reads as hoverable when it has a tooltip. */
.ocm-th-inner:has(.ocm-tip) { cursor: help; }

/* ── "Help" link + collapsible help panel (OCM "more") ────────────────────── */
.ocm-more {
    margin: 6px 0 0;
}

.ocm-more a.ocm-more-toggle {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--extnify-link);
    font-style: normal;
    text-decoration: none;
    border: 1px solid #b7d3ea;
    border-radius: 20px;
    background: #f0f6fc;
}

.ocm-more a.ocm-more-toggle:hover,
.ocm-more a.ocm-more-toggle:focus {
    background: var(--extnify-link);
    border-color: var(--extnify-link);
    color: var(--extnify-surface);
}

.ocm-more-container {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--extnify-bg);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--extnify-muted);
}

/* ── Info notice (blue) — e.g. Product Rules tab guidance ──────────────────── */
.ext-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 11px 15px;
    background: #e5f4fb;
    border: 1px solid #b6def0;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #0b4a5e;
}

.ext-info-note .dashicons {
    color: #2196c9;
    flex: 0 0 auto;
    margin-top: 1px;
}

.ext-info-note a {
    color: var(--extnify-link);
    text-decoration: underline;
}

/* When the note sits inside the form-table as a full-width row. */
.ext-info-note-row > td {
    padding: 6px 0 !important;
}
.ext-info-note-row .ext-info-note {
    margin: 0;
}

/* ── Per Product Cost: cost-table column swap + product picker ─────────────── */
/* Range modes show Start/End/Partial; product mode shows Name/Unit Block Type. */
.ext-range-normal .ext-hide.product { display: none; }
.ext-range-product .ext-hide.range  { display: none; }

.ext-prod-cell { min-width: 170px; }

.ext-prod-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--extnify-text);
}

/* ── Product Browser modal ────────────────────────────────────────────────── */
.ext-pb-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px;
    background: rgba(0,0,0,.5);
}

.ext-pb-box {
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: var(--extnify-surface);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    overflow: hidden;
}

.ext-pb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--extnify-border-light);
}

.ext-pb-head h3 { margin: 0; font-size: 16px; }

.ext-pb-close {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #787878;
    cursor: pointer;
}
.ext-pb-close:hover { color: var(--extnify-text); }

.ext-pb-search {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--extnify-bg-soft);
}
.ext-pb-search .ext-pb-keyword { flex: 1; }

.ext-pb-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 18px;
}

.ext-pb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ext-pb-table th,
.ext-pb-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--extnify-bg-soft);
    text-align: left;
}
.ext-pb-table thead th {
    position: sticky;
    top: 0;
    background: var(--extnify-bg);
    font-weight: 600;
}
.ext-pb-table tbody tr:hover { background: #f6faff; }
.ext-pb-check { width: 34px; text-align: center; }
.ext-pb-msg { text-align: center; color: #787878; padding: 18px; }

.ext-pb-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--extnify-border-light);
    text-align: right;
}

/* Placeholder reference table inside a Help ("more") panel. */
.ocm-more-container table,
.ext-ph-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 12px;
    font-size: 13px;
}

.ocm-more-container table td,
.ext-ph-table td {
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    vertical-align: top;
    background: var(--extnify-surface);
}

.ocm-more-container table td:first-child,
.ext-ph-table td:first-child {
    width: 230px;
    white-space: nowrap;
    font-family: Consolas, Monaco, monospace;
    color: var(--extnify-link);
}

.ocm-more-container code {
    background: #eef2f5;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}

/* ── Combobox multi-select (Product Rules item pickers) ───────────────────── */
/* The checkbox list becomes a dropdown that opens on focus; selected items show
   as tags above the search. Scoped to .ext-combo so Generic-Rules checkgroups
   (inline, with For-Any) are unaffected. */
.ext-combo .ocm-checkgroup { position: relative; max-width: 480px; }

/* "Remove All" sits directly under the search box (2px gap), styled as a
   solid grey button that darkens on hover/focus. */
.ext-combo .ocm-checkgroup-search { margin-bottom: 0; }
.wp-core-ui .ext-combo-clear,
.wp-core-ui .ext-autofill-remove-all {
    background: #909090;
    border-color: #909090;
    border-radius: 4px;
    /* Fixed metrics so both (default .button and .button-small) render identically. */
    padding: 3px 11px;
    font-size: 12px;
    line-height: 1.6;
    height: auto;
    min-height: 0;
    margin-top: 2px;
    margin-left: 1px;
    color: var(--extnify-surface);
    text-decoration: none;
    box-shadow: none;
}
.wp-core-ui .ext-combo-clear:hover,
.wp-core-ui .ext-combo-clear:focus,
.wp-core-ui .ext-autofill-remove-all:hover,
.wp-core-ui .ext-autofill-remove-all:focus {
    background: #757575;
    border-color: #757575;
    color: var(--extnify-surface);
    box-shadow: none;
}

.ext-combo .ocm-checkgroup-checkbox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: var(--extnify-surface);
    border: 1px solid #b7d3ea;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.14);
    column-count: 1;   /* one option per line (base uses 2 columns) */
    column-gap: 0;
}

.ext-combo .ocm-checkgroup.ext-combo-open .ocm-checkgroup-checkbox {
    display: flex !important;
    flex-direction: column;   /* force one option per line regardless of label display */
}

/* One option per line inside the dropdown — checkbox + label, full-row hover. */
.ext-combo .ocm-checkgroup-checkbox label {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--extnify-text);
    cursor: pointer;
}

.ext-combo .ocm-checkgroup-checkbox label:hover {
    background: #e9f7ef;   /* light green row highlight */
}

.ext-combo .ocm-checkgroup-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #46b450; /* green when checked */
    cursor: pointer;
}

/* Selected tags. */
.ext-combo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.ext-combo-tags:empty { display: none; }

.ext-combo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 9px;
    background: var(--extnify-accent);
    color: var(--extnify-surface);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
}

.ext-combo-tag-x {
    border: 0;
    background: none;
    color: var(--extnify-surface);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: .85;
}
.ext-combo-tag-x:hover { opacity: 1; }