/*
 * Smart Web App - Cart & Checkout Styles
 * Loaded only when the cart addon is enabled.
 *
 * All selectors are scoped to .cart-sheet or .swa-stepper
 * to avoid touching existing app styles.
 *
 * @package SmartWebApp
 */

/* ----------------------------------------------------------------
 * Stepper on product cards
 * -------------------------------------------------------------- */
.swa-stepper-wrap {
	position: absolute;
	bottom: 8px;
	right: 8px;
	z-index: 2;
}

/* Stepper inside the product view popup */
.swa-popup-stepper-wrap {
	padding: 12px 16px 16px;
	background: var(--f7-page-bg-color);
	border-top: 1px solid var(--f7-list-border-color);
	position: sticky;
	bottom: 0;
	z-index: 10;
}

/* ----------------------------------------------------------------
 * Cart FAB - left side to avoid conflict with add-item FAB (right)
 * -------------------------------------------------------------- */
.cart-fab .icon {
	font-size: 24px;
}

/* ----------------------------------------------------------------
 * Cart Sheet
 * -------------------------------------------------------------- */
.cart-sheet .sheet-modal-swipe-step {
	cursor: grab;
}

.cart-swipe-header {
	user-select: none;
}

/* ----------------------------------------------------------------
 * Cart item list
 * -------------------------------------------------------------- */
.cart-item-list .item-subtitle {
	margin-top: 6px;
}

.cart-item-list .swa-stepper {
	--f7-stepper-height: 30px;
	--f7-stepper-button-width: 30px;
	--f7-stepper-input-width: 36px;
}

/* ----------------------------------------------------------------
 * Checkout - proof of payment upload area
 * -------------------------------------------------------------- */
.checkout-upload-area {
	border: 2px dashed var(--f7-list-border-color);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	background: var(--f7-page-bg-color);
	margin-top: 4px;
}

.checkout-upload-area:hover,
.checkout-upload-area:focus-within {
	border-color: var(--f7-theme-color);
	background: color-mix(in srgb, var(--f7-theme-color) 5%, transparent);
}

.checkout-upload-label {
	display: block;
	cursor: pointer;
}

.checkout-upload-placeholder {
	padding: 12px 0;
}

#checkout-proof-preview {
	border-radius: 8px;
	max-height: 220px;
	object-fit: cover;
	width: 100%;
}

/* ----------------------------------------------------------------
 * Checkout totals
 * -------------------------------------------------------------- */
.checkout-total-list .item-after {
	font-weight: 700;
}

/* ----------------------------------------------------------------
 * Submit button disabled state
 * -------------------------------------------------------------- */
.checkout-submit-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ----------------------------------------------------------------
 * Gap utility (not all F7 themes include this)
 * -------------------------------------------------------------- */
.gap-8 {
	gap: 8px;
}

/* =========================================================
   Product popup - Add to Cart toolbar
   ========================================================= */

/* The button fills the toolbar width with comfortable side padding. */
.swa-atc-toolbar .toolbar-inner {
	padding-left: 16px;
	padding-right: 16px;
	justify-content: stretch;
}

.swa-atc-toolbar .swa-add-to-cart-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swa-atc-toolbar .swa-add-to-cart-btn.button-active {
	opacity: 0.75;
}

/* Quantity stepper inside the product content.
   Sits below the description, right-aligned so price stays readable. */
.swa-popup-stepper-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 0 16px 16px;
	margin-top: 12px;
}

/* Give the popup page enough bottom clearance so the last content line
   is not hidden behind the sticky toolbar (F7 adds this via page-with-toolbar
   but a small explicit value avoids flash during injection). */
.page-with-toolbar #product-content.page-content {
	padding-bottom: calc(var(--f7-toolbar-height) + 8px + var(--f7-safe-area-bottom, 0px));
}