/**
 * Kadınoloji Form UI Library - Form Component Styles
 * Bu dosyada yalnızca form bileşen stilleri bulunur.
 * Renkler Kadınoloji root değişkenlerinden gelir.
 */

.kdn-form-list {
	display: grid;
	gap: 22px;
}

.kdn-inline-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.kdn-field {
	display: grid;
	gap: 9px;
	min-width: 0;
}

.kdn-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--text);
	font-size: 14px;
	font-weight: 520;
	line-height: 1.25;
}

.kdn-label i {
	color: var(--primary);
	font-size: 16px;
}

.kdn-hint {
	margin-top: -1px;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
}

.kdn-field > input:not([type]),
.kdn-field > input[type="date"],
.kdn-field > input[type="datetime-local"],
.kdn-field > input[type="email"],
.kdn-field > input[type="month"],
.kdn-field > input[type="number"],
.kdn-field > input[type="password"],
.kdn-field > input[type="search"],
.kdn-field > input[type="tel"],
.kdn-field > input[type="text"],
.kdn-field > input[type="time"],
.kdn-field > input[type="url"],
.kdn-field > input[type="week"],
.kdn-field > select,
.kdn-field > textarea,
input:not([type]),
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea,
.kdn-input-group > input:not([type]),
.kdn-input-group > input[type="date"],
.kdn-input-group > input[type="datetime-local"],
.kdn-input-group > input[type="email"],
.kdn-input-group > input[type="month"],
.kdn-input-group > input[type="number"],
.kdn-input-group > input[type="password"],
.kdn-input-group > input[type="search"],
.kdn-input-group > input[type="tel"],
.kdn-input-group > input[type="text"],
.kdn-input-group > input[type="time"],
.kdn-input-group > input[type="url"],
.kdn-input-group > input[type="week"],
.kdn-input,
.kdn-textarea,
.kdn-input-icon input,
.kdn-color-input-picker__code {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--text);
	font-size: 15px;
	font-weight: 400;
	outline: 0;
	padding: 12px 14px;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.kdn-field > textarea,
.kdn-textarea {
	min-height: 124px;
	resize: vertical;
}

.kdn-field > input:not([type])::placeholder,
.kdn-field > input[type="date"]::placeholder,
.kdn-field > input[type="datetime-local"]::placeholder,
.kdn-field > input[type="email"]::placeholder,
.kdn-field > input[type="month"]::placeholder,
.kdn-field > input[type="number"]::placeholder,
.kdn-field > input[type="password"]::placeholder,
.kdn-field > input[type="search"]::placeholder,
.kdn-field > input[type="tel"]::placeholder,
.kdn-field > input[type="text"]::placeholder,
.kdn-field > input[type="time"]::placeholder,
.kdn-field > input[type="url"]::placeholder,
.kdn-field > input[type="week"]::placeholder,
.kdn-field > textarea::placeholder,
input:not([type])::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="email"]::placeholder,
input[type="month"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="time"]::placeholder,
input[type="url"]::placeholder,
input[type="week"]::placeholder,
textarea::placeholder,
.kdn-input-group > input:not([type])::placeholder,
.kdn-input-group > input[type="date"]::placeholder,
.kdn-input-group > input[type="datetime-local"]::placeholder,
.kdn-input-group > input[type="email"]::placeholder,
.kdn-input-group > input[type="month"]::placeholder,
.kdn-input-group > input[type="number"]::placeholder,
.kdn-input-group > input[type="password"]::placeholder,
.kdn-input-group > input[type="search"]::placeholder,
.kdn-input-group > input[type="tel"]::placeholder,
.kdn-input-group > input[type="text"]::placeholder,
.kdn-input-group > input[type="time"]::placeholder,
.kdn-input-group > input[type="url"]::placeholder,
.kdn-input-group > input[type="week"]::placeholder,
.kdn-input::placeholder,
.kdn-textarea::placeholder,
.kdn-input-icon input::placeholder {
	color: var(--muted);
	font-weight: 400;
	opacity: 0.72;
}

.kdn-field > input:not([type]):hover,
.kdn-field > input[type="date"]:hover,
.kdn-field > input[type="datetime-local"]:hover,
.kdn-field > input[type="email"]:hover,
.kdn-field > input[type="month"]:hover,
.kdn-field > input[type="number"]:hover,
.kdn-field > input[type="password"]:hover,
.kdn-field > input[type="search"]:hover,
.kdn-field > input[type="tel"]:hover,
.kdn-field > input[type="text"]:hover,
.kdn-field > input[type="time"]:hover,
.kdn-field > input[type="url"]:hover,
.kdn-field > input[type="week"]:hover,
.kdn-field > select:hover,
.kdn-field > textarea:hover,
input:not([type]):hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
select:hover,
textarea:hover,
.kdn-input-group > input:not([type]):hover,
.kdn-input-group > input[type="date"]:hover,
.kdn-input-group > input[type="datetime-local"]:hover,
.kdn-input-group > input[type="email"]:hover,
.kdn-input-group > input[type="month"]:hover,
.kdn-input-group > input[type="number"]:hover,
.kdn-input-group > input[type="password"]:hover,
.kdn-input-group > input[type="search"]:hover,
.kdn-input-group > input[type="tel"]:hover,
.kdn-input-group > input[type="text"]:hover,
.kdn-input-group > input[type="time"]:hover,
.kdn-input-group > input[type="url"]:hover,
.kdn-input-group > input[type="week"]:hover,
.kdn-input:hover,
.kdn-textarea:hover,
.kdn-input-icon:hover,
.kdn-color-input-picker:hover {
	border-color: var(--site-border);
}

.kdn-field > input:not([type]):focus,
.kdn-field > input[type="date"]:focus,
.kdn-field > input[type="datetime-local"]:focus,
.kdn-field > input[type="email"]:focus,
.kdn-field > input[type="month"]:focus,
.kdn-field > input[type="number"]:focus,
.kdn-field > input[type="password"]:focus,
.kdn-field > input[type="search"]:focus,
.kdn-field > input[type="tel"]:focus,
.kdn-field > input[type="text"]:focus,
.kdn-field > input[type="time"]:focus,
.kdn-field > input[type="url"]:focus,
.kdn-field > input[type="week"]:focus,
.kdn-field > select:focus,
.kdn-field > textarea:focus,
input:not([type]):focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus,
.kdn-input-group > input:not([type]):focus,
.kdn-input-group > input[type="date"]:focus,
.kdn-input-group > input[type="datetime-local"]:focus,
.kdn-input-group > input[type="email"]:focus,
.kdn-input-group > input[type="month"]:focus,
.kdn-input-group > input[type="number"]:focus,
.kdn-input-group > input[type="password"]:focus,
.kdn-input-group > input[type="search"]:focus,
.kdn-input-group > input[type="tel"]:focus,
.kdn-input-group > input[type="text"]:focus,
.kdn-input-group > input[type="time"]:focus,
.kdn-input-group > input[type="url"]:focus,
.kdn-input-group > input[type="week"]:focus,
.kdn-input:focus,
.kdn-textarea:focus,
.kdn-input-icon:focus-within,
	.kdn-color-input-picker:focus-within {
		border-color: var(--primary);
		box-shadow: 0 0 0 3px var(--primary-soft);
	}

	input:disabled,
	select:disabled,
	textarea:disabled,
	button:disabled,
	[aria-disabled="true"],
	.kdn-select__button:disabled {
		cursor: not-allowed;
	}

	input:disabled,
	select:disabled,
	textarea:disabled,
	.kdn-select__button:disabled {
		border-color: color-mix(in srgb, var(--border) 72%, transparent);
		background: color-mix(in srgb, var(--bg) 78%, var(--card));
		color: var(--muted);
		box-shadow: none;
		opacity: 0.72;
	}

	input:disabled:hover,
	select:disabled:hover,
	textarea:disabled:hover,
	input:disabled:focus,
	select:disabled:focus,
	textarea:disabled:focus,
	.kdn-select__button:disabled:hover,
	.kdn-select__button:disabled:focus {
		border-color: color-mix(in srgb, var(--border) 72%, transparent);
		box-shadow: none;
	}

	.kdn-field:has(:disabled) .kdn-label,
	.kdn-state-box:has(:disabled) strong {
		color: var(--muted);
	}

.kdn-field > input[type="number"],
input[type="number"],
.kdn-input-group > input[type="number"],
.kdn-input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.kdn-field > input[type="number"]::-webkit-outer-spin-button,
.kdn-field > input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
.kdn-input-group > input[type="number"]::-webkit-outer-spin-button,
.kdn-input-group > input[type="number"]::-webkit-inner-spin-button,
.kdn-input[type="number"]::-webkit-outer-spin-button,
.kdn-input[type="number"]::-webkit-inner-spin-button,
.kdn-stepper input[type="number"]::-webkit-outer-spin-button,
.kdn-stepper input[type="number"]::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.kdn-message {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: -1px;
	font-size: 12.5px;
	font-weight: 400;
}

.kdn-field--success {
	--kdn-form-state-color: #16a34a;
	--kdn-form-state-bg: rgba(22, 163, 74, 0.06);
	--kdn-form-state-ring: rgba(22, 163, 74, 0.14);
}

.kdn-field--error {
	--kdn-form-state-color: #dc2626;
	--kdn-form-state-bg: rgba(220, 38, 38, 0.06);
	--kdn-form-state-ring: rgba(220, 38, 38, 0.14);
}

.kdn-field--success .kdn-input,
.kdn-field--success .kdn-textarea,
.kdn-field--success input:not([type]),
.kdn-field--success input[type="date"],
.kdn-field--success input[type="datetime-local"],
.kdn-field--success input[type="email"],
.kdn-field--success input[type="month"],
.kdn-field--success input[type="number"],
.kdn-field--success input[type="password"],
.kdn-field--success input[type="search"],
.kdn-field--success input[type="tel"],
.kdn-field--success input[type="text"],
.kdn-field--success input[type="time"],
.kdn-field--success input[type="url"],
.kdn-field--success input[type="week"],
.kdn-field--success textarea,
.kdn-field--error .kdn-input,
.kdn-field--error .kdn-textarea,
.kdn-field--error input:not([type]),
.kdn-field--error input[type="date"],
.kdn-field--error input[type="datetime-local"],
.kdn-field--error input[type="email"],
.kdn-field--error input[type="month"],
.kdn-field--error input[type="number"],
.kdn-field--error input[type="password"],
.kdn-field--error input[type="search"],
.kdn-field--error input[type="tel"],
.kdn-field--error input[type="text"],
.kdn-field--error input[type="time"],
.kdn-field--error input[type="url"],
.kdn-field--error input[type="week"],
.kdn-field--error textarea {
	border-color: var(--kdn-form-state-color);
	background: var(--kdn-form-state-bg);
}

.kdn-field--success .kdn-input:focus,
.kdn-field--success .kdn-textarea:focus,
.kdn-field--success input:not([type]):focus,
.kdn-field--success input[type="date"]:focus,
.kdn-field--success input[type="datetime-local"]:focus,
.kdn-field--success input[type="email"]:focus,
.kdn-field--success input[type="month"]:focus,
.kdn-field--success input[type="number"]:focus,
.kdn-field--success input[type="password"]:focus,
.kdn-field--success input[type="search"]:focus,
.kdn-field--success input[type="tel"]:focus,
.kdn-field--success input[type="text"]:focus,
.kdn-field--success input[type="time"]:focus,
.kdn-field--success input[type="url"]:focus,
.kdn-field--success input[type="week"]:focus,
.kdn-field--success textarea:focus,
.kdn-field--error .kdn-input:focus,
.kdn-field--error .kdn-textarea:focus,
.kdn-field--error input:not([type]):focus,
.kdn-field--error input[type="date"]:focus,
.kdn-field--error input[type="datetime-local"]:focus,
.kdn-field--error input[type="email"]:focus,
.kdn-field--error input[type="month"]:focus,
.kdn-field--error input[type="number"]:focus,
.kdn-field--error input[type="password"]:focus,
.kdn-field--error input[type="search"]:focus,
.kdn-field--error input[type="tel"]:focus,
.kdn-field--error input[type="text"]:focus,
.kdn-field--error input[type="time"]:focus,
.kdn-field--error input[type="url"]:focus,
.kdn-field--error input[type="week"]:focus,
.kdn-field--error textarea:focus {
	border-color: var(--kdn-form-state-color);
	box-shadow: 0 0 0 3px var(--kdn-form-state-ring);
}

.kdn-field--success .kdn-message,
.kdn-field--error .kdn-message {
	color: var(--kdn-form-state-color);
}

/* Icon input and input groups */
.kdn-input-stack {
	display: grid;
	gap: 10px;
}

.kdn-input-icon {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	min-height: 48px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kdn-input-icon--right {
	grid-template-columns: minmax(0, 1fr) auto;
}

.kdn-input-icon i {
	display: grid;
	place-items: center;
	width: 42px;
	color: var(--primary);
	font-size: 15px;
}

.kdn-input-icon input {
	min-height: 46px;
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0 14px 0 0;
}

.kdn-input-icon--right input {
	padding: 0 0 0 14px;
}

.kdn-input-group {
	display: grid;
	gap: 10px;
}

.kdn-input-group--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kdn-input-group--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Buttons */
.kdn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 520;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.kdn-btn:hover,
.kdn-btn:focus-visible {
	transform: translateY(-1px);
}

.kdn-btn--primary {
	background: var(--primary);
	color: var(--white);
	box-shadow: var(--shadow-sm);
}

.kdn-btn--primary:hover,
.kdn-btn--primary:focus-visible {
	background: color-mix(in srgb, var(--primary) 88%, #111827);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 22%, transparent);
}

.kdn-btn--ghost {
	background: transparent;
	color: var(--muted);
	box-shadow: inset 0 0 0 1px var(--border);
}

.kdn-btn--ghost:hover,
.kdn-btn--ghost:focus-visible {
	background: var(--primary-soft);
	color: var(--primary);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, var(--border));
}

.kdn-btn:active {
	transform: translateY(0);
}

.kdn-btn:disabled,
.kdn-btn[aria-disabled="true"] {
	background: color-mix(in srgb, var(--bg) 86%, var(--card));
	color: var(--muted);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent);
	opacity: 0.7;
	transform: none;
}

.kdn-btn:disabled:hover,
.kdn-btn:disabled:focus-visible,
.kdn-btn[aria-disabled="true"]:hover,
.kdn-btn[aria-disabled="true"]:focus-visible {
	background: color-mix(in srgb, var(--bg) 86%, var(--card));
	color: var(--muted);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent);
	transform: none;
}

.kdn-form-status {
	display: none;
	width: 100%;
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.kdn-form-status.is-visible {
	display: block;
}

.kdn-form-status--loading {
	border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
	background: color-mix(in srgb, var(--primary-soft) 64%, var(--card));
	color: var(--primary);
}

.kdn-form-status--success {
	border: 1px solid rgba(22, 163, 74, 0.26);
	background: rgba(22, 163, 74, 0.09);
	color: #15803d;
}

.kdn-form-status--error {
	border: 1px solid rgba(220, 38, 38, 0.24);
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c;
}

form.is-submitting {
	position: relative;
}

form.is-submitting button[type="submit"] {
	cursor: wait;
}

/* Custom Select */
.kdn-select {
	position: relative;
}

.kdn-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--text);
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	outline: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.kdn-select__button span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kdn-select__button:disabled {
	opacity: 0.62;
	cursor: not-allowed;
}

.kdn-select.is-placeholder .kdn-select__button {
	color: var(--muted);
	font-weight: 400;
	opacity: 0.78;
}

.kdn-select__button i {
	color: var(--primary);
	font-size: 14px;
	transition: transform 0.18s ease;
}

.kdn-select.is-open {
	z-index: 1000;
}

.kdn-select.is-open .kdn-select__button {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-select.is-open .kdn-select__button i {
	transform: rotate(180deg);
}

.kdn-select__menu {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 99999;
	display: none;
	gap: 8px;
	max-height: 310px;
	overflow: auto;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow);
}

.kdn-select.is-open .kdn-select__menu {
	display: grid;
	gap: 8px;
}

.kdn-select.is-down .kdn-select__menu {
	top: calc(100% + 8px);
}

.kdn-select.is-up .kdn-select__menu {
	bottom: calc(100% + 8px);
}

.kdn-select__menu button,
.kdn-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 38px;
	margin: 0;
	padding: 0 11px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	box-shadow: none;
	color: var(--text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
}

.kdn-select__menu button:hover,
.kdn-select__menu button.is-selected,
.kdn-select__option:hover,
.kdn-select__option.is-selected {
	background: var(--primary-soft);
	color: var(--primary);
}

.kdn-select__menu small,
.kdn-select__option small {
	color: var(--muted);
	font-size: 11.5px;
}

.kdn-select__search {
	position: sticky;
	top: 0;
	z-index: 2;
	margin-bottom: 2px;
	background: var(--card);
}

.kdn-select__search i {
	position: absolute;
	top: 50%;
	left: 12px;
	color: var(--muted);
	font-size: 13px;
	transform: translateY(-50%);
	pointer-events: none;
}

.kdn-select__search input {
	width: 100%;
	height: 40px;
	min-height: 40px;
	padding: 0 12px 0 34px;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: none;
	outline: 0;
	background: var(--card);
	color: var(--text);
	font-size: 13px;
	font-weight: 400;
}

.kdn-select__search input:focus {
	border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.kdn-select__search input::placeholder {
	color: var(--muted);
	font-weight: 400;
	opacity: 0.72;
}

/* Location picker - restored single trigger structure */
.kdn-location-field {
	position: relative;
	min-width: 0;
}

.kdn-location-trigger {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: #fff;
	color: var(--text);
	text-align: left;
	overflow: hidden;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.kdn-location-trigger:focus-visible,
.kdn-location-field.is-open .kdn-location-trigger {
	border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
	outline: none;
}

.kdn-location-field.is-invalid .kdn-location-trigger {
	border-color: var(--danger) !important;
  background-color: color-mix(in srgb, var(--danger) 5%, #fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 13%, transparent) !important;
}

.kdn-location-trigger i {
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 13px;
	transition: transform 180ms ease;
}

.kdn-location-field.is-open .kdn-location-trigger i {
	transform: rotate(180deg);
}

.kdn-location-trigger-text {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	max-width: 100%;
	overflow: hidden;
}

.kdn-location-value {
	min-width: 0;
	overflow: hidden;
	color: var(--text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kdn-location-meta {
	display: none;
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	white-space: nowrap;
}

.kdn-location-field.has-value .kdn-location-meta {
	display: block;
}

.kdn-location-dropdown {
	position: absolute;
	z-index: 60;
	top: calc(100% + 5px);
	left: 0;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
	overflow: hidden;
	max-height: min(72vh, 460px);
}

.kdn-location-field.is-dropup .kdn-location-dropdown {
	top: auto;
	bottom: calc(var(--kdn-location-trigger-height, 46px) + 5px);
}

.kdn-location-panel {
	display: grid;
	gap: 10px;
	padding: 12px;
	max-height: inherit;
}

.kdn-location-panel-title {
	min-width: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kdn-location-city-head {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}

.kdn-location-back {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 14px;
	font-weight: 520;
}

.kdn-location-back:hover {
	color: var(--primary);
}

.kdn-location-search {
	position: relative;
}

.kdn-location-search i {
	position: absolute;
	top: 50%;
	left: 12px;
	color: var(--muted);
	font-size: 13px;
	transform: translateY(-50%);
	pointer-events: none;
}

.kdn-location-search input {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 34px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: #fff;
	color: var(--text);
	font-size: 13px;
	font-weight: 400;
	outline: none;
}

.kdn-location-search input:focus {
	border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.kdn-location-list {
	display: grid;
	gap: 8px;
	max-height: 240px;
	overflow-y: auto;
	padding-right: 2px;
}

.kdn-location-option {
	width: 100%;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 11px;
	border-radius: 11px;
	color: var(--text-light);
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	transition: background 160ms ease, color 160ms ease;
}

.kdn-location-option:hover,
.kdn-location-option:focus-visible {
	background: var(--primary-soft);
	color: var(--primary);
	outline: none;
}

.kdn-location-option small {
	color: var(--muted);
	font-size: 11px;
	font-weight: 520;
}

.kdn-location-state {
	display: grid;
	gap: 10px;
	padding: 14px 12px;
	border-radius: 12px;
	background: #f8fafc;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

.kdn-location-retry {
	width: max-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	font-size: 12px;
	font-weight: 520;
}

.kdn-location-state.is-error {
	background: #fff1f2;
	color: #be123c;
}

.kdn-location-notice {
	padding: 10px 12px;
	border-radius: 12px;
	background: #f8fafc;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
}

.kdn-location-error {
	color: #be123c;
	font-size: 12px;
	line-height: 1.35;
}

@media (max-width: 680px) {
	.kdn-location-dropdown {
		position: fixed;
		top: auto;
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
		max-height: min(70vh, 560px);
	}

	.kdn-location-list {
		max-height: min(48vh, 420px);
	}
}




/* Choices */
.kdn-choice-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.kdn-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
		padding: 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.kdn-choice:hover,
.kdn-choice:focus-within {
	border-color: var(--primary);
	background: var(--primary-soft);
	transform: translateY(-1px);
}

.kdn-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kdn-choice__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 2px solid var(--border);
	border-radius: 7px;
	background: var(--card);
	color: var(--white);
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.kdn-choice--radio .kdn-choice__mark {
	border-radius: 999px;
}

.kdn-choice--radio .kdn-choice__mark::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--white);
	opacity: 0;
}

.kdn-choice input:checked + .kdn-choice__mark {
	border-color: var(--primary);
	background: var(--primary);
	box-shadow: var(--shadow-sm);
}

.kdn-choice--radio input:checked + .kdn-choice__mark {
	background: var(--primary);
}

.kdn-choice input:checked + .kdn-choice__mark .kdn-check-icon,
.kdn-choice--radio input:checked + .kdn-choice__mark::after {
	opacity: 1;
}

.kdn-choice__mark .kdn-check-icon {
	width: 16px;
	height: 16px;
	opacity: 0;
}

.kdn-choice__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.kdn-choice__text strong,
.kdn-switch__text strong {
	color: var(--text);
	font-size: 15px;
	font-weight: 520;
	line-height: 1.22;
}

.kdn-choice__text small,
.kdn-switch__text small {
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.25;
}

/* Plain checkbox / radio */
.kdn-plain-choice-list {
	display: grid;
	gap: 10px;
}

.kdn-plain-choice-list--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
}

.kdn-plain-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: fit-content;
	color: var(--text);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.kdn-plain-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kdn-plain-choice__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--border);
	border-radius: 6px;
	background: var(--card);
	color: var(--white);
	transition: border-color 0.18s ease, background 0.18s ease;
}

.kdn-plain-choice--radio .kdn-plain-choice__mark {
	border-radius: 999px;
}

.kdn-plain-choice--radio .kdn-plain-choice__mark::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--white);
	opacity: 0;
}

.kdn-plain-choice input:checked + .kdn-plain-choice__mark {
	border-color: var(--primary);
	background: var(--primary);
}

.kdn-plain-choice--radio input:checked + .kdn-plain-choice__mark {
	background: var(--primary);
}

.kdn-plain-choice input:checked + .kdn-plain-choice__mark .kdn-check-icon,
.kdn-plain-choice--radio input:checked + .kdn-plain-choice__mark::after {
	opacity: 1;
}

.kdn-plain-choice__mark .kdn-check-icon {
	width: 16px;
	height: 16px;
	opacity: 0;
}

.kdn-switch {
	display: flex;
	align-items: center;
	gap: 13px;
		padding: 15px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	cursor: pointer;
}

.kdn-switch--plain {
	width: fit-content;
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.kdn-switch--plain:hover,
.kdn-switch--plain:focus-within {
	background: transparent;
}

.kdn-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kdn-switch__track {
	position: relative;
	width: 52px;
	height: 29px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--border);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.kdn-switch__track::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 21px;
	height: 21px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease;
}

.kdn-switch input:checked + .kdn-switch__track {
	background: var(--primary);
	box-shadow: var(--shadow-sm);
}

.kdn-switch input:checked + .kdn-switch__track::after {
	transform: translateX(23px);
}

.kdn-switch__text {
	display: grid;
	gap: 3px;
}

.kdn-chip-list,
.kdn-chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.kdn-input-group > .kdn-field {
	min-width: 0;
}

.kdn-chip {
	position: relative;
	cursor: pointer;
}

.kdn-chip input {
	position: absolute;
	opacity: 0;
}

.kdn-chip span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 13px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 400;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.kdn-chip:hover span {
	transform: translateY(-1px);
}

.kdn-chip input:checked + span {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--white);
	box-shadow: var(--shadow-sm);
}

/* Range */
.kdn-range {
	display: grid;
	gap: 11px;
}

.kdn-range__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
}

.kdn-range__meta strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 30px;
	border-radius: 999px;
	background: var(--card);
	color: var(--primary);
	font-weight: 520;
	box-shadow: inset 0 0 0 1px var(--border);
}

.kdn-range input[type="range"] {
	--progress: 60%;
	appearance: none;
	width: 100%;
	height: 30px;
	margin: 0;
	background: transparent;
	outline: 0;
}

.kdn-range input[type="range"]::-webkit-slider-runnable-track {
	height: 10px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, var(--primary) var(--progress), var(--border) var(--progress));
}

.kdn-range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -8px;
	border: 5px solid var(--white);
	border-radius: 999px;
	background: var(--primary);
	box-shadow: var(--shadow-sm);
}

.kdn-range input[type="range"]::-moz-range-track {
	height: 10px;
	border-radius: 999px;
	background: var(--border);
}

.kdn-range input[type="range"]::-moz-range-progress {
	height: 10px;
	border-radius: 999px;
	background: var(--primary);
}

.kdn-range input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 5px solid var(--white);
	border-radius: 999px;
	background: var(--primary);
	box-shadow: var(--shadow-sm);
}

/* Color picker: swatches */
.kdn-color-swatch-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.kdn-color-swatch {
	position: relative;
	display: inline-flex;
	width: 34px;
	height: 34px;
	cursor: pointer;
}

.kdn-color-swatch input[type="color"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.kdn-color-swatch span {
	display: block;
	width: 100%;
	height: 100%;
	border: 3px solid var(--white);
	border-radius: var(--radius-sm);
	background: var(--swatch-color);
	box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kdn-color-swatch:hover span,
.kdn-color-swatch.is-active span {
	transform: translateY(-1px);
	box-shadow: 0 0 0 2px var(--swatch-color), var(--shadow-sm);
}

/* Color picker: input variant */
.kdn-color-input-picker {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kdn-color-input-picker__icon {
	position: relative;
	display: block;
	width: 34px;
	height: 34px;
	border: 3px solid var(--white);
	border-radius: 999px;
	background: var(--picked-color);
	box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}

.kdn-color-input-picker__icon input[type="color"] {
	position: absolute;
	inset: -4px;
	width: calc(100% + 8px);
	height: calc(100% + 8px);
	opacity: 0;
	cursor: pointer;
}

.kdn-color-input-picker__code {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

/* Segmented / stepper */
.kdn-segmented {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 5px;
	width: 100%;
	padding: 5px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg);
}

.kdn-segmented label {
	position: relative;
	min-width: 0;
	cursor: pointer;
}

.kdn-segmented input {
	position: absolute;
	opacity: 0;
}

.kdn-segmented span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	color: var(--muted);
	font-size: 13.5px;
	font-weight: 400;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.kdn-segmented input:checked + span {
	background: var(--card);
	color: var(--primary);
	box-shadow: var(--shadow-sm);
}

.kdn-stepper {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 46px;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
}

.kdn-stepper button {
	border: 0;
	background: var(--bg);
	color: var(--primary);
	font-size: 16px;
}

.kdn-stepper input {
	width: 100%;
	height: 48px;
	border: 0;
	outline: 0;
	color: var(--text);
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	box-shadow: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

/* Comments */
.kdn-comment-form {
	display: grid;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	box-shadow: var(--shadow-sm);
}

.kdn-comment-form--detailed {
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 13px;
	padding: 16px;
}

.kdn-comment-form__avatar {
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--bg);
}

.kdn-comment-form__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kdn-comment-form__body {
	display: grid;
	gap: 11px;
	min-width: 0;
}

.kdn-comment-form__head {
	display: grid;
	gap: 3px;
}

.kdn-comment-form__head strong {
	color: var(--text);
	font-size: 16px;
	font-weight: 520;
}

.kdn-comment-form__head span,
.kdn-comment-form__hint {
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
}

.kdn-rich-textarea--detailed {
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.kdn-editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 7px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}

.kdn-editor-toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--text);
	font-size: 14px;
	box-shadow: inset 0 0 0 1px var(--border);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.kdn-editor-toolbar button:focus-visible,
.kdn-editor-toolbar button:hover,
.kdn-editor-toolbar button.is-active {
	background: var(--primary);
	color: var(--white);
	box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 18%, transparent);
	outline: 0;
	transform: translateY(-1px);
}

.kdn-editor-toolbar button:active {
	transform: translateY(0);
}

.kdn-rich-textarea {
	position: relative;
	display: grid;
	min-height: 118px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kdn-rich-textarea:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-rich-textarea__editor {
	min-height: 116px;
	padding: 12px 14px;
	color: var(--text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	outline: 0;
}

.kdn-rich-textarea--detailed .kdn-rich-textarea__editor {
	min-height: 126px;
}

.kdn-rich-textarea__editor:empty::before {
	content: attr(data-placeholder);
	color: var(--muted);
	opacity: 0.72;
	pointer-events: none;
}

.kdn-rich-textarea__editor ul,
.kdn-rich-textarea__editor ol {
	display: grid;
	gap: 7px;
	margin: 8px 0;
	padding-left: 24px;
}

.kdn-rich-textarea__editor ul {
	list-style: disc;
}

.kdn-rich-textarea__editor ol {
	list-style: decimal;
}

.kdn-rich-textarea__editor li {
	padding-left: 3px;
	color: var(--text);
	line-height: 1.55;
}

.kdn-rich-textarea__editor li::marker {
	color: var(--primary);
	font-weight: 700;
}

.kdn-rich-textarea__editor blockquote {
	position: relative;
	margin: 10px 0;
	padding: 12px 14px 12px 18px;
	border-left: 4px solid var(--primary);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--primary-soft) 62%, var(--card));
	color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
	font-weight: 450;
	line-height: 1.6;
}

.kdn-rich-textarea__editor blockquote::before {
	content: "";
	position: absolute;
	top: 10px;
	left: -4px;
	width: 4px;
	height: calc(100% - 20px);
	border-radius: 999px;
	background: color-mix(in srgb, var(--primary) 82%, #111827);
}

.kdn-rich-textarea__editor blockquote > :first-child {
	margin-top: 0;
}

.kdn-rich-textarea__editor blockquote > :last-child {
	margin-bottom: 0;
}

.kdn-rich-textarea__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0;
	border-radius: var(--radius-sm);
}

.kdn-global-selection-toolbar {
	position: fixed;
	z-index: 99999;
	display: none;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border-radius: var(--radius-sm);
	background: var(--text);
	box-shadow: var(--shadow);
	transform: translate(-50%, -100%);
}

.kdn-global-selection-toolbar.is-visible {
	display: inline-flex;
}

.kdn-global-selection-toolbar::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--text);
	transform: translateX(-50%) rotate(45deg);
}

.kdn-global-selection-toolbar button {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 28px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--white);
}

.kdn-global-selection-toolbar button:hover {
	background: rgba(255, 255, 255, 0.14);
}

.kdn-comment-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.kdn-comment-form--compact {
	grid-template-columns: 44px minmax(0, 1fr) 44px;
	gap: 10px;
	align-items: center;
	padding: 12px;
	border-radius: var(--radius-md);
}

.kdn-comment-form--compact .kdn-comment-form__avatar {
	width: 44px;
	height: 44px;
}

.kdn-rich-textarea--compact {
	grid-template-columns: minmax(0, 1fr) 34px;
	align-items: center;
	min-height: 44px;
	padding-right: 5px;
	border-radius: var(--radius-sm);
}

.kdn-rich-textarea--compact .kdn-rich-textarea__editor {
	min-height: 44px;
	max-height: 110px;
	padding: 11px 8px 12px 12px;
	overflow: auto;
	font-size: 14.5px;
	line-height: 1.45;
}

.kdn-comment-emoji,
.kdn-comment-form--compact .kdn-comment-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 18px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.kdn-comment-emoji {
	width: 34px;
	height: 34px;
	margin: 5px 0;
	padding: 0;
	font-size: 16px;
}

.kdn-comment-form--compact .kdn-comment-submit {
	background: var(--primary);
	color: var(--white);
	box-shadow: var(--shadow-sm);
}

.kdn-comment-emoji:hover,
.kdn-comment-emoji:focus-visible {
	background: var(--primary);
	color: var(--white);
	box-shadow: var(--shadow-sm);
}

.kdn-comment-form--compact .kdn-comment-submit:hover,
.kdn-comment-form--compact .kdn-comment-submit:focus-visible {
	background: color-mix(in srgb, var(--primary) 88%, #111827);
	color: var(--white);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 22%, transparent);
	transform: translateY(-1px);
}

.kdn-comment-emoji:active,
.kdn-comment-form--compact .kdn-comment-submit:active {
	transform: translateY(0);
}

@media (max-width: 760px) {
		.kdn-inline-grid,
		.kdn-choice-list,
		.kdn-input-group--two,
		.kdn-input-group--three,
		.kdn-password-pair {
			grid-template-columns: minmax(0, 1fr);
		}

	.kdn-comment-form--detailed,
	.kdn-comment-form--compact {
		grid-template-columns: minmax(0, 1fr);
	}

	.kdn-comment-form--compact {
		grid-template-columns: 44px minmax(0, 1fr) 44px;
	}

	.kdn-comment-form__footer {
		align-items: stretch;
		flex-direction: column;
	}

	.kdn-comment-form__footer .kdn-btn {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.kdn-segmented {
		width: 100%;
	}

	.kdn-segmented span {
		width: 100%;
	}
}





/* Final requested choices/tag/upload fixes */
.kdn-choice-demo-stack {
	display: grid;
	gap: 24px;
}

.kdn-choice,
.kdn-switch {
	align-items: flex-start;
}

.kdn-choice__mark {
	margin-top: -3px;
}

.kdn-switch__track {
	margin-top: -6px;
}

.kdn-choice__text {
	gap: 1px;
}

.kdn-choice__text strong,
.kdn-switch__text strong {
	line-height: 1.2;
}

.kdn-choice__text small,
.kdn-switch__text small {
	line-height: 1.22;
}

.kdn-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 7px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kdn-tags:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 0 9px 0 11px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 13px;
	font-weight: 400;
}

.kdn-tag button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: currentColor;
}

.kdn-tags input {
	flex: 1 1 160px;
	min-width: 120px;
	height: 32px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text);
	font-size: 14px;
}

.kdn-tags input::placeholder {
	color: var(--muted);
	opacity: 0.72;
}

.kdn-upload {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 96px;
	padding: 18px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}


.kdn-upload input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kdn-upload__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 20px;
}

.kdn-upload__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.kdn-upload__text strong {
	color: var(--text);
	font-size: 15px;
	font-weight: 520;
	line-height: 1.2;
}

.kdn-upload__text small,
.kdn-upload__text span {
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.25;
}

/* Functional tag input and upload/drop engine */
.kdn-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 7px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kdn-tags:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-tags__items {
	display: contents;
}

.kdn-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 0 9px 0 11px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 13px;
	font-weight: 400;
}

.kdn-tag button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: currentColor;
}

.kdn-tags input[type="text"] {
	flex: 1 1 160px;
	min-width: 120px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	color: var(--text);
	font-size: 14px;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
}

.kdn-tags input[type="text"]:hover,
.kdn-tags input[type="text"]:focus,
.kdn-tags input[type="text"]:focus-visible {
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.kdn-tags input[type="text"]::placeholder {
	color: var(--muted);
	opacity: 0.72;
}

.kdn-upload {
	display: contents;
}

.kdn-upload input[type="file"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kdn-upload__drop,
.kdn-rich-textarea.is-dragover {
	border-color: var(--primary);
	background: var(--primary-soft);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-upload__drop {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 104px;
	padding: 18px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.kdn-upload__drop:hover {
	border-color: var(--primary);
	background: var(--primary-soft);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-upload__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 20px;
}

.kdn-upload__text {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.kdn-upload__text strong {
	color: var(--text);
	font-size: 15px;
	font-weight: 520;
	line-height: 1.2;
}

.kdn-upload__text small {
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.25;
}

.kdn-upload__list {
	display: grid;
	gap: 10px;
}

.kdn-upload-item {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow-sm);
}

.kdn-upload-item__thumb {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--bg);
	color: var(--primary);
	font-size: 20px;
}

.kdn-upload-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kdn-upload-item__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.kdn-upload-item__body strong {
	overflow: hidden;
	color: var(--text);
	font-size: 14px;
	font-weight: 520;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kdn-upload-item__body small {
	color: var(--muted);
	font-size: 12px;
	font-weight: 400;
}

.kdn-upload-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--primary-soft);
	color: var(--primary);
}

.kdn-rich-textarea {
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.kdn-rich-textarea.is-dragover {
	border-style: dashed;
}


/* Final polish: upload wrapper, tag placeholder and location typography */
.kdn-upload {
	display: contents;
}

.kdn-upload:hover,
.kdn-upload:focus-within {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.kdn-upload__drop {
	width: 100%;
}

.kdn-upload__list {
	margin-top: 12px;
}

.kdn-tags {
	padding-left: 14px;
}

.kdn-tags:has(.kdn-tag) {
	padding-left: 7px;
}

.kdn-tags input[type="text"]::placeholder {
	color: var(--muted);
	opacity: 0.72;
}

/* Location picker text alignment with normal custom select */
.kdn-location-trigger,
.kdn-location-value {
	font-size: 15px;
	font-weight: 400;
}

.kdn-location-field.is-empty .kdn-location-value,
.kdn-location-value.is-placeholder,
.kdn-location-placeholder {
	color: var(--muted);
	font-weight: 400;
	opacity: 0.72;
}

.kdn-location-meta {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	opacity: 0.86;
}


/* If JS writes selected state, real selected value returns to normal text color */
.kdn-location-field.has-value .kdn-location-trigger .kdn-location-value,
.kdn-location-field.has-value .kdn-location-trigger [data-location-value],
.kdn-location-field.is-selected .kdn-location-trigger .kdn-location-value,
.kdn-location-field.is-selected .kdn-location-trigger [data-location-value] {
	color: var(--text) !important;
	opacity: 1 !important;
}


/* Final touch: location typography + upload drag state */
.kdn-location-trigger {
	font-size: 15px !important;
	font-weight: 400 !important;
}

.kdn-location-trigger .kdn-location-value,
.kdn-location-trigger [data-location-value],
.kdn-location-trigger .kdn-location-country,
.kdn-location-trigger [data-location-country],
.kdn-location-trigger .kdn-location-city,
.kdn-location-trigger [data-location-city] {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}

.kdn-location-trigger .kdn-location-meta,
.kdn-location-trigger [data-location-meta] {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}

.kdn-location-field:not(.has-value) .kdn-location-trigger .kdn-location-value,
.kdn-location-field:not(.has-value) .kdn-location-trigger [data-location-value],
.kdn-location-field.is-empty .kdn-location-trigger .kdn-location-value,
.kdn-location-field.is-empty .kdn-location-trigger [data-location-value],
.kdn-location-trigger .kdn-location-value[data-placeholder],
.kdn-location-trigger [data-location-value][data-placeholder] {
	color: var(--muted) !important;
	font-weight: 400 !important;
	opacity: 0.72 !important;
}

.kdn-location-field.has-value .kdn-location-trigger .kdn-location-value,
.kdn-location-field.has-value .kdn-location-trigger [data-location-value],
.kdn-location-field.is-selected .kdn-location-trigger .kdn-location-value,
.kdn-location-field.is-selected .kdn-location-trigger [data-location-value] {
	color: var(--text) !important;
	opacity: 1 !important;
}

.kdn-location-field.has-value .kdn-location-trigger .kdn-location-meta,
.kdn-location-field.has-value .kdn-location-trigger [data-location-meta],
.kdn-location-field.is-selected .kdn-location-trigger .kdn-location-meta,
.kdn-location-field.is-selected .kdn-location-trigger [data-location-meta] {
	color: var(--muted) !important;
	opacity: 0.86 !important;
}

/* Advanced form engine controls */
.kdn-native-select-source {
	position: absolute;
	width: 1px !important;
	min-width: 1px !important;
	height: 1px !important;
	min-height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

	.kdn-password {
		position: relative;
		display: grid;
	}

	.kdn-password-confirm {
		display: grid;
		gap: 10px;
	}

	.kdn-password-pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

.kdn-password input {
	padding-right: 46px;
}

.kdn-password button {
	position: absolute;
	top: 50%;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-sm);
	color: var(--muted);
	transform: translateY(-50%);
}

.kdn-password button:hover,
.kdn-password.is-visible button {
	background: var(--primary-soft);
	color: var(--primary);
}

.kdn-password-strength {
	display: grid;
	gap: 8px;
}

.kdn-password-strength__bar {
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--border);
}

.kdn-password-strength__bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #dc2626;
	transition: width 0.18s ease, background 0.18s ease;
}

.kdn-password-strength[data-score="1"] .kdn-password-strength__bar span,
.kdn-password-strength[data-score="2"] .kdn-password-strength__bar span {
	width: 40%;
	background: #dc2626;
}

.kdn-password-strength[data-score="3"] .kdn-password-strength__bar span,
.kdn-password-strength[data-score="4"] .kdn-password-strength__bar span {
	width: 72%;
	background: #f59e0b;
}

.kdn-password-strength[data-score="5"] .kdn-password-strength__bar span {
	width: 100%;
	background: #16a34a;
}

.kdn-password-strength__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--muted);
	font-size: 12.5px;
}

.kdn-password-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kdn-password-rules span {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--bg);
	color: var(--muted);
	font-size: 12px;
}

	.kdn-password-rules span.is-valid {
		background: rgba(22, 163, 74, 0.09);
		color: #16a34a;
	}

	.kdn-password-match {
		min-height: 18px;
		font-size: 12.5px;
	}

	.kdn-password-match.is-valid {
		color: #16a34a;
	}

	.kdn-password-match.is-error {
		color: #dc2626;
	}

.kdn-phone {
	display: grid;
	grid-template-columns: 126px minmax(0, 1fr);
	gap: 10px;
}

.kdn-phone > .kdn-select,
.kdn-phone select,
.kdn-phone input {
	min-width: 0;
}

.kdn-phone select,
.kdn-phone .kdn-select__button {
	min-height: 48px;
}

.kdn-otp {
	display: grid;
	grid-template-columns: repeat(6, 44px);
	gap: 8px;
}

.kdn-otp input {
	text-align: center;
	font-size: 18px;
	font-weight: 650;
	padding: 0;
}

.kdn-otp.is-complete input {
	border-color: #16a34a;
	background: rgba(22, 163, 74, 0.06);
}

.kdn-date-range {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
}

.kdn-multiselect {
	display: grid;
	gap: 10px;
}

.kdn-multiselect__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	min-height: 32px;
}

.kdn-mini-chip {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12.5px;
	font-weight: 520;
}

.kdn-autocomplete {
	position: relative;
}

.kdn-autocomplete__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 80;
	display: none;
	gap: 8px;
	max-height: 220px;
	overflow: auto;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow);
}

.kdn-autocomplete.is-open .kdn-autocomplete__menu {
	display: grid;
}

.kdn-autocomplete__menu button {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 36px;
	padding: 0 11px;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 14px;
	text-align: left;
}

.kdn-autocomplete__menu button:hover {
	background: var(--primary-soft);
	color: var(--primary);
}

.kdn-rating {
	display: inline-flex;
	gap: 4px;
}

.kdn-rating button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-size: 18px;
}

.kdn-rating button:hover,
.kdn-rating button.is-active,
.kdn-rating button.is-preview {
	background: var(--primary-soft);
	color: var(--primary);
}

.kdn-rating:hover button.is-active:not(.is-preview) {
	background: transparent;
	color: var(--muted);
}

.kdn-fieldset {
	display: grid;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg);
}

.kdn-fieldset__head {
	display: grid;
	gap: 4px;
}

.kdn-fieldset__head strong {
	color: var(--text);
	font-size: 16px;
	font-weight: 650;
}

.kdn-fieldset__head span {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
}

[data-kdn-error] {
	min-height: 16px;
	color: #dc2626;
	font-size: 12px;
	line-height: 1.35;
}

.kdn-upload--avatar .kdn-upload__drop {
	min-height: 130px;
}

@media (max-width: 760px) {
	.kdn-date-range,
	.kdn-phone,
	.kdn-otp {
		grid-template-columns: minmax(0, 1fr);
	}

	.kdn-otp input {
		width: 100%;
	}
}

/* Drag must look different from normal state, and apply both on wrapper and drop zone. */
.kdn-upload.is-dragover .kdn-upload__drop,
.kdn-upload__drop.is-dragover,
.kdn-upload__drop[data-dragover="true"] {
	border-color: var(--primary) !important;
	background: var(--primary-soft) !important;
	box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

.kdn-upload.is-dragover .kdn-upload__drop .kdn-upload__icon,
.kdn-upload__drop.is-dragover .kdn-upload__icon,
.kdn-upload__drop[data-dragover="true"] .kdn-upload__icon {
	background: var(--card) !important;
	color: var(--primary) !important;
}

.kdn-counter {
	justify-self: end;
	color: var(--muted);
	font-size: 12px;
}

.kdn-counter.is-warning {
	color: #b45309;
}

.kdn-demo-divider {
	width: 100%;
	height: 1px;
	margin: 8px 0;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.kdn-demo-code {
	margin-top: 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}

[data-kdn-form-source] {
	display: none !important;
}

.kdn-demo-code summary {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 14px;
	color: var(--text);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.kdn-demo-code pre {
	max-height: 360px;
	overflow: auto;
	margin: 0;
	padding: 14px;
	border-top: 1px solid var(--border);
	background: #0f172a;
	color: #e2e8f0;
	font-size: 12px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}

.kdn-demo-code code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.kdn-demo-block {
	display: grid;
	gap: 14px;
}

#native-more .kdn-form-list,
#media .kdn-form-list,
#smart-inputs .kdn-form-list,
#flow .kdn-form-list {
	gap: 22px;
}

#smart-inputs .kdn-form-list {
	max-width: none;
}

#media .kdn-input-group--two {
	grid-template-columns: minmax(0, 1fr);
}

.kdn-card-form {
	display: grid;
	grid-template-columns: minmax(0, 420px) 1fr;
	align-items: start;
	gap: 22px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow-sm);
}

.kdn-card-preview {
	position: relative;
	width: min(100%, 420px);
	aspect-ratio: 1.586 / 1;
	min-height: 0;
	perspective: 1200px;
}

.kdn-card-preview__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.58s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kdn-card-preview.is-flipped .kdn-card-preview__inner {
	transform: rotateY(180deg);
}

	.kdn-card-preview__face {
		position: absolute;
		inset: 0;
		overflow: hidden;
		padding: 26px 28px;
		border-radius: 20px;
	background:
		radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--primary) 24%, #7f1d1d) 0, transparent 46%),
		radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--secondary) 28%, #312e81) 0, transparent 48%),
		linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 82%, #fff) 0%, color-mix(in srgb, var(--primary-soft) 48%, #fff) 48%, color-mix(in srgb, var(--secondary) 14%, #fff) 100%);
	color: color-mix(in srgb, var(--text) 90%, var(--primary) 10%);
	box-shadow: 0 18px 36px rgba(31, 41, 55, 0.18);
	backface-visibility: hidden;
	isolation: isolate;
}

.kdn-card-preview__face::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(110deg, rgba(255, 255, 255, 0.22), transparent 38%, rgba(15, 23, 42, 0.06)),
		repeating-linear-gradient(78deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 12px);
}

.kdn-card-preview__face::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 62%);
	opacity: 0.88;
}

.kdn-card-preview__back {
	transform: rotateY(180deg);
}

.kdn-card-preview__stripe {
	position: absolute;
	top: 42px;
	right: 0;
	left: 0;
	height: 42px;
	background: color-mix(in srgb, var(--text) 84%, #000 16%);
	opacity: 0.82;
}

.kdn-card-preview__signature {
	position: absolute;
	top: 118px;
	right: 28px;
	left: 28px;
	display: grid;
	grid-template-columns: 1fr 76px;
	align-items: center;
	min-height: 40px;
	border-radius: 5px;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0 7px, rgba(229, 231, 235, 0.96) 7px 14px);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

	.kdn-card-preview__signature strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	border-left: 1px solid rgba(15, 23, 42, 0.12);
		background: rgba(255, 255, 255, 0.9);
		color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
		font-family: Avenir, "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 16px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0;
	}

.kdn-card-preview__meta {
	position: absolute;
	right: 28px;
	bottom: 24px;
	left: 28px;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	color: color-mix(in srgb, var(--text) 86%, var(--primary) 14%);
}

.kdn-card-brand-logo {
	position: absolute;
	top: 25px;
	right: 25px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 24px;
	opacity: 0;
	filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12));
	transition: opacity 0.18s ease, transform 0.18s ease;
	transform: translateY(-4px);
	pointer-events: none;
}

.kdn-card-brand-logo.has-logo {
	opacity: 0.76;
	transform: translateY(0);
}

.kdn-card-brand-logo img {
	display: block;
	width: auto;
	height: 24px;
	max-width: 150px;
	object-fit: contain;
	object-position: center;
}

	.kdn-card-preview__number {
	position: absolute;
	right: 28px;
	top: 50%;
	left: 28px;
	z-index: 1;
		color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
		font-family: Avenir, "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: clamp(18px, 1.74vw, 23px);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1.2;
		word-spacing: 0.16em;
		letter-spacing: 0;
		transform: translateY(-50%);
	}

.kdn-card-preview__meta span {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.kdn-card-preview__meta span:last-child {
	text-align: right;
}

	.kdn-card-preview__meta small {
		color: color-mix(in srgb, var(--muted) 68%, var(--text) 32%);
		font-family: Avenir, "Avenir Next", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 9px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
	}

.kdn-card-preview__meta strong {
		max-width: 230px;
		overflow: hidden;
		color: color-mix(in srgb, var(--text) 90%, var(--primary) 10%);
		font-family: "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
		font-size: clamp(13px, 1.2vw, 16px);
		font-weight: 700;
		line-height: 1;
		text-overflow: ellipsis;
	white-space: nowrap;
}

.kdn-card-form__fields {
	display: grid;
	gap: 14px;
}

.kdn-card-result {
	display: none;
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
}

.kdn-card-result.is-visible {
	display: block;
}

.kdn-card-result--success {
	border: 1px solid rgba(22, 163, 74, 0.26);
	background: rgba(22, 163, 74, 0.09);
	color: #15803d;
}

.kdn-card-result--error {
	border: 1px solid rgba(220, 38, 38, 0.24);
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c;
}

.kdn-media-upload {
	display: grid;
	gap: 12px;
}

.kdn-media-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.kdn-media-upload__surface {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	min-height: 136px;
	padding: 18px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.kdn-media-upload__surface:hover,
.kdn-media-upload.is-dragover .kdn-media-upload__surface,
.kdn-media-upload__surface.is-dragover,
.kdn-media-upload__surface[data-dragover="true"] {
	border-color: var(--primary);
	background: var(--primary-soft);
	box-shadow: 0 0 0 3px var(--primary-soft);
}

.kdn-media-upload__preview,
.kdn-media-thumb {
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 92px;
	height: 92px;
	border-radius: var(--radius-sm);
	background: var(--bg);
	color: var(--muted);
}

.kdn-media-upload--avatar .kdn-media-upload__preview {
	border-radius: 999px;
}

.kdn-media-upload__preview:empty::before {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--primary-soft);
}

.kdn-media-thumb img,
.kdn-media-upload__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kdn-media-upload__text {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.kdn-media-upload__text strong {
	color: var(--text);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.2;
}

.kdn-media-upload__text span,
.kdn-media-upload__text small {
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
}

.kdn-media-upload__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.kdn-media-upload__gallery,
.kdn-media-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 10px;
}

.kdn-dual-range {
	position: relative;
	display: grid;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--card), var(--bg));
	box-shadow: var(--shadow-sm);
}

.kdn-dual-range__track {
	position: relative;
	height: 32px;
	border-radius: 999px;
	background: transparent;
}

.kdn-dual-range__track::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--border) 0,
		var(--border) var(--range-start, 0%),
		var(--primary) var(--range-start, 0%),
		var(--primary) var(--range-end, 100%),
		var(--border) var(--range-end, 100%),
		var(--border) 100%
	);
	transform: translateY(-50%);
}

.kdn-dual-range input[type="range"] {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	pointer-events: none;
	outline: 0;
	appearance: none;
	-webkit-appearance: none;
}

.kdn-dual-range input[type="range"]::-webkit-slider-runnable-track {
	height: 10px;
	background: transparent;
}

.kdn-dual-range input[type="range"]::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	margin-top: -7px;
	border: 5px solid var(--white);
	border-radius: 999px;
	background: var(--primary);
	box-shadow: 0 6px 16px rgba(109, 40, 217, 0.24);
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
}

.kdn-dual-range input[type="range"]::-moz-range-track {
	height: 10px;
	background: transparent;
}

.kdn-dual-range input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 5px solid var(--white);
	border-radius: 999px;
	background: var(--primary);
	box-shadow: 0 6px 16px rgba(109, 40, 217, 0.24);
	pointer-events: auto;
}

.kdn-dual-range output {
	justify-self: end;
	min-width: 88px;
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.kdn-async-select,
.kdn-command-search {
	position: relative;
}

.kdn-async-select__menu,
.kdn-command-search__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 80;
	display: none;
	gap: 8px;
	max-height: 260px;
	overflow: auto;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	box-shadow: var(--shadow);
}

.kdn-async-select.is-open .kdn-async-select__menu,
.kdn-command-search.is-open .kdn-command-search__menu {
	display: grid;
	gap: 8px;
}

.kdn-async-select__menu button,
.kdn-command-search__menu button {
	min-height: 38px;
	padding: 0 11px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	text-align: left;
}

.kdn-async-select__menu button:hover,
.kdn-command-search__menu button:hover {
	background: var(--primary-soft);
	color: var(--primary);
}

.kdn-async-select.is-loading input {
	background-image: linear-gradient(90deg, transparent, var(--primary-soft), transparent);
	background-size: 220% 100%;
	animation: kdn-loading-pan 1s linear infinite;
}

@keyframes kdn-loading-pan {
	from { background-position: 220% 0; }
	to { background-position: -220% 0; }
}

.kdn-repeater {
	display: grid;
	gap: 12px;
}

.kdn-repeater__list {
	display: grid;
	gap: 10px;
}

.kdn-repeater__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
}

.kdn-repeater__index {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary);
	font-size: 12px;
	font-weight: 700;
}

.kdn-wizard {
	display: grid;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
}

.kdn-wizard__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.kdn-wizard__tabs button {
	min-height: 38px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
	color: var(--muted);
}

.kdn-wizard__tabs button.is-active {
	border-color: var(--primary);
	background: var(--primary-soft);
	color: var(--primary);
}

	.kdn-wizard__step {
		display: none;
		gap: 12px;
	}

	.kdn-wizard__step.is-active {
		display: grid;
	}

	.kdn-wizard__step[hidden] {
		display: none !important;
	}

.kdn-wizard__actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.kdn-signature {
	display: grid;
	gap: 10px;
}

.kdn-signature canvas {
	width: 100%;
	height: 180px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
	box-shadow: var(--shadow-sm);
	touch-action: none;
}

.kdn-state-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.kdn-state-box {
	display: grid;
	gap: 6px;
	min-height: 88px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
}

.kdn-state-box input {
	min-width: 0;
}

.kdn-state-box strong {
	color: var(--text);
}

.kdn-state-box span {
	color: var(--muted);
	font-size: 12px;
}

.kdn-state-box--warning {
	border-color: #f59e0b;
	background: rgba(245, 158, 11, 0.08);
}

.kdn-state-box--info {
	border-color: #0ea5e9;
	background: rgba(14, 165, 233, 0.08);
}

	.kdn-state-box--skeleton span {
		height: 10px;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--border) 0%, var(--bg) 45%, var(--border) 90%);
		background-size: 220% 100%;
		animation: kdn-skeleton-pan 1.15s ease-in-out infinite;
	}

	@keyframes kdn-skeleton-pan {
		0% {
			background-position: 120% 0;
		}

		100% {
			background-position: -120% 0;
		}
	}

#media .kdn-form-list,
#payment .kdn-form-list,
#flow .kdn-form-list,
#comments .kdn-form-list {
	max-width: none;
}

@media (max-width: 760px) {
	.kdn-card-form,
	.kdn-media-upload__surface,
	.kdn-repeater__item,
	.kdn-wizard__tabs {
		grid-template-columns: minmax(0, 1fr);
	}

	.kdn-media-upload__actions {
		justify-content: flex-start;
	}
}