/**
 * Tax Exemption for WooCommerce - redesigned admin settings + header.
 *
 * Sky-blue theme. Structure/patterns modelled on the RelyWP settings UI:
 * gradient header bar, left vertical feature tabs, card sections, toggle
 * switches, PRO feature sales pages, upgrade sidebar and footer.
 */

:root {
	--tefw-grad: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	--tefw-grad-strong: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
	--tefw-primary: #0284c7;
	--tefw-primary-dark: #0369a1;
	--tefw-primary-darker: #075985;
	--tefw-tint: #f0f9ff;
	--tefw-tint-border: #bae6fd;
	--tefw-ink: #1d2327;
	--tefw-muted: #64748b;
	--tefw-card-border: #dce3ea;
}

/* ========================================================================
   Header bar
   ======================================================================== */
.tefw-topbar {
	background: var(--tefw-grad);
	margin: -10px -20px 20px -22px;
	width: calc(100% + 22px);
	padding: 0;
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}
.tefw-topbar::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
	pointer-events: none;
}
.tefw-topbar__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 40px 22px 40px;
	position: relative;
	z-index: 1;
}
.tefw-topbar__left { flex: 1; min-width: 0; }
.tefw-topbar__name {
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 10px;
}
.tefw-topbar__page-title {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	line-height: 1.3;
}
.tefw-topbar__byline {
	margin: 6px 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	gap: 6px;
}
.tefw-topbar__byline a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.tefw-topbar__byline img { height: 16px; width: auto; display: block; }

.tefw-topbar__right { flex: 0 0 auto; }
.tefw-topbar__nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
}
.tefw-nav-pages {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.tefw-nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.25s ease;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.tefw-nav-link:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tefw-nav-link.is-active {
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	border-color: rgba(255, 255, 255, 0.3);
}
.tefw-nav-link .dashicons { line-height: 1; font-size: 18px; }

.tefw-action-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tefw-action-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	transition: all 0.25s ease;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
}
.tefw-action-link:hover { color: #fff; background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.tefw-action-link .dashicons { line-height: 1; font-size: 16px; }
.tefw-action-link.is-upgrade {
	background: rgba(255, 214, 10, 0.22);
	border-color: rgba(255, 214, 10, 0.5);
	color: #fff;
	font-weight: 600;
}
.tefw-action-link.is-upgrade:hover { background: rgba(255, 214, 10, 0.34); }
.tefw-premium-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 6px;
}
.tefw-premium-badge .dashicons { font-size: 15px; line-height: 1.4; }
.tefw-relywp-logo-link {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	border-radius: 6px;
	transition: background 0.25s ease;
}
.tefw-relywp-logo-link:hover { background: rgba(255, 255, 255, 0.15); }
.tefw-relywp-logo {
	height: 24px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1); /* render the RelyWP mark in white on the blue header */
	opacity: 0.95;
}

@media (max-width: 1200px) {
	.tefw-nav-text { display: none; }
	.tefw-nav-link { padding: 9px; justify-content: center; }
	.tefw-action-link span:not(.dashicons) { display: none; }
	.tefw-action-link { padding: 8px; justify-content: center; }
}
@media (max-width: 782px) {
	.tefw-topbar__content { flex-direction: column; align-items: flex-start; padding: 20px; }
	.tefw-topbar__right { width: 100%; }
	.tefw-topbar__nav { align-items: flex-start; }
	.tefw-nav-pages, .tefw-action-links { justify-content: flex-start; }
}

/* Hide the default WP <h1>/screen heading that follows our header */
.tefw-topbar + h1,
.tefw-topbar + .wp-heading-inline { display: none; }

/* ========================================================================
   Page layout
   ======================================================================== */
.tefw-settings-wrap { width: calc(100% - 20px); }

.tefw-settings-container {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.tefw-settings-main { flex: 1; min-width: 0; max-width: calc(100% - 320px); }
.tefw-settings-main.is-pro { max-width: 100%; }
.tefw-settings-sidebar { width: 300px; flex-shrink: 0; }

.tefw-settings-two-col {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 20px;
	align-items: start;
}
.tefw-tabs-sidebar { align-self: start; }
.tefw-tabs-content { min-width: 0; }

/* Left vertical tabs */
.tefw-vertical-tabs.nav-tab-wrapper {
	margin: 0;
	padding: 10px;
	border: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.tefw-vertical-tabs .nav-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 13px;
	border: 0 !important;
	background: transparent !important;
	color: #334155;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	box-shadow: none !important;
	white-space: normal !important;
	cursor: pointer;
}
.tefw-vertical-tabs .nav-tab .dashicons { font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; color: var(--tefw-primary); }
.tefw-vertical-tabs .nav-tab:hover { background: #f1f5f9 !important; }
.tefw-vertical-tabs .nav-tab.nav-tab-active {
	background: var(--tefw-grad) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(2, 132, 199, 0.28) !important;
}
.tefw-vertical-tabs .nav-tab.nav-tab-active .dashicons { color: #fff; }

.tefw-vertical-tabs .tefw-tabs-group {
	margin: 12px 6px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94a3b8;
}
.tefw-vertical-tabs .tefw-tabs-group:first-child { margin-top: 4px; }

.tefw-pro-badge-nav {
	margin-left: auto;
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: var(--tefw-grad-strong);
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1.5;
	flex-shrink: 0;
}
.tefw-vertical-tabs .nav-tab.nav-tab-active .tefw-pro-badge-nav {
	background: rgba(255, 255, 255, 0.28);
}

/* ========================================================================
   Settings panels
   ======================================================================== */
.tefw-settings-tab { margin-top: 0; }
.tefw-hidden { display: none !important; }

.tefw-tab-intro {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: var(--tefw-ink);
}
.tefw-tab-intro-desc {
	margin: 0 0 20px;
	color: var(--tefw-muted);
	font-size: 14px;
	line-height: 1.5;
	max-width: 760px;
}

/* Each <h2> in a tab starts a card section that wraps the following table. */
.tefw-settings-tab h2 {
	margin: 26px 0 0;
	padding: 16px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--tefw-ink);
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
}
.tefw-settings-tab h2 + p {
	margin: 0;
	padding: 0 22px 4px;
	background: #fff;
	border-left: 1px solid var(--tefw-card-border);
	border-right: 1px solid var(--tefw-card-border);
	color: var(--tefw-muted);
	font-size: 13px;
	line-height: 1.6;
}
.tefw-settings-tab h2 + p + p {
	margin: 0;
	padding: 0 22px 4px;
	background: #fff;
	border-left: 1px solid var(--tefw-card-border);
	border-right: 1px solid var(--tefw-card-border);
	color: var(--tefw-muted);
	font-size: 13px;
	line-height: 1.6;
}
.tefw-settings-tab .form-table {
	margin: 0 0 4px;
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	padding: 6px 0 14px; /* horizontal padding lives on the cells for reliable label alignment */
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
/* When a section has an intro paragraph, the card bottom belongs to the table */
.tefw-settings-tab h2 + .form-table { border-top: 0; border-radius: 0 0 10px 10px; }

.tefw-settings-tab .form-table th {
	padding: 18px 20px 18px 22px; /* left rail aligns with the section heading */
	font-size: 14px;
	color: var(--tefw-ink);
	font-weight: 600;
	vertical-align: top;
}
.tefw-settings-tab .form-table td { padding: 18px 22px 18px 12px; vertical-align: top; }
/* Custom Fields nested tables should not inherit the deep label rail. */
.tefw-settings-tab .tax-exemption-custom-fields-table th,
.tefw-settings-tab .tax-exemption-custom-fields-table td { padding: 6px 10px; }
.tefw-settings-tab .form-table tr:first-child { border-top: 0; }

.tefw-settings-tab i,
.tefw-settings-tab .description { color: #6a7b88; font-style: italic; line-height: 1.6; }
.tefw-settings-tab code {
	background: #eef2f7;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 12px;
	color: var(--tefw-primary-darker);
}
.tefw-settings-tab hr { display: none; }

.tefw-settings-tab p,
.tefw-settings-tab label { font-size: 14px; }

/* Form controls */
.tefw-settings-tab input[type="text"],
.tefw-settings-tab input[type="number"],
.tefw-settings-tab input[type="email"],
.tefw-settings-tab input[type="url"],
.tefw-settings-tab input[type="password"],
.tefw-settings-tab select,
.tefw-settings-tab textarea {
	max-width: 100%;
	padding: 7px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 14px;
	background-color: #fff; /* not the `background` shorthand: it would wipe core's select arrow image */
	min-height: 38px;
}
.tefw-settings-tab input[type="text"],
.tefw-settings-tab input[type="email"],
.tefw-settings-tab input[type="url"] { width: 480px; }
/* Core sets the arrow via `background-image` alone on `select:disabled`, so pin the
   repeat/position/size here or a disabled select tiles arrows across the whole box. */
.tefw-settings-tab select {
	min-width: 260px;
	padding-right: 28px;
	background-repeat: no-repeat;
	background-position: right 8px top 55%;
	background-size: 16px 16px;
}
.tefw-settings-tab textarea { min-height: 90px; }
.tefw-settings-tab input:focus,
.tefw-settings-tab select:focus,
.tefw-settings-tab textarea:focus {
	border-color: var(--tefw-primary);
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
	outline: none;
}
.tefw-settings-tab input[type="number"] { width: 90px; }

/* Toggle switches: restyle plain checkboxes into on/off switches. */
.tefw-settings-tab input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 22px;
	min-width: 42px;
	margin: 0 10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: #cbd5e1;
	cursor: pointer;
	vertical-align: -6px;
	transition: background 0.2s ease;
}
.tefw-settings-tab input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	margin: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
	transition: transform 0.2s ease;
}
.tefw-settings-tab input[type="checkbox"]:checked { background: var(--tefw-primary); }
.tefw-settings-tab input[type="checkbox"]:checked::before { transform: translateX(20px); }
.tefw-settings-tab input[type="checkbox"]:focus,
.tefw-settings-tab input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25); }
.tefw-settings-tab input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
/* Keep description text vertically centred against the toggle. */
.tefw-settings-tab .form-table td > i,
.tefw-settings-tab .form-table td > label > i { line-height: 1.6; }
/* Radios keep their native look but tinted */
.tefw-settings-tab input[type="radio"] { accent-color: var(--tefw-primary); transform: scale(1.2); margin-right: 8px; vertical-align: middle; }

/* Role / countries fieldset checkboxes stack tidily */
.tefw-settings-tab fieldset label { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-weight: 500; }

/* Generic disabled section wrapper */
.tefw-disabled { opacity: 0.55; pointer-events: none; }
.tefw-hide-checked-icon input[type="checkbox"]:checked::before { content: ""; }

/* ========================================================================
   Custom Fields repeater
   ======================================================================== */
.tefw-cf-repeater { margin-top: 8px; max-width: 860px; }
.tefw-cf-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }

.tefw-cf-item {
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
	overflow: hidden;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.tefw-cf-item:hover { border-color: var(--tefw-tint-border); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }

.tefw-cf-item__handle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	flex-shrink: 0;
	cursor: grab;
	color: #94a3b8;
	background: #f8fafc;
	border-right: 1px solid #eef2f6;
}
.tefw-cf-item__handle:hover { color: var(--tefw-primary); background: var(--tefw-tint); }
.tefw-cf-item__handle:active { cursor: grabbing; }
.tefw-cf-item__handle .dashicons { font-size: 20px; }

.tefw-cf-item__body {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px 92px;
	gap: 14px 18px;
	padding: 16px 18px;
	align-items: start;
}
.tefw-cf-field { min-width: 0; }
.tefw-cf-field > label {
	display: block !important;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #64748b;
	line-height: 1.4;
}
.tefw-settings-tab .tefw-cf-field input[type="text"],
.tefw-settings-tab .tefw-cf-field select,
.tefw-settings-tab .tefw-cf-field textarea {
	width: 100%;
	margin: 0;
	min-width: 0;
}
.tefw-cf-field--options { grid-column: 1 / -1; }
.tefw-settings-tab .tefw-cf-field--options textarea { min-height: 76px; }
.tefw-cf-field--required { justify-self: start; }
.tefw-cf-req { display: inline-flex; align-items: center; height: 38px; }

.tefw-cf-item__actions {
	display: flex;
	align-items: flex-start;
	padding: 16px 14px 0 0;
	flex-shrink: 0;
}
.tefw-cf-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	transition: all 0.18s ease;
}
.tefw-cf-remove:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.tefw-cf-remove .dashicons { font-size: 18px; line-height: 1; }

.tefw-cf-add {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: auto;
	padding: 8px 16px !important;
	border: 1px dashed var(--tefw-primary) !important;
	background: var(--tefw-tint) !important;
	color: var(--tefw-primary-darker) !important;
	font-weight: 600;
	border-radius: 8px !important;
	box-shadow: none !important;
}
.tefw-cf-add:hover { background: #e0f2fe !important; border-style: solid !important; }
.tefw-cf-add .dashicons { font-size: 16px; margin-top: 1px; }

.tefw-cf-empty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 18px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	color: #64748b;
	font-size: 13px;
}
.tefw-cf-empty .dashicons { color: #94a3b8; }

.tefw-cf-placeholder {
	border: 2px dashed var(--tefw-tint-border);
	background: var(--tefw-tint);
	border-radius: 10px;
	margin-bottom: 12px;
}
.tefw-cf-item.ui-sortable-helper { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15); }

@media (max-width: 860px) {
	.tefw-cf-item__body { grid-template-columns: 1fr 1fr; }
	.tefw-cf-field--label { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.tefw-cf-item__body { grid-template-columns: 1fr; }
}

/* ========================================================================
   Emails accordion
   ======================================================================== */
.tefw-settings-tab .tefw-email-accordion { margin: 12px 0 0; }
.tefw-settings-tab .tefw-email-accordion h3 {
	cursor: pointer;
	position: relative;
	margin: 0 0 10px;
	padding: 16px 40px 16px 18px;
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
.tefw-settings-tab .tefw-email-accordion h3 .tefw-arrow {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	width: 0; height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--tefw-primary);
	transition: transform 0.2s ease;
}
.tefw-settings-tab .tefw-email-accordion h3.tefw-open .tefw-arrow { transform: translateY(-50%) rotate(180deg); }
.tefw-settings-tab .tefw-email-settings {
	display: none;
	padding: 18px;
	background: #fbfdff;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	margin: -4px 0 14px;
}
.tefw-settings-tab .tefw-email-settings input[type="text"],
.tefw-settings-tab .tefw-email-settings input[type="email"] { width: 100%; }
/* Merge tag reference + accordion wrapper continue the section card, so they share
   its 22px side rail. */
.tefw-settings-tab .tefw-email-mergetags {
	margin: 0;
	padding: 0 22px 10px;
	background: #fff;
	border-left: 1px solid var(--tefw-card-border);
	border-right: 1px solid var(--tefw-card-border);
	font-size: 13px;
	line-height: 1.6;
}
.tefw-settings-tab .tefw-email-list {
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	padding: 14px 22px;
}

/* ========================================================================
   PRO badges / notices
   ======================================================================== */
/* Sits inline in a section heading: same size as the title text, on the baseline.
   Selector matches admin.css's old `span.tefw-pro-badge` specificity on purpose. */
span.tefw-pro-badge {
	position: static;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--tefw-primary-dark);
	margin: 0 0 0 4px;
	padding: 0;
	background: none;
	border-radius: 0;
	vertical-align: baseline;
}

/* ========================================================================
   PRO feature sales pages (shown to free users on locked tabs)
   ======================================================================== */
.tefw-pro-sales { max-width: 840px; }
.tefw-pro-sales-hero {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: var(--tefw-grad);
	color: #fff;
	border-radius: 12px;
	padding: 28px 26px;
	margin: 0 0 22px;
	box-shadow: 0 10px 28px rgba(2, 132, 199, 0.25);
}
.tefw-pro-sales-hero__icon { font-size: 46px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
/* Prefixed with .tefw-settings-tab to outrank the generic h2/p card chrome above -
   without it the hero title and intro pick up a white background and card borders. */
.tefw-settings-tab .tefw-pro-sales-hero__content h2 {
	color: #fff;
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 0 10px;
	padding: 0;
	font-size: 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.tefw-settings-tab .tefw-pro-sales-hero__content h2 + p {
	color: #fff;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	opacity: 0.94;
	line-height: 1.6;
}
.tefw-pro-badge-inline {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
	padding: 3px 9px;
	border-radius: 10px;
}
.tefw-pro-sales-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 22px;
}
.tefw-pro-sales-feature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 15px 16px;
}
.tefw-pro-sales-feature .dashicons { color: var(--tefw-primary); font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; }
.tefw-pro-sales-feature strong { display: block; font-size: 13px; margin-bottom: 4px; color: var(--tefw-ink); }
.tefw-pro-sales-feature p { margin: 0; font-size: 12px; color: var(--tefw-muted); line-height: 1.5; }
.tefw-pro-sales-cta {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--tefw-tint);
	border: 1px solid var(--tefw-tint-border);
	border-left: 4px solid var(--tefw-primary);
	border-radius: 8px;
	padding: 18px 22px;
}
.tefw-pro-sales-cta__text { flex: 1; }
.tefw-pro-sales-cta__text strong { display: block; font-size: 15px; color: var(--tefw-ink); margin-bottom: 4px; }
.tefw-pro-sales-cta__text p { margin: 0; font-size: 13px; color: var(--tefw-muted); }
.tefw-pro-sales-cta .button-hero {
	white-space: nowrap;
	flex-shrink: 0;
	background: #0e753e !important;
	border-color: #0b5e32 !important;
	color: #fff !important;
	font-weight: 700;
	text-shadow: none;
}
.tefw-pro-sales-cta .button-hero:hover { background: #0b5e32 !important; }

@media (max-width: 640px) {
	.tefw-pro-sales-features { grid-template-columns: 1fr; }
	.tefw-pro-sales-cta { flex-direction: column; align-items: flex-start; }
}

/* ========================================================================
   Save button
   ======================================================================== */
.tefw-save-actions { margin: 22px 0 0; }
.tefw-settings-wrap .tefw-save-actions .button-primary,
.tefw-settings-wrap p.submit .button-primary {
	background: var(--tefw-grad-strong) !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 8px 26px !important;
	height: auto;
	font-size: 15px !important;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tefw-settings-wrap .tefw-save-actions .button-primary:hover,
.tefw-settings-wrap p.submit .button-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(2, 132, 199, 0.4);
}

/* ========================================================================
   Upgrade sidebar (free users)
   ======================================================================== */
.tefw-pro-sidebar {
	background: var(--tefw-grad);
	color: #fff;
	padding: 24px;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(2, 132, 199, 0.28);
	position: sticky;
	top: 40px;
}
.tefw-pro-sidebar h3 { margin: 0 0 8px; color: #fff; font-size: 18px; text-align: center; }
.tefw-pro-sidebar > p { color: rgba(255, 255, 255, 0.92); line-height: 1.5; font-size: 13px; text-align: center; }
.tefw-pro-features { margin: 18px 0; }
.tefw-pro-features h4 { color: #fff; margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.tefw-pro-features ul { list-style: none; padding: 0; margin: 0; }
.tefw-pro-features li { color: rgba(255, 255, 255, 0.96); padding: 2.5px 0; font-size: 13px; }
.tefw-pro-pricing {
	text-align: center;
	margin: 20px 0;
	padding: 18px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 10px;
}
.tefw-pro-pricing .tefw-price { font-size: 34px; font-weight: 700; }
.tefw-pro-pricing .tefw-price small { font-size: 14px; font-weight: 400; opacity: 0.85; }
.tefw-pro-pricing .tefw-price-note { font-size: 12px; opacity: 0.85; margin: 4px 0 0; }
.tefw-upgrade-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: #0e753e !important;
	border-color: #0b5e32 !important;
	color: #fff !important;
	font-weight: 700;
	padding: 12px 20px !important;
	height: auto;
	font-size: 15px !important;
	border-radius: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: none;
	text-shadow: none;
}
.tefw-upgrade-btn:hover { background: #0b5e32 !important; transform: translateY(-2px); }
.tefw-guarantee { text-align: center; margin-top: 14px; }
.tefw-guarantee p { font-size: 11px; opacity: 0.85; margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }
.tefw-discount-code { text-align: center; font-size: 12px; font-weight: 700; margin-top: 12px; color: #fff7d6; }

/* ========================================================================
   Footer support / docs / cross-promo boxes
   ======================================================================== */
.tefw-settings-footer {
	background: #fff;
	padding: 22px;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-top: 30px;
}
.tefw-settings-footer .tefw-attribution { margin: 0 0 18px; font-size: 13px; color: var(--tefw-muted); }
.tefw-ad-boxes { display: flex; flex-wrap: wrap; gap: 16px; }
.tefw-ad-box {
	flex: 1 1 240px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.tefw-ad-box h4 { margin: 0 0 6px; font-size: 17px; color: var(--tefw-ink); }
.tefw-ad-box p { margin: 0 0 12px; color: #4b5563; font-size: 13px; line-height: 1.5; }
.tefw-ad-box .button { width: 100%; text-align: center; }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 1200px) {
	.tefw-settings-container { flex-direction: column; }
	.tefw-settings-main { max-width: 100%; }
	.tefw-settings-sidebar { width: 100%; }
	.tefw-pro-sidebar { position: static; }
	.tefw-settings-two-col { grid-template-columns: 1fr; }
	.tefw-vertical-tabs.nav-tab-wrapper { flex-direction: row; flex-wrap: wrap; }
	.tefw-vertical-tabs .nav-tab { flex: 0 1 auto; }
	.tefw-vertical-tabs .tefw-tabs-group { width: 100%; }
	.tefw-pro-badge-nav { margin-left: 6px; }
}

/* ========================================================================
   Registration Number tab
   ======================================================================== */

/* Generic accordion, sharing the Emails tab's look. The Emails markup keeps its
   own class names for backwards compatibility; new tabs use these. */
.tefw-settings-tab .tefw-accordion { margin: 12px 0 0; }
.tefw-settings-tab .tefw-accordion h3 {
	cursor: pointer;
	position: relative;
	margin: 0 0 10px;
	padding: 16px 40px 16px 18px;
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
.tefw-settings-tab .tefw-accordion h3 .tefw-arrow {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	width: 0; height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--tefw-primary);
	transition: transform 0.2s ease;
}
.tefw-settings-tab .tefw-accordion h3.tefw-open .tefw-arrow { transform: translateY(-50%) rotate(180deg); }
.tefw-settings-tab .tefw-accordion-body {
	display: none;
	padding: 4px 18px 18px;
	background: #fbfdff;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	margin: -4px 0 14px;
}
.tefw-settings-tab .tefw-accordion-body input[type="text"],
.tefw-settings-tab .tefw-accordion-body input[type="password"] { width: 100%; max-width: 420px; }

/* What a register is and what setting it up involves, set apart from the fields
   below so it reads as background rather than as a label for the first input. */
.tefw-settings-tab .tefw-rn-provider-intro {
	margin: 18px 0 18px 0;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-left: 3px solid var(--tefw-primary);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--tefw-ink);
}

/* Signup link for a register, sitting between the explanation and the fields it
   asks for - the credentials are useless until you have been somewhere to get them. */
.tefw-settings-tab .tefw-rn-provider-signup {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 18px;
}
.tefw-settings-tab .tefw-rn-provider-signup .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
.tefw-settings-tab .tefw-rn-provider-signup .button .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	line-height: 1;
}
.tefw-settings-tab .tefw-rn-provider-signup-note {
	flex: 1 1 240px;
	min-width: 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.55;
	color: var(--tefw-muted);
}

/* Registers are off by default and the store works without them, so the header
   says so rather than leaving an unticked box looking like unfinished setup. */
.tefw-settings-tab .tefw-rn-optional {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	background: #fff;
	font-size: 11px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tefw-muted);
	vertical-align: middle;
}

/* Credential test verdict. Sits inline with its button so the answer is attached
   to the action rather than floating somewhere else on the tab. */
.tefw-settings-tab .tefw-rn-provider-test {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 18px 0 4px;
	padding-top: 14px;
	border-top: 1px solid var(--tefw-card-border);
}
.tefw-settings-tab .tefw-rn-provider-test .button { flex: 0 0 auto; }
.tefw-settings-tab .tefw-rn-test-result {
	flex: 1 1 260px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.6;
	padding-top: 3px;
}
.tefw-settings-tab .tefw-rn-test-result:empty { display: none; }
.tefw-settings-tab .tefw-rn-test-result.is-testing { color: var(--tefw-muted); font-style: italic; }
.tefw-settings-tab .tefw-rn-test-result.is-ok { color: #12683a; font-weight: 600; }
.tefw-settings-tab .tefw-rn-test-result.is-error { color: #a32020; }

.tefw-settings-tab .tefw-accordion-body .form-table { margin-top: 0; }
.tefw-settings-tab .tefw-accordion-list {
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	padding: 14px 22px;
}

/* Number type picker.
   The <h2> above opens a card section that whatever follows has to close, so this
   grid carries the card's sides and base the way a .form-table normally would. */
.tefw-settings-tab .tefw-rn-types {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 4px;
	padding: 16px 22px 20px;
	background: #fff;
	border: 1px solid var(--tefw-card-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.tefw-settings-tab .tefw-rn-type {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	/* Tinted so each option still reads as its own box against the white card. */
	background: #f8fafc;
	border: 1px solid var(--tefw-card-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tefw-settings-tab .tefw-rn-type:hover {
	background: #f1f5f9;
	border-color: var(--tefw-tint-border);
}
.tefw-settings-tab .tefw-rn-type:has(input:checked) {
	border-color: var(--tefw-primary);
	box-shadow: 0 0 0 1px var(--tefw-primary) inset;
	background: var(--tefw-tint);
}
.tefw-rn-type input { margin-top: 3px; flex: 0 0 auto; }
.tefw-rn-type__body { display: block; min-width: 0; }
.tefw-rn-type__body strong { display: inline; font-size: 13px; }
.tefw-rn-type__body em {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-style: normal;
	color: var(--tefw-muted);
	line-height: 1.45;
}
/* How thoroughly this number type can be checked. Three tiers, colour-graded so
   the trade-off between types is readable at a glance. */
.tefw-rn-type__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 7px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	vertical-align: 1px;
	cursor: help;
	white-space: nowrap;
}
.tefw-rn-type__tag.is-lookup   { background: #d7f0dd; color: #14663a; }
.tefw-rn-type__tag.is-checksum { background: #dbeafe; color: #1e429f; }
.tefw-rn-type__tag.is-format   { background: #e7eaee; color: #4b5563; }
.tefw-rn-type__tag.is-pro      { background: var(--tefw-grad-strong); color: #fff; cursor: default; }

/* A type this store cannot use: visible so the option is discoverable, but inert. */
.tefw-settings-tab .tefw-rn-type.is-locked {
	cursor: default;
	background: #fbfcfd;
	border-style: dashed;
}
.tefw-settings-tab .tefw-rn-type.is-locked:hover {
	background: #fbfcfd;
	border-color: var(--tefw-card-border);
}
.tefw-settings-tab .tefw-rn-type.is-locked strong { color: var(--tefw-muted); }
.tefw-settings-tab .tefw-rn-type.is-locked input { cursor: default; }

@media (max-width: 900px) {
	.tefw-rn-types { grid-template-columns: 1fr; }
}

/* Sub-heading below the section's own h2, for the register list. */
.tefw-settings-tab .tefw-rn-subheading {
	margin: 26px 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tefw-ink);
}

/* The master switch owns the section, so its dependants are indented under it. */
.tefw-settings-tab .tefw-rn-verify-settings {
	margin: 14px 0 0 4px;
	padding-left: 18px;
	border-left: 3px solid #c2c2c2;
}
.tefw-settings-tab .tefw-rn-verify-settings > .form-table {
	border-top: 1px solid var(--tefw-card-border);
	border-radius: 10px;
}
.tefw-settings-tab .tefw-rn-subheading + p {
	margin: 0 0 10px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--tefw-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* PRO lock. The accordions still open so a free user can see exactly what they
   would be configuring; only the inputs inside are disabled. */
.tefw-rn-pro.is-locked .tefw-rn-verify-settings { opacity: 0.65; }
/* Sits where the settings table would for a licensed user, so it closes the card
   the section heading opened rather than floating below an unfinished one. */
.tefw-rn-locked-notice {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	margin: 0;
	background: var(--tefw-tint);
	border: 1px solid var(--tefw-card-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
}
.tefw-settings-tab .tefw-rn-locked-notice + .form-table {
	margin-top: 14px;
	border-top: 1px solid var(--tefw-card-border);
	border-radius: 10px;
}
.tefw-rn-locked-notice .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
	color: var(--tefw-primary);
	flex: 0 0 auto;
}
.tefw-rn-locked-notice > div { flex: 1 1 auto; min-width: 0; }
.tefw-rn-locked-notice strong { display: block; font-size: 14px; }
.tefw-rn-locked-notice p { margin: 4px 0 0; font-size: 13px; color: var(--tefw-muted); }
.tefw-rn-locked-notice .button { flex: 0 0 auto; }

/* Explains why a section is empty, in place of the settings it would hold.

   Hidden until js/admin.js decides which one applies. The two notes give
   contradictory reasons for the same empty section, so at most one can ever be
   right - and on the free build that logic never runs at all, which would
   otherwise leave both on screen at once. Starting hidden also stops either
   flashing up before the script has had its say. */
.tefw-settings-tab .tefw-rn-note {
	display: none;
	margin: 0;
	padding: 12px 14px;
	background: var(--tefw-tint);
	border: 1px dashed var(--tefw-tint-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--tefw-muted);
}
.tefw-settings-tab .tefw-rn-note-format { margin-top: 12px; }