/*
 * GigLad Learning: premium cart (1.2.0, UI/UX audit A3). Loaded only on WooCommerce's cart page in premium mode
 * (Learner\CartCheckout::cart_assets()), inside the site's own header and footer. Styles WooCommerce's cart markup
 * (templates/woocommerce/cart/cart.php: WooCommerce's template plus a back link, a discreet coupon toggle and the
 * gle-cart--single class). Brand: navy #17153a, orange #c24e1b (white text 4.77:1), teal text #127a70, as the checkout.
 * The cart totals area keeps the payment provider's express buttons exactly as they are: nothing here targets them.
 */

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}

body.woocommerce-cart {
	--ct-navy: #17153a;
	--ct-orange: #c24e1b;
	--ct-orange-hover: #a3410f;
	--ct-teal-text: #127a70;
	--ct-ink: #17153a;
	--ct-text: #2b2a40;
	--ct-muted: #5b6478;
	--ct-line: #e3e6ee;
	--ct-field: #8a8592;
	--ct-soft: #f4f6fa;
	--ct-heading: "Plus Jakarta Sans", "Segoe UI", -apple-system, blinkmacsystemfont, roboto, helvetica, arial, sans-serif;
	--ct-body: "Inter", "Segoe UI", -apple-system, blinkmacsystemfont, roboto, helvetica, arial, sans-serif;
}

body.woocommerce-cart .woocommerce {
	color: var(--ct-text);
	font-family: var(--ct-body);
}

/* ---------------------------------------------------------------- back link */
body.woocommerce-cart .gle-cart-back {
	margin: 0 0 16px;
}

body.woocommerce-cart .gle-cart-back a {
	color: var(--ct-teal-text);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-cart .gle-cart-back a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- items: one card per course */
body.woocommerce-cart .woocommerce-cart-form .shop_table.cart,
body.woocommerce-cart .woocommerce-cart-form .shop_table.cart tbody {
	display: block;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table.cart {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: none;
}

body.woocommerce-cart .woocommerce-cart-form .shop_table.cart thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; /* Kept for screen readers. */
}

body.woocommerce-cart .woocommerce-cart-form .cart_item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto auto 40px;
	grid-template-areas: "thumb name qty subtotal remove";
	align-content: center;
	align-items: center;
	gap: 16px;
	margin: 0 0 12px;
	padding: 16px 20px;
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(23, 21, 58, .06);
}

body.woocommerce-cart .woocommerce-cart-form .cart_item td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left !important; /* The theme right-aligns responsive table cells. */
}

/* No "Product:" / "Price:" labels from the responsive table: the card layout says it. */
body.woocommerce-cart .woocommerce-cart-form .cart_item td::before {
	display: none;
	content: none;
}

body.woocommerce-cart .woocommerce-cart-form .product-thumbnail {
	grid-area: thumb;
}

body.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
	display: block;
	width: 72px;
	height: 72px;
	max-width: none;
	border-radius: 10px;
	object-fit: cover;
}

body.woocommerce-cart .woocommerce-cart-form .product-name {
	grid-area: name;
	color: var(--ct-ink);
	font-family: var(--ct-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

body.woocommerce-cart .woocommerce-cart-form .product-name a {
	color: inherit;
	text-decoration: none;
}

body.woocommerce-cart .woocommerce-cart-form .product-name a:hover {
	text-decoration: underline;
}

/* The unit price repeats the subtotal for one-off courses; the subtotal is the figure shown. */
body.woocommerce-cart .woocommerce-cart-form .product-price {
	display: none !important;
}

body.woocommerce-cart .woocommerce-cart-form .product-quantity {
	grid-area: qty;
}

body.woocommerce-cart .woocommerce-cart-form .product-subtotal {
	grid-area: subtotal;
	color: var(--ct-ink);
	font-family: var(--ct-heading);
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}

body.woocommerce-cart .woocommerce-cart-form .product-remove {
	grid-area: remove;
	justify-self: end;
}

body.woocommerce-cart .woocommerce-cart-form .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ct-line);
	border-radius: 50%;
	background: #fff;
	color: var(--ct-muted) !important;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart .woocommerce-cart-form .product-remove a.remove:hover,
body.woocommerce-cart .woocommerce-cart-form .product-remove a.remove:focus-visible {
	border-color: #8e1b1b;
	background: #fdecec;
	color: #8e1b1b !important;
}

/* Every item a one-off course: nothing to change in quantity, nothing to update. */
body.woocommerce-cart .gle-cart--single .product-quantity,
body.woocommerce-cart .gle-cart--single button[name="update_cart"] {
	display: none !important;
}

body.woocommerce-cart .gle-cart--single .cart_item {
	grid-template-columns: 72px minmax(0, 1fr) auto 40px;
	grid-template-areas: "thumb name subtotal remove";
}

/* ---------------------------------------------------------------- actions row: the discreet coupon */
body.woocommerce-cart .woocommerce-cart-form .actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	text-align: left !important; /* The theme centres the actions row on narrow screens. */
}

body.woocommerce-cart .gle-cart-coupon {
	width: 100%;
}

body.woocommerce-cart .woocommerce-cart-form tbody tr:last-child {
	display: block;
}

body.woocommerce-cart .gle-cart-coupon summary {
	display: inline-block;
	color: var(--ct-teal-text);
	font-weight: 600;
	cursor: pointer;
}

body.woocommerce-cart .gle-cart-coupon summary:focus-visible {
	outline: 3px solid var(--ct-teal-text);
	outline-offset: 2px;
}

body.woocommerce-cart .gle-cart-coupon .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	float: none;
}

body.woocommerce-cart .gle-cart-coupon #coupon_code {
	width: 220px;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--ct-field);
	border-radius: 10px;
	font: inherit;
	font-size: 16px; /* Phones do not zoom on focus. */
}

body.woocommerce-cart .gle-cart-coupon #coupon_code:focus {
	border-color: var(--ct-teal-text);
	outline: 3px solid var(--ct-teal-text);
	outline-offset: 1px;
}

body.woocommerce-cart .woocommerce-cart-form .actions .button {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--ct-navy);
	border-radius: 10px;
	background: #fff;
	color: var(--ct-navy);
	font-family: var(--ct-body);
	font-weight: 600;
}

body.woocommerce-cart .woocommerce-cart-form .actions .button:hover {
	background: var(--ct-soft);
}

/* ---------------------------------------------------------------- totals card and checkout button */
body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 460px;
	margin-left: auto;
	padding: 20px 24px;
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(23, 21, 58, .06);
}

body.woocommerce-cart .cart-collaterals .cart_totals h2 {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ct-ink);
	font-family: var(--ct-heading);
	font-size: 20px;
	font-weight: 700;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	margin: 0 0 16px;
	border: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--ct-line);
	background: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	text-align: right !important;
}

body.woocommerce-cart .cart-collaterals .cart_totals .order-total th,
body.woocommerce-cart .cart-collaterals .cart_totals .order-total td {
	border-bottom: 0;
	color: var(--ct-ink);
	font-size: 18px;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-bottom: 0;
	border-radius: 12px;
	background: var(--ct-orange);
	color: #fff;
	font-family: var(--ct-heading);
	font-size: 17px;
	font-weight: 700;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background: var(--ct-orange-hover);
	color: #fff;
}

/* ---------------------------------------------------------------- empty cart */
body.woocommerce-cart .return-to-shop .button {
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 12px;
	background: var(--ct-navy);
	color: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 767px) {
	body.woocommerce-cart .woocommerce-cart-form .cart_item,
	body.woocommerce-cart .gle-cart--single .cart_item {
		grid-template-columns: 56px minmax(0, 1fr) 40px;
		grid-template-areas:
			"thumb name remove"
			"thumb subtotal remove";
		gap: 4px 12px;
		padding: 14px;
	}

	body.woocommerce-cart .woocommerce-cart-form:not(.gle-cart--single) .cart_item {
		grid-template-areas:
			"thumb name remove"
			"thumb subtotal remove"
			"qty qty qty";
	}

	body.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
		width: 56px;
		height: 56px;
	}

	body.woocommerce-cart .woocommerce-cart-form .product-name {
		font-size: 16px;
	}

	body.woocommerce-cart .woocommerce-cart-form .product-subtotal {
		font-size: 16px;
	}

	body.woocommerce-cart .gle-cart-coupon .coupon {
		width: 100%;
	}

	body.woocommerce-cart .gle-cart-coupon #coupon_code {
		flex: 1 1 160px;
		width: auto;
	}

	body.woocommerce-cart .cart-collaterals .cart_totals {
		max-width: none;
		padding: 16px;
	}
}

/* ---------------------------------------------------------------- 1.2.1: WooCommerce's notices on the cart page
   ("... has been added to your cart." with its "Continue shopping" link, and any error or info notice) as premium
   cards. WooCommerce's message, link and behaviour are unchanged: styling only. */
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	position: relative;
	margin: 0 0 16px;
	padding: 14px 18px 14px 52px;
	border: 1px solid var(--ct-line);
	border-left: 4px solid var(--ct-teal-text);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(23, 21, 58, .06);
	color: var(--ct-ink);
	font-family: var(--ct-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	list-style: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
	border-left-color: #b42318;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error::before {
	position: absolute;
	top: 50%;
	left: 18px;
	margin: 0;
	color: var(--ct-teal-text);
	transform: translateY(-50%);
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error::before {
	color: #b42318;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .button {
	order: 2;
	float: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--ct-teal-text);
	border-radius: 10px;
	background: #fff;
	color: var(--ct-teal-text);
	font-family: var(--ct-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button:hover,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .button:hover {
	background: #e7f7f4;
	color: #0e5e58;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button:focus-visible,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .button:focus-visible {
	outline: 3px solid var(--ct-teal-text);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
		padding: 14px 14px 14px 46px;
		font-size: 14px;
	}

	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before,
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before,
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error::before {
		top: 16px;
		left: 15px;
		transform: none;
	}

	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button,
	body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info .button {
		min-height: 44px; /* Touch target. */
	}
}