/*
 * GradientEditor v1.0.0
 * https://github.com/lucky-yoolk/gradienteditor.js
 * Licensed under the MIT license
 */
.gradient-editor {padding:1em;background: rgba(0,0,0,0.2);border-radius:6px;outline:transparent;width: 100%}
.gradient-editor * {box-sizing: border-box;}

/* Toolbar - Colors Stop Slider */
.gradient-editor .gradient-input-wrapper {padding-bottom:1em;}
.gradient-editor .gradient-input {width:100%;}

/* Slider */
.gradient-editor .gradient-slider-wrapper {border-radius: 6px;outline:transparent;position: relative}
.gradient-editor .gradient-slider {height:32px;background: transparent;position: relative;margin:0 11px;}
.gradient-editor .gradient-slider:hover {cursor: crosshair}
.gradient-editor .color-stop {width: 16px;height: 16px;position: absolute;top: 50%;transform: translate(-50%, -50%);cursor: pointer;background: white;border:1px solid #fff;box-shadow: 0 0 6px rgba(0,0,0,0.1);border-radius:8px;}

/* Toolbar - Colors */
.gradient-editor .controls-container {display: flex;align-items:start;gap:1em;padding-top:1em;}
.gradient-editor .color-pickers-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));gap: 1em;flex-grow: 1;align-items: start}
.color-picker-wrapper {display: flex;align-items: center;gap: 6px;padding:6px;background: rgba(0,0,0,0.2);border-radius:6px;}
.color-picker-wrapper input[type="color"] {appearance: none;-moz-appearance: none;-webkit-appearance: none;background: none;border: 0;cursor: pointer;height: 20px;padding: 0;width: 20px;border-radius:4px;box-shadow: 0 0 6px rgba(0,0,0,0.1);}
.color-picker-wrapper input[type="color"]:focus{border-radius: 0;outline: none;}
.color-picker-wrapper input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;}
.color-picker-wrapper input[type="color"]::-webkit-color-swatch{border: 0;border-radius: 0;}
.color-picker-wrapper input[type="color"]::-moz-color-swatch,
.color-picker-wrapper input[type="color"]::-moz-focus-inner{border: 0;}
.color-picker-wrapper input[type="color"]::-moz-focus-inner{padding: 0;}

/* Toolbar - Colors - Delete Color Button */
.color-picker-remove {appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;cursor: pointer;height: 20px;padding: 0;width: 20px;border-radius:4px;background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') center center no-repeat;transition: .2s;}
.color-picker-remove:hover {background-color: rgba(0,0,0,0.6)}

/* Toolbar - Radial Direction, Toggle Direction & Themes buttons */
.gradient-editor .gradient-utils {display: flex;align-items:start;gap:1em;}

/* Toolbar - Toggle Direction Button */
.toggle-direction-wrapper {border-radius:4px;flex-shrink: 0;}
.toggle-direction-button {display: block;appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;cursor: pointer;height: 32px;padding: 0;width: 32px;border-radius:6px;background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"/></svg>') center center no-repeat;transition: .2s;}
.toggle-direction-button:hover {background-color: rgba(0,0,0,0.4)}

/* Toolbar - Themes Button */
.gradient-picker-button {
	display: block;flex-shrink: 0;appearance: none;-moz-appearance: none;-webkit-appearance: none;border: 0;cursor: pointer;height: 32px;padding: 0;width: 32px;border-radius:6px;background: rgba(0,0,0,0.2) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="16px" width="16px"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="white" d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>') center center no-repeat;transition: .2s;
}
.gradient-picker-button:hover {background-color: rgba(0,0,0,0.4)}

/* Toolbar - Radial Direction Control */
.direction-control-wrapper {
	position: relative; 
	width: 32px; 
	height: 32px; 
	outline: 0; 
	border-radius: 50%; 
	display: flex;
	align-items: center; 
	justify-content: center;
	background-color: rgba(0,0,0,0.2);
	flex-shrink: 0;
}
.direction-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: rgb(255, 255, 255);
	border-radius: 50%;
	cursor: grab;
}

/* Gradients Popup */
.gradient-picker-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	border-radius: 8px;
	width:420px;
	max-width:90%;
}
.gradient-picker-popup .gradients-templates {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	height: 320px;
	overflow: scroll;
	padding: 20px;
}
.gradient-picker-popup .gradient-preview {
	appearance: none;-moz-appearance: none;-webkit-appearance: none;
	width: 120px;
	height: 80px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
	font-weight: normal;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	border:none;
	transition: transform 0.2s, border 0.2s;
	text-align: center;
	outline:0;
	padding: 20px;
}
.gradient-picker-popup .gradient-preview:hover {
	transform: scale(1.05);
	border-color: #ddd;
}
.gradient-picker-popup .gradient-picker-close {
	position: absolute;
	top:0;
	right:0;
	border: none;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background:  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%23666" height="10px" width="10px" version="1.1" id="Capa_1" viewBox="0 0 490 490" xml:space="preserve"><polygon points="456.851,0 245,212.564 33.149,0 0.708,32.337 212.669,245.004 0.708,457.678 33.149,490 245,277.443 456.851,490 489.292,457.678 277.331,245.004 489.292,32.337 "/></svg>') center center no-repeat;
}
.gradient-picker-popup .gradient-picker-close:hover {oapcity:0.6}

/* Alpha Range */
.gradient-editor input[type=range] {
	flex-grow: 1;
	outline: 0;
	border: 0;
	border-radius:4px;
	width: 100px;
	max-width: 100%;
	margin:0;
	overflow: hidden;
	height: 20px;
	-webkit-appearance: none;
	background-color: rgba(0,0,0,0.2);
	transition: box-shadow 0.2s ease-in-out;
}
.gradient-editor input[type=range]::-webkit-slider-runnable-track {
	height: 20px;
	-webkit-appearance: none;
	color: #444;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}
.gradient-editor input[type=range]::-webkit-slider-thumb {
	width: 20px;
	-webkit-appearance: none;
	height: 20px;
	cursor: ew-resize;
	background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23999" height="10px" width="10px" viewBox="0 0 192 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64L0 448c0 17.7 14.3 32 32 32s32-14.3 32-32L64 64zm128 0c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 384c0 17.7 14.3 32 32 32s32-14.3 32-32l0-384z"/></svg>') center center no-repeat;
	border-radius: 4px;
	-webkit-transition: box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
	position: relative;
}
.gradient-editor input[type=range]:active::-webkit-slider-thumb {}
.gradient-editor input[type=range]::-moz-range-progress {background-color: transparent;}
.gradient-editor input[type=range]::-moz-range-track {background-color: transparent;}
.gradient-editor input[type=range]::-ms-fill-lower {background-color: transparent;}
.gradient-editor input[type=range]::-ms-fill-upper {background-color: transparent;}

/* Tooltip */
.gradient-tooltip {
	position:absolute;
	padding:5px 10px;
	background:rgba(0,0,0,0.8);
	color:#fff;
	border-radius:4px;
	visibility:hidden;
	font-size:12px;
	top:-20px;
	left:50%;
	transform:translate(-50%, -50%);
	transition: .2s;
}

/* Hide Elements */
.gradient-editor .oto-hidden {clip: rect(0 0 0 0); clip-path: inset(50%);height: 1px;overflow: hidden;position: absolute;white-space: nowrap; width: 1px;}