/* --- Main Container & Controls --- */
.mspa-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #e0e0e0;
}
.mspa-controls { 
    display: flex; flex-wrap: wrap; gap: 15px 20px; align-items: flex-end; 
    padding: 20px; background-color: #2c2f33; border: 1px solid #40444b; 
    margin-bottom: 20px; border-radius: 4px; 
}
.mspa-control-group { display: flex; flex-direction: column; flex-grow: 1; min-width: 160px; }
.mspa-control-group label { font-weight: 600; margin-bottom: 5px; font-size: 14px; color: #b9bbbe; }
.mspa-control-group input, .mspa-control-group select { padding: 8px; border: 1px solid #555; border-radius: 4px; width: 100%; background: #36393f; color: #e0e0e0; }
.mspa-control-group-button { flex-grow: 0; }
.mspa-control-group-button .button { background: #7289da; color: #fff; border: 0; padding: 7px 16px; height: 37px; }

/* --- Table Header --- */
.mspa-table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; min-height: 30px; }
#mspa-results-count { color: #b9bbbe; font-size: 14px; flex-grow: 1; }

/* --- View & Theme Switchers --- */
.mspa-view-switcher, .mspa-theme-switcher { display: flex; gap: 5px; margin-left: 15px; }
.mspa-view-button, .mspa-theme-button { background: #40444b; border: 1px solid #555; padding: 4px 8px; cursor: pointer; border-radius: 3px; color: #fff; line-height: 1; font-size: 13px; }
.mspa-view-button:hover, .mspa-theme-button:hover { background: #50545b; }
.mspa-view-button.active, .mspa-theme-button.active { background: #7289da; border-color: #7289da; color: #fff; cursor: default; font-weight: bold; }
.mspa-view-button .dashicons { font-size: 20px; width: 20px; height: 20px; vertical-align: middle; }

/* --- Loader --- */
.mspa-loader { border: 4px solid #40444b; border-top: 4px solid #7289da; border-radius: 50%; width: 24px; height: 24px; animation: mspa-spin 1s linear infinite; margin-left: 15px; }
@keyframes mspa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Results --- */
#mspa-results-area { margin-top: 10px; }
.mspa-no-results { background-color: #2c2f33; padding: 20px; text-align: center; border: 1px solid #40444b; border-radius: 4px; }

/* --- Table View --- */
.mspa-product-table { width: 100%; border-collapse: collapse; background: #36393f; }
.mspa-product-table th, .mspa-product-table td { border: 1px solid #40444b; padding: 12px; text-align: left; vertical-align: top; }
.mspa-product-table th { background-color: #2c2f33; font-weight: 600; color: #fff; }
.mspa-product-table td a { font-weight: 500; text-decoration: none; color: #7289da; }
.mspa-product-table td a:hover { text-decoration: underline; }

/* --- Card View --- */
.mspa-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; }
.mspa-product-card { display: flex; gap: 15px; background: #36393f; border: 1px solid #40444b; border-radius: 4px; padding: 15px; }
.mspa-card-image-container { flex: 0 0 120px; height: 120px; }
.mspa-card-image-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.mspa-card-image-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #2c2f33; color: #777; border-radius: 4px; }
.mspa-card-content { flex-grow: 1; display: flex; flex-direction: column; }
.mspa-card-header h3 { margin: 0 0 8px; font-size: 1.1em; }
.mspa-card-header h3 a { text-decoration: none; color: #fff; }
.mspa-card-excerpt { font-size: 0.9em; color: #b9bbbe; margin-bottom: 10px; }
.mspa-card-body { font-size: 0.9em; color: #e0e0e0; }
.mspa-card-body div { margin-bottom: 5px; }
.mspa-card-footer { margin-top: auto; padding-top: 10px; }
.mspa-card-footer a { color: #7289da; }

/* --- Pagination --- */
.mspa-pagination-wrapper { margin-top: 20px; text-align: center; }
.mspa-pagination-wrapper button { color: #fff; background: #40444b; border: 1px solid #555; padding: 8px 12px; margin: 0 2px; cursor: pointer; border-radius: 4px; }
.mspa-pagination-wrapper button:hover:not(:disabled) { background-color: #50545b; }
.mspa-pagination-wrapper button.current { background-color: #7289da; font-weight: bold; cursor: default; border-color: #7289da; }
.mspa-pagination-wrapper button:disabled { background-color: #2c2f33; color: #777; cursor: not-allowed; }
.mspa-pagination-ellipsis { display: inline-block; padding: 8px 6px; color: #777; vertical-align: middle; }