/* Custom styles for the 3D flip effect, all other styles use Tailwind */
:root {
    --primary-blue: #1d4ed8; /* blue-700 */
    --primary-dark: #1e3a8a; /* blue-800 */
    --accent-blue: #2563eb; /* blue-600 */
    --light-bg: #f3f4f6; /* gray-100 */
}

/* The Card container establishes the 3D space */
.card-container {
    width: 350px;
    height: 500px;
    perspective: 1000px; /* Stronger perspective for a better flip effect */
}

/* Hide the checkbox */
#chk {
    display: none;
}

/* The content is the flippable element */
.content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); /* Smooth transition for both directions */
}

/* When checked (Forgot Password clicked), flip to the back */
#chk:checked ~ .content {
    transform: rotateY(180deg);
}

/* Front and back faces positioning */
.front, .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Crucial: Hides the back side of the face when flipped */
    transform-style: preserve-3d;
    padding: 2rem;
}

.back {
    transform: rotateY(180deg); /* Initial position for the back face */
}

/* Text/Input grouping for better padding and z-index within 3D space */
.inner-content {
    transform: translateZ(50px); /* Pushes content forward slightly in 3D space */
}

/* Custom style for the clickable links */
.flip-link {
    color: var(--accent-blue);
    cursor: pointer;
    transition: color 0.2s;
    margin: 10px;
}
.flip-link:hover {
    color: var(--primary-dark);
}

/* Removed absolute positioning for h2 and p to allow for logo spacing */

button {
    transition: .3s;
    margin-top: 20px;
}

/* Ensure inputs fit well inside the inner content structure */
.inner-content input {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    box-sizing: border-box;
}