/**
 * Craquenet Academy - Carrinho (novo design)
 *
 * Só carregado em is_cart() (ver functions.php), depois de
 * design-system.css e woocommerce.css. Estilo do markup gerado por
 * woocommerce/cart/cart.php, cart-totals.php e cross-sells.php (overrides
 * do tema). Adaptado de DESIGN-CRAQUENET-LOJA/mockup-cart.html, trocando
 * só o que dependia de dado fake por seletor de dado real do WooCommerce
 * (ex: input.qty nativo em vez de <span> decorativo).
 */

/* ── FRETE GRÁTIS (progresso) ── */
.frete-bar-wrap {
	background: var(--gray-light);
	border: 1px solid var(--gray-border);
	border-radius: var(--radius-lg);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) 0 0;
}
.frete-bar-label {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--green-dark);
	margin-bottom: var(--space-xs);
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	flex-wrap: wrap;
}
.frete-bar-label svg { color: var(--green-primary); flex-shrink: 0; }
.frete-bar-track { height: 8px; background: var(--gray-border); border-radius: var(--radius-pill); overflow: hidden; }
.frete-bar-fill { height: 100%; background: var(--yellow-accent); border-radius: var(--radius-pill); transition: width 0.6s ease; }
.frete-bar-sub { font-size: var(--text-caption); color: var(--color-muted); margin-top: var(--space-2xs); }
.frete-bar-sub strong { color: var(--green-dark); }

/* ── LAYOUT ── */
.cart-section { padding: var(--space-lg) 0 var(--space-2xl); }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-lg); align-items: start; }
@media (max-width: 1024px) {
	.cart-layout { grid-template-columns: 1fr; }
	.cart-summary { order: -1; position: static !important; }
}

.cart-items-head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: var(--space-xs); border-bottom: 1px solid var(--gray-border);
	margin-bottom: var(--space-2xs);
}
.cart-items-head span { font-weight: 700; font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }

/* ── ITEM ── */
.cart-item { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--gray-border); }
.cart-item:last-of-type { border-bottom: none; }
.cart-item-thumb {
	width: 90px; height: 110px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0;
	background: var(--gray-light); border: 1px solid var(--gray-border);
	display: flex; align-items: center; justify-content: center;
}
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-thumb svg { width: 38px; height: 38px; color: var(--green-primary); opacity: 0.55; }
.cart-item-body { display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; }
.cart-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xs); }
.cart-item-name { font-weight: 700; font-size: 1rem; color: var(--green-dark); line-height: 1.3; margin-bottom: 4px; }
.cart-item-name a { color: inherit; }
.cart-item-variant { font-size: var(--text-caption); color: var(--color-muted); }
.cart-item-remove {
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius-sm); color: var(--color-muted); flex-shrink: 0;
	border: 1px solid transparent; transition: var(--transition-fast);
}
.cart-item-remove:hover { color: var(--color-error); background: var(--color-error-bg); border-color: rgba(192, 57, 43, 0.2); }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); flex-wrap: wrap; }
.cart-item-price { font-family: var(--font-proxima); font-size: 1.15rem; font-weight: 700; color: var(--green-dark); }
.cart-item-price-sub { font-size: var(--text-caption); color: var(--color-muted); margin-top: 1px; }

/* ── STEPPER DE QUANTIDADE (envolve o input.qty nativo do WooCommerce) ── */
.qty-wrap { display: flex; align-items: center; border: 1.5px solid var(--gray-border); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.qty-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--green-primary); background: transparent; border: none; flex-shrink: 0; transition: var(--transition-fast); cursor: pointer; }
.qty-btn:hover { background: var(--gray-light); }
.qty-btn:disabled { opacity: 0.35; cursor: default; }
.qty-wrap input.qty {
	width: 38px; height: 34px; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--green-dark);
	border: none; border-left: 1px solid var(--gray-border); border-right: 1px solid var(--gray-border);
	background: var(--white); -moz-appearance: textfield;
}
.qty-wrap input.qty::-webkit-outer-spin-button,
.qty-wrap input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-update-row { margin-top: var(--space-md); display: flex; justify-content: flex-end; }

/* ── CUPOM ── */
.coupon-wrap { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--gray-border); }
.coupon-label { font-weight: 700; font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2xs); }
.coupon-row { display: flex; gap: var(--space-2xs); }
.coupon-input { flex: 1; min-width: 0; height: 48px; border: 1.5px solid var(--gray-border); border-radius: var(--radius-sm); padding: 0 var(--space-sm); font-size: 0.9rem; color: var(--green-primary); background: var(--white); outline: none; transition: border-color var(--transition-fast); }
.coupon-input:focus { border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(14, 76, 39, 0.12); }
.coupon-apply { height: 48px; padding: 0 var(--space-md); font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.05em; text-transform: uppercase; background: var(--green-primary); color: var(--white); border-radius: var(--radius-sm); border: none; cursor: pointer; transition: var(--transition-base); flex-shrink: 0; white-space: nowrap; }
.coupon-apply:hover { background: var(--green-dark); }
.coupon-chip {
	display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-xs);
	padding: 8px 16px; background: var(--color-success-bg); border: 1px solid rgba(21, 122, 65, 0.25);
	border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 700; color: var(--color-success);
}
.coupon-chip .remove-coupon { color: var(--color-success); text-decoration: underline; margin-left: 4px; }

/* ── RESUMO DO PEDIDO ── */
.cart-summary { background: var(--gray-light); border: 1px solid var(--gray-border); border-radius: var(--radius-lg); padding: var(--space-md); position: sticky; top: var(--space-md); }
.summary-title { font-family: var(--font-owners); font-weight: 900; text-transform: uppercase; font-size: 1.15rem; color: var(--green-dark); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--gray-border); }
.summary-lines { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
.summary-line { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xs); }
.summary-line-label { font-size: 0.9rem; color: var(--color-muted); line-height: 1.4; }
.summary-line-val { font-weight: 700; font-size: 0.9rem; color: var(--green-dark); white-space: nowrap; flex-shrink: 0; }
.summary-line-val.success { color: var(--color-success); }
.summary-line-val.muted { color: var(--color-muted); font-weight: 400; }

/* Calculadora de frete nativa (cart/shipping-calculator.php, não
 * sobrescrito - functions.php filtra pra só sobrar o campo de CEP via
 * woocommerce_shipping_calculator_enable_country/_state/_city). */
.shipping-calculator-button {
	font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--green-primary); text-decoration: underline; text-underline-offset: 2px;
}
#shipping-calculator-form { margin-top: var(--space-2xs); }
#shipping-calculator-form .form-row { margin-bottom: var(--space-2xs); }
#shipping-calculator-form label { font-size: var(--text-caption); color: var(--color-muted); display: block; margin-bottom: 4px; }
#shipping-calculator-form input.input-text {
	width: 100%; height: 42px; border: 1.5px solid var(--gray-border); border-radius: var(--radius-sm);
	padding: 0 var(--space-xs); font-size: var(--text-caption); color: var(--green-primary); background: var(--white);
	outline: none; transition: border-color var(--transition-fast);
}
#shipping-calculator-form input.input-text:focus { border-color: var(--green-primary); }
#shipping-calculator-form button[name="calc_shipping"] {
	height: 42px; padding: 0 var(--space-sm); font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.04em; text-transform: uppercase;
	background: transparent; border: 1.5px solid var(--green-primary); color: var(--green-primary); border-radius: var(--radius-sm);
	cursor: pointer; transition: var(--transition-base); white-space: nowrap;
}
#shipping-calculator-form button[name="calc_shipping"]:hover { background: var(--green-primary); color: var(--white); }

.summary-div { height: 1px; background: var(--gray-border); margin: var(--space-sm) 0; }
.summary-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); margin-bottom: 4px; }
.summary-total-label { font-weight: 700; font-size: 0.95rem; color: var(--green-dark); }
.summary-total-val { font-family: var(--font-proxima); font-size: 1.9rem; font-weight: 700; color: var(--green-dark); }
.summary-installments { font-size: var(--text-caption); color: var(--color-muted); text-align: right; margin-bottom: var(--space-sm); }

.checkout-actions { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; }
.checkout-actions .btn { width: 100%; }
.continue-link { font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-fast); margin-top: 2px; }
.continue-link:hover { color: var(--green-primary); }

.pay-icons { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--gray-border); }
.pay-icons-label { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2xs); text-align: center; }
.pay-icons-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pay-ic-chip { height: 28px; padding: 0 12px; background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius-sm); display: inline-flex; align-items: center; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.03em; color: var(--color-muted); white-space: nowrap; }

.secure-note { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: var(--space-sm); font-size: var(--text-caption); color: var(--color-muted); }
.secure-note svg { flex-shrink: 0; color: var(--color-muted); }

/* ── CROSS-SELL ("Você também pode gostar de...") ──
 * woocommerce/cart/cross-sells.php reaproveita o .product-card do grid da
 * loja (mesmo content-product.php), só forçando o wrapper a virar uma
 * faixa com scroll horizontal em vez do grid de 4 colunas padrão. */
.upsell-strip { background: var(--gray-light); border-top: 1px solid var(--gray-border); border-bottom: 1px solid var(--gray-border); padding: var(--space-md) 0; }
.upsell-strip .upsell-hd { font-weight: 700; font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-sm); display: block; }
.upsell-strip .products-grid {
	display: flex;
	gap: var(--space-md);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.upsell-strip .products-grid::-webkit-scrollbar { display: none; }
.upsell-strip .product-card { flex: 0 0 220px; }

/* ── BARRA STICKY MOBILE ── */
.mobile-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--white); border-top: 1px solid var(--gray-border); padding: var(--space-xs) var(--page-px); gap: var(--space-sm); align-items: center; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); }
.mob-total-label { font-size: var(--text-caption); color: var(--color-muted); }
.mob-total-val { font-family: var(--font-proxima); font-size: 1.3rem; font-weight: 700; color: var(--green-dark); }
.mobile-sticky-bar .btn { flex-shrink: 0; height: 48px; padding: 0 var(--space-md); font-size: var(--text-caption); }

@media (max-width: 768px) {
	.mobile-sticky-bar { display: flex; }
	.cart-section { padding-bottom: 100px; }
	.cart-summary .checkout-actions,
	.cart-summary .continue-link { display: none; }
	.cart-item { grid-template-columns: 70px 1fr; gap: var(--space-xs); }
	.cart-item-thumb { width: 70px; height: 88px; }
}
@media (max-width: 480px) {
	.cart-item-bottom { flex-direction: row; }
	.coupon-row { flex-direction: column; }
	.coupon-apply { width: 100%; }
}

/* ── CARRINHO VAZIO ── */
.cart-empty-state { text-align: center; padding: var(--space-2xl) var(--space-md); }
.cart-empty-state svg { color: var(--gray-border); margin: 0 auto var(--space-md); }
.cart-empty-state p { color: var(--color-muted); margin-bottom: var(--space-md); font-size: var(--text-body-lg); }