/*
 * SECTION:  Product page: "added to cart" dialog
 * File:     assets/css/pages/product/sol-product-cartmodal.css
 * Used by:  template-parts/product/sol-product-cart-modal.php
 * To remove: delete this file and its line in inc/assets.php (handle "sol-product-cartmodal").
 */

/* Button while the request is running. */
.sol-buy__form .single_add_to_cart_button.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

.sol-buy__form .single_add_to_cart_button.is-loading::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sol-spin 0.7s linear infinite;
}

@keyframes sol-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Dialog: centered card on larger screens, bottom sheet on phones. */
.sol-cartmodal {
	width: min(440px, calc(100% - 32px));
	margin: auto;
	padding: 0;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-lg);
	background: var(--sol-surface);
	color: var(--sol-text);
	box-shadow: 0 30px 60px -20px var(--sol-shadow);
}

.sol-cartmodal::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.sol-cartmodal[open] {
	animation: sol-modal-in var(--sol-normal) var(--sol-ease);
}

@keyframes sol-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

html:has(.sol-cartmodal[open]) {
	overflow: hidden;
}

.sol-cartmodal__box {
	position: relative;
	display: grid;
	gap: 18px;
	padding: 28px 24px 24px;
}

.sol-cartmodal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--sol-line);
	border-radius: 50%;
	background: transparent;
	color: var(--sol-muted);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
}

.sol-cartmodal__close:hover {
	border-color: var(--sol-gold-text);
	color: var(--sol-text);
}

.sol-cartmodal__title {
	margin: 0;
	padding-inline-end: 44px;
	font-size: 1.375rem;
}

.sol-cartmodal__product {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sol-cartmodal__product img {
	flex: none;
	width: 64px;
	height: 96px;
	object-fit: cover;
	border-radius: 3px 8px 8px 3px;
	background: var(--sol-surface-alt);
}

.sol-cartmodal__name {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.sol-cartmodal__error {
	margin: 0;
	padding: 12px 14px;
	border-left: 4px solid var(--sol-danger);
	border-radius: 8px;
	background: var(--sol-surface-alt);
}

.sol-cartmodal__actions {
	display: grid;
	gap: 10px;
}

.sol-cartmodal [hidden] {
	display: none;
}

@media (min-width: 480px) {
	.sol-cartmodal__actions {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 479px) {
	.sol-cartmodal {
		width: 100%;
		max-width: none;
		margin: auto 0 0;
		border-radius: var(--sol-radius-lg) var(--sol-radius-lg) 0 0;
	}

	.sol-cartmodal__actions {
		/* The main action sits first, under the thumb. */
		grid-template-columns: 1fr;
	}

	.sol-cartmodal__actions .sol-btn:not(.sol-btn--ghost) {
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sol-cartmodal[open],
	.sol-buy__form .single_add_to_cart_button.is-loading::after {
		animation: none;
	}
}