/**
 * PR CDB Form — theme skin
 *
 * The form is rendered by the pr-cdb-form plugin ([cdbform id='…']), whose
 * markup we do not own; this restyles it to match the rest of the site. Loaded
 * after the plugin's own stylesheet — see inc/enqueue/global.php.
 *
 * Controls follow the same spec as the community modal and the theme's inputs:
 * 48px tall, 1px hairline border, 4px radius, Roboto Condensed at 16px.
 *
 * Two things the plugin does that have to be undone first:
 *
 *   1. Floating labels. The plugin prints the label text as
 *      `label::before { content: attr(title); position: absolute }` sitting on
 *      the control's top border, which reads as a notch cut into the box. We
 *      keep the ::before as the label but lay it out as a normal block above
 *      the field — the text only exists there, so it cannot simply be removed.
 *
 *   2. Class collisions with daisyUI. A select field carries `.select` and the
 *      spinner row carries `.progress`, both of which are daisyUI component
 *      names. daisyUI then paints the *field wrapper* as a control in its own
 *      right, which is where the doubled border and the short, narrow select
 *      boxes came from. Those wrappers are reset back to plain blocks.
 */

/* ---------------------------------------------------------------- Page */
body:has(.cdb_form_container) {
	background-color: var(--color-sand);
}

.cdb_form_container {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 16px 80px;
	background: transparent !important;
	font-family: var(--font-default, 'Roboto Condensed', sans-serif);
	font-size: 16px;
	color: var(--dm-fg-default-primary);
}

.cdb_form_container .cdb_form_input_container {
	max-width: none;
}

.cdb_form_container form {
	padding: 0;
}

/* ------------------------------------------------- daisyUI collisions */
/* The field wrapper carries the field type as a bare class — `select`,
   `textarea`, `file`, `image` — and the upload row carries `label`. Every one
   of those is also a daisyUI component name, so daisyUI paints the wrapper as a
   control: a border, a fixed height, and `display: inline-flex`, which is what
   made the select and textarea fields shrink to roughly half the column width.
   Reset them to plain full-width blocks; the real control inside is styled
   below. `display` and `width` are the two that matter most here. */
.cdb_form_container .cdb_form_field.select,
.cdb_form_container .cdb_form_field.textarea,
.cdb_form_container .cdb_form_field.file,
.cdb_form_container .cdb_form_field.image,
.cdb_form_container .cdb_form_field .select,
.cdb_form_container .cdb_form_field .textarea,
.cdb_form_container .progress {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 0;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* daisyUI pulls the inner <select> outside its wrapper to hide the wrapper's
   padding: `margin-inline-start: -1rem` plus `width: calc(100% + 2.75rem)`.
   With the wrapper reset that offset is just a 16px outdent, which is why the
   select boxes sat a notch to the left of every text input. */
.cdb_form_container .cdb_form_field.select select {
	margin-inline: 0;
	width: 100%;
}

/* And `.select:focus-within` draws a 2px outline around the *wrapper*, which
   here holds the label too — that was the box appearing around the whole field
   on click. The control carries its own focus ring further down. */
.cdb_form_container .cdb_form_field.select:focus,
.cdb_form_container .cdb_form_field.select:focus-within,
.cdb_form_container .cdb_form_field.textarea:focus,
.cdb_form_container .cdb_form_field.textarea:focus-within {
	outline: none;
	box-shadow: none;
	isolation: auto;
	z-index: auto;
}

/* ------------------------------------------------------------- Fields */
.cdb_form_container .cdb_form_field {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	padding-top: 0;
	margin-bottom: 24px;
	line-height: 1.4;
	letter-spacing: 0;
}

/* The label wrapper carries the text in ::before and nothing else, so it is a
   plain block above the control rather than a box. */
.cdb_form_container .cdb_form_field > label {
	display: block;
	order: -1;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	font-family: inherit;
}

.cdb_form_container .cdb_form_field > label::before {
	content: attr(title);
	position: static;
	display: block;
	top: auto;
	left: auto;
	z-index: auto;
	margin: 0 0 6px;
	padding: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dm-fg-default-primary);
	transition: none;
}

/* A select field hid its label behind `display: contents` before; now that the
   wrapper is a plain block it lays out like every other field. */
.cdb_form_container .cdb_form_field.select > label {
	display: block;
}

/* ----------------------------------------------------------- Controls */
/* `._field_container` is deliberately absent: it only wraps the file upload
   row, which is laid out further down rather than painted as a control. */
.cdb_form_container .cdb_form_field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.cdb_form_container .cdb_form_field select,
.cdb_form_container .cdb_form_field ._bm_dob_separated_inputs_container {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dm-fg-default-primary);
	background-color: var(--dm-bg-default-white);
	border: 1px solid var(--dm-border-default-dark);
	border-radius: 4px;
	box-shadow: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

.cdb_form_container .cdb_form_field textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 120px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary);
	background-color: var(--dm-bg-default-white);
	border: 1px solid var(--dm-border-default-dark);
	border-radius: 4px;
	resize: vertical;
}

/* The chevron matches the community modal's select. */
.cdb_form_container .cdb_form_field select {
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23062D20' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.cdb_form_container .cdb_form_field input::placeholder,
.cdb_form_container .cdb_form_field textarea::placeholder {
	color: var(--dm-fg-default-primary);
	opacity: 0.7;
}

.cdb_form_container .cdb_form_field input:focus-visible,
.cdb_form_container .cdb_form_field select:focus-visible,
.cdb_form_container .cdb_form_field textarea:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong);
	outline-offset: -2px;
	border-color: var(--dm-border-default-dark-strong);
}

/* The plugin turns the focused label blue; keep it in the brand green. */
.cdb_form_container .cdb_form_field :focus + label::before {
	color: var(--dm-fg-default-primary);
}

/* Date of birth is three bare inputs inside one bordered row. */
.cdb_form_container .cdb_form_field ._bm_dob_separated_inputs_container {
	display: flex;
	align-items: center;
	gap: 6px;
}

.cdb_form_container .cdb_form_field ._bm_dob_separated_inputs_container span {
	color: color-mix(in srgb, var(--dm-fg-default-primary) 45%, transparent);
}

/* -------------------------------------------------------- File upload */
/* The row is: three helper paragraphs, a <span class="label"> acting as the
   button, the real file input (which the plugin takes out of flow with
   position:absolute), and a "No file chosen" message. Because the input is out
   of flow the wrapper collapsed, which is why the privacy text was printed over
   the top of it. Laying the wrapper out as a column gives it height again. */
.cdb_form_container .cdb_form_field ._field_container.input-file {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 0;
	background: transparent;
	border: 0;
}

.cdb_form_container .cdb_form_field ._field_container.input-file p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--dm-fg-default-primary) 75%, transparent);
}

.cdb_form_container .cdb_form_field ._field_container.input-file br {
	display: none;
}

/* `span.label` is the visible trigger, and another daisyUI name to override. */
.cdb_form_container .cdb_form_field ._field_container.input-file span.label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary);
	background: transparent;
	border: 1px solid var(--dm-border-default-dark-strong);
	border-radius: 9999px;
	cursor: pointer;
}

.cdb_form_container .cdb_form_field ._field_container.input-file span.no-file-chosen-message {
	font-size: 13px;
	color: color-mix(in srgb, var(--dm-fg-default-primary) 70%, transparent);
}

/* ------------------------------------------- Checkbox + radio groups */
.cdb_form_container .cdb_form_field.choice {
	margin-top: 0;
	padding-top: 0;
}

.cdb_form_container .cdb_form_options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding: 0;
}

.cdb_form_container .cdb_form_option {
	display: flex;
	align-items: center;
	min-width: 0;
	margin-right: 0;
}

.cdb_form_container .cdb_form_option label,
.cdb_form_container .cdb_form_field.optin label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	order: 0;
	padding-left: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

/* These rows show real label text, so the ::before placeholder is dropped. */
.cdb_form_container .cdb_form_option label::before,
.cdb_form_container .cdb_form_field.optin label::before {
	content: none !important;
	display: none !important;
}

.cdb_form_container .cdb_form_option input[type='checkbox'],
.cdb_form_container .cdb_form_option input[type='radio'],
.cdb_form_container .cdb_form_field.optin input[type='checkbox'] {
	position: static;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--dm-bg-default-tertiary);
	cursor: pointer;
}

.cdb_form_container .cdb_form_field.optin {
	margin-top: 8px;
}

.cdb_form_container .cdb_form_field.optin span,
.cdb_form_container .cdb_form_field.optin p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dm-fg-default-primary);
}

/* ------------------------------------------------ Privacy / GDPR text */
.cdb_form_container .cdb_form_privacypolicy_information,
.cdb_form_container .cdb_form_gdpr_information {
	margin: 16px 0;
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--dm-fg-default-primary) 75%, transparent);
}

.cdb_form_container .cdb_form_privacypolicy_information p,
.cdb_form_container .cdb_form_gdpr_information p {
	margin: 0 0 8px;
}

.cdb_form_container .cdb_form_privacypolicy_information a,
.cdb_form_container .cdb_form_gdpr_information a,
.cdb_form_container .cdb_form_field.optin a {
	color: inherit;
	text-decoration: underline;
}

/* ------------------------------------------------------------- Errors */
.cdb_form_container .cdb_form_field.cdb_form_field_has_error input,
.cdb_form_container .cdb_form_field.cdb_form_field_has_error select,
.cdb_form_container .cdb_form_field.cdb_form_field_has_error textarea {
	border-color: #a8321e;
}

.cdb_form_container span.cdb_form_field_error_message {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: #a8321e;
}

.cdb_form_container .error_message {
	padding: 16px;
	margin-bottom: 24px;
	font-size: 14px;
	color: var(--dm-fg-default-white);
	background-color: #a8321e;
	border: 0;
	border-radius: 4px;
}

/* ------------------------------------------------------------- Submit */
/* The theme's primary button: 48px pill, forest green, white label. */
.cdb_form_container button,
.cdb_form_container button[type='submit'] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 120px !important;
	height: 48px;
	margin: 24px 0 0 !important;
	padding: 0 24px !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--dm-fg-default-white) !important;
	background-color: var(--dm-bg-default-tertiary) !important;
	border: 0 !important;
	border-radius: 9999px !important;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.cdb_form_container button:hover,
.cdb_form_container button:focus,
.cdb_form_container button:active {
	color: var(--dm-fg-default-white) !important;
	background-color: var(--dm-bg-default-tertiary) !important;
	opacity: 0.88;
}

.cdb_form_container button:focus-visible {
	outline: 2px solid var(--dm-border-default-dark-strong);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- Mobile */
@media (max-width: 767px) {
	.cdb_form_container {
		padding: 32px 16px 64px;
	}

	.cdb_form_container button[type='submit'] {
		width: 100%;
	}
}

/* ------------------------------------------------- Fields kept hidden */
.pr-form-local-attr,
.pr-form-feedback-type {
	display: none !important;
}