.fp-form {
	max-width: 640px;
	margin: 0 auto;
}

.fp-required {
	color: #b32d2e;
}

/* radio/checkbox_group fields render as <fieldset>/<legend> (for a real
   programmatic group caption assistive tech can associate - see
   templates/fields/field-radio.php, field-checkbox-group.php), which
   browsers style with a default border/padding/indent that every other
   .fp-field (a plain <div>) doesn't have - reset back to that same
   unstyled baseline. */
fieldset.fp-field {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: auto;
}

legend.form-label {
	float: none;
	width: auto;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Both already carry Bootstrap's own .btn class (see templates/form-shell.php,
   templates/fields/field-email.php, field-tel.php, and the verification
   modals) - recolor via --bs-btn-* custom properties instead of raw
   properties, so Bootstrap's own :hover/:focus-visible/:disabled handling
   (focus ring included) keeps working rather than being silently
   overridden by an unconditional rule at equal specificity. A theme can
   still restyle further by targeting .fp-btn-submit/.fp-btn-verify itself. */
.fp-btn-submit,
.fp-btn-verify {
	--bs-btn-color: #fff;
	--bs-btn-bg: #0f172a;
	--bs-btn-border-color: #0f172a;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #1e293b;
	--bs-btn-hover-border-color: #1e293b;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1e293b;
	--bs-btn-active-border-color: #1e293b;
	--bs-btn-disabled-color: #9ca3af;
	--bs-btn-disabled-bg: #d1d5db;
	--bs-btn-disabled-border-color: #d1d5db;
}

/* Sizing lives here, not as a `py-2` utility bolted onto individual button
   instances in markup - .fp-btn-verify is used in 4 different places
   (2 inline field-verify buttons, 2 OTP modal submit buttons) and all 4
   should size identically without each caller having to remember to add
   the same utility class. */
.fp-btn-verify {
	--bs-btn-padding-y: 0.5rem;
}

/* Brand hook class on every verification modal's .modal-content (see
   templates/modals/*.php) - gives the modals real chrome by default instead
   of bare unstyled Bootstrap, the same way .pcr-modal does in the reference
   plugin. A theme can still restyle further by targeting .fp-modal itself.
   Uses Bootstrap's own --bs-modal-* custom properties (confirmed consumed
   by .modal-content/.modal-header/.modal-body/.modal-footer in the vendored
   bootstrap.min.css) rather than raw properties, same technique as the
   button variables above - border-width:0 achieves the same borderless
   look as `border:none` but through Bootstrap's own mechanism. box-shadow
   is the one exception: --bs-modal-box-shadow is defined by Bootstrap but
   never actually consumed by any selector in this build, so there's no
   variable to hook into for it. */
.fp-modal {
	--bs-modal-border-radius: 16px;
	--bs-modal-border-width: 0;
	--bs-modal-header-padding: 24px 28px;
	--bs-modal-padding: 28px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.fp-modal .modal-title {
	font-weight: 700;
	font-size: 1.25rem;
}

.fp-modal .fp-otp-box {
	border-radius: 8px;
	font-weight: 700;
}

/* On narrow phones, 6 boxes at 44px plus gap-2 (8px) plus the modal's own
   padding can exceed the viewport - shrink both below the sm breakpoint. */
@media (max-width: 400px) {
	.fp-otp-boxes {
		gap: 0.375rem;
	}
	.fp-otp-box {
		width: 38px;
	}
}

.fp-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1a7a3c;
	font-weight: 600;
}

.fp-otp-boxes .fp-otp-box {
	width: 44px;
	height: 52px;
	font-size: 22px;
	text-align: center;
}

.fp-whatsapp-code {
	font-family: monospace;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 2px;
}

.fp-form-heading {
	margin-top: 1.5rem;
}

/* Card-style radio display (opt-in per field via `display: cards`) - the
   native input's :checked state drives the selected look, no JS needed. */
.fp-radio-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fp-radio-card {
	position: relative;
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	cursor: pointer;
}

.fp-radio-card-input {
	position: absolute;
	top: 16px;
	right: 16px;
}

.fp-radio-card-label {
	font-weight: 700;
	padding-right: 24px;
}

.fp-radio-card-description {
	font-size: 0.875rem;
	color: #475569;
}

.fp-radio-card:has(.fp-radio-card-input:checked) {
	border-color: #0f172a;
	border-width: 2px;
	background-color: rgba(15, 23, 42, 0.04);
}

.fp-radio-card-input:focus-visible {
	outline: 2px solid #0f172a;
	outline-offset: 2px;
}

/* File-upload dropzone. The native input is layered invisibly over the
   whole box (position:absolute, opacity:0, sized to fill it) so native
   click-to-browse and native drag-and-drop both work without JS - it isn't
   hidden with display:none/visibility:hidden, either of which would break
   both interactions. */
.fp-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 24px;
	border: 1px dashed #9ca3af;
	border-radius: 12px;
	background: #f9fafb;
	text-align: center;
	cursor: pointer;
}

.fp-dropzone-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.fp-dropzone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #d1d5db;
	font-size: 20px;
	color: #475569;
}

.fp-dropzone-text {
	font-weight: 700;
}

.fp-dropzone-hint {
	font-size: 0.8125rem;
	color: #475569;
	margin-top: -4px;
}

.fp-dropzone-filename {
	font-size: 0.875rem;
	font-weight: 700;
}

.fp-dropzone-filename:empty {
	display: none;
}

/* A <span>, not a real <button> - the actual click/drop target is the
   invisible native file input layered over the whole dropzone (see
   .fp-dropzone-input above); this is purely the visual affordance. Still
   carries Bootstrap's .btn class (templates/fields/field-file.php) for
   its box/font/cursor handling, recolored via --bs-btn-* same as every
   other button here. */
.fp-dropzone-browse-btn {
	--bs-btn-color: #fff;
	--bs-btn-bg: #0f172a;
	--bs-btn-border-color: #0f172a;
	--bs-btn-padding-x: 16px;
	--bs-btn-padding-y: 8px;
	--bs-btn-font-size: 0.8125rem;
	--bs-btn-font-weight: 700;
	text-transform: uppercase;
}

.fp-dropzone:has(.fp-dropzone-input:focus-visible) {
	outline: 2px solid #0f172a;
	outline-offset: 2px;
}