/* Flipbox — base structural styles. Per-instance colors/size/speed are set
   as CSS custom properties inline by the [flipbox] shortcode. */

.flipbox-plugin {
	--fb-w: 260px;
	--fb-h: 180px;
	--fb-radius: 10px;
	--fb-speed: 0.6s;
	--fb-front-bg: #16273f;
	--fb-front-color: #eef3f8;
	--fb-back-bg: #6fd3d9;
	--fb-back-color: #0c1826;
	--fb-link-color: #0c1826;
	--fb-link-hover-color: #0c1826;
	--fb-font: inherit;
	--fb-title-size: 17px;
	--fb-body-size: 13px;

	display: inline-block;
	width: var(--fb-w);
	height: var(--fb-h);
	perspective: 1200px;
	cursor: pointer;
}

.flipbox-plugin .flipbox-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform var(--fb-speed) cubic-bezier(0.22, 0.9, 0.32, 1);
}

.flipbox-plugin .flipbox-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: var(--fb-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px;
	box-sizing: border-box;
	font-family: var(--fb-font);
}

.flipbox-plugin.has-shadow .flipbox-face {
	box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.45);
}

.flipbox-plugin .flipbox-front {
	background: var(--fb-front-bg);
	color: var(--fb-front-color);
}

.flipbox-plugin .flipbox-back {
	background: var(--fb-back-bg);
	color: var(--fb-back-color);
}

.flipbox-plugin .flipbox-face h3 {
	margin: 0 0 6px;
	font-size: var(--fb-title-size);
	font-weight: 700;
	line-height: 1.3;
}

.flipbox-plugin .flipbox-face p {
	margin: 0;
	font-size: var(--fb-body-size);
	line-height: 1.5;
	opacity: 0.9;
}

/* Back-face content wrapper: holds either the fallback paragraph or
   author-supplied HTML (links, lists, buttons, etc.). */
.flipbox-plugin .flipbox-back-content {
	width: 100%;
	font-size: var(--fb-body-size);
	line-height: 1.5;
}

.flipbox-plugin .flipbox-back-content p {
	margin: 0 0 8px;
}

.flipbox-plugin .flipbox-back-content p:last-child {
	margin-bottom: 0;
}

/* Default link list styling — vertical stack of underlined links.
   Override with your own theme CSS targeting .flipbox-back a as needed. */
.flipbox-plugin .flipbox-back-content a {
	display: inline-block;
	margin: 3px 6px;
	color: var(--fb-link-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}

.flipbox-plugin .flipbox-back-content a:hover {
	color: var(--fb-link-hover-color);
	text-decoration-thickness: 2px;
}