/*
 * Farm SMS Consent — Account Details layout.
 * Scoped to .woocommerce-EditAccountForm (the actual form element WooCommerce
 * renders on the My Account -> Account Details page) so this never touches
 * checkout, billing/shipping address forms, or any other WooCommerce form.
 * This CSS file is also only enqueued on the edit-account endpoint itself.
 *
 * Three visual sections, in DOM order:
 *   1. .fsc-customer-details-section (First name / Last name / Email)
 *   2. .fsc-sms-section              (Mobile phone / SMS consent)
 *   3. fieldset                      (Password change — native WC markup)
 *
 * Spacing model (kept deliberately separate so the two requirements don't
 * fight each other):
 *   - "Before section" spacing (~30px, incl. the divider) lives on
 *     margin-top + border-top + padding-top of each section container.
 *   - "Heading to first field" spacing (~12px) lives ONLY on the heading's
 *     margin-bottom; the following field's own top margin is zeroed so it
 *     can't add extra, unpredictable space on top of that.
 */

/* Shared heading style: identical font-size, weight, line-height, and
   bottom spacing whether it's our own <h2> or WooCommerce's native
   Password Change <legend>. */
.woocommerce-EditAccountForm .fsc-section-heading,
.woocommerce-EditAccountForm fieldset legend {
	display: block;
	width: 100%;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	margin: 0 0 12px;
	padding: 0;
	border: none;
}

/* --- Section 1: Customer Details --- */
.woocommerce-EditAccountForm .fsc-customer-details-section {
	/* First section in the form — no divider above it, just the heading. */
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* --- Section 2: SMS Notifications --- */
.woocommerce-EditAccountForm .fsc-sms-section {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid #e2e2e2;
}

/* --- Section 3: Password Change ---
   Reset the browser's default fieldset/legend box model first, then apply
   the "before section" spacing entirely as margin-top (no padding-top).
   <legend> elements anchor to the fieldset's border in a way that pushes
   padding-top in AFTER the legend rather than before it, which is what was
   causing the oversized gap below this heading specifically — the other
   two headings are plain <h2>s and don't have this quirk. */
.woocommerce-EditAccountForm fieldset {
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 44px 0 0;
	padding: 0;
}

/* Zero the top margin on whatever field row immediately follows each
   heading, so the heading's own margin-bottom is the ONLY source of the
   heading-to-field gap (prevents the WooCommerce core row margin from
   stacking on top of it and re-creating an oversized gap). */
.woocommerce-EditAccountForm .fsc-section-heading + .woocommerce-form-row,
.woocommerce-EditAccountForm fieldset legend + .woocommerce-form-row {
	margin-top: 0;
}

/* --- SMS section internal content spacing (unrelated to the heading
   gap above) --- */
.woocommerce-EditAccountForm .fsc-sms-consent-row {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.woocommerce-EditAccountForm .fsc-sms-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: normal;
}

.woocommerce-EditAccountForm .fsc-sms-consent-label input[type="checkbox"] {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.woocommerce-EditAccountForm .fsc-sms-consent-text,
.woocommerce-EditAccountForm .fsc-sms-fine-print,
.woocommerce-EditAccountForm .fsc-sms-consent-disclaimer {
	font-size: 0.9em;
	color: #666;
	margin: 0.5em 0;
}

.woocommerce-EditAccountForm .fsc-sms-links {
	margin: 0.5em 0;
	font-size: 0.9em;
}

/* Links should look clickable in any theme: force underline, but let color
   inherit from the theme's normal link styling rather than overriding it. */
.woocommerce-EditAccountForm .fsc-sms-links a {
	text-decoration: underline;
}

.woocommerce-EditAccountForm .fsc-sms-links a:hover,
.woocommerce-EditAccountForm .fsc-sms-links a:focus {
	text-decoration: underline;
}