/* Option matrix on the product page (Pricing product/option-matrix.phtml). */

.mc-option-matrix {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 26px;
    /* Same column as the add-to-cart button and Magento's options (Standard product_view.css). */
    max-width: var(--mc-product-control-width, 420px);
}

.mc-option-matrix__group {
    border: 0;
    margin: 0;
    padding: 0;
}

.mc-option-matrix__title {
    color: var(--mc-text-color, #1f1f1f);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    padding: 0;
}

.mc-option-matrix__row {
    align-items: center;
    border-top: 1px solid var(--mc-border-color-soft, #e6e6e6);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 0;
}

.mc-option-matrix__row:last-child {
    border-bottom: 1px solid var(--mc-border-color-soft, #e6e6e6);
}

.mc-option-matrix__label {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.mc-option-matrix__name {
    color: var(--mc-text-color, #1f1f1f);
    font-size: 15px;
    font-weight: 600;
}

.mc-option-matrix__price,
.mc-option-matrix__note {
    color: var(--mc-text-muted-color, #6b6b6b);
    font-size: 13px;
    margin: 0;
}

.mc-option-matrix__stepper {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.mc-product-page .mc-option-matrix__step {
    align-items: center;
    background: var(--mc-surface-color, #fff);
    border: 1px solid var(--mc-border-color, #c9c9c9);
    border-radius: 4px;
    box-shadow: none;
    color: var(--mc-text-color, #1f1f1f);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.mc-product-page .mc-option-matrix__step:hover {
    border-color: var(--mc-border-color-hover, #9aa0a6);
}

.mc-option-matrix__icon {
    height: 16px;
    pointer-events: none;
    width: 16px;
}

.mc-product-page .mc-option-matrix__input {
    appearance: textfield;
    border: 1px solid var(--mc-border-color, #c9c9c9);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    height: 40px;
    margin: 0;
    padding: 0 6px;
    text-align: center;
    width: 64px;
}

.mc-option-matrix__error,
.mc-option-matrix__hint {
    color: var(--mc-danger-color, #c62828);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.mc-option-matrix__hint[hidden] {
    display: none;
}