/* Banner container */
#fb-banner {
    display: none; /* Initially hidden */
    position: fixed;
    top: 50%; /* Centre vertically */
    left: 50%; /* Centre horizontally */
    transform: translate(-50%, -50%); /* Adjust position to centre */
    width: 90%; /* Responsive width */
    max-width: 1000px; /* Maximum width */
    padding: 20px;
    background-color: #000000; /* Background color of the banner */
    color: #ffffff; /* Default text color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 10000; /* Ensure the banner is above other content */
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box; /* Ensure padding does not affect overall width */
    border: 3px solid red; /* Red border line */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    #fb-banner {
        width: 95%; /* Adjust width for smaller screens */
        max-width: none; /* Remove max-width restriction */
    }
}

/* Media query for very small screens */
@media (max-width: 480px) {
    #fb-banner {
        width: 100%; /* Full width on very small screens */
        padding: 10px; /* Reduce padding for small screens */
        font-size: 14px; /* Adjust font size for better readability */
    }
}

/* Style for input fields and submit button */
.fb-input, #fb-submit-button {
    width: 100%; /* Full width for input fields and submit button */
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 10px; /* Rounded corners for input fields and button */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Style for submit button */
#fb-submit-button {
    padding: 10px;
    border: none;
    border-radius: 10px; /* Rounded corners for the submit button */
    cursor: pointer;
    background-color: #ff5722; /* Background color for submit button */
    color: #ffffff; /* Text color for submit button */
    text-align: center; /* Center the button label */
    font-size: 16px; /* Font size for the button label */
}

/* Style for disclaimer text */
#fb-disclaimer {
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
    text-align: center; /* Center the disclaimer text */
}

/* Style for close button */
.fb-close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 18px;
    color: #ffffff; /* Color for the close button */
}

/* Style for dropdowns within the banner */
#fb-banner select.fb-input {
    padding: 6px;
    background-color: #444444; /* Background color for the dropdown */
    color: #cccccc; /* Text color for the dropdown */
    border-radius: 10px; /* Rounded corners for the dropdown */
    box-sizing: border-box; /* Include padding in width calculation */
    margin-bottom: 10px; /* Space below the dropdown */
    z-index: 10100 !important; /* Ensure dropdown is above other elements */
    position: absolute !important; /* Ensure dropdown is positioned correctly */
}

#fb-banner .form-group select {
    position: relative;
    z-index: 10050 !important; /* Higher than the banner */
}


/* Increasing specificity */
#fb-banner .form-group select.fb-input {
    z-index: 10100 !important;
    position: relative !important;
}

#fb-banner {
    overflow: visible !important; /* Ensure no overflow clipping */
    clip: auto !important; /* Reset any clipping */
    visibility: visible !important; /* Ensure visibility */
}

select.fb-input {
    z-index: 10100 !important; 
    position: relative !important; 
    overflow: visible !important; /* Ensure no overflow clipping */
    clip: auto !important;
    visibility: visible !important;
}

/* Dropdown selectors should have a higher z-index to be above the banner */
.fb-input {
    position: relative !important; /* Required for z-index to work */
    z-index: 10100 !important; /* Higher than the banner's z-index */
}