@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   FORMS
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Form Layout
|--------------------------------------------------------------------------
*/

.tc-form {
	display: grid;
	gap: var(--tc-space-5);
}

.tc-form__group {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.tc-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tc-space-5);
}

/*
|--------------------------------------------------------------------------
| Labels
|--------------------------------------------------------------------------
*/

.tc-form label,
label {
	display: inline-block;
	margin-bottom: .5rem;

	font-size: var(--tc-text-sm);
	font-weight: var(--tc-fw-semibold);

	color: var(--tc-gray-800);
}

/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.tc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.tc-form select,
.tc-form textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {

	width: 100%;

	padding: .875rem 1rem;

	font-size: var(--tc-text-base);
	font-family: inherit;

	color: var(--tc-gray-800);

	background: var(--tc-white);

	border: 1px solid var(--tc-gray-300);

	border-radius: var(--tc-radius);

	transition:
		border-color var(--tc-transition),
		box-shadow var(--tc-transition),
		background-color var(--tc-transition);

	appearance: none;
}

/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

::placeholder {
	color: var(--tc-gray-500);
	opacity: 1;
}

/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.tc-form input:focus,
.tc-form select:focus,
.tc-form textarea:focus,
input:focus,
select:focus,
textarea:focus {

	outline: none;

	border-color: var(--tc-primary);

	box-shadow: 0 0 0 4px rgba(230,106,31,.12);
}

/*
|--------------------------------------------------------------------------
| Textarea
|--------------------------------------------------------------------------
*/

textarea {
	min-height: 150px;
	resize: vertical;
}

/*
|--------------------------------------------------------------------------
| Select
|--------------------------------------------------------------------------
*/

select {
	cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Checkbox / Radio
|--------------------------------------------------------------------------
*/

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--tc-primary);
	cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Validation
|--------------------------------------------------------------------------
*/

.tc-form .is-error,
input.error,
select.error,
textarea.error {

	border-color: #dc2626;
}

.tc-form .is-success {

	border-color: #16a34a;
}

/*
|--------------------------------------------------------------------------
| Disabled
|--------------------------------------------------------------------------
*/

input:disabled,
select:disabled,
textarea:disabled {

	background: var(--tc-gray-100);

	cursor: not-allowed;

	opacity: .7;
}

/*
|--------------------------------------------------------------------------
| Help Text
|--------------------------------------------------------------------------
*/

.tc-form__help {
	font-size: var(--tc-text-sm);
	color: var(--tc-gray-600);
}

.tc-form__error {
	font-size: var(--tc-text-sm);
	color: #dc2626;
}

.tc-form__success {
	font-size: var(--tc-text-sm);
	color: #16a34a;
}

/*
|--------------------------------------------------------------------------
| Contact Form 7
|--------------------------------------------------------------------------
*/

.wpcf7 {
	width: 100%;
}

.wpcf7-form {
	display: grid;
	gap: var(--tc-space-5);
}

.wpcf7-spinner {
	margin-left: .5rem;
}

.wpcf7-not-valid {
	border-color: #dc2626 !important;
}

.wpcf7-not-valid-tip {
	margin-top: .4rem;
	font-size: var(--tc-text-sm);
	color: #dc2626;
}

.wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 1rem;
	border-radius: var(--tc-radius);
}

/*
|--------------------------------------------------------------------------
| Elementor Forms
|--------------------------------------------------------------------------
*/

.elementor-field-group {
	margin-bottom: 1rem;
}

.elementor-field-textual {
	border-radius: var(--tc-radius) !important;
}

/*
|--------------------------------------------------------------------------
| WPForms
|--------------------------------------------------------------------------
*/

.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
	border-radius: var(--tc-radius);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

	.tc-form__row {

		grid-template-columns: 1fr;

	}

}