/* ============================================================
   User Submitted Posts - Form Styles (Even Smaller Gaps)
   ============================================================ */

/* General form container */
#user-submitted-posts {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px; /* Reduced padding */
    background: #ededd7; /* Background color */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}

/* Form header (if any content is added above) */
#user-submitted-posts h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 15px; /* Reduced space */
}

/* Fieldset styling */
#user-submitted-posts fieldset {
    border: none;
    padding: 6px 0; /* Reduced padding */
    margin-bottom: 6px; /* Reduced gap between rows */
    display: block;
}

/* Labels */
#user-submitted-posts label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 4px; /* Reduced space between label and input */
}

/* Add asterisks for required fields */
#user-submitted-posts label span.required {
    color: #e74c3c; /* Red color for asterisk */
    font-weight: bold;
    margin-left: 4px;
}

/* Input fields */
#user-submitted-posts input[type="text"],
#user-submitted-posts input[type="email"],
#user-submitted-posts input[type="url"],
#user-submitted-posts input[type="file"],
#user-submitted-posts textarea,
#user-submitted-posts select {
    width: 100%;
    padding: 8px 12px; /* Reduced padding */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 8px; /* Reduced margin for tighter form */
    transition: border-color 0.2s ease-in-out;
}

/* Focus effect on input fields */
#user-submitted-posts input:focus,
#user-submitted-posts textarea:focus,
#user-submitted-posts select:focus {
    border-color: #0073e6;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 115, 230, 0.2);
    outline: none;
}

/* Textarea style */
#user-submitted-posts textarea {
    resize: vertical;
    min-height: 130px; /* Reduced height */
}

/* Required asterisk style */
#user-submitted-posts .usp-required {
    color: #e74c3c;
    margin-left: 4px;
}

/* Submit button */
#user-submitted-posts input[type="submit"],
#user-submitted-posts .usp-submit {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #0073e6, #005bb5);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Submit button hover effect */
#user-submitted-posts input[type="submit"]:hover,
#user-submitted-posts .usp-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 115, 230, 0.25);
}

/* Error message styling */
#usp-error-message {
    background: #ffe6e6;
    color: #b30000;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px; /* Reduced margin */
    font-size: 14px;
}

/* Success message styling */
#usp-success-message {
    background: #e6f9ec;
    color: #1a7f37;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px; /* Reduced margin */
    font-size: 14px;
}

/* Multi-field grid (name + email or title + content) */
#user-submitted-posts .usp-grid {
    display: flex;
    gap: 10px; /* Reduced gap between fields */
}

#user-submitted-posts .usp-grid .usp-half {
    width: 48%;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #user-submitted-posts .usp-grid {
        flex-direction: column;
        gap: 8px; /* Reduced gap for mobile */
    }

    #user-submitted-posts .usp-grid .usp-half {
        width: 100%;
    }

    #user-submitted-posts input[type="submit"],
    #user-submitted-posts .usp-submit {
        font-size: 18px;
        padding: 16px;
    }
}

/* Image upload styling */
#user-submitted-posts .usp-images input[type="file"] {
    margin-bottom: 8px; /* Reduced margin */
    padding: 8px;
}

#user-submitted-posts .usp-images {
    display: flex;
    gap: 8px; /* Reduced gap */
    flex-wrap: wrap;
}

/* Help text / additional info */
#user-submitted-posts .usp-help {
    font-size: 13px;
    color: #777;
    margin-top: 5px;
}

/* Hide unnecessary verification fields */
#user-submitted-posts .usp-hidden {
    display: none;
}

/* Optional Custom Fields */
#user-submitted-posts .usp-custom input {
    width: 100%;
    padding: 12px;
    margin-bottom: 8px; /* Reduced margin */
}

/* Custom Checkbox */
#user-submitted-posts .usp-checkbox {
    display: flex;
    align-items: center;
}

#user-submitted-posts .usp-checkbox input[type="checkbox"] {
    margin-right: 8px;
}

/* Captcha/Turnstile field */
#user-submitted-posts .usp-captcha {
    margin: 10px 0; /* Reduced margin */
}

/* Make the form visually appealing */
#user-submitted-posts .usp-name,
#user-submitted-posts .usp-email,
#user-submitted-posts .usp-title,
#user-submitted-posts .usp-url,
#user-submitted-posts .usp-tags,
#user-submitted-posts .usp-content {
    margin-bottom: 8px; /* Reduced margin between fields */
}