/**
 * Cookie Consent — Common base CSS (loads for every style).
 *
 * Shared mechanics only: fixed positioning + corner placement, the show / hide
 * entrance transition, box layout, icon, text, links, button reset and the
 * dismissed / editor-preview states. Each style file paints the visual skin (card,
 * bar, modal, pill, toast).
 *
 * The notice is hidden until JS adds `is-visible`, so nothing flashes before a
 * remembered choice is read. `is-dismissed` removes it; `is-preview` makes it
 * inline inside the Elementor editor.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-cookie {
	--captwiki-cookie-accent: #6366f1;
	box-sizing: border-box;
}

.captwiki-cookie *,
.captwiki-cookie *::before,
.captwiki-cookie *::after {
	box-sizing: border-box;
}

.captwiki-cookie.is-dismissed {
	display: none;
}

/* ── Backdrop (modal style only) ───────────────────────── */
.captwiki-cookie__backdrop {
	display: none;
}

/* ── Box ───────────────────────────────────────────────── */
.captwiki-cookie__box {
	position: fixed;
	z-index: 99997;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	width: calc( 100% - 40px );
	max-width: 440px;
	padding: 22px 24px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 24px 60px -18px rgba( 17, 24, 39, 0.45 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.captwiki-cookie.is-visible .captwiki-cookie__box {
	opacity: 1;
	visibility: visible;
}

/* ── Corner placement + entrance direction ─────────────── */
.captwiki-cookie--pos-bottom-left .captwiki-cookie__box {
	bottom: 20px;
	left: 20px;
	transform: translateY( 24px );
}

.captwiki-cookie--pos-bottom-right .captwiki-cookie__box {
	bottom: 20px;
	right: 20px;
	transform: translateY( 24px );
}

.captwiki-cookie--pos-bottom-center .captwiki-cookie__box {
	bottom: 20px;
	left: 50%;
	transform: translate( -50%, 24px );
}

.captwiki-cookie--pos-top-left .captwiki-cookie__box {
	top: 20px;
	left: 20px;
	transform: translateY( -24px );
}

.captwiki-cookie--pos-top-right .captwiki-cookie__box {
	top: 20px;
	right: 20px;
	transform: translateY( -24px );
}

.captwiki-cookie--pos-top-center .captwiki-cookie__box {
	top: 20px;
	left: 50%;
	transform: translate( -50%, -24px );
}

.captwiki-cookie.is-visible.captwiki-cookie--pos-bottom-left .captwiki-cookie__box,
.captwiki-cookie.is-visible.captwiki-cookie--pos-bottom-right .captwiki-cookie__box,
.captwiki-cookie.is-visible.captwiki-cookie--pos-top-left .captwiki-cookie__box,
.captwiki-cookie.is-visible.captwiki-cookie--pos-top-right .captwiki-cookie__box {
	transform: translateY( 0 );
}

.captwiki-cookie.is-visible.captwiki-cookie--pos-bottom-center .captwiki-cookie__box,
.captwiki-cookie.is-visible.captwiki-cookie--pos-top-center .captwiki-cookie__box {
	transform: translateX( -50% );
}

/* ── Icon ──────────────────────────────────────────────── */
.captwiki-cookie__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 30px;
	line-height: 1;
	color: var( --captwiki-cookie-accent );
}

.captwiki-cookie__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-cookie__icon i {
	font-size: inherit;
	font-style: normal;
}

/* ── Content ───────────────────────────────────────────── */
.captwiki-cookie__content {
	flex: 1 1 220px;
	min-width: 0;
}

.captwiki-cookie__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
}

.captwiki-cookie__message {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

.captwiki-cookie__link {
	color: var( --captwiki-cookie-accent );
	font-weight: 600;
	text-decoration: underline;
}

.captwiki-cookie__link:hover {
	text-decoration: none;
}

/* ── Buttons ───────────────────────────────────────────── */
.captwiki-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.captwiki-cookie__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	color: #ffffff;
	background: var( --captwiki-cookie-accent );
	border: none;
	border-radius: 9px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.captwiki-cookie__btn:hover {
	box-shadow: 0 10px 22px -10px rgba( 99, 102, 241, 0.7 );
}

.captwiki-cookie__btn:active {
	transform: translateY( 1px );
}

.captwiki-cookie__btn:focus-visible {
	outline: 2px solid var( --captwiki-cookie-accent );
	outline-offset: 2px;
}

.captwiki-cookie__btn--reject,
.captwiki-cookie__btn--settings {
	color: #374151;
	background: #eef0f4;
}

.captwiki-cookie__btn--reject:hover,
.captwiki-cookie__btn--settings:hover {
	background: #e2e5ec;
	box-shadow: none;
}

/* ── Editor preview — inline, contained ────────────────── */
.captwiki-cookie.is-preview .captwiki-cookie__box {
	position: relative;
	inset: auto;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	transform: none;
	max-width: 100%;
	opacity: 1;
	visibility: visible;
}

.captwiki-cookie.is-preview .captwiki-cookie__backdrop {
	display: none;
}

/* ── Responsive ────────────────────────────────────────── */
@media ( max-width: 480px ) {

	.captwiki-cookie__box {
		width: calc( 100% - 24px );
		gap: 14px;
		padding: 18px;
	}

	.captwiki-cookie--pos-bottom-left .captwiki-cookie__box,
	.captwiki-cookie--pos-bottom-right .captwiki-cookie__box {
		left: 12px;
		right: 12px;
	}

	.captwiki-cookie--pos-top-left .captwiki-cookie__box,
	.captwiki-cookie--pos-top-right .captwiki-cookie__box {
		left: 12px;
		right: 12px;
	}

	.captwiki-cookie__actions {
		width: 100%;
	}

	.captwiki-cookie__btn {
		flex: 1 1 auto;
	}
}

/* ── Reduced motion ────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {

	.captwiki-cookie__box,
	.captwiki-cookie__btn {
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}
}