/**
 * Basic Forms - Frontend Form Styles
 *
 * @package BasicForms
 * @since 1.0.0
 */

.wpps-bf-wrapper {
	max-width: 600px;
	margin: 0 auto;
	--wpps-bf-primary: #2271b1;
	--wpps-bf-radius: 4px;
	--wpps-bf-input-border: 1px solid #c3c4c7;
	--wpps-bf-input-bg: #ffffff;
	--wpps-bf-input-focus: #2271b1;
	--wpps-bf-input-fs: 15px;
	--wpps-bf-input-pad: 12px 16px;
	--wpps-bf-placeholder: #94a3b8;
	--wpps-bf-label-fs: 14px;
	--wpps-bf-label-fw: 500;
	--wpps-bf-label-color: #334155;
	--wpps-bf-btn-radius: 8px;
	padding: var(--wpps-bf-padding, 32px);
	background: var(--wpps-bf-bg, #ffffff);
	border: var(--wpps-bf-border, none);
	border-radius: var(--wpps-bf-radius);
	box-sizing: border-box;
	box-shadow: var(--wpps-bf-container-shadow, none);
	transition: box-shadow 0.2s ease;
}
.wpps-bf-wrapper:hover { box-shadow: var(--wpps-bf-container-shadow-hover, var(--wpps-bf-container-shadow, none)); }
.wpps-bf-wrapper.wpps-bf-layout-full { max-width: none; }
.wpps-bf-wrapper.wpps-bf-layout-compact { max-width: 400px; }
.wpps-bf-wrapper.wpps-bf-layout-narrow { max-width: 320px; }
.wpps-bf-wrapper.wpps-bf-align-left { margin-left: 0; margin-right: auto; }
.wpps-bf-wrapper.wpps-bf-align-right { margin-left: auto; margin-right: 0; }
.wpps-bf-form { display: flex; flex-wrap: wrap; gap: 0 var(--wpps-bf-field-gap, 20px); }
.wpps-bf-form .wpps-bf-field-wrap { margin-bottom: 20px; width: 100%; }
.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-half { width: calc(50% - var(--wpps-bf-field-gap, 20px) / 2); }
.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-third { width: calc(33.333% - var(--wpps-bf-field-gap, 20px) * 2 / 3); }
.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-quarter { width: calc(25% - var(--wpps-bf-field-gap, 20px) * 3 / 4); }
.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-40 { width: calc(40% - var(--wpps-bf-field-gap, 20px) * 0.6); }
.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-60 { width: calc(60% - var(--wpps-bf-field-gap, 20px) * 0.4); }
@media (max-width: 600px) {
	.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-half,
	.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-third,
	.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-quarter,
	.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-40,
	.wpps-bf-form .wpps-bf-field-wrap.wpps-bf-width-60 { width: 100%; }
}
.wpps-bf-wrapper.wpps-bf-spacing-tight .wpps-bf-form .wpps-bf-field-wrap { margin-bottom: 12px; }
.wpps-bf-wrapper.wpps-bf-spacing-normal .wpps-bf-form .wpps-bf-field-wrap { margin-bottom: 20px; }
.wpps-bf-wrapper.wpps-bf-spacing-relaxed .wpps-bf-form .wpps-bf-field-wrap { margin-bottom: 28px; }
.wpps-bf-wrapper.wpps-bf-spacing-spacious .wpps-bf-form .wpps-bf-field-wrap { margin-bottom: 36px; }
.wpps-bf-form .wpps-bf-field { margin-bottom: 0; }
.wpps-bf-form label { display: block; margin-bottom: 6px; font-weight: var(--wpps-bf-label-fw); font-size: var(--wpps-bf-label-fs); color: var(--wpps-bf-label-color); font-family: var(--wpps-bf-label-font, inherit); text-transform: var(--wpps-bf-label-tt, none); font-style: var(--wpps-bf-label-fsty, normal); line-height: var(--wpps-bf-label-lh, normal); letter-spacing: var(--wpps-bf-label-ls, normal); }
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field > label:first-child { margin-bottom: 0; min-width: 120px; flex-shrink: 0; padding-top: var(--wpps-bf-input-pad); }
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field .wpps-bf-help-text,
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field small { flex: 0 0 100%; order: 3; margin-left: calc(120px + 12px); margin-top: 2px; }
/* Label left: inputs/select/textarea/wrappers take remaining space instead of width:100% (which causes wrap) */
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="text"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="email"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="url"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="tel"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="date"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="time"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field input[type="datetime-local"],
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field select,
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field textarea { flex: 1; min-width: 0; width: auto; }
.wpps-bf-number-wrap { display: block; }
.wpps-bf-number-wrap .wpps-bf-input { width: 100%; }
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field .wpps-bf-phone-wrap,
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field .wpps-bf-file-upload,
.wpps-bf-wrapper.wpps-bf-label-left .wpps-bf-form .wpps-bf-field .wpps-bf-number-wrap { flex: 1; min-width: 0; }
/* All form fields - unified text-field style (border + radius from design) */
.wpps-bf-wrapper .wpps-bf-form input[type="text"],
.wpps-bf-wrapper .wpps-bf-form input[type="email"],
.wpps-bf-wrapper .wpps-bf-form input[type="url"],
.wpps-bf-wrapper .wpps-bf-form input[type="tel"],
.wpps-bf-wrapper .wpps-bf-form input[type="number"],
.wpps-bf-wrapper .wpps-bf-form input[type="date"],
.wpps-bf-wrapper .wpps-bf-form input[type="time"],
.wpps-bf-wrapper .wpps-bf-form input[type="datetime-local"],
.wpps-bf-wrapper .wpps-bf-form select,
.wpps-bf-wrapper .wpps-bf-form textarea {
	width: 100%;
	padding: var(--wpps-bf-input-pad);
	border: var(--wpps-bf-input-border);
	border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius));
	background: var(--wpps-bf-input-bg);
	color: var(--wpps-bf-field-color, #1d2327);
	font-size: var(--wpps-bf-input-fs);
	font-family: var(--wpps-bf-field-font, inherit);
	font-weight: var(--wpps-bf-field-fw, normal);
	text-transform: var(--wpps-bf-field-tt, none);
	font-style: var(--wpps-bf-field-fsty, normal);
	line-height: var(--wpps-bf-field-lh, 1.5);
	letter-spacing: var(--wpps-bf-field-ls, normal);
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Reset browser defaults so select/number/date match text field */
.wpps-bf-wrapper .wpps-bf-form input[type="text"],
.wpps-bf-wrapper .wpps-bf-form input[type="email"],
.wpps-bf-wrapper .wpps-bf-form input[type="url"],
.wpps-bf-wrapper .wpps-bf-form input[type="tel"],
.wpps-bf-wrapper .wpps-bf-form input[type="number"],
.wpps-bf-wrapper .wpps-bf-form input[type="date"],
.wpps-bf-wrapper .wpps-bf-form input[type="time"],
.wpps-bf-wrapper .wpps-bf-form input[type="datetime-local"],
.wpps-bf-wrapper .wpps-bf-form select,
.wpps-bf-wrapper .wpps-bf-form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/* Select - match text field exactly, custom dropdown arrow (override theme) */
.wpps-bf-wrapper .wpps-bf-form select {
	border: var(--wpps-bf-input-border) !important;
	border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius)) !important;
	background-color: var(--wpps-bf-input-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 36px;
}
/* Neutralize theme-imposed fixed heights: with border-box + our padding they
   shrink the content area, clipping select/option text and making the phone
   country button a different height than the number input. Let controls size
   from their own padding + line-height so every field matches. */
.wpps-bf-wrapper .wpps-bf-form input,
.wpps-bf-wrapper .wpps-bf-form select,
.wpps-bf-wrapper .wpps-bf-form textarea,
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-phone-country-trigger {
	height: auto;
	min-height: 0;
	line-height: var(--wpps-bf-field-lh, 1.5);
}
/* Number - hide spinners to match text field */
.wpps-bf-form input[type="number"]::-webkit-outer-spin-button,
.wpps-bf-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wpps-bf-form input[type="number"] { -moz-appearance: textfield; }
.wpps-bf-form input::placeholder,
.wpps-bf-form textarea::placeholder { color: var(--wpps-bf-placeholder); font-family: var(--wpps-bf-placeholder-font, inherit); font-size: var(--wpps-bf-placeholder-fs, inherit); }
.wpps-bf-form input:focus,
.wpps-bf-form select:focus,
.wpps-bf-form textarea:focus { outline: none; border-color: var(--wpps-bf-input-focus); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
/* Textarea - match text field exactly (browsers/theme often style textarea differently) */
.wpps-bf-wrapper .wpps-bf-form textarea {
	border: var(--wpps-bf-input-border) !important;
	border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius)) !important;
	background: var(--wpps-bf-input-bg) !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	resize: vertical;
	min-height: 120px;
	vertical-align: top;
}
.wpps-bf-form .wpps-bf-required { color: #d63638; }
.wpps-bf-form .wpps-bf-radio-group,
.wpps-bf-form .wpps-bf-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-radio-group.wpps-bf-radio-inline,
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-checkbox-group.wpps-bf-checkbox-inline { display: grid !important; flex-direction: unset; gap: 8px 16px; }
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-radio-group.wpps-bf-cols-2,
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-checkbox-group.wpps-bf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-radio-group.wpps-bf-cols-3,
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-checkbox-group.wpps-bf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-radio-group.wpps-bf-cols-4,
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-checkbox-group.wpps-bf-cols-4 { grid-template-columns: repeat(4, 1fr); }
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-radio-group.wpps-bf-cols-5,
.wpps-bf-wrapper .wpps-bf-form .wpps-bf-checkbox-group.wpps-bf-cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 480px) {
	.wpps-bf-wrapper .wpps-bf-form .wpps-bf-radio-group.wpps-bf-radio-inline,
	.wpps-bf-wrapper .wpps-bf-form .wpps-bf-checkbox-group.wpps-bf-checkbox-inline { grid-template-columns: 1fr; }
}
.wpps-bf-form .wpps-bf-radio-label,
.wpps-bf-form .wpps-bf-checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.wpps-bf-form .wpps-bf-submit {
	background: var(--wpps-bf-primary); color: #fff; border: none; border-radius: var(--wpps-bf-btn-radius);
	font-size: 16px; cursor: pointer; font-weight: 600; padding: 14px 28px;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.wpps-bf-form .wpps-bf-submit:hover { background: var(--wpps-bf-btn-hover, var(--wpps-bf-primary)); transform: translateY(-1px); }
.wpps-bf-form .wpps-bf-submit:disabled { opacity: .7; cursor: not-allowed; }
.wpps-bf-wrapper.wpps-bf-btn-shadow-sm .wpps-bf-form .wpps-bf-submit { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wpps-bf-wrapper.wpps-bf-btn-shadow-sm .wpps-bf-form .wpps-bf-submit:hover { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.wpps-bf-wrapper.wpps-bf-btn-shadow-md .wpps-bf-form .wpps-bf-submit { box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.wpps-bf-wrapper.wpps-bf-btn-shadow-md .wpps-bf-form .wpps-bf-submit:hover { box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.wpps-bf-wrapper.wpps-bf-btn-shadow-lg .wpps-bf-form .wpps-bf-submit { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.wpps-bf-wrapper.wpps-bf-btn-shadow-lg .wpps-bf-form .wpps-bf-submit:hover { box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.wpps-bf-wrapper.wpps-bf-btn-outline .wpps-bf-form .wpps-bf-submit { background: transparent; border: var(--wpps-bf-btn-border-width, 2px) solid var(--wpps-bf-btn-border-color); color: var(--wpps-bf-btn-border-color); }
.wpps-bf-wrapper.wpps-bf-btn-outline .wpps-bf-form .wpps-bf-submit:hover { background: color-mix(in srgb, var(--wpps-bf-primary) 8%, transparent); color: var(--wpps-bf-btn-hover, var(--wpps-bf-primary)); border-color: var(--wpps-bf-btn-hover, var(--wpps-bf-primary)); }
.wpps-bf-wrapper.wpps-bf-btn-flat .wpps-bf-form .wpps-bf-submit { background: color-mix(in srgb, var(--wpps-bf-primary) 15%, transparent); color: var(--wpps-bf-primary); border: none; }
.wpps-bf-wrapper.wpps-bf-btn-flat .wpps-bf-form .wpps-bf-submit:hover { background: color-mix(in srgb, var(--wpps-bf-primary) 25%, transparent); color: var(--wpps-bf-btn-hover, var(--wpps-bf-primary)); }
.wpps-bf-wrapper.wpps-bf-btn-size-small .wpps-bf-form .wpps-bf-submit { padding: 8px 16px; font-size: 14px; }
.wpps-bf-wrapper.wpps-bf-btn-size-large .wpps-bf-form .wpps-bf-submit { padding: 16px 32px; font-size: 18px; }
.wpps-bf-wrapper.wpps-bf-btn-full .wpps-bf-form .wpps-bf-submit { width: 100%; }
.wpps-bf-form .wpps-bf-submit-wrap,
.wpps-bf-form .wpps-bf-message { width: 100%; }
.wpps-bf-message { padding: 16px 20px; border-radius: 6px; margin-top: 16px; margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
.wpps-bf-message.wpps-bf-success { background: var(--wpps-bf-success-bg, #d1f2eb); color: var(--wpps-bf-success-color, #0d5e47); border: 1px solid var(--wpps-bf-success-border, #48c9a9); }
.wpps-bf-message.wpps-bf-error { background: var(--wpps-bf-error-bg, #ffe6e6); color: var(--wpps-bf-error-color, #c41e3a); border: 1px solid var(--wpps-bf-error-border, #ff6b6b); }
.wpps-bf-form .wpps-bf-help-text,
.wpps-bf-form small { display: block; margin-top: 2px; color: var(--wpps-bf-help-color, #646970); font-size: var(--wpps-bf-help-fs, 12px); }
/* File upload - modern dropzone */
.wpps-bf-file-upload { position: relative; }
.wpps-bf-file-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; }
.wpps-bf-file-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; border: 2px dashed var(--wpps-bf-input-focus); border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius)); background: rgba(34,113,177,0.04); cursor: pointer; transition: border-color 0.2s, background 0.2s; min-height: 100px; }
.wpps-bf-file-dropzone:hover, .wpps-bf-file-dropzone.wpps-bf-dragover { border-color: var(--wpps-bf-input-focus); background: rgba(34,113,177,0.08); }
.wpps-bf-file-icon { font-size: 36px; line-height: 1; color: var(--wpps-bf-input-focus); display: block; }
.wpps-bf-file-dropzone:hover .wpps-bf-file-icon { color: var(--wpps-bf-input-focus); }
.wpps-bf-file-text { font-size: 14px; color: #64748b; }
.wpps-bf-file-hint { font-size: 12px; color: #94a3b8; }
.wpps-bf-file-preview { margin-top: 12px; font-size: 13px; color: #0d5e47; }
.wpps-bf-file-preview:empty { display: none; }
/* Phone field - country:number ratio 20:100, flag images in dropdown */
.wpps-bf-phone-wrap { display: flex; gap: 8px; align-items: stretch; }
.wpps-bf-phone-wrap .wpps-bf-phone-country { flex: 20 1 0; min-width: 90px; position: relative; display: flex; flex-direction: column; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-trigger { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-height: 100%; width: 100%; padding: var(--wpps-bf-input-pad); border: var(--wpps-bf-input-border); border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius)); background: var(--wpps-bf-input-bg); font-size: var(--wpps-bf-input-fs); line-height: var(--wpps-bf-field-lh, 1.5); font-family: var(--wpps-bf-field-font, inherit); cursor: pointer; text-align: left; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: visible; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-trigger:hover { border-color: var(--wpps-bf-input-focus); }
.wpps-bf-phone-wrap .wpps-bf-phone-flag { flex-shrink: 0; display: block; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-trigger .wpps-bf-phone-code { flex-shrink: 0; white-space: nowrap; color: var(--wpps-bf-label-color, #334155); }
.wpps-bf-phone-wrap .wpps-bf-phone-country-list { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--wpps-bf-input-bg); border: var(--wpps-bf-input-border); border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius)); box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 10; display: flex; flex-direction: column; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-list[hidden] { display: none !important; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-search { padding: 10px 12px; border: none; border-bottom: var(--wpps-bf-input-border); border-radius: var(--wpps-bf-input-radius, var(--wpps-bf-radius)) var(--wpps-bf-input-radius, var(--wpps-bf-radius)) 0 0; font-size: var(--wpps-bf-input-fs); flex-shrink: 0; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-search:focus { outline: none; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-options { max-height: 200px; overflow-y: auto; }
.wpps-bf-phone-wrap .wpps-bf-phone-country-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: var(--wpps-bf-input-fs); }
.wpps-bf-phone-wrap .wpps-bf-phone-country-option:hover { background: rgba(37,99,235,0.08); }
.wpps-bf-phone-wrap .wpps-bf-phone-country-option.is-selected { background: rgba(37,99,235,0.12); font-weight: 600; }
.wpps-bf-phone-wrap .wpps-bf-phone-number { flex: 100 1 0; min-width: 0; }
.wpps-bf-field-separator { margin: 24px 0; }
.wpps-bf-field-separator hr { border: none; border-top: 1px solid #e5e7eb; margin: 0; }
.wpps-bf-field-group { margin-top: 28px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e5e7eb; }
.wpps-bf-field-group:first-child { margin-top: 0; }
.wpps-bf-group-title { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
.wpps-bf-group-desc { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }
.wpps-bf-field-html { margin: 16px 0; }
.wpps-bf-html-content { font-size: inherit; line-height: 1.6; color: var(--wpps-bf-field-color, #1d2327); }
.wpps-bf-html-content > :first-child { margin-top: 0; }
.wpps-bf-html-content > :last-child { margin-bottom: 0; }
.wpps-bf-html-content a { color: var(--wpps-bf-primary, #2271b1); }
.wpps-bf-html-content ul,
.wpps-bf-html-content ol { margin: 0 0 1em 1.25em; padding: 0; }

/* Conditional fields start hidden via a server-rendered inline display:none on
   the wrap; frontend.js toggles that inline style as the controlling field
   changes. Hiding the whole wrap (not the inner field) avoids an empty gap. */
