/**
 * Form Builder Wizard Styles
 * Matches the design system of the Pricing Table Wizard and Calculator Wizard
 */

/* ── Root wrapper ─────────────────────────────────────────────────────── */
.fbw-wizard {
	/*
	max-width: 1200px;
	margin: 20px auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.09);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	*/
}

/* ── Header ───────────────────────────────────────────────────────────── */
.fbw-header {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
	padding: 28px 36px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fbw-title {
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
}

.fbw-version-badge {
	display: inline-block;
	background: rgba(255,255,255,0.15);
	color: #a8d8ea;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
	margin-left: 10px;
	vertical-align: middle;
	letter-spacing: 0.04em;
}
/* The step progress bar lives in the "Step progress" block at the end of
   this file, as .fbw-progress — an ordered list matching the Calendar,
   Gallery, D3 and Pricing Table wizards. */

/* ============================================================
   Navigation buttons
   ============================================================ */
.wizard-actions {
    display: block;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #eee;
	text-align: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.92em;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, opacity 0.2s;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary {
    background: #2196F3;
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: #1976D2;
}

.btn-info {
    background: #00bcd4;
    color: #fff;
}
.btn-info:hover {
    background: #0097a7;
}

.btn-default {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
}
.btn-default:hover {
    background: #e0e0e0;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1em;
}


/* ── Step progress bar (old) ────────────────────────────────────────────────── */
.fbw-step-bar {
	display: flex;
	background: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
}

.fbw-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-right: 1px solid #e9ecef;
	transition: background 0.2s;
}

.fbw-step:last-child { border-right: none; }

.fbw-step__circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #dee2e6;
	color: #6c757d;
	font-size: 0.95rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s, color 0.2s;
}

.fbw-step--active .fbw-step__circle {
	background: #0d6efd;
	color: #fff;
}

.fbw-step--done .fbw-step__circle {
	background: #198754;
	color: #fff;
}

.fbw-step--active {
	background: #e8f0fe;
}

.fbw-step__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fbw-step__title {
	font-size: 0.9rem;
	font-weight: 700;
	color: #343a40;
}

.fbw-step--active .fbw-step__title { color: #0d6efd; }
.fbw-step--done   .fbw-step__title { color: #198754; }

.fbw-step__sub {
	font-size: 0.75rem;
	color: #6c757d;
}

/* ── Content area ─────────────────────────────────────────────────────── */
.fbw-content {
	/*padding: 32px 36px 40px;*/
}

.fbw-step-heading {
	font-size: 1.35rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 6px;
}

.fbw-step-desc {
	font-size: 0.9rem;
	color: #6c757d;
	margin: 0 0 28px;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.fbw-section {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 24px 28px;
	margin-bottom: 24px;
}

.fbw-section-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 6px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e9ecef;
}

.fbw-section-desc {
	font-size: 0.85rem;
	color: #6c757d;
	margin: 0 0 18px;
}

/* ── Form grid ────────────────────────────────────────────────────────── */
.fbw-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 28px;
}

.fbw-field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fbw-col-full { grid-column: 1 / -1; }

.fbw-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #343a40;
}

.fbw-required { color: #dc3545; margin-left: 2px; }
.fbw-muted    { color: #6c757d; font-weight: 400; }

.fbw-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	font-size: 0.875rem;
	color: #343a40;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}

.fbw-input:focus {
	border-color: #0d6efd;
	outline: none;
	box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
}

textarea.fbw-input { resize: vertical; }

.fbw-help {
	font-size: 0.78rem;
	color: #6c757d;
	margin: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.fbw-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	text-decoration: none;
	white-space: nowrap;
}

.fbw-btn--primary {
	background: #0d6efd;
	color: #fff;
	border-color: #0d6efd;
}
.fbw-btn--primary:hover {
	background: #0b5ed7;
	border-color: #0b5ed7;
}

.fbw-btn--outline {
	background: transparent;
	color: #0d6efd;
	border-color: #0d6efd;
}
.fbw-btn--outline:hover {
	background: #e8f0fe;
}

.fbw-btn--secondary {
	background: #6c757d;
	color: #fff;
	border-color: #6c757d;
}
.fbw-btn--secondary:hover {
	background: #5c636a;
	border-color: #5c636a;
}

/* ── Navigation row ───────────────────────────────────────────────────── */
.fbw-nav-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid #e9ecef;
	margin-top: 28px;
	gap: 12px;
}

.fbw-nav-row--center {
	justify-content: center;
}

.fbw-divider {
	border: none;
	border-top: 1px solid #e9ecef;
	margin: 28px 0 0;
}

/* ── Grid preview (Step 1) ────────────────────────────────────────────── */
.fbw-grid-preview {
	display: grid;
	gap: 8px;
	padding: 16px;
	background: #f8f9fa;
	border: 2px dashed #dee2e6;
	border-radius: 6px;
	min-height: 120px;
}

.fbw-grid-preview .fbw-grid-cell {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #adb5bd;
}

/* ── Builder layout (Step 2) ──────────────────────────────────────────── */
.fbw-step2-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
	gap: 16px;
}

.fbw-builder-container {
	display: grid;
	grid-template-columns: 180px 1fr 260px;
	gap: 16px;
	min-height: 500px;
	margin-bottom: 24px;
}

.fbw-panel {
	border: 1px solid #e9ecef;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.fbw-panel-title {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6c757d;
	background: #f8f9fa;
	padding: 10px 14px;
	margin: 0;
	border-bottom: 1px solid #e9ecef;
}

/*
 * A panel header carrying an action beside its title. The title keeps its own
 * background, so the row is built around the existing title bar rather than
 * replacing it.
 */
.fbw-panel-head {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
}

.fbw-panel-head .fbw-panel-title {
	flex: 1 1 auto;
	border-bottom: 0;
}

.fbw-panel-action {
	flex: 0 0 auto;
	align-self: center;
	margin-right: 10px;
	padding: 4px 10px;
	font-size: 0.78rem;
}

/* Elements palette */
.fbw-panel--elements {
	background: #fff;
}

.fbw-elements-list {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
}

.fbw-element-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: grab;
	font-size: 0.82rem;
	font-weight: 500;
	color: #343a40;
	background: #f8f9fa;
	border: 1px solid transparent;
	transition: background 0.15s, border-color 0.15s;
	user-select: none;
}

.fbw-element-item:hover {
	background: #e8f0fe;
	border-color: #0d6efd;
	color: #0d6efd;
}

.fbw-element-item.dragging {
	opacity: 0.5;
}

.fbw-el-icon {
	font-size: 1rem;
	width: 20px;
	text-align: center;
}

/* Design canvas */
.fbw-panel--canvas {
	background: #fff;
}

.fbw-design-canvas {
	flex: 1;
	padding: 12px;
	overflow: auto;
}

.canvas-cell {
	background: #fafafa;
	border: 1px dashed #dee2e6;
	border-radius: 4px;
	min-height: 80px;
	position: relative;
	transition: background 0.15s, border-color 0.15s;
}

.canvas-cell.drag-over {
	background: #e8f0fe;
	border-color: #0d6efd;
	border-style: solid;
}

.canvas-cell.selected {
	border-color: #0d6efd;
	border-style: solid;
	background: #f0f5ff;
}

.canvas-cell.has-element {
	background: #fff;
	border-style: solid;
	border-color: #dee2e6;
}

.form-element {
	position: relative;
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
}

.element-toolbar {
	position: absolute;
	top: 4px;
	right: 4px;
	display: none;
	gap: 4px;
	z-index: 10;
}

.form-element:hover .element-toolbar {
	display: flex;
}

.element-toolbar button {
	background: #0d6efd;
	color: #fff;
	border: none;
	border-radius: 4px;
	width: 24px;
	height: 24px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.element-toolbar button.delete {
	background: #dc3545;
}

.element-preview label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #343a40;
}

.element-preview input[type="text"],
.element-preview input[type="email"],
.element-preview input[type="number"],
.element-preview select,
.element-preview textarea {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	font-size: 12px;
	background: #fff;
	box-sizing: border-box;
}

/* Properties panel */
.fbw-panel--props {
	background: #fff;
}

.fbw-props-tabs,
.fbw-config-tabs {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fbw-tabs-nav {
	display: flex;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.fbw-tab-btn {
	flex: 1;
	padding: 9px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #6c757d;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.fbw-tab-btn--active {
	color: #0d6efd;
	border-bottom-color: #0d6efd;
	background: #fff;
}

.fbw-tab-content {
	flex: 1;
	overflow: hidden;
}

.fbw-tab-pane {
	display: none;
	padding: 12px;
	overflow-y: auto;
	height: 100%;
}

.fbw-tab-pane--active {
	display: block;
}

.fbw-no-selection {
	font-size: 0.82rem;
	color: #adb5bd;
	text-align: center;
	padding: 20px 10px;
}

.fbw-element-properties,
.fbw-element-styles {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Property groups */
.property-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.property-group label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #495057;
}

.property-group input,
.property-group select,
.property-group textarea {
	padding: 5px 8px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	font-size: 0.8rem;
	width: 100%;
	box-sizing: border-box;
}

.property-group small {
	font-size: 0.72rem;
	color: #6c757d;
}

/* ── Modal ────────────────────────────────────────────────────────────── */
.fbw-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fbw-modal {
	background: #fff;
	border-radius: 10px;
	width: 480px;
	max-width: 95vw;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fbw-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e9ecef;
	background: #f8f9fa;
}

.fbw-modal-header h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #343a40;
}

.fbw-modal-close {
	background: none;
	border: none;
	font-size: 1.4rem;
	color: #6c757d;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}

.fbw-modal-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fbw-prop-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.fbw-prop-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #343a40;
}

.fbw-color-input {
	width: 48px;
	height: 36px;
	padding: 2px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	cursor: pointer;
}

.fbw-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid #e9ecef;
	background: #f8f9fa;
}

/* ── Step 3 preview form ──────────────────────────────────────────────── */
.fbw-form-preview-container {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	overflow: auto;
}

.fbw-preview-form {
	/* form element */
}

.fbw-preview-grid {
	/* grid set via inline style */
}

.fbw-preview-cell {
	/* cell */
}

.fbw-form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/*
 * The submit button as the published page draws it.
 *
 * The wizard used to dress this button in .fbw-btn--primary, which is the
 * wizard's own chrome and never ships - so the author was shown a #0d6efd
 * button and their visitors got a #2f80ed one. These rules mirror what the
 * renderer generates, and an author's own styles are inline, so they still win.
 */
.tabulizer-formbuilder-submit-wrap {
	display: block;
}

.tabulizer-formbuilder-submit {
	display: inline-block;
	padding: 9px 16px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	background: #2f80ed;
	color: #fff;
	font-weight: 600;
}

.tabulizer-formbuilder-submit:hover {
	opacity: 0.92;
}

.fbw-form-group label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #343a40;
}

.fbw-form-control {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ced4da;
	border-radius: 5px;
	font-size: 0.875rem;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.fbw-form-control:focus {
	border-color: #0d6efd;
	outline: none;
	box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
}

.fbw-form-label {
	font-size: 0.875rem;
	color: #495057;
}

.fbw-form-header {
	margin: 0;
	color: #1a1a2e;
}

.fbw-radio-option {
	margin-bottom: 4px;
}

/* ── Config tabs (Step 3) ─────────────────────────────────────────────── */
.fbw-config-group {
	margin-bottom: 18px;
}

.fbw-config-group label.fbw-label {
	display: block;
	margin-bottom: 6px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.fbw-builder-container {
		grid-template-columns: 1fr;
	}
	.fbw-panel--elements {
		order: -1;
	}
	.fbw-elements-list {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.fbw-element-item {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.fbw-content { padding: 20px 16px 28px; }
	.fbw-header  { padding: 20px 16px; }
	.fbw-form-grid { grid-template-columns: 1fr; }
	.fbw-col-full  { grid-column: 1; }
	.fbw-nav-row   { flex-direction: column; }
	.fbw-nav-row .fbw-btn { width: 100%; justify-content: center; }
	.fbw-step-bar  { flex-direction: column; }
	.fbw-step      { border-right: none; border-bottom: 1px solid #e9ecef; }
}

/* Visitor email field dropdown — sufficient height */
#visitor_email_field.fbw-input {
min-height: 42px;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
}
/* ---------------------------------------------------------------------------
   Step progress
   
   Matches the Calendar, Gallery, D3 and Pricing Table wizards. The old markup
   was three hand-maintained copies of a set of <div>s, one per step template,
   with the current step shown by colour alone.
   --------------------------------------------------------------------------- */

/* Content hidden visually but available to assistive technology. */
.fbw-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fbw-progress {
    margin-bottom: 24px;
}

.fbw-progress-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}

.fbw-progress-step {
    flex: 1 1 200px;
    border-right: 1px solid #d1d5db;
}

.fbw-progress-step:last-child {
    border-right: 0;
}

.fbw-progress-step > a,
.fbw-progress-step > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f3f4f6;
    color: #4b5563;
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
}

.fbw-progress-step > a:hover {
    background: #e5e7eb;
    text-decoration: none;
}

.fbw-progress-step.is-current > a,
.fbw-progress-step.is-current > span {
    background: #1d4ed8;
    color: #ffffff;
}

.fbw-progress-step.is-done > a,
.fbw-progress-step.is-done > span {
    background: #dcfce7;
    color: #14532d;
}

.fbw-progress-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .16);
    font-weight: 700;
}

.fbw-progress-step.is-current .fbw-progress-number {
    background: rgba(255, 255, 255, .28);
}

.fbw-progress-step.is-done .fbw-progress-number {
    background: #15803d;
    color: #ffffff;
}

.fbw-progress-title {
    display: block;
    font-weight: 600;
}

.fbw-progress-sub {
    display: block;
    font-size: .82em;
    opacity: .85;
}

/* A visible focus indicator on the linkable steps. */
.fbw-progress-step > a:focus {
    outline: 3px solid #1d4ed8;
    outline-offset: -3px;
}