/* ==========================================================================
   Bricks Side Cart — Frontend Styles
   Cart Drawer open/close animation, focus trap, body scroll, ESC and backdrop
   are all handled by Bricks' native bricksOffcanvas JS — we only style the
   cart-specific content inside the panel.
   All design tokens are CSS custom properties so themes can override them.
   ========================================================================== */

:root {
	--bsc-panel-padding:       1.25rem 1.5rem;
	--bsc-panel-gap:           0.75rem;

	--bsc-item-padding:        0.875rem 0;
	--bsc-item-border:         1px solid #f3f4f6;
	--bsc-item-gap:            0.875rem;
	--bsc-item-image-size:     72px;
	--bsc-item-image-radius:   6px;

	--bsc-name-color:          #111827;
	--bsc-name-size:           0.9375rem;
	--bsc-price-color:         #111827;
	--bsc-price-weight:        600;
	--bsc-variation-color:     #6b7280;
	--bsc-variation-size:      0.8125rem;

	--bsc-qty-size:            28px;
	--bsc-qty-bg:              #f3f4f6;
	--bsc-qty-color:           #374151;
	--bsc-qty-radius:          6px;
	--bsc-qty-input-width:     2.5rem;

	--bsc-remove-size:         1.125rem;
	--bsc-remove-color:        #9ca3af;
	--bsc-remove-hover:        #ef4444;

	--bsc-totals-border:       1px solid #e5e7eb;

	--bsc-btn-bg:              #111827;
	--bsc-btn-color:           #ffffff;
	--bsc-btn-radius:          8px;
	--bsc-btn-padding:         0.875rem 1.5rem;
	--bsc-btn-font-size:       0.9375rem;
	--bsc-btn-font-weight:     600;

	--bsc-badge-size:          20px;
	--bsc-badge-bg:            #ef4444;
	--bsc-badge-color:         #ffffff;
	--bsc-badge-font-size:     0.6875rem;
	--bsc-badge-font-weight:   700;
}

/* ==========================================================================
   Cart Panel inner layout
   .bsc-cart-panel is the extra class added to the brx-offcanvas-inner block
   in our get_nestable_children() so we can style the scrollable body.
   ========================================================================== */

.bsc-cart-panel {
	display: flex !important;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: var(--bsc-panel-padding);
	gap: var(--bsc-panel-gap);
}

.bsc-cart-panel::-webkit-scrollbar        { width: 4px; }
.bsc-cart-panel::-webkit-scrollbar-track  { background: transparent; }
.bsc-cart-panel::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 999px; }

/* ==========================================================================
   Cart Trigger  (.brxe-bsc-cart-trigger)
   ========================================================================== */

.brxe-bsc-cart-trigger {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	background: none;
	border: none;
	padding: 0;
	line-height: 1;
	user-select: none;
}

.brxe-bsc-cart-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

.bsc-trigger-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
}

.bsc-trigger-icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.bsc-trigger-icon i {
	line-height: 1;
}

/* Count badge */
.bsc-count-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: var(--bsc-badge-size);
	height: var(--bsc-badge-size);
	padding: 0 4px;
	border-radius: 999px;
	background: var(--bsc-badge-bg);
	color: var(--bsc-badge-color);
	font-size: var(--bsc-badge-font-size);
	font-weight: var(--bsc-badge-font-weight);
	line-height: var(--bsc-badge-size);
	text-align: center;
	pointer-events: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.bsc-count-badge[hidden] {
	display: none;
}

@keyframes bsc-badge-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}

.bsc-count-badge.bsc-badge-pop {
	animation: bsc-badge-pop 0.3s ease;
}

/* ==========================================================================
   Cart Items  (.brxe-bsc-cart-items)
   ========================================================================== */

.brxe-bsc-cart-items {
	flex: 1;
}

.bsc-cart-items-inner {
	display: flex;
	flex-direction: column;
}

/* Single cart item */
.bsc-cart-item {
	display: flex;
	align-items: flex-start;
	gap: var(--bsc-item-gap);
	padding: var(--bsc-item-padding);
	border-bottom: var(--bsc-item-border);
	transition: opacity 0.25s ease;
}

.bsc-cart-item:last-child {
	border-bottom: none;
}

.bsc-cart-item.bsc-removing {
	opacity: 0.4;
	pointer-events: none;
}

/* Product image */
.bsc-item-image-link {
	display: block;
	flex-shrink: 0;
}

.bsc-item-image-link img,
.bsc-placeholder-image {
	width: var(--bsc-item-image-size);
	height: var(--bsc-item-image-size);
	object-fit: cover;
	border-radius: var(--bsc-item-image-radius);
	display: block;
}

.bsc-placeholder-image {
	background: #f3f4f6;
}

/* Item details */
.bsc-item-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bsc-item-name {
	display: block;
	font-size: var(--bsc-name-size);
	color: var(--bsc-name-color);
	text-decoration: none;
	line-height: 1.4;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bsc-item-name:hover {
	text-decoration: underline;
}

.bsc-item-variations {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
}

.bsc-item-variation {
	font-size: var(--bsc-variation-size);
	color: var(--bsc-variation-color);
	line-height: 1.4;
}

.bsc-variation-label {
	font-weight: 500;
}

.bsc-item-price {
	font-size: 0.9375rem;
	color: var(--bsc-price-color);
	font-weight: var(--bsc-price-weight);
	line-height: 1;
	margin-top: 2px;
}

/* Quantity stepper */
.bsc-item-qty {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
}

.bsc-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bsc-qty-size);
	height: var(--bsc-qty-size);
	border: none;
	background: var(--bsc-qty-bg);
	color: var(--bsc-qty-color);
	border-radius: var(--bsc-qty-radius);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
	padding: 0;
}

.bsc-qty-btn:hover:not(:disabled) {
	background: #e5e7eb;
	color: #111827;
}

.bsc-qty-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.bsc-qty-btn svg {
	width: 14px;
	height: 14px;
}

.bsc-qty-input {
	width: var(--bsc-qty-input-width);
	height: var(--bsc-qty-size);
	border: 1px solid #e5e7eb;
	border-radius: var(--bsc-qty-radius);
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bsc-qty-color);
	background: #ffffff;
	appearance: textfield;
	-moz-appearance: textfield;
	padding: 0;
}

.bsc-qty-input::-webkit-inner-spin-button,
.bsc-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

/* Remove button */
.bsc-remove-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--bsc-remove-color);
	border-radius: 6px;
	padding: 4px;
	align-self: flex-start;
	margin-top: 2px;
	transition: color 0.2s ease, background 0.2s ease;
}

.bsc-remove-item:hover:not(:disabled) {
	color: var(--bsc-remove-hover);
	background: #fef2f2;
}

.bsc-remove-item:disabled {
	opacity: 0.4;
	cursor: default;
}

.bsc-remove-item svg {
	width: var(--bsc-remove-size);
	height: var(--bsc-remove-size);
}

/* ==========================================================================
   Cart Totals  (.brxe-bsc-cart-totals)
   ========================================================================== */

.brxe-bsc-cart-totals {
	flex-shrink: 0;
}

.bsc-cart-totals-inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: var(--bsc-panel-gap);
	border-top: var(--bsc-totals-border);
}

.bsc-totals-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bsc-totals-label {
	font-size: 0.9375rem;
	color: #6b7280;
}

.bsc-totals-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bsc-name-color);
}

.bsc-checkout-btn {
	display: block;
	width: 100%;
	background: var(--bsc-btn-bg);
	color: var(--bsc-btn-color);
	border-radius: var(--bsc-btn-radius);
	padding: var(--bsc-btn-padding);
	font-size: var(--bsc-btn-font-size);
	font-weight: var(--bsc-btn-font-weight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	line-height: 1.4;
	transition: opacity 0.2s ease, transform 0.15s ease;
	margin-top: 0.25rem;
}

.bsc-checkout-btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.bsc-checkout-btn:active {
	transform: translateY(0);
}

.bsc-continue-link {
	display: block;
	text-align: center;
	font-size: 0.875rem;
	color: #6b7280;
	text-decoration: none;
	padding: 0.25rem;
	transition: color 0.2s ease;
}

.bsc-continue-link:hover {
	color: var(--bsc-name-color);
	text-decoration: underline;
}

/* ==========================================================================
   Cart Empty  (.brxe-bsc-cart-empty)
   ========================================================================== */

.brxe-bsc-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1rem;
	flex: 1;
	padding: 2rem 0;
}

.bsc-empty-icon {
	display: flex;
	font-size: 3rem;
	color: #d1d5db;
	line-height: 1;
}

.bsc-empty-icon svg {
	width: 3rem;
	height: 3rem;
}

.bsc-empty-message {
	font-size: 1rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.5;
}

.bsc-shop-link {
	display: inline-block;
	background: var(--bsc-btn-bg);
	color: var(--bsc-btn-color);
	border-radius: var(--bsc-btn-radius);
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s ease;
	margin-top: 0.5rem;
}

.bsc-shop-link:hover {
	opacity: 0.88;
}

/* ==========================================================================
   AJAX loading state
   ========================================================================== */

.bsc-cart-items.bsc-loading,
.bsc-cart-totals.bsc-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
	:root {
		--bsc-item-image-size: 60px;
		--bsc-panel-padding: 1rem;
	}
}