/**
 * Added-to-cart notice.
 *
 * Markup: WooCommerce's notices/success.php (.woocommerce-message), with the
 * message split into .pnp-cart-notice__text + .pnp-cart-notice__actions by the
 * wc_add_to_cart_message_html filter in mu-plugins/peaknow-mobile-ux.php.
 *
 * main.css lays .woocommerce-message out as a flex row with
 * justify-content: space-between. The sentence, "View cart" and "Continue
 * shopping" used to be three separate flex items (the sentence an anonymous
 * one, unreachable by any selector), so space-between spread them across the
 * whole content width - sentence hard left, View cart marooned in the middle,
 * Continue shopping hard right.
 *
 * With the two wrappers there are exactly two flex items, so main.css's own
 * space-between now produces the intended result - sentence left, buttons
 * together on the right - and this file only has to size those two boxes, make
 * the secondary button secondary, and stack everything on phones.
 *
 * Deliberately scoped to the two wrapper classes: every other WooCommerce
 * notice (errors, coupon messages, cart notices) keeps the layout it has today.
 *
 * Loaded after main.css (inc/theme-enqueue.php), so no !important is needed.
 */

.woocommerce-message .pnp-cart-notice__text {
	flex: 1 1 16rem;
	min-width: 0;
}

.woocommerce-message .pnp-cart-notice__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-shrink: 0;
}

/* Same box as the primary button, so both stay exactly the same height: the
   border is always there, it is only visible on the secondary one. */
.woocommerce-message .pnp-cart-notice__actions a.button {
	border: 1px solid transparent;
}

/* "View cart" stays the solid purple CTA; "Continue shopping" is secondary. */
.woocommerce-message .pnp-cart-notice__actions a.button.wc-continue-shopping {
	background: var(--second-color, #fff);
	border-color: var(--main-color, #5246B8);
	color: var(--main-color, #5246B8);
}

.woocommerce-message .pnp-cart-notice__actions a.button.wc-continue-shopping:hover {
	background: var(--second-color-light, #f6f1fb);
	color: var(--main-color, #5246B8);
}

/* Phones: sentence, then both buttons stacked full width.
   Only the wrap is set on the notice itself - the two wrappers then claim a
   full row each, which is what breaks them onto separate lines. */
@media (max-width: 767px) {
	.woocommerce-message {
		flex-wrap: wrap;
	}

	.woocommerce-message .pnp-cart-notice__text {
		flex: 1 1 100%;
	}

	.woocommerce-message .pnp-cart-notice__actions {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-message .pnp-cart-notice__actions a.button {
		width: 100%;
		text-align: center;
	}
}