/* Form container */

#cfp-contact-form {
padding: 20px;
border-radius: 6px;
/* background-color will be inline via PHP */
}

#cfp-form {
max-width: 500px;
margin: 15px auto;
padding: 15px;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 5px;
background: transparent; /* background controlled by PHP */
}

#cfp-form div {
margin: 0 0 10px 0; /* Bottom margin only, tweak as needed */
}

/* Inputs, selects, textareas */
#cfp-form input,
#cfp-form textarea,
#cfp-form select {
width: 100%;
margin-bottom: 7px;
padding: 6px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

/* Submit button */
#cfp-form button {

width: 30%;  
margin: 20px auto 10px auto; /* Top margin: 20px, bottom: 10px, center horizontally */  
background: #0073aa;  
color: white;  
padding: 10px 0;  
border: none;  
border-radius: 4px;  
cursor: pointer;  
font-size: 15px;  
text-align: center;

}

#cfp-form button:hover {
background: #005e8a;
}

/* Phone input row: 30% country code + 70% phone number */
.cfp-phone-row {
display:flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 7px;
}
.cfp-country-code {
width: 30%;
min-width: 60px;
padding: 6px;
font-size: 14px;
}

.cfp-phone-number {
width: 70%;
padding: 6px;
font-size: 14px;
}

#cfp-spinner {
display: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
#cfp-form {

margin: 15px 2px; /* 20px top/bottom, 15px left/right */  
    padding: 15px 15px;  
}  

.cfp-phone-row {  
    flex-wrap: nowrap;  
}  

.cfp-country-code,  
.cfp-phone-number {  
    width: unset;  
    flex: 1;  
}  

.cfp-country-code {  
    max-width: 100px;  
    flex: 0 0 30%;  
}  

.cfp-phone-number {  
    flex: 0 0 70%;  
}

}

/* Response message */
#cfp-response {
margin-top: 10px;
font-weight: bold;
color: green;
}