/*
 * Cart & checkout — LME Career Reinvention Profile.
 *
 * Matches the single-product redesign: Inter, teal #4fc3a1, soft white cards,
 * gold accents and pill buttons. WooCommerce cart/checkout are blocks rendered
 * client-side, so this is a CSS-only skin — no templates or checkout logic are
 * touched, and Apple Pay / Stripe / PayPal keep working.
 *
 * Everything is scoped with the `woocommerce-cart` / `woocommerce-checkout`
 * body classes so no other page on the site is affected.
 */

body.woocommerce-cart .wc-block-cart,
body.woocommerce-checkout .wc-block-checkout {
	--crp-teal: #4fc3a1;
	--crp-teal-dark: #17785b;
	--crp-teal-light: #e8f7ef;
	--crp-gold: #e8a33d;
	--crp-ink: #1e2733;
	--crp-muted: #5a6b65;
	--crp-line: #d9e7e3;
	--crp-radius: 14px;
	--crp-shadow: 0 12px 30px rgba(23, 120, 91, 0.08);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--crp-ink);
	line-height: 1.6;
}

body.woocommerce-cart .wc-block-cart *,
body.woocommerce-cart .wc-block-cart *::before,
body.woocommerce-cart .wc-block-cart *::after,
body.woocommerce-checkout .wc-block-checkout *,
body.woocommerce-checkout .wc-block-checkout *::before,
body.woocommerce-checkout .wc-block-checkout *::after {
	box-sizing: border-box;
}

body.woocommerce-cart .wc-block-cart a,
body.woocommerce-checkout .wc-block-checkout a {
	color: var(--crp-teal-dark);
}

body.woocommerce-cart .wc-block-cart a:hover,
body.woocommerce-checkout .wc-block-checkout a:hover {
	color: var(--crp-teal);
}

/* ---- Notices ---- */
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-cart .wc-block-components-notices .wc-block-components-notice-banner,
body.woocommerce-checkout .wc-block-components-notices .wc-block-components-notice-banner {
	border: 1px solid var(--crp-line) !important;
	border-left: 4px solid var(--crp-teal) !important;
	border-radius: 10px !important;
	background: var(--crp-teal-light) !important;
	color: var(--crp-ink) !important;
	box-shadow: none !important;
}

body.woocommerce-cart .wc-block-components-notice-banner.is-error,
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
	border-left-color: #b3372a !important;
	background: #fbeceb !important;
}

body.woocommerce-cart .wc-block-components-notice-banner svg,
body.woocommerce-checkout .wc-block-components-notice-banner svg {
	fill: var(--crp-teal-dark) !important;
}

body.woocommerce-cart .wc-block-components-notice-banner.is-error svg,
body.woocommerce-checkout .wc-block-components-notice-banner.is-error svg {
	fill: #b3372a !important;
}

/* ---- Buttons ---- */
body.woocommerce-cart .wc-block-cart .wc-block-components-button,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button {
	background-color: var(--crp-teal) !important;
	color: #fff !important;
	border: 1px solid var(--crp-teal) !important;
	border-radius: 50px !important;
	padding: 15px 30px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-button:hover,
body.woocommerce-cart .wc-block-cart .wc-block-components-button:focus,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button:focus {
	background-color: #fff !important;
	color: var(--crp-teal) !important;
	border-color: var(--crp-teal) !important;
}

/* Outlined / secondary (e.g. "Return to cart") */
body.woocommerce-cart .wc-block-cart .wc-block-components-button.outlined,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.outlined {
	background-color: #fff !important;
	color: var(--crp-teal-dark) !important;
	border-color: var(--crp-line) !important;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-button.outlined:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.outlined:hover {
	border-color: var(--crp-teal) !important;
	background-color: var(--crp-teal-light) !important;
}

/* Text-style links used as buttons (e.g. "Remove item") */
body.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link,
body.woocommerce-checkout .wc-block-checkout .wc-block-cart-item__remove-link {
	background: none !important;
	border: 0 !important;
	color: var(--crp-muted) !important;
	font-size: 13.5px !important;
	text-decoration: underline;
	padding: 0 !important;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-item__remove-link:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-cart-item__remove-link:hover {
	color: #b3372a !important;
}

/* ---- Cart layout ---- */
body.woocommerce-cart .wc-block-cart__main {
	min-width: 0;
}

body.woocommerce-cart .wc-block-cart-items {
	background: #fff;
	border: 1px solid var(--crp-line);
	border-radius: var(--crp-radius);
	box-shadow: var(--crp-shadow);
	overflow: hidden;
}

body.woocommerce-cart .wc-block-cart-items__header {
	background: var(--crp-teal-light);
	color: var(--crp-teal-dark);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* WooCommerce zeroes the outer padding on the first/last header cells, so the
   labels sit flush against the card edge. Give them room. */
body.woocommerce-cart .wc-block-cart-items__header th {
	padding: 13px 16px !important;
}

/* Same inner padding on the item rows so the product/price content does not
   touch the card edges. */
body.woocommerce-cart .wc-block-cart-items__row > td:first-child {
	padding-left: 16px !important;
}

body.woocommerce-cart .wc-block-cart-items__row > td:last-child {
	padding-right: 16px !important;
}

body.woocommerce-cart .wc-block-cart-items__row {
	border-top: 1px solid var(--crp-line);
}

body.woocommerce-cart .wc-block-cart-items__row:first-child {
	border-top: 0;
}

body.woocommerce-cart .wc-block-cart-item__image img {
	border-radius: 10px;
	border: 1px solid var(--crp-line);
}

body.woocommerce-cart .wc-block-components-product-name {
	color: var(--crp-ink);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-cart .wc-block-components-product-metadata {
	color: var(--crp-muted);
	font-size: 14px;
}

body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-cart-item__total-price {
	color: var(--crp-teal-dark);
	font-weight: 600;
}

/* Quantity selector */
body.woocommerce-cart .wc-block-components-quantity-selector,
body.woocommerce-checkout .wc-block-components-quantity-selector {
	border: 1.5px solid var(--crp-line);
	border-radius: 50px;
	background: #fff;
	overflow: hidden;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button,
body.woocommerce-checkout .wc-block-components-quantity-selector__button {
	background: #fff;
	color: var(--crp-teal-dark);
	border: 0;
	box-shadow: none;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover,
body.woocommerce-checkout .wc-block-components-quantity-selector__button:hover {
	background: var(--crp-teal-light);
	color: var(--crp-teal-dark);
}

body.woocommerce-cart .wc-block-components-quantity-selector__input,
body.woocommerce-checkout .wc-block-components-quantity-selector__input {
	background: #fff;
	border: 0;
	color: var(--crp-ink);
	font-weight: 600;
	box-shadow: none;
}

/* ---- Order totals (cart sidebar) ---- */
body.woocommerce-cart .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-sidebar {
	min-width: 0;
}

body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	background: transparent;
}

body.woocommerce-cart .wc-block-cart__totals-title {
	color: var(--crp-teal-dark);
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 14px;
}

body.woocommerce-cart .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-components-totals-item {
	font-size: 15px;
}

body.woocommerce-cart .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__label {
	color: var(--crp-muted);
}

body.woocommerce-cart .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-item__value {
	color: var(--crp-ink);
	font-weight: 600;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--crp-teal-dark);
	font-size: 18px;
	font-weight: 800;
}

/* Coupon panel */
body.woocommerce-cart .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-panel__button {
	color: var(--crp-teal-dark);
	font-weight: 600;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 4px 0;
}

body.woocommerce-cart .wc-block-components-totals-coupon,
body.woocommerce-checkout .wc-block-components-totals-coupon {
	border-top: 1px solid var(--crp-line);
	padding-top: 14px;
}

/* ---- Proceed to checkout ---- */
body.woocommerce-cart .wc-block-cart__submit-button {
	width: 100% !important;
}

body.woocommerce-cart .wc-block-cart__payment-options {
	margin-top: 12px;
}

/* ---- Empty cart ---- */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	background: #fff;
	border: 1px solid var(--crp-line);
	border-radius: var(--crp-radius);
	box-shadow: var(--crp-shadow);
	padding: 40px 28px;
	text-align: center;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	color: var(--crp-teal-dark);
	font-weight: 700;
}

/* ============================================================ */
/*  Checkout                                                    */
/* ============================================================ */

/* ---- Steps as cards ---- */
body.woocommerce-checkout .wc-block-components-checkout-step {
	background: #fff;
	border: 1px solid var(--crp-line);
	border-radius: var(--crp-radius);
	box-shadow: var(--crp-shadow);
	padding: 24px;
	margin-bottom: 18px;
}

body.woocommerce-checkout .wc-block-components-checkout-step:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title {
	color: var(--crp-teal-dark);
	font-size: 19px;
	font-weight: 700;
}

body.woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin-bottom: 14px;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wc-block-components-checkout-step__description-text {
	color: var(--crp-muted);
	font-size: 14.5px;
}

/* ---- Form fields (checkout + cart coupon) ---- */
/* NB: do NOT set input padding here. WooCommerce swaps the padding when a
   field is active (16px 12px -> 24px 9px 8px) so the floating label sits above
   the text; overriding it makes the label overlap the value. */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input textarea,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-cart .wc-block-components-totals-coupon input[type="text"] {
	border: 1.5px solid var(--crp-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--crp-ink) !important;
	box-shadow: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-cart .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-text-input textarea:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-cart .wc-block-components-totals-coupon input[type="text"]:focus {
	border-color: var(--crp-teal-dark) !important;
	box-shadow: 0 0 0 3px var(--crp-teal-light) !important;
	outline: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-cart .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-select label {
	color: var(--crp-muted);
	font-size: 14px;
}

/* Floating-label active state: lift the label above the value and push the
   input text down. WooCommerce's own active rule is outranked on this site, so
   pin it here (otherwise the label sits on top of the email/value text). */
body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-text-input:focus-within label,
body.woocommerce-cart .wc-block-components-text-input.is-active label,
body.woocommerce-cart .wc-block-components-text-input:focus-within label {
	top: 6px !important;
	transform: scale(0.82) !important;
	transform-origin: top left;
	color: var(--crp-teal-dark);
}

body.woocommerce-checkout .wc-block-components-text-input.is-active input,
body.woocommerce-checkout .wc-block-components-text-input:focus-within input,
body.woocommerce-cart .wc-block-components-text-input.is-active input,
body.woocommerce-cart .wc-block-components-text-input:focus-within input {
	padding: 24px 9px 8px !important;
}

/* Checkboxes / radios */
body.woocommerce-checkout .wc-block-components-checkbox__input,
body.woocommerce-checkout .wc-block-components-radio-control__input {
	accent-color: var(--crp-teal);
}

body.woocommerce-checkout .wc-block-components-checkbox__mark {
	fill: var(--crp-teal) !important;
}

body.woocommerce-checkout .wc-block-components-checkbox__label,
body.woocommerce-checkout .wc-block-components-radio-control__label {
	color: var(--crp-ink);
}

/* ---- Payment methods as selectable cards ---- */
body.woocommerce-checkout .wc-block-components-radio-control__option {
	border: 1.5px solid var(--crp-line);
	border-radius: 12px;
	padding: 14px 16px !important;
	margin-bottom: 10px;
	background: #fff;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--crp-teal);
	background: var(--crp-teal-light);
	box-shadow: 0 0 0 1px var(--crp-teal) inset;
}

body.woocommerce-checkout .wc-block-components-radio-control__label {
	font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
	color: var(--crp-muted);
}

/* ---- Order summary (checkout sidebar) ---- */
body.woocommerce-checkout .wc-block-components-order-summary {
	background: #fff;
	border: 1px solid var(--crp-line);
	border-radius: var(--crp-radius);
	box-shadow: var(--crp-shadow);
	padding: 18px 20px;
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	color: var(--crp-teal-dark);
	font-weight: 700;
}

body.woocommerce-checkout .wc-block-components-order-summary-item {
	border-top: 1px solid var(--crp-line);
	padding-top: 12px;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:first-of-type {
	border-top: 0;
	padding-top: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	border: 1px solid var(--crp-line);
}

body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	color: var(--crp-teal-dark);
	font-weight: 600;
}

/* ---- Place order ---- */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
	width: 100% !important;
	padding: 17px 30px !important;
	font-size: 17px !important;
}

body.woocommerce-checkout .wc-block-checkout__terms {
	color: var(--crp-muted);
	font-size: 14px;
}

/* ---- Responsive ---- */
@media (max-width: 780px) {
	body.woocommerce-cart .wc-block-components-sidebar-layout,
	body.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: flex !important;
		flex-direction: column;
		gap: 18px;
	}

	body.woocommerce-checkout .wc-block-components-checkout-step {
		padding: 18px 16px;
	}

	body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
		padding: 16px 24px !important;
	}
}

@media (max-width: 560px) {
	body.woocommerce-cart .wc-block-cart-items__header {
		display: none;
	}

	body.woocommerce-cart .wc-block-cart-item__image img {
		max-width: 72px;
	}
}