/*
 * happymonday/consent — brand skin for the BoberStore consent banner.
 *
 * The plugin (boberstore/assets/consent/banner.css) owns layout, stacking and
 * legibility; this file owns the look only. Same split as commerce.css over the
 * account/cart/checkout blocks — the banner must stay usable if this file never
 * loads.
 *
 * Tokens used (assets/tokens.css → theme.json):
 *   --hm-bg-1        cream  — banner + dialog surface
 *   --hm-accent-1    orange — the accept fill
 *   --hm-ink         black  — text, borders
 *   --hm-font-head   Fraunces (headings)  /  --hm-font-body  DM Sans
 *   --hm-radius-pill / --hm-radius-lg / --hm-shadow
 *
 * One rule here is NOT cosmetic: Accept and Reject keep the same padding, the
 * same font size and the same row. Emphasis may differ (that is the operator's
 * `emphasized` setting); effort must not. Recolouring is fine — shrinking the
 * reject button is a compliance regression.
 *
 * Layout: bottom-left card on desktop, full-width sheet on mobile.
 */

/* ========================================================== first layer */

.bs-consent {
	background: var(--hm-bg-1, #FFF9F1);
	color: var(--hm-ink, #000);
	font-family: var(--hm-font-body, sans-serif);
	border-top: 1px solid var(--hm-line, rgba(0, 0, 0, 0.14));
	box-shadow: 0 -6px 28px var(--hm-shadow-soft, rgba(0, 0, 0, 0.08));
	animation: hm-consent-in 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes hm-consent-in {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.bs-consent__heading {
	font-family: var(--hm-font-head, serif);
	font-weight: var(--hm-head-weight, 600);
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.bs-consent__body {
	color: var(--hm-text, #000);
	max-width: 46ch;
}

.bs-consent__policy a,
.bs-consent__link {
	color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
	text-underline-offset: 0.2em;
}

.bs-consent__policy a:hover,
.bs-consent__link:hover {
	color: var(--hm-ink, #000);
}

/* ---- buttons: pills, identical geometry, different fill only ---------- */

.bs-consent__btn {
	font-family: var(--hm-font-body, sans-serif);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.55rem 1.05rem;
	border-radius: var(--hm-radius-pill, 999px);
	border: 2px solid var(--hm-ink, #000);
	transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bs-consent__btn:hover {
	transform: translateY(-1px);
}

/* `emphasized` (default): filled accent vs. outlined ink. */
.bs-consent__btn--primary {
	background: var(--hm-accent-1, #EA6C2F);
	border-color: var(--hm-accent-1, #EA6C2F);
	color: var(--hm-bg-1, #FFF9F1);
}

.bs-consent__btn--primary:hover {
	background: var(--hm-ink, #000);
	border-color: var(--hm-ink, #000);
}

.bs-consent__btn--secondary {
	background: transparent;
	color: var(--hm-ink, #000);
}

.bs-consent__btn--secondary:hover {
	background: var(--hm-ink, #000);
	color: var(--hm-bg-1, #FFF9F1);
}

/* `equal`: one class, one appearance — the setting means what it says. */
.bs-consent__btn--equal {
	background: transparent;
	color: var(--hm-ink, #000);
}

.bs-consent__btn--equal:hover {
	background: var(--hm-ink, #000);
	color: var(--hm-bg-1, #FFF9F1);
}

/* ---- desktop: a card in the bottom-left corner ----------------------- */

@media (min-width: 641px) {
	.bs-consent {
		left: clamp(1rem, 2vw, 2rem);
		right: auto;
		bottom: clamp(1rem, 2vw, 2rem);
		width: min(25rem, calc(100vw - 2rem));
		padding: 0.85rem 1.05rem;
		border: 1px solid var(--hm-line, rgba(0, 0, 0, 0.14));
		border-radius: var(--hm-radius-lg, 22px);
		box-shadow: 0 12px 34px var(--hm-shadow, rgba(0, 0, 0, 0.14));
	}

	.bs-consent__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/* THE reason this card was 352px tall. The plugin gives the copy block
	   `flex: 1 1 22rem`, which is a sensible minimum WIDTH in its row layout —
	   but this rule turns the container into a column, and flex-basis applies to
	   the main axis. In a column that 22rem is a minimum HEIGHT (= 352px), so the
	   card was propped open regardless of how little text it held.

	   Sizing to content is what a column wants. */
	.bs-consent__copy {
		flex: 0 1 auto;
	}

	/* These margins predate the column layout, where the flex gap already
	   separates the rows — keeping both double-spaced the stack. */
	.bs-consent__heading {
		margin-bottom: 0.1rem;
	}

	.bs-consent__policy {
		margin-top: 0.2rem;
	}

	.bs-consent__actions {
		width: 100%;
		gap: 0.45rem;
	}

	/* The plugin's structural CSS gives each button `flex: 1 1 10rem`, which is
	   right for a full-width sheet but not for this card: two 10rem bases plus
	   the Preferences control exceed the ~23rem of usable width, so the row
	   wrapped and the card grew a whole extra line taller. Size to content
	   instead and all three sit on one row.

	   Accept and Reject still share one rule, so they keep identical geometry. */
	.bs-consent__btn {
		flex: 0 1 auto;
	}
}

/* ============================================================== dialog */

.bs-consent-dialog {
	background: var(--hm-bg-1, #FFF9F1);
	color: var(--hm-ink, #000);
	font-family: var(--hm-font-body, sans-serif);
	border-radius: var(--hm-radius-lg, 22px);
	box-shadow: 0 18px 48px var(--hm-shadow, rgba(0, 0, 0, 0.14));
}

.bs-consent-dialog[open] {
	animation: hm-consent-dialog-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes hm-consent-dialog-in {
	from {
		transform: translateY(12px) scale(0.985);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.bs-consent-dialog__title {
	font-family: var(--hm-font-head, serif);
	font-weight: var(--hm-head-weight, 600);
	letter-spacing: -0.01em;
}

.bs-consent-dialog__intro,
.bs-consent-cat__desc,
.bs-consent-cat__always {
	color: var(--hm-text-muted, rgba(0, 0, 0, 0.62));
}

.bs-consent-dialog__close:hover {
	color: var(--hm-accent-1, #EA6C2F);
}

.bs-consent-cat {
	border-top-color: var(--hm-line, rgba(0, 0, 0, 0.14));
}

.bs-consent-cat__input {
	accent-color: var(--hm-accent-1, #EA6C2F);
}

.bs-consent-cat__name {
	font-family: var(--hm-font-head, serif);
	font-weight: var(--hm-head-weight, 600);
	font-size: 1.02rem;
}

.bs-consent-vendor {
	border-radius: var(--hm-radius, 12px);
	background: var(--hm-bg-1-deep, rgba(0, 0, 0, 0.03));
	padding: 0.5rem 0.75rem;
}

.bs-consent-vendor__summary {
	font-weight: 700;
}

.bs-consent-cookies th,
.bs-consent-cookies td {
	border-top-color: var(--hm-line, rgba(0, 0, 0, 0.14));
}

.bs-consent-cookies code {
	font-size: 0.95em;
}

/* --------------------------------------------------- withdrawal control */

/* It is a footer link, so it follows the footer link tokens (which default to
   --hm-footer-text, keeping the previous colour when nothing is overridden). */
.hm-footer .bs-consent-open {
	color: var(--hm-footer-link, var(--hm-footer-text, #FFF9F1));
	opacity: 0.85;
	text-underline-offset: 0.2em;
}

.hm-footer .bs-consent-open:hover {
	opacity: 1;
	color: var(--hm-footer-link-hover, var(--hm-footer-link, var(--hm-footer-text, #FFF9F1)));
}

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {

	.bs-consent,
	.bs-consent-dialog[open] {
		animation: none;
	}

	.bs-consent__btn {
		transition: none;
	}

	.bs-consent__btn:hover {
		transform: none;
	}
}