/* Basic styling for the container (flex remains key) */
.copy-container {
    display: flex;
    max-width: 500px; /* Slightly wider to accommodate two buttons */
    margin: 0.3em auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

/* Styling for the text input field (remains the same) */
#textToCopy {
    flex-grow: 1;
    padding: 10px;
    border: none;
    font-size: 16px;
    background-color: #f9f9f9;
    color: #333;
}

/* --- Button Group Styles --- */

/* Base style for BOTH buttons */
#copyButton, #shareButton {
    color: white;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevents buttons from shrinking */
}

/* Specific style for the COPY button (primary action) */
#copyButton {
    background-color: #007bff;
}
#copyButton:hover {
    background-color: #0056b3;
}

/* Specific style for the SHARE button (secondary action) */
#shareButton {
    background-color: #28a745; /* A success/green color */
}
#shareButton:hover {
    background-color: #1e7e34;
}

/* Styling for the SVG icons inside BOTH buttons */
#copyButton svg, #shareButton svg {
    stroke: white;
    width: 18px;
    height: 18px;
    display: block;
}