/**
 * settings-refine.css — a UI/UX refinement pass for Global Settings.
 *
 * Authority (user direction, 2026-09-02): color stays violet, but the
 * *component anatomy* below is measured from the reference product's own
 * shipped output (card = #fff, radius 8px, shadow 0 2px 3px
 * rgba(129,129,129,.1), 24px padding; card titles 18px; control borders
 * #DCDFE6 / radius 4px; labels 15px/500 #1e1f21), while every *color*
 * stays the ChargeForms violet scale (--fc-primary #6c4ef5, hover
 * #5638d8, tint #f2effe).
 *
 * This deliberately supersedes the .dc.html handoff's numbers (15px/700
 * card titles, visible #dadbdd card borders) where the two disagree — the
 * user's explicit direction makes the reference product the UI/UX authority and the
 * handoff the color authority.
 *
 * Loaded last, only on the Global Settings page (admin/class-menu.php), so
 * every rule here beats design-tokens-refine.css / design-tokens-screens.css
 * without touching the pixel-locked Forms/Builder/Reports screens.
 */

/* ------------------------------------------------------------------ *
 * Page canvas — the reference product lays settings out as white cards on the gray
 * wp-admin canvas, never white cards nested inside a white card. The
 * right-hand content panel stops being a box; each section card becomes
 * the white surface.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------------ *
 * Left settings rail — white panel matching the card language (the reference product
 * ships its own per-section navigation in a plain white panel; ChargeForms
 * keeps its grouped rail for its 25 sections, restyled to that look).
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-nav {
	background: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 3px rgba(129, 129, 129, 0.1) !important;
	padding: 8px !important;
}

/* Kill the dark expanded-group heading — the reference product sidebars never invert a
 * row to near-black; expanded groups read as a violet tint instead. */
.chargeforms-wrap .chargeforms-settings-nav-group.is-expanded > .chargeforms-settings-nav-heading,
.chargeforms-wrap .chargeforms-settings-nav-group.is-expanded > .chargeforms-settings-nav-heading:hover {
	background: #f2effe !important;
	color: #6c4ef5 !important;
}
.chargeforms-wrap .chargeforms-settings-nav-heading:hover {
	background: #ffffff !important;
}
.chargeforms-wrap .chargeforms-settings-nav a {
	color: #303133;
	font-size: 13px !important;
}
.chargeforms-wrap .chargeforms-settings-nav a:hover:not(.is-active) {
	background: #ffffff !important;
	color: #5a3ee0 !important;
}
.chargeforms-wrap .chargeforms-settings-nav a.is-active {
	background: #f2effe !important;
	color: #6c4ef5 !important;
	font-weight: 600 !important;
}

/* ------------------------------------------------------------------ *
 * Section cards — the reference product's .ff_card exactly: white, radius 8px,
 * shadow 0 2px 3px rgba(129,129,129,.1), 24px padding, no visible border.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-card,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-card {
	background: #fff !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 3px rgba(129, 129, 129, 0.1) !important;
	padding: 24px !important;
	margin-bottom: 24px !important;
}

/* Card titles — the reference product's h5 card-title: 18px, #1e1f21, 600 (the Element
 * heading reset the reference product ships uses the same ink; bold weight keeps the
 * flex layout for in-title badges intact). */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-card h2 {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #1e1f21 !important;
	letter-spacing: normal !important;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px !important;
}

/* the reference product card-head + card-body anatomy (Email Summaries settings card and
 * any other section that opts into it). Divider is the reference product's $border-color
 * #ececec. */
.chargeforms-wrap .chargeforms-settings-card-head {
	border-bottom: 1px solid #ececec !important;
	padding-bottom: 16px !important;
	margin-bottom: 26px !important;
}
.chargeforms-wrap .chargeforms-settings-card-head h2 {
	margin-bottom: 4px !important;
}
.chargeforms-wrap .chargeforms-settings-card-body .chargeforms-form-row:first-of-type {
	border-top: none !important;
	padding-top: 0 !important;
}

/* Intro paragraph under a card title — Element text-secondary at 13px. */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-card-intro {
	margin: 4px 0 0 !important;
	max-width: 640px;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #909399 !important;
}

/* ------------------------------------------------------------------ *
 * Form rows / labels — the reference product Element settings use label-above-control
 * with 15px/500 labels in #1e1f21 ink; row dividers are #ececec.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-row {
	border-top: 1px solid #ececec !important;
	padding: 14px 0 !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-label {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #1e1f21 !important;
	margin: 0 0 8px !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-row-title {
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #1e1f21 !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-row-desc {
	font-size: 13px !important;
	color: #909399 !important;
	line-height: 1.5 !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-row-text {
	flex: 1;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Element controls — height 40px, font 14px, border #DCDFE6, radius 4px,
 * focus ring in violet. (the reference product's Element theme keeps these values; only
 * the focus/active color is ChargeForms violet.)
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content input[type="text"],
.chargeforms-wrap .chargeforms-settings-content input[type="email"],
.chargeforms-wrap .chargeforms-settings-content input[type="password"],
.chargeforms-wrap .chargeforms-settings-content input[type="url"],
.chargeforms-wrap .chargeforms-settings-content input[type="number"],
.chargeforms-wrap .chargeforms-settings-content input[type="search"],
.chargeforms-wrap .chargeforms-settings-content input[type="date"],
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-input {
	height: 40px !important;
	padding: 1px 14px !important;
	font-size: 14px !important;
	line-height: normal !important;
	color: #606266 !important;
	background: #fff !important;
	border: 1px solid #dcdfe6 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chargeforms-wrap .chargeforms-settings-content textarea,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-textarea {
	padding: 9px 14px !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #606266 !important;
	background: #fff !important;
	border: 1px solid #dcdfe6 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
}
.chargeforms-wrap .chargeforms-settings-content select,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-select {
	height: 40px !important;
	padding: 0 30px 0 14px !important;
	font-size: 14px !important;
	line-height: normal !important;
	color: #606266 !important;
	background-color: #fff !important;
	border: 1px solid #dcdfe6 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chargeforms-wrap .chargeforms-settings-content input[type="text"]::placeholder,
.chargeforms-wrap .chargeforms-settings-content input[type="email"]::placeholder,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-input::placeholder {
	color: #c0c4cc !important;
}
.chargeforms-wrap .chargeforms-settings-content input[type="text"]:hover,
.chargeforms-wrap .chargeforms-settings-content input[type="email"]:hover,
.chargeforms-wrap .chargeforms-settings-content input[type="password"]:hover,
.chargeforms-wrap .chargeforms-settings-content input[type="url"]:hover,
.chargeforms-wrap .chargeforms-settings-content input[type="number"]:hover,
.chargeforms-wrap .chargeforms-settings-content input[type="search"]:hover,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-input:hover,
.chargeforms-wrap .chargeforms-settings-content select:hover,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-select:hover {
	border-color: #c0c4cc !important;
}
.chargeforms-wrap .chargeforms-settings-content input[type="text"]:focus,
.chargeforms-wrap .chargeforms-settings-content input[type="email"]:focus,
.chargeforms-wrap .chargeforms-settings-content input[type="password"]:focus,
.chargeforms-wrap .chargeforms-settings-content input[type="url"]:focus,
.chargeforms-wrap .chargeforms-settings-content input[type="number"]:focus,
.chargeforms-wrap .chargeforms-settings-content input[type="search"]:focus,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-input:focus,
.chargeforms-wrap .chargeforms-settings-content textarea:focus,
.chargeforms-wrap .chargeforms-settings-content select:focus,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-form-select:focus {
	border-color: #6c4ef5 !important;
	box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.15) !important;
	outline: none !important;
}

/* Native checkboxes/radios pick up the violet accent. */
.chargeforms-wrap .chargeforms-settings-content input[type="checkbox"],
.chargeforms-wrap .chargeforms-settings-content input[type="radio"] {
	accent-color: #6c4ef5;
}

/* Radio groups (the reference product el-radio-group): inline options, 14px labels. */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 4px 0 10px;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-radio {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 400;
	color: #303133;
	cursor: pointer;
	margin: 0;
}

/* Two-column Element field grid (label + control columns). */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-field-grid {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-field-grid .chargeforms-form-input,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-field-grid .chargeforms-form-select {
	width: 100%;
	max-width: none !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-field-grid .chargeforms-form-label {
	margin-top: 2px;
}

/* Conditional panel revealed by the Enable toggle (the reference product shows the extra
 * fields only while the feature is on). */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-summaries-panel {
	padding-top: 18px;
	border-top: 1px solid #ececec;
	margin-top: 4px;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-summaries-panel.is-hidden {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Switches — Element switch geometry (40x20 pill, 16px thumb), violet
 * when on, Element off-gray.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-switch-track {
	width: 40px !important;
	height: 20px !important;
	border-radius: 999px !important;
	background: #dcdfe6 !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-switch-thumb {
	width: 16px !important;
	height: 16px !important;
	top: 2px !important;
	left: 2px !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-switch input:checked + .chargeforms-switch-track {
	background: #6c4ef5 !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-switch input:checked + .chargeforms-switch-track .chargeforms-switch-thumb {
	left: 22px !important;
}

/* ------------------------------------------------------------------ *
 * Buttons — Element primary button on the settings page (Save Settings /
 * Save Changes): radius 4px, 12px 20px, 14px, violet fill.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content .button,
.chargeforms-wrap .chargeforms-settings-content .button-primary,
.chargeforms-wrap .chargeforms-settings-content button.button-primary,
.chargeforms-wrap .chargeforms-settings-content input[type="submit"] {
	border-radius: 4px !important;
	padding: 12px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: auto !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	border: 1px solid #6c4ef5 !important;
	background: #6c4ef5 !important;
	color: #fff !important;
}
.chargeforms-wrap .chargeforms-settings-content .button:hover,
.chargeforms-wrap .chargeforms-settings-content .button-primary:hover,
.chargeforms-wrap .chargeforms-settings-content button.button-primary:hover,
.chargeforms-wrap .chargeforms-settings-content input[type="submit"]:hover {
	background: #5638d8 !important;
	border-color: #5638d8 !important;
	color: #fff !important;
}
.chargeforms-wrap .chargeforms-settings-content p.submit {
	margin: 28px 0 0 !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------------ *
 * Email Delivery — the SMTP screen's own sub-cards and provider grid get
 * the same the reference product card + Element control language.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-card-head {
	border-bottom: 1px solid #ececec !important;
	padding-bottom: 14px !important;
	margin-bottom: 18px !important;
	align-items: center !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-provider-card {
	border: 1px solid #dcdfe6 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-provider-card:hover {
	border-color: #6c4ef5 !important;
	box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.12) !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-provider-card.is-active {
	border-color: #6c4ef5 !important;
	box-shadow: 0 0 0 1px #6c4ef5, 0 0 0 4px rgba(108, 78, 245, 0.12) !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-hint,
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-note {
	font-size: 13px !important;
	color: #909399 !important;
}

/* Sender Settings / Connection split (email-delivery.js's renderForm()) —
 * a page-level title above the two cards, matching FluentSMTP's connection
 * form; toggle checkboxes get their explanatory line pulled in tight
 * underneath instead of reading as a separate, unrelated paragraph. */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-form-title {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: #1e1f21 !important;
	margin: 0 0 16px !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-toggle-label {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-weight: 500 !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-field:has(> .chargeforms-ed-toggle-label) .chargeforms-ed-hint {
	margin: 4px 0 0 24px !important;
}

/* ------------------------------------------------------------------ *
 * Uniform card head - every Global Settings section card gets the reference product's
 * ff_card_head anatomy: an 18px title, then a #ececec divider, then the
 * body. Cards that already opt into the explicit
 * .chargeforms-settings-card-head wrapper and the ed-intro hero card are
 * untouched, because their <h2> is not a direct child of the card.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-card > h2 {
	border-bottom: 1px solid #ececec !important;
	padding-bottom: 14px !important;
	margin-bottom: 18px !important;
	width: 100%;
}
/* Head = title + intro paragraph: keep the divider below the whole head
 * (the reference product's .ff_card_head puts the .text subtitle above its divider), not
 * between the title and its intro. */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-card > h2:has(+ .chargeforms-form-row-desc) {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 6px !important;
}
.chargeforms-wrap .chargeforms-settings-content .chargeforms-card > .chargeforms-form-row-desc {
	border-bottom: 1px solid #ececec !important;
	padding-bottom: 16px !important;
	margin-bottom: 18px !important;
}

/* Element-style warning callout (Email Delivery from-domain mismatch and
 * other inline SMTP warnings): Element's el-alert--warning recipe. */
.chargeforms-wrap .chargeforms-settings-content .chargeforms-ed-warning {
	background: #fdf6ec !important;
	border: 1px solid #faecd8 !important;
	border-radius: 4px !important;
	color: #b88230 !important;
	padding: 9px 14px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 4px 0 10px !important;
}

/* The page-head Save Changes button lives outside .chargeforms-settings-content,
 * so it gets the same Element primary geometry here. Specificity must beat
 * design-tokens-screens.css's .chargeforms-page-head .chargeforms-btn-icon.button
 * (4 classes) because that rule drives every page-head CTA. */
.chargeforms-wrap .chargeforms-page-head .chargeforms-btn-icon.button.chargeforms-settings-save-head {
	border-radius: 4px !important;
	padding: 12px 20px !important;
	font-size: 14px !important;
	height: auto !important;
}

/* ------------------------------------------------------------------ *
 * Narrow screens - the reference product stacks single-column.
 * ------------------------------------------------------------------ */
@media (max-width: 782px) {
	.chargeforms-wrap .chargeforms-settings-content .chargeforms-field-grid {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}
}