/* velora-consent.css
 * -----------------------------------------------------------------------------
 * Cookie consent (CookieYes) restyled as a slim, full-width bottom bar.
 *
 * The plugin ships as a "box, bottom-left" card (440x245 desktop / 377px-tall
 * on mobile) that floats over content and, on phones, covers the hero CTA on
 * first load. These overrides pin it to the foot of the viewport as a short
 * full-width bar that never overlaps the hero, and suppress the persistent
 * floating "Consent Preferences" revisit button on mobile.
 *
 * Consent stays withdrawable on mobile via the "Cookie preferences" footer
 * link added in velora-styles.php (it calls window.revisitCkyConsent()), so
 * hiding the floating button does not break UK PECR / GDPR withdrawal.
 *
 * Selectors verified against live CookieYes markup on veloratea.com 2026-07-22.
 * Measured result: bar height 136px desktop / 184px mobile (was 245 / 377);
 * hero "Try Velora Tea" CTA no longer covered on a 375x812 first fold.
 * -----------------------------------------------------------------------------
 */

/* Full-width, pinned to the foot of the viewport (overrides box-bottom-left) */
.cky-consent-container.cky-box-bottom-left,
.cky-consent-container {
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

.cky-consent-container .cky-consent-bar {
	width: 100% !important;
	max-width: none !important;
	border: none !important;
	border-top: 1px solid rgba(231, 167, 60, .28) !important; /* gold hairline ties it to the brand */
	border-radius: 0 !important;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .35) !important;
	padding: 14px clamp(16px, 4vw, 40px) !important;
}

/* Centre the content on wide viewports without letting it stretch edge-to-edge */
.cky-consent-container .cky-notice-content-wrapper {
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}
.cky-consent-container .cky-notice { margin: 0 !important; padding: 0 !important; }
.cky-consent-container .cky-title { margin: 0 0 4px !important; font-size: 15px !important; line-height: 1.3 !important; }
.cky-consent-container .cky-notice-des { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; }
.cky-consent-container .cky-notice-des p { margin: 0 !important; }

/* The plugin forces width:100% on the buttons, which makes them stack — undo it */
.cky-consent-container .cky-notice-btn-wrapper button { width: auto !important; white-space: nowrap !important; }

/* Wide screens: description and buttons share one slim row */
@media (min-width: 769px) {
	.cky-consent-container .cky-notice-group {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 28px !important;
	}
	.cky-consent-container .cky-notice-des {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}
	.cky-consent-container .cky-notice-btn-wrapper {
		flex: 0 0 auto !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		gap: 10px !important;
		margin: 0 !important;
	}
}

/* Mobile: title, 2-line description, three equal buttons in a single row */
@media (max-width: 768px) {
	.cky-consent-container .cky-consent-bar {
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
		max-height: 42vh !important; /* safety net — content should stay well under this */
		overflow-y: auto !important;
	}
	.cky-consent-container .cky-notice-group {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
	}
	.cky-consent-container .cky-notice-des {
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}
	.cky-consent-container .cky-notice-btn-wrapper {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 8px !important;
		margin: 0 !important;
	}
	.cky-consent-container .cky-notice-btn-wrapper button {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* Suppress the persistent floating "Consent Preferences" button on mobile.
	   Withdrawal stays available via the footer "Cookie preferences" link. */
	.cky-btn-revisit-wrapper { display: none !important; }
}