/* geral */
#product-combination {display: flex; flex-direction: column; gap: 26px;}
.combination-name {margin-bottom: 8px; font-weight: 500; font-size: 13px;}
.combination-options {display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.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:not(:last-child)::after {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 */

/* opção de cor com imagem */
.button-combination-image.selected .button-color-image {border-color: #000;}
.combination-option-color-image {flex: 1 0 15%; max-width: 15%;}
.combination-option-color-image .combination-option-name {display: none;}
@media (max-width: 991px) {
	.combination-option-color-image {flex: 1 0 18%; max-width: 18%}
}
/* opção de cor com imagem */

/* opção normal */
.button-combination {border: 2px solid #E5E6E5; border-radius: 8px; width: 100%; padding: 12px 24px; white-space: nowrap; cursor: pointer; font-size: 12px; font-weight: 500; margin: 0; line-height: normal;}
.button-combination:hover {border-color: #888;}
.button-combination.selected {border-color: #3C3E3C;}
@media (max-width: 991px) {
	.button-combination {padding: 8px;}
}
/* opção normal */

/* opção com imagem */
.button-color-image {display: flex; flex-direction: column; border: 2px solid #E5E6E5; overflow: hidden; white-space: nowrap; cursor: pointer; border-radius: 8px; margin: 0;}
.button-color-image:hover {border-color: #888;}
.button-color-image .selected {border-color: #3C3E3C;}
/* opção com imagem */

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

/* alertas e estados */
#no-combination {display: block;}
.inactive {opacity: 0.6;}
.active {opacity: 1;}
/* alertas e estados */