/* geral */
#product-combination {display: flex; flex-direction: column; gap: 26px;}
.combination-options {display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600;}
.combination-name {margin-bottom: 8px; font-weight: 500;}
.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 #d1d1d1; border-radius: 4px; width: 100%; padding: 6px 16px; font-size: 14px; white-space: nowrap; cursor: pointer; margin: 0;}
.button-combination:hover {border-color: #888;}
.button-combination.selected {border-color: var(--primary); background: var(--primary); color: #fff;}
/* opcao normal */

/* opcao com imagem */
.button-combination-image {display: flex; flex-direction: column; border: 1px solid #ddd; padding: 4px; white-space: nowrap; cursor: pointer; border-radius: 4px;}
.button-combination-image:hover {border-color: #888;}
.button-combination-image.selected {border-color: #000;}
/* 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;}