/**
 * "Achat rapide": the product-card button, the popup (modal) and the popup
 * mode of the product page (body.safa-embed, shown inside the modal's frame).
 */

/* ---- Card button ---- */
.product-card__quick-buy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 42px;
	margin-block-start: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-accent);
	background: var(--color-accent-tint);
	color: var(--color-accent-strong);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.product-card__quick-buy svg { width: 16px; height: 16px; flex: 0 0 auto; }
.product-card__quick-buy:hover,
.product-card__quick-buy:focus-visible {
	background: var(--color-accent-action);
	border-color: var(--color-accent-action);
	color: var(--color-text-on-accent);
}

/* ---- Popup ---- */
html.quick-buy-open { overflow: hidden; }

.quick-buy {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}
.quick-buy[hidden] { display: none; }
.quick-buy__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 24, 48, 0.55);
	animation: quick-buy-fade 0.2s ease;
}
.quick-buy__panel {
	position: relative;
	width: min(560px, 100%);
	height: min(92vh, 820px);
	display: flex;
	flex-direction: column;
	background: var(--color-background);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	animation: quick-buy-pop 0.22s ease;
}
.quick-buy__close {
	position: absolute;
	top: var(--space-3);
	inset-inline-end: var(--space-3);
	z-index: 2;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-background);
	color: var(--color-primary);
	cursor: pointer;
}
.quick-buy__close svg { width: 18px; height: 18px; }
.quick-buy__close:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.quick-buy__frame {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: var(--color-background);
}
.quick-buy__loading {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-background);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}
.quick-buy__loading[hidden] { display: none; }

@keyframes quick-buy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes quick-buy-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 576px) {
	.quick-buy { padding: 0; align-items: flex-end; }
	.quick-buy__panel { width: 100%; height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ---- Added-to-cart confirmation ---- */
.quick-buy-toast {
	position: fixed;
	inset-inline: var(--space-4);
	bottom: var(--space-5);
	z-index: 1001;
	max-width: 420px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-text-on-primary);
	box-shadow: var(--shadow-md);
	font-size: var(--text-sm);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base);
}
.quick-buy-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.quick-buy-toast a { color: var(--color-accent-tint); font-weight: var(--font-weight-bold); text-decoration: underline; white-space: nowrap; }

/* ---- Popup mode of the product page (inside the frame) ---- */
.safa-embed .site-header,
.safa-embed .site-footer,
.safa-embed .mobile-nav,
.safa-embed .mobile-nav-backdrop,
.safa-embed .skip-link,
.safa-embed .woocommerce-breadcrumb,
.safa-embed .woocommerce-product-gallery,
.safa-embed .woocommerce-tabs,
.safa-embed .related,
.safa-embed .upsells,
.safa-embed .product_meta,
.safa-embed .woocommerce-message,
.safa-embed .woocommerce-product-details__short-description,
.safa-embed .summary > .price,
.safa-embed .summary .product_title,
.safa-embed .summary .woocommerce-product-rating,
.safa-embed .single-product-summary__badge,
.safa-embed .onsale,
.safa-embed [class*="cookieadmin"] { display: none !important; }

.safa-embed { background: var(--color-background); }
.safa-embed .site-main { padding: 0; }
.safa-embed .section { padding-block: 0; }
/* Top padding leaves room for the popup's close button. */
.safa-embed .container { padding: 56px var(--space-4) var(--space-4); max-width: none; }
.safa-embed.single-product div.product { display: block; margin: 0; padding: 0; }
.safa-embed .summary.entry-summary { padding: 0; }
.safa-embed .quick-order-card { margin-block-start: 0; }

/* The card has its own quantity and "add to cart"; the native ones stay in
   the page (the card submits the native form) but out of sight. */
.safa-embed form.cart:not(.variations_form) { display: none; }
/* !important: WooCommerce re-shows these with an inline style once a variation is picked. */
.safa-embed form.variations_form .woocommerce-variation-add-to-cart .quantity,
.safa-embed form.variations_form .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: none !important; }
