/**
 * GGD — site-wide cart UI: the slide-out drawer and add-to-cart toasts.
 *
 * The drawer markup and styles used to live with the shop archive, which meant
 * they only existed on /shop/. Adding to cart from a product page, a related
 * product or anywhere else fired Woo's AJAX into a page with no drawer and no
 * listener. Both now load on every Woo page.
 *
 * Colours are the Elementor globals with hex fallbacks, same as the rest of the
 * shop, so this matches without importing .ggd-shop's scoped tokens.
 */

/* ---- cart drawer ---- */

.ggd-cart {
	position: fixed;
	inset: 0;
	z-index: 99998;
	visibility: hidden;
	background: rgba(15, 23, 42, 0.5);
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ggd-cart.is-open {
	visibility: visible;
	opacity: 1;
}

.ggd-cart__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(400px, 100%);
	color: var(--e-global-color-text, #0F172A);
	background: var(--e-global-color-fba0803, #FFFFFF);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.ggd-cart.is-open .ggd-cart__panel {
	transform: translateX(0);
}

.ggd-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	font-size: 15px;
	border-bottom: 1px solid var(--e-global-color-ca37f13, #1E40AF1A);
}

.ggd-cart__close {
	width: 32px;
	height: 32px;
	padding: 0;
	cursor: pointer;
	background-color: var(--e-global-color-ced7ef0, #F8FAFC);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 15px 15px;
	border: 0;
	border-radius: 8px;
}

.ggd-cart__body {
	flex: 1;
	padding: 1.25rem;
	overflow-y: auto;
}

/* ---- mini cart contents ---- */

.ggd-cart__body ul.woocommerce-mini-cart {
	padding: 0;
	margin: 0;
	list-style: none;
}

.ggd-cart__body .woocommerce-mini-cart__empty-message {
	margin: 0;
	font-size: 14px;
	color: var(--e-global-color-55d9783, #475569);
}

.ggd-cart__body .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	margin: 0;
	font-size: 15px;
	border-top: 1px solid var(--e-global-color-ca37f13, #1E40AF1A);
}

.ggd-cart__body .woocommerce-mini-cart__buttons {
	display: flex;
	gap: 0.6rem;
	margin: 0;
}

.ggd-cart__body .woocommerce-mini-cart__buttons a {
	flex: 1 1 0;
	padding: 0.7rem 1rem;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	border-radius: 8px;
}

/* View cart is the quiet option; checkout carries the one red accent. */
.ggd-cart__body .woocommerce-mini-cart__buttons a:not(.checkout) {
	color: var(--e-global-color-text, #0F172A);
	background: var(--e-global-color-fba0803, #FFFFFF);
	border: 1px solid var(--e-global-color-2da9a21, #1E40AF2E);
}

.ggd-cart__body .woocommerce-mini-cart__buttons a.checkout {
	color: #FFFFFF;
	background: #BE1E2D;
	border: 1px solid #BE1E2D;
}

/* ---- Woo's injected "View cart" link ---- */

/* After an AJAX add, wc-add-to-cart.js appends <a class="added_to_cart"> right
   after the button. It sits outside the card's inner padding, so it hangs off
   the left edge and pushes the card taller the moment anything is added. The
   toast carries "View cart →" and the drawer opens by itself, so this is a
   third route to the same place. Hidden rather than aligned. */
.woocommerce a.added_to_cart,
a.added_to_cart.wc-forward {
	display: none;
}

/* ---- toasts ---- */

/* Bottom LEFT on purpose: the drawer slides in from the right and is 400px
   wide, so a right-hand toast lands underneath it at the moment both appear. */
.ggd-toaster {
	position: fixed;
	bottom: 1.25rem;
	left: 1.25rem;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-start;
	pointer-events: none;
}

.ggd-toast {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	width: min(340px, calc(100vw - 2.5rem));
	padding: 0.85rem 1rem;
	color: var(--e-global-color-text, #0F172A);
	background: var(--e-global-color-fba0803, #FFFFFF);
	border: 1px solid var(--e-global-color-2da9a21, #1E40AF2E);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: auto;
}

.ggd-toast.is-in {
	opacity: 1;
	transform: translateY(0);
}

.ggd-toast__tick {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-color: var(--e-global-color-primary, #1D4ED8);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	border-radius: 50%;
}

.ggd-toast__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ggd-toast__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.ggd-toast__body {
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--e-global-color-55d9783, #475569);
	overflow-wrap: anywhere;
}

.ggd-toast__action {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--e-global-color-primary, #1D4ED8);
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.ggd-toast__action:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ggd-toast {
		transition: none;
	}
}