/* Custom Form Builder Pro - Frontend Styles */

.cfb-form-wrapper {
	--cfb-primary: #2563eb;
	--cfb-btn-bg: #2563eb;
	--cfb-btn-text: #ffffff;
	--cfb-radius: 6px;
	--cfb-gap: 16px;
	max-width: 100%;
	box-sizing: border-box;
}
.cfb-form-wrapper *, .cfb-form-wrapper *::before, .cfb-form-wrapper *::after { box-sizing: border-box; }

.cfb-form { width: 100%; }
.cfb-honeypot-wrap { position: absolute; left: -9999px; top: -9999px; }

.cfb-fields-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfb-gap);
}

.cfb-field { width: 100%; }
.cfb-field.cfb-width-50 { width: calc(50% - (var(--cfb-gap) / 2)); }
.cfb-field.cfb-width-33 { width: calc(33.333% - (var(--cfb-gap) * 2 / 3)); }
@media (max-width: 640px) {
	.cfb-field.cfb-width-50, .cfb-field.cfb-width-33 { width: 100%; }
}

.cfb-field label, .cfb-field .cfb-group-label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: #1f2937;
}
.cfb-required { color: #dc2626; }

.cfb-label-left .cfb-field { display: flex; align-items: flex-start; gap: 12px; }
.cfb-label-left .cfb-field label { width: 150px; flex-shrink: 0; margin-top: 8px; margin-bottom: 0; }
.cfb-label-left .cfb-field > input,
.cfb-label-left .cfb-field > select,
.cfb-label-left .cfb-field > textarea { flex: 1; }
.cfb-label-hidden .cfb-field label, .cfb-label-hidden .cfb-field .cfb-group-label { position: absolute; left: -9999px; }

.cfb-field input[type=text],
.cfb-field input[type=email],
.cfb-field input[type=tel],
.cfb-field input[type=url],
.cfb-field input[type=number],
.cfb-field input[type=date],
.cfb-field input[type=time],
.cfb-field input[type=file],
.cfb-field select,
.cfb-field textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	border: 1px solid #d1d5db;
	border-radius: var(--cfb-radius);
	background: #fff;
	color: #111827;
	transition: border-color .15s, box-shadow .15s;
	font-family: inherit;
}
.cfb-field input:focus,
.cfb-field select:focus,
.cfb-field textarea:focus {
	outline: none;
	border-color: var(--cfb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfb-primary) 20%, transparent);
}
.cfb-field textarea { resize: vertical; min-height: 100px; }

.cfb-choice { display: flex; align-items: center; gap: 8px; font-weight: normal; margin-bottom: 6px; font-size: 14px; color: #374151; cursor: pointer; }
.cfb-choice input { width: auto !important; }

.cfb-subrow { display: flex; gap: 10px; }
.cfb-subrow-stack { flex-direction: column; }
.cfb-subrow input { flex: 1; }

.cfb-rating { display: flex; gap: 4px; }
.cfb-star { font-size: 26px; color: #d1d5db; cursor: pointer; transition: color .1s; }
.cfb-star.active, .cfb-star:hover, .cfb-star.hover { color: #f59e0b; }

.cfb-field-heading h3 { font-size: 18px; margin: 10px 0 0; color: #111827; }
.cfb-field-divider hr { border: none; border-top: 1px solid #e5e7eb; margin: 8px 0; }
.cfb-field-html { font-size: 14px; color: #4b5563; line-height: 1.6; }

.cfb-submit-row { margin-top: calc(var(--cfb-gap)); display: flex; align-items: center; gap: 12px; }
.cfb-submit-btn {
	background: var(--cfb-btn-bg);
	color: var(--cfb-btn-text);
	border: none;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--cfb-radius);
	cursor: pointer;
	transition: opacity .15s, transform .1s;
}
.cfb-submit-btn:hover { opacity: 0.9; }
.cfb-submit-btn:active { transform: scale(0.98); }
.cfb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.cfb-spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid #d1d5db; border-top-color: var(--cfb-primary);
	animation: cfb-spin .7s linear infinite;
}
@keyframes cfb-spin { to { transform: rotate(360deg); } }

.cfb-form-message {
	margin-top: 16px; padding: 12px 16px; border-radius: var(--cfb-radius); font-size: 14px;
}
.cfb-form-message.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.cfb-form-message.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.cfb-field-error { color: #dc2626; font-size: 12px; margin-top: 4px; }
.cfb-field.has-error input,
.cfb-field.has-error select,
.cfb-field.has-error textarea { border-color: #dc2626; }

.cfb-field[style*="display: none"] { display: none !important; }