/**
 * Sales Site Form — layout-only styles for widget output.
 *
 * Visual styling (colors, borders, typography, buttons) lives in the active theme.
 * Targets markup generated by salessite-widgets.js. Each form type uses its own
 * BEM prefix (c7-form__, c7-signup-form__, c7-login__, etc.) inside a widget root.
 */

.c7-form,
.c7-login,
.c7-forgot-password,
.c7-reset-password {
	--c7-form-gap: 1rem;
	--c7-form-gap-row: 1.25rem;

	width: 100%;
}

.c7-form > form,
.c7-login > form,
.c7-forgot-password > form,
.c7-reset-password > form,
.c7-form form[class$='__form'],
.c7-login form[class$='__form'],
.c7-forgot-password form[class$='__form'],
.c7-reset-password form[class$='__form'] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--c7-form-gap-row);
	row-gap: var(--c7-form-gap);
	margin: 0;
}

.c7-form [class$='__group'],
.c7-login [class$='__group'],
.c7-forgot-password [class$='__group'],
.c7-reset-password [class$='__group'] {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
	margin-bottom: 1ch;
}

.c7-form [class$='__group']:has([name='countryCode']),
.c7-form [class$='__group']:has([name='company']),
.c7-form [class$='__group']:has([name='domainName']),
.c7-form [class$='__group']:has([name='cardNumber']),
.c7-form [class$='__group']:has(textarea),
.c7-form [class*='__group--checkbox'],
.c7-form [class$='__actions'],
.c7-form [class$='__group']:has([class$='__submit']),
.c7-login [class$='__group']:has(textarea),
.c7-login [class*='__group--checkbox'],
.c7-login [class$='__actions'],
.c7-login [class$='__group']:has([class$='__submit']),
.c7-forgot-password [class$='__group']:has(textarea),
.c7-forgot-password [class*='__group--checkbox'],
.c7-forgot-password [class$='__actions'],
.c7-forgot-password [class$='__group']:has([class$='__submit']),
.c7-reset-password [class$='__group']:has(textarea),
.c7-reset-password [class*='__group--checkbox'],
.c7-reset-password [class$='__actions'],
.c7-reset-password [class$='__group']:has([class$='__submit']) {
	grid-column: 1 / -1;
}

.c7-form [class$='__label'],
.c7-login [class$='__label'],
.c7-forgot-password [class$='__label'],
.c7-reset-password [class$='__label'] {
	display: block;
}

.c7-form [class$='__input'],
.c7-form [class$='__select'],
.c7-form [class$='__textarea'],
.c7-login [class$='__input'],
.c7-login [class$='__select'],
.c7-login [class$='__textarea'],
.c7-forgot-password [class$='__input'],
.c7-forgot-password [class$='__select'],
.c7-forgot-password [class$='__textarea'],
.c7-reset-password [class$='__input'],
.c7-reset-password [class$='__select'],
.c7-reset-password [class$='__textarea'] {
	box-sizing: border-box;
	width: 100%;
}

.c7-form [class$='__textarea'],
.c7-login [class$='__textarea'],
.c7-forgot-password [class$='__textarea'],
.c7-reset-password [class$='__textarea'] {
	min-height: 8.5rem;
	resize: vertical;
}

.c7-form [class$='__error']:empty,
.c7-login [class$='__error']:empty,
.c7-forgot-password [class$='__error']:empty,
.c7-reset-password [class$='__error']:empty {
	display: none;
}

.c7-form [class*='__group--checkbox'],
.c7-login [class*='__group--checkbox'],
.c7-forgot-password [class*='__group--checkbox'],
.c7-reset-password [class*='__group--checkbox'] {
	align-items: flex-start;
	flex-direction: row;
	gap: 0.625rem;
}

.c7-form [class*='__group--checkbox'] > [class$='__checkbox'],
.c7-login [class*='__group--checkbox'] > [class$='__checkbox'],
.c7-forgot-password [class*='__group--checkbox'] > [class$='__checkbox'],
.c7-reset-password [class*='__group--checkbox'] > [class$='__checkbox'] {
	flex: 0 0 auto;
	margin-top: 0.2rem;
}

.c7-form [class*='__label--checkbox'],
.c7-login [class*='__label--checkbox'],
.c7-forgot-password [class*='__label--checkbox'],
.c7-reset-password [class*='__label--checkbox'] {
	align-items: flex-start;
	display: flex;
	gap: 0.625rem;
	width: auto;
}

.c7-form [class$='__submit'],
.c7-login [class$='__submit'],
.c7-forgot-password [class$='__submit'],
.c7-reset-password [class$='__submit'] {
	align-self: flex-start;
	cursor: pointer;
}

.c7-form [class$='__actions'],
.c7-login [class$='__actions'],
.c7-forgot-password [class$='__actions'],
.c7-reset-password [class$='__actions'] {
	display: flex;
}

.commerce7-salessite-form.alignwide .c7-form,
.commerce7-salessite-form.alignfull .c7-form,
.commerce7-salessite-login.alignwide .c7-login,
.commerce7-salessite-login.alignfull .c7-login,
.commerce7-salessite-forgot-password.alignwide .c7-forgot-password,
.commerce7-salessite-forgot-password.alignfull .c7-forgot-password,
.commerce7-salessite-reset-password.alignwide .c7-reset-password,
.commerce7-salessite-reset-password.alignfull .c7-reset-password {
	width: 100%;
}

@media (max-width: 40rem) {
	.c7-form > form,
	.c7-login > form,
	.c7-forgot-password > form,
	.c7-reset-password > form,
	.c7-form form[class$='__form'],
	.c7-login form[class$='__form'],
	.c7-forgot-password form[class$='__form'],
	.c7-reset-password form[class$='__form'] {
		grid-template-columns: 1fr;
	}

	.c7-form [class$='__group'],
	.c7-login [class$='__group'],
	.c7-forgot-password [class$='__group'],
	.c7-reset-password [class$='__group'] {
		grid-column: 1 / -1;
	}
}