/* ==========================================================
   PROADIGN FORMS
   ========================================================== */


/* ----------------------------------------------------------
   WRAPPER
   ---------------------------------------------------------- */

.pdstyle-form-wrap {
	width: 100%;
	max-width: 900px;
	
	margin-left: auto;
    margin-right: auto;

	padding: clamp(24px, 4vw, 42px);

	border: 1px solid rgba(0, 0, 0, 0.08);

	background: var(--pdstyle-white);

	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------------------------
   FORM HEADING
   ---------------------------------------------------------- */

.pdstyle-form-title {
	margin: 0 0 8px;

	color: var(--pdstyle-charcoal);

	font-family: "Roboto Condensed", Arial, sans-serif;
	font-size: clamp(1.8rem, 2vw, 2.25rem);
	font-weight: 800;
	line-height: 1;

	text-transform: uppercase;
}

.pdstyle-form-intro {
	margin: 0 0 30px;

	color: var(--pdstyle-text);

	font-size: 1rem;
	line-height: 1.5;
}


/* ----------------------------------------------------------
   HONEYPOT
   ---------------------------------------------------------- */

.pdstyle-form-honeypot {
	position: absolute !important;
	left: -9999px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;
}


/* ----------------------------------------------------------
   FORM GRID
   ---------------------------------------------------------- */

.pdstyle-form-fields {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	column-gap: 14px;
	row-gap: 18px;
}


/* ----------------------------------------------------------
   FIELD WIDTHS
   ---------------------------------------------------------- */

.pdstyle-form-half {
	grid-column: span 1;
}

.pdstyle-form-full {
	grid-column: 1 / -1;
}


/* ----------------------------------------------------------
   FIELD
   ---------------------------------------------------------- */

.pdstyle-form-field {
	display: flex;
	flex-direction: column;

	min-width: 0;

	gap: 6px;
}


/* ----------------------------------------------------------
   LABELS
   ---------------------------------------------------------- */

.pdstyle-form-label {
	margin: 0;

	color: var(--pdstyle-charcoal);

	font-family: "Roboto Condensed", Arial, sans-serif;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.15;

	text-transform: uppercase;
}

.pdstyle-form-required {
	color: var(--pdstyle-accent);

	font-weight: 800;
}


/* ----------------------------------------------------------
   INPUTS
   ---------------------------------------------------------- */

.pdstyle-form-input {
	display: block;

	width: 100%;
	min-height: 46px;

	padding: 11px 13px;

	border: 1px solid transparent;
	border-radius: 0;

	background: #f0f1f2;

	color: var(--pdstyle-charcoal);

	font-family: inherit;
	font-size: 0.94rem;
	font-weight: 400;
	line-height: 1.35;

	box-shadow: none;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}


/* ----------------------------------------------------------
   PLACEHOLDERS
   ---------------------------------------------------------- */

.pdstyle-form-input::placeholder {
	color: #9a9a9a;

	opacity: 1;
}


/* ----------------------------------------------------------
   FOCUS
   ---------------------------------------------------------- */

.pdstyle-form-input:focus {
	border-color: var(--pdstyle-accent);

	background: var(--pdstyle-white);

	outline: none;

	box-shadow:
		0 0 0 1px
		var(--pdstyle-accent);
}


/* ----------------------------------------------------------
   TEXTAREA
   ---------------------------------------------------------- */

.pdstyle-form-textarea {
	min-height: 145px;

	resize: vertical;
}


/* ----------------------------------------------------------
   SELECT
   ---------------------------------------------------------- */

.pdstyle-form-select {
	cursor: pointer;
}


/* ==========================================================
   FORM SECTIONS

   Used by larger forms such as Value Your Trade.
   ========================================================== */

.pdstyle-form-section {
	grid-column: 1 / -1;

	margin: 14px 0 0;
	padding-bottom: 7px;

	border-bottom:
		2px solid
		var(--pdstyle-accent);
}

.pdstyle-form-section:first-child {
	margin-top: 0;
}

.pdstyle-form-section h3 {
	margin: 0;
	padding: 0;

	color: var(--pdstyle-charcoal);

	font-family: "Roboto Condensed", Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;

	text-transform: uppercase;
}


/* ----------------------------------------------------------
   CHECKBOX
   ---------------------------------------------------------- */

.pdstyle-form-field-checkbox {
	margin-top: 2px;
}

.pdstyle-form-checkbox {
	display: flex;
	align-items: flex-start;

	gap: 9px;

	color: var(--pdstyle-text);

	font-size: 0.84rem;
	line-height: 1.4;

	cursor: pointer;
}

.pdstyle-form-checkbox input {
	flex: 0 0 auto;

	width: 15px;
	height: 15px;

	margin: 2px 0 0;

	accent-color: var(--pdstyle-accent);
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

.pdstyle-form-actions {
	margin-top: 24px;
}


/* ----------------------------------------------------------
   SUBMIT BUTTON
   ---------------------------------------------------------- */

.pdstyle-form-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 44px;

	padding: 12px 24px !important;

	border: 0 !important;

	background:
		var(--pdstyle-accent) !important;

	color:
		var(--pdstyle-white) !important;

	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;

	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;

	text-decoration: none !important;
	text-transform: uppercase;

	clip-path: polygon(
		8px 0,
		100% 0,
		calc(100% - 8px) 100%,
		0 100%
	);

	cursor: pointer;

	transition:
		transform 0.2s ease,
		filter 0.2s ease;
}

.pdstyle-form-submit:hover,
.pdstyle-form-submit:focus {
	background:
		var(--pdstyle-accent) !important;

	color:
		var(--pdstyle-white) !important;

	transform: translateY(-2px);

	filter: brightness(1.07);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.pdstyle-form-wrap {
		max-width: none;
	}

	.pdstyle-form-title {
		font-size:
			clamp(1.6rem, 7vw, 2rem);
	}

	.pdstyle-form-intro {
		margin-bottom: 24px;
	}

	.pdstyle-form-fields {
		grid-template-columns: 1fr;

		row-gap: 16px;
	}

	.pdstyle-form-half,
	.pdstyle-form-full {
		grid-column: 1;
	}

	.pdstyle-form-input {
		min-height: 46px;

		padding: 11px 12px;
	}

	.pdstyle-form-textarea {
		min-height: 140px;
	}

	.pdstyle-form-submit {
		width: 100%;
	}

}

/* ==========================================================
   FORM MESSAGES
   ========================================================== */

.pdstyle-form-message {
	margin: 0 0 24px;
	padding: 16px 18px;

	border-left: 4px solid;

	font-size: 0.95rem;
	line-height: 1.5;
}

.pdstyle-form-message strong {
	display: block;
	margin-bottom: 3px;

	font-weight: 800;
}


/* ----------------------------------------------------------
   SUCCESS
   ---------------------------------------------------------- */

.pdstyle-form-message-success {
	border-color: #2f7d32;

	background: #f2f8f2;

	color: #245c27;
}


/* ----------------------------------------------------------
   ERROR
   ---------------------------------------------------------- */

.pdstyle-form-message-error {
	border-color: #b42318;

	background: #fff4f2;

	color: #8f1d14;
}