/*
 * RTEH Song Request Form Styles - V4 (Mobile-Spaced & Conflict-Resistant)
*/

/* --- Base Desktop Styles --- */

#rteh-song-request-container {
    background: var(--background-light);
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    max-width: 700px; /* Max width on large screens */
    margin: 25px auto 40px; /* Centers the container */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
}

/* Fix for cut-off labels */
#rteh-song-request-form .form-row {
    margin-bottom: 20px;
    display: block;
}

#rteh-song-request-form label {
    display: block;
    width: 100%;
    font-family: var(--body-font);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}

#rteh-song-request-form input[type="text"],
#rteh-song-request-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--body-font);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Side-by-side grid for Name and Email */
.rteh-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.rteh-form-grid .form-row {
    margin-bottom: 0;
}

#rteh-song-request-form button {
    width: 100%;
    padding: 12px 30px;
    background: var(--secondary-blue); color: white; border: none; border-radius: 4px; cursor: pointer; font-family: var(--heading-font); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; font-size: 1rem; transition: all 0.3s ease;
}

/* --- Hovers and Focus states --- */
#rteh-song-request-form input:focus {
    border-color: var(--secondary-blue); outline: none; box-shadow: 0 0 5px rgba(21, 101, 192, 0.3);
}
#rteh-song-request-form button:hover {
    background: var(--primary-blue); transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* --- Message response area --- */
#rteh-response {
    margin-top: 1em; padding: 1em; border-radius: 4px; text-align: center; font-weight: bold;
}

/* --- Responsive Styles for Tablets (max-width: 768px) --- */
@media (max-width: 768px) {
    .rteh-form-grid {
        grid-template-columns: 1fr; /* Stack the grid */
        gap: 0;
    }
    .rteh-form-grid .form-row {
        margin-bottom: 20px;
    }

    /* Add a bit of space on tablets too */
    #rteh-song-request-container {
        margin-left: 15px;
        margin-right: 15px;
        padding: 25px;
    }
}

/* --- Responsive Styles for Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    /*
     * FINAL FIX for "two empty spaces":
     * We set left and right margins to provide a clear gap from the screen edge.
    */
    #rteh-song-request-container {
        /* This is the key change */
        margin-left: 1rem;  /* This creates one "space" */
        margin-right: 1rem; /* This creates the other "space" */
        
        /* The rest of the mobile styles */
        padding: 20px 15px;
        margin-top: 20px;
    }
}