/* geral */
#product-combination {display: flex; flex-direction: column; gap: 26px;}
.combination-options {display: flex; align-items: center; gap: 6px;}
.combination-name {margin-bottom: 10px; font-weight: 800; text-transform: uppercase; font-size: 18px;}
.combination-error {color: #dc3545;}
#combination-loading {display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #ffffffab; justify-content: center; align-items: center}
/* geral */


/* observações */
.combination-observations {display: flex; color: #514B48; margin-bottom: 16px; font-size: 12px; }
.combination-observations span::after:not(:last-child) {content: '|'; margin: 0 16px;}
/* observações */

/* opção de cor */
.combination-option-color {display: flex; justify-content: center; align-items: center;}
.combination-option-color .color-select {border: 1px solid #fff; border-radius: 100px; display: flex; align-items: center; justify-content: center; padding: 2px;}
.combination-option-color .color-select:hover {border-color: #aaa;}
.combination-option-color .selected,.combination-option-color .selected:hover {border-color: #000;}
.button-color { border-radius: 50%; width: 24px; height: 24px; border: 1px solid #c4c4c4; cursor: pointer; margin: 0;}
/* opção de cor */

/* opcao normal */
.button-combination {border: 1px solid #ddd; border-radius: 4px; width: 100%; padding: 5px 12px; white-space: nowrap; cursor: pointer;}
.button-combination:hover {border-color: #888;}
.button-combination.selected {border-color: #000; background: #ebebeb;}
/* opcao normal */

/* opcao com imagem */
.button-combination-image {display: flex; flex-direction: column-reverse; border: 1px solid #ddd; white-space: nowrap; cursor: pointer; border-radius: 4px; position: relative;}
.button-combination-image .combination-option-name {padding: 6px 10px; text-align: center; font-size: 14px; font-weight: 800; text-transform: uppercase;}
.button-combination-image:hover {border-color: #888;}
.button-combination-image.selected {border-color: var(--primary);}
.button-combination-image.selected .combination-option-name {color: var(--primary);}
.btn-image-active.selected::after {content: '\F26A'; position: absolute; top: 6px; right: 6px; z-index: 100; color: #fff; font-size: 30px; font-family: "bootstrap-icons"; color: var(--green);}
.btn-image-active .combination-option-name {padding: 6px 2px;}
@media (max-width: 991px) {
	.button-combination-image .combination-option-name {font-size: 12px;}
}
@media (max-width: 370px) {
	.button-combination-image .combination-option-name {font-size: 11px;}
}

@media (min-width: 992px) and (max-width: 1399px) {
	.button-combination-image .combination-option-name {text-wrap: auto;}
}
/* opcao com imagem */

/* thumb */
.product-combination-colors {width: 100%; margin: 4px 0;}
.product-combination-colors ul {padding: 0;  list-style: none;  display: flex;  flex-wrap: wrap;  gap: 4px; justify-content: center;margin: 0;}
.product-combination-colors a {display: flex;}
.type-color {display: inline-block; width: 18px; height: 18px; cursor: pointer; background-size: contain; border-radius: 50%; border: 1px solid #ddd;}
.type-button {cursor: pointer; border: 1px solid #ddd; min-width: 40px; text-align: center; padding-left: 10px; padding-right: 10px;}
/* thumb */

#no-combination {display: block;}
.inactive {opacity: .6;} 
.active {opacity: 1;}