/**
 * Easy Search Replace — admin stylesheet (v2.0)
 *
 * Organized in sections:
 *   1. Tokens / base
 *   2. Topbar (title + actions)
 *   3. Tabs
 *   4. Rule cards (header, body, sections)
 *   5. Form controls (inputs, checkboxes, toggles, selects)
 *   6. Buttons
 *   7. Pro badge + upgrade CTAs
 *   8. Panels (used on Settings + Import/Export tabs)
 *   9. Free-tier hero lock
 *  10. Misc
 */

/* =====================================================================
 * 1. Tokens + reset
 * =================================================================== */

.esr-wrap {
	--esr-primary: #4f46e5;
	--esr-primary-dark: #4338ca;
	--esr-primary-light: #eef2ff;
	--esr-primary-mid: #c7d2fe;
	--esr-bg: #f0f0f1;
	--esr-surface: #fff;
	--esr-border: #e2e4e9;
	--esr-border-strong: #c3c4c7;
	--esr-text: #1d2327;
	--esr-text-muted: #50575e;
	--esr-text-dim: #646970;
	--esr-pro: #4f46e5;
	--esr-pro-bg: #eef2ff;
	--esr-pro-border: #c7d2fe;
	--esr-danger: #b32d2e;
	--esr-success: #00a32a;
	--esr-radius: 6px;
	--esr-radius-lg: 10px;
	--esr-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
	--esr-shadow: 0 2px 6px rgba(0, 0, 0, .06);
	--esr-gap: 16px;

	margin: 10px 20px 40px 2px;
	max-width: 1400px;
	color: var(--esr-text);
	font-size: 14px;
	line-height: 1.5;
}

.esr-wrap,
.esr-wrap * {
	box-sizing: border-box;
}

/* =====================================================================
 * 2. Topbar
 * =================================================================== */

.esr-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 20px 24px;
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius-lg);
	margin-bottom: 16px;
}

.esr-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.esr-title-pro {
	display: inline-block;
	padding: 2px 10px;
	background: var(--esr-pro-bg);
	color: var(--esr-pro);
	border: 1px solid var(--esr-pro-border);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.esr-subtitle {
	margin: 0;
	color: var(--esr-text-muted);
	font-size: 14px;
}

.esr-topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* =====================================================================
 * 3. Tabs
 * =================================================================== */

.esr-tabs {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--esr-border);
	overflow-x: auto;
}

.esr-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	color: var(--esr-text-muted);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
	white-space: nowrap;
}

.esr-tab:hover {
	color: var(--esr-text);
}

.esr-tab:focus {
	outline: 2px solid var(--esr-primary);
	outline-offset: -2px;
	box-shadow: none;
}

.esr-tab-active {
	color: var(--esr-primary);
	border-bottom-color: var(--esr-primary);
}

.esr-tab .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* =====================================================================
 * 4. Rule cards
 * =================================================================== */

.esr-form {
	margin-top: 0;
}

.esr-rules {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.esr-rule {
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius-lg);
	box-shadow: var(--esr-shadow-sm);
	transition: opacity .2s ease;
	overflow: hidden;
}

.esr-rule-disabled {
	opacity: .65;
}

/* Header -------------------------------------------------------------- */

.esr-rule-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: #fafbfc;
	border-bottom: 1px solid var(--esr-border);
}

.esr-rule-header-left,
.esr-rule-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.esr-rule-header-left {
	flex: 1;
	min-width: 0;
}

.esr-rule-collapse {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--esr-text-dim);
	transition: transform .2s ease;
}

.esr-rule-collapse:hover {
	color: var(--esr-text);
}

.esr-rule-collapsed .esr-rule-collapse {
	transform: rotate(-90deg);
}

.esr-rule-badge {
	display: inline-block;
	padding: 3px 10px;
	background: var(--esr-primary-light);
	color: var(--esr-primary-dark);
	font-size: 12px;
	font-weight: 600;
	border-radius: 20px;
	letter-spacing: .3px;
}

.esr-rule-preview {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--esr-text-dim);
	font-size: 13px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.esr-rule-preview code {
	background: #f6f7f7;
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--esr-text);
	font-size: 12px;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
}

.esr-rule-arrow {
	color: var(--esr-text-dim);
	font-size: 14px;
}

.esr-rule-delete {
	background: none;
	border: 1px solid transparent;
	padding: 6px;
	cursor: pointer;
	color: var(--esr-text-dim);
	border-radius: var(--esr-radius);
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.esr-rule-delete:hover {
	color: var(--esr-danger);
	background: #fcf0f0;
	border-color: #f7c1c1;
}

/* Body ---------------------------------------------------------------- */

.esr-rule-body {
	padding: 20px;
}

.esr-rule-collapsed .esr-rule-body {
	display: none;
}

/* Sections ------------------------------------------------------------ */

.esr-section {
	border-top: 1px solid var(--esr-border);
	margin-top: 20px;
	padding-top: 0;
}

.esr-section-main {
	border-top: none;
	margin-top: 0;
}

.esr-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 14px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--esr-text);
	font-size: 14px;
	font-weight: 600;
	transition: color .15s ease;
}

.esr-section-head:hover {
	color: var(--esr-primary);
}

.esr-section-head:focus {
	outline: 2px solid var(--esr-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.esr-section-head .dashicons {
	color: var(--esr-text-muted);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.esr-section-title {
	font-weight: 600;
}

.esr-section-desc {
	color: var(--esr-text-dim);
	font-weight: 400;
	font-size: 13px;
	margin-left: auto;
	padding-right: 12px;
}

.esr-section-chevron {
	transition: transform .2s ease;
	color: var(--esr-text-dim);
}

.esr-section-open .esr-section-chevron {
	transform: rotate(180deg);
}

.esr-section-body {
	display: none;
	padding: 0 0 16px;
	animation: esr-fade-in .2s ease;
}

.esr-section-open .esr-section-body {
	display: block;
}

.esr-subsection {
	padding: 12px 0;
}

.esr-subsection + .esr-subsection {
	border-top: 1px dashed var(--esr-border);
	margin-top: 4px;
}

.esr-sub-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--esr-text-muted);
	text-transform: uppercase;
	letter-spacing: .5px;
}

@keyframes esr-fade-in {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
 * 5. Form controls
 * =================================================================== */

.esr-field {
	margin-bottom: 14px;
}

.esr-field:last-child {
	margin-bottom: 0;
}

.esr-field label:not(.esr-checkbox):not(.esr-rule-toggle):not(.esr-day) {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--esr-text);
	font-size: 13px;
}

.esr-wrap textarea,
.esr-wrap input[type="text"],
.esr-wrap input[type="date"],
.esr-wrap input[type="time"],
.esr-wrap select:not(.esr-post-type-select):not(.esr-role-select) {
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--esr-text);
	background: var(--esr-surface);
	border: 1px solid var(--esr-border-strong);
	border-radius: var(--esr-radius);
	line-height: 1.5;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	min-height: 36px;
}

.esr-wrap textarea:focus,
.esr-wrap input[type="text"]:focus,
.esr-wrap input[type="date"]:focus,
.esr-wrap input[type="time"]:focus,
.esr-wrap select:focus {
	border-color: var(--esr-primary);
	box-shadow: 0 0 0 1px var(--esr-primary);
	outline: none;
}

.esr-wrap textarea {
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 13px;
	resize: vertical;
	min-height: 80px;
}

.esr-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 780px) {
	.esr-grid-2 {
		grid-template-columns: 1fr;
	}
}

.esr-help {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--esr-text-dim);
	line-height: 1.5;
}

.esr-inline-opts {
	margin-top: 10px;
}

/* Checkbox ------------------------------------------------------------ */

.esr-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	color: var(--esr-text);
}

.esr-checkbox input[type="checkbox"] {
	margin: 0;
}

.esr-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	padding: 10px 12px;
	background: #fafbfc;
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius);
}

/* Days-of-week selector ---------------------------------------------- */

.esr-days {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px;
	background: #fafbfc;
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius);
}

.esr-day {
	position: relative;
	cursor: pointer;
}

.esr-day input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.esr-day span {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--esr-radius);
	font-size: 13px;
	font-weight: 500;
	color: var(--esr-text-muted);
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	transition: all .15s ease;
}

.esr-day:hover span {
	border-color: var(--esr-primary);
	color: var(--esr-primary);
}

.esr-day input:checked + span {
	background: var(--esr-primary);
	color: #fff;
	border-color: var(--esr-primary);
}

/* Toggle switch (rule enable) ---------------------------------------- */

.esr-rule-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	font-size: 13px;
	color: var(--esr-text-muted);
}

.esr-rule-toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.esr-rule-toggle-track {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 18px;
	background: var(--esr-border-strong);
	border-radius: 18px;
	transition: background .15s ease;
	flex-shrink: 0;
}

.esr-rule-toggle-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
}

.esr-rule-toggle-input:checked + .esr-rule-toggle-track {
	background: var(--esr-primary);
}

.esr-rule-toggle-input:checked + .esr-rule-toggle-track::after {
	transform: translateX(16px);
}

.esr-rule-toggle-input:focus-visible + .esr-rule-toggle-track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--esr-primary);
}

.esr-rule-toggle-label {
	min-width: 56px;
}

/* =====================================================================
 * 6. Buttons
 * =================================================================== */

.esr-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--esr-radius);
	border: 1px solid var(--esr-border-strong);
	background: var(--esr-surface);
	color: var(--esr-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all .15s ease;
	line-height: 1.3;
}

.esr-btn:hover {
	background: #f6f7f7;
	border-color: #8c8f94;
}

.esr-btn:focus {
	outline: 2px solid var(--esr-primary);
	outline-offset: 1px;
	box-shadow: none;
}

.esr-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.esr-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.esr-btn-primary {
	background: var(--esr-primary);
	border-color: var(--esr-primary);
	color: #fff;
}

.esr-btn-primary:hover {
	background: var(--esr-primary-dark);
	border-color: var(--esr-primary-dark);
	color: #fff;
}

.esr-btn-secondary {
	background: var(--esr-surface);
}

.esr-btn-upgrade {
	background: var(--esr-pro);
	border-color: var(--esr-pro);
	color: #fff;
}

.esr-btn-upgrade:hover {
	background: var(--esr-primary-dark);
	border-color: var(--esr-primary-dark);
	color: #fff;
}

.esr-btn-upgrade-sm {
	padding: 4px 10px;
	font-size: 12px;
	background: var(--esr-pro);
	border-color: var(--esr-pro);
	color: #fff;
}

.esr-btn-upgrade-sm:hover {
	background: var(--esr-primary-dark);
	color: #fff;
}

.esr-btn-review {
	background: #fff;
}

.esr-btn-lg {
	padding: 12px 24px;
	font-size: 15px;
}

/* Rule actions bar ---------------------------------------------------- */

.esr-rules-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 16px 20px;
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius-lg);
}

.esr-inline-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* =====================================================================
 * 7. Pro badge + upgrade CTAs
 * =================================================================== */

.esr-pro-badge {
	display: inline-block;
	padding: 1px 7px;
	background: var(--esr-pro-bg);
	color: var(--esr-pro);
	border: 1px solid var(--esr-pro-border);
	border-radius: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 1.5;
	vertical-align: middle;
}

/* Transparent locked block -------------------------------------------
 * Shows the real form fields (disabled) with a subtle overlay and an
 * "Upgrade to unlock" CTA. Gives free users full visibility of what Pro
 * offers without needing marketing copy.
 */

.esr-locked {
	position: relative;
	border: 1px dashed var(--esr-pro-border);
	background: rgba(238, 242, 255, .35);
	border-radius: var(--esr-radius);
	padding: 16px;
	margin: 4px 0;
}

.esr-locked-fields {
	opacity: .55;
	filter: grayscale(.2);
	pointer-events: none;
	user-select: none;
}

/* Give disabled inputs inside locked blocks a consistent look. */
.esr-locked input[disabled],
.esr-locked textarea[disabled],
.esr-locked select[disabled] {
	background: #f6f7f7;
	color: var(--esr-text-dim);
	cursor: not-allowed;
}

.esr-locked .esr-day input[disabled] + span {
	opacity: .7;
}

.esr-locked-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .65) 100%);
	border-radius: var(--esr-radius);
}

.esr-locked-overlay > * {
	pointer-events: auto;
}

.esr-locked-icon {
	color: var(--esr-pro);
	font-size: 20px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	padding: 10px;
	box-shadow: 0 2px 8px rgba(79, 70, 229, .15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.esr-btn-sm {
	padding: 6px 14px;
	font-size: 13px;
}

.esr-disabled {
	opacity: .55;
	pointer-events: none;
	cursor: not-allowed;
}

/* =====================================================================
 * 8. Panels (Settings, Import/Export)
 * =================================================================== */

.esr-panel {
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius-lg);
	margin-bottom: 16px;
	overflow: hidden;
}

.esr-panel-head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--esr-border);
	background: #fafbfc;
}

.esr-panel-head h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
}

.esr-panel-head p {
	margin: 0;
}

.esr-panel-body {
	padding: 20px;
}

.esr-muted {
	color: var(--esr-text-muted);
	font-size: 13px;
}

.esr-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step;
}

.esr-steps li {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--esr-border);
}

.esr-steps li:last-child {
	border-bottom: none;
}

.esr-step-n {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--esr-primary-light);
	color: var(--esr-primary-dark);
	border-radius: 50%;
	font-weight: 600;
	font-size: 14px;
}

.esr-steps li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
}

.esr-steps li p {
	margin: 0;
	color: var(--esr-text-muted);
	font-size: 13px;
}

.esr-upload-zone {
	padding: 40px 20px;
	background: #fafbfc;
	border: 2px dashed var(--esr-border-strong);
	border-radius: var(--esr-radius);
	text-align: center;
	color: var(--esr-text-muted);
}

.esr-upload-zone .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: var(--esr-text-dim);
}

.esr-upload-zone p {
	margin: 8px 0 0;
}

.esr-upload-zone-disabled {
	opacity: .65;
}

/* =====================================================================
 * 10. Select2 integration
 * =================================================================== */

.esr-wrap .select2-container {
	width: 100% !important;
}

.esr-wrap .select2-container--default .select2-selection--multiple {
	border: 1px solid var(--esr-border-strong);
	border-radius: var(--esr-radius);
	min-height: 36px;
}

.esr-wrap .select2-container--default.select2-container--focus .select2-selection--multiple,
.esr-wrap .select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--esr-primary);
	box-shadow: 0 0 0 1px var(--esr-primary);
}

.esr-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--esr-primary-light);
	border-color: var(--esr-primary-mid);
	color: var(--esr-primary-dark);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 13px;
}

/* =====================================================================
 * 11. Rules layout with "How it works" sidebar
 * =================================================================== */

.esr-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 1100px) {
	.esr-layout {
		grid-template-columns: 1fr;
	}
}

.esr-main {
	min-width: 0;
}

.esr-side {
	position: sticky;
	top: 46px;
}

.esr-side-card {
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	border-radius: var(--esr-radius-lg);
	padding: 20px;
}

.esr-side-card h3 {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.esr-side-card h3 .dashicons {
	color: var(--esr-primary);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.esr-side-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.esr-side-steps li {
	display: flex;
	gap: 12px;
}

.esr-side-steps .esr-step-n {
	width: 26px;
	height: 26px;
	font-size: 13px;
}

.esr-side-steps strong {
	display: block;
	font-size: 13px;
	margin-bottom: 2px;
	color: var(--esr-text);
}

.esr-side-steps p {
	margin: 0;
	font-size: 12px;
	color: var(--esr-text-muted);
	line-height: 1.5;
}

.esr-side-steps code {
	display: inline-block;
	background: var(--esr-primary-light);
	color: var(--esr-primary-dark);
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 11px;
	margin-top: 4px;
}

.esr-side-tip {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px dashed var(--esr-border);
	font-size: 12px;
	color: var(--esr-text-muted);
	line-height: 1.5;
}

.esr-side-tip strong {
	color: var(--esr-text);
	display: inline-block;
	margin-right: 4px;
}

.esr-btn-docs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 16px;
	padding: 10px 16px;
	background: var(--esr-primary-light);
	border: 1px solid var(--esr-primary-mid);
	color: var(--esr-primary);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--esr-radius);
	transition: all .15s ease;
	box-sizing: border-box;
}

.esr-btn-docs:hover {
	background: var(--esr-primary);
	border-color: var(--esr-primary);
	color: #fff;
}

.esr-btn-docs:focus {
	outline: 2px solid var(--esr-primary);
	outline-offset: 1px;
	box-shadow: none;
}

.esr-btn-docs .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* =====================================================================
 * 12. Pro-locked subsections (transparent disabled fields + overlay)
 * =================================================================== */

.esr-pro-locked {
	position: relative;
	padding: 4px 16px 16px;
	margin: 12px -16px 0;
	border-radius: var(--esr-radius);
	background: linear-gradient(180deg, var(--esr-primary-light) 0%, rgba(238, 242, 255, .3) 100%);
	border: 1px dashed var(--esr-primary-mid);
}

.esr-pro-locked-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0 6px;
	margin-bottom: 6px;
}

.esr-pro-locked-head .esr-sub-title {
	margin: 0;
}

.esr-pro-locked .esr-pro-locked-body {
	position: relative;
}

/* Grey out disabled fields inside a locked fieldset */
.esr-pro-locked input:disabled,
.esr-pro-locked textarea:disabled,
.esr-pro-locked select:disabled,
.esr-pro-locked .select2-container--disabled .select2-selection {
	background: #f6f7f7 !important;
	color: var(--esr-text-dim) !important;
	cursor: not-allowed;
	opacity: .75;
}

.esr-pro-locked .esr-checkbox:has(input:disabled),
.esr-pro-locked .esr-day:has(input:disabled) span {
	opacity: .7;
	cursor: not-allowed;
}

/* Inline lock CTA in the corner */
.esr-lock-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	background: var(--esr-primary);
	color: #fff;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
	white-space: nowrap;
}

.esr-lock-cta:hover,
.esr-lock-cta:focus {
	background: var(--esr-primary-dark);
	color: #fff;
	box-shadow: none;
}

.esr-lock-cta .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

/* When the first subsection in a section is Pro-locked, remove the top margin */
.esr-section-body > .esr-pro-locked:first-child {
	margin-top: 0;
}

/* =====================================================================
 * 13. Settings-tab tip notice
 * =================================================================== */

.esr-notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	border-radius: var(--esr-radius);
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.5;
}

.esr-notice .dashicons {
	flex-shrink: 0;
	font-size: 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

.esr-notice-tip {
	background: var(--esr-primary-light);
	border: 1px solid var(--esr-primary-mid);
	color: var(--esr-text);
}

.esr-notice-tip .dashicons {
	color: var(--esr-primary);
}

.esr-notice strong {
	color: var(--esr-text);
}

.esr-notice code {
	background: rgba(79, 70, 229, .1);
	color: var(--esr-primary-dark);
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 12px;
}

/* =====================================================================
 * 12. Toast notifications (floating, auto-dismiss)
 * =================================================================== */

.esr-toast-stack {
	position: fixed;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: min(560px, 92vw);
	pointer-events: none;
}

.esr-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	background: var(--esr-surface);
	border: 1px solid var(--esr-border);
	border-left: 4px solid var(--esr-primary);
	border-radius: var(--esr-radius-lg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	color: var(--esr-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	pointer-events: auto;
	transform: translateY(-20px);
	opacity: 0;
	animation: esr-toast-in .3s cubic-bezier(.16, 1, .3, 1) forwards;
	min-width: 320px;
}

.esr-toast-success {
	border-left-color: var(--esr-success);
}

.esr-toast-success .esr-toast-icon {
	color: var(--esr-success);
}

.esr-toast-error {
	border-left-color: var(--esr-danger);
}

.esr-toast-error .esr-toast-icon {
	color: var(--esr-danger);
}

.esr-toast-icon {
	flex-shrink: 0;
	font-size: 22px;
	width: 22px;
	height: 22px;
	color: var(--esr-primary);
}

.esr-toast-msg {
	flex: 1;
	min-width: 0;
	word-wrap: break-word;
}

.esr-toast-close {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: var(--esr-text-dim);
	border-radius: 3px;
	transition: color .15s ease, background .15s ease;
}

.esr-toast-close:hover {
	color: var(--esr-text);
	background: #f0f0f1;
}

.esr-toast-close .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.esr-toast.esr-toast-leaving {
	animation: esr-toast-out .2s ease-in forwards;
}

@keyframes esr-toast-in {
	from { transform: translateY(-20px); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

@keyframes esr-toast-out {
	from { transform: translateY(0);     opacity: 1; }
	to   { transform: translateY(-20px); opacity: 0; }
}

.esr-optional {
	color: var(--esr-text-dim);
	font-weight: normal;
	font-size: 12px;
	margin-left: 4px;
}

@media (max-width: 600px) {
	.esr-toast-stack {
		top: 20px;
		width: calc(100vw - 24px);
		max-width: none;
	}
	.esr-toast {
		min-width: 0;
		width: 100%;
	}
}

/* =====================================================================
 * 13. Match-between fields (Pro)
 * =================================================================== */

.esr-between-fields {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--esr-primary-light);
	border: 1px dashed var(--esr-primary-mid);
	border-radius: var(--esr-radius);
}

.esr-between-fields .esr-help {
	margin-top: 6px;
	margin-bottom: 0;
}

/* Inline <code> in help text */
.esr-help code {
	background: var(--esr-primary-light);
	color: var(--esr-primary-dark);
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 12px;
	font-family: Consolas, Monaco, "Courier New", monospace;
}