/* Base Styles */
/**
*/
/* Tab Styles */


.tab-container {
	margin-bottom: 20px;
}

.tab-header {
	display: flex;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
}

.tab-button {
	padding: 10px 20px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-bottom: none;
	cursor: pointer;
	margin-right: 5px;
	border-radius: 5px 5px 0 0;
}

.tab-button.active {
	background: var(--color-brand);
	color: white;
	border-color: var(--color-brand);
}

.tab-content {
	display: none;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 0 0 5px 5px;
}

.tab-content.active {
	display: block;
}

/* Slider Styles */
._slider-container {
	width: 100%;
	/*margin: 20px auto;
	padding: 15px;*/
	padding: 5px;*/
	box-sizing: border-box;
	border: 1px solid #eee;
	border-radius: 8px;
}

._slider-title {
	margin-bottom: 8px;
	font-weight: bold;
	color: #333;
}

._slider-track {
	height: 30px;
	/*background: #f0f0f0;*/
	position: relative;
	margin: 30px 0;
	/*border-radius: 4px; */
	border: 1px solid var(--color-brand);
}


._slider-range {
	height: 100%;
	position: absolute;
	border: 2px solid var(--color-brand);
	background: var(--color-brand);
}


._slider-handle {
	width: 5px;
	height: 40px;
	background: var(--color-brand);
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

._slider-labels {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
}

._slider-label {
	position: absolute;
	text-align: center;
	font-size: 14px;
	color: #555;
	transform: translateX(-50%);
	top: 120%;
	pointer-events: auto;
	cursor: pointer;
	padding: 2px 5px;
	border-radius: 3px;
	transition: background 0.2s;
}


._slider-label:first-child {
	transform: translateX(0);
	text-align: left;
}
._slider-label:last-child {
	transform: translateX(-100%);
	text-align: right;
}

.tickmarker, .tickmarkerEnd {
	background-color: white;
	width: 2px;
	height: 30px;
	top: -36px;
	position: absolute;
	z-index: 1;
	border-top: 1px solid var(--color-brand);
	border-bottom: 1px solid var(--color-brand);					
}

.tickmarkerEnd {
	background-color: transparent;
	border-top:none;
	border-bottom:none;
}

._slider-label:hover {
	background: rgba(76, 175, 80, 0.1);
}

.select-image-container {
	font-family: 'Arial', sans-serif;
	margin: 20px auto;
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 8px;
}

.select-image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
	margin-top: 15px;
}

.select-image-item {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	background: white;
	text-align: center;
}

.select-image-item.selected {
	/*border-color: var(--color-brand);*/
	box-shadow: 0 0 0 2px var(--color-brand);
}

.image-container {
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
}

.svg-display {
	width: 60px;
	height: 60px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.select-image-item p {
	margin: 0;
	padding: 8px 5px;
	text-align: center;
	background: #f8f8f8;
	font-size: 12px;
	font-weight: 600;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-top: 1px solid #eee;
}

.select-image-item.selected p {
	background: var(--color-brand);
	color: white;
}

/* Fancy Color Styles */
.fancy-color-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

.fancy-color-name {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;	
}

.fancy-color-item {
	width: 80px;
	max-height: 105px;
	border: 1px solid #ddd;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 11px;
}

.fancy-color-item.selected {
	/*border-color: var(--color-brand);*/
	box-shadow: 0 0 0 2px var(--color-heading);
}

.fancy-color-box {
	font-size: 12px;
}

.fancy-color-box {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-bottom: 5px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0.25" d="M40.523 1.003a39.4 39.4 0 0 0-6.856.508c-8.34 1.379-15.604 5.166-21.58 11.249-2.035 2.07-3.335 3.684-4.832 6-3.958 6.123-6.054 12.9-6.241 20.184C.81 46.834 2.899 54.4 7.086 60.928c5.641 8.794 14.497 15.008 24.504 17.186 1.489.324 4.163.736 5.498.844h.05c1.478.112 6.173-.013 7.63-.203 8.874-1.16 16.542-4.92 22.824-11.192 6.2-6.19 9.939-13.825 11.184-22.82.297-2.145.299-7.366.003-9.52-.28-2.04-.772-4.45-1.242-6.064A39.09 39.09 0 0 0 47.346 1.676a39 39 0 0 0-6.823-.673Zm1.499 1.641c2.841.17 5.894.676 8.514 1.434.688.2 1.665.529 2.468.822.375.137.699.262.95.364-.072.185-.147.38-.26.656-.29.714-.703 1.692-1.164 2.754-.462 1.064-.89 2.037-1.207 2.744-.075.167-.12.26-.18.396-.118-.114-.203-.194-.352-.34-.6-.586-1.435-1.415-2.39-2.37a710 710 0 0 1-6.226-6.302zm-4.066.01-1.42 1.4-5.03 4.957c-1.722 1.696-2.5 2.458-2.942 2.862a672.59 672.59 0 0 1-2.788-6.48c.277-.132.696-.304 1.203-.49 1.034-.378 2.41-.81 3.68-1.133 2.485-.633 4.717-.965 7.297-1.117ZM40 2.9l5.066 5.115a824 824 0 0 1 3.882 3.943c.443.454.778.8 1.048 1.082-.215.109-.414.21-.718.359-.893.439-2.128 1.034-3.486 1.68-2.718 1.295-5.25 2.499-5.603 2.665l-.397.186-.73-.348c-1.278-.61-3.574-1.716-6.628-3.194-1.24-.6-2.31-1.108-2.759-1.31q.006-.005.01-.011c.342-.349.816-.823 1.338-1.335 1.05-1.03 3.597-3.535 5.663-5.57L40 2.9Zm15.48 3.016c.042.015.038.009.092.031.401.166 1.094.515 2.14 1.078 2.703 1.454 5.594 3.516 7.694 5.466l-6.076.004-6.709.003.02-.047a678 678 0 0 1 2.676-6.174l.162-.362Zm-31.198.102c.013.027.024.04.035.068.144.344.874 2.032 1.643 3.797l1.003 2.307.113.26c-.188.007-.29.016-.573.021-1.11.02-2.983.026-5.96.024l-5.903-.003c1.717-1.575 3.764-3.145 5.69-4.327a54 54 0 0 1 3.833-2.092l.12-.055Zm-10.785 8.057h6.95c2.08 0 3.973.007 5.343.018.595.005 1.037.01 1.407.017-.13.43-.306 1-.501 1.627-.402 1.29-.843 2.717-.983 3.178a284 284 0 0 1-1.237 3.962c-.165.513-.303.933-.404 1.226-.043.125-.075.213-.102.287a8 8 0 0 1-.492.196c-.612.228-1.77.634-3.954 1.398a1869 1869 0 0 0-4.896 1.72c-.425.15-.783.274-1.102.385a185 185 0 0 1-.014-1.423 903 903 0 0 1-.015-5.467v-7.125Zm45.802 0h7.005v2.615c0 1.788.033 5.222.073 7.645.022 1.313.03 2.41.026 3.17-.001.17-.005.252-.008.386-.317-.103-.687-.224-1.161-.383a588 588 0 0 1-3.987-1.35c-1.44-.493-2.876-.988-3.956-1.367-.54-.19-.992-.35-1.308-.465-.115-.043-.19-.07-.265-.1-.01-.026-.016-.038-.027-.07a35 35 0 0 1-.278-.798 136 136 0 0 1-.83-2.567c-.745-2.369-1.324-4.222-1.717-5.49l-.369-1.199c.373-.005.82-.01 1.419-.013 1.38-.01 3.286-.014 5.382-.014Zm-30.518.35c.248.113.527.241.86.401 3.193 1.525 5.5 2.63 7.016 3.363.527.254.836.406 1.176.572l-6.442 2.634a940 940 0 0 1-4.622 1.877c-.358.144-.584.233-.855.341l.102-.32c.274-.869.645-2.054 1.046-3.348.879-2.831 1.355-4.365 1.615-5.193l.104-.328Zm22.129.005.276.866a1703 1703 0 0 1 2.597 8.274c-.85-.34-2.657-1.065-5.86-2.346a4857 4857 0 0 1-6.15-2.467c.615-.29 1.573-.745 2.761-1.314a779 779 0 0 1 5.153-2.447c.534-.25.917-.427 1.223-.566Zm16.978.627c1.513 1.694 3.11 3.808 4.305 5.795.359.599.878 1.558 1.331 2.444.418.817.746 1.526.87 1.837l-.01.002a377.692 377.692 0 0 0-3.058 1.27 434 434 0 0 1-3.338 1.394v-2.38c0-1.82-.028-5.267-.062-7.67l-.039-2.692ZM11.92 15.3l.002 5.36h-.001v.622a1500 1500 0 0 1-.013 6.705l-.068-.03-2.205-1.003a297 297 0 0 0-3.849-1.732l-.162-.069c.31-.779 1.463-3.042 2.194-4.274 1.096-1.845 2.525-3.752 4.102-5.58Zm27.846 4.4c.018.005.027.01.05.018q.16.06.46.174c.395.152.96.373 1.65.644 1.378.543 3.26 1.291 5.308 2.111l7.21 2.887 2.705 6.652a6644 6644 0 0 1 3.004 7.392l.104.259-.325.76c-.236.551-1.64 3.854-3.123 7.347l-2.6 6.118-5.72 2.383c-3.274 1.364-6.654 2.77-7.504 3.12l-1.318.544-3.516-1.435c-4.767-1.946-7.56-3.088-9.17-3.756a93 93 0 0 1-1.625-.686c-.126-.056-.199-.09-.26-.118l-.046-.095c-.076-.16-.182-.393-.307-.677-.25-.568-.581-1.34-.93-2.174-.7-1.674-2.058-4.91-3.018-7.193-.48-1.14-.915-2.189-1.23-2.958-.157-.385-.285-.7-.372-.92l-.052-.135.16-.391c.16-.384.39-.935.676-1.61.571-1.35 1.36-3.2 2.226-5.22l3.053-7.114.911-.371a6056 6056 0 0 0 11.208-4.585 95 95 0 0 1 2.108-.855c.334-.127.362-.11.283-.117Zm16.724 6.58.588.188c1.064.346 2.48.812 3.898 1.282s2.837.944 3.907 1.305c.467.158.828.283 1.131.387l-.066.124a475.171 475.171 0 0 1-3.362 6.044c-.264.464-.795 1.419-1.187 2.136-.055.1-.093.162-.145.255l-.019-.043c-.297-.702-.7-1.675-1.134-2.746l-2.84-6.99q-.458-1.13-.771-1.943Zm-33.324.134c-.063.152-.076.19-.157.384-.537 1.275-1.502 3.527-3.183 7.433-.582 1.352-1.116 2.587-1.506 3.484l-.144.33c-.05-.093-.069-.125-.125-.233-.49-.93-1.242-2.385-2.3-4.448a363 363 0 0 0-1.63-3.14c-.113-.212-.194-.377-.279-.547.301-.111.679-.247 1.155-.416a692 692 0 0 1 7.653-2.672l.516-.175Zm51.84.19c.106.322.253.761.5 1.49 1.094 3.22 1.653 6.152 1.893 9.862l-.478-.468c-.959-.94-2.273-2.236-3.713-3.663l-4.586-4.546c.364-.157.882-.379 1.473-.627.731-.306 2.22-.934 3.312-1.395a72 72 0 0 1 1.426-.587zm-69.967.045.649.283c.704.31 1.636.726 2.57 1.144s1.869.84 2.577 1.163c.19.086.308.142.46.212-.166.17-.28.288-.57.579-.952.95-2.636 2.607-5.523 5.442a324 324 0 0 1-2.571 2.5c.149-2.359.482-4.74.97-6.78.17-.712.568-2.016.934-3.116.183-.55.36-1.053.496-1.408.004-.009.005-.011.007-.02Zm62.35 3.706c.271.262.614.595 1.059 1.03.978.955 2.32 2.276 3.787 3.728l4.891 4.84-4.886 4.787a854 854 0 0 1-3.788 3.69c-.44.425-.776.748-1.047 1.006-.15-.26-.316-.546-.537-.934a580 580 0 0 1-1.99-3.542 584 584 0 0 1-1.987-3.587c-.272-.496-.5-.915-.66-1.215l-.148-.282c.002 0 .002 0 .003-.014q.104-.233.394-.78c.39-.732 1.041-1.904 2.053-3.696l2.168-3.845c.261-.465.497-.87.687-1.191zm-54.899.225c.021.038.032.055.054.097.255.47.6 1.124.968 1.843.742 1.447 1.942 3.775 2.668 5.176l1.173 2.262-2.472 4.888c-.718 1.421-1.379 2.713-1.865 3.647-.18.346-.305.582-.43.818l-.327-.308c-.56-.532-1.347-1.286-2.262-2.17-1.831-1.765-4.18-4.046-6.28-6.102l-.796-.781 1.572-1.546c3.333-3.278 5.46-5.366 6.762-6.632.584-.569.952-.923 1.235-1.192Zm48.727 11.112.396.702c.54.963 1.251 2.237 1.956 3.509s1.406 2.54 1.927 3.492c.214.39.372.681.513.943l-.347.114c-.635.209-1.508.493-2.465.803-1.884.611-4.41 1.436-5.713 1.864h-.003l-.095.033c-.467.154-.844.274-1.216.395l.304-.72 1.53-3.606c1.166-2.745 2.491-5.857 3.171-7.443.016-.038.026-.051.04-.085zm-58.589.198c.285.276.567.553 1.028 1.002 2.6 2.53 5.337 5.191 6.937 6.746.344.333.638.626.88.87-.25.14-.493.275-1.052.573-1.246.666-1.535.823-3.95 2.147-.47.257-.898.49-1.218.66a19 19 0 0 1-.277-.71 53 53 0 0 1-.91-2.743c-.746-2.482-1.23-5.406-1.438-8.545Zm15.556.013a1416.156 1416.156 0 0 1 2.873 6.815c.306.731.973 2.32 1.484 3.53.189.45.339.816.485 1.175-.59-.212-2.989-1.056-5.357-1.885a752 752 0 0 1-3.052-1.076c-.274-.097-.457-.163-.65-.233.117-.243.248-.51.433-.882.457-.919 1.093-2.185 1.797-3.572a459 459 0 0 1 1.82-3.552zm59.21.044c-.26 4.07-.91 7.237-2.284 11.05-.116.323-.227.592-.325.818-.138-.069-.274-.135-.436-.222-.504-.27-2.148-1.124-3.685-1.912-.764-.392-1.46-.756-1.961-1.025-.05-.026-.072-.04-.119-.065l.088-.09c.393-.397.937-.94 1.536-1.528 4.025-3.958 6.428-6.301 7.186-7.026Zm-63.752 9.898.893.304a844.552 844.552 0 0 1 7.518 2.626 205 205 0 0 1 1.684.607c.037.014.023.013.05.019.05.097.146.323.281.707.272.767.717 2.17 1.5 4.672a1109 1109 0 0 1 1.518 4.9c-.366.014-.804.017-1.394.023-1.36.016-3.239.025-5.305.025h-6.895l.07-7.036a2069 2069 0 0 1 .08-6.846Zm52.739.09.021 1.466c.018 1.403.04 3.336.061 5.458l.071 7.09h-7.172c-2.143 0-4.092-.013-5.502-.024-.631 0-1.109-.014-1.492-.022.008-.027.01-.039.019-.065.139-.484.33-1.143.541-1.857.424-1.432 1.177-4 1.675-5.71l.812-2.793 5.712-1.855a831 831 0 0 1 4.258-1.372c.42-.134.713-.226.996-.314zm-54.346.093-.066 6.55a1774 1774 0 0 1-.07 6.09 49 49 0 0 1-1.204-1.418c-.899-1.12-1.963-2.66-2.801-4.056-.325-.541-.881-1.576-1.347-2.484a47 47 0 0 1-.595-1.193l-.06-.13c.138-.085.258-.16.567-.334.865-.486 2.477-1.357 5.419-2.94l.157-.084Zm55.936.057.333.176c.701.37 2.41 1.256 3.81 1.973l1.803.926c.112.06.177.092.268.14-.076.166-.151.333-.26.559a52 52 0 0 1-1.033 2.019c-.814 1.5-2.355 3.833-3.48 5.267-.376.48-.893 1.076-1.304 1.54l-.003-1.666a609 609 0 0 0-.079-7.634l-.055-3.3ZM53.58 56.08c-.543 1.846-2.12 7.214-2.484 8.464q-.181.62-.324 1.056c-.3-.145-.679-.33-1.152-.563a856 856 0 0 1-7.48-3.734l-.511-.261c.148-.062.238-.102.41-.175.968-.408 2.292-.961 3.736-1.559 1.034-.428 2.476-1.026 3.207-1.331l3.568-1.488c.492-.206.721-.289 1.03-.409Zm-27.764.14c.668.255 1.548.6 2.524.987 2.026.806 4.378 1.763 5.622 2.301.304.132 1.503.624 2.72 1.12.4.161.706.288 1.033.423a350 350 0 0 0-2.728 1.31c-1.032.5-2.376 1.147-2.98 1.436-.609.29-1.743.832-2.52 1.205-.31.149-.567.27-.803.381a862.448 862.448 0 0 1-1.5-4.773l-1.21-3.885zm13.88 5.717c.086.038.193.088.336.155.32.15.767.364 1.295.62a536 536 0 0 1 3.82 1.876c1.376.682 2.744 1.366 3.766 1.883.412.209.715.365.991.508l-.42.442c-.594.62-1.414 1.465-2.317 2.386-1.809 1.844-4.258 4.34-5.444 5.546l-1.719 1.75-5.276-5.223a945 945 0 0 1-4.037-4.016c-.467-.469-.822-.828-1.105-1.116l.28-.142c.62-.311 1.482-.732 2.429-1.187 1.9-.91 4.368-2.096 5.486-2.634a36 36 0 0 1 1.465-.668c.188-.08.342-.14.45-.18Zm-19.264 5.37c2.978 0 4.85 0 5.961.024.29 0 .398.014.59.021-.631 1.529-2.598 6.284-2.73 6.598-.178-.08-.372-.17-.6-.282-3.562-1.78-6.673-3.939-9.183-6.359h5.962zm32.084.218h12.797c-2.446 2.313-5.847 4.646-9.112 6.224h-.011c-.252.121-.467.22-.663.31-.063-.13-.117-.239-.2-.414-.274-.572-.64-1.357-1.03-2.198a226 226 0 0 1-1.782-3.935zm-24.076.477c.28.263.617.58 1.066 1.013 1.032.993 2.447 2.378 3.994 3.911l1.059 1.05 3.42 3.39c-.417-.022-.635-.021-1.833-.134-2.252-.214-4.972-.766-7.224-1.469a56 56 0 0 1-2.198-.764c-.366-.134-.695-.26-.953-.36.071-.195.147-.4.256-.685.282-.733.67-1.712 1.065-2.693s.8-1.967 1.114-2.715c.094-.223.158-.37.234-.544Zm22.62.156c.193.44.836 1.864 1.495 3.317.67 1.477 1.324 2.918 1.472 3.247l-.73.277c-3.423 1.3-6.872 2.063-10.625 2.347-.303.023-.396.025-.677.042a1041.306 1041.306 0 0 1 8.292-8.456c.32-.324.553-.555.772-.774Z"></path></svg>');
}

.combined-output {
	position: relative;
	/*
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width: 800px;
	*/
	padding: 10px 15px;
	background: #fff;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 8px;						
}				

.output-values {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex-grow: 1;						
}

.output-item {
	display: flex;
	align-items: center;
	padding: 5px 10px;
	font-size: 14px;
	border: 1px solid #000;
}

.remove-item {
	margin-left: 5px;
	cursor: pointer;
	font-weight: bold;
}

.url-output {
	padding: 10px;
	background: #f0f0f0;
	border-radius: 4px;
	font-family: monospace;
	word-break: break-all;
	margin-top: 10px;
}

.clear-all {
	color: #666;
	cursor: pointer;
	font-size: 14px;
	display: none; 
	padding: 5px 10px;
	border-radius: 15px;
	margin-left: 8px;
	white-space: nowrap;
}
				
.clear-all:hover {
	color: #333;
	text-decoration: underline;
	background: #e0e0e0;
}

.no-selection {
	color: #666;
	font-style: italic;
}

._slider-inputs {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.input-wrapper {
	position: relative;
	width: 80px;
}

.carat-suffix {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #555;
}

.price-input-wrapper .currency-symbol {
	left: 8px;
	right: auto;
}

.currency-symbol {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #555;
}

._slider-input {
	padding: 5px 25px 5px 5px; /* Added right padding */
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: right;
	width: 100%;
	box-sizing: border-box;
}

.apply-btn {
	color: #fff;
	background: var(--color-brand);
	cursor: pointer;
	font-size: 14px;
	padding: 5px 10px;
	border-radius: 15px;
	margin-left: 8px;
	border: none;
	white-space: nowrap;
}

.apply-btn:hover {
	background: var(--color-primary);
}		

.price-input-wrapper ._slider-input {
	padding-left: 20px; /* More space for currency symbol */
	padding-right: 5px; /* Less space needed on right */
}	
.carat-input-wrapper ._slider-input {
	padding-left: 5px; /* Less space needed on left */
	padding-right: 20px; /* More space for suffix */
}