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

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

.cnvs-form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* ── Field Widths ──────────────────────────────────── */
.cnvs-form-field {
	position: relative;
	box-sizing: border-box;
}

/* Non-Elementor context (shortcode / standalone) */
.cnvs-field-width-100 { width: 100%; }
.cnvs-field-width-75  { width: calc(75% - 10px); }
.cnvs-field-width-66  { width: calc(66.666% - 10px); }
.cnvs-field-width-50  { width: calc(50% - 10px); }
.cnvs-field-width-33  { width: calc(33.333% - 10px); }
.cnvs-field-width-25  { width: calc(25% - 10px); }

/*
 * Elementor context — override widget-wrap's column direction so
 * form field widgets can flow side-by-side using field_width.
 * The width class is applied to the .elementor-widget wrapper via
 * add_render_attribute in FormField::render().
 */
.cnvs-form .elementor-widget-wrap {
	flex-direction: row !important;
	flex-wrap: wrap;
}
.cnvs-form .elementor-widget.cnvs-field-width-100 { width: 100%; }
.cnvs-form .elementor-widget.cnvs-field-width-75  { width: calc(75% - 10px); }
.cnvs-form .elementor-widget.cnvs-field-width-66  { width: calc(66.666% - 10px); }
.cnvs-form .elementor-widget.cnvs-field-width-50  { width: calc(50% - 10px); }
.cnvs-form .elementor-widget.cnvs-field-width-33  { width: calc(33.333% - 10px); }
.cnvs-form .elementor-widget.cnvs-field-width-25  { width: calc(25% - 10px); }

/* ── Labels ────────────────────────────────────────── */
.cnvs-field-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cnvs-contrast-900, #212529);
}

.cnvs-field-required {
	color: var(--cnvs-themecolor, #dc3545);
	font-weight: 700;
}

/* 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 ────────────────────────────────────────── */
.cnvs-field-input,
.cnvs-form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cnvs-form-field textarea,
.cnvs-form-field select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--cnvs-contrast-300, #dee2e6);
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cnvs-contrast-900, #212529);
	background-color: var(--cnvs-contrast-0, #fff);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

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

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

.cnvs-form-field textarea {
	resize: vertical;
	min-height: 100px;
}

.cnvs-form-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	padding-right: 36px;
}

/* ── 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%;
}
.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-field-width-75,
	.cnvs-field-width-66,
	.cnvs-field-width-50,
	.cnvs-field-width-33,
	.cnvs-field-width-25,
	.cnvs-form .elementor-widget.cnvs-field-width-75,
	.cnvs-form .elementor-widget.cnvs-field-width-66,
	.cnvs-form .elementor-widget.cnvs-field-width-50,
	.cnvs-form .elementor-widget.cnvs-field-width-33,
	.cnvs-form .elementor-widget.cnvs-field-width-25 {
		width: 100% !important;
	}

	.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; }
.cnvs-divider-label { font-size: 13px; font-weight: 600; color: var(--cnvs-contrast-500, #6c757d); white-space: nowrap; }
.cnvs-form-divider.cnvs-divider-label-wrap { gap: 0; }
.cnvs-form-divider .cnvs-divider-label ~ hr { /* only show hr after label */ }

/* ── Multi-Step Forms ──────────────────────────────── */
.cnvs-form-steps-wrap { width: 100%; }
.cnvs-form-step { display: none; flex-wrap: wrap; gap: 20px; }
.cnvs-form-step-active { display: flex; }

.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); }

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

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