/**
 * Classic WooCommerce cart and checkout.
 *
 * Loaded only when Sunny's Cart and checkout layout setting is "classic".
 * The shared product/account rules stay in woo.css; this file owns the two
 * purchase layouts and deliberately uses the mode body class as a boundary.
 */

/* Cart: one product is a media row with price/quantity stacked at the end. */
.sunny-cart-checkout-classic.woocommerce-cart table.cart tr.cart_item {
	grid-template-columns: 28px 104px minmax(180px, 1fr) minmax(120px, auto);
	grid-template-areas:
		"remove image name subtotal"
		"remove image name quantity";
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-remove {
	grid-area: remove;
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-thumbnail {
	grid-area: image;
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-name {
	grid-area: name;
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-price {
	display: none;
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-quantity {
	grid-area: quantity;
	justify-self: end;
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-subtotal {
	grid-area: subtotal;
	justify-self: end;
	align-self: end;
}

.sunny-cart-checkout-classic.woocommerce-cart table.cart .quantity .qty {
	width: 112px;
	min-height: 38px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	text-align: center;
}

/* Checkout: heading and summary share one grid cell. Keeping them in separate
 * rows made the review start only after the full billing column had ended. */
.sunny-cart-checkout-classic.woocommerce-checkout form.checkout {
	grid-template-areas: "customer summary";
}

.sunny-cart-checkout-classic.woocommerce-checkout #customer_details {
	grid-area: customer;
}

.sunny-cart-checkout-classic.woocommerce-checkout #order_review_heading,
.sunny-cart-checkout-classic.woocommerce-checkout #order_review {
	grid-area: summary;
}

.sunny-cart-checkout-classic.woocommerce-checkout #order_review_heading {
	position: relative;
	top: auto;
	align-self: start;
	padding-bottom: 0;
	border-bottom: 0;
	pointer-events: none;
	padding: 10px;
}

.sunny-cart-checkout-classic.woocommerce-checkout #order_review {
	position: sticky;
	top: var(--space-6);
	padding-top: calc(10px + 42px);
	border-top: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
}

.sunny-cart-checkout-classic.woocommerce-checkout #customer_details .col-1,
.sunny-cart-checkout-classic.woocommerce-checkout #customer_details .col-2 {
	display: flow-root;
}

.sunny-cart-checkout-classic.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"email email"
		"first last"
		"company company"
		"country country"
		"address-one address-one"
		"address-two address-two"
		"state city"
		"postcode phone";
	column-gap: var(--space-4);
}

.sunny-cart-checkout-classic.woocommerce-checkout .form-row {
	float: none;
	width: 100%;
	min-width: 0;
	padding: 0;
}

.sunny-cart-checkout-classic.woocommerce-checkout .form-row-first,
.sunny-cart-checkout-classic.woocommerce-checkout .form-row-last {
	display: flex;
	width: 100%;
}

.sunny-cart-checkout-classic.woocommerce-checkout .form-row-last {
	float: none;
}

.sunny-cart-checkout-classic.woocommerce-checkout #billing_email_field { grid-area: email; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_first_name_field { grid-area: first; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_last_name_field { grid-area: last; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_company_field { grid-area: company; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_country_field { grid-area: country; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_address_1_field { grid-area: address-one; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_address_2_field { grid-area: address-two; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_state_field { grid-area: state; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_city_field { grid-area: city; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_postcode_field { grid-area: postcode; }
.sunny-cart-checkout-classic.woocommerce-checkout #billing_phone_field { grid-area: phone; }

.sunny-cart-checkout-classic.woocommerce-checkout .form-row input.input-text,
.sunny-cart-checkout-classic.woocommerce-checkout .form-row textarea,
.sunny-cart-checkout-classic.woocommerce-checkout .form-row select,
.sunny-cart-checkout-classic.woocommerce-checkout .select2-container {
	width: 100% !important;
	max-width: none;
}

.sunny-cart-checkout-classic.woocommerce-checkout .form-row input.input-text,
.sunny-cart-checkout-classic.woocommerce-checkout .form-row select,
.sunny-cart-checkout-classic.woocommerce-checkout .select2-selection {
	min-height: 50px;
}

/* Order summary product rows. */
.sunny-cart-checkout-classic #order_review td.product-name {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: var(--space-1) var(--space-4);
	align-items: start;
}

.sunny-cart-checkout-classic .sunny-checkout-product {
	display: contents;
}

.sunny-cart-checkout-classic .sunny-checkout-product__media {
	position: relative;
	grid-column: 1;
	grid-row: 1 / span 2;
}

.sunny-cart-checkout-classic .sunny-checkout-product__image {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	object-fit: cover;
	background: var(--surface-sunken);
}

.sunny-cart-checkout-classic .sunny-checkout-product__quantity {
	position: absolute;
	top: -7px;
	right: -7px;
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border: 2px solid var(--surface-card);
	border-radius: var(--radius-pill);
	background: var(--surface-inverse);
	color: var(--neutral-0);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: var(--fw-extrabold);
	line-height: 1;
}

.sunny-cart-checkout-classic .sunny-checkout-product__name {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	font-family: var(--font-display);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-snug);
	color: var(--fg-primary);
}

/* Core variations and product-addon metadata are printed after the filtered
 * product name. Pin both to the detail column directly below the title. */
.sunny-cart-checkout-classic #order_review td.product-name dl.variation {
	grid-column: 2;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 2px var(--space-2);
	margin: var(--space-1) 0 0;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: var(--fw-regular);
	line-height: var(--lh-snug);
}

.sunny-cart-checkout-classic #order_review td.product-name dl.variation dt,
.sunny-cart-checkout-classic #order_review td.product-name dl.variation dd,
.sunny-cart-checkout-classic #order_review td.product-name dl.variation p {
	margin: 0;
}

.sunny-cart-checkout-classic #order_review td.product-name dl.variation dt {
	color: var(--fg-muted);
	font-weight: var(--fw-semibold);
}

.sunny-cart-checkout-classic #order_review td.product-name dl.variation dd {
	min-width: 0;
	color: var(--fg-primary);
}

.sunny-cart-checkout-classic #order_review td.product-name .wcpa_cart_meta.wcpa_cart_meta {
	grid-column: 2;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 2px var(--space-2);
	margin: var(--space-1) 0 0;
	font-size: var(--fs-caption);
}

.sunny-cart-checkout-classic #order_review td.product-name .wcpa_cart_meta_item {
	display: contents;
}

.sunny-cart-checkout-classic #order_review td.product-name .wcpa_cart_meta_item-label,
.sunny-cart-checkout-classic #order_review td.product-name .wcpa_cart_meta_item-value {
	min-width: 0;
	margin: 0;
}

.sunny-cart-checkout-classic #order_review .cart_item td {
	padding-block: var(--space-4);
}

.sunny-cart-checkout-classic #order_review .cart_item .product-total {
	font-family: var(--font-display);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-black);
	color: var(--fg-primary);
}

/* Published coupons, surfaced as the coloured chips in Checkout.dc.html. */
.sunny-cart-checkout-classic #order_review .sunny-checkout-coupons-row td {
	padding: var(--space-5) 0;
	border-top: 1px solid var(--border-default);
}

.sunny-checkout-coupons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.sunny-checkout-coupons__title {
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.sunny-checkout-coupons__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.sunny-checkout-coupon {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 36px;
	padding: 5px 10px 5px 6px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--fg-primary);
	font-size: var(--fs-caption);
}

.sunny-checkout-coupon:hover {
	border-color: var(--accent-500);
	background: var(--accent-50);
}

.sunny-checkout-coupon__code {
	padding: 4px 8px;
	border-radius: var(--radius-pill);
	background: var(--surface-accent);
	color: var(--fg-on-accent);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: var(--fw-black);
	letter-spacing: 0.03em;
}

.sunny-checkout-coupon.is-applied {
	border-color: var(--surface-brand);
	background: var(--brand-50);
	opacity: 1;
}

.sunny-checkout-coupon.is-applied .sunny-checkout-coupon__code {
	background: var(--surface-brand);
	color: var(--fg-on-brand);
}

.sunny-checkout-coupon.is-applied .sunny-checkout-coupon__label {
	color: var(--brand-700);
}

/* Price hierarchy and the selected discount use the same teal/magenta
 * contrast as the reference design. */
.sunny-cart-checkout-classic #order_review .cart-subtotal th,
.sunny-cart-checkout-classic #order_review .shipping th,
.sunny-cart-checkout-classic #order_review .tax-rate th {
	font-family: var(--font-body);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-regular);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-secondary);
}

.sunny-cart-checkout-classic #order_review .cart-subtotal td,
.sunny-cart-checkout-classic #order_review .shipping td,
.sunny-cart-checkout-classic #order_review .tax-rate td {
	font-weight: var(--fw-bold);
	color: var(--fg-primary);
}

.sunny-cart-checkout-classic #order_review tr.cart-discount th,
.sunny-cart-checkout-classic #order_review tr.cart-discount td,
.sunny-cart-checkout-classic #order_review tr.cart-discount a {
	color: var(--brand-700);
}

.sunny-cart-checkout-classic #order_review tr.order-total th,
.sunny-cart-checkout-classic #order_review tr.order-total td {
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-default);
	font-family: var(--font-display);
	font-size: var(--fs-heading-sm);
	font-weight: var(--fw-black);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-primary);
}

.sunny-cart-checkout-classic #order_review tr.order-total td strong,
.sunny-cart-checkout-classic #order_review tr.order-total td .amount {
	font-size: var(--fs-heading-md);
}

.sunny-cart-checkout-classic #payment {
	margin-top: var(--space-5);
	border: 1px solid var(--border-default);
	background: var(--surface-sunken);
}

.sunny-cart-checkout-classic #place_order {
	min-height: 50px;
	box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
	.sunny-cart-checkout-classic.woocommerce-checkout #order_review_heading {
		margin-top: var(--space-6);
	}

	.sunny-cart-checkout-classic.woocommerce-checkout #order_review {
		position: static;
	}
}

@media (max-width: 640px) {
	.sunny-cart-checkout-classic.woocommerce-cart table.cart tr.cart_item {
		grid-template-columns: 80px minmax(0, 1fr);
		grid-template-areas:
			"image name"
			"image subtotal"
			"image quantity";
	}

	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-remove {
		grid-area: auto;
	}

	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-thumbnail,
	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-name,
	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-quantity,
	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-subtotal {
		grid-column: auto;
		grid-row: auto;
	}

	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-quantity,
	.sunny-cart-checkout-classic.woocommerce-cart table.cart td.product-subtotal {
		justify-self: start;
	}

	.sunny-cart-checkout-classic.woocommerce-checkout .form-row-first,
	.sunny-cart-checkout-classic.woocommerce-checkout .form-row-last {
		display: flex;
		float: none;
		width: 100%;
	}

	.sunny-cart-checkout-classic.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"email"
			"first"
			"last"
			"company"
			"country"
			"address-one"
			"address-two"
			"state"
			"city"
			"postcode"
			"phone";
	}
}