/* Overall Theme & Layout */
.mtgdp-container {
    display: flex;
    gap: 30px; /* Space between input and result */
    flex-wrap: wrap; /* Allows stacking on small screens */
    font-family: Arial, Helvetica, sans-serif;
    color: #333; /* Dark text for readability */
    background: #fff; /* White background to match site theme */
    padding: 10px 0;
}

.mtgdp-input-area {
    min-width: 280px; 
    flex: 1;
}

.mtgdp-result-area {
    flex: 2; /* Result area takes more space */
    min-width: 300px;
}

/* Input Styles */
.mtgdp-input-area textarea {
    font-family: monospace;
    border: 1px solid #ccc;
    padding: 8px;
    box-sizing: border-box; /* Ensures padding doesn't widen the element */
}

/* Price Overview Box */
.mtgdp-price-overview {
    padding: 15px;
    background: #f9f9f9; /* Light grey background for overview box */
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* View Toggle Buttons */
.mtgdp-actions {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mtgdp-actions .button {
    background-color: #333; /* Dark button background for contrast */
    color: #fff; /* White text on buttons */
    border-color: #333;
}
.mtgdp-actions .button:hover {
    background-color: #555;
}

/* Card List View (Text-Only) */
.mtgdp-list-view {
    /* List View is visible by default */
}
.mtgdp-list-row {
    margin-bottom: 5px;
    padding: 5px 0;
    cursor: default;
    border-bottom: 1px dotted #ccc;
    color: #333;
}
.mtgdp-list-row strong {
    font-weight: bold;
}
.mtgdp-list-row:hover {
    background-color: #f5f5f5;
}

/* Visual Grid View (Images) */
.mtgdp-visual-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.mtgdp-card-item {
    width: calc(50% - 8px); /* Two columns */
    display: flex;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.mtgdp-card-item img {
    width: 72px;
    height: auto;
    margin-right: 12px;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.mtgdp-card-info div {
    font-size: 0.9em;
    color: #666;
}
.mtgdp-card-info strong {
    color: #333;
    display: block;
    margin-bottom: 2px;
}

/* Purchase Links as Buttons */
.mtgdp-purchase-links a {
    display: inline-block;
    background-color: #0073aa; /* WordPress default primary color */
    color: white;
    padding: 3px 8px;
    margin: 5px 5px 0 0;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.85em;
    border: none;
    line-height: 1;
}
.mtgdp-purchase-links a:hover {
    background-color: #005f7e;
}