/* Kel Smart Forms – front-end styles (RTL aware: logical properties). */
.kelsf-wrap {
	--kelsf-accent: #2563eb;
	--kelsf-text: #0f172a;
	--kelsf-muted: #64748b;
	--kelsf-border: #cbd5e1;
	--kelsf-bg: #fff;
	--kelsf-field-bg: #fff;
	--kelsf-radius: 8px;
	--kelsf-error: #dc2626;
	--kelsf-success: #16a34a;
	color: var(--kelsf-text);
	font-size: 16px;
	line-height: 1.5;
	max-width: 100%;
	margin: 0 0 1.5em;
}
.kelsf-wrap *, .kelsf-wrap *::before, .kelsf-wrap *::after { box-sizing: border-box; }
.kelsf-title { margin: 0 0 .4em; }
.kelsf-description { color: var(--kelsf-muted); margin-bottom: 1.2em; }
.kelsf-form { position: relative; }
.kelsf-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kelsf-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 18px; align-items: start; }
.kelsf-field { grid-column: span 12; margin-bottom: 1.15em; position: relative; min-width: 0; }
.kelsf-c-1 { grid-column: span 1; }
.kelsf-c-2 { grid-column: span 2; }
.kelsf-c-3 { grid-column: span 3; }
.kelsf-c-4 { grid-column: span 4; }
.kelsf-c-5 { grid-column: span 5; }
.kelsf-c-6 { grid-column: span 6; }
.kelsf-c-7 { grid-column: span 7; }
.kelsf-c-8 { grid-column: span 8; }
.kelsf-c-9 { grid-column: span 9; }
.kelsf-c-10 { grid-column: span 10; }
.kelsf-c-11 { grid-column: span 11; }
.kelsf-c-12 { grid-column: span 12; }
.kelsf-w-half { grid-column: span 6; } .kelsf-w-third { grid-column: span 4; } .kelsf-w-twothirds { grid-column: span 8; }
@media (max-width: 600px) { .kelsf-fields > .kelsf-field { grid-column: span 12; } }
.kelsf-label { font-size: var(--kelsf-label-size, .95em); }
.kelsf-richtext { line-height: 1.6; overflow-wrap: anywhere; border-radius: 6px; }
.kelsf-richtext[style*="background"] { padding: .7em 1em; }
.kelsf-richtext > :first-child { margin-top: 0; } .kelsf-richtext > :last-child { margin-bottom: 0; }
.kelsf-richtext ul, .kelsf-richtext ol { padding-inline-start: 1.4em; margin: .4em 0; }
.kelsf-spacer { width: 100%; }
.kelsf-type-spacer, .kelsf-type-richtext { margin-bottom: .8em; }
.kelsf-hidden { display: none; }
.kelsf-label { display: block; font-weight: 600; margin-bottom: .35em; }
.kelsf-req { color: var(--kelsf-error); }
.kelsf-desc { color: var(--kelsf-muted); font-size: .85em; margin-top: .35em; }
.kelsf-input,
.kelsf-wrap select.kelsf-input,
.kelsf-wrap textarea.kelsf-input {
	width: 100%; max-width: 100%;
	padding: .65em .8em;
	font: inherit; font-size: 1em; color: inherit;
	background: var(--kelsf-field-bg);
	border: 1px solid var(--kelsf-border);
	border-radius: var(--kelsf-radius);
	transition: border-color .15s, box-shadow .15s;
	min-height: 2.75em;
	box-shadow: none;
}
.kelsf-input:focus { outline: none; border-color: var(--kelsf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kelsf-accent) 22%, transparent); }
.kelsf-input[readonly] { background: #f8fafc; }
textarea.kelsf-input { resize: vertical; min-height: 6em; }
.kelsf-row { display: flex; gap: .8em; }
.kelsf-row > * { flex: 1; }
.kelsf-confirm { margin-top: .5em; }
.kelsf-counter { font-size: .8em; color: var(--kelsf-muted); text-align: end; margin-top: .2em; }

/* Choices */
.kelsf-choices { display: flex; flex-direction: column; gap: .45em; }
.kelsf-choices.kelsf-inline { flex-direction: row; flex-wrap: wrap; gap: .5em 1.4em; }
.kelsf-choice { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; font-weight: 400; }
.kelsf-choice input[type=checkbox], .kelsf-choice input[type=radio] { width: 1.15em; height: 1.15em; accent-color: var(--kelsf-accent); margin: 0; flex: 0 0 auto; }
.kelsf-other .kelsf-other-text { width: auto; min-height: 2.2em; padding: .3em .6em; }
.kelsf-consent { align-items: flex-start; }
.kelsf-consent input { margin-top: .25em !important; }

/* Rating */
.kelsf-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1em; }
.kelsf-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kelsf-rating label { font-size: 2em; line-height: 1; color: #d1d5db; cursor: pointer; transition: color .1s, transform .1s; }
.kelsf-rating label:hover, .kelsf-rating label:hover ~ label, .kelsf-rating input:checked ~ label { color: #f59e0b; }
.kelsf-rating label:hover { transform: scale(1.12); }
.kelsf-rating input:focus-visible + label { outline: 2px solid var(--kelsf-accent); border-radius: 4px; }

/* NPS */
.kelsf-nps { display: flex; flex-wrap: wrap; gap: 4px; }
.kelsf-nps input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kelsf-nps label { min-width: 2.4em; text-align: center; padding: .45em 0; border: 1px solid var(--kelsf-border); border-radius: 6px; cursor: pointer; font-weight: 600; flex: 1; }
.kelsf-nps input:checked + label { background: var(--kelsf-accent); border-color: var(--kelsf-accent); color: #fff; }
.kelsf-nps input:focus-visible + label { outline: 2px solid var(--kelsf-accent); }
.kelsf-nps-legend { display: flex; justify-content: space-between; color: var(--kelsf-muted); font-size: .8em; margin-top: .3em; }

/* Range */
.kelsf-range { display: flex; align-items: center; gap: .8em; }
.kelsf-range input { flex: 1; accent-color: var(--kelsf-accent); }
.kelsf-range output { min-width: 3em; font-weight: 700; text-align: center; background: color-mix(in srgb, var(--kelsf-accent) 12%, #fff); padding: .2em .5em; border-radius: 6px; }

/* Layout fields */
.kelsf-heading { margin: .6em 0 .2em; font-size: 1.3em; }
.kelsf-heading-desc { color: var(--kelsf-muted); margin: 0; }
.kelsf-divider { border: 0; border-top: 1px solid var(--kelsf-border); margin: .5em 0; }

/* Errors & messages */
.kelsf-error { color: var(--kelsf-error); font-size: .85em; margin-top: .3em; min-height: 0; }
.kelsf-error:empty { display: none; }
.kelsf-has-error .kelsf-input, .kelsf-has-error .kelsf-choices, .kelsf-box.kelsf-has-error, .kelsf-slot.kelsf-has-error .kelsf-input { border-color: var(--kelsf-error) !important; }
.kelsf-has-error .kelsf-input { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.kelsf-message { padding: .9em 1.1em; border-radius: var(--kelsf-radius); margin: 1em 0; }
.kelsf-message[hidden] { display: none; }
.kelsf-error-summary { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.kelsf-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.kelsf-success p:last-child { margin-bottom: 0; }
.kelsf-notice, .kelsf-closed { padding: 1em; border-radius: var(--kelsf-radius); background: #f8fafc; border: 1px solid var(--kelsf-border); }
.kelsf-draft-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: .6em .9em; border-radius: var(--kelsf-radius); margin-bottom: 1em; font-size: .9em; }
.kelsf-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* Submit */
.kelsf-submit-row { display: flex; flex-wrap: wrap; gap: .7em; align-items: center; margin-top: .5em; }
.kelsf-submit, .kelsf-btn {
	background: var(--kelsf-accent); color: #fff; border: 0; border-radius: var(--kelsf-radius);
	padding: .8em 1.8em; font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, transform .05s;
}
.kelsf-submit:hover, .kelsf-btn:hover { filter: brightness(1.08); }
.kelsf-submit:active { transform: translateY(1px); }
.kelsf-submit[disabled] { opacity: .7; cursor: progress; }
.kelsf-btn-secondary { background: transparent; color: var(--kelsf-accent); border: 1px solid var(--kelsf-accent); }
.kelsf-busy .kelsf-submit::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-inline-start: .6em; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: kelsf-spin .7s linear infinite; vertical-align: -0.1em; }
@keyframes kelsf-spin { to { transform: rotate(360deg); } }
.kelsf-credit { font-size: 11px; color: var(--kelsf-muted); margin-top: .6em; }
.kelsf-credit a { color: inherit; }

/* Captcha */
.kelsf-captcha { max-width: 260px; }

/* Label positions */
@media (min-width: 640px) {
	.kelsf-labels-side .kelsf-field:not(.kelsf-type-heading):not(.kelsf-type-html):not(.kelsf-type-divider):not(.kelsf-type-consent) { display: grid; grid-template-columns: 30% 1fr; column-gap: 1em; align-items: start; }
	.kelsf-labels-side .kelsf-field > :not(.kelsf-label) { grid-column: 2; }
	.kelsf-labels-side .kelsf-label { padding-top: .65em; }
}
.kelsf-labels-floating .kelsf-type-text, .kelsf-labels-floating .kelsf-type-email, .kelsf-labels-floating .kelsf-type-tel, .kelsf-labels-floating .kelsf-type-url, .kelsf-labels-floating .kelsf-type-number { position: relative; }
.kelsf-labels-floating .kelsf-type-text > .kelsf-label, .kelsf-labels-floating .kelsf-type-email > .kelsf-label, .kelsf-labels-floating .kelsf-type-tel > .kelsf-label, .kelsf-labels-floating .kelsf-type-url > .kelsf-label, .kelsf-labels-floating .kelsf-type-number > .kelsf-label {
	position: absolute; top: -.6em; inset-inline-start: .7em; background: var(--kelsf-field-bg); padding: 0 .35em; font-size: .78em; z-index: 1; color: var(--kelsf-muted);
}
.kelsf-labels-floating .kelsf-input { padding-top: .85em; }

/* Styles */
.kelsf-style-classic { --kelsf-radius: 2px; }
.kelsf-style-classic .kelsf-input { background: #fafafa; }
.kelsf-style-rounded { --kelsf-radius: 22px; }
.kelsf-style-rounded textarea.kelsf-input { border-radius: 14px; }
.kelsf-style-minimal .kelsf-input { border-width: 0 0 2px; border-radius: 0; padding-inline: 0; background: transparent; }
.kelsf-style-minimal .kelsf-input:focus { box-shadow: none; }
.kelsf-style-modern .kelsf-input { background: #f8fafc; border-color: #e2e8f0; }
.kelsf-style-modern .kelsf-input:focus { background: #fff; }
.kelsf-style-dark { --kelsf-text: #e2e8f0; --kelsf-muted: #94a3b8; --kelsf-border: #334155; --kelsf-field-bg: #1e293b; background: #0f172a; padding: 1.5em; border-radius: 14px; }
.kelsf-style-dark .kelsf-input { color: #e2e8f0; }
.kelsf-style-none .kelsf-input { all: revert; width: 100%; }

/* ------------------------------------------------------------------ */
/* Documents                                                            */
/* ------------------------------------------------------------------ */
.kelsf-document { margin: 0 0 1.5em; }
.kelsf-doc-sheet {
	background: #fff; color: #111; border: 1px solid #e5e7eb; box-shadow: 0 4px 24px rgba(15, 23, 42, .07);
	padding: clamp(18px, 5vw, 56px); border-radius: 4px; line-height: 1.7; font-size: 15px; overflow-wrap: anywhere;
}
.kelsf-doc-sheet p { margin: 0 0 .45em; min-height: 1em; }
.kelsf-doc-sheet p.kelsf-empty { min-height: .8em; margin: 0; }
.kelsf-doc-sheet h2, .kelsf-doc-sheet h3, .kelsf-doc-sheet h4 { margin: .6em 0 .4em; line-height: 1.3; }
.kelsf-doc-sheet .kelsf-li::before { content: "•"; margin-inline-end: .5em; }
.kelsf-doc-sheet .kelsf-tab { display: inline-block; width: 2.5em; }
.kelsf-doc-sheet img { max-width: 100%; height: auto; }
.kelsf-doc-sheet .kelsf-page-break { display: block; border-top: 1px dashed #d1d5db; margin: 1.2em 0; }
.kelsf-doc-sheet .kelsf-textbox { display: inline-block; border: 1px solid #e5e7eb; padding: .4em .6em; margin: .2em; }
.kelsf-doc-sheet .kelsf-tb-line { display: block; }
.kelsf-doc-table-wrap { overflow-x: auto; margin: .6em 0; }
.kelsf-doc-table { border-collapse: collapse; width: 100%; }
.kelsf-doc-table td { padding: 4px 6px; vertical-align: top; }
.kelsf-doc-table.kelsf-bordered td { border: 1px solid #9ca3af; }
.kelsf-doc-table td p { margin: 0; }

/* Inline slots inside Word documents */
.kelsf-slot { display: inline-block; position: relative; vertical-align: baseline; width: var(--kelsf-w, 18ch); max-width: 100%; margin: 0 .2em; }
.kelsf-slot .kelsf-input, .kelsf-cell-field .kelsf-input {
	min-height: 0; padding: .05em .3em; border: 0; border-bottom: 1.5px dashed color-mix(in srgb, var(--kelsf-accent) 60%, #94a3b8);
	border-radius: 0; background: color-mix(in srgb, var(--kelsf-accent) 6%, transparent); line-height: 1.5; font-size: 1em;
}
.kelsf-slot .kelsf-input:focus { box-shadow: none; border-bottom-style: solid; border-bottom-color: var(--kelsf-accent); background: color-mix(in srgb, var(--kelsf-accent) 10%, transparent); }
.kelsf-slot-check { width: auto; margin: 0 .15em; }
.kelsf-slot-block { display: block; width: 100%; margin: .3em 0; }
.kelsf-slot-block textarea.kelsf-input { min-height: 3.2em; border: 1px dashed color-mix(in srgb, var(--kelsf-accent) 60%, #94a3b8); border-radius: 4px; }
.kelsf-cell-field { margin: 0; }
.kelsf-cell-field .kelsf-slot { width: 100%; margin: 0; }
.kelsf-doc-check { width: 1.1em; height: 1.1em; accent-color: var(--kelsf-accent); vertical-align: middle; margin: 0 .2em; }
.kelsf-slot .kelsf-error { position: absolute; inset-inline-start: 0; top: 100%; white-space: nowrap; background: #fff; z-index: 3; font-size: .75em; padding: 0 .3em; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.kelsf-slot .kelsf-error:empty { display: none; }

/* Page-image documents (PDF / scans) */
.kelsf-doc-pages { display: flex; flex-direction: column; gap: 18px; }
.kelsf-page { position: relative; width: 100%; background: #fff; box-shadow: 0 4px 24px rgba(15, 23, 42, .1); border: 1px solid #e5e7eb; container-type: inline-size; }
.kelsf-page-img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.kelsf-box { position: absolute; display: flex; }
.kelsf-box > .kelsf-input, .kelsf-box > textarea, .kelsf-box > select {
	width: 100%; height: 100%; min-height: 0; padding: 0 .25em; margin: 0;
	font-size: calc(var(--kelsf-fs, 14) * 0.1cqw); line-height: 1.15;
	border: 1px solid transparent; border-radius: 2px; background: rgba(37, 99, 235, .07);
	color: var(--kelsf-color, #0b1f66); font-family: inherit; text-align: var(--kelsf-align, start);
}
.kelsf-box.is-bold > .kelsf-input, .kelsf-box.is-bold .kelsf-doctext, .kelsf-box.is-bold .kelsf-doc-value { font-weight: 700; }
.kelsf-box.is-italic > .kelsf-input, .kelsf-box.is-italic .kelsf-doctext, .kelsf-box.is-italic .kelsf-doc-value { font-style: italic; }
.kelsf-box.has-border > .kelsf-input { border-color: #64748b; }
.kelsf-box[style*="--kelsf-bg"] > .kelsf-input { background: var(--kelsf-bg); }
.kelsf-box-doctext { pointer-events: none; }
.kelsf-doctext { width: 100%; height: 100%; overflow: hidden; font-size: calc(var(--kelsf-fs, 14) * 0.1cqw); line-height: 1.25; color: var(--kelsf-color, #111); text-align: var(--kelsf-align, start); background: var(--kelsf-bg, transparent); white-space: pre-wrap; }
.kelsf-doctext p { margin: 0; }
.kelsf-box > textarea { resize: none; padding-top: .15em; }
.kelsf-box > .kelsf-input:hover { background: rgba(37, 99, 235, .12); }
.kelsf-box > .kelsf-input:focus { border-color: var(--kelsf-accent); background: rgba(255, 255, 255, .85); box-shadow: none; outline: none; }
.kelsf-box-checkbox { align-items: center; justify-content: center; }
.kelsf-box-checkbox .kelsf-doc-check { width: 90%; height: 90%; max-width: 100%; max-height: 100%; margin: 0; }
.kelsf-box .kelsf-error-tip { position: absolute; top: 100%; inset-inline-start: 0; background: var(--kelsf-error); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; z-index: 5; margin: 0; }
.kelsf-box.kelsf-has-error > .kelsf-input { border-color: var(--kelsf-error); background: rgba(220, 38, 38, .08); }
.kelsf-box.kelsf-required > .kelsf-input { background: rgba(245, 158, 11, .09); }

/* Filled values (view / print) */
.kelsf-doc-value { display: inline-block; min-width: 4ch; border-bottom: 1px solid #94a3b8; padding: 0 .25em; color: #0b1f66; font-weight: 500; }
.kelsf-slot > .kelsf-doc-value { display: block; width: 100%; }
.kelsf-slot-check > .kelsf-doc-value, .kelsf-doc-check-value { border-bottom: 0; min-width: 0; width: auto; display: inline-block; }
.kelsf-doc-pages .kelsf-doc-value { display: flex; align-items: center; width: 100%; height: 100%; border: 0; font-size: calc(var(--kelsf-fs, 14) * 0.1cqw); line-height: 1.15; overflow: hidden; white-space: pre-wrap; padding: 0 .2em; }
.kelsf-doc-pages .kelsf-box-textarea .kelsf-doc-value { align-items: flex-start; }
.kelsf-doc-pages .kelsf-doc-check-value { justify-content: center; font-size: calc(var(--kelsf-fs, 14) * 0.13cqw); font-weight: 700; }
.kelsf-doc-value img { max-height: 100%; max-width: 100%; }

@media print {
	.kelsf-doc-sheet, .kelsf-page { box-shadow: none; border: 0; }
	.kelsf-page { break-after: page; page-break-after: always; }
	.kelsf-page:last-child { break-after: auto; page-break-after: auto; }
	.kelsf-submit-row, .kelsf-error, .kelsf-draft-note, .kelsf-message { display: none !important; }
	.kelsf-box > .kelsf-input { background: transparent !important; border-color: transparent !important; }
}