/**
 * FlipBox Pro -- Frontend Styles v1.0.1
 */

/* GRID */
.fbp-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
overflow: visible !important;
}

@media (max-width: 767px) {
.fbp-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
.fbp-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Allow 3D transforms -- override Divi / theme overflow hidden */
.fbp-grid,
.fbp-card-wrapper,
.fbp-card {
overflow: visible !important;
}

/* FLIP CARD */
.fbp-card-wrapper {
perspective: 1200px;
height: 300px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}

.fbp-card {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
.fbp-card-wrapper:hover .fbp-card {
transform: rotateY(180deg);
}
}

.fbp-card-wrapper.fbp-flipped .fbp-card {
transform: rotateY(180deg);
}

/* FACES */
.fbp-card-front,
.fbp-card-back {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 24px;
box-sizing: border-box;
}

/* FRONT */
.fbp-card-front {
background-color: var(--fbp-front-bg, #F6F6F6);
border: 2px solid var(--fbp-front-border, #E5E5E5);
box-shadow: 0 2px 14px rgba(0,0,0,0.07);
overflow: hidden;
}

.fbp-icon {
width: 56px;
height: 56px;
margin-bottom: 18px;
object-fit: contain;
display: block;
flex-shrink: 0;
}

.fbp-front-text {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: var(--fbp-front-size, 1.1rem);
color: var(--fbp-front-color, #000000);
text-align: center;
margin: 0;
padding: 0;
line-height: 1.5;
}

/* BACK */
.fbp-card-back {
background: linear-gradient(
to bottom,
var(--fbp-grad-start, #009BAC) 0%,
var(--fbp-grad-end, #00C4D4) 100%
);
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
overflow: hidden;
}

.fbp-back-text {
font-family: 'Baloo 2', cursive;
font-weight: 700;
font-size: var(--fbp-back-size, 1.3rem);
color: var(--fbp-back-color, #ffffff);
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
line-height: 1.5;
}

/* STATIC CARD (no flip) */
.fbp-card-wrapper--static {
perspective: none;
cursor: default;
}

.fbp-card-static {
width: 100%;
height: 100%;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 24px;
box-sizing: border-box;
overflow: hidden;
}