/*
 * Markdown Prompt Copier Styles
 */

/* --- Card Wrapper: Main Layout --- */
.mpc-card-wrapper {
    display: flex;
    max-width: 1200px; /* Adjust max width as needed */
    margin: 20px auto;
    background-color: #044685; /* Very light gray background */
    border-radius: 8px;
    overflow: hidden; /* Important for containing image borders */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
    color: #fff;
}

/* --- Columns --- */
.mpc-column {
    padding: 0;
    flex: 1; /* Both columns take equal width */
    min-width: 0; /* Ensures columns can shrink */
}

/* Image Column Styling */
.mpc-column-image {
    background-color: #044685; /* Darker background for the image column */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpc-image-content {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Details/Prompt Column Styling */
.mpc-column-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Prompt Section --- */
.mpc-details-section {
    background-color: #eee; /* Slightly lighter inner background for sections */
    padding: 15px;
    border-radius: 6px;
}

.mpc-prompt-box {
    flex-grow: 1; /* Takes up available space */
    display: flex;
    flex-direction: column;
    background-color: #fff; /* Dark background for the prompt box */
    color: #044685; /* White text for contrast */
}

.mpc-title {
    margin: 0 0 10px 0;
    font-weight: bold;
    font-size: 1.1em;
    color: #044685; /* Use a highlight color for the title */
}

.mpc-prompt-content {
    color: #044685;
    flex-grow: 1;
    font-size: 0.95em;
    line-height: 1.5;
    white-space: pre-line; /* Keeps formatting and wraps text */
    margin-bottom: 15px;
    padding-right: 5px; /* for slight spacing */
}

/* --- Copy Button --- */
.mpc-copy-button {
    background-color: #044685; /* A vibrant copy button color (orange/red) */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box; /* Includes padding in the element's total width and height */
}

.mpc-copy-button:hover {
    background-color: #333;
}

/* --- Category and Tags Section --- */
.mpc-category-tags-box {
    background-color: #fff; /* Dark background for tags box too */
    color: #fff;
    font-size: 0.9em;
}

.mpc-label {
    font-weight: bold;
    color: #044685;
}

.mpc-category-tags-box p {
    margin: 5px 0;
}

/* --- Responsiveness: Stacking columns on smaller screens --- */
@media (max-width: 768px) {
    .mpc-card-wrapper {
        flex-direction: column;
    }
}