/* Atarinaji custom Cart page — self-contained (own :root tokens, doesn't
   depend on the product-archive stylesheet being loaded on this page). */

@keyframes atarinaji-cart-fade-in-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes atarinaji-cart-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes atarinaji-cart-spin { to { transform: rotate(360deg); } }

:root {
	--atc-bg: oklch(96% 0.015 75);
	--atc-surface: oklch(99% 0.005 70);
	--atc-surface-alt: oklch(94% 0.02 70);
	--atc-border: oklch(88% 0.015 60);
	--atc-border-soft: oklch(90% 0.012 60);
	--atc-text: oklch(24% 0.02 50);
	--atc-text-medium: oklch(30% 0.02 50);
	--atc-text-muted: oklch(55% 0.015 55);
	--atc-accent: oklch(52% 0.13 150);
	--atc-accent-dark: oklch(38% 0.1 150);
	--atc-accent-soft: oklch(94% 0.03 145);
	--atc-danger: oklch(50% 0.15 25);
	--atc-danger-soft: oklch(94% 0.03 30);
	--atc-checkout: oklch(45% 0.13 25);
	--atc-shadow-sm: 0 6px 18px -14px oklch(0% 0 0 / 0.22);
	--atc-shadow-lg: 0 20px 40px -18px oklch(0% 0 0 / 0.28);
}

.atarinaji-cart-page-wrap {
	font-family: 'Vazirmatn', sans-serif;
	min-height: 100vh;
	background: var(--atc-bg);
	padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 56px) 140px;
}
.atarinaji-cart-page-wrap * { box-sizing: border-box; }

.atarinaji-cart-root { max-width: 1200px; margin: 0 auto; }

.atarinaji-cart-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.atarinaji-cart-heading .material-symbols-outlined { font-size: 26px; color: var(--atc-accent); }
.atarinaji-cart-heading h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--atc-text); }
.atarinaji-cart-count { font-size: 13px; color: var(--atc-text-muted); }

/* ---------- Stepper ---------- */
.atarinaji-cart-stepper { display: flex; align-items: center; gap: 8px; margin: 24px 0 28px; }
.atarinaji-step { display: flex; align-items: center; gap: 6px; }
.atarinaji-step-badge {
	width: 26px; height: 26px; border-radius: 999px; background: var(--atc-surface-alt);
	color: var(--atc-text-muted); font-size: 12px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.atarinaji-step-label { font-size: 13px; font-weight: 600; color: var(--atc-text-muted); }
.atarinaji-step.is-active .atarinaji-step-badge { background: var(--atc-accent); color: #fff; }
.atarinaji-step.is-active .atarinaji-step-label { font-weight: 700; color: var(--atc-text); }
.atarinaji-step-line { flex: 1; height: 2px; background: var(--atc-border); max-width: 60px; }

/* ---------- Layout ---------- */
.atarinaji-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }

/* ---------- Items ---------- */
.atarinaji-cart-items { display: flex; flex-direction: column; gap: 14px; }

.atarinaji-cart-row {
	display: flex; gap: 14px; background: var(--atc-surface); border-radius: 18px;
	padding: 14px; box-shadow: var(--atc-shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
	.atarinaji-cart-row { animation: atarinaji-cart-fade-in-up .3s ease both; }
}

.atarinaji-cart-row-image {
	width: 96px; height: 96px; border-radius: 16px; overflow: hidden; flex-shrink: 0;
	background: var(--atc-surface-alt); display: block;
}
.atarinaji-cart-row-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.atarinaji-cart-row-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.atarinaji-cart-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.atarinaji-cart-row-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.atarinaji-cart-row-name {
	font-size: 14.5px; font-weight: 700; color: var(--atc-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atarinaji-cart-row-variant { font-size: 12px; color: var(--atc-text-muted); }

.atarinaji-cart-remove-btn {
	flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; border: none; background: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--atc-text-muted);
	transition: background .15s ease, color .15s ease;
}
.atarinaji-cart-remove-btn:hover { background: var(--atc-danger-soft); color: var(--atc-danger); }
.atarinaji-cart-remove-btn .material-symbols-outlined { font-size: 19px; }

.atarinaji-cart-row-bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; flex-wrap: wrap;
}

.atarinaji-cart-qty { display: flex; align-items: center; border: 1.5px solid var(--atc-border-soft); border-radius: 12px; overflow: hidden; }
.atarinaji-cart-qty-btn {
	width: 34px; height: 38px; flex-shrink: 0; border: none; background: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: var(--atc-text);
}
.atarinaji-cart-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.atarinaji-cart-qty-btn .material-symbols-outlined { font-size: 16px; }
.atarinaji-cart-qty-value { width: 30px; text-align: center; font-weight: 700; font-size: 13.5px; color: var(--atc-text); }

.atarinaji-cart-row-total-num { font-size: 15.5px; font-weight: 800; color: var(--atc-text); }

.atarinaji-cart-continue {
	display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700;
	color: var(--atc-accent-dark); margin-top: 6px; width: fit-content; text-decoration: none;
}
.atarinaji-cart-continue .material-symbols-outlined { font-size: 18px; }

/* ---------- Summary ---------- */
.atarinaji-cart-summary {
	display: flex; flex-direction: column; gap: 14px; background: var(--atc-surface);
	border-radius: 18px; padding: 22px; box-shadow: var(--atc-shadow-sm);
	position: sticky; top: 20px;
}
.atarinaji-cart-summary-title { font-size: 16px; font-weight: 800; color: var(--atc-text); }

.atarinaji-cart-coupon-form { display: flex; gap: 8px; }
.atarinaji-cart-coupon-input {
	flex: 1; height: 44px; border-radius: 12px; border: 1.5px solid var(--atc-border);
	padding: 0 14px; font-family: inherit; font-size: 13px; outline: none; background: oklch(97% 0.008 65);
	color: var(--atc-text);
}
.atarinaji-cart-coupon-btn {
	height: 44px; padding: 0 18px; border-radius: 12px; border: none; background: var(--atc-accent-soft);
	color: var(--atc-accent-dark); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
	white-space: nowrap;
}
.atarinaji-cart-coupon-btn.is-loading { opacity: .6; pointer-events: none; }

.atarinaji-cart-hr { height: 1px; background: var(--atc-border-soft); }

.atarinaji-cart-totals { display: flex; flex-direction: column; gap: 10px; }
.atarinaji-cart-totals-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--atc-text-medium); }
.atarinaji-cart-totals-row span.is-free { color: var(--atc-accent); font-weight: 700; }
.atarinaji-cart-discount-row { color: var(--atc-accent); }
.atarinaji-cart-remove-coupon {
	border: none; background: none; color: var(--atc-text-muted); cursor: pointer; font-size: 13px;
	margin-inline-start: 4px; padding: 0 2px; line-height: 1;
}
.atarinaji-cart-remove-coupon:hover { color: var(--atc-danger); }

.atarinaji-cart-grand-total { display: flex; justify-content: space-between; align-items: baseline; }
.atarinaji-cart-grand-total > span:first-child { font-size: 14.5px; font-weight: 700; color: var(--atc-text); }
.atarinaji-cart-grand-total-num { font-size: 20px; font-weight: 800; color: var(--atc-text); }

.atarinaji-cart-checkout-btn {
	height: 52px; border: none; border-radius: 14px; background: var(--atc-checkout); color: #fff;
	font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	transition: filter .2s ease, transform .2s ease;
}
.atarinaji-cart-checkout-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.atarinaji-cart-checkout-btn .material-symbols-outlined { font-size: 19px; }

.atarinaji-cart-secure-note {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	font-size: 11.5px; color: var(--atc-text-muted);
}
.atarinaji-cart-secure-note .material-symbols-outlined { font-size: 15px; }

/* ---------- Empty state ---------- */
.atarinaji-cart-empty {
	display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 80px 20px; text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
	.atarinaji-cart-empty { animation: atarinaji-cart-fade-in .3s ease both; }
}
.atarinaji-cart-empty .material-symbols-outlined { font-size: 64px; color: oklch(80% 0.03 60); }
.atarinaji-cart-empty-title { font-size: 17px; font-weight: 700; color: var(--atc-text-medium); }
.atarinaji-cart-empty-text { font-size: 13.5px; color: var(--atc-text-muted); max-width: 36ch; }
.atarinaji-cart-empty-cta {
	margin-top: 8px; height: 48px; padding: 0 28px; border-radius: 999px; background: var(--atc-accent);
	color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; text-decoration: none;
}
.atarinaji-cart-empty-cta:hover { color: #fff; }

/* ---------- Mobile sticky checkout bar ---------- */
.atarinaji-cart-sticky-bar {
	display: none;
	position: fixed; bottom: 0; inset-inline: 0; background: var(--atc-surface);
	padding: 12px 16px; box-shadow: 0 -8px 24px -12px oklch(0% 0 0 / 0.25);
	align-items: center; gap: 14px; z-index: 50;
}
.atarinaji-cart-sticky-total { display: flex; flex-direction: column; }
.atarinaji-cart-sticky-total span:first-child { font-size: 11.5px; color: var(--atc-text-muted); }
.atarinaji-cart-sticky-total-num { font-size: 16px; font-weight: 800; color: var(--atc-text); }
.atarinaji-cart-sticky-btn {
	flex: 1; height: 48px; border: none; border-radius: 14px; background: var(--atc-checkout); color: #fff;
	font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
	display: flex; align-items: center; justify-content: center; gap: 6px;
}
.atarinaji-cart-sticky-btn:hover { color: #fff; }

/* ---------- Loading dim while an AJAX mutation is in flight ---------- */
.atarinaji-cart-root.is-updating { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
	.atarinaji-cart-layout { grid-template-columns: 1fr; }
	.atarinaji-cart-summary { position: static; }
	.atarinaji-cart-row-image { width: 76px; height: 76px; }
	.atarinaji-cart-sticky-bar { display: flex; }
	.atarinaji-cart-page-wrap { padding-bottom: 100px; }
}