/* Custom response styling */
.responsefbf-response {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin-top: 20px;
    padding: 20px;  /* Ensure the padding matches form size */
    width: 100%; /* Make the response full width */
    max-width: 100%;
    box-sizing: border-box;
    margin: auto;
}

.responsefbf-response .response-body {
    border-radius: 8px;
    padding: 16px; /* Increase padding for better spacing */
    background: var(--srfm-color-input-background-hover);
    border: 1px solid var(--srfm-color-input-border-disabled);
    font-size: var(--srfm-label-font-size);
    font-weight: var(--srfm-label-font-weight);
    line-height: var(--srfm-label-line-height);
}

.responsefbf-response .response-link {
    text-decoration: none;
    color: var(--srfm-color-input-link);
    font-weight: 600;
    align-self: center;
}

.responsefbf-response .response-image {
    border-radius: 8px;
    padding: 16px; /* Increase padding for better spacing */
    /*background: var(--srfm-color-input-background-hover);*/
    border: 1px solid var(--srfm-color-input-border-disabled);

    /* Add these properties for centering */
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
}

/* Smaller copy button */
.copy-button {
    cursor: pointer;
    padding: 8px 16px; /* Slightly larger padding for better spacing */
    background: #fff;
    font-size: 14px; /* Larger text for better readability */
    line-height: 20px;
    font-weight: 600;
    color: var(--srfm-color-input-text);
    border: 1px solid var(--srfm-color-input-border); /* Slightly thicker border */
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Increase gap for spacing between SVG and text */
    width: auto; /* Auto width to fit content */
    min-width: 100px; /* Ensure a wider button */
    text-align: center;
    align-self: center;
}

.copy-button svg {
    width: 20px; /* Set explicit width for the SVG */
    height: 20px; /* Set explicit height for the SVG */
    flex-shrink: 0; /* Prevent the SVG from shrinking */
}


/* Hide srfm-branding with !important */
.srfm-branding {
    display: none !important;
}

.polling-error-message {
    border-radius: 8px;
    padding: 16px; /* Increase padding for better spacing */
    background: var(--srfm-color-input-background-hover);
    border: 1px solid var(--srfm-color-input-border-disabled);
    font-size: var(--srfm-label-font-size);
    font-weight: var(--srfm-label-font-weight);
    line-height: var(--srfm-label-line-height);
    color: red;
}

#loadingMessage {
    font-size: 16px;
    color: #007bff;
    margin-top: 10px;
}

#resultMessage {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.result-links a {
    display: block;
    margin: 5px 0;
    text-decoration: none;
    color: #007bff;
}

.result-links a:hover {
    text-decoration: underline;
}