/**
 * Shop Customizations – Custom Registration / Edit Account Form
 *
 * Styles for the extended registration form (logged-out: My Account →
 * Register) and the Account Details edit form (logged-in: My Account →
 * Account details). Both forms share the same fieldset/grid markup, so
 * most rules apply to both via .sc-reg-fieldset.
 *
 * Loaded on any My Account page (is_account_page()) when the
 * custom_registration feature is enabled.
 */

/* Form containers — registration, login, and edit-account. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.edit-account {
	border-radius: 1rem;
}

/* Fieldset wrapping each form section (Name, Practice, Billing, etc.). */
.sc-reg-fieldset,
.woocommerce form.edit-account fieldset {
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-block: 1.5rem;
}

.sc-reg-fieldset .description {
	font-size: .9375rem;
}

.sc-reg-fieldset legend,
.woocommerce form.edit-account fieldset legend {
	font-weight: 600;
	padding: 0 0.5rem;
}

.sc-reg-fieldset legend {
	font-weight: 600;
	padding: 0 0.5rem;
}

/* Locale-driven hide: rendered server-side for fields the country's
   locale flags as hidden (state in DE, postcode in UAE, etc.) and
   toggled at runtime by the locale JS when the customer changes
   country. We render hidden fields rather than skipping them so the
   value survives a country switch — switching DE→CA shouldn't lose
   a state code already typed in. */
.sc-reg-fieldset .form-row.is-hidden {
	display: none;
}

/* The required-asterisk <abbr> is rendered for every field but hidden
   when the locale says it isn't required. The [hidden] attribute
   should already do this in modern browsers, but theme CSS sometimes
   overrides display, so this rule belt-and-braces the hide. */
.sc-reg-fieldset abbr.required[hidden] {
	display: none;
}

/* US-only: lay out City / State / ZIP in three side-by-side columns.
   Only applied when the wrapper's data-sc-locale-country is "US"
   because every other country has different field requirements
   (Germany hides state, UAE hides postcode, etc.) and a fixed 3-col
   grid breaks visually whenever any of those is missing. The JS
   keeps the data attribute in sync with the country dropdown. */
.sc-address-fields-rendered[data-sc-locale-country="US"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0 1rem;
}

.sc-address-fields-rendered[data-sc-locale-country="US"] [data-sc-field$="_country"],
.sc-address-fields-rendered[data-sc-locale-country="US"] [data-sc-field$="_address_1"],
.sc-address-fields-rendered[data-sc-locale-country="US"] [data-sc-field$="_address_2"] {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	/* Below 600px, the 3-col layout collapses back to stacked so the
	   inputs don't get too narrow to type into. */
	.sc-address-fields-rendered[data-sc-locale-country="US"] {
		grid-template-columns: 1fr;
	}
	.sc-address-fields-rendered[data-sc-locale-country="US"] [data-sc-field$="_country"],
	.sc-address-fields-rendered[data-sc-locale-country="US"] [data-sc-field$="_address_1"],
	.sc-address-fields-rendered[data-sc-locale-country="US"] [data-sc-field$="_address_2"] {
		grid-column: auto;
	}
}

/* Multi-column grids inside fieldsets. */
.sc-reg-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 1rem;
}

.sc-reg-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 8rem;
	gap: 0 1rem;
}

.sc-reg-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

/* Note rendered below the name fields in the Profile fieldset,
   explaining that the four name parts compose the display name shown
   on CE certificates. Sits between the 4-col name grid and the 2-col
   license grid, full-width by design. */
.sc-reg-field-note {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: #555;
	font-style: italic;
}

/* "Same as billing?" radio group. */
.sc-reg-same-address {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.sc-reg-same-address strong {
	flex: 0 0 100%;
	margin-bottom: 0.25rem;
}

.sc-reg-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
}

/* Inputs and labels — 16px prevents iOS Safari zoom-on-focus.
   Scoped to both forms so the rule applies in both contexts. */
.woocommerce-form-register input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]),
.woocommerce-form-register select,
.woocommerce-form-register textarea,
.woocommerce-form-register label,
.woocommerce-EditAccountForm input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]),
.woocommerce-EditAccountForm select,
.woocommerce-EditAccountForm textarea,
.woocommerce-EditAccountForm label,
.woocommerce-form-login input:not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]),
.woocommerce-form-login select,
.woocommerce-form-login textarea,
.woocommerce-form-login label {
	font-size: 16px;
}

.woocommerce-form-register button.woocommerce-button,
.woocommerce-form-login button.woocommerce-button {
	background-color: var(--wp--preset--color--red) !important;
	color: #fff !important;
	border-radius: 2rem;
	font-size: 0.9375rem;
	line-height: 1.2;
	padding: 0.6rem 1.2rem;
}

/* intl-tel-input wraps the phone field in a .iti container that
   defaults to inline-block; force full width to fit the form-row. */
.iti {
	width: 100%;
}

.sc-reg-radio {
	padding: .75rem 1rem;
	border: solid 1px #ccc;
	border-radius: .25rem;
}

.sc-reg-radio input {
	margin: 0 !important;
}

.sc-reg-radio:has(input:checked) {
	outline: solid 2px var(--wp--preset--color--red);
	outline-offset: 1px;
}

.sc-reg-radio input[type="radio"],
.woocommerce-form-register input[type="checkbox"],
.woocommerce-EditAccountForm input[type="checkbox"] {
	accent-color: var(--wp--preset--color--red);
}

/* Practice information — 2-column layout on larger screens.
   :has(#sc_practice_name) targets the practice fieldset specifically; the
   practice name field uses the same ID in both registration and edit forms,
   so this rule applies in both contexts. */
@media (min-width: 768px) {
	.sc-reg-fieldset:has(#sc_practice_name) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
		align-items: start;
	}

	.sc-reg-fieldset:has(#sc_practice_name) legend {
		grid-column: 1 / -1;
	}

	.sc-reg-fieldset:has(#sc_practice_name) > p:has(#sc_customer_type) {
		grid-column: 1 / -1;
	}
}

/* Mobile fallback for the multi-column grids. */
@media (max-width: 600px) {
	.sc-reg-grid-4,
	.sc-reg-grid-3,
	.sc-reg-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* Consent acknowledgement at the foot of the registration form. The
   wrapper sits outside .sc-reg-fieldset on purpose — the "I understand"
   checkbox + privacy disclaimer aren't another data section, they're a
   final gate before submit. Styled to read as a distinct block without
   mimicking the form sections above it. */
.sc-reg-consent {
	margin: 1.5rem 0;
}

.sc-reg-consent-checkbox {
	margin: 0 0 1rem;
}

.sc-reg-consent-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.sc-reg-consent-checkbox input[type="checkbox"] {
	margin: 0;
}

.sc-reg-disclaimer {
	height: 100px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	padding: 1rem;
	background: #f9f9f9;
	line-height: 1.5;
}

.sc-reg-disclaimer a {
	text-decoration: underline;
}

.sc-reg-disclaimer p {
	margin: 0 0 0.75rem;
	font-size: 0.875rem !important;
	color: #000 !important;
}

.sc-reg-disclaimer p:last-child {
	margin-bottom: 0;
}