/* Donations (cart, checkout, order confirmation): only what the harvested WooCommerce/Elementor CSS
   does not cover. The markup reuses the WooCommerce classes, so everything else is styled by the
   theme exactly as on the old site. Every rule is scoped to .mm-donations, the wrapper of the
   donation components. */

/* The Elementor notices widget on the old pages hid every notice with an inline style block until its
   JavaScript moved them into place. This site has no such script, so a notice of the donation
   components is shown directly (two classes beat the single class of that block). */
.mm-donations .woocommerce-notices-wrapper,
.mm-donations .woocommerce-message,
.mm-donations .woocommerce-info,
.mm-donations .woocommerce-error {
    display: block;
}

.mm-donations .woocommerce-notices-wrapper:empty {
    display: none;
}

.mm-donations {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.mm-donations select,
.mm-donations input.input-text,
.mm-donations textarea.input-text {
    max-width: 100%;
    box-sizing: border-box;
}

/* The message under a field after a refused checkout. */
.mm-donations .mm-field-error {
    display: block;
    margin-top: 4px;
    color: #b81c23;
    font-size: 0.875em;
    line-height: 1.4;
}

.mm-donations .form-row.woocommerce-invalid input.input-text,
.mm-donations .form-row.woocommerce-invalid select,
.mm-donations .form-row.woocommerce-invalid textarea {
    border-color: #b81c23;
}

.mm-donations .form-row.woocommerce-invalid label {
    color: #b81c23;
}

/* The update button of the cart carries a caption here: without the auto-update script of the old
   Elementor cart widget the visitor needs a visible button to apply a changed quantity. */
.mm-donations .woocommerce-cart-form td.actions button[name="update_cart"] {
    display: inline-block;
}

/* Phones: the tables stack like WooCommerce's responsive table, tap targets are at least 44px and
   inputs use 16px so iOS does not zoom in while typing. Readable at 360px without sideways scrolling. */
@media (max-width: 768px) {
    .mm-donations table.shop_table_responsive thead {
        display: none;
    }

    .mm-donations table.shop_table_responsive tbody tr,
    .mm-donations table.shop_table_responsive tbody th,
    .mm-donations table.shop_table_responsive tbody td {
        display: block;
    }

    .mm-donations table.shop_table_responsive tbody td {
        text-align: right;
    }

    .mm-donations table.shop_table_responsive tbody td[data-title]::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 700;
    }

    .mm-donations table.shop_table_responsive tbody td.product-thumbnail {
        display: none;
    }

    .mm-donations table.shop_table_responsive tbody td.actions {
        text-align: left;
    }

    .mm-donations a.remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .mm-donations .button,
    .mm-donations button,
    .mm-donations .wc-forward,
    .mm-donations .wc-backward {
        min-height: 44px;
        box-sizing: border-box;
    }

    .mm-donations input,
    .mm-donations select,
    .mm-donations textarea {
        font-size: 16px;
    }

    .mm-donations input[type="checkbox"],
    .mm-donations input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    .mm-donations .quantity input.qty {
        min-height: 44px;
        width: 5em;
    }

    .mm-donations ul.order_details li {
        float: none;
        border-right: 0;
        margin-bottom: 0.75em;
    }
}