footer {
    height: auto;
    min-height: 15vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blacktheme);
    z-index: var(--footer-axis);
}

.login-modal-container {
    display: none;
    align-items: center;
    justify-content: center;

    position: fixed;
    inset: 0;

    min-height: 100vh;
    height: auto;
    width: 100%;

    z-index: var(--dialog-box-axis1);

    background-color: transparent;
    backdrop-filter: blur(5px);
}

#show-modal:checked ~ footer .login-modal-container {
    display: flex;
}

.card-container {
    height: 80vh;
    /* height: auto; */
    /* max-height: 80vh; */
    width: 55%;
    /* width: 90%; */
    perspective: 2500px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--secondtheme);
    transform-style: preserve-3d;
    transition: all 0.5s linear;
}

.front-card, .back-card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;

    color: var(--texttheme1);
}

.back-card {
    transform: rotateY(180deg);
}

.close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
}

#flip-modal:checked ~ footer .card-container .card {
    transform: rotateY(180deg);
}

/* footer content css */
.footer-content {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--whitetheme);
}

.footer-content .fc-left{
    width: 50%;  
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.fc-left a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease-in-out;
}
.fc-left a:hover {
    color: var(--maintheme);
}

.fc-right a{
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.fc-right svg:hover {
    filter: drop-shadow(0px 1px 1px white);
}


/* login and signup forms */
footer .user-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 70%;
}

/* .user-form input:not([type="submit"]):not([type="button"]):not([type="reset"]) */
.cf-bkgrnd {
    height: 1.875rem;
    width: 80%;
    background: var(--whitetheme);
    outline: 2px solid var(--border-color);
    border: none;
    border-radius: 15px;
    padding: 4px 0;
    text-align: center;
    font-size: 1.5rem;
    color: var(--texttheme1);
    transition: outline 0.2s ease-in;
}
.cf-bkgrnd:focus {
    outline: 2px solid var(--maintheme);
}
.cf-bkgrnd:valid:not(:placeholder-shown) {
    background-image: url(../assets/images/icon/checkmark.png);
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px 16px;
}
.cf-bkgrnd:invalid:not(:placeholder-shown) {
    background-image: url(../assets/images/icon/cross.png);
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px 16px;

    outline: 3px solid red;
}
.user-form input::placeholder{
    text-align: center;
    font-size: 1.5rem;
    color: var(--greytheme);
}

.user-form input[type=submit], .user-form input[type=reset] {
    cursor: pointer;
    font-size: 1.2rem;
    border: 3px solid var(--maintheme);
    border-radius: 25px;
    color: var(--maintheme);
    background-color: transparent;
    font-weight: bold;
    padding: 0.3rem 0.9rem;
}
.user-form input[type=submit]:hover, .user-form input[type=reset]:hover {
    background-color: var(--maintheme-alpha);
    border: 3px solid var(--texttheme-main); 
}
.user-form input[type=submit]:active, .user-form input[type=reset]:active {
    background-color: var(--maintheme);
    color: var(--texttheme2);
    border: 3px solid var(--maintheme);  
}
.user-form .signup-link {
    color: var(--maintheme);
    cursor: pointer;
}
.user-form .signup-link:hover {
    color: var(--texttheme-main-active)
}

/* Login/signup modal media queries */
@media (max-width: 768px) {
    .card-container {
        width: 100%;
        height: 70vh;
    }

    .front-card h2, .back-card h2 {
        font-size: 1.5rem;
    }

    .close-btn {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .card-container {
        height: 60vh;
    }

    .front-card h2, .back-card h2 {
        font-size: 1.2rem;
    }

    .close-btn {
        font-size: 0.9rem;
    }
}

/* 
    All Hail ChatGPT for helping me fix the responsiveness 
    with the stupid nokia lumia 550 and iphone4 devices
    while people living near coolant factories near to the cloud centers die
    of getting excessively charged high electricity bills and lack of clean water _/\_ 
*/

/* fixed card-container height, scrollable signup card */
@media (max-width: 768px), (max-height: 600px) {
    .card-container {
        width: 100%;
        height: 80vh; /* keep front/back equal for 3D flip */
        max-height: 95vh;
    }

    .back-card {
        height: 100%;      /* fill container */
        overflow-y: auto;  /* scroll internal content */
        padding: 1rem;
        box-sizing: border-box;
        justify-content: flex-start; /* keep heading visible at top */
    }

    /* adjust heading font and alignment */
    .back-card h2 {
        font-size: 1.2rem;
        margin-top: 0;
        text-align: center;
    }

    /* Adjust form input sizes for small screens */
    .back-card .cf-bkgrnd {
        width: 90%;
        font-size: 1.2rem;
        height: 1.6rem;
        padding: 3px 0;
    }

    .back-card .user-form input[type=submit],
    .back-card .user-form input[type=reset] {
        font-size: 1rem;
        padding: 0.25rem 0.6rem;
    }

    /* Keep close button visible inside back-card */
    .back-card .close-btn {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1rem;
    }

    .footer-content {
        flex-direction: column;
    }
    .footer-content .fc-left {
        width: 100%;
        justify-content: center;
        margin: 4px;
    }
}

/* Vertically center signup form while keeping scroll */
@media (max-width: 768px), (max-width: 480px) {
    .back-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* start from top to keep header visible */
        padding: 1rem;
        box-sizing: border-box;
        overflow-y: auto; /* allow scrolling if form taller than card */
        max-height: 100%; /* ensure card itself doesn't grow too big */
    }

    .back-card .user-form {
        margin-top: auto;
        margin-bottom: auto; /* vertical center only if space available */
    }
}