/*
 * Basket calculator page (docs/08-design-ui-ux.md "Calcolatrice corridor").
 * Color tokens come from the theme's global style.css.
 */

.pt-basket-page {
	max-width: 640px;
	margin: 0 auto;
	padding: 1rem;
}

.pt-basket-empty {
	color: var( --pt-color-stable );
}

/*
 * Redesign, July 2026 (user request): a card per store instead of one flat
 * list — see .pt-basket-store-group below. This wrapper is now just a
 * vertical stack of those cards, not a card itself.
 */
.pt-basket-items {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.pt-basket-store-group {
	background: #fff;
	border-radius: var( --pt-radius-card );
	box-shadow: var( --pt-shadow-card );
	overflow: hidden;
}

/* Figma Frame 103 — a flat gray strip (not the soft-tint + hairline this
   used to be), rounded to match the card's own top corners since it's the
   first thing inside it. */
.pt-basket-store-group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	background: #d9d9d9;
	border-radius: var( --pt-radius-card ) var( --pt-radius-card ) 0 0;
}

.pt-basket-store-group-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.pt-basket-store-group-logo {
	width: 24px;
	height: 30px;
	border-radius: 6px;
	object-fit: contain;
	background: #fff;
	flex-shrink: 0;
}

.pt-basket-store-group-subtotal {
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --pt-color-text );
	white-space: nowrap;
}

.pt-basket-store-group-subtotal-label {
	font-family: var( --pt-font-base );
	font-weight: 400;
	color: var( --pt-color-stable );
}

.pt-basket-store-group--unavailable .pt-basket-store-group-header {
	background: var( --pt-color-bg-soft );
}

.pt-basket-store-group--unavailable .pt-basket-store-group-name {
	color: var( --pt-color-stable );
	font-weight: 500;
}

.pt-basket-store-group-items {
	padding: 0 1rem;
}

.pt-basket-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 0;
	border-bottom: 1px solid var( --pt-color-border );
}

.pt-basket-item:last-child {
	border-bottom: none;
}

/* 85×100 (Figma) — taller than wide, unlike every other product photo in
   this redesign (all square) — this is the one place the mockup shows it
   that way, deliberately kept rather than forced back to square. */
.pt-basket-item-photo img,
.pt-basket-item-photo .pt-card-photo-placeholder {
	width: 85px;
	height: 100px;
	border-radius: 8px;
	background: var( --pt-color-bg-soft );
	display: block;
	object-fit: cover;
}

.pt-basket-item-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	/* Room on the right for .pt-basket-item-actions, which floats over this
	   row rather than sitting in flow (Figma: the chart button aligns with
	   the title, not with wherever the price block happens to end). */
	padding-right: 2.75rem;
}

.pt-basket-item-title {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: var( --pt-color-text );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pt-basket-item-price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	font-size: 1.375rem;
	font-weight: 500;
	color: var( --pt-color-text );
}

.pt-basket-item-price--promo .pt-basket-item-price-current {
	color: #f42019;
	font-weight: 700;
}

.pt-basket-item-price-old {
	font-size: 0.65em;
	font-weight: 400;
	color: var( --pt-color-stable );
	text-decoration: line-through;
}

.pt-basket-item-unit-price {
	margin: -0.2rem 0 0;
	font-size: 0.8rem;
	color: var( --pt-color-stable );
}

.pt-basket-item-price--unavailable {
	font-weight: 500;
	font-size: 0.8rem;
	color: var( --pt-color-stable );
	font-family: inherit;
}

/* Compact trend badge — same up/down semantics as the feed cards'
   .pt-card-badge.pt-trend-*, but inline next to the price rather than an
   absolutely-positioned photo-corner badge (user request, July 2026). */
.pt-basket-item-trend {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
	font-family: var( --pt-font-body, inherit );
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.05rem 0.35rem;
	border-radius: 6px;
	color: #fff;
}

.pt-basket-item-trend.pt-trend-down {
	background: var( --pt-color-down );
}

.pt-basket-item-trend.pt-trend-up {
	background: var( --pt-color-up );
}

.pt-basket-item-trend .pt-trend-arrow {
	font-size: 0.65rem;
}

/* Floats over the item row's top-right corner (aligned with the title),
   not inline with the price — Figma shows it as its own thing, not part
   of the price line. Same 40×40/radius-6/#DFE9FF+#3F8BEF spec the product
   page's own chart-open button uses (single-product.css), just a touch
   bigger there (this row has more room to spare). */
.pt-basket-item-actions {
	position: absolute;
	top: 1rem;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.pt-basket-item-history-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1.5px solid #3f8bef;
	border-radius: 6px;
	background: #dfe9ff;
	color: #000;
	cursor: pointer;
}

.pt-basket-item-history-btn:hover {
	background: #cddcff;
}

/* Plain inline "− 1 +", not the bordered-circle stepper this used to be
   (Figma: no button chrome at all, just the three glyphs with a little
   breathing room between them). */
.pt-basket-item-qty-stepper {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

/* Corrected 2026-08 — this was first shipped as plain text (misread the
   mockup: the "-"/"+" glyphs sit on their own 35px light-gray circle,
   they're not bare text next to the quantity). */
.pt-basket-item-qty-btn {
	width: 35px;
	height: 35px;
	border: none;
	border-radius: 50%;
	background: #ededed;
	color: #000;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pt-basket-item-qty-btn:hover {
	background: #ddd;
}

.pt-basket-item-qty {
	width: 1.5rem;
	border: none;
	background: none;
	padding: 0;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	/* Hide native number-input spinner arrows — the +/- buttons replace them. */
	-moz-appearance: textfield;
}

.pt-basket-item-qty::-webkit-outer-spin-button,
.pt-basket-item-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Not in the Figma mockup (removal happens some other way there, or just
   wasn't drawn) — kept because updateQuantity() never lets the stepper go
   below 1 (assets/js/basket.js), so this is still the only way to actually
   remove a line; just made small/quiet instead of the visually-prominent
   "×" it used to be, sitting under the chart button rather than pulling
   focus next to it. */
.pt-basket-item-remove {
	border: none;
	background: none;
	font-size: 1rem;
	line-height: 1;
	color: var( --pt-color-stable );
	cursor: pointer;
	padding: 0.2rem;
	flex-shrink: 0;
}

.pt-basket-item-remove:hover {
	color: #f42019;
}

.pt-basket-totals:not( :empty ) {
	background: #fff;
	border-radius: var( --pt-radius-card );
	box-shadow: var( --pt-shadow-card );
	padding: 1rem 1.25rem;
}

.pt-basket-totals h2 {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.pt-basket-no-totals {
	color: var( --pt-color-stable );
	font-size: 0.9rem;
}

.pt-basket-totals-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.pt-basket-total-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem;
	border-bottom: 1px solid var( --pt-color-border );
}

.pt-basket-total-row:last-child {
	border-bottom: none;
}

/* Same logo treatment as the store-group card header above it — this list
   is the same "which chain, what it costs" idea, just for chains that
   aren't already a group in the cart above. */
.pt-basket-total-logo {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	flex-shrink: 0;
}

.pt-basket-total-store {
	flex: 1;
	font-weight: 500;
}

.pt-basket-total-amount {
	font-weight: 700;
	white-space: nowrap;
}

.pt-basket-total-amount-label {
	font-weight: 400;
	color: var( --pt-color-stable );
}

.pt-basket-total-row--best {
	background: var( --pt-color-brand-light );
	border-radius: 10px;
	border-bottom: none;
}

.pt-basket-total-row--best .pt-basket-total-store::before {
	content: "\2713";
	display: inline-block;
	margin-right: 0.4em;
	color: var( --pt-color-brand-dark );
	font-weight: 700;
}

.pt-basket-total-row--best .pt-basket-total-amount {
	color: var( --pt-color-brand-dark );
	font-weight: 700;
	font-size: 1.05rem;
}

.pt-basket-savings {
	background: var( --pt-color-brand-light );
	border-radius: var( --pt-radius-card );
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	margin: 0;
}

.pt-basket-savings strong {
	color: var( --pt-color-brand-dark );
}

/*
 * Optimal (mixed-store) total — always shown when at least one basket item
 * has a price, even if no single chain covers the whole list (bug report,
 * July 2026: mixing chains used to leave the whole totals block empty).
 * Sits above the per-chain breakdowns as the headline number.
 */
/* Figma Frame 104 — solid black, not the brand-green this used to be, and
   no longer sticky (the mockup shows it as the totals card's own header
   block, not a floating banner). */
.pt-basket-optimal-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: #000;
	color: #fff;
	border-radius: var( --pt-radius-card ) var( --pt-radius-card ) 0 0;
	margin: -1rem -1.25rem 1rem;
	padding: 1.1rem 1.25rem;
}

.pt-basket-optimal-total-label {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
}

.pt-basket-optimal-total-amount {
	font-weight: 700;
	font-size: 1.375rem;
	white-space: nowrap;
}

/*
 * Partial-coverage chains — carry at least one basket item but not all of
 * them, so their total is only for what they actually stock. Visually
 * quieter than the full-coverage list above it (dashed border, muted
 * amount) so the two are never mistaken for directly comparable numbers.
 */
.pt-basket-total-row--partial {
	border-bottom-style: dashed;
}

.pt-basket-total-row--partial .pt-basket-total-amount {
	color: var( --pt-color-stable );
	font-weight: 500;
}

.pt-basket-total-missing {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var( --pt-color-stable );
}

/*
 * Optimal 2-store split (user request, July 2026) — a realistic "2 stops"
 * middle ground between optimal_total (can span as many chains as there
 * are items) and a single one-stop shop. Sits between the two in visual
 * weight: a bordered card, not the solid brand-color block optimal_total
 * gets, but still its own distinct block above the plain totals list.
 */
.pt-basket-two-store-split {
	border: 1px solid var( --pt-color-border );
	border-radius: var( --pt-radius-card );
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
}

.pt-basket-two-store-split-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.85rem;
	color: var( --pt-color-stable );
	margin-bottom: 0.6rem;
}

.pt-basket-two-store-split-total {
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	font-size: 1.05rem;
	color: var( --pt-color-text );
}

.pt-basket-two-store-split-stores {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pt-basket-two-store-split-store {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.pt-basket-two-store-split-store-name {
	font-weight: 600;
}

.pt-basket-two-store-split-store-count {
	flex: 1;
	color: var( --pt-color-stable );
	font-size: 0.8rem;
}

.pt-basket-two-store-split-store-amount {
	font-family: var( --pt-font-mono );
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.pt-basket-savings--muted {
	background: var( --pt-color-bg-soft );
	color: var( --pt-color-text );
}

.pt-basket-savings--muted strong {
	color: var( --pt-color-brand-dark );
}

/*
 * Price-history popup (user request, July 2026) — the same chart the
 * product page shows, in a lightweight modal so viewing it doesn't
 * navigate away from the basket. Reuses no chart CSS of its own; the
 * fetched .html is the product page's own chart markup/styles.
 */
.pt-basket-history-modal[hidden] {
	display: none;
}

.pt-basket-history-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.pt-basket-history-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 10, 18, 23, 0.55 );
}

.pt-basket-history-modal-box {
	position: relative;
	background: #fff;
	border-radius: var( --pt-radius-card );
	box-shadow: var( --pt-shadow-card );
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 1.25rem;
}

.pt-basket-history-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.pt-basket-history-modal-header h2 {
	font-size: 1.05rem;
	margin: 0;
}

.pt-basket-history-modal-close {
	border: none;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var( --pt-color-stable );
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	flex-shrink: 0;
}

.pt-basket-history-modal-close:hover {
	color: var( --pt-color-up );
}

.pt-basket-history-modal-loading,
.pt-basket-history-modal-error {
	color: var( --pt-color-stable );
	text-align: center;
	padding: 2rem 0;
}

body.pt-modal-open {
	overflow: hidden;
}

/*
 * "Condividi lista" (user request, July 2026). Header row so the button
 * sits next to the page title rather than pushing content down — same
 * share-button visual language (icon + label swapped for a "copied"
 * confirmation) as product-chart.js's own share button.
 */
/* Figma Frame 103/105 — "Calcolatrice della spesa" (the page's own title,
   kept as a real <h1> for SEO) is a small quiet label up top; "Il tuo
   carrello" below it is the actual bold heading, paired with Condividi on
   the same row. */
.pt-basket-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var( --pt-color-stable );
}

.pt-basket-cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.pt-basket-cart-title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
}

#pt-basket-cart-title-suffix {
	font-weight: 400;
	color: var( --pt-color-stable );
}

/* Bigger — 2026-08 request (was reading as an afterthought next to "Il tuo
   carrello"). */
.pt-basket-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1.5px solid #000;
	background: #fff;
	color: #000;
	border-radius: 999px;
	padding: 0.75rem 1.35rem;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	flex-shrink: 0;
}

.pt-basket-share-btn:hover {
	border-color: var( --pt-color-brand );
	color: var( --pt-color-brand-dark );
}

.pt-basket-share-btn-copied {
	display: none;
}

.pt-basket-share-btn.is-copied {
	border-color: var( --pt-color-brand );
	color: var( --pt-color-brand-dark );
}

.pt-basket-share-btn.is-copied .pt-basket-share-btn-label {
	display: none;
}

.pt-basket-share-btn.is-copied .pt-basket-share-btn-copied {
	display: inline;
}

/* Read-only quantity, shared-basket.php — no stepper/remove button there. */
.pt-basket-item-qty-readonly {
	flex-shrink: 0;
	color: var( --pt-color-stable );
	font-size: 0.85rem;
	font-weight: 600;
	font-family: var( --pt-font-mono );
}

.pt-shared-basket-date {
	color: var( --pt-color-stable );
	font-size: 0.9rem;
	margin: 0.25rem 0 1.25rem;
}

.pt-shared-basket-adopt-btn {
	display: block;
	width: 100%;
	border: none;
	background: var( --pt-color-brand );
	color: #fff;
	border-radius: var( --pt-radius-card );
	padding: 0.9rem 1rem;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 1.5rem;
}

.pt-shared-basket-adopt-btn:hover {
	background: var( --pt-color-brand-dark );
}