/**
 * YQode Cookie Banner - floating card layouts (corners and edge centred).
 */

.yqcb-layout-bottom-left .yqcb-window,
.yqcb-layout-bottom-right .yqcb-window,
.yqcb-layout-bottom-center .yqcb-window,
.yqcb-layout-top-left .yqcb-window,
.yqcb-layout-top-right .yqcb-window,
.yqcb-layout-top-center .yqcb-window {
	width: calc( 100% - 2 * var( --yqcb-offset, 24px ) );
	max-width: var( --yqcb-card-width, 420px );
}

.yqcb-layout-bottom-left .yqcb-window,
.yqcb-layout-bottom-right .yqcb-window,
.yqcb-layout-bottom-center .yqcb-window {
	bottom: var( --yqcb-offset, 24px );
}

.yqcb-layout-top-left .yqcb-window,
.yqcb-layout-top-right .yqcb-window,
.yqcb-layout-top-center .yqcb-window {
	top: var( --yqcb-offset, 24px );
}

.yqcb-layout-bottom-left .yqcb-window,
.yqcb-layout-top-left .yqcb-window {
	left: var( --yqcb-offset, 24px );
}

.yqcb-layout-bottom-right .yqcb-window,
.yqcb-layout-top-right .yqcb-window {
	right: var( --yqcb-offset, 24px );
}

.yqcb-layout-bottom-center .yqcb-window,
.yqcb-layout-top-center .yqcb-window {
	left: 50%;
	transform: translateX( -50% );
}

.yqcb-layout-bottom-center:not( .is-visible ) .yqcb-window,
.yqcb-layout-top-center:not( .is-visible ) .yqcb-window {
	transform: translateX( -50% ) translateY( 10px );
}

.yqcb-layout-bottom-left.yqcb-anim-slide:not( .is-visible ) .yqcb-window,
.yqcb-layout-top-left.yqcb-anim-slide:not( .is-visible ) .yqcb-window {
	transform: translateX( calc( -100% - var( --yqcb-offset, 24px ) ) );
}

.yqcb-layout-bottom-right.yqcb-anim-slide:not( .is-visible ) .yqcb-window,
.yqcb-layout-top-right.yqcb-anim-slide:not( .is-visible ) .yqcb-window {
	transform: translateX( calc( 100% + var( --yqcb-offset, 24px ) ) );
}

.yqcb-layout-bottom-center.yqcb-anim-slide:not( .is-visible ) .yqcb-window {
	transform: translateX( -50% ) translateY( calc( 100% + var( --yqcb-offset, 24px ) ) );
}

.yqcb-layout-top-center.yqcb-anim-slide:not( .is-visible ) .yqcb-window {
	transform: translateX( -50% ) translateY( calc( -100% - var( --yqcb-offset, 24px ) ) );
}

@media ( max-width: 600px ) {
	.yqcb-layout-bottom-left .yqcb-window,
	.yqcb-layout-bottom-right .yqcb-window,
	.yqcb-layout-top-left .yqcb-window,
	.yqcb-layout-top-right .yqcb-window {
		left: var( --yqcb-offset, 24px );
		right: var( --yqcb-offset, 24px );
		max-width: none;
	}
}