/*
 * Boga Jaya Commerce -- branded Cart page (Phase 3A).
 *
 * WooCommerce remains the commerce engine end to end: every value here
 * is rendered from WC()->cart in boga-jaya-commerce-core.php /
 * templates/cart-bjf.php, and the quantity/remove/checkout controls
 * reuse WooCommerce's own form contract so its existing cart.js /
 * cart-fragments.js drive the AJAX behavior -- this file only styles
 * the result, it never computes a price or a total.
 */

.bjf-cart {
	max-width: 1240px;
	margin: 0 auto;
	/* Header clearance (see --bjf-header-clearance in commerce.css) + 40px intentional breathing room. */
	padding: calc(var(--bjf-header-clearance) + 40px) 32px 80px;
}

.bjf-cart,
.bjf-cart-summary {
	--bjf-green: var(--theme-palette-color-1, #55a630);
	--bjf-green-dark: var(--theme-palette-color-2, #438b22);
	--bjf-green-deep: var(--theme-palette-color-3, #213631);
	--bjf-ink: var(--theme-palette-color-4, #0f1a17);
	--bjf-surface: var(--theme-palette-color-6, #F8FAFB);
}

/* ============================================================
   INTRO
   ============================================================ */

.bjf-cart__intro {
	max-width: 640px;
	margin: 0 0 36px;
}

.bjf-cart__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bjf-gold, #c6a15b);
	margin-bottom: 12px;
}

.bjf-cart__title {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 10px;
}

.bjf-cart__text {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.72;
	margin: 0;
}

/* ============================================================
   LAYOUT -- 65 / 35 desktop split
   ============================================================ */

.bjf-cart__layout {
	display: grid;
	grid-template-columns: 65fr 35fr;
	gap: 28px;
	align-items: start;
}

.bjf-cart__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bjf-cart__summary-wrap {
	position: sticky;
	top: 24px;
}


/* ============================================================
   CART ITEM ROW
   ============================================================ */

.bjf-cart-item {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #ffffff;
	border: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(15, 26, 23, 0.03);
	transition: opacity 0.15s ease;
}

/* Row-level processing state while its own quantity request is in
   flight -- deliberately subtle, scoped to just this row, never a
   full-page spinner/overlay. Controls inside the row are genuinely
   disabled for the duration (see .qty:disabled and .is-disabled
   below): assets/cart.js still queues the latest desired value if the
   user manages to interact again before that lock lifts, but nothing
   in the row is clickable/editable while a request for it is out. */
.bjf-cart-item.is-updating {
	opacity: 0.7;
}

.bjf-cart-item__qty .qty:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
 * .ct-increase / .ct-decrease are Blocksy's own <span> stepper icons,
 * not native form controls, so they have no `disabled` attribute to
 * rely on -- pointer-events:none is the real disable here, the opacity
 * is just the visible echo of it. Applied by assets/cart.js only for
 * the duration of that row's in-flight request.
 */
.bjf-cart-item .ct-increase.is-disabled,
.bjf-cart-item .ct-decrease.is-disabled {
	pointer-events: none;
	opacity: 0.45;
}

/*
 * .bjf-cart-item__remove is a real <a href>, so it would otherwise
 * still navigate on click even while visually dimmed -- pointer-events
 * blocks that, and assets/cart.js also preventDefault()s defensively.
 */
.bjf-cart-item__remove.is-disabled {
	pointer-events: none;
	opacity: 0.35;
}

/*
 * Deliberate 4-column grid instead of letting elements float across
 * empty space: image | product info | quantity | remove+subtotal.
 * Each cell is a direct grid child, so the hierarchy stays obvious
 * regardless of how much horizontal room the row has.
 */
.bjf-cart-item {
	display: grid;
	grid-template-columns: 72px 1fr auto auto;
	align-items: center;
	gap: 20px;
}

.bjf-cart-item__image {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bjf-surface, #F8FAFB);
	border-radius: 8px;
	overflow: hidden;
}

.bjf-cart-item__image img {
	max-width: 80%;
	max-height: 80%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.bjf-cart-item__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.bjf-cart-item__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--bjf-ink, #0f1a17);
	text-decoration: none;
}

.bjf-cart-item__name:hover {
	color: var(--bjf-green-deep, #213631);
}

.bjf-cart-item__meta {
	font-size: 12.5px;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.6;
}

.bjf-cart-item__unit-price {
	font-size: 13px;
	color: var(--bjf-green-deep, #213631);
	font-weight: 600;
}

/*
 * Quantity control -- themed through Blocksy's OWN supported CSS
 * custom properties for its "type-2" quantity stepper
 * (wp-content/themes/blocksy/static/sass/frontend/8-integrations/
 * woocommerce/misc/quantity/{base,type-2}.scss), not fought with
 * competing width/display overrides.
 *
 * Root cause of the earlier "empty oval": that stepper positions its
 * +/- icons absolutely at percentage insets of the WRAPPER
 * (.quantity), sized from --quantity-width/--quantity-height, and
 * reserves matching padding inside the <input> via the same
 * --quantity-height value. A flat width:64px forced directly onto the
 * <input> (with the wrapper left at Blocksy's own 130px default) broke
 * that relationship: the icons stayed positioned against the 130px
 * wrapper while the input's own reserved padding (still calculated
 * from the unmodified --quantity-height) consumed more than the
 * shrunken input's actual 64px width, pushing the visible number
 * outside the box and leaving the icons misaligned -- an
 * unreadable control, not a rendering bug. Setting the same
 * dimensions Blocksy expects via its variables keeps its icon
 * positioning math (and the existing AJAX-driving markup/JS) intact.
 */
.bjf-cart-item__qty .quantity {
	--quantity-width: 112px;
	--quantity-height: 40px;
	--quantity-initial-color: var(--bjf-surface, #F8FAFB);
	--quantity-hover-color: var(--bjf-green, #55a630);
	--quantity-arrows-initial-color: var(--bjf-green-deep, #213631);
	--quantity-arrows-hover-color: #ffffff;
	--theme-form-field-border-radius: 8px;
	--theme-form-field-border-initial-color: rgba(33, 54, 49, 0.16);
}

.bjf-cart-item__qty .qty {
	font-weight: 700;
	color: var(--bjf-ink, #0f1a17);
}

.bjf-cart-item__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.bjf-cart-item__remove {
	font-size: 12px;
	font-weight: 600;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.55;
	text-decoration: none;
	white-space: nowrap;
}

.bjf-cart-item__remove:hover {
	color: #a33;
	opacity: 1;
	text-decoration: underline;
}

.bjf-cart-item__subtotal {
	font-size: 15px;
	font-weight: 700;
	color: var(--bjf-ink, #0f1a17);
	white-space: nowrap;
}

/* ============================================================
   ORDER SUMMARY
   ============================================================ */

.bjf-cart-summary {
	background: #ffffff;
	border: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 10px;
	padding: 26px;
	box-shadow: 0 1px 2px rgba(15, 26, 23, 0.03), 0 14px 26px -22px rgba(15, 26, 23, 0.18);
}

/* Subtle "recalculating" hint while any line's quantity request is in
   flight -- values themselves stay whatever they last were until the
   server responds (never a client-guessed number), this only dims the
   figures a touch so the wait doesn't feel unacknowledged. */
.bjf-cart-summary.is-calculating .bjf-cart-summary__subtotal-value,
.bjf-cart-summary.is-calculating .bjf-cart-summary__total-value {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/*
 * Checkout must not be actionable while totals are mid-recalculation
 * (a click could otherwise proceed with a subtotal that's about to
 * change). Small "Menghitung..." hint appended next to the title via
 * ::after rather than a layout-shifting inserted element.
 */
.bjf-cart-summary.is-calculating .bjf-cart-summary__title::after {
	content: " \00b7 Menghitung...";
	font-size: 12px;
	font-weight: 600;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.55;
}

.bjf-cart-summary__checkout.is-disabled {
	pointer-events: none;
	opacity: 0.6;
}

.bjf-cart-summary__title {
	font-size: 17px;
	font-weight: 800;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 20px;
}

.bjf-cart-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--bjf-ink, #0f1a17);
	padding: 12px 0;
	border-bottom: 1px solid rgba(33, 54, 49, 0.07);
}

.bjf-cart-summary__shipping-note {
	font-size: 12.5px;
	opacity: 0.6;
	font-style: italic;
}

.bjf-cart-summary__row--total {
	border-bottom: none;
	border-top: 1.5px solid rgba(33, 54, 49, 0.14);
	margin-top: 2px;
	padding-top: 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--bjf-green-deep, #213631);
}

.bjf-cart-summary__checkout.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 22px;
	border-radius: 9px !important;
	background: var(--bjf-green-deep, #213631) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}

.bjf-cart-summary__checkout.button:hover {
	background: var(--bjf-green, #55a630) !important;
}

.bjf-cart-summary__coupon {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
	font-size: 13px;
}

.bjf-cart-summary__coupon summary {
	cursor: pointer;
	color: var(--bjf-green-deep, #213631);
	font-weight: 600;
}

.bjf-cart-summary__coupon-field {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.bjf-cart-summary__coupon-field .input-text {
	flex: 1;
	height: 38px;
	padding: 0 10px;
	border: 1px solid rgba(33, 54, 49, 0.15);
	border-radius: 6px;
	font-size: 13px;
}

.bjf-cart-summary__coupon-field .button {
	height: 38px;
	padding: 0 14px !important;
	border-radius: 6px !important;
	background: var(--bjf-surface, #F8FAFB) !important;
	color: var(--bjf-green-deep, #213631) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
}

.bjf-cart-summary .bjf-support-points {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(33, 54, 49, 0.08);
	gap: 12px;
}

.bjf-cart-summary .bjf-support-points__item {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.85;
}

/*
 * Reasserted explicitly (not just inherited from the shared component
 * in commerce.css) so the icon always renders as a proper circular
 * badge in this compact summary context, never a bare glyph sitting
 * flush against the text.
 */
.bjf-cart-summary .bjf-support-points__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--bjf-gold-soft, #f4ecdc);
	color: var(--bjf-gold, #c6a15b);
	font-size: 10px;
	line-height: 1;
}

.bjf-cart-summary__continue {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bjf-green-deep, #213631);
	text-decoration: none;
}

.bjf-cart-summary__continue:hover {
	color: var(--bjf-green, #55a630);
}

.bjf-cart-summary__continue:hover {
	color: var(--bjf-green, #55a630);
}

/* ============================================================
   EMPTY CART STATE
   ============================================================ */

.bjf-cart-empty {
	max-width: 560px;
	margin: 24px auto 0;
	padding: 48px 32px;
	text-align: center;
	background: var(--bjf-surface, #F8FAFB);
	border: 1px solid rgba(33, 54, 49, 0.08);
	border-radius: 10px;
}

.bjf-cart-empty__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--bjf-green-deep, #213631);
	margin: 0 0 10px;
}

.bjf-cart-empty__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--bjf-ink, #0f1a17);
	opacity: 0.72;
	margin: 0 0 24px;
}

.bjf-cart-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
	.bjf-cart {
		padding: calc(var(--bjf-header-clearance) + 32px) 24px 64px;
	}
	.bjf-cart__layout {
		grid-template-columns: 1fr;
	}
	.bjf-cart__summary-wrap {
		position: static;
	}
}

@media (max-width: 640px) {
	.bjf-cart {
		/* Same real header-clearance term as desktop (Blocksy reports the
		   same --header-height at this breakpoint too) -- only the
		   additive breathing room and side/bottom padding are tightened. */
		padding: calc(var(--bjf-header-clearance) + 24px) 16px 48px;
	}
	.bjf-cart__title {
		font-size: 26px;
	}
	.bjf-cart-item {
		grid-template-columns: 56px 1fr;
		grid-template-areas:
			"image info"
			"qty   qty"
			"right right";
		row-gap: 12px;
		column-gap: 14px;
	}
	.bjf-cart-item__image {
		grid-area: image;
		width: 56px;
		height: 56px;
	}
	.bjf-cart-item__info {
		grid-area: info;
	}
	.bjf-cart-item__qty {
		grid-area: qty;
		padding-top: 4px;
		border-top: 1px dashed rgba(33, 54, 49, 0.1);
	}
	.bjf-cart-item__right {
		grid-area: right;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.bjf-cart-empty {
		padding: 36px 22px;
	}
	.bjf-cart-empty__actions {
		flex-direction: column;
	}
}