/**
 * Canvas Forms: Frontend Styles
 *
 * @package Canvas
 * @since 1.0.0
 */

/* ── Form Wrapper ──────────────────────────────────── */
.cnvs-form-wrap {
	position: relative;
}

/*
 * Form layout uses the Bootstrap grid (.row > .col-*), exactly like the rest
 * of the theme: wrap form-field blocks in canvas-core/row + canvas-core/column.
 * No bespoke flex/width system here (DRY: one grid for the whole theme).
 */
.cnvs-form-field {
	position: relative;
	box-sizing: border-box;
}

/* ── Labels ────────────────────────────────────────── */
.cnvs-field-label {
	display: block;
	/* Reuse the theme's label tokens (--cnvs-input-label-mb / --cnvs-form-label-font-weight). */
	margin-bottom: var(--cnvs-input-label-mb, 6px);
	font-weight: var(--cnvs-form-label-font-weight, 600);
	/*
	 * No hardcoded size: the theme's own `label` rule sets margin and weight and
	 * deliberately leaves font-size to inherit, so a literal 14px here made every
	 * form label smaller than every other label in the design. The token is still
	 * honoured for designs that want a size of their own; without one, follow the
	 * theme instead of fighting it.
	 */
	font-size: var(--cnvs-form-label-font-size, inherit);
	/* Same reasoning as the size: a literal 1.4 made form labels sit tighter
	   than every other label in the design, which uses the inherited 1.5. */
	line-height: var(--cnvs-form-label-line-height, inherit);
	color: var(--cnvs-contrast-900, #212529);
}

.cnvs-field-required {
	color: var(--cnvs-themecolor, #dc3545);
	font-weight: 700;
	/* The marker is decorative and must not resize the label it sits in:
	   `small` carries an absolute site font size, so on any label smaller than
	   it the marker grew the label's line box and pushed the whole field down.
	   Same reasoning as the label's own size and line height above. */
	font-size: inherit;
	line-height: inherit;
}

/* Label positions */
.cnvs-label-inline {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cnvs-label-inline > .cnvs-field-label {
	flex: 0 0 auto;
	margin-bottom: 0;
	white-space: nowrap;
}

.cnvs-label-inline > .cnvs-field-input {
	flex: 1 1 auto;
}

.cnvs-label-below > .cnvs-field-label.cnvs-label-below {
	margin-top: 6px;
	margin-bottom: 0;
}

/* ── Inputs ────────────────────────────────────────── */
/*
 * Base input styling (size, border, radius, typography, colours, and the
 * select dropdown arrow) is owned by Bootstrap's .form-control / .form-select
 * (style.css). Every normal Canvas field carries one of those classes (via the
 * component's $input_base / $select_base), so it is intentionally NOT
 * re-declared here. The previous copy duplicated .form-control AND, through its
 * `input:not([type])…` chain, computed to specificity (0,4,1), out-specifying
 * both .form-control and any custom field class, so bespoke form styling (e.g. a
 * demo's own input class, or the Bare Input option) could never override it.
 * The rules below add only what .form-control/.form-select lack, at single-class
 * specificity so a custom class always wins.
 */

.cnvs-field-input:focus {
	border-color: var(--cnvs-input-focus-border-color, var(--cnvs-themecolor, #0d6efd));
	box-shadow: var(--cnvs-input-focus-box-shadow, 0 0 0 3px rgba(13, 110, 253, 0.15));
	outline: none;
}

.cnvs-field-input::placeholder {
	color: var(--cnvs-contrast-400, #adb5bd);
}

textarea.cnvs-field-input {
	resize: vertical;
}

/* ── Radio & Checkbox Groups ───────────────────────── */
.cnvs-field-radio-group,
.cnvs-field-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cnvs-radio-label,
.cnvs-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	cursor: pointer;
}

.cnvs-radio-label input,
.cnvs-checkbox-label input {
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--cnvs-themecolor, #0d6efd);
}

/* ── Consent Field ─────────────────────────────────── */
.cnvs-field-consent {
	display: flex;
	align-items: flex-start;
}

.cnvs-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.cnvs-consent-label input {
	margin-top: 3px;
	flex-shrink: 0;
}

.cnvs-consent-text a {
	color: var(--cnvs-themecolor, #0d6efd);
	text-decoration: underline;
}

/* ── Notice Field ──────────────────────────────────── */
.cnvs-form-notice {
	position: relative;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.cnvs-notice-info {
	background-color: #d1ecf1;
	border: 1px solid #bee5eb;
	color: #0c5460;
}

.cnvs-notice-success {
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

.cnvs-notice-warning {
	background-color: #fff3cd;
	border: 1px solid #ffeeba;
	color: #856404;
}

.cnvs-notice-error {
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

.cnvs-notice-dismiss {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
	padding: 0;
}

.cnvs-notice-dismiss:hover {
	opacity: 1;
}

/* ── Help Text ─────────────────────────────────────── */
.cnvs-field-help {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--cnvs-contrast-500, #6c757d);
}

/* ── Error State ───────────────────────────────────── */
.cnvs-field-error {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: #dc3545;
}

.cnvs-form-field.has-error input:not([type="checkbox"]):not([type="radio"]),
.cnvs-form-field.has-error textarea,
.cnvs-form-field.has-error select {
	border-color: #dc3545;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* ── Submit Button ─────────────────────────────────── */
.cnvs-form-submit {
	width: 100%;
}

/* A form laid out as a row sizes the submit to its button, so the fields keep
   the remaining width. Stacked forms keep the full-width button above. */
.cnvs-form.d-flex > .cnvs-form-submit {
	width: auto;
}
.cnvs-form-submit .button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ── Result Messages ───────────────────────────────── */
.cnvs-form-result {
	width: 100%;
	margin-top: 8px;
	padding: 14px 18px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
}

.cnvs-alert-success {
	background-color: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

.cnvs-alert-danger {
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 767px) {
	.cnvs-label-inline {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Dark Section Support ──────────────────────────── */
.dark .cnvs-field-label,
.section-dark .cnvs-field-label {
	color: var(--cnvs-contrast-900, #f8f9fa);
}

.dark .cnvs-form-field input,
.dark .cnvs-form-field textarea,
.dark .cnvs-form-field select,
.section-dark .cnvs-form-field input,
.section-dark .cnvs-form-field textarea,
.section-dark .cnvs-form-field select {
	background-color: var(--cnvs-contrast-100, #343a40);
	border-color: var(--cnvs-contrast-300, #495057);
	color: var(--cnvs-contrast-900, #f8f9fa);
}

/* ── Access Denied ─────────────────────────────────── */
.cnvs-form-access-denied {
	padding: 20px;
	text-align: center;
	color: var(--cnvs-contrast-600, #6c757d);
	font-size: 15px;
}

/* ── File Upload ───────────────────────────────────── */
.cnvs-file-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	border: 2px dashed var(--cnvs-contrast-300, #dee2e6);
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.2s, background 0.2s;
}
.cnvs-file-dropzone:hover,
.cnvs-dropzone-active {
	border-color: var(--cnvs-themecolor, #0d6efd);
	background: rgba(13, 110, 253, 0.03);
}
.cnvs-dropzone-icon { font-size: 32px; color: var(--cnvs-contrast-400, #adb5bd); margin-bottom: 8px; }
.cnvs-dropzone-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cnvs-dropzone-info { font-size: 12px; color: var(--cnvs-contrast-500, #6c757d); }
.cnvs-file-dragdrop .cnvs-field-file-input { position: absolute; left: -9999px; }
.cnvs-file-list { margin-top: 8px; }
.cnvs-file-item { padding: 6px 10px; background: var(--cnvs-contrast-100, #f8f9fa); border-radius: 4px; font-size: 13px; margin-bottom: 4px; }

/* ── Range Slider ──────────────────────────────────── */
.cnvs-field-range-wrap { display: flex; align-items: center; gap: 12px; }
.cnvs-field-range { flex: 1; accent-color: var(--cnvs-themecolor, #0d6efd); height: 6px; }
.cnvs-range-value { min-width: 40px; text-align: center; font-weight: 600; font-size: 15px; color: var(--cnvs-contrast-800, #343a40); }

/* ── Rating Stars ──────────────────────────────────── */
.cnvs-field-rating { display: inline-flex; gap: 4px; }
.cnvs-star { cursor: pointer; font-size: 24px; color: var(--cnvs-contrast-300, #dee2e6); transition: color 0.15s, transform 0.15s; }
.cnvs-star:hover, .cnvs-star-filled { color: #f5a623; }
.cnvs-star:hover { transform: scale(1.15); }
.cnvs-star:focus-visible { outline: 2px solid var(--cnvs-themecolor, #0d6efd); outline-offset: 2px; border-radius: 2px; }

/* ── Image Select ──────────────────────────────────── */
.cnvs-field-image-select { display: grid; gap: 12px; }
.cnvs-image-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cnvs-image-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cnvs-image-cols-4 { grid-template-columns: repeat(4, 1fr); }
.cnvs-image-cols-5 { grid-template-columns: repeat(5, 1fr); }
.cnvs-image-option { position: relative; cursor: pointer; border: 2px solid var(--cnvs-contrast-200, #e9ecef); border-radius: 8px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; text-align: center; padding: 8px; }
.cnvs-image-option:hover { border-color: var(--cnvs-contrast-400, #ced4da); }
.cnvs-image-selected { border-color: var(--cnvs-themecolor, #0d6efd); box-shadow: 0 0 0 3px rgba(13,110,253,0.15); }
.cnvs-image-input { position: absolute; left: -9999px; }
.cnvs-image-thumb { width: 100%; height: auto; display: block; border-radius: 4px; }
.cnvs-image-label { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; }

/* ── Password Field ────────────────────────────────── */
.cnvs-password-input-wrap { position: relative; }
.cnvs-password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--cnvs-contrast-500, #6c757d); font-size: 18px; padding: 4px; }
.cnvs-password-toggle:hover { color: var(--cnvs-contrast-800, #343a40); }
.cnvs-password-strength { height: 4px; border-radius: 2px; margin-top: 6px; background: var(--cnvs-contrast-200, #e9ecef); overflow: hidden; }
.cnvs-password-strength::after { content: ''; display: block; height: 100%; width: 0%; transition: width 0.3s; }
.cnvs-password-strength.weak::after { width: 33%; background: #dc3545; }
.cnvs-password-strength.medium::after { width: 66%; background: #ffc107; }
.cnvs-password-strength.strong::after { width: 100%; background: #28a745; }

/* ── Divider ───────────────────────────────────────── */
.cnvs-form-divider { width: 100%; display: flex; align-items: center; gap: 12px; }
.cnvs-form-divider hr { flex: 1; border: none; border-top: 1px solid var(--cnvs-contrast-300, #dee2e6); margin: 0; }
.cnvs-divider-dashed hr { border-top-style: dashed; }
.cnvs-divider-dotted hr { border-top-style: dotted; }
/* A captioned divider is `<span class="cnvs-divider-label">…</span><hr>`: the
   caption keeps its intrinsic width (nowrap, and it cannot shrink past its own
   min-content), and the flex:1 rule above eats the rest of the row. The style
   variants are scoped to the rule, so they apply captioned or not: which is
   why the caption is emitted BESIDE the rule and never instead of it. */
.cnvs-divider-label { font-size: 13px; font-weight: 600; color: var(--cnvs-contrast-500, #6c757d); white-space: nowrap; }

/* ── Multi-Step Forms ──────────────────────────────── */
.cnvs-form-steps-wrap { width: 100%; }
/*
 * A step container is created at runtime around the fields between two step
 * markers, so it sits BETWEEN the <form> and markup the author wrote for a
 * plain form. It therefore has to be a transparent block container: whatever
 * layout the author's markup produces inside a normal form must produce the
 * same result inside a step.
 *
 * It must NOT be a flex container: that makes a `.row` group a flex item, which
 * shrink-wraps to max-content, and any gap pushes two `col-md-6` children past
 * 100% so they wrap onto separate lines.
 *
 * `flow-root` gives block layout plus a block formatting context, so the last
 * field's `form-group` margin and any floats stay inside the step instead of
 * collapsing into the navigation row. Vertical rhythm is owned by
 * `form .form-group { margin-bottom: var(--cnvs-form-group-margin) }` and is
 * not re-declared here. The engine toggles only the `cnvs-form-step-active`
 * class, never the display value.
 */
/* A file input keeps its INTRINSIC width (the browser sizes it to the button
   plus the filename text) so it overflows a narrow column. `.form-control`
   sizing never reaches it because the control is not styled as one. */
.cnvs-form input[type="file"] {
	max-width: 100%;
	box-sizing: border-box;
}

.cnvs-form-step { display: none; }
.cnvs-form-step-active { display: flow-root; }

.cnvs-form-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; width: 100%; }
.cnvs-progress-step { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid var(--cnvs-contrast-300, #dee2e6); border-radius: 30px; background: var(--cnvs-contrast-0, #fff); cursor: default; font-size: 14px; transition: all 0.2s; }
.cnvs-progress-step.cnvs-progress-completed { border-color: var(--cnvs-themecolor, #0d6efd); background: rgba(13,110,253,0.05); cursor: pointer; }
.cnvs-progress-step.cnvs-progress-active { border-color: var(--cnvs-themecolor, #0d6efd); background: var(--cnvs-themecolor, #0d6efd); color: #fff; }
.cnvs-progress-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cnvs-contrast-200, #e9ecef); font-size: 12px; font-weight: 700; }
.cnvs-progress-active .cnvs-progress-number { background: rgba(255,255,255,0.2); color: #fff; }
.cnvs-progress-completed .cnvs-progress-number { background: var(--cnvs-themecolor, #0d6efd); color: #fff; }
.cnvs-progress-title { font-weight: 500; }

.cnvs-form-step-nav { display: flex; gap: 12px; width: 100%; }
.cnvs-btn-prev { background: var(--cnvs-contrast-200, #e9ecef); color: var(--cnvs-contrast-800, #343a40); }
.cnvs-btn-prev:hover { background: var(--cnvs-contrast-300, #dee2e6); filter: none; }

/* ── Conditional Logic ─────────────────────────────── */
.cnvs-field-hidden { display: none !important; }

/* ── Step Break (editor placeholder) ───────────────── */
.cnvs-form-step-break { width: 100%; }

/* ── Datepicker Field ─────────────────────────────────── */
.cnvs-form-field .component-datepicker { cursor: pointer; }

/* ── Select Picker ────────────────────────────────────── */
.cnvs-form-field .bootstrap-select { width: 100% !important; }
.cnvs-form-field .bootstrap-select .dropdown-toggle { border: 1px solid var(--cnvs-contrast-300, #dee2e6); border-radius: 4px; }
.cnvs-form-field .bootstrap-select .dropdown-toggle:focus { border-color: var(--cnvs-themecolor, #0d6efd); box-shadow: 0 0 0 3px rgba(13,110,253,0.15); }

/* ── Switch / Toggle ──────────────────────────────────── */
.cnvs-field-switch { padding: 4px 0; }
.cnvs-field-switch .bootstrap-switch { border-radius: 4px; }

/* ── WYSIWYG ──────────────────────────────────────────── */
.cnvs-field-wysiwyg { width: 100%; }
.cnvs-field-wysiwyg .mce-tinymce { border: 1px solid var(--cnvs-contrast-300, #dee2e6) !important; border-radius: 4px; overflow: hidden; }
.cnvs-field-wysiwyg .mce-tinymce:focus-within { border-color: var(--cnvs-themecolor, #0d6efd) !important; box-shadow: 0 0 0 3px rgba(13,110,253,0.15); }

/* ── OTP / One-Time Code ──────────────────────────────── */
/* Bordered-boxes variant: thicker neutral borders that darken on focus.
   Base .form-otp needs no extra CSS (flex utilities + form-control). */
.form-otp-border .form-control {
	--cnvs-input-btn-border-width: 3px;
	--cnvs-input-btn-border-color: var(--bs-gray-300);
	--cnvs-input-focus-border-color: var(--bs-gray-700);
}

/* ── Rating (star-rating.js) ──────────────────────────── */
.cnvs-field-rating-wrap { display: inline-block; }

/* ── Range (ionRangeSlider) ───────────────────────────── */
.cnvs-field-range-wrap .irs { width: 100%; }