/* === Main Form Container === */

#selfie-container {

    font-family: "Poppins", Arial, sans-serif;

    max-width: 600px;

    margin: 2rem auto;

    padding: 2.5rem;

    background: #fff;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}



/* === Headings === */

#selfie-registration-form h2 {

    font-size: 1.8rem;

    font-weight: 600;

    text-align: center;

    color: #222;

    margin-bottom: 1.5rem;

    position: relative;

}

#selfie-registration-form h2::after {

    content: "";

    display: block;

    width: 60px;

    height: 3px;

    background: linear-gradient(45deg, #25ced1, #1ca8ab);

    margin: 0.5rem auto;

    border-radius: 3px;

}



/* === Labels & Inputs === */

#selfie-registration-form label {

    font-weight: 500;

    color: #555;

    display: block;

    margin-bottom: 0.4rem;

    font-size: 0.9rem;

}

#selfie-registration-form .input-text {

    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-size: 1rem;

    transition: 0.3s;

}

#selfie-registration-form .input-text:focus {

    border-color: #25ced1;

    box-shadow: 0 0 0 3px rgba(37,206,209,0.15);

    outline: none;

}



/* === File Upload === */

.file-label {

    display: block;

    padding: 12px;

    background: #f8f9fa;

    border: 2px dashed #ccc;

    border-radius: 10px;

    text-align: center;

    cursor: pointer;

    transition: background 0.3s, border-color 0.3s;

}

.file-label:hover {

    background: #f1fcfc;

    border-color: #25ced1;

}



/* === Buttons === */

.selfie-btn {

    width: 100%;

    padding: 14px;

    font-size: 1rem;

    font-weight: bold;

    color: white;

    border-radius: 8px;

    background: linear-gradient(45deg, #25ced1, #1ca8ab);

    border: none;

    cursor: pointer;

    margin-top: 1rem;

    transition: 0.3s;

}

.selfie-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}

.selfie-btn.retake {

    background: linear-gradient(45deg, #ffc107, #e0a800);

    color: #212529;

}

.selfie-btn.accept {

    background: linear-gradient(45deg, #28a745, #218838);

}



/* === Success Popup === */

.success-modal {

    display: none;

    position: fixed;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(0,0,0,0.6);

    z-index: 9999;

    justify-content: center;

    align-items: center;

}

.success-modal-content {

    background: white;

    padding: 2rem;

    border-radius: 12px;

    max-width: 400px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}

.success-checkmark {

    font-size: 3rem;

    color: #28a745;

}

.success-btn {

    display: inline-block;

    background: #25ced1;

    color: white;

    padding: 0.7rem 1.2rem;

    border-radius: 6px;

    text-decoration: none;

    margin-top: 1rem;

}

.success-btn:hover {

    background: #1ca8ab;

}
/* Prevent mobile zoom on inputs */
.selfie-registration-form input,
.selfie-registration-form select,
.selfie-registration-form textarea {
    font-size: 16px !important;
}