/**
 * FZ-152 RF Pro — Cookie banner designer (card modes).
 */

.f152-banner.f152-banner--card {
	position: fixed;
	bottom: var(--f152-card-offset-bottom, 20px);
	width: var(--f152-card-width, 380px);
	max-width: calc(100vw - 24px);
	padding: var(--f152-card-padding, 16px);
	border: var(--f152-card-border-width, 1px) solid var(--f152-card-border-color, #e2e2e2);
	border-radius: var(--f152-card-radius, 12px);
	background: var(--f152-card-bg, #ffffff);
	color: var(--f152-card-text, #1f2328);
	box-shadow: var(--f152-card-shadow, 0 10px 30px rgba(0,0,0,.12));
	box-sizing: border-box;
	inset-inline: auto;
	border-top: 0;
	z-index: 2147483000;
}

.f152-banner.f152-banner--card-left  { left:  var(--f152-card-offset-side, 20px); }
.f152-banner.f152-banner--card-right { right: var(--f152-card-offset-side, 20px); }

.f152-banner.f152-banner--card .f152-banner__inner {
	max-width: none;
	margin: 0;
	padding: 0;
}

.f152-banner.f152-banner--card .f152-banner__layout {
	flex-direction: column;
	align-items: stretch;
	gap: .75rem;
}

.f152-banner.f152-banner--card .f152-banner__message {
	flex: none;
	min-width: 0;
	color: var(--f152-card-text);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.f152-banner.f152-banner--card .f152-banner__message a {
	color: var(--f152-card-link);
}

.f152-banner.f152-banner--card .f152-banner__actions {
	flex: 0 0 auto;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: .5rem;
}

.f152-banner.f152-banner--card .f152-btn--accept {
	background: var(--f152-card-accept-bg, var(--f152-btn-accept-bg, var(--f152-btn-bg, #2271b1)));
	color: var(--f152-card-accept-text, var(--f152-btn-accept-text, var(--f152-btn-text, #ffffff)));
}

.f152-banner.f152-banner--card .f152-btn--settings {
	background: var(--f152-card-settings-bg, #ffffff);
	color: var(--f152-card-settings-text, var(--f152-link, #1e73be));
}

.f152-banner.f152-banner--card .f152-btn--reject {
	background: var(--f152-card-reject-bg, #c0c0c0);
	color: var(--f152-card-reject-text, #ffffff);
}

@media (max-width: 840px) {
	.f152-banner.f152-banner--card {
		width: auto;
		max-width: calc(100vw - calc(2 * var(--f152-card-offset-side, 20px)));
	}
}

@media (max-width: 560px) {
	.f152-banner.f152-banner--card,
	.f152-banner.f152-banner--card-left,
	.f152-banner.f152-banner--card-right {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: none;
		bottom: 12px;
	}

	.f152-banner.f152-banner--card .f152-banner__actions .f152-btn {
		flex: 1 1 auto;
	}
}