/* The prijstabel's additions to live's stylesheet, emitted by Views/brand/webshop/Partials/_Prijstabel.cshtml
   and _Bouwstoftabel.cshtml, and by Winkelwagen.cshtml for its pop-ups.
   brand-webshop.css stays live's main.css verbatim; what the rebuild changes in behaviour lives here.
   px only, as elsewhere on the platform. */

/* Live's stylesheet gives [hidden] no !important, and its display rules would beat it. */
[data-prijstabel] [hidden],
[data-prijstabel-form] [hidden] {
    display: none !important;
}

/* Without JavaScript the table is all there is, at every width; prijstabel.js swaps in the selector. */
.prijstabel__scroll {
    overflow-x: auto;
}

/* Live's info icon and mobile "more info" are links into a Bootstrap modal; here they are buttons that
   open a popover, so they lose the button chrome. */
.master-table__info,
.info-list__info,
.products-list__more-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.master-table__info {
    color: #524b45;
}

.info-modal[popover] {
    border: 0;
    padding: 0;
    background: transparent;
    width: calc(100% - 20px);
    max-width: 500px;
}

.info-modal[popover]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.info-modal .add-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: #524b45;
}

/* The bouwstof table's ten m³ columns: live fixes its wrapper at 1800px and scrolls it. */
.master-table--bouwstof {
    min-width: 1800px;
}

.js-container-price .master-table__btn {
    margin-top: 16px;
}