/* Country Code (intl-tel-input) Field */
.elementor-field-group .dkel-country-code {
	width: 100%;
}
.elementor-field-group .dkel-country-code input.iti__tel-input {
	width: 100%;
}

/* Editor-only fixes for intl-tel-input inline dropdown.
   The library sets inline top/bottom styles to open the dropdown upward when
   it calculates more space above — which in the editor iframe often puts it
   off-screen (blank). Force it downward by overriding those inline styles
   with !important, and lift it above Elementor's overlay chrome. */
.elementor-editor-active .dkel-country-code .iti__dropdown-content {
	top: calc(100% + 2px) !important;
	bottom: auto !important;
	z-index: 9999 !important;
	max-height: 230px;
	overflow: hidden;
}
.elementor-editor-active .dkel-country-code .iti__country-list {
	max-height: 185px;
}

/* Calculator Field */
.elementor-form .elementor-field-calc-result {
  	display: flex;
  	gap: 5px;
	font-weight: bold;
}

/* Rating Field */
.dkel-rating-field {
	position: relative;
	flex-basis: 100%;
	background-color: transparent !important;
	background: none !important;
}
.dkel-rating-stars {
	display: flex;
}
.dkel-rating-stars.has-custom-icon {
	gap: 5px;
}
.dkel-rating-star {
	cursor: pointer;
	font-size: var(--size, 24px);
	color: var(--inactive-color, #ccc);
	fill: var(--inactive-color, #ccc);
	transition: all 0.2s ease-in-out;
}
.dkel-rating-star.selected,
.dkel-rating-star.hover {
	color: var(--active-color, #f39c12);
	fill: var(--active-color, #f39c12);
}

/* Range Slider Field */
.dkel-range-slider-field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-basis: 100%;
	background-color: transparent !important;
	background: none !important;
}
.dkel-range-slider-prefix {
	margin-right: 8px;
	font-size: 14px;
	color: var(--slider-prefix-color, #333);
}
.dkel-range-slider-value {
	width: 100%;
	padding-left: 8px !important;
    padding-right: 8px !important;
	font-size: 14px;
	border: 1px solid var(--slider-value-border-color, #ccc);
	border-radius: 4px;
	background-color: var(--slider-value-bg-color, #fff);
	max-width: 70px;
}
.dkel-range-slider-field {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dkel-range-slider-field input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	background: transparent;
	outline: none;
}
.dkel-range-slider-field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: none;
	border-radius: 50%;
	background: var(--thumb-color, #0073e6);
	margin-top: -4px; /* Center the thumb */
	cursor: pointer;
}
.dkel-range-slider-field input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: none;
	border-radius: 50%;
	background: var(--thumb-color, #0073e6);
	margin-top: -4px; /* Center the thumb */
	cursor: pointer;
}
.dkel-range-slider-field input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	background: var(--track-color, #ccc);
	border-radius: 4px;
}
.dkel-range-slider-field input[type="range"]::-moz-range-track {
	height: 8px;
	background: var(--track-color, #ccc);
	border-radius: 4px;
}
.dkel-range-slider-field input[type="range"]:focus {
	outline: none;
}
.dkel-range-slider-field input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--thumb-shadow-color, rgba(0, 115, 230, 0.5));
}
.dkel-range-slider-field input[type="range"]:focus::-moz-range-thumb {
	box-shadow: 0 0 0 3px var(--thumb-shadow-color, rgba(0, 115, 230, 0.5));
}
.dkel-range-slider-field input[type="range"]:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.dkel-range-slider-field input[type="range"]:disabled::-webkit-slider-thumb {
	background: var(--slider-thumb-disabled-color, #ccc);
}
.dkel-range-slider-field input[type="range"]:disabled::-moz-range-thumb {
	background: var(--slider-thumb-disabled-color, #ccc);
}
.dkel-range-slider-field input[type="range"]:disabled::-webkit-slider-runnable-track {
	background: var(--slider-track-disabled-color, #e0e0e0);
}
.dkel-range-slider-field input[type="range"]:disabled::-moz-range-track {
	background: var(--slider-track-disabled-color, #e0e0e0);
}

/* Color Picker Field */
div[class*=dkel_color_picker] label {
    flex-basis: 100%;
}
.dkel-color-picker {
	max-width: 40px !important;
    block-size: 35px;
    border: none;
    box-shadow: none;
}
.dkel-color-picker::-webkit-color-swatch-wrapper {
	padding: 0;
}
.dkel-color-picker::-moz-color-swatch-wrapper {
	padding: 0;
}
.dkel-color-picker::-webkit-color-swatch {
	border: none;
	box-shadow: none;
}
.dkel-color-picker::-moz-color-swatch {
	border: none;
	box-shadow: none;
}

/* Toggle Switch Field */
.dkel-toggle-switch-field input {
	display: none;
}
.dkel-toggle-switch-field {
	flex-basis: 100%;
}
.dkel-toggle-switch-field .dkel-toggle-switch {
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
}
.dkel-toggle-switch-field .dkel-toggle-switch-slider-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--toggle-width, 50px);
	position: relative;
}
.dkel-toggle-switch-field .dkel-toggle-switch-slider-container label {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
}
.dkel-toggle-switch-field .dkel-toggle-switch-slider {
	position: relative;
	width: 100%;
	height: var(--toggle-height, 22px);
	border-radius: var(--toggle-border-radius);
	background-color: var(--toggle-bg-off);
	transition: 0.4s;
}
.dkel-toggle-switch-field .dkel-toggle-switch-on:checked ~ .dkel-toggle-switch .dkel-toggle-switch-slider {
	background-color: var(--toggle-bg-on);
}
.dkel-toggle-switch-field .dkel-toggle-switch-on:checked ~ .dkel-toggle-switch .dkel-toggle-switch-off-label {
	display: block;
}
.dkel-toggle-switch-field .dkel-toggle-switch-off:checked ~ .dkel-toggle-switch .dkel-toggle-switch-on-label {
	display: block;
}
.dkel-toggle-switch-field .dkel-toggle-switch-slider::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(var(--toggle-height, 22px) - 4px);
	height: calc(var(--toggle-height, 22px) - 4px);
	border-radius: var(--toggle-border-radius);
	background-color: var(--toggle-color-off);
	box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.1);
	transition: 0.4s;
}
.dkel-toggle-switch-field .dkel-toggle-switch-on:checked ~ .dkel-toggle-switch .dkel-toggle-switch-slider::before {
	left: calc(100% - (var(--toggle-height, 22px) - 4px) - 2px);
	background-color: var(--toggle-color-on);
}
.dkel-toggle-switch-field .dkel-toggle-switch-label-on,
.dkel-toggle-switch-field .dkel-toggle-switch-label-off {
	display: inline-block;
	text-align: center;
}
.dkel-toggle-switch-field .dkel-toggle-switch-label-on {
	margin-left: 10px;
}
.dkel-toggle-switch-field .dkel-toggle-switch-label-off {
	margin-right: 10px;
}

/* Signature Field */
.dkel-signature-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex-basis: 100%;
	background-color: transparent !important;
	background: none !important;
}
.dkel-signature-field .dkel-signature-canvas {
	border: 1px solid var(--canvas-border-color, #eee);
	background-color: var(--canvas-bg-color, #fff);
	cursor: crosshair;
}