/*
 * Indivisible Volunteer Signup — Registration form style override
 *
 * Applies the design system's semantic tokens to the User Registration
 * plugin's default frontend form rendered at /registration/.
 *
 * The page content is wrapped in an .ids-page div (via the_content filter)
 * so that semantic tokens scoped to .ids-page resolve correctly.
 *
 * Selector specificity is intentionally higher than the plugin's own
 * default theme stylesheet to ensure overrides take effect.
 */

/* ============================================================
   Form container
   ============================================================ */
.user-registration.ur-frontend-form.ur-frontend-form--rounded {
	background: var(--ids-surface-page) !important;
	padding: 2rem;
	color: var(--ids-text-on-dark);
	border: none !important;
	border-radius: 0 !important;
}

/* ============================================================
   Labels
   ============================================================ */
.user-registration.ur-frontend-form .ur-label {
	color: var(--ids-text-label) !important;
	font-size: 15px;
	font-weight: 400;
}

/* ============================================================
   Inputs
   ============================================================ */
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	input,
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	select,
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	textarea {
	background: var(--ids-surface-input) !important;
	border: 1px solid var(--ids-border-input) !important;
	border-radius: var(--ids-radius-sm) !important;
	height: 46px !important;
	max-height: none !important;
	padding: 0 12px !important;
	color: var(--ids-text-on-light) !important;
	font-size: 15px;
	line-height: 1.5;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
	box-sizing: border-box;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	textarea {
	height: auto !important;
	padding: 12px !important;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	input::placeholder,
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	textarea::placeholder {
	color: var(--ids-text-placeholder) !important;
	font-size: 14px;
	text-transform: none;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	input:focus,
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	select:focus,
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-form-row
	.ur-form-grid
	textarea:focus {
	outline: none !important;
	border-color: var(--ids-border-input-focus) !important;
	box-shadow: 0 0 0 2px oklch(from var(--ids-accent-primary) l c h / 0.25) !important;
	background: var(--ids-surface-input-focus) !important;
}

/* ============================================================
   Submit button
   ============================================================ */
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	button[type="submit"],
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-submit-button {
	background: var(--ids-accent-primary) !important;
	color: var(--ids-text-on-dark) !important;
	border: 1px solid var(--ids-accent-primary) !important;
	border-radius: var(--ids-radius-sm) !important;
	padding: 10px 20px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	cursor: pointer;
	line-height: 1.5;
	transition:
		background 0.15s ease,
		border-color 0.15s ease;
}

.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	button[type="submit"]:hover,
.user-registration.ur-frontend-form.ur-frontend-form--rounded
	form
	.ur-submit-button:hover {
	background: var(--ids-accent-primary-hover) !important;
	border-color: var(--ids-accent-primary-hover) !important;
}

/* ============================================================
   Validation messages
   ============================================================ */
.user-registration.ur-frontend-form .ur-field-error,
.user-registration.ur-frontend-form .woocommerce-error {
	color: var(--ids-accent-danger) !important;
	font-size: 13px;
	margin-top: 4px;
}