/**
 * Fortitude Meal Prep front end styles.
 *
 * The delivery notice is deliberately loud. It is the fix for orders getting
 * mixed up between weeks, so it should be the first thing read on the plan
 * page, not small print under the button.
 *
 * Salient's WooCommerce templates are opinionated about the product summary
 * column, so this is written to sit inside it without fighting the theme:
 * full width of its container, own vertical rhythm, no floats.
 */

.fmp-delivery-notice {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid currentColor;
	border-left-width: 4px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.03);
}

.fmp-delivery-notice__dates {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.fmp-delivery-notice__cutoff {
	margin: 0.35rem 0 0;
	font-size: 0.9375rem;
	opacity: 0.85;
}

/* The cart and checkout are narrower; keep it from dominating there. */
.woocommerce-cart .fmp-delivery-notice,
.woocommerce-checkout .fmp-delivery-notice {
	margin-bottom: 1.75rem;
}

@media (max-width: 690px) {
	.fmp-delivery-notice {
		padding: 0.875rem 1rem;
	}

	.fmp-delivery-notice__dates {
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * Contrast on the plan page.
 *
 * Salient's link and button colours assume the dark backgrounds it uses
 * elsewhere. Here the child item table is white and the page behind it is the
 * brand yellow (#ffcf31), so the theme's defaults land at about 1.5:1: meal
 * names in yellow on white, and white on yellow for both the Add to cart
 * button and the "select 5 items" prompt. All three are text a customer has
 * to read in order to order, so they are pinned here.
 *
 * The selectors deliberately carry element names. Salient's rules are
 * class+element, so a class-only selector with the same number of classes
 * loses the tie and the theme keeps winning — that is the trap on this theme,
 * and it is why the button rules also need !important where the theme uses it.
 * --------------------------------------------------------------------------- */

table.mnm_table td.product-details h4.woocommerce-loop-product__title a {
	color: #111; /* 17:1 on the table's white, against 1.5:1 for the theme's yellow */
	font-weight: 600;
	text-decoration: none;
}

table.mnm_table td.product-details h4.woocommerce-loop-product__title a:hover,
table.mnm_table td.product-details h4.woocommerce-loop-product__title a:focus {
	color: #111;
	text-decoration: underline;
	text-decoration-color: #ffcf31; /* the yellow stays as an accent, not as the text */
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* "You have selected 0 items. Please select 5 items to continue." */
form.mnm_form ul.mnm_message_content,
form.mnm_form ul.mnm_message_content li {
	color: #1a1a1a;
	font-weight: 600;
}

/* The call to action. Black on yellow, matching the theme's own Clear
 * selections pill, rather than the theme's white on yellow. */
.woocommerce div.product form.mnm_form button.single_add_to_cart_button {
	background-color: #111 !important;
	color: #fff !important;
	border: 2px solid #111 !important;
	opacity: 1 !important;
}

.woocommerce div.product form.mnm_form button.single_add_to_cart_button:hover,
.woocommerce div.product form.mnm_form button.single_add_to_cart_button:focus {
	background-color: #ffcf31 !important;
	color: #111 !important;
	border-color: #111 !important;
	box-shadow: none !important; /* Salient paints its hover over the background */
}

/* Disabled until five meals are chosen: readable, but clearly not the CTA. */
.woocommerce div.product form.mnm_form button.single_add_to_cart_button.disabled,
.woocommerce div.product form.mnm_form button.single_add_to_cart_button:disabled,
.woocommerce div.product form.mnm_form button.single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.mnm_form button.single_add_to_cart_button:disabled:hover {
	background-color: rgba(0, 0, 0, 0.06) !important;
	color: #3d3d3d !important; /* 7.3:1 on the yellow */
	border: 2px solid rgba(0, 0, 0, 0.3) !important;
	cursor: not-allowed;
}

/* The running total above the button. The theme prices it in the brand yellow,
 * which is the same 1.5:1 problem as everything else on this page. */
.woocommerce div.product form.mnm_form p.mnm_price span.price,
.woocommerce div.product form.mnm_form p.mnm_price span.price * {
	color: #111 !important;
	font-weight: 700 !important;
}

/* Hover keeps a dark ground and white text. Salient paints its own hover over
 * the background, so inverting to yellow here left dark text on a dark ground —
 * white on dark survives whatever the theme paints underneath it. */
.woocommerce div.product form.mnm_form button.single_add_to_cart_button:hover,
.woocommerce div.product form.mnm_form button.single_add_to_cart_button:focus {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #000 !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Meal plan cards on the shop archive.
 *
 * Scoped to product_cat-meal-plans on purpose: the rest of the shop is the
 * client's own styling and is not ours to restyle. The same yellow-on-white
 * price problem does exist shop wide, so this is a candidate to widen later.
 * --------------------------------------------------------------------------- */

ul.products li.product.product_cat-meal-plans span.price {
	display: inline-block !important;
	padding: 0.25em 0.75em !important;
	border-radius: 999px !important;
	background-color: #111 !important;
}

ul.products li.product.product_cat-meal-plans span.price,
ul.products li.product.product_cat-meal-plans span.price * {
	color: #ffcf31 !important; /* 11:1 inside the pill, against 1.4:1 on the card */
	font-weight: 700 !important;
}

/* The Select options control that appears over the card on hover, cart icon
 * included — white on yellow in the theme's styling. */
ul.products li.product.product_cat-meal-plans .product-add-to-cart a.button {
	background-color: #111 !important;
	border-color: #111 !important;
}

ul.products li.product.product_cat-meal-plans .product-add-to-cart a.button,
ul.products li.product.product_cat-meal-plans .product-add-to-cart a.button *,
ul.products li.product.product_cat-meal-plans .product-add-to-cart a.button i {
	color: #fff !important;
}

ul.products li.product.product_cat-meal-plans .product-add-to-cart a.button:hover,
ul.products li.product.product_cat-meal-plans .product-add-to-cart a.button:focus {
	background-color: #000 !important;
	border-color: #000 !important;
	box-shadow: none !important;
}

/* The running total under the quantity stepper. */
.fmp-running-total {
	margin: 0.75rem 0 1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111;
}

/* ---------------------------------------------------------------------------
 * Cart, checkout and Woo notices.
 *
 * Same story as the plan page: Salient paints these on the brand yellow and
 * leaves the text white. "5 Meal Plan has been added to your basket" and the
 * basket's Estimated total were both effectively invisible.
 * --------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	color: #111 !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: #111 !important;
	text-decoration: underline !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #111 !important;
}

a.wc-block-cart__submit-button,
button.wc-block-cart__submit-button {
	background-color: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
	border-radius: 999px !important;
	text-decoration: none !important;
}

a.wc-block-cart__submit-button:hover,
button.wc-block-cart__submit-button:hover {
	background-color: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

/* Block checkout: Place Order was white on yellow like the rest.
 * background-image and box-shadow are cleared too — Salient paints its button
 * states with both, which is what left this one a muddy olive at first. */
button.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions button.wc-block-components-button,
.wc-block-checkout__actions_row button.wc-block-components-button {
	background-color: #111 !important;
	background-image: none !important;
	border-color: #111 !important;
	color: #fff !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	opacity: 1 !important;
	text-decoration: none !important;
}

button.wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions button.wc-block-components-button:hover,
.wc-block-checkout__actions_row button.wc-block-components-button:hover {
	background-color: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

/* Edit Selections in the basket. Resting state is fine — the theme turns the
 * text white on hover, on a yellow page. Pin both states dark. */
.wc-block-cart-item__edit a.wc-block-cart-item__edit-link,
.wc-block-cart-item__edit a.wc-block-cart-item__edit-link:hover,
.wc-block-cart-item__edit a.wc-block-cart-item__edit-link:focus {
	color: #111 !important;
	border-color: #111 !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-decoration: underline !important;
}