/* ==========================================================================
   Basket & Checkout — Items, summary, donation, checkout placeholder
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASKET PAGE LAYOUT
   -------------------------------------------------------------------------- */

.basket-page {
	padding-bottom: var(--space-3xl);
	min-height: 60vh;
}

.basket-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

@media (min-width: 768px) {
	.basket-layout {
		grid-template-columns: 1fr 360px;
		gap: var(--space-2xl);
	}
}

/* --------------------------------------------------------------------------
   2. LOADING SKELETON
   -------------------------------------------------------------------------- */

.skeleton--basket {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-2xl) 0;
}

.skeleton__line {
	height: 20px;
	background: linear-gradient(90deg, var(--color-bg-soft) 25%, var(--color-border) 50%, var(--color-bg-soft) 75%);
	background-size: 200% 100%;
	border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: no-preference) {
	.skeleton__line {
		animation: skeleton-shimmer 1.5s infinite;
	}

	@keyframes skeleton-shimmer {
		0% { background-position: 200% 0; }
		100% { background-position: -200% 0; }
	}
}

.skeleton__line--wide { width: 100%; }
.skeleton__line--medium { width: 60%; }

/* --------------------------------------------------------------------------
   3. EMPTY STATE
   -------------------------------------------------------------------------- */

.basket-empty {
	text-align: center;
	padding: var(--space-4xl) var(--space-xl);
}

.basket-empty__icon {
	color: var(--color-text-light);
	margin-bottom: var(--space-lg);
}

.basket-empty__title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-sm);
}

.basket-empty__text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   4. BASKET ITEMS
   -------------------------------------------------------------------------- */

.basket-item {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: var(--space-md);
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-border);
	align-items: start;
}

@media (min-width: 480px) {
	.basket-item {
		grid-template-columns: 80px 1fr auto auto;
	}
}

.basket-item__image {
	width: 60px;
	height: 60px;
	border-radius: var(--radius-sm);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

@media (min-width: 480px) {
	.basket-item__image {
		width: 80px;
		height: 80px;
	}
}

.basket-item__info {
	min-width: 0;
}

.basket-item__name {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	margin-bottom: 2px;
}

.basket-item__name a {
	text-decoration: none;
	color: var(--color-dark);
}

.basket-item__name a:hover {
	color: var(--color-primary);
}

.basket-item__details {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-snug);
}

.basket-item__ticket-type {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text);
}

.basket-item__price {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Quantity controls */
.basket-item__qty {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.basket-item__qty-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-text);
	transition: background-color var(--transition-base);
}

.basket-item__qty-btn:hover:not(:disabled) {
	background-color: var(--color-primary);
	color: var(--color-bg);
	border-color: var(--color-primary);
}

.basket-item__qty-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.basket-item__qty-btn:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.basket-item__qty-count {
	min-width: 24px;
	text-align: center;
	font-weight: var(--weight-semibold);
}

/* Line total and remove */
.basket-item__total {
	text-align: right;
}

.basket-item__line-total {
	font-weight: var(--weight-bold);
	font-size: var(--text-base);
	display: block;
}

.basket-item__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-danger);
	font-size: var(--text-xs);
	padding: var(--space-xs) 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: var(--space-xs);
	display: block;
}

.basket-item__remove:hover {
	color: var(--color-dark);
}

.basket-item__remove:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. ORDER SUMMARY SIDEBAR
   -------------------------------------------------------------------------- */

.basket-summary__inner {
	position: sticky;
	top: calc(var(--header-height) + var(--space-lg));
	background-color: var(--color-bg-soft);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
}

.basket-summary__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-lg);
}

.basket-summary__lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.basket-summary__line {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Donation */
.basket-donation {
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-border);
}

.basket-donation__title {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-xs);
}

.basket-donation__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.basket-donation__options {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.basket-donation__btn {
	padding: 0.375em 0.875em;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-bg);
	cursor: pointer;
	transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}

.basket-donation__btn:hover {
	border-color: var(--color-accent);
}

.basket-donation__btn--active {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-dark);
}

.basket-donation__btn:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Total */
.basket-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-lg) 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
}

.basket-summary__total-amount {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-extrabold);
	color: var(--color-primary);
}

.basket-summary__checkout {
	margin-bottom: var(--space-md);
}

.basket-summary__note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
   6. CHECKOUT PAGE
   -------------------------------------------------------------------------- */

.checkout-page {
	padding-bottom: var(--space-3xl);
}

.checkout-layout {
	max-width: 640px;
}

.checkout-iframe-placeholder {
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2xl);
	text-align: center;
	margin-bottom: var(--space-2xl);
	background-color: var(--color-bg-soft);
}

.checkout-iframe-placeholder__icon {
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.checkout-iframe-placeholder__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-sm);
}

.checkout-iframe-placeholder__text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.checkout-iframe-placeholder__note {
	font-size: var(--text-xs);
	color: var(--color-warning);
	font-weight: var(--weight-semibold);
}

.checkout-items {
	margin-bottom: var(--space-xl);
}

.checkout-items h3 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-md);
}

.checkout-total {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	padding-top: var(--space-md);
	border-top: 2px solid var(--color-dark);
	margin-top: var(--space-md);
}

.checkout-pay-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}