/* theme_billing - theme colour 0xFF0866FF (ARGB) => #0866FF */
:root {
	--theme-primary: #0866FF;
	--theme-primary-dark: #0652cc;
	--theme-primary-soft: #e7f0ff;
	--theme-text: #1c1e21;
	--theme-muted: #65676b;
	--theme-border: #e4e6eb;
}

body {
	background-color: #fff;
	color: var(--theme-text);
}

a { color: var(--theme-primary); }
a:hover { color: var(--theme-primary-dark); }

.btn-primary {
	--bs-btn-bg: var(--theme-primary);
	--bs-btn-border-color: var(--theme-primary);
	--bs-btn-hover-bg: var(--theme-primary-dark);
	--bs-btn-hover-border-color: var(--theme-primary-dark);
	--bs-btn-active-bg: var(--theme-primary-dark);
	--bs-btn-active-border-color: var(--theme-primary-dark);
	--bs-btn-disabled-bg: var(--theme-primary);
	--bs-btn-disabled-border-color: var(--theme-primary);
}
.btn-outline-primary {
	--bs-btn-color: var(--theme-primary);
	--bs-btn-border-color: var(--theme-primary);
	--bs-btn-hover-bg: var(--theme-primary);
	--bs-btn-hover-border-color: var(--theme-primary);
	--bs-btn-active-bg: var(--theme-primary-dark);
	--bs-btn-active-border-color: var(--theme-primary-dark);
}
.form-control:focus {
	border-color: var(--theme-primary);
	box-shadow: 0 0 0 .2rem rgba(8, 102, 255, .2);
}

/* Header */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--theme-border);
}
.site-logo { max-height: 44px; width: auto; }
.site-header .nav-link { font-weight: 600; color: var(--theme-text); }
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--theme-primary); }
.cart-link {
	position: relative;
	font-size: 1.5rem;
	color: var(--theme-text);
	text-decoration: none;
}
.cart-link:hover { color: var(--theme-primary); }
.cart-link .cart-count {
	position: absolute;
	top: -4px;
	right: -10px;
	font-size: .65rem;
	background: var(--theme-primary);
	color: #fff;
}

/* Section headings */
.section-title { font-weight: 700; }

/* Category tabs - scroll sideways on small screens */
.category-tabs { overflow-x: auto; overflow-y: hidden; border-bottom-color: var(--theme-border); }
.category-tabs .nav-link { color: var(--theme-muted); font-weight: 600; white-space: nowrap; }
.category-tabs .nav-link.active { color: var(--theme-primary); border-bottom: 2px solid var(--theme-primary); }

/* Home categories: tabs from md up, stacked accordion below md (one category per row) */
.category-toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: .875rem 1rem; border: 1px solid var(--theme-border); border-radius: .5rem;
	background: #fff; color: var(--theme-text); font-weight: 600; text-align: left;
}
.category-toggle:not(.collapsed) { color: var(--theme-primary); background: var(--theme-primary-soft); border-color: var(--theme-primary); }
.category-toggle .category-count { color: var(--theme-muted); font-weight: 400; }
.category-toggle .bi { transition: transform .2s; }
.category-toggle:not(.collapsed) .bi { transform: rotate(180deg); }
@media (max-width: 767.98px) {
	/* every category is listed; the collapse inside each one opens/closes its products */
	.category-panes > .tab-pane { display: block; opacity: 1; }
	.category-pane + .category-pane { margin-top: .75rem; }
	.category-collapse > .row, .category-collapse > p { padding-top: 1rem; }
}
@media (min-width: 768px) {
	/* tabs decide which category shows, so its products are always open */
	.category-collapse { display: block !important; height: auto !important; }
}

/* Product card */
.product-card { border-color: var(--theme-border); transition: box-shadow .2s; }
.product-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.product-card .product-image { aspect-ratio: 1 / 1; overflow: hidden; background: #f7f8fa; }
.product-card .product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-card .no-image { color: #c4c7cc; font-size: 3rem; }
.product-card .product-name { font-size: 1rem; font-weight: 600; }
.product-card .selling-price { color: var(--theme-primary); font-weight: 700; font-size: 1.1rem; }
.product-card .product-excerpt { color: var(--theme-muted); font-size: .9rem; }
.product-card-main { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-card-main .card-body { flex: 1 1 auto; }
.product-card-action { padding: 0 1rem 1rem; }
@media (max-width: 767.98px) {
	/* image left; details and the Add To Cart button stacked on the right */
	.product-card { display: grid; grid-template-columns: min(35%, 140px) minmax(0, 1fr); grid-template-rows: 1fr auto; }
	.product-card-main { display: contents; }
	.product-card .product-image { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: .75rem 0 .75rem .75rem; border-radius: .375rem; }
	.product-card-main .card-body { grid-column: 2; grid-row: 1; min-width: 0; padding: .75rem .75rem .5rem; }
	.product-card .no-image { font-size: 2rem; }
	.product-card .product-name { margin-bottom: .25rem; }
	.product-card .product-excerpt { font-size: .85rem; margin-bottom: .5rem; }
	.product-card-action { grid-column: 2; grid-row: 2; padding: 0 .75rem .75rem; }
}

/* Cart */
.cart-item-image { width: 64px; height: 64px; object-fit: cover; }
.cart-table .qty-col { width: 110px; }
.cart-table .cart-qty { max-width: 90px; }
.cart-summary { border-color: var(--theme-border); background: var(--theme-primary-soft); }

/* Cart on phones: each row becomes a card - product + remove / price / qty + line total */
@media (max-width: 767.98px) {
	.cart-table thead { display: none; }
	.cart-table,
	.cart-table tbody { display: block; }
	.cart-table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"product remove"
			"price   price"
			"qty     total";
		gap: .5rem 1rem;
		align-items: center;
		padding: .75rem;
		margin-bottom: .75rem;
		border: 1px solid var(--theme-border);
		border-radius: .5rem;
	}
	.cart-table td { display: block; padding: 0; border: 0; }
	.cart-table .cell-product { grid-area: product; min-width: 0; }
	.cart-table .cell-remove { grid-area: remove; }
	.cart-table .cell-price { grid-area: price; color: var(--theme-muted); font-size: .9rem; }
	.cart-table .cell-qty { grid-area: qty; display: flex; align-items: center; gap: .5rem; }
	.cart-table .cell-total { grid-area: total; text-align: right; }
	.cart-table .cell-price::before,
	.cart-table .cell-qty::before { content: attr(data-label) ": "; }
	.cart-table .cell-qty::before { color: var(--theme-muted); font-size: .9rem; white-space: nowrap; }
	.cart-table .cart-qty { width: 76px; }
	.cart-table .cell-product .fw-semibold { overflow-wrap: anywhere; }
	.cart-item-image { width: 56px; height: 56px; }
}
#shopping-cart.is-loading { opacity: .5; pointer-events: none; }
.cart-actions .btn { min-width: 180px; }
.qrcode-image { max-width: 260px; }
.success-icon { color: var(--theme-primary); }

/* Scan & search */
.barcode-reader { width: 100%; margin-bottom: .75rem; border-radius: .5rem; overflow: hidden; }
.barcode-reader video { border-radius: .5rem; }
.scan-result-image { width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; background: #f7f8fa; color: #c4c7cc; }
.scan-result .selling-price { color: var(--theme-primary); font-weight: 700; }
.min-w-0 { min-width: 0; }
#scanResults.is-loading { opacity: .5; pointer-events: none; }
#cartViewItems.is-loading { opacity: .5; pointer-events: none; }
.product-detail .product-image { aspect-ratio: 1 / 1; overflow: hidden; background: #f7f8fa; }
.product-detail .product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .no-image { color: #c4c7cc; font-size: 3rem; }
.product-detail .product-name { font-weight: 600; }
.product-detail .selling-price { color: var(--theme-primary); font-weight: 700; font-size: 1.25rem; }
.product-detail .product-excerpt { color: var(--theme-muted); }

/* Footer */
.site-footer { background: var(--theme-primary); color: #fff; }
.site-footer a { color: #fff; }
.site-footer .footer-title { font-weight: 700; margin-bottom: .75rem; }
.site-footer .footer-contact li { margin-bottom: .4rem; }
.site-footer .footer-contact i { margin-right: .4rem; }
.site-footer .footer-bottom { background: var(--theme-primary-dark); }

/* Customer account (signin / signup / account pages) */
.auth-page { max-width: 460px; }
.auth-page-wide { max-width: 720px; }
.auth-page .card { border-color: var(--theme-border); }
.account-form { max-width: 720px; }
.account-nav .nav-link { white-space: nowrap; }
@media (max-width: 575.98px) {
	/* account tables on phones: one card per row, each cell labelled */
	.account-table thead { display: none; }
	.account-table, .account-table tbody, .account-table tfoot { display: block; }
	.account-table tbody tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--theme-border); }
	.account-table tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border: 0; text-align: right; }
	.account-table tbody td[data-label]::before { content: attr(data-label); color: var(--theme-muted); text-align: left; }
	.account-table tbody td:not([data-label]) { justify-content: flex-end; }
	.account-table tfoot tr { display: flex; justify-content: space-between; padding-top: .75rem; }
	.account-table tfoot th { border: 0; padding: 0; }
}