/* ==========================================================================
   Flip Box (.sentio-fb)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.
   Premium flip card with 6 directions, 3D depth, glassmorphism, magnetic tilt.
   ========================================================================== */


/* ---------- Base / Container ---------- */
.sentio-fb {
	perspective: var(--fb-perspective, 1000px);
	width: 100%;
	display: block;
}

.sentio-fb__inner {
	position: relative;
	width: 100%;
	min-height: 280px;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: var(--fb-duration, 600ms);
	transition-delay: var(--fb-stagger, 0ms);
	transform-style: preserve-3d;
	cursor: pointer;
}

.sentio-fb--fixed-height .sentio-fb__inner {
	height: var(--fb-height, 350px);
	min-height: 0;
}

/* ---------- Front & Back Faces ---------- */
.sentio-fb__front,
.sentio-fb__back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
}

/* Auto-height mode: front is relative, back is absolute */
.sentio-fb:not(.sentio-fb--fixed-height) .sentio-fb__front {
	position: relative;
}

.sentio-fb__front {
	background-color: var(--fb-front-bg, #6C63FF);
	color: #fff;
	z-index: 2;
}

.sentio-fb__back {
	background-color: var(--fb-back-bg, #FF6584);
	color: #fff;
	z-index: 1;
}

/* ---------- Overlay ---------- */
.sentio-fb__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* ---------- Content ---------- */
.sentio-fb__content {
	position: relative;
	z-index: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Icon ---------- */
.sentio-fb__icon {
	margin-bottom: 16px;
	line-height: 1;
}

.sentio-fb__icon i,
.sentio-fb__icon svg {
	font-size: 60px;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sentio-fb__front .sentio-fb__icon i,
.sentio-fb__front .sentio-fb__icon svg {
	color: var(--fb-front-icon-color, #ffffff);
	fill: var(--fb-front-icon-color, #ffffff);
}

.sentio-fb__back .sentio-fb__icon i,
.sentio-fb__back .sentio-fb__icon svg {
	color: var(--fb-back-icon-color, #ffffff);
	fill: var(--fb-back-icon-color, #ffffff);
}

/* ---------- Image ---------- */
.sentio-fb__image {
	margin-bottom: 16px;
	line-height: 0;
}

.sentio-fb__image img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

/* ---------- Title ---------- */
.sentio-fb__title {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

/* ---------- Description ---------- */
.sentio-fb__desc {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.9;
	color: inherit;
}

/* ---------- Button ---------- */
.sentio-fb__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 6px;
	background-color: var(--fb-btn-bg, #ffffff);
	color: var(--fb-btn-color, #FF6584);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
	margin-top: 8px;
	border: none;
	cursor: pointer;
	line-height: 1.2;
}

.sentio-fb__button:hover {
	background-color: var(--fb-btn-bg-hover, #f0f0f0);
	color: var(--fb-btn-color-hover, #333333);
	transform: translateY(-2px);
}

.sentio-fb__button i,
.sentio-fb__button svg {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   FLIP DIRECTIONS
   ========================================================================== */

/* -- Horizontal Right (default) -- */
.sentio-fb--horizontal-right .sentio-fb__back {
	transform: rotateY(180deg);
}
.sentio-fb--horizontal-right.sentio-fb--flipped .sentio-fb__inner {
	transform: rotateY(180deg);
}

/* -- Horizontal Left -- */
.sentio-fb--horizontal-left .sentio-fb__back {
	transform: rotateY(-180deg);
}
.sentio-fb--horizontal-left.sentio-fb--flipped .sentio-fb__inner {
	transform: rotateY(-180deg);
}

/* -- Vertical Up -- */
.sentio-fb--vertical-up .sentio-fb__back {
	transform: rotateX(180deg);
}
.sentio-fb--vertical-up.sentio-fb--flipped .sentio-fb__inner {
	transform: rotateX(180deg);
}

/* -- Vertical Down -- */
.sentio-fb--vertical-down .sentio-fb__back {
	transform: rotateX(-180deg);
}
.sentio-fb--vertical-down.sentio-fb--flipped .sentio-fb__inner {
	transform: rotateX(-180deg);
}

/* -- Diagonal -- */
.sentio-fb--diagonal .sentio-fb__back {
	transform: rotateY(180deg) rotateZ(20deg) scale(0.9);
}
.sentio-fb--diagonal.sentio-fb--flipped .sentio-fb__inner {
	transform: rotateY(180deg) rotateZ(0deg) scale(1);
}

/* -- Zoom (no rotation) -- */
.sentio-fb--zoom .sentio-fb__inner {
	transform-style: flat;
}
.sentio-fb--zoom .sentio-fb__front {
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	transition: opacity var(--fb-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
	            transform var(--fb-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
	transform: scale(1);
	opacity: 1;
}
.sentio-fb--zoom .sentio-fb__back {
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	transform: scale(0.85);
	opacity: 0;
	transition: opacity var(--fb-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
	            transform var(--fb-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.sentio-fb--zoom.sentio-fb--flipped .sentio-fb__front {
	opacity: 0;
	transform: scale(1.1);
}
.sentio-fb--zoom.sentio-fb--flipped .sentio-fb__back {
	opacity: 1;
	transform: scale(1);
}

/* ---------- 3D Depth Effect ---------- */
.sentio-fb__front {
	transform: translateZ(var(--fb-depth, 0px));
}

/* Override depth for directions that set their own transforms */
.sentio-fb--zoom .sentio-fb__front {
	transform: scale(1) translateZ(0);
}
.sentio-fb--zoom.sentio-fb--flipped .sentio-fb__front {
	transform: scale(1.1) translateZ(0);
}

/* ==========================================================================
   GLASSMORPHISM
   ========================================================================== */

.sentio-fb--glass .sentio-fb__front,
.sentio-fb--glass .sentio-fb__back {
	backdrop-filter: blur(var(--fb-glass-blur, 10px));
	-webkit-backdrop-filter: blur(var(--fb-glass-blur, 10px));
	border: 1px solid var(--fb-glass-border, rgba(255, 255, 255, 0.2));
}

.sentio-fb--glass .sentio-fb__front {
	background-color: rgba(108, 99, 255, var(--fb-glass-opacity, 0.15));
}

.sentio-fb--glass .sentio-fb__back {
	background-color: rgba(255, 101, 132, var(--fb-glass-opacity, 0.15));
}

/* ==========================================================================
   MAGNETIC TILT
   ========================================================================== */

.sentio-fb[data-magnetic="yes"] .sentio-fb__inner {
	transition-property: transform;
	will-change: transform;
}

/* When tilting (JS-driven), the flip transform is handled via JS inline styles */

/* ==========================================================================
   TRIGGER STATES
   ========================================================================== */

/* Hover trigger */
.sentio-fb--trigger-hover:hover {
	/* Flipped class added via CSS for hover triggers */
}

/* Desktop hover (non-touch): pure CSS flip on hover
 *
 * 'trigger-hover' → hover flips to back; mouseout reverts.
 *
 * 'trigger-both' → hover shows the OPPOSITE of the committed state:
 *   - When .sentio-fb--flipped is OFF (committed=front), hover shows back.
 *   - When .sentio-fb--flipped is ON  (committed=back),  hover shows front.
 *
 * This makes every click produce an immediate visible face change:
 *   - Click while hovering-back → committed becomes back, hover inverts → visible front.
 *   - Mouseout → visible back (committed state).
 *   - Click again while hovering-front → committed becomes front, hover inverts → visible back.
 *   - Mouseout → visible front.
 *
 * Mental model: hover previews the "other" face. Click commits.
 * The click-locked (committed) state is what you see when NOT hovering.
 * Without this inversion, click-while-hovering produced no visible change
 * because hover and .flipped both applied the same rotation — the original
 * 'both' UX bug reported 2026-04-22.
 */
@media (hover: hover) and (pointer: fine) {
	/* horizontal-right */
	.sentio-fb--trigger-hover.sentio-fb--horizontal-right:hover .sentio-fb__inner,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--horizontal-right:hover .sentio-fb__inner {
		transform: rotateY(180deg);
	}
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--horizontal-right:hover .sentio-fb__inner {
		transform: none;
	}

	/* horizontal-left */
	.sentio-fb--trigger-hover.sentio-fb--horizontal-left:hover .sentio-fb__inner,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--horizontal-left:hover .sentio-fb__inner {
		transform: rotateY(-180deg);
	}
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--horizontal-left:hover .sentio-fb__inner {
		transform: none;
	}

	/* vertical-up */
	.sentio-fb--trigger-hover.sentio-fb--vertical-up:hover .sentio-fb__inner,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--vertical-up:hover .sentio-fb__inner {
		transform: rotateX(180deg);
	}
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--vertical-up:hover .sentio-fb__inner {
		transform: none;
	}

	/* vertical-down */
	.sentio-fb--trigger-hover.sentio-fb--vertical-down:hover .sentio-fb__inner,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--vertical-down:hover .sentio-fb__inner {
		transform: rotateX(-180deg);
	}
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--vertical-down:hover .sentio-fb__inner {
		transform: none;
	}

	/* diagonal */
	.sentio-fb--trigger-hover.sentio-fb--diagonal:hover .sentio-fb__inner,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--diagonal:hover .sentio-fb__inner {
		transform: rotateY(180deg) rotateZ(0deg) scale(1);
	}
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--diagonal:hover .sentio-fb__inner {
		transform: none;
	}

	/* zoom — opacity-based (front fades out, back fades in) */
	.sentio-fb--trigger-hover.sentio-fb--zoom:hover .sentio-fb__front,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--zoom:hover .sentio-fb__front {
		opacity: 0;
		transform: scale(1.1);
	}
	.sentio-fb--trigger-hover.sentio-fb--zoom:hover .sentio-fb__back,
	.sentio-fb--trigger-both:not(.sentio-fb--flipped).sentio-fb--zoom:hover .sentio-fb__back {
		opacity: 1;
		transform: scale(1);
	}
	/* 'both' + .flipped + hover = reverse zoom (committed back, hover shows front) */
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--zoom:hover .sentio-fb__front {
		opacity: 1;
		transform: scale(1);
	}
	.sentio-fb--trigger-both.sentio-fb--flipped.sentio-fb--zoom:hover .sentio-fb__back {
		opacity: 0;
		transform: scale(0.85);
	}
}

/* Touch/click trigger — use .sentio-fb--flipped class (added by JS) */
.sentio-fb--trigger-click.sentio-fb--flipped .sentio-fb__inner,
.sentio-fb--trigger-both.sentio-fb--flipped .sentio-fb__inner,
.sentio-fb--trigger-scroll.sentio-fb--flipped .sentio-fb__inner {
	/* Flip transforms handled by direction classes + flipped class above */
}

/* ==========================================================================
   ANIMATION ENTRANCE
   ========================================================================== */

@keyframes sentio-fb-entrance {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.sentio-fb--trigger-scroll {
	opacity: 0;
	transform: translateY(30px) scale(0.95);
}

.sentio-fb--trigger-scroll.sentio-fb--visible {
	animation: sentio-fb-entrance 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   BOX SHADOW & BORDERS
   ========================================================================== */

.sentio-fb__inner {
	border-radius: 12px;
}

.sentio-fb__front,
.sentio-fb__back {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   EDITOR PREVIEW
   ========================================================================== */

.elementor-editor-active .sentio-fb--trigger-hover .sentio-fb__inner {
	/* Don't flip on hover in editor — let user click to preview */
}

.elementor-editor-active .sentio-fb--trigger-scroll {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.sentio-fb__content {
		padding: 30px;
	}

	.sentio-fb__title {
		font-size: 20px;
	}

	.sentio-fb__icon i,
	.sentio-fb__icon svg {
		font-size: 50px;
		width: 50px;
		height: 50px;
	}
}

@media (max-width: 767px) {
	.sentio-fb__content {
		padding: 24px;
	}

	.sentio-fb__title {
		font-size: 18px;
	}

	.sentio-fb__desc {
		font-size: 14px;
	}

	.sentio-fb__button {
		padding: 10px 22px;
		font-size: 14px;
	}

	.sentio-fb__icon i,
	.sentio-fb__icon svg {
		font-size: 40px;
		width: 40px;
		height: 40px;
	}

	.sentio-fb--fixed-height .sentio-fb__inner {
		height: auto;
		min-height: var(--fb-height, 280px);
	}
}