/**
 * Flipbox - Common base CSS ( loads for every style ).
 *
 * Owns the shared skeleton: the 3D stage, both faces and the inner content
 * column. Per-style files define how the back face is revealed ( rotate,
 * zoom, slide, cube ). CSS variables drive theme and sizing:
 *   --captwiki-fb-height    → box height
 *   --captwiki-fb-duration  → flip / reveal animation duration
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-flipbox {
	--captwiki-fb-height: 280px;
	--captwiki-fb-duration: 0.7s;
	position: relative;
	width: 100%;
	height: var( --captwiki-fb-height );
	perspective: 1200px;
	box-sizing: border-box;
}

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

.captwiki-flipbox--click {
	cursor: pointer;
	outline: none;
}

.captwiki-flipbox--click:focus-visible {
	outline: 2px solid #6d5efc;
	outline-offset: 4px;
}

.captwiki-flipbox__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

/* ── Faces ─────────────────────────────────────────────── */
.captwiki-flipbox__face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.captwiki-flipbox__front {
	background: #f4f5fb;
	color: #1f2937;
}

.captwiki-flipbox__back {
	background: linear-gradient( 135deg, #6d5efc, #4537d4 );
	color: #ffffff;
}

/* ── Content ───────────────────────────────────────────── */
.captwiki-flipbox__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	padding: 32px;
	text-align: center;
}

.captwiki-flipbox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	line-height: 1;
}

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

.captwiki-flipbox__icon i {
	font-style: normal;
}

.captwiki-flipbox__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.captwiki-flipbox__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.92;
}

.captwiki-flipbox__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 10px 26px;
	background: rgba( 255, 255, 255, 0.16 );
	border: 1px solid rgba( 255, 255, 255, 0.55 );
	border-radius: 99px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.captwiki-flipbox__btn:hover {
	background: #ffffff;
	color: #4537d4;
	transform: translateY( -2px );
}