.flipCard {
width: 100%;
perspective: 1000px;
min-height: var(--flipcard-min-height, 452px);
}
.flipCardInner {
position: relative;
width: 100%;
min-height: inherit;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.flipCard.is-flipped .flipCardInner {
transform: rotateY(180deg);
}
.flipCardFace {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
padding: 32px;
border-radius: 16px;
background: var(--gray50, #FAF6F5);
box-sizing: border-box;
}
.flipCardBack {
transform: rotateY(180deg);
}
.flipCardIcon {
width: 56px;
height: auto;
margin-bottom: 16px;
}
.flipCardTitle {
font-size: 24px;
font-weight: 700;
margin: 0 0 12px;
color: var(--gray900, #18181B);
}
.flipCardText {
color: var(--gray700, #403F3F);
line-height: 1.5;
}
.flipCardText p:last-child {
margin-bottom: 0;
}
.flipCardToggle {
position: absolute;
right: 32px;
bottom: 32px;
width: 48px;
height: 48px;
cursor: pointer;
display: block;
transition: transform 0.2s ease;
}
.flipCardToggle:hover {
transform: scale(1.05);
}
.flipCardToggle:focus-visible {
outline: 2px solid var(--orange700, #D43504);
outline-offset: 2px;
border-radius: 12px;
}