/* -------- Popup Card Base -------- */

.popup-card {
    perspective: 1000px;
    cursor: pointer;
    margin: 0 auto;
    top: 80px;
    left: 50%;

    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;

    padding: 40px;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: all 0.3s ease;
}

.popup-card:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.2);
}

/* -------- Finger Animation -------- */

.moving-finger {
    margin-right: 8px;
    display: inline-block;
    animation: fingerMove 1s linear infinite;
}

@keyframes fingerMove {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }

}

/* -------- Modal Styling -------- */

.modal-content {
    background: rgb(108 135 184 / 37%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* -------- Form Styling -------- */

.modal-body form {
    padding: 20px;
    border-radius: 12px;
}

.form-control,
.form-select {
    background: rgb(67 78 97);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-control:focus,
.form-select:focus {

    border-color: #fff;

    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;

    outline: none;

}

/* -------- Button Styling -------- */

.btn-outline-light {

    border-width: 2px;

    transition: all 0.3s ease;

}

.btn-outline-light:hover {

    background: #fff;

    color: #000;

    transform: translateY(-2px);

}

.shadow-sm {

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;

}

h4 {

    font-weight: 600;

    text-align: center;

}

/* -------- Responsive Adjustments -------- */

/* Stack cards on smaller screens */

@media (max-width:992px) {

    .popup-card {

        margin-bottom: 20px;

    }

}

/* Stack labels above inputs on small screens */

@media (max-width:768px) {

    .row.mb-3.align-items-center {

        flex-direction: column;

        align-items: flex-start;

    }

    .row.mb-3.align-items-center label {

        width: 100%;

        margin-bottom: 5px;

        text-align: left;

    }

    .row.mb-3.align-items-center .col-sm-8 {

        width: 100%;

    }

    .d-flex.justify-content-between {

        flex-direction: column;

    }

    .d-flex.justify-content-between button {

        width: 100%;

        margin-bottom: 10px;

    }

}

/* Smallest devices adjustments */

@media (max-width:576px) {

    .modal-body form {

        padding: 10px;

    }

    .popup-card h4 {

        font-size: 1rem;

    }

    .btn-outline-light {

        font-size: 0.9rem;

        padding: 8px 12px;

    }

}