/* Form Loading Overlay Styles - Enhanced Font Sizes */

.form-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Slightly darker for better contrast */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'Lancelot', cursive, serif; /* Consistent font family */
}

.form-loading-content {
    text-align: center;
    color: white;
    padding: 40px 30px; /* Added padding for better spacing */
    border-radius: 8px; /* Added border radius for consistency */
    background: rgba(0, 0, 0, 0.2); /* Subtle background for content area */
    backdrop-filter: blur(10px); /* Modern blur effect */
    max-width: 320px; /* Constrained width for better design */
}

.form-loading-spinner {
    border: 5px solid rgba(255, 255, 255, 0.25); /* Increased border width and adjusted transparency */
    border-top: 5px solid #5ca7db; /* Changed to brand color for consistency */
    border-radius: 50%;
    width: 50px; /* Increased from 40px */
    height: 50px; /* Increased from 40px */
    animation: spin 1s linear infinite;
    margin: 0 auto 25px; /* Increased bottom margin from 20px */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-loading-content p {
    font-size: 19px; /* Increased from 18px */
    margin: 0;
    font-weight: 500;
    line-height: 1.4; /* Added line height for better readability */
    letter-spacing: 0.5px; /* Added letter spacing for elegance */
}

/* ================================================ */
/* RESPONSIVE BREAKPOINTS */
/* ================================================ */

/* Large Tablet Styles (769px - 1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
    .form-loading-content {
        padding: 35px 25px;
        max-width: 300px;
    }
    
    .form-loading-spinner {
        width: 45px;
        height: 45px;
        border-width: 4px;
        margin-bottom: 22px;
    }
    
    .form-loading-content p {
        font-size: 18px;
    }
}

/* Small Tablet Styles (481px - 768px) */
@media (max-width: 768px) {
    .form-loading-content {
        padding: 30px 22px;
        max-width: 280px;
    }
    
    .form-loading-spinner {
        width: 42px;
        height: 42px;
        border-width: 4px;
        margin-bottom: 20px;
    }
    
    .form-loading-content p {
        font-size: 17px;
    }
}

/* Mobile Styles (≤ 480px) */
@media (max-width: 480px) {
    .form-loading-overlay {
        padding: 0 20px; /* Added side padding for small margins */
    }
    
    .form-loading-content {
        padding: 28px 20px;
        max-width: 260px;
        border-radius: 6px;
    }
    
    .form-loading-spinner {
        width: 40px;
        height: 40px;
        border-width: 4px;
        margin-bottom: 18px;
    }
    
    .form-loading-content p {
        font-size: 16px;
        letter-spacing: 0.3px;
    }
}

/* Extra Small Mobile (≤ 360px) */
@media (max-width: 360px) {
    .form-loading-overlay {
        padding: 0 18px; /* Better margins for extra small screens */
    }
    
    .form-loading-content {
        padding: 25px 18px;
        max-width: 240px;
    }
    
    .form-loading-spinner {
        width: 38px;
        height: 38px;
        border-width: 3px;
        margin-bottom: 16px;
    }
    
    .form-loading-content p {
        font-size: 15px;
        letter-spacing: 0.2px;
    }
}